(教学课件)chapter3利用Flash制作动画.pptx

1、网页设计与制作实用网页设计与制作实用教程（第教程（第3 3版）版）高等教育出版社高等教育出版社第3章 利用Flash制作动画制作“慧衡科技”网站动画计 算 机 工 程 学 院 计 算 机 基 础 教 学部学习目标 掌握动画的基本原理 掌握创建传统补间动画、补间形状动画的方法 掌握遮罩图层、引导图层的使用方法 掌握创建元件的方法及元件的使用深圳职业技术学院 计算机基础教研室2网 页 设 计 与 制 作 实 用 教 程（第 3 版）实训项目为了丰富网页内容，需要为网站制作动画:(1)动态logo(2)Banner动画(3)图像切换动画深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实

2、 用 教 程（第 3 版）3项目分析设计思路：（1）动态logo，根据公司的性质是一个科技公司，在已有标志图像的基础上创建了一个“drupal”图像沿着轨迹运动的动画。（2）banner动画，在已有banner图像的基础上对文本设计了遮罩显示效果，突出显示文本内容，同时为了不太单调，制作了一个对应图标移动的动画。（3）图像切换动画，对选取出的几幅图像设计了轮换显示效果。深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）4设计目标网 页 设 计 与 制 作 实 用 教 程（第 3 版）5深圳职业技术学院 计算机基础教研室预备知识：动画的原理动画就是通过快速

3、播放一系列的静态画面，让人在视觉上产生动态的效果。而组成动画的每一个静态画面便是在视频领域中常说的一帧（Frame）。帧：组成动画的基本单位，它可以理解为一段电影胶片中的一格，是图像在某一时间点上的定格。关键帧：是指在动画播放过程中，呈现关键性动作或内容变化的帧，所以在制作动画时，对动画的对象进行属性编辑必须在关键帧中实现。普通帧：除了关键帧外，所有出现在时间轴中的帧都是普通帧。深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）6预备知识：F Flashlash动画的几种形式Flash是通过对帧的连续播放来实现动画效果的。1.逐帧动画，就是一些序列图片在

4、同一图层中按一定顺序依次排列在每个帧上形成的序列动画。在播放动画时会一帧一帧的显示每一帧的内容。2.补间动画，是指在关键帧之间自动生成中间过渡帧来实现关键帧之间变化的动画效果，从而生成流畅的动画。深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）7制作流程网 页 设 计 与 制 作 实 用 教 程（第 3 版）深圳职业技术学院 计算机基础教研室8任务1：设计与制作动态logo任务4：对图像切换动画添加按钮控制任务3：制作图像转换动画任务2：设计与制作banenr动画任务1 1 设计与制作动态logologo网 页 设 计 与 制 作 实 用 教 程（第

5、3 版）深圳职业技术学院 计算机基础教研室91制作图形元件“drupal”2制作影片剪辑元件“drupal闪烁”3利用引导层制作“drupal闪烁”元件飞行的动画4发布Flash动画STEP1：制作图形元件“drupaldrupal”深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）10F新建文件与保存文件（提示：文件大小为200像素165像素、帧频为24fps、类型为ActionScript2.0）。F制作图形元件“drupal”。STEP2：制作影片剪辑元件“drupaldrupal闪烁”深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作

6、实 用 教 程（第 3 版）11F创建“drupal闪烁”影片剪辑元件，并将“drupal”图形元件拖到“drupal闪烁”影片剪辑元件中。F制作“drupal”实例图形忽明忽暗的效果。STEP3：利用引导层制作“drupaldrupal闪烁”元件飞行的动画深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）12F导入“logo_bg(素材).jpg”图像。F添加引导层，绘制运动路径。F制作沿引导线飞行的动画。STEP4：发布FLASHFLASH动画网 页 设 计 与 制 作 实 用 教 程（第 3 版）13F发布Flash动画。深圳职业技术学院 计算机基

7、础教研室任务2 2 设计与制作bannerbanner网 页 设 计 与 制 作 实 用 教 程（第 3 版）深圳职业技术学院 计算机基础教研室141导入banner背景图像和输入文本2利用遮罩层制作探光灯效果动画3添加对应图标移动效果STEP1STEP1：导入bannerbanner背景图像和输入文本深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）15F 新建文件“banner.fla”（提示：文件大小为1000像素95像素、帧频为24fps、类型为ActionScript2.0），导入“banner(素材).jpg”图像。F 输入文本“IM-Dig

8、iMarketing”，字体格式为“微软雅黑、bold、16点、#999999”。F 输入文本“IM-eCommerce”，字体格式为“微软雅黑、bold、18点、#999999”。STEP2STEP2：利用遮罩层制作探光灯效果动画深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）16F复制“文本”图层，得到“文本 复制”图层，将“文本 复制”图层中的文本颜色修改为#ffffff。F新建“圆球”图层，在“圆球”图层上制作圆球从左侧移至右侧的动画。F将“圆球”图层设为“文本 复制”图层的遮罩层。STEP3STEP3：添加对应图标移动效果深圳职业技术学院 计

9、算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）17F新建“图标”图层，在“图标”图层上输入“”文本并制作文本移动的动画。任务3 3 制作图像切换动画网 页 设 计 与 制 作 实 用 教 程（第 3 版）深圳职业技术学院 计算机基础教研室181制作图像1逐渐显示、图像2从上到下逐渐移动的动画2制作图像3从左到右逐渐推出显示的动画3制作图像3侧开门式退出的动画制作图像5左右两边图像上下推出的动画STEP1STEP1：制作图像1 1逐渐显示、图像2 2从上到下逐渐移动的动画F新建文件“display.fla”（提示：文件大小为450像素180像素、帧频为24fps、类型为A

10、ctionScript2.0），导入素材图像display1.jpgdisplay5.jpg。F制作“display1”图像逐渐显示的动画效果。F制作“display2”图像从上到下移动覆盖“display1”图像的动画。深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）19STEP2STEP2：制作图像3 3从左到右逐渐推出显示的动画深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）20F创建场景2，将图层1重命名为“display2”，在“display2”图层中插入“display2”图像。F制作“displ

11、ay3”图像从左到右逐渐推出显示并覆盖图像2的动画。STEP3STEP3：制作图像3 3侧开门式退出的动画F创建场景3，将图层1重命名为“display4”，在“display4”图层中插入“display4”图像。F制作“display3”图像侧开门式退出的动画。深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）21STEP4STEP4 制作图像5 5左右两边图像上下推出的动画网 页 设 计 与 制 作 实 用 教 程（第 3 版）深圳职业技术学院 计算机基础教研室22F创建场景4，将图层1重命名为“display4”，在“display4”图层中插入

12、“display4”图像。F制作“display5”图像左半部分从底部向上移的动画。F制作“display5”图像右半部分从顶部向下移的动画。任务4 4 添加按钮控制图像切换动画深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）231新建按钮元件2在场景中插入按钮元件为按钮添加动作STEP1STEP1：新建按钮元件深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）24F制作“one”按钮元件。F制作“two”按钮元件。F制作“three”按钮元件。F制作“four”按钮元件。F制作“five”按钮元件。STEP2S

13、TEP2：在场景中插入按钮元件F修改文件大小为450像素230像素。F将5个按钮添加到场景1中。深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）25STEP3STEP3：为按钮添加动作深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）26F为场景1中的“one”按钮添加动作，实现单击或滑过按钮就跳转到图像1的动作。F为场景1中的“two”、“three”、“four”、“five”按钮添加动作，实现单击或滑过按钮就跳转到相应图像的动作。F复制场景1的“anniu”图层到场景2中。F复制场景2的“anniu”图层到场景3、场景4中。项目总结计算机工程学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）课后练习1.1.配套实训配套实训利用配套实训文件夹下提供的素材文件，根据所学的Flash知识，自主设计与制作两个动画，要求如下：制作一个动态logo或banner动画。制作一个图像切换动画。2.2.同步同步测试测试通过教材第3章“同步测试”检验自己是否掌握了本章的相关知识点与技能点。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室