flash学习第2章利用动画技术制作动态.ppt

《flash学习第2章利用动画技术制作动态.ppt》由会员分享，可在线阅读，更多相关《flash学习第2章利用动画技术制作动态.ppt（73页珍藏版）》请在三一办公上搜索。

1、第2章 利用动画技术制作动态演示课件,Flash多媒体课件制作实用教程（第二版）清华大学出版社 ISBN：9787302254102,本章知识,逐帧动画动作补间动画形状补间动画遮罩动画路径动画影片剪辑元件简单动作脚本,2.1 利用逐帧动画制作课件蜡烛,本范例是小学科学“蜡烛”动画模拟演示课件，它通过逐帧动画演示了蜡烛燃烧的过程，充分显现出Flash动画模拟演示课件在再现科学实验和生活场景上的无穷魅力。,课件简介,逐帧动画制作课件的方法认识“时间轴”面板绘图纸功能详解“帧”的基本概念和操作元件的嵌套使用元件和实例的区别,知识要点,2.1 利用逐帧动画制作课件蜡烛,2.1.1 创建“蜡烛杆”图形元

2、件,制作步骤,新建一个名字为“蜡烛杆”的图形元件，在此元件编辑场景中，用“矩形工具”画出一个尺寸合适的矩形，运用“渐变变形工具”调整填充色。绘制出的蜡烛杆形状。,2.1 利用逐帧动画制作课件蜡烛,2.1.2 创建“光晕”图形元件并柔化填充边缘,制作步骤,新建一个名字为“光晕”的图形元件，在此元件编辑场景中，用“椭圆工具”画出一个椭圆形状（尺寸为3040像素）。选择“修改”|“形状”|“柔化填充边缘”命令，在弹出的对话框中设置“距离”为20像素，“步骤数”为15，“方向”为“扩展”。,2.1 利用逐帧动画制作课件蜡烛,制作步骤,1认识“时间轴”面板“时间轴”面板是Flash实现动画功能时不可或缺

3、的重要面板之一，它是实现强大动画效果的保障，默认情况下“时间轴”面板出现在舞台上边，如果没有打开可选择“窗口”|“时间轴”命令打开它。,2.1.3 运用逐帧动画创建“火焰”影片剪辑元件,2.1 利用逐帧动画制作课件蜡烛,制作步骤,2认识“帧”Flash 影片将播放时间分解为帧，用来设置动画运动的方式、播放的顺序及时间等。动画的播放速度默认是每秒12帧，可在文档属性中更改。在“时间轴”面板上，“帧”表现为一个个小方格。每5帧有个“帧序号”标志（呈灰色显示，其他的呈白色显示）。根据性质的不同，可以把“帧”分为“关键帧”和“普通帧”。播放头指示当前显示在舞台中的帧，将播放头沿着时间轴移动，可以轻易地

4、定位当前帧。播放头用红色矩形表示，红色矩形下面的红色细线所经过的帧表示该帧目前正处于“播放帧”。,2.1 利用逐帧动画制作课件蜡烛,制作步骤,3运用逐帧动画创建“火焰”影片剪辑元件新建一个名称为“火焰”的影片剪辑元件，在此元件编辑场景中，使用“钢笔工具”或“铅笔工具”绘制出“火焰”形状，接着使用“渐变变形工具”调整填充色使其逼真。,2.1 利用逐帧动画制作课件蜡烛,制作步骤,默认情况下，新建的Flash文件的“时间轴”面板中，只有1个图层，图层中只有1帧。“火焰”图形被绘制在“图层1”的第1帧中。,2.1 利用逐帧动画制作课件蜡烛,制作步骤,在选中第2帧的状态下，选择“插入”|“时间轴”|“关

5、键帧”命令，在第2帧插入关键帧，可以看到第2帧变成了“关键帧”。为“图层1”的第38帧插入“关键帧”。,2.1 利用逐帧动画制作课件蜡烛,制作步骤,4运用“绘图纸”功能修改各关键帧上的形状,2.1 利用逐帧动画制作课件蜡烛,制作步骤,2.1.4 利用元件嵌套功能创建“蜡烛火焰”影片剪辑元件,新建一个名称为“蜡烛火焰”的影片剪辑元件，在此元件编辑场景中，插入一个新图层，将两个图层重命名为“火焰”和“光晕”。打开“库”面板，从“库”面板中拖放“火焰”元件到“火焰”图层，拖放“光晕”元件到“光晕”图层，调整它们的位置和大小。,2.1 利用逐帧动画制作课件蜡烛,制作步骤,2.1.5 布局主场景,单击“

6、场景1”按钮，从元件编辑环境返回到主场景。新建3个图层，重新命名图层。从“库”面板中拖出“蜡烛杆”元件至“蜡烛”图层，拖出“蜡烛火焰”元件至“火焰”图层，在“标题”图层输入课件标题，并添加“斜角”滤镜效果。,2.1 利用逐帧动画制作课件蜡烛,2.2 利用动作补间动画制作课件 化合反应的微观现象,本范例是中学化学“化合反应的微观现象”动画模拟演示课件，它从微观角度通过动画演示了硫和氧化合反应的实现过程。学生对化合反应的理解需要一定的想象能力，化学教师利用这个课件，可以生动、形象地将化合反应的微观过程展示给学生，使学生能更准确地掌握相关的化学知识。如图2-2-1和图2-2-2所示是本课件运行时的两

7、个画面。,课件简介,用Flash制作动画模拟演示课件的方法动作补间动画的制作方法课件背景框架图形的创建方法定义简单帧动作,知识要点,2.2 利用动作补间动画制作课件 化合反应的微观现象,制作步骤,2.2.1 创建文档和课件所需元件,2.2 利用动作补间动画制作课件 化合反应的微观现象,制作步骤,2.2.2 规划图层并布局课件背景和标题,2.2 利用动作补间动画制作课件 化合反应的微观现象,1规划图层,制作步骤,2.2.2 规划图层并布局课件背景和标题,2.2 利用动作补间动画制作课件 化合反应的微观现象,2布局课件背景和标题,制作步骤,2.2.3 创建化合反应动作补间动画,2.2 利用动作补间

8、动画制作课件 化合反应的微观现象,1制作第一个动作补间动画,制作步骤,2.2.3 创建化合反应动作补间动画,2.2 利用动作补间动画制作课件 化合反应的微观现象,2制作完整的动画效果动画,制作步骤,2.2.3 创建化合反应动作补间动画,2.2 利用动作补间动画制作课件 化合反应的微观现象,2制作完整的动画效果动画,制作步骤,2.2.4 定义简单的帧动作,2.2 利用动作补间动画制作课件 化合反应的微观现象,（1）选中“背景”图层第60帧，按F6键插入关键帧。选择“窗口”|“动作”命令，或按F9键打开“动作”面板。（2）在“动作”工具箱窗口中，依次展开“全局函数”|“时间轴控制”，双击stop选

9、项，定义该帧动作为“stop();”。（3）在“背景”图层的最后一帧，出现一个a标志，表示该帧已经定义了动作脚本。,2.3 利用形状补间动画制作课件 内吞,本范例是中学生物“内吞”动画模拟演示课件，它通过形状补间动画演示了液体吞入细胞的过程。充分显现出Flash课件在展示生物微观现象时的优势，学生通过观看形象的内吞动画演示过程，对形成科学、规范的概念将大有裨益。如图2-3-1所示和图2-3-2所示是本课件运行时的两个画面。,课件简介,形状补间动画的制作方法添加形状提示影片剪辑元件的应用,知识要点,2.3 利用形状补间动画制作课件 内吞,制作步骤,2.3.1 创建“物质”图形元件,（1）新建一个

10、Flash文件，设置背景色为淡绿色（#B0E0B6），其他参数保持默认值。（2）新建一个名称为“物质”的图形元件，在此元件的编辑场景中，用绘图工具绘制一个填充色为黑色的圆形。,2.3 利用形状补间动画制作课件 内吞,制作步骤,2.3.2 运用形状补间动画创建“图标”影片剪辑元件,1创建“图标”影片剪辑元件,2.3 利用形状补间动画制作课件 内吞,制作步骤,2为“图标”影片剪辑元件添加动画帧,2.3 利用形状补间动画制作课件 内吞,2.3.2 运用形状补间动画创建“图标”影片剪辑元件,制作步骤,3定义形状补间动画,2.3 利用形状补间动画制作课件 内吞,2.3.2 运用形状补间动画创建“图标”影

11、片剪辑元件,制作步骤,4添加形状提示,2.3 利用形状补间动画制作课件 内吞,2.3.2 运用形状补间动画创建“图标”影片剪辑元件,制作步骤,（1）从元件编辑场景返回到主场景，插入3个图层，重新命名图层。（2）选择“背景”图层，在舞台上输入课件标题，添加滤镜效果。接着使用绘图工具绘制细长形装饰条。（3）将“库”面板中的“图标”影片剪辑元件拖放到场景中，调整好大小和位置。,2.3 利用形状补间动画制作课件 内吞,2.3.3 布局背景和标题,制作步骤,2.3 利用形状补间动画制作课件 内吞,2.3.4 创建内吞过程补间动画,1布局内吞过程动画帧,制作步骤,2.3 利用形状补间动画制作课件 内吞,2

12、.3.4 创建内吞过程补间动画,2创建内吞过程补间动画,2.4 利用路径动画制作课件 台风,本课件是地理课程中有关“台风”知识的一个模拟演示动画。课件运行时，三路台风按照不同的路径从海面向大陆移动，通过课堂演示，可以使学生通过观察直观生动的画面理解台风移动的特点和路径。如图2-4-1所示是课件运行时的一个画面。,课件简介,路径动画的制作方法自定义缓入/缓出动画影片剪辑元件的应用交换元件的方法,知识要点,2.4 利用路径动画制作课件 台风,制作步骤,创建课件界面,2.4 利用路径动画制作课件 台风,制作步骤,创建“台风”图形元件,2.4 利用路径动画制作课件 台风,制作步骤,创建台风沿路径移动的

13、动画,2.4 利用路径动画制作课件 台风,制作步骤,将路径在动画中显示出来,2.4 利用路径动画制作课件 台风,按Ctrl+Enter组合键测试影片，可以看到3条线路的台风移动效果。但是路径本身并不显示出来。这是因为路径在引导层，而引导层上的对象都不在最终发布的播放影片中显示。如果想让路径显示出来，必须将它们复制到普通图层上.,制作步骤,2.4.5 增强动画效果,2.4 利用路径动画制作课件 台风,（1）新建一个名称为“旋转台风”的影片剪辑元件。下面在这个元件的编辑场景中进行操作。（2）将“库”面板中的“台风”图形元件拖放到场景中心。在第10帧插入一个关键帧。（3）选择第1帧，在“属性”面板的

14、“补间”下拉列表框中选择“动画”，在“旋转”列表框中选择“顺时针”，这样就定义了一个台风旋转一圈的动画效果。（4）返回“场景1”。选择“南线”图层第1帧上的“台风”图形实例，在“属性”面板中单击“交换”按钮，弹出“交换元件”对话框，在其中的列表框中选择“旋转台风”影片剪辑元件。,制作步骤,2.4.6 用“自定义缓入/缓出”调整台风的速度,2.4 利用路径动画制作课件 台风,2.5 利用遮罩动画制作课件 波的衍射,本范例是高中物理“波的衍射”的动画模拟演示课件。波是无形的，这个课件通过Flash动画将无形的知识直观地展示在学生面前，使学生的学习过程变得轻松，学习的内容变得形象直观。课件运行时，画

15、面左边出现两个控制按钮，分别单击这两个按钮可以控制不同演示动画的播放。单击上面的按钮可以演示障碍物或孔的尺寸大于波长时，波的衍射现象不明显的动画效果，如图2-5-1所示。单击下面的按钮时，可以演示障碍物或孔的尺寸小于波长时，衍射现象比较明显的动画效果，如图2-5-2所示。,课件简介,遮罩图层和遮罩动画的应用形状补间动画的应用运用多图层技术实现动画效果公共库按钮的使用方法简单交互控制的实现方法,知识要点,2.5 利用遮罩动画制作课件 波的衍射,制作步骤,创建课件界面,2.5 利用遮罩动画制作课件 波的衍射,制作步骤,运用形状补间动画创建“圆”影片剪辑元件,2.5 利用遮罩动画制作课件 波的衍射,

16、制作步骤,运用多图层创建“波”影片剪辑元件,2.5 利用遮罩动画制作课件 波的衍射,制作步骤,运用遮罩动画实现衍射动画效果,2.5 利用遮罩动画制作课件 波的衍射,1运用“遮罩动画”实现衍射现象不明显的效果,制作步骤,运用遮罩动画实现衍射动画效果,2.5 利用遮罩动画制作课件 波的衍射,2运用“遮罩动画”实现衍射现象明显的效果,制作步骤,运用遮罩动画实现衍射动画效果,2.5 利用遮罩动画制作课件 波的衍射,2运用“遮罩动画”实现衍射现象明显的效果,制作步骤,定义动作实现简单交互,2.5 利用遮罩动画制作课件 波的衍射,课件播放时首先显示的是一个静止画面，所以需要在“时间轴”的第1帧定义一个停止

17、动作“stop();”。另外为了避免课件循环播放，在“时间轴”的最后1帧也同样定义一个停止动作。要使画面继续播放起来，只有借助按钮了，通过定义按钮的动作来控制课件的播放。第一个按钮的动作脚本为on(release)gotoAndPlay(2);第二个按钮的动作脚本为：on(release)gotoAndPlay(63);至此，整个课件制作完毕。,“勾股定理”是八年级几何的学习内容，是几何学中几个重要定理之一，它指出了直角三角形3条边之间的数量关系。本课件通过形象、直观的动画效果，将勾股定理证明的全过程展现在学生面前，使学生能很快地掌握割补拼接的面积证明方法，熟练掌握勾股定理，从而培养学生观察能

18、力、抽象概括能力和思考能力。课件运行时先显示一个文字引言页面，这个页面用文字简单描述了勾股定理的内容，如图2-6-1所示。在这个起始页面的右下角有一个“开始”按钮，单击这个按钮，课件将跳转到动画演示页面开始勾股定理证明的动画演示，如图2-6-2所示。,课件简介,2.6 多图层复杂演示课件 勾股定理,整个动画播放结束以后，在这个动画演示页面的右下角将出现一个“重播”按钮，单击这个按钮，课件将重新播放动画进行演示。,利用动作补间动画实现移动、旋转、渐显等动画效果的方法以库的方式打开影片的方法共享库元件的方法多图层复杂动画的制作简单的控制课件播放的实现方法,知识要点,2.6 多图层复杂演示课件 勾股

19、定理,制作步骤,新建文档并创建课件界面,2.6 多图层复杂演示课件 勾股定理,制作步骤,创建图形元件,2.6 多图层复杂演示课件 勾股定理,制作步骤,利用动作补间动画创建三角形移动、旋转动画效果,2.6 多图层复杂演示课件 勾股定理,1布局元件,制作步骤,利用动作补间动画创建三角形移动、旋转动画效果,2.6 多图层复杂演示课件 勾股定理,2利用动作补间动画定义旋转和移动动画,制作步骤,利用动作补间动画创建正方形渐显动画效果,2.6 多图层复杂演示课件 勾股定理,制作步骤,完善动画效果,2.6 多图层复杂演示课件 勾股定理,1创建其他动画效果快速理解Flash源文件的技巧和方法：（1）隐藏图层。

20、（2）查看对象属性。（3）研究元件的结构。2创建“动态图标”影片剪辑元件为了增强本节课件范例的表现效果，将在课件标题文字旁边添加一个动态的图标，这个动画片段就以制作一个影片剪辑元件的方式来实现。,制作步骤,创建课件的起始页面和控制课件播放,2.6 多图层复杂演示课件 勾股定理,1创建课件的起始页面2定义简单交互动作脚本控制课件播放选中action图层的第1帧，打开“动作”面板输入stop()函数。为了避免课件循环播放，按照同样的方法，在整个动画的最后一帧也定义一个“停止”动作。按钮的动作脚本为：on(release)gotoAndPlay(2);。,本节通过制作一个化学实验演示课件范例，讨论用

21、Flash动画技术设计化学实验演示课件的方法。本课件范例制作过程中要用到前面章节介绍过的逐帧动画、动作补间动画、形状补间动画、遮罩动画和路径动画等动画技术，是一次动画制作技术综合应用的演练，也是对前两章基础知识和制作方法的总复习。本范例是中学化学“氧气的实验室制法”演示课件，它通过动画形象地模拟了在实验室中制取氧气的过程。如图2-7-1所示是本课件运行时的一个画面。,课件简介,2.7 动画技术综合应用 氧气的实验室制法,用Flash动画技术实现模拟演示化学实验的方法路径动画的应用用逐帧动画实现火焰跳动的方法Flash柔化图形的应用动作补间动画、遮罩动画的应用影片剪辑元件的应用从外部库引用元件的

22、方法,知识要点,2.7 动画技术综合应用 氧气的实验室制法,制作步骤,创建课件界面和图形元件,1创建课件界面,2.7 动画技术综合应用 氧气的实验室制法,制作步骤,创建课件界面和图形元件,2综合运用绘图工具创建图形元件,2.7 动画技术综合应用 氧气的实验室制法,制作步骤,创建影片剪辑元件,1运用逐帧动画创建“火焰”影片剪辑元件,2.7 动画技术综合应用 氧气的实验室制法,制作步骤,创建影片剪辑元件,2运用形状补间动画创建“气泡”影片剪辑元件,2.7 动画技术综合应用 氧气的实验室制法,制作步骤,布局场景中的静态实验仪器,本课件的图形元件较多，可将实验装置中静止不动的图形元件放在一个图层，固定

23、好位置，其他有补间动画的元件分放在不同的图层。,2.7 动画技术综合应用 氧气的实验室制法,制作步骤,创建主场景中的动画,1创建“点燃酒精灯”的动画2创建“集气瓶收集氧气过程”的动画3创建主场景中的其他动画。,2.7 动画技术综合应用 氧气的实验室制法,制作步骤,运用遮罩动画添加文字滚动效果,2.7 动画技术综合应用 氧气的实验室制法,1创建文字滚动效果2定义动作脚本控制课件播放,请参考教材的实例及其制作步骤或者观看配套光盘上的同步视频教程,详细内容,具体内容请参考教材,练习1 认识生字 运用逐帧动画和遮罩动画制作书写生字的课件，如图所示。,（1）运用绘图工具绘制背景和课题。（2）运用逐帧动画

24、，逐帧遮盖生字笔画。（3）添加遮罩动画。（4）从“公用库”拖入按钮，定义控制动画的动作脚本。,练习2 爬山虎的脚 运用逐帧动画和遮罩动画制作书写生字的课件，如图所示。,（1）绘制墙壁和课件标题。（2）运用形状补间动画制作爬山虎的脚向上爬动的效果。（3）运用动作补间动画制作叶子的变化效果。,练习3 太阳、地球和月亮 运用引导线动画和遮罩动画制作课件太阳、地球和月亮，如图所示。,（1）运用遮罩动画制作地球自转的效果。（2）运用引导线动画制作月亮围绕地球公转的效果。（3）运用引导线动画制作地球围绕太阳公转的效果。（4）注意应用元件的嵌套来叠加动画效果。,练习4 椭圆的画法 综合运用遮罩动画、动作补间动画和引导线动画制作课件椭圆的画法，如图所示。,（1）运用绘图工具制作课件界面。（2）运用引导线动画制作铅笔移动效果。（3）运用遮罩动画和动作补间动画制作画出椭圆的效果。,