Fiash第二讲(一)：逐帧动画技术

1、幻灯片1一、逐帧动画技术l 逐帧动画（FramebyFrame）又称关键帧动画、原始动画 l 动画原理原始动画技术是利用人的视觉暂留原理，快速地播放连续的、具有细微差别的图像，使原来静止的图像感觉运动起来。 幻灯片2帧，帧频l 帧频Flash 动画播放速度按每秒多少帧计算，记作fps l 默认fps是每秒12帧l fps速度能够设置为从0.01到120；即显示速度慢到每100秒播放一帧，快到每秒播放120帧。幻灯片3帧的类型 l 帧的类型关键帧空白关键帧普通帧渐变帧动作帧含有帧标签的帧 幻灯片4理解Flash逐帧动画【例1】 由Gif文件理解Flash逐帧动画知识点：理解逐帧动画的概念，SWF

2、文件发布设置，防止导入发布选项。幻灯片5制作步骤（1）导入Gif文件。新建一Flash文件，选中第1帧；“文件”“导入”“导入到舞台”，将ace.gif文件导入到舞台上。（2）修改文件尺寸。“修改”“文档” “内容”匹配。（3）发布文件。将文件命名为“ace_framebyframe.fla”；“文件”“发布设置格式标签：去掉“HTML”项。“文件”“发布设置Flash标签：选中“防止导入”和“省略跟踪动作”项，“JPEG品质” 100。幻灯片6实例 l 【例2】 制作具有打字效果的动画 l 知识点：分离文字，插入关键帧、空白关键帧及普通帧，翻转帧，在帧上加入声音，声音的事件同步设置，制作逐帧

3、动画 幻灯片7制作步骤（1）新建文件。尺寸为550260像素；在舞台上输入一段文字，将文字调整到舞台中心位置。将现有图层改名为text。插入新两个图层，从上到下分别命名为sound和as。（2）分离文字。单击文字所在的帧，选择“修改”“分离”菜单项，或按CtrlB键，将文字分离。 幻灯片8（3）制作逐帧动画效果。 “插入”“时间轴”“关键帧”（或直接按F6键）：插入一个新关键帧。在新插入的关键帧上，将最后一个符号“。”删除。（4）继续制作逐帧动画效果。重复第（3）步，每插入一个新关键帧，将该关键帧舞台上的最后一个字母删除。重复插入关键帧和删除文字或字符的操作，直到舞台上所有文字都被删除为止。幻

4、灯片9（5）翻转帧。单击text图层的空白处选中所有帧，然后右击被选中的帧，在菜单中选择“翻转帧”，所有的帧都翻转过来，原来的末帧现在变成了首帧。按回车键观看动画，能够看到一个文字逐渐增加的动画。幻灯片10（6）添加打字机音效。选中sound图层，选择 “文件”“导入”“导入到库”，将typing.wav文件导入。加入声音到sound图层：属性面板声音的下拉列表中选择typing.wav；（ “窗口”“库”将声音文件拖到舞台上）属性面板“重复” 输入2；属性面板“同步” “数据流”。在sound图层与text图层最后一帧相对应的帧52帧处插入普通帧。 幻灯片11（7）加入命令控制。选择as图层

5、，选中第52帧，即与text图层最后一帧相对应的帧，选择“插入”“时间轴”“空白关键帧”，或按F6键，插入一个空白关键帧。选中该空白关键帧， 选择“窗口”“动作” 打开动作面板。在动作面板的输入框中输入命令“stop()；”，注意，此命令没有引号，结尾有分号。关于ActionScript编程，将在第13章详细介绍。（8）测试动画，一个带键盘音效的打字动画生成了。幻灯片12实例l 【例3】 制作滚动的通知l 知识点：使用标尺、辅助线幻灯片13制作步骤（1）定位第1行文字。打开上例制作的文件，选中text层的第2帧，将第一行文字相对于舞台垂直居中对齐。用同样的方法将只有第1行文字的所有帧（直到第1

6、5帧）中的文字垂直居中对齐。（2）定位第3行文字。选中第3行文字开始的帧，将帧上第2行上的文字选中，用鼠标拖出了一条辅助线到第2行文字的上边框。选中该帧上所有文字，按光标键 Shift键，向上移动所有文字，直到第3行文字的上边框与辅助线对齐为止。用同样方法将剩余所有帧上的文字都向上移动到相对应位置。幻灯片14实例 l 【例4】 制作组字的动画l 知识点：制作逐帧动画，使用翻转帧 幻灯片15制作步骤（1）新建文件，尺寸大小为150100像素；选择文字工具，选择字体为“MS Gothic”（也能够选择其他字体），字号96，在第一帧舞台上输入“FUN”。 （2）新建图形元件“ball”，画一个放射性

7、渐变色的球，宽高各为10厘米。（3）在场景中，新建一图层“ball”，将ball多次拖入到ball层的第1帧的舞台上，让球填满文字FUN。幻灯片16（4）在ball层上，在当前帧的后面按F6键插入关键帧，随机删去一个球，再插入关键帧，再随机删去一个球。重复上面的操作，每插入一个新关键帧，就删去一个球，直到球全部删完。（5）用例5-2中的方法将ball层上的所有帧翻转过来。删除文字层。幻灯片17实例 l 【例5】 制作毛笔写字效果 l 知识点：使用橡皮擦工具，文字分离为形状，翻转帧 幻灯片18制作步骤（1）准备文字。在第一帧舞台上输入“Wonderful”，字体为“Monotype Corsiv

8、a”，字号96。（2）文字变形状。两次选择“修改”“分解”菜单项（或执行两次Ctrl+B组合键）将文字分解为形状。（3）擦除文字。按F6键在第一帧的后面添加一个关键帧，将该帧舞台上最后的字母用橡皮擦工具擦去四分之一，擦除的方向为书写的逆顺序。幻灯片19（4）擦除所有文字。按F6键依次在后面添加关键帧，每添加一个关键帧，按书写的逆顺序擦去字母的一部分，直至擦除所有字母。 （5）翻转帧。选中所相关键帧，右击选中的帧，选择“翻转帧。（6）制作毛笔。新建一个图形元件，命名为“brush”；选择矩形工具，填充颜色选白色褐色线性渐变，笔触颜色选无色，画一个细长矩形，作为毛笔杆。再在矩形的顶部画两条直线，调整成曲线，做成毛笔头的形状，填充色选白色黑色线性渐变色。幻灯片20（7）设置毛笔的位置。返回场景1，新建一个图层，选中第2帧，打开库，将库中的brush元件拖入到舞台上，将其放在笔画的末尾处。将图层上的所有帧都转换为关键帧。将其它帧上的毛笔都调整到舞台上的文字的末尾处。为了制作更逼真的效果，在某些帧将毛笔的角度做些调整。幻灯片21实例 l 【例6】 分析并制作一个“行走的人”逐帧动画 l 知识点：分解运动中的对象，由简单动作生成复杂动作的方法，颜