《网页设计与制作实用教程》-第9章ppt课件

.,第九章创建网页动画,.,本章学习目标,掌握动画的基本原理和网页动画类型熟悉FlashMX2004软件界面和基本操作掌握用FlashMX2004软件制作网页动画的一般方法掌握制作运动、形状、遮罩、曲线动画的一般方法了解ImageReady和Swith软件,.,1.动画的基本原理,利用视觉暂留原理，连续播放一系列静止的画面，给人造成连续变化的效果。,.,2.网页动画,常见的网页动画格式Java格式GIF89a格式SWF格式网页动画设计考虑因素带宽下载时间流式传输动画格式,.,3.创建GIF动画,A：设置帧延迟。单位为秒，默认值为0秒。B：设置动画播放的次数。C：单击将第一帧设置为当前帧。D：单击将当前帧的上一帧设为当前帧。E：播放/停止动画按钮。,F：单击将当前帧的下一帧设为当前帧。G：单击加入过渡帧。如果想在相邻的两帧之间插入动画效果，可用该按钮在两帧中间插入过渡帧。H：复制当前帧。I：删除当前帧。,3.1面板介绍,.,3.2制作gif动画,启动ImageReady，新建一动画文件,设计如下图的图像内容，割去左右部分，单独放置在一图层中。,.,在背景图层的左右图层之间插入一“邮件”图层。设计动画第一帧：隐藏“邮件”图层。第二帧：点击“复制当前帧”按钮，使“邮件”图层可见，并调整其位置。第三帧/第四帧/第五帧：方法同前，调整“邮件”图层的位置,.,设置五帧的延迟时间均为0.2秒执行【文件】【将优化结果存储为】菜单命令，优化并保存动画,.,4.创建Flash动画,基本概念实例1：Flash图形绘制实例2：创建运动渐变动画实例3：创建形状渐变动画实例4：创建路径运动动画实例5：创建遮罩动画,.,4.1基本概念,分辨率位图、矢量图图层场景帧、关键帧与时间轴,.,4.2绘制Flash图形,画直线画圆画矩形使用钢笔画曲线修改图形箭头工具贝兹工具套索工具自由变形工具着色工具墨水瓶油漆桶吸管填充转换工具,.,4.3实例2：创建运动渐变动画,目标：创建一个由小到大的文字运动渐变动画步骤：,启动FlashMX2004，执行【修改】【文档】菜单命令或按Ctrl+J组合键或直接单击属性面板中的尺寸右边的按钮，打开文档属性对话框。,.,双击时间线上的文本“图层1”，将图层命名为“移动文本”,选择“移动文本”图层上的第一帧，输入文本“创作运动渐变动画！”。,.,选择第一帧，单击右键，执行“创建动画动作”命令,.,鼠标单击第30帧，执行【插入】【时间轴】【关键帧】命令，或者在30帧处单击鼠标右键，执行“插入关键帧”命令，或者按【F6】快捷键，插入关键帧。然后选择关键帧的内容“创作运动渐变动画！”，对其属性进行设置，设置坐标轴X为160，Y为160，其余保持不变。,当时间轴底层颜色变为紫色，说明动画设置正确。,.,选择动画创作完毕，执行【控制】【测试影片】菜单命令，或按【Ctrl+Enter】组合键调试影片,保存文件，并执行【文件】【发布设置】菜单命令，进入“发布设置”界面，如下设置好后点击发布按钮。,.,4.4实例3：创建形状渐变动画,目标：创建圆变成矩形的形状渐变动画，在运动过程中颜色也进行相应的变化。步骤：,启动FlashMX2004，新建一空白文档，设置文档的属性如图。,.,双击时间线上的文本“图层1”，将图层命名为“形状变化”。,单击椭圆工具图标，在舞台工作区中画一个椭圆。通过属性面板对椭圆进行属性设置。,.,选择第一帧，在属性设置面板中的“中间”下拉列表框中选择“形状”，完成第一帧的设置。,在20帧处插入一关键帧，选择关键帧，删除椭圆，单击工具箱中的矩形工具图标，画一个矩形。设置其坐标轴X为400，Y为180，宽度为110，高度为90，填充色为#666633，边线颜色为#CC99FF。,.,选择动画创作完毕，时间轴如图所示。,保存文件，并执行【文件】【发布设置】菜单命令发布动画。,.,4.5实例4：路径运动动画,目标：创建地球绕太阳转动的动画。步骤：,启动FlashMX2004，新建一空白文档，设置影片尺寸为550*400，背景颜色为#333333，帧频为12，标尺单位保持不变。,.,双击时间线上的文本“图层1”，将图层命名为“太阳”。,单击椭圆工具图标，在舞台工作区中画一个圆，去掉边线。设置其坐标轴X为350，Y为160，宽度为70，高度为70。用鼠标选择舞台上的椭圆，执行【窗口】【设计面板】【混色器】菜单命令，打开混色器，选择“径向”，设置渐变色。,.,鼠标选择第50帧，执行【插入】【时间轴】【帧】，或者按F5快捷键。,执行【插入】【时间轴】【图层】或者直接按时间轴面板上的“插入图层”按钮，新建图层，并将图层2命名为“地球公转”。,.,鼠标选择“地球公转”层第一帧，按照上述同样的方法在舞台上画一个正圆，去掉边线，然后设置其坐标轴X为480，Y为180，宽度为35，高度为35。,右击“地球公转”层第一帧，执行“创建补间动画”命令。然后选择第50帧，插入关键帧。,.,鼠标选择“地球公转”图层，执行【插入】【时间轴】【运动引导层】命令，或单击右键，执行“添加引导线”命令，或者直接在时间线面板上单击“添加引导图层”按钮。,.,在“引导线：地球公转”图层上画一椭圆，去掉填充部分，设置椭圆边线坐标轴X为10，Y为60，宽度为500，高度为250。,右击“地球公转”层第一帧，执行“创建补间动画”命令。然后选择第50帧，插入关键帧。,.,动画创作完毕，按Ctrl+Enter键测试动画。保存文件并发布动画。,选择“地球公转”图层，分别在第16帧和第33帧插入关键帧，设置小球的位置如图,.,4.6实例5：遮罩动画,目标：创建探照灯效果的遮罩动画。步骤：,启动FlashMX2004，新建一空白文档，设置影片尺寸为400*200，背景颜色为#333333，帧频为12，标尺单位保持不变。,.,双击时间线上的文本“图层1”，将图层命名为“背景”。,单击工具箱中的文本工具图标，在舞台工作区中输入文本“FLASH动画”。设置文本类型为“静态文本”，字体为“隶书”，大小为“50”，颜色为#999999，字符间距为2，坐标轴X为70，Y为70，其余保持不变。,.,新建一图层，并命名为“底层”。,执行选择新建的“底层”为当前层，鼠标单击工具箱上矩形工具图标，在舞台上画一矩形，去掉边线，设置其坐标轴X为0，Y为0，宽度为400，高度为200，背景色为#FFFFFF。,在矩形上方输入文字“FLASH动画”，设置文本类型为“静态文本”，字体为“方正粗倩简体”，大小为“50”，颜色为#FF9933，字符间距为2，坐标轴X为70，Y为70，其余保持不变。,.,新建图层，并命名为“遮罩”。,选中“遮罩”层，在舞台工作区中画一个圆，去掉边线，设置其坐标轴X为5，Y为65，宽度为80，高度为80。,鼠标右击“遮照”层第一帧，执行“创建补间动画”命令。然后选择第35帧，插入关键帧。然后选择第35关键帧中的圆，设置坐标轴X为315，Y为65。,.,选择“背景”和“底层”图层中的第35帧，按F5键，插入帧。,鼠标右击“遮罩”层，执行“遮罩层”命令。,.,动画创作完毕后时间轴如图所示。,舞台如图所示。,.,动画创作完毕，按Ctrl+Enter键测试动画。保存文件并发布动画。,.,5.SwishMax快速制作flash动画,SwishMax界面介绍时间线窗口实例：用SwishMax快速制作flash动画,Swish在某些特定动画制作方面比Flash更方便、更省时和更具有特效，特别是制作课件的片头或网页的文字动画。,.,5.1SwishMax界面介绍,.,5.2时间线窗口,添加脚本按钮：通过单击此按钮可以对帧、影片控制、精灵等添加脚本。删除按钮：通过单击删除按钮可以删除选定的效果或脚本。选项按钮：通过单击选项按钮可以设置时间线的显示状态，包括宽、窄、高、矮等。收缩按钮：通过单击收缩按钮可以控制时间线左边按钮的缩放。,.,当鼠标选择工作区中某一对象时，时间线上的“添加脚本”按钮转变成为“添加效果”按钮,.,5.3实例：用SwishMax快速制作flash动画,目标：创建一个文字爆炸效果的动画。步骤：,启动Swish，新建一空影片。,.,设置影片属性：背景颜色为白色，宽度为400像素，高度为200像素，帧频为12。,单击在工具箱中单击文本图标，在“文本”面板框中输入“Swishmax”，设置字体为“问鼎中特广告体”，字体大小为36，颜色为#663366。,.,选择工具区中的“Swi