《Java培训大纲》由会员分享，可在线阅读，更多相关《Java培训大纲（45页珍藏版）》请在金锄头文库上搜索。
1、 第九章 创建网页动画第1页，共45页。本章学习目标l l 掌握动画的基本原理和网页动画类型l l 熟悉Flash MX 2004软件界面和基本操作l l 掌握用Flash MX 2004软件制作网页动画 的一般方法l l 掌握制作运动、形状、遮罩、曲线动画 的一般方法 l l 了解ImageReady和Swith软件第2页，共45页。1. 动画的基本原理l l利用视觉暂留原理，连续播放一系列静止的画面，给人造成连续变化的效果。第3页，共45页。2. 网页动画1.1.常见的网页动画格式常见的网页动画格式 l lJavaJava格式格式l lGIF89aGIF89a格式格式l lSWFSWF格式
2、格式2.2.网页动画设计考虑因素网页动画设计考虑因素 l l带宽带宽l l下载时间下载时间l l流式传输流式传输l l动画格式动画格式第4页，共45页。3. 创建GIF动画A A：设置帧延迟。单位为秒，默认值为：设置帧延迟。单位为秒，默认值为0 0秒。秒。B B：设置动画播放的次数。：设置动画播放的次数。C C：单击将第一帧设置为当前帧。：单击将第一帧设置为当前帧。D D：单击将当前帧的上一帧设为当前帧。：单击将当前帧的上一帧设为当前帧。E E：播放：播放/ /停止动画按钮。停止动画按钮。F F：单击将当前帧的下一帧设为当前帧。：单击将当前帧的下一帧设为当前帧。GG：单击加入过渡帧。如果想在相
3、邻的：单击加入过渡帧。如果想在相邻的两帧之间插入动画效果，可用该按两帧之间插入动画效果，可用该按钮在两帧中间插入过渡帧。钮在两帧中间插入过渡帧。H H：复制当前帧。：复制当前帧。I I：删除当前帧。：删除当前帧。3.1面板介绍第5页，共45页。3.2 制作gif动画1.1.启动启动ImageReadyImageReady，新建一，新建一动画文件动画文件2.2.设计如下图的图像内容，设计如下图的图像内容，割去左右部分，单独放置割去左右部分，单独放置在一图层中。在一图层中。第6页，共45页。3.3.在背景图层的左右图层之间插入一在背景图层的左右图层之间插入一“ “邮件邮件” ”图层。图层。4.4.
4、设计动画设计动画l l第一帧：隐藏第一帧：隐藏“ “邮件邮件” ”图层。图层。l l第二帧：点击第二帧：点击“ “复制当前帧复制当前帧” ”按钮，使按钮，使“ “邮件邮件” ”图层可见，并图层可见，并调整其位置。调整其位置。l l第三帧第三帧 / / 第四帧第四帧 / / 第五帧：第五帧： 方法同前，调整方法同前，调整“ “邮件邮件” ”图层的位置图层的位置第7页，共45页。3.3.设置五帧的延迟时间均为设置五帧的延迟时间均为0.20.2秒秒 4.4.执行【文件】执行【文件】【将优化结果存储为】【将优化结果存储为】菜单命令菜单命令 ，优化并保存动画，优化并保存动画第8页，共45页。4. 创建F
5、lash动画l l基本概念l l实例1：Flash图形绘制 l l实例2：创建运动渐变动画 l l实例3：创建形状渐变动画l l实例4：创建路径运动动画l l实例5：创建遮罩动画 第9页，共45页。4.1 基本概念l l分辨率l l位图、矢量图l l图层l l场景l l帧、关键帧与时间轴第10页，共45页。4.2 绘制Flash图形l l画直线画直线l l画圆画圆l l画矩形画矩形l l使用钢笔画曲线使用钢笔画曲线l l修改图形修改图形 箭头工具箭头工具 贝兹工具贝兹工具 套索工具套索工具 自由变形工具自由变形工具l l着色工具着色工具 墨水瓶墨水瓶 油漆桶油漆桶 吸管吸管 填充转换工具填充转
6、换工具第11页，共45页。4.3 实例2：创建运动渐变动画 l l目标：创建一个由小到大的文字运动渐变动画目标：创建一个由小到大的文字运动渐变动画 l l步骤：步骤：1.1.启动启动Flash MX 2004 Flash MX 2004 ，执行【修改】，执行【修改】【文档】菜单命令【文档】菜单命令或按或按Ctrl+JCtrl+J组合键或直接单击属组合键或直接单击属性面板中的尺寸右边性面板中的尺寸右边的按钮，打开文档属的按钮，打开文档属性对话框。性对话框。第12页，共45页。2.2.双击时间线上的文本双击时间线上的文本“图层图层1”1”，将图层命名为，将图层命名为“移动移动文本文本” ” 3.3
7、.选择选择“移动文本移动文本”图层上的第一帧，输入文本图层上的第一帧，输入文本“创作创作运动渐变动画！运动渐变动画！”。 第13页，共45页。4.4.选择第一帧，单击右键，执行选择第一帧，单击右键，执行“创建动画动作创建动画动作”命令命令 第14页，共45页。5.5.鼠标单击第鼠标单击第3030帧，执行【插入】帧，执行【插入】【时间轴】【时间轴】【关键帧【关键帧】命令，】命令，或者在或者在3030帧处单击鼠标右键，执行帧处单击鼠标右键，执行“插入关键帧插入关键帧”命令，命令，或者按【或者按【F6F6】快捷键，插入关键帧。】快捷键，插入关键帧。然后选择关键帧的内容然后选择关键帧的内容“创作运动渐
8、变动画！创作运动渐变动画！”，对其属，对其属性进行设置，设置坐标轴性进行设置，设置坐标轴X X为为160160，Y Y为为160160，其余保持不变。，其余保持不变。 当时间轴底层颜色变为紫色，说明动画设置正确。 第15页，共45页。6.6.选择动画创作完毕，执行【控制】选择动画创作完毕，执行【控制】【测试影片】菜单命令，【测试影片】菜单命令，或按【或按【Ctrl+EnterCtrl+Enter】组合键调试影片】组合键调试影片 7.7.保存文件，并执行【文件保存文件，并执行【文件】【发布设置】菜单命【发布设置】菜单命令，进入令，进入“发布设置发布设置”界界面，如下设置好后点击发面，如下设置好后
9、点击发布按钮。布按钮。第16页，共45页。4.4 实例3：创建形状渐变动画 l l目标：创建圆变成矩形的形状渐变动画，在运动过程中颜色目标：创建圆变成矩形的形状渐变动画，在运动过程中颜色也进行相应的变化。也进行相应的变化。 l l步骤：步骤：1.1.启动启动Flash MX 2004 Flash MX 2004 ，新，新建一空白文档，设置文档建一空白文档，设置文档的属性如图。的属性如图。第17页，共45页。2.2.双击时间线上的文本双击时间线上的文本“ “图层图层1”1”，将图层命名为，将图层命名为“ “形状变化形状变化” ”。 3.3.单击椭圆工具图标单击椭圆工具图标 ，在舞台工作区中画一个
10、，在舞台工作区中画一个椭圆。通过属性面板对椭圆进行属性设置。椭圆。通过属性面板对椭圆进行属性设置。 第18页，共45页。4.4.选择第一帧，在属性设置面板中的选择第一帧，在属性设置面板中的“中间中间”下拉列表框中选下拉列表框中选择择“形状形状”，完成第一帧的设置。，完成第一帧的设置。 5.5.在在2020帧处插入一关键帧，选择关键帧，删除椭圆，单击帧处插入一关键帧，选择关键帧，删除椭圆，单击工具箱中的矩形工具图标工具箱中的矩形工具图标 ，画一个矩形。，画一个矩形。设置其坐标轴设置其坐标轴X X为为400400，Y Y为为180180，宽度为，宽度为110110，高度为，高度为9090，填充色为
11、，填充色为#666633#666633，边线颜色为，边线颜色为#CC99FF#CC99FF。 第19页，共45页。6.6.选择动画创作完毕，时间轴如图所示。选择动画创作完毕，时间轴如图所示。7.7.保存文件，并执行【文件保存文件，并执行【文件】【发布设置】菜单命【发布设置】菜单命令发布动画。令发布动画。第20页，共45页。4.5 实例4：路径运动动画 l l目标：创建地球绕太阳转动的动画目标：创建地球绕太阳转动的动画 。 l l步骤：步骤：1.1.启动启动Flash MX 2004 Flash MX 2004 ，新建一空白文档，设置影片尺，新建一空白文档，设置影片尺寸为寸为550*400550
12、*400，背景颜色为，背景颜色为#333333#333333，帧频为，帧频为1212，标尺，标尺单位保持不变单位保持不变 。第21页，共45页。2.2.双击时间线上的文本双击时间线上的文本“ “图层图层1”1”，将图层命名为，将图层命名为“ “太阳太阳” ”。 3.3.单击椭圆工具图标单击椭圆工具图标 ，在舞台工作区中画一个圆，在舞台工作区中画一个圆，去掉边线。设置其坐标轴去掉边线。设置其坐标轴X X为为350350，Y Y为为160160，宽度为，宽度为7070，高度为高度为7070。用鼠标选择舞台上的椭圆，执行【窗口】。用鼠标选择舞台上的椭圆，执行【窗口】【设设计面板】计面板】【混色器】【
13、混色器】菜单命令，打开混色菜单命令，打开混色器，选择器，选择“ “径向径向” ”，设置渐变色。设置渐变色。 第22页，共45页。4.4.鼠标选择第鼠标选择第5050帧，执行【插入】帧，执行【插入】【时间轴】【时间轴】【帧】，【帧】，或者按或者按F5F5快捷键。快捷键。 5.5.执行【插入】执行【插入】【时间轴】【时间轴】【图层】或者直接按时间轴面【图层】或者直接按时间轴面板上的板上的“插入图层插入图层”按钮，新建图层按钮，新建图层 ，并将图层，并将图层2 2命名为命名为“地球公转地球公转”。第23页，共45页。6.6.鼠标选择鼠标选择“地球公转地球公转”层第一帧，按照上述同样的方法在层第一帧，
14、按照上述同样的方法在舞台上画一个正圆，去掉边线，然后设置其坐标轴舞台上画一个正圆，去掉边线，然后设置其坐标轴X X为为480480，Y Y为为180180，宽度为，宽度为3535，高度为，高度为3535。 7.7.右击右击“地球公转地球公转”层第一帧，执行层第一帧，执行“创建补间动画创建补间动画”命令。然命令。然后选择第后选择第5050帧，插入关键帧。帧，插入关键帧。 第24页，共45页。8.8.鼠标选择鼠标选择“地球公转地球公转”图层，执行【插入】图层，执行【插入】【时间轴】【时间轴】【运动引导层】命令，或单击右键，执行运动引导层】命令，或单击右键，执行“添加引导线添加引导线”命令，命令，或
15、者直接在时间线面板上单击或者直接在时间线面板上单击“添加引导图层添加引导图层”按钮。按钮。第25页，共45页。10.10.在在“引导线：地球公转引导线：地球公转”图层上画一椭圆，去掉填充部分，图层上画一椭圆，去掉填充部分，设置椭圆边线坐标轴设置椭圆边线坐标轴X X为为1010，Y Y为为6060，宽度为，宽度为500500，高度为，高度为250 250 。9.9.右击右击“地球公转地球公转”层第一帧，执行层第一帧，执行“创建补间动画创建补间动画”命令。然命令。然后选择第后选择第5050帧，插入关键帧。帧，插入关键帧。 第26页，共45页。12.12.动画创作完毕，按动画创作完毕，按Ctrl+E
16、nterCtrl+Enter键测试动画。保存文件并发键测试动画。保存文件并发布动画。布动画。 11.11.选择选择“地球公转地球公转”图层，分别在第图层，分别在第1616帧和第帧和第3333帧插入关键帧，帧插入关键帧，设置小球的位置如图设置小球的位置如图 第27页，共45页。4.6 实例5：遮罩动画 l l目标：创建探照灯效果的遮罩动画目标：创建探照灯效果的遮罩动画 。 l l步骤：步骤：1.1.启动启动Flash MX 2004 Flash MX 2004 ，新建一空白文档，设置影片尺寸，新建一空白文档，设置影片尺寸为为400*200400*200，背景颜色为，背景颜色为#333333#33
17、3333，帧频为，帧频为1212，标尺单位，标尺单位保持不变保持不变 。第28页，共45页。2.2.双击时间线上的文本双击时间线上的文本“ “图层图层1”1”，将图层命名为，将图层命名为“ “背景背景” ”。 3.3.单击工具箱中的文本工具图标单击工具箱中的文本工具图标 ，在舞台工作区中，在舞台工作区中输入文本输入文本“FLASH“FLASH动画动画” ”。设置文本类型为。设置文本类型为“ “静态文本静态文本” ”，字体为字体为“ “隶书隶书” ”，大小为，大小为“50”“50”，颜色为，颜色为#999999#999999，字符间，字符间距为距为2 2，坐标轴，坐标轴X X为为7070，Y Y
18、为为7070，其余保持不变。，其余保持不变。 第29页，共45页。4.4.新建一图层，并命名为新建一图层，并命名为“底层底层”。 5.5.执行选择新建的执行选择新建的“底层底层”为当前层，鼠标单击工具箱上矩形为当前层，鼠标单击工具箱上矩形工具图标，在舞台上画一矩形，去掉边线，设置其坐标轴工具图标，在舞台上画一矩形，去掉边线，设置其坐标轴X X为为0 0，Y Y为为0 0，宽度为，宽度为400400，高度为，高度为200200，背景色为，背景色为#FFFFFF#FFFFFF。 6.6.在矩形上方输入文字在矩形上方输入文字“FLASH“FLASH动画动画”，设置文本类型为，设置文本类型为“静静态文
19、本态文本”，字体为，字体为“方正粗倩简体方正粗倩简体”，大小为，大小为“50”“50”，颜色，颜色为为#FF9933#FF9933，字符间距为，字符间距为2 2，坐标轴，坐标轴X X为为7070，Y Y为为7070，其余保持，其余保持不变。不变。 第30页，共45页。7.7.新建图层，并命名为新建图层，并命名为“遮罩遮罩”。 8.8.选中选中“遮罩遮罩”层，在舞台工作区中画一个圆，去掉边层，在舞台工作区中画一个圆，去掉边线，设置其坐标轴线，设置其坐标轴X X为为5 5，Y Y为为6565，宽度为，宽度为8080，高度为，高度为8080。 9.9.鼠标右击鼠标右击“遮照遮照”层第一帧，执行层第一
20、帧，执行“创建补间动画创建补间动画”命令。命令。然后选择第然后选择第3535帧，插入关键帧。然后选择第帧，插入关键帧。然后选择第3535关键帧中的圆，关键帧中的圆，设置坐标轴设置坐标轴X X为为315315，Y Y为为6565。第31页，共45页。10.10.选择选择“背景背景”和和“底层底层”图层中的第图层中的第3535帧，按帧，按F5F5键，键，插入帧。插入帧。 11.11.鼠标右击鼠标右击“遮罩遮罩”层，执行层，执行“遮罩层遮罩层”命令命令 。第32页，共45页。12.12.动画创作完毕后时间轴如图所示。动画创作完毕后时间轴如图所示。 13.13.舞台如图所示。舞台如图所示。 第33页，
21、共45页。14.14.动画创作完毕，按动画创作完毕，按Ctrl+EnterCtrl+Enter键测试动画。保存文件并发布动键测试动画。保存文件并发布动画。画。第34页，共45页。5. Swish Max快速制作flash动画1.1.Swish Max界面介绍 2.2.时间线窗口 3.3.实例：用Swish Max快速制作flash动画 Swish在某些特定动画制作方面比Flash更方便、更省时和更具有特效，特别是制作课件的片头或网页的文字动画。 第35页，共45页。5.1 Swish Max界面介绍第36页，共45页。5.2 时间线窗口 l l添加脚本按钮：通过单击此按钮可以对帧、影片控制、精
22、灵等添加脚本。添加脚本按钮：通过单击此按钮可以对帧、影片控制、精灵等添加脚本。l l删除按钮：通过单击删除按钮可以删除选定的效果或脚本。删除按钮：通过单击删除按钮可以删除选定的效果或脚本。l l选项按钮：通过单击选项按钮可以设置时间线的显示状态，包括宽、窄、高、矮选项按钮：通过单击选项按钮可以设置时间线的显示状态，包括宽、窄、高、矮等。等。l l收缩按钮：通过单击收缩按钮可以控制时间线左边按钮的缩放。收缩按钮：通过单击收缩按钮可以控制时间线左边按钮的缩放。 第37页，共45页。l l当鼠标选择工作区中某一对象时，时间线上的当鼠标选择工作区中某一对象时，时间线上的“添加脚添加脚本本” ” 按钮转
23、变成为按钮转变成为“添加效果添加效果”按钮按钮 第38页，共45页。5.3实例：用Swish Max快速制作flash动画 l l目标：创建一个文字爆炸效果的动画目标：创建一个文字爆炸效果的动画 。 l l步骤：步骤：1.1.启动启动Swish Swish ，新建一空影片。，新建一空影片。第39页，共45页。2.2.设置影片属性：背景颜色为白设置影片属性：背景颜色为白色，宽度为色，宽度为400400像素，高度为像素，高度为200200像素，帧频为像素，帧频为12 12 。 3.3.单击在工具箱中单击文本图标，单击在工具箱中单击文本图标，在在“文本文本”面板框中输入面板框中输入“Swishmax
24、”“Swishmax”，设置字体为，设置字体为“问问鼎中特广告体鼎中特广告体”，字体大小为，字体大小为3636，颜色为，颜色为#663366#663366。第40页，共45页。4.4.选择工具区中的选择工具区中的“Swishmax”“Swishmax”对象，然后点击对象，然后点击“添加效果添加效果”按按钮，执行【一次关闭】钮，执行【一次关闭】【爆炸】菜单命令。【爆炸】菜单命令。第41页，共45页。5.5.鼠标添加效果完成后的时间线如图。鼠标添加效果完成后的时间线如图。6.6.动画设计完毕，单击工具栏上的动画设计完毕，单击工具栏上的“播放影片播放影片”按钮，预览按钮，预览动画动画 。 第42页，共45页。7.7.鼠标执行【文件】鼠标执行【文件】【保存】菜单命令，在弹出的对话框中【保存】菜单命令，在弹出的对话框中输入文件名为输入文件名为SwishmaxSwishmax，单击保存按钮，保存文件。执行【，单击保存按钮，保存文件。执行【文件】文件】【导出】【导出】【SWFSWF】命令，导出动画】命令，导出动画 。第43页，共45页。谢 谢！接下来的内容：网页图像基础第44页，共45页。演讲完毕，谢谢观看！第45页，共45页。
