第4讲基本动画制作(二)Flash高级商务动画设计(PPT全)(袁野版)

1、q掌握逐帧动画制作方法和技巧。q掌握传统补间动画和形状补间动画的方法和技巧。q学会不同元件在不同图层设计传统补间动画。q掌握为动画添加音频的技巧和方法，掌握声音参数设置的各个含义。q掌握影片剪辑（Movie Clip）的创作方法以及在动画创作中的意义q【重点】【重点】q1动画中音频的添加方法及参数的设置。q2影片剪辑的含义及创建方法。q3彩蝶习舞动画制作q4. 补间动画q【难点】【难点】q影片剪辑动画与场景中动画在时间轴上的协调。q【实例说明】【实例说明】本例制作拍皮球的动画，同时添加声音效果。q【技术要点】【技术要点】使用补间动画创建小球落下与弹起的动画效果；使用压缩变形创建小球落地时的碰撞

2、效果；导入声音文件为小球落地添加音效。q启动Flash CS4，菜单上，文件另存为，在“另存为”的对话框上，先选择保存文件的文件夹的位置，在文件名后输入：拍皮球.fla，点击“保存”按钮。q菜单上，插入新建元件，打开“创建元新件”对话框，在名称后输入“皮球”，行为后选择“图形”，单击“确定”按钮，打开“皮球”元件编辑窗口。q用工具箱中的绘图工具，按图1所示绘制皮球。q菜单上，文件导入库,打开“导入到库”对话框。在该对话框中选择准备好的皮球落地的声音文件pa.wav，然后按“打开”按钮，将其导入到库面板中，如图2所示q在库面板中双击声音对象的图标，打开“声音属性”对话框，如图1所示。在该对话框中

3、可以查看声音文件的属性，从属性中可以了解到声音长度为1.1秒。单击“确定”按钮关闭该对话框。q从库面板中将“皮球”元件拖动到舞台上，调整其位置和大小q用鼠标右键单击第6帧插入关键帧，用鼠标右键中间的任意1帧创建传统补间动画q单击“图层1”的第6帧的皮球，按SHIFT键，在舞台上将皮球向下移动。右键单击第8帧插入关键帧，在舞台上调整皮球位置与第6帧中的相同，选择工具箱中的任意变形工具，然后单击第8帧舞台上的皮球，调整句柄将皮球稍微压扁。q用鼠标右键单击第12帧插入关键帧，用鼠标右键中间的任意1帧创建传统补间动画。此时，时间轴窗口如图1所示q单击第12帧，将该帧对应舞台上的皮球稍微向下移动，使得皮

4、球反弹高度小于初始高度q在“图层1”之上新建“图层2”，将“图层2”更名为“音效”，如图1所示。q用鼠标右键单击“音效”图层第6帧插入空白关键帧，如图2所示q单击“音效”图层第6帧，从库面板中将声音文件pa.wav拖动到舞台上。在“音效”层从第6帧开始有声音的波形线，主要声音在第6帧到第10帧，而实际上，应该到第12帧，因为该音效的长度是1.1秒，即有声音的帧应该是7秒（因为本文档的帧频是6fps）。q按【Ctrl+Enter】键播放文档，在皮球落地时可以听到“啪”的一声响。q菜单上，文件保存。q创建“蝴蝶”振翅的影片剪辑元件q在舞台上创建影片剪辑动作动画q菜单上，插入新建元件，打开“创建新元

5、件”对话框。在名称后输入影片剪辑名称，行为选择“影片剪辑”，按“确定”按钮，打开影片剪辑编辑窗口,做动画。q一只蝴蝶在花丛中自由飞翔。q【技术要点技术要点】q本例主要利用影片剪辑元件来创建蝴蝶挥动翅膀的动画效果，然后在主场景中使用影片剪辑创建移动动画效果。q双击彩蝶飞舞.fla，库中有彩蝶1，彩蝶2两个元件。q创建“影片剪辑”：菜单上，插入新建元件，打开“创建新元件”对话框。在名称后输入“蝴蝶飞舞剪辑”，行为后选择“影片剪辑”，按“确定”按钮，打开影片剪辑编辑窗口,这个窗口与以前的元件编辑窗口是一样的。q菜单上，窗口库，打开库面板。q鼠标点击第1帧，然后，将库中元件“蝴蝶1”拖动到舞台上；鼠标

6、右键单击第3帧插入空白关键帧，再将库中元件“蝴蝶2”拖动到舞台上，调整元件“蝴蝶-2”的位置（窗口/对齐/相对于舞台/水平中齐，垂直中齐），使其身体（不是翅膀）与第一帧中元件“蝴蝶-1”的身体位置相同。 “蝴蝶飞舞剪辑”制作完成。q单击时间轴窗口左下方的“场景1”按钮切换到场景编辑窗口。菜单上，修改文档，打开“文档属性”对话框，设置文档尺寸为500300,背景颜色为白色，帧频为12fps，单击“确定”按钮。将“图层1”改名为“蝴蝶”q 鼠标单击第1帧，将库中的元件“蝴蝶飞舞剪辑”拖动到舞台上，点击舞台左下方的“属性”按钮，打开“属性”面板，设置对象的大小和位置为：宽39.2,高38.1；X:5

7、12.2,Y:0.8。q鼠标右键单击第30帧插入关键帧，将舞台上的“蝴蝶飞舞剪辑”拖动到舞台左侧外边。q鼠标右键单击第31帧插入关键帧，菜单上，修改变形水平翻转。q鼠标右键单击第60帧插入关键帧，将舞台上的“蝴蝶飞舞剪辑”拖动到舞台右下角外。q鼠标右键单击第61帧插入关键帧，菜单上，修改变形水平翻转q右键单击第90帧插入关键帧，将舞台上的“蝴蝶飞舞剪辑”拖动到舞台内部(X:84.3,Y:39.7，注意：此处有一朵花，蝴蝶正是停在此花上)，如图4-21所示。q鼠标右键单击第120帧插入帧q鼠标右键分别在第5、35、65帧上单击创建传统补间动画。q菜单上，文件导入到库，打开“导入到库”对话框，在此

8、对话框中找到 “蝴蝶飞舞背景.jpg”文件，点击“打开”按钮，此文件进行库中。q在“蝴蝶”图层上插入一个新的图层，改名为“背景”，将“背景”图层拖动到“蝴蝶”图层之下。q点击“背景”图层第1帧，将库中元件“蝴蝶飞舞背景”拖动到舞台上，对齐面板，匹配宽高，单击“背景”图层第120帧插入帧，时间轴如图q按【Ctrl+Enter】键播放文档。q菜单上，文件保存。q镜像跳动的字母q【实例说明实例说明】字母“Flash”上下跳动的同时，它的镜像字母也随之跳动。q【技术要点技术要点】主要使用对象的Alpha颜色属性设置和翻转操作创建倒影效果，然后利用影片剪辑元件来创建跳动动画效果。q启动Flash ，菜单

9、上，文件另存为，在“另存为”的对话框上，先选择保存文件的文件夹的位置，在文件名后输入：镜像跳动的字母.fla，点击“保存”按钮。q菜单上，修改文档，打开“文档属性”对话框，设置文档尺寸为300px400px，背景颜色为蓝色（#3399FF），帧频为12fps，点击“确定”按钮。q菜单上，插入新建元件，打开“创建新元件”对话框，在名称后输入：F，行为选择“影片剪辑”，单击“确定”按钮，打开元件“F”影片剪辑编辑窗口。q鼠标选择工具箱中“文本工具”，点击“属性”按钮，打开“属性”面板，设置字体为Arial Black，字体颜色为白色，大小为70，粗体显示，选静态文字，在舞台上添加文字“F” 。q选

10、择工具箱中的箭头工具，单击选中舞台上的字母F，点击舞台左下方的“属性”按钮，在打开的“属性”面板上，设置字母F的坐标为X:0，Y:0。q菜单上，修改转换为元件，打开“转换为元件”对话框，在名称后输入：字母F，在行为后选择“图形” 。单击“确定”按钮完成转换并返回“F”影片剪辑编辑窗口。q鼠标右键单击“图层1”的第10帧插入关键帧，鼠标右键单击第20帧插入关键帧；然后鼠标右键在第1帧上单击创建传统补间动画；鼠标右键在第10帧上单击创建传统补间动画。q在第10帧上，鼠标单击舞台左下方“属性”按钮，打开“属性”面板，单击舞台上的字母F，在属性面板上，将字母F的Y坐标由0更改为-100（将字母F向上移

11、动100个象素。q单击舞台左上方的“场景1”按钮，切换到场景编辑窗口。选择工具箱中的矩形工具，设置描绘颜色为无，填充颜色为深蓝色（#3100CE），在舞台下方绘制一个矩形，如图1所示。q库面板中拖动两次F影片剪辑元件到舞台上，创建F影片剪辑的两个实例，用鼠标选中其中一个，菜单上，修改变形垂直翻转。点击舞台左下方的“属性”按钮，打开“属性”面板，在“颜色”后面的列表框中选择“Alpha”，再将它的值设置为45%，调整舞台上两个字母F元件对象的位置，如图2所示。q【实例说明】雨点纷纷落下。q【技术要点】首先做一个雨点的影片剪辑，然后再用另一个影片剪辑做很多雨点的落下效果。加黑色的图层做背景。q启动

12、Flash ，菜单上，文件另存为，在“另存为”的对话框上，先选择保存文件的文件夹的位置，在文件名后输入：下大雨.fla，点击“保存”按钮。q菜单上，修改文档，打开“文档属性”对话框，设置文档尺寸为550px400px，背景颜色为蓝色（#3399FF），帧频为12fps，点击“确定”按钮。q菜单上，插入新建元件，打开“创建新元件”对话框，在名称后输入：一个雨点，行为选择“影片剪辑”，单击“确定”按钮，打开元件“一个雨点”影片剪辑编辑窗口。q鼠标选择工具箱中“椭圆工具”，笔触颜色为无填充，填充颜色为白色，在舞台上第一帧画白色椭圆。任意变形工具，使之稍微倾斜如图。q右键转换为元件，打开“转换为元件”

13、对话框，在名称后输入：雨滴，在行为后选择“图形”，单击“确定”按钮完成转换。q鼠标右键单击“图层1”的第6帧插入关键帧，按方向移动雨滴到舞台下方。然后鼠标右键中间任意帧上单击创建传统补间动画。q单击舞台左上方的“场景1”按钮，切换到场景编辑窗口。菜单上，插入新建元件，打开“创建新元件”对话框，在名称后输入：大雨，行为选择“影片剪辑”，单击“确定”按钮，打开元件“大雨”影片剪辑编辑窗口。q在图层1的第一帧舞台上，及其舞台上方从库面板中拖动很多的“一个雨点”影片剪辑。q增加图层2放在图层1下面，在第一帧，选择工具箱中的矩形工具，设置笔触颜色为无，填充颜色为黑色，在舞台上绘制一个大矩形做背景。q单击

14、舞台左上方的“场景1”按钮，切换到场景编辑窗口。从库面板中拖动“大雨”影片剪辑到舞台上。26qFlash cs4中的全新补间动画方式，能更灵活控制每帧的属性，而且可以看到每个帧上的动画轨迹，这样可创作出更加完美的补间动画。q能够创建补间动画的对象包括按钮、文字、图形元件、影片剪辑。q传统补间动画是由关键帧组成的，而补间动画则是由属性关键帧组成的，属性关键帧是以小菱形图标表示的。q但是补间动画的第一帧例外，还是以关键帧的形式表示，以黑圆点显示。 27q手动添加q创建补间动画，选择添加属性关键帧的位置，右击鼠标，在快捷菜单中选择“插入关键帧”子菜单中的命令。q子菜单中的命令都代表了对动画对象的一种

15、属性控制，其具体设置可以在“属性”面板中完成。q自动添加q当鼠标选择所在位置没有属性关键帧的情况下，如果选中舞台中的补间动画对象，并设置其属性（如移动位置、设置Alpha值及色调等），就可以自动在当前位置添加一个属性关键帧。q删除q选择属性关键帧，右击鼠标，在快捷菜单中选择“清除关键帧”子菜单中的命令。q【实例说明】雪花飘飘洒洒落下。q【技术要点】首先做一个雪的影片剪辑，然后再用另一个影片剪辑做很多雪花的缓缓落下效果。加黑色的图层做背景。因为动画是曲线，用补间动画来实现。q启动Flash ，菜单上，文件另存为，在“另存为”的对话框上，先选择保存文件的文件夹的位置，在文件名后输入：下大雪.fla

16、，点击“保存”按钮。q菜单上，修改文档，打开“文档属性”对话框，设置文档尺寸为550px400px，背景颜色为蓝色（#3399FF），帧频为12fps，点击“确定”按钮。q菜单上，插入新建元件，打开“创建新元件”对话框，在名称后输入：一个雨点，行为选择“影片剪辑”，单击“确定”按钮，打开元件“一个雪”影片剪辑编辑窗口。q鼠标选择工具箱中“椭圆工具”，笔触颜色为无填充，填充颜色为最后一行第2个黑白渐变色，按shift画圆，用颜料桶点中心。如图。q右键转换为图形元件，单击“确定”按钮完成转换。q选中第1帧，创建补间动画，分别在第25、50帧插入属性关键帧，选全部，改变雪花的位置，将轨迹用箭头改成弧

17、形。q单击舞台左上方的“场景1”按钮，切换到场景编辑窗口。菜单上，插入新建元件，打开“创建新元件”对话框，在名称后输入：大雪，行为选择“影片剪辑”，单击“确定”按钮，打开元件“大雪”影片剪辑编辑窗口。q在图层1的第一帧舞台上，及其舞台上方从库面板中拖动很多的“一个雪”影片剪辑。q增加图层2放在图层1下面，在第一帧，选择工具箱中的矩形工具，设置笔触颜色为无，填充颜色为黑色，在舞台上绘制一个大矩形做背景。q单击舞台左上方的“场景1”按钮，切换到场景编辑窗口。从库面板中拖动“大雪”影片剪辑到舞台上。q在主时间轴上，选择您想使用的舞台上动画的每一层中的每一帧。按Shift+所有帧，选中所有帧，然后，右

18、键选择“复制帧”。q选择“插入”“新建元件，在“创建新元件”对话框中，给该元件命名。 行为选择“影片剪辑”，然后单击“确定”。qFlash 会在元件编辑模式下打开一个新元件来编辑。q在时间轴上，单击第 1 层上的第 1 帧，然后选择右键“粘贴帧”。q单击舞台上方信息栏内的场景名称，返回。q作业作业 4.1 拍皮球q作业作业 4.1 拍皮球时间轴q作业作业 4.2 飞舞的蝴蝶q作业作业4.3 镜像跳动的字母q作业作业 4.4用影片剪辑创建用影片剪辑创建“下大下大雨，下大雪雨，下大雪”的动画的动画q使用影片剪辑元件创建一颗雨滴落下的动画效果，然后在主场景的同一帧中添加多个影片剪辑元件，从而实现同一时刻多颗雨滴落下的动画效果。q作业作业 4.4用影片剪辑创建用影片剪辑创建“下大下大雨，下大雪雨，下大雪”的动画的动画q使用影片剪辑元件创建一颗雪滴落下的动画效果，然后在主场景的同一帧中添加多个影片剪辑元件，从而实现同一时