【文档说明】(教学课件)chapter3利用Flash制作动画.pptx，共(28)页，1.226 MB，由小橙橙上传

转载请保留链接：https://www.ichengzhen.cn/view-2775.html

以下为本文档部分文字说明：

高等教育出版社学习目标➢掌握动画的基本原理➢掌握创建传统补间动画、补间形状动画的方法➢掌握遮罩图层、引导图层的使用方法➢掌握创建元件的方法及元件的使用2网页设计与制作实用教程（第3版）实训项目为了丰富网

页内容，需要为网站制作动画:(1)动态logo(2)Banner动画(3)图像切换动画网页设计与制作实用教程（第3版）3项目分析设计思路：（1）动态logo，根据公司的性质是一个科技公司，在已有标志图像的基础上创建了一个“drupal”图像沿着

轨迹运动的动画。（2）banner动画，在已有banner图像的基础上对文本设计了遮罩显示效果，突出显示文本内容，同时为了不太单调，制作了一个对应图标移动的动画。（3）图像切换动画，对选取出的几幅图像设计了轮换显示效果

。网页设计与制作实用教程（第3版）4设计目标网页设计与制作实用教程（第3版）5预备知识：动画的原理动画就是通过快速播放一系列的静态画面，让人在视觉上产生动态的效果。而组成动画的每一个静态画面便是在视频领域中常说的一帧（Frame）。•帧：组成动画的基本单位，它可以理解为一段电影胶片中的一

格，是图像在某一时间点上的定格。•关键帧：是指在动画播放过程中，呈现关键性动作或内容变化的帧，所以在制作动画时，对动画的对象进行属性编辑必须在关键帧中实现。•普通帧：除了关键帧外，所有出现在时间轴中的帧都是普

通帧。网页设计与制作实用教程（第3版）6预备知识：Flash动画的几种形式Flash是通过对帧的连续播放来实现动画效果的。1.逐帧动画，就是一些序列图片在同一图层中按一定顺序依次排列在每个帧上形成的序列动画。在播放动画时会一帧一帧的显示每一帧的

内容。2.补间动画，是指在关键帧之间自动生成中间过渡帧来实现关键帧之间变化的动画效果，从而生成流畅的动画。网页设计与制作实用教程（第3版）7制作流程网页设计与制作实用教程（第3版）8任务1：设计与制作动态

logo任务4：对图像切换动画添加按钮控制任务3：制作图像转换动画任务2：设计与制作banenr动画任务1——设计与制作动态logo网页设计与制作实用教程（第3版）91制作图形元件“drupal”2制作影片剪辑元

件“drupal闪烁”3利用引导层制作“drupal闪烁”元件飞行的动画4发布Flash动画STEP1：制作图形元件“drupal”网页设计与制作实用教程（第3版）10新建文件与保存文件（提示：文件大小为200像素×165像素、帧频为2

4fps、类型为ActionScript2.0）。制作图形元件“drupal”。STEP2：制作影片剪辑元件“drupal闪烁”网页设计与制作实用教程（第3版）11创建“drupal闪烁”影片剪辑元件，并将“drupal”图形元件拖到“drupal闪烁”影片剪辑元件中。制作“d

rupal”实例图形忽明忽暗的效果。STEP3：利用引导层制作“drupal闪烁”元件飞行的动画网页设计与制作实用教程（第3版）12导入“logo_bg(素材).jpg”图像。添加引导层，绘制运动路径。

制作沿引导线飞行的动画。STEP4：发布FLASH动画网页设计与制作实用教程（第3版）13发布Flash动画。任务2——设计与制作banner网页设计与制作实用教程（第3版）141导入banner背景图像和输入

文本2利用遮罩层制作探光灯效果动画3添加对应图标移动效果STEP1：导入banner背景图像和输入文本网页设计与制作实用教程（第3版）15新建文件“banner.fla”（提示：文件大小为1000像素×9

5像素、帧频为24fps、类型为ActionScript2.0），导入“banner(素材).jpg”图像。输入文本“IM-DigiMarketing”，字体格式为“微软雅黑、bold、16点、#999999”。

输入文本“IM-eCommerce”，字体格式为“微软雅黑、bold、18点、#999999”。STEP2：利用遮罩层制作探光灯效果动画网页设计与制作实用教程（第3版）16复制“文本”图层，得到“文本复制”图层，将“文本复制”图层中的文本颜色修改为#fff

fff。新建“圆球”图层，在“圆球”图层上制作圆球从左侧移至右侧的动画。将“圆球”图层设为“文本复制”图层的遮罩层。STEP3：添加对应图标移动效果网页设计与制作实用教程（第3版）17新建“图标

”图层，在“图标”图层上输入“>>>”文本并制作文本移动的动画。任务3——制作图像切换动画网页设计与制作实用教程（第3版）181制作图像1逐渐显示、图像2从上到下逐渐移动的动画2制作图像3从左到右逐渐推出显示的动画3制作图像3侧开门式退出的动画制作图像5左右两边图像上下推出的动画STEP1：制

作图像1逐渐显示、图像2从上到下逐渐移动的动画新建文件“display.fla”（提示：文件大小为450像素×180像素、帧频为24fps、类型为ActionScript2.0），导入素材图像display1.jpg~display5.jpg。制作

“display1”图像逐渐显示的动画效果。制作“display2”图像从上到下移动覆盖“display1”图像的动画。网页设计与制作实用教程（第3版）19STEP2：制作图像3从左到右逐渐推出显示的动画网页设计与制作实用教程（第3版）20创建场

景2，将图层1重命名为“display2”，在“display2”图层中插入“display2”图像。制作“display3”图像从左到右逐渐推出显示并覆盖图像2的动画。STEP3：制作图像3侧开门式退出的动画创建场景3，将图层1重命名为“di

splay4”，在“display4”图层中插入“display4”图像。制作“display3”图像侧开门式退出的动画。网页设计与制作实用教程（第3版）21STEP4——制作图像5左右两边图像上下推出的动画网页设计与制作实用

教程（第3版）22创建场景4，将图层1重命名为“display4”，在“display4”图层中插入“display4”图像。制作“display5”图像左半部分从底部向上移的动画。制作“display5”图像右半部分从顶部向下移的动画。任务4——添加按钮控制图像切换动画网页设计与制作实用教

程（第3版）231新建按钮元件2在场景中插入按钮元件为按钮添加动作STEP1：新建按钮元件网页设计与制作实用教程（第3版）24制作“one”按钮元件。制作“two”按钮元件。制作“t

hree”按钮元件。制作“four”按钮元件。制作“five”按钮元件。STEP2：在场景中插入按钮元件修改文件大小为450像素×230像素。将5个按钮添加到场景1中。网页设计与制作

实用教程（第3版）25STEP3：为按钮添加动作网页设计与制作实用教程（第3版）26为场景1中的“one”按钮添加动作，实现单击或滑过按钮就跳转到图像1的动作。为场景1中的“two”、“three”、“four”、“five

”按钮添加动作，实现单击或滑过按钮就跳转到相应图像的动作。复制场景1的“anniu”图层到场景2中。复制场景2的“anniu”图层到场景3、场景4中。项目总结网页设计与制作实用教程（第3版）课后练习1.配套实训利用配套实训文件

夹下提供的素材文件，根据所学的Flash知识，自主设计与制作两个动画，要求如下：➢制作一个动态logo或banner动画。➢制作一个图像切换动画。2.同步测试通过教材第3章“同步测试”检验自己是否掌握了本章的相关知识点与技能点。网页设计

与制作实用教程（第3版）