Flash平面动画制作.ppt

《Flash平面动画制作.ppt》由会员分享，可在线阅读，更多相关《Flash平面动画制作.ppt（83页珍藏版）》请在三一办公上搜索。

1、Flash平面动画制作,第3章 Flash平面动画制作,教学目标,教学重点、难点,本章小结,教学内容,教学目标,通过这章的学习，学生可以熟练的掌握逐帧动画、运动补间动画、形状补间动画、遮罩层动画和引导动画这5种动画的制作方法和技巧。,第3章 Flash平面动画制作,教学重点与难点,第3章 Flash平面动画制作,逐帧动画、运动补间动画、形状补间动画、遮罩层动画和引导动画的制作方法和设计技巧。,教学内容,本章小结,第3章 Flash平面动画制作,3.1 Flash平面动画制作概述,3.5“闪闪的红星”案例,3.6“蝴蝶飞”案例,3.7“贺卡”案例,本章计划授课14学时,3.2“运动的小青蛙”案例

2、,3.3“恭贺新禧”案例,3.4“宇宙集锦”案例,本节内容,Flash平面动画的基本概念,Flash平面动画的基本制作方法,平面动画的设计技巧,练习,3.1 Flash平面动画制作的概述,动画任何随着时间而发生的位置或者形态上的改变。Flash动画是由一个个“帧”上的图片连接而成的，帧是动画 最基本的单位。舞台是制作动画的地方，在播放器中播放动画时，只有舞台中的对象被显示。工作区域舞台和周围的灰度区域场景是动画的另一个组成部分是“场景”的变换，就像一部电影不可能只在一个地方拍摄一样，制作Flash动画也需要有不同的场景。,一、Flash平面动画的基本概念,3.1 Flash平面动画制作的概述,

3、1、逐帧动画 将动画的每一帧均设置为关键帧，通过改变每一个关键帧中的图像而产生动画效果。逐帧动画是Flash所提供的最基本的动画形式。2、形状补间动画 形状补间动画被应用于基本形状的变化，它是某一个对象在一定时间内其形状发生过渡型渐变的动画。形状补间动画用位于时间轴上动画的开始帧与结束帧之间区域的一个绿色的连续箭头表示。,二、Flash平面动画的基本制作方法,3.1 Flash平面动画制作的概述,3、运动补间动画运动补间动画被应用于把对象由一个地方移动到另一个地方的情况，也可应用于形成物体的缩放、倾斜或者旋转的动画，还可用于形成元件的颜色和透明度变化的动画。运动补间动画用位于时间轴上动画的开始

4、帧与结束帧之间区域的一个蓝色的连续箭头表示。,二、Flash平面动画的基本制作方法,3.1 Flash平面动画制作的概述,4、遮罩动画遮罩动画是将一个图层设置为遮罩层，此图层中的对象将相应地转换为遮罩对象。其它图层则为被遮罩层，这些图层的对象被遮罩对象所屏蔽的那部分才可显示。5、引导动画引导动画实际上是在运动补间动画的基础上添加一个引导图层，该图层有一条可以引导运动方向的引导线，使另一个图层中的对象依据此引导线进行运动的动画。,二、Flash平面动画的基本制作方法,3.1 Flash平面动画制作的概述,注意以下几个要点：1要想吸引观众，最重要的是让动作具有一定的含义。2动作应该支持动画的内容和

5、主题。3动作可以像文章和颜色一样传达情绪、感情和个性。4在日常生活中仔细观察动作并记录下来，建立一个创建动画时的“资源库”。5动作的设计要符合自然规律。,三、Flash平面动画的设计技巧,3.1 Flash平面动画制作的概述,本节内容,案例效果,操作步骤,技术要点,练习,3.2“运动的小青蛙”逐帧动画案例,一、案例效果,重点与难点：逐帧动画的制作技巧和卡通人物的绘图技巧。,3.2“运动的小青蛙”逐帧动画案例,二、操作步骤,本案例是在2.5“小青蛙”案例的基础上制作而成。1：打开素材“青蛙侧面”的Flash工程文件。并把文件另存为“运动的小青蛙”2：制作逐帧动画 第一步：建立一个命名为“运动合成

6、”的影片剪辑元件。,3.2“运动的小青蛙”逐帧动画案例,二、操作步骤,第二步：打开“库”面板把“头”、“身体”、“左手”、“右手”、“左脚”、“右脚”元件拖到“运动合成”元件中，并分布到各个图层以对应的名字命名。第三步：分别检查左右手、头和脚的中心点位置，根据人的基本运动规律来确定各个关节运动的中心点。,3.2“运动的小青蛙”逐帧动画案例,二、操作步骤,第四步：画脚的动作,3.2“运动的小青蛙”逐帧动画案例,二、操作步骤,第五步：在对应的帧上依次设置如下相应的动作。3测试影片，保存文件，并导出影片,3.2“运动的小青蛙”逐帧动画案例,三、技术要点,1、制作逐帧动画的基本步骤：（1）选择一关键帧

7、作为逐帧动画的开始帧。（2）在开始帧中绘制或导入动画序列中的第1张图片。（3）选择下一关键帧，并进行任意修改或导入绘制一张新图片。（4）继续添加关键帧并改变相应关键帧的内容直到最终完成动画。（5）测试影片并导出一个.swf文件。,3.2“运动的小青蛙”逐帧动画案例,2、卡通人物的绘图技巧（1）身体的比例：当你画真实人物时，身高一般是按六至七个头来画的，而卡通人物，最常见的比例是三至四个头高。（2）基本结构：卡通人物多数是以球体或圆柱体为基础，因为这两种形状比较容易掌握。下图是绘制卡通人物的一般流程：,三、技术要点,3.2“运动的小青蛙”逐帧动画案例,(1)在制作逐帧动画时，前后帧之间的位置关系

8、如何？(2)利用青蛙为元素制作一组青蛙走路的动画(参考从前言中所提供的网址下载的本章的“练习参考”文件夹中的Flash工程文件“走路参考”)。,四、练习,3.2“运动的小青蛙”逐帧动画案例,本节内容,案例效果,操作步骤,技术要点,练习,3.3“恭贺新禧”案例,一、案例效果,重点与难点：形状补间动画的特点、创建方法，及如何设置形状提示点来控制形状补间动画的中间过程。,3.3“恭贺新禧”案例,二、操作步骤,1新建文档并命名 启动AdobeFlashCS3后，新建一个文档，对背景颜色和舞台大小进行相应的设置，保存文档，命名为“恭贺新禧”。2.设置背景图片 将”图层1”改名为“背景”，把素材中的背景图

9、片文件“焰火”导入到舞台，并设置宽为400、高为300，居中对齐，扩展到100帧。锁定图层。,3.3“恭贺新禧”案例,二、操作步骤,3绘制灯笼 第一步：插入4个新图层，分别命名为“恭”、“贺”、“新”、“禧”。将“贺”、“新”、“禧”三个图层锁定。单击“恭”图层的第20帧，按F6键增加一个关键帧。利用“矩形工具”和“椭圆工具”绘制如下左“灯笼”图形：第二步：分别在“贺”、“新”、“禧”图层中第20帧单击F6键添加关键帧，将灯笼粘贴到屏幕上并调整到适当的位置。如上右图。,3.3“恭贺新禧”案例,二、操作步骤,4绘制“恭贺新禧”四个文字 第一步：解锁“恭”图层，锁定其它所有图层。在第40帧添加一个

10、关键帧。将原来的灯笼删掉。单击【文本工具】，设置字体为“华文彩云”，字大小为“74”，字体颜色为纯红色，使用【文本工具】中输入“恭”字。将此汉字摆在原来灯笼的位置。选中此汉字，用Ctrl+B键将其打散成形状。将打散的汉字的内外边界颜色均设置为纯黄色。第二步：用同样的方法给“贺”、“新”和“禧”图层也分别在第40帧绘制一个“贺”、“新”和“禧”字。最终效果如图,3.3“恭贺新禧”案例,二、操作步骤,5绘制其它关键帧，并设置形变动画第一步：解锁“恭”、“贺”、“新”和“禧”四个图层。给此四个图层均在第40帧、第60帧和第80帧添加一个关键帧。第二步：鼠标右击“恭”图层的第20帧至第40帧之间，在弹

11、出的快捷菜单中选择“创建补间形状”，用同样的方法给“恭”图层的第60帧至第80帧之间也创建形状补间动画。用同样的方法给“贺”、“新”、“禧”三个图层的第20帧至第40帧之间、第60帧至第80帧之间也创建形状补间动画。6、测试影片，保存文件，并导出影片。,3.3“恭贺新禧”案例,三、技术要点,制作形状补间动画 形状补间动画的方法有如下三种：（1）选择开始关键帧和结束关键帧间的任何一帧，在“属性”面板中设置。（2）右击开始关键帧和结束关键帧间的任何一帧，在快捷菜单中选择“创建补间形状”。（3）单击开始关键帧和结束关键帧间的任何一帧，选择【插入】【时间轴】【创建补间形状】菜单项。,3.3“恭贺新禧”

12、案例,三、技术要点,2.设置形状提示点 在已经创建了一个基本的形状补间动画后，可以按照以下步骤添加形状提示点：（1）首先在时间轴中的形状补间动画的开始关键帧中选择一个形状，然后单击【修改】【形状】【添加形状提示】菜单项，Flash会在舞台上放置一个用字母标记的红色小圆圈，这就是形状提示点。可以用以上方法添加多个形状提示点，它们都按字母顺序标识。（2）在开始关键帧的形状上确定一个点，用【箭头工具】进行选择并移动第一个形状提示点，把它放在形状上一个用户想要其与最终形状中的一块区域进行匹配的区域上（比如说，一个棱角或一段曲线）,3.3“恭贺新禧”案例,三、技术要点,（3）当把播放头移动到形状补间动画

13、的结束帧上时，会看到一个与放在开始帧上的标了字母的形状提示点相匹配的另一个标了相同字母的形状提示点。把这个形状提示点用【箭头工具】定位，从而在最终形状上标记出一块应该与初始形状上特定区域相匹配的区域。当结束关键帧中的形状提示点的颜色由红色变成了绿色（如图3.43所示），而在开始关键帧中的形状提示点由红色变成了黄色，则表示形状提示点已经与作品建立了正确的连接。（4）将播放头在时间轴上移动预览新的形变过程。不停地加入形状提示点，或对它们进行重新定位，直到动画产生出了理想的形变过程。,3.3“恭贺新禧”案例,（1）制作一个笑脸到哭脸的变脸形变动画，效果如下图所示。（提示：笑脸系列形状可采用【文本工具

14、】输入，字体采用“Windings”，输入大写字母“L”则可输入一个笑脸，其它两张脸对应着大写字母“K”和“L”。）,四、练习,3.3“恭贺新禧”案例,(2)制作一个变手的形变动画，并通过设置形状提示点来控制手指之间的对应变换位置。动画中手的姿势如下图所示。（提示：手的系列形状可采用“文本工具”输入，字体采用“Windings”，输入大写字母“A”“G”实现）,四、练习,3.3“恭贺新禧”案例,本节内容,案例效果,操作步骤,技术要点,练习,3.4“宇宙集锦”案例,一、案例效果,重点与难点：运动补间动画的制作方法和技巧，及如何设置旋转、运动的快慢和逐渐消失的效果。,3.4“宇宙集锦”案例,二、操

15、作步骤,1新建文档并命名 启动AdobeFlashCS3后，新建一个文档，对舞台大小进行设置宽为400、高为300，保存文档，命名为“宇宙集锦”。2.创建宇宙图形符号 新建一个“图1”的图形元件，导入本案例对应的素材文件夹中的“宇宙1”的图片文件。用同样的方法导入文件名为“宇宙2”至“宇宙6”图片文件，分别对应生成名为“图2”至“图6”的图形元件。,3.4“宇宙集锦”案例,二、操作步骤,3创建“Loading”文本的拉伸效果 第一步：新建一个名称为“Loading”的影片剪辑元件。第二步：选用【文本工具】输入文字“Loading”，在“属性”面板中设置此文字的字体为“黑体”，字号为25，字体颜

16、色为白色。用Ctrl+B将文字打散。将第1帧复制到第2帧至第13帧。鼠标单击第1帧，只保留“L”字母，删除其它字符图形。从第2帧开始逐步增加字符图形直至第13帧。鼠标单击第18帧，按F5键增加一个扩展帧。,3.4“宇宙集锦”案例,4创建“光线”图形符号第一步：新建名称为“光线”的图形元件。第二步：利用“椭圆工具”绘制如下图的光线效果：,二、操作步骤,3.4“宇宙集锦”案例,5创建“光束”影片剪辑第一步：新建名称为“光束”的影片剪辑元件。第二步：将“光线”图形符号拖入舞台中央，并用Ctrl+B打散。鼠标单击第25帧，按F6键插入关键帧，将光线沿直线运动轨迹拖动至舞台的边缘。鼠标点击第30帧按F5

17、键插入扩展帧。单击第1帧，将“光线”图形符号缩小并移动至舞台中心点。鼠标右击第1帧至第25帧之间，在弹出的快捷菜单中选择“创建补间形状”。再新建多个图层，对每个图层按照上述方法在舞台的不同角度做“光线”图形符号的形变动画。最终结果如下图,二、操作步骤,3.4“宇宙集锦”案例,6设置背景图片 导入背景图片到场景1中，选择本案例对应的素材文件夹中的背景图片文件“sky”。设置此图片的宽为400、高为300。通过设置“对齐”面板选项，使背景图片位于舞台中央。7创建“光”图层 创建新图层命名为“光”，将影片剪辑“光束”拖至舞台中央，并扩展制120帧。8创建“Loading”图层 创建新图层命名为“Lo

18、ading”，将影片剪辑“Loading”拖至舞台左下角。并扩展制120帧。,二、操作步骤,3.4“宇宙集锦”案例,9创建宇宙图片动画 第一步：创建新图层命名为“图片1”，将图形符号“图1”拖到舞台左端，并将图形符号缩小。单击第10帧按F6插入关键帧，水平移动图形符号“图1”的位置至屏幕中央，并放大。单击第20帧按F6插入关键帧，选用【箭头工具】，在“属性”面板中设置“颜色”选项为“Alpha”，值为“0%”。鼠标右击第1帧至第10帧之间，在弹出的快捷菜单中选择“创建补间动画”（或在“属性”面板中的设置），这样就创建了一个运动补间动画，此时在第1帧至第10帧之间将出现紫色带箭头区域。采用同样的

19、方法在第10帧至第20帧之间也创建运动补间动画。,二、操作步骤,3.4“宇宙集锦”案例,第二步：按照以上方法，可设计“图片2”至“图片6”从舞台边缘的不同位置沿着不同的角度由小变大，或直接或旋转地进入舞台中央，然后再慢慢淡出消失掉。10测试影片，保存文件，并导出影片,二、操作步骤,3.4“宇宙集锦”案例,三、技术要点,制作运动补间动画 创建运动补间动画的方法有如下三种：（1）选择开始关键帧和结束关键帧间的任何一帧，在“属性”面板中设置。（2）右击开始关键帧和结束关键帧间的任何一帧，在快捷菜单中选择“创建补间动画”。（3）单击开始关键帧和结束关键帧间的任何一帧，选择【插入】【时间轴】【创建补间动

20、画】菜单项。,3.4“宇宙集锦”案例,的,2.设置旋转的运动效果 旋转的运动效果是使实例在运动的同时旋转。设置方法是在起始关键帧和结束关键帧之间已经设置好了运动补间动画后再通过“属性”面板中的“旋转”项来设置。其中“旋转”项用于设置旋转的方式，有“无”、“自动”、“顺时针”、“逆时针”四个选项；后面的“次”项用于设置从运动补间动画开始到结束元件旋转几次。,三、技术要点,3.4“宇宙集锦”案例,3.设置运动的快慢效果 时快时慢的运动效果也是在起始关键帧和结束关键帧之间已经设置好了运动补间动画后再通过“属性”面板中的来设置。其中“缓动”项用于调节对象运动过程中的速度比例关系，正数表示先快后慢，负数

21、表示先慢后快，零值表示动作匀速变化；后面的“编辑”按钮用于打开“自定义缓入/缓出”面板。（详细建书97页）4.设置物体逐步消失的效果 逐步消失的运动效果主要是通过设置运动补间动画的结束关键帧中物体的“Alpha”值为“0%”来实现的，此设置可通过“属性”面板中的项来完成。,三、技术要点,3.4“宇宙集锦”案例,四、练习,(1)制作一个红色小球(如书图126页3.140所示)旋转运动的动画。红色小球绘制效果如书图3.140所示(注意设置小球的亮点在左上端)。小球先从舞台的左上角顺时针旋转两周到达舞台底端中央(要求：旋转的速度是先慢后快，形状是由小变大)，再从底端中央逆时针旋转两周到达舞台右上角(

22、要求：旋转的速度是先快后慢，形状是由大变小直至消失)。(2)自行制作一个人走路的影片剪辑(依照从前言中所提供的网址下载的本章的“练习参考”文件夹中的Flash工程文件“走路参考”)，制作一个人从舞台左边走到舞台右边的运动动画。,3.4“宇宙集锦”案例,本节内容,案例效果,操作步骤,技术要点,练习,3.5“闪闪的红星”遮罩动画案例,一、案例效果,重点与难点：遮罩动画的制作方法和技巧。,3.5“闪闪的红星”遮罩动画案例,1新建文档并命名启动AdobeFlashCS3后，新建一个文档，背景颜色和舞台大小都使用默认，保存文档，命名为“闪闪的红星”。2.绘制“放射圆”元件 第一步：使用“工具箱”中的椭圆

23、工具 和线条工具 绘制 一个粗细为4的椭圆和直线。并用变形工具把直线的中心点调整至圆的中心点.如下图：,二、操作步骤,3.5“闪闪的红星”遮罩动画案例,第二步：打开“窗口”菜单中的“变形”面板.设置旋转角度为”10度“单击”应用复制”按钮35次.选中所有线条，单击“修改”“形状”“将线条转化为填充”，得到下面的左边的放射圆1图形元件:第三步：新建一个“放射圆2”的图形元件。把“放射圆1”拉入舞台中，并水平翻转。得到上面的右图。,二、操作步骤,3.5“闪闪的红星”遮罩动画案例,3、制作“光芒闪闪”影片剪辑元件 第一步：新建一个“光芒闪闪”的影片剪辑元件。把“放射圆1”拉入舞台中，改变色调为“黄色

24、调”，并设置一个100帧的动作补间动画，使它“逆时针”旋转一周。第二步：再新建一个图层，把“放射圆2”拉入舞台中，设置该图层为“遮罩层”。得到效果如图：,二、操作步骤,3.5“闪闪的红星”遮罩动画案例,4、制作“五角星”图形元件 第一步：新建一个“五角星”的图形元件。第二步：利用工具栏中的“多边形工具”和“线条工具”绘制一个五角星如下图：,二、操作步骤,3.5“闪闪的红星”遮罩动画案例,5、整合图形 第一步：在场景1里分别新建“背景”、“光芒”和“五角星”3个图层。第二步：在“背景”图层里绘制一个浅蓝色的矩形背景。第三步：把做好的“光芒闪闪”元件和“五角星”元件分别拉入对应的图层里。6、测试影

25、片，保存文件，并导出影片。,二、操作步骤,3.5“闪闪的红星”遮罩动画案例,三、技术要点,1.制作遮罩动画 在制作遮罩动画的时候用到两个图层：遮罩层和被遮罩层。被遮罩层上的图形通过遮罩层显示出来。播放动画的时候，遮罩层上的内容不会被显示出来，被遮罩层上位于遮罩层之外的内容也不被显示。2.设置一个图层遮罩多个图层 在Flash中一个遮罩图层可以同时遮罩多个被遮罩图层。当把某个图层设置为遮罩层时，它下面的图层自动被设置为被遮罩层。当需要使一个图层遮罩多个图层时，可以通过下面的两种方法实现：,3.5“闪闪的红星”遮罩动画案例,（1）当需要被添加为被遮罩层的图层位于遮罩层的上方时，选中该图层，单击并拖

26、动它到遮罩层下方。（2）当需要被添加为被遮罩层的图层位于遮罩层的下方时，在该图层上右击弹出快捷菜单，选择“属性”，打开“图形属性”对话框，选择类型。如果需要取消遮罩与被遮罩的关系，可以在被遮罩层打开“图层属性”对话框，设置为类型；或者把该图层拖动到遮罩层上方。,三、技术要点,3.5“闪闪的红星”遮罩动画案例,四、练习,请制作一个“瀑布”遮罩动画，该动画制作时截取了水流部分的图像作为被遮罩层，遮罩层是使用笔刷工具绘制的水波线条，遮罩层的波纹从上到下做运动。效果如下图：,3.5“闪闪的红星”遮罩动画案例,本节内容,案例效果,操作步骤,技术要点,练习,3.6“蝴蝶飞”引导动画案例,一、案例效果,重点

27、与难点：引导动画的制作方法与技巧，以及应用引导路径的技巧。,3.6“蝴蝶飞”引导动画案例,1新建文档并命名启动AdobeFlashCS3后，新建一个文档，背景颜色和舞台大小都使用默认，保存文档，命名为“蝴蝶飞”。2导入背景图片 修改“图层1”的名称为“背景”。导入本案例对应的素材文件夹中的“花丛.bmp”的图片文件，利用“对齐”面板缩放成与舞台大小一样。,二、操作步骤,3.6“蝴蝶飞”引导动画案例,3制作“蝴蝶飞1”和“蝴蝶飞2”元件 第一步：新建一个命名为“身体”的图形元件。如下左图：第二步：新建一个“图形”元件，命名为“翅膀”，导入图片本案例对应的素材文件夹中的“蝴蝶1”，并进行相应的调整

28、。效果如上右图。,二、操作步骤,3.6“蝴蝶飞”引导动画案例,第三步：新建一个“影片剪辑”，命名为“蝴蝶飞1”。A、在“蝴蝶飞1”元件中建立2个图层，并给图层分别命名为“身体”和“翅膀”。利用前面所做的“身体”和“翅膀”元件，组成一只完整的蝴蝶效果如下左图B、在“翅膀”的第2帧插入关键帧，然后选中【任意变形工具】，将左边“翅膀1”实例的变形中心点调整到与身体接触位置，然后向里压，使用同样的方法调整右边的实例，效果如上右图。,二、操作步骤,3.6“蝴蝶飞”引导动画案例,C、为了让蝴蝶有节奏的拍动翅膀，同时选中“翅膀”的第1、2帧，点右键“复制帧”，然后将其粘贴到第6、7帧、9、10帧、12、13

29、帧、17、18帧、22、23帧，最后在25帧插入扩展帧，这样就有了蝴蝶不断煽动翅膀的效果，帧的设置如图：D、利用和“蝴蝶1”影片剪辑元件同样的制作方法可以得到“蝴蝶2”影片剪辑元件。只是翅膀利用素材文件夹中的“蝴蝶2.jpg”来制作。,二、操作步骤,3.6“蝴蝶飞”引导动画案例,4制作“闪烁文字”元件（1）新建一个“图形”元件，命名为“星星”，在“颜色”面板中设置“填充色”类型为“放射状”，左右“色标”都为白色，右边“色标”的透明度为0，设置好后，绘制一个圆。再利用【矩形工具】绘制出光线效果。效果如图：,二、操作步骤,3.6“蝴蝶飞”引导动画案例,（2）新建一个“影片剪辑”，命名为“星星旋转”

30、，将“星星”元件拖放到影片剪辑中，适当调整大小，在第15帧插入关键帧，创建运动补间动画，在“属性”面板中设置“逆时针”旋转“1”次。（3）新建一个“图形”元件，命名为“文字”，使用【文本工具】输入“Iloveyou”，设置字体颜色为粉色（“#FF33CC”）。然后打散文字，使用【笔刷工具】适当调整大小，把字之间连起来，效果如图：,二、操作步骤,3.6“蝴蝶飞”引导动画案例,（4）新建一个“影片剪辑”，命名为“闪烁文字”，将“文字”元件拖放到影片剪辑中，并把“图层1”命名为“文字”，然后在40帧按F5键插入扩展帧；新建一个图层，命名为“星星1”，从“库”中将“星星旋转”元件拖放到该图层，放在“文

31、字”图层中“i”的顶部。在“星星1”图层的第40帧插入关键帧，将该帧的“星星旋转”实例拖动到“文字”图层中“i”的底部，然后在1至40帧创建补间动画。在“星星1”图层上方创建一个引导层，将“文字”图层的第1帧复制到引导层的第1帧，并将文字打散成矢量图形，这样星星将沿着文字线条运动。,二、操作步骤,3.6“蝴蝶飞”引导动画案例,（5）在“星星1”图层的上方新建两个图层，命名为“星星2”和“星星3”。利用和“星星1”相同的方法制作，效果如下图：,二、操作步骤,3.6“蝴蝶飞”引导动画案例,的,5布置主场景（1）回到主场景，新建四个图层，从上到下4个图层为“文字”、“蝴蝶2”、“闪烁”和“蝴蝶1”（

32、2）从“库”中将“星星”元件拖放到“闪烁”图层，使用【任意变形工具】适当调整大小，按住Ctrl键多复制几个“星星”实例，选中该图层的第1帧，按F8键将这些星星转换为“影片剪辑”，命名为“闪烁星星”。（3）回到主场景，在“背景”和“闪烁”图层的第300帧插入扩展帧。接着从“库”中把“蝴蝶飞1”影片剪辑拖放到“蝴蝶1”图层，使用【任意变形工具】调整大小并旋转一定的角度，并在第300帧插入扩展帧。,二、操作步骤,3.6“蝴蝶飞”引导动画案例,的,（4）从“库”中把“蝴蝶飞2”拖放到“蝴蝶2”图层的第1帧，并调整其大小和旋转角度，在第150帧插入关键帧，并创建运动补间动画。在“蝴蝶2”图层的上方新建一

33、个“引导层”在引导层上使用【铅笔工具】绘制一条引导线，并设置“蝴蝶2”的引导动画如下图：,二、操作步骤,3.6“蝴蝶飞”引导动画案例,的,（5）在“蝴蝶2”图层的第250帧和300帧插入关键帧，并在这两个帧之间创建运动补间动画；在引导层的第151帧插入空白关键帧，在250帧插入关键帧，并在第250帧绘制一条引导线，将“蝴蝶2”图层的第250帧、300帧上的蝴蝶对齐到引导线的首端和末端，制作引导动画。,二、操作步骤,3.6“蝴蝶飞”引导动画案例,的,（6）在“文字”图层的第150帧插入关键帧，将“闪烁文字”元件拖到该帧，放在舞台左下方，如图3.97所示；在该图层的200帧插入关键帧，然后将150

34、帧上的文字设为透明，并在两个关键帧之间创建补间动画，最后在300帧插入扩展帧。6测试影片，保存文件，并导出影片,二、操作步骤,3.6“蝴蝶飞”引导动画案例,制作引导动画 引导层上绘制的是引导路径，这些线条可以是使用钢笔、铅笔、线条、椭圆工具、矩形工具或画笔工具绘制出的。被引导层上可以创建的对象包括：元件实例、文字或群组等，但是不能是分散的矢量图形。引导动画的创建主要分为三大步骤：（1）建立运动补间动画，如本案例中先创建“蝴蝶2”图层第1至150帧的运动补间动画。（2）创建引导层，在引导层中绘制引导线。（3）调整被引导层上对象的位置：引导动画首帧上实例中心点与运动引导线的首端对齐，引导动画末帧上

35、实例中心点与运动引导线的末端对齐。,三、技术要点,3.6“蝴蝶飞”引导动画案例,2.应用引导路径的技巧（1）引导线要平滑、流畅。转折点过多或者转弯过急、线条中断或者交叉重叠，都可能导致引导线不能成功引导。（2）被引导层上的对象的变形中心一定要位于引导线上，否则无法引导，如果为不规则对象，可以适当调整其变形中心的位置，另外，按下“工具箱”中的【贴紧至对象】按钮，可以是对象更容易吸附到引导线上。（3）在默认情况下，被引导层上的对象按引导路径平移，与切线方向无关，如果希望沿切线运动，可在设置被引导层上对象的补间动画后，选中复选框，本案例中就是如此。（4）对齐引导线和对象时，选中复选框可以让对象自动捕

36、捉路径。,三、技术要点,3.6“蝴蝶飞”引导动画案例,四、练习,(1)引导动画中的两个图层各能放置哪些对象？(2)创建引导动画时有什么注意事项？(3)制作一个小鸟在天空中飞翔的引导动画。,3.6“蝴蝶飞”引导动画案例,本节内容,案例效果,操作步骤,技术要点,练习,3.7“贺卡”综合动画案例,一、案例效果,重点与难点：掌握时间轴特效的使用方法、“按钮元件”的建立和使用及实例颜色的调节方法。,3.7“贺卡”综合动画案例,1新建文档并命名启动AdobeFlashCS3后，新建一个文档，设置背景色为白色，文档大小为400250，保存文档，命名为“贺卡”。2设置背景用文本工具设置如右图的背景:,二、操作

37、步骤,3.7“贺卡”综合动画案例,3绘制所需的元件（1）绘制“钟面”、“时针”和“分针”元件（2）绘制“心”元件（3）绘制“飞舞的心”元件,二、操作步骤,3.7“贺卡”综合动画案例,（4）绘制“没你”和“有你”元件（5）绘制“红心脸”元件（6）绘制“信封”元件（7）创建“开启”按钮,二、操作步骤,3.7“贺卡”综合动画案例,4布置场景（分别设置如下图层，时间轴面板如下：）5测试影片，保存文件，并导出影片,二、操作步骤,3.7“贺卡”综合动画案例,时间轴特效的使用方法（1）变形使用“变形”特效，可以通过调整对象的变形位置、缩放比例、旋转、透明度和色调生成动画。通过对“变形”特效的灵活使用，可以产

38、生淡入、淡出、放大缩小以及左旋右旋等动画效果。,三、技术要点,3.7“贺卡”综合动画案例,（2）转换“转换”特效类似于视频编辑中的转场效果。利用“转换”特效，可以产生淡入、淡出、逐渐显示或逐渐消失效果的动画。当制作“变形”效果时需先选中舞台中的对象，单击【插入】【时间轴特效】【变形转换】【转换】菜单项（3）复制“复制”特效用于在舞台上有规律地复制多个对象。Flash提供了“分散式直接复制”和“复制到网格”两种“复制”特效。（4）分离利用“分离”特效，可以将文本或者复合对象（图符、矢量图、视频剪辑）的元素打散、旋转并抛散，能制作对象的爆炸效果。,三、技术要点,3.7“贺卡”综合动画案例,（5）展

39、开利用“展开”特效，可以制作对象的逐渐增大（展开）、逐渐收缩、偏移等动画效果。以本例中制作背景文字“love”为例，选中舞台中的“love”，单击【插入】【时间轴特效】【效果】【展开】菜单项（6）投影利用“投影”特效，能制作出对象的影子。“投影”特效制作的是静态的对象，而不是动画。（7）模糊“模糊”特效的作用是通过改变对象的Alpha值、位置或缩放比例，创建对象逐渐模糊消失或逐渐模糊出现的动画效果。,三、技术要点,3.7“贺卡”综合动画案例,2.元件的使用技巧 在Flash中经常会用到三类元件：图形元件、影片剪辑元件和按钮元件“影片剪辑”元件只需要主时间轴上的一帧就可播放自己时间轴上的任意数目

40、的帧；而“图形”元件只有当主时间轴上的帧数大于等于自己时间轴上的帧数时才能完整播放。在主时间轴上无法直接播放“影片剪辑”元件的动画效果，但可以直接播放“图形”元件的动画效果。3.实例的颜色调节 我们可以通过改变舞台中实例对应的“属性”面板中的“颜色”选项,三、技术要点,3.7“贺卡”综合动画案例,四、练习,(1)时间轴特效分为哪几类？如何进行操作？(2)Flash中有几类元件？分析它们各自的特点、制作步骤及应用场合。(3)按照自己的思路，制作一张贺卡。要求运用到时间轴特效，并能通过按钮控制动画的播放和停止。,3.7“贺卡”综合动画案例,本章主要通过“运动的小青蛙”、“恭贺新禧”、“宇宙集锦”、“闪闪的红星”、“蝴蝶飞”和“贺卡”六个案例介绍了Flash中逐帧动画、形状补间动画、运动补间动画、遮罩动画、引导动画五种典型动画的制作技巧，此外还介绍了时间轴特效的使用方法和各类元件的使用技巧。通过本章的学习，学生应该可以在Flash中创建自己的动画了。,本章小结,