《Fiash第二讲一逐帧动画技术》由会员分享,可在线阅读,更多相关《Fiash第二讲一逐帧动画技术(6页珍藏版)》请在金锄头文库上搜索。
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 Corsiva
8、”,字号96。(2)文字变形状。两次选择“修改”“分解”菜单项(或执行两次Ctrl+B组合键)将文字分解为形状。(3)擦除文字。按F6键在第一帧的后面添加一个关键帧,将该帧舞台上最后的字母用橡皮擦工具擦去四分之一,擦除的方向为书写的逆顺序。幻灯片19(4)擦除所有文字。按F6键依次在后面添加关键帧,每添加一个关键帧,按书写的逆顺序擦去字母的一部分,直至擦除所有字母。 (5)翻转帧。选中所有关键帧,右击选中的帧,选择“翻转帧。(6)制作毛笔。新建一个图形元件,命名为“brush”;选择矩形工具,填充颜色选白色褐色线性渐变,笔触颜色选无色,画一个细长矩形,作为毛笔杆。再在矩形的顶部画两条直线,调整
9、成曲线,做成毛笔头的形状,填充色选白色黑色线性渐变色。幻灯片20(7)设置毛笔的位置。返回场景1,新建一个图层,选中第2帧,打开库,将库中的brush元件拖入到舞台上,将其放在笔画的末尾处。将图层上的所有帧都转换为关键帧。将其它帧上的毛笔都调整到舞台上的文字的末尾处。为了制作更逼真的效果,在某些帧将毛笔的角度做些调整。幻灯片21实例 l 【例6】 分析并制作一个“行走的人”逐帧动画 l 知识点:分解运动中的对象,由简单动作生成复杂动作的方法,颜色样式调整 幻灯片22分析、学习动画的方法 幻灯片23实训4 l 模仿实例练习,尽快熟悉各种工具的综合应用。l 模仿例5,将毛笔替换为铅笔,制作一个逐帧动画:铅笔写字。l 模仿小小动画,制作一个简单的火柴头动画。l 完善例6,将行走的人加添手臂动作,制作完整的一个人行走的动画