Flash动画制作

第五部分 Flash 动画制作 §5.1简单动画制作 §5.2 动画镜头技巧制作 §5.3 交互动画制作 *§5.4 音频与视频的导入 2012/5/8 1 图形与人机交互 §5.1简单动画制作 §5.1.1动画图片素材的准备 §5.1.2逐帧动画 §5.1.3路径动画 §5.1.4遮罩动画 §5.1.5色调与透明度动画 §5.1.6位移动画 §5.1.7形变动画 2012/5/8 2 图形与人机交互 §5.1简单动画制作 Flash动画类型可分为逐帧动画和补间动画两个大类。 补间动画又分为运动动画和形状动画两种。 运动动画可以借助于引导层使对象沿任意路径运动的， 称为路径动画；运动动画借助于遮罩层作用产生多种风格 效果的，称为遮罩动画；运动动画围绕对象的位置、中心 点旋转角度作补间变化的，我们称之为位置（位移）动画。 2012/5/8 3 图形与人机交互 §5.1.1动画图片素材的准备 1。绘图工具的使用 Flash可以使用外部导入的图像来制作动画，但精美图案的绘制 是精彩动画的基础。使用者首先必须了解各种绘图工具的使用 方法。 2。位图的导入与编辑 Flash具有简单的绘图功能。但绘图并不是flash的主要功能，一般flash 中使用的图形图像都需要从外部导入。 Flash可以直接导入的位图图像格式有：*.JPG、*.bmp、*.PNG、*.GIF 等，在遇到不能直接导入的位图文件时（比如TIF格式），经常需要使 用photoshop将它们转换格式。另外Flash有时需要导入镂空的图像， 比如没有背景的花，也需要利用photoshop对位图进行处理或者使用 flash的打散命令及橡皮擦工具加工。 2012/5/8 4 图形与人机交互 §5.1.2逐帧动画 逐帧动画： 传统的逐帧制作方法非常繁琐，每一帧都 需要人工制作。通过结合遮罩层及补间动 画的“逐帧”动画在效率和效果上都提高 不少。 2012/5/8 5 图形与人机交互 逐帧动画例：笔画文字 １．新建Flash文件； ２．在第一帧：输入文字； ３．两次打散文字 ４．逐帧建立各关键帧（按笔顺用橡皮擦文 字笔画）； ５．按逆序颠倒所有帧； ６．预览 2012/5/8 图形与人机交互 6 §5.1.3 路径动画 路径动画亦称引导层动画，在引导层里绘 制运动路径，起到引导对象沿辅助线移动 的作用。引导层的图形只能在舞台工作区 内看到，在输出的影片中不会出现。可以 将多个普通图层关联到一个引导层。这种 动画的制作要点是：将动画元件的中心与 路径对齐，否则元件运动时会偏移辅助线 的位置，达不到所需要的效果。 2012/5/8 7 图形与人机交互 太阳冉冉升起 2012/5/8 图形与人机交互 8 太阳冉冉升起 制作步骤： 1。导入太阳位图，并将它处理后转换为图形元件； 2。导入背景图（背景层）； 3。在背景层上建太阳层，在太阳层上建运动轨迹层； 4。在运动轨迹层绘制轨迹； 5。将三个图层都延续到第50帧， 6。太阳层的第1帧和第50帧为关键帧，将太阳元件拖入，在 它们之间作运动补间动画，并在属性面板上做好相关设置， 使动画自然流畅 太阳冉冉升起 太阳冉冉升起 要点： 1。运动轨迹层制作 2。如何使关键帧上的元件实例紧贴所给路径？ §5.1.4遮罩动画 遮罩层的作用是：遮罩层中的图案不显示 出来，但它可以控制其下面的被遮罩层只 显示出有遮罩图案的区域里的内容，而隐 去其他的区域里的内容。利用遮罩层的这 一特性，可以制作很多特殊效果。 2012/5/8 12 图形与人机交互 地球自转 2012/5/8 图形与人机交互 13 旋转的地球 制作步骤： 1。制作“地图展开图”。 2。将该地图展开图复制一份，水平移到原图的右边并拼接 组合在一起 旋转的地球 3。创建 “立体地图”影片剪辑元件； 4。创建一个“地球自转”的影片剪辑元件； 旋转的地球 • 该元件的图层1第1帧绘制一个蓝色的圆形图形，图层2的 第1帧复制图层1第1帧，并将其设置成蓝色透明 • 在图层2之上新建图层3，将影片剪辑元件“立体地图”拖 动到舞台工作区中，调整该实例的位置，制作图层3的第 1~200帧的补间动画，让“立体地图”从左向右水平移动。 （第200帧为关键帧） 旋转的地球 • 在图层2下新建图层4。将图层3的第1帧内容复制粘贴到图 层4的第1帧，然后将图层4的第1帧中的图片水平翻转，调 整好立体地球图片的位置，制作图层4的第1~200帧的运动 动画，立体地球展开图从左向右水平移动。 ５．将图层1设置为遮罩层 旋转的地球 要点： １．遮罩动画的运用 ２．各图层之间的排列顺序 ３．复制其它图层的帧 §5.1.5色调与透明度动画 色调动画指的是逐帧动画或补间动画中围绕颜 色、亮度、透明度等分别变化或同时变化的动 画。在属性面板上可以调整动画元件的颜色、 亮度、透明度、色调，并且将这些参数的变化 为动画。 下面的练习是色调动画与路径动画的结合。通 过属性面板改变元件的透明度和色调制作星星 的闪烁和变色效果，通过补间动画的属性面板 及路径引导层来制作星星的旋转、坠落效果。 2012/5/8 19 图形与人机交互 星光闪烁 • 制作星星图形元件 多边形工具，渐变编辑色板，渐变变形工具 • 制作星星闪烁１影片剪辑元件 星星元件，属性面板改变星星元件的色调，补间插值 • 制作星星闪烁２影片剪辑元件 星星闪烁１元件，属性面板改变alpha值，补间插值 • 将星星闪烁２放入场景的不同图层中，并 为它们分别设置不同的路径引导层 2012/5/8 图形与人机交互 20 §5.1.6位移动画 • 为使位移动画逼真，中心点的定位很重要。 • 注意旋转中心的定位 2012/5/8 21 图形与人机交互 翻页画册 2012/5/8 图形与人机交互 22 翻页相册制作 制作步骤： 1。根据所给图片大小设置合适的工作区宽高。 显示标尺并创建合适的参考线； 翻页相册制作 2。图层1的第1帧插入关键帧，将库中的元件1拖入到舞台 工作区；在图层1上添加图层2，选中图层2的第1帧插入关 键帧，将库中的元件2拖入到舞台工作区； 将图层1和图层2的第1帧都延续到第50帧。此时要求第50 帧为关键帧。 翻页相册制作 3。选中图层2第50帧的实例，用鼠标将该帧 实例对象的中心标记拖动到图示位置，然 后将第50帧复制粘贴到第1帧； 翻页相册制作 4。选中图层2的第50帧，使用任意变形工具，用鼠标向左 拖动该实例右侧的控制柄，将它水平折叠翻转过来，然后 将鼠标指针移到实例左边缘处，当鼠标指针显垂直箭头状 时，垂直向上微微拖动鼠标，使实例左边微微向上倾斜。 翻页相册制作 5。在图层2的第1帧和第50帧之间做补间动画； 6。在图层2之上添加一个名称为“图层3”的图层，，按照 前述方法创建图层3第1~50帧的“元件3”实例补间动画。 7。选择图层2的第25帧及图层3的第26帧，分别创建2个关键 帧；选中图层3第1~25帧之间所有的帧，删除，然后将新 的第1~25帧拖移到第26~50帧处；选中图层2第26帧~第50 帧之间的所有帧，删除，这样第一页翻页动画就制作出来 了。 翻页相册制作 要点： 1。旋转中心的定位 2。多页翻页的制作 问题 • 如果希望每页的正反两面是不同的画面， 应该如何修改？ 2012/5/8 图形与人机交互 29 §5.1.7形变动画 形变动画即形状补间动画，它是由一种形 状对象逐渐变为另外一种形状。Flash可以 将图形、分离的文字、分离后的位图进行 变形。 在形状动画中，对象位置和颜色的变化是在 两个对象之间发生的，而在动作动画中， 变化是针对同一对象的位置和颜色属性。 2012/5/8 30 图形与人机交互 形变动画：文字变形 • 在不同帧的相同位置输入字母E、H； • 打散字母 • 制作形状补间 • 设置形变提示符使形变流畅 2012/5/8 图形与人机交互 31 §5.2 动画镜头技巧制作 动画制作中，若要制作连贯、流畅的效果，各 画面之间的切换也很重要。几种常用的动画镜 头及其切换技巧：摇镜头、推镜头、游览镜头、 淡入淡出、景深效果等。 摄像机位置不变而改变拍摄的方向称为“摇镜 头”；摄像机通过镜头的变焦或通过向拍摄目 标靠近的方法使所拍摄的内容放大称为“推镜 头”，反之则称为“拉镜头”；摄像机位置发 生变化的称为“游览镜头”。 2012/5/8 32 图形与人机交互 摇镜头制作 • 导入素材图片到库中； • 绘制镜头框； • 摇镜头首位帧位置设置 • 补间插值 注意：镜头框图层放在内容图层的上面 2012/5/8 图形与人机交互 33 §5.3 交互动画制作 交互动画是Flash的一大特色。使用互动 按钮是实现交互功能最简洁的方法。这样 在播放影片时就可以通过单击按钮的方法 来控制动画的播放、跳转和链接。要使按 钮在flash影片中具有交互性，需要先制作按 钮元件，再由按钮元件创建按钮实例，并 在制作按钮实例时为它分配对交互事件产 生的动作。 2012/5/8 34 图形与人机交互 贺卡制作 2012/5/8 图形与人机交互 35 贺卡制作 制作步骤： 1。置入背景图片并使其位于舞台中央 2。制作隐形按钮（用于点击星星） 3。编辑公共按钮（用于卡片交互） 贺卡制作 4。制作小星星 5。制作星星影片剪辑元件 6。制作问候语 贺卡制作 7。合成卡片场景 贺卡制作 要点： １．用到隐形按钮，公共库按钮做交互 ２．位移与遮罩动画、色调动画 打气球小游戏 2012/5/8 图形与人机交互 40 打气球小游戏制作 制作步骤： 1。气球爆炸 影片剪辑元件 制作 2。隐形按钮 元件制作 打气球小游戏制作 3。将隐形按钮功能赋予气球爆炸元件 4。气球上飘 影片剪辑元件 制作 5。场景 制作 打气球小游戏制作 问题： 1。在制作“气球爆炸”元件时，为什么要分 别在第1帧和第5帧加上stop语句？ 2。此例中，脚本语句on (release) { gotoAndPlay(2);}只可加在按钮实例上，不 可加在图层2的第1帧上。（ Actionscript 3.0 不支 持在元件实例上添加代码） 3。为降低游戏难度，可以将上述按钮实例上的脚本语句改 为？ 动画配乐 • 音频导入 • 音乐长度与帧率的关系 • 声音效果的简单编辑（属性面板） 2012/5/8 图形与人机交互 44 问题？ • 在制作MTV时，有时候由于电脑的运行速度 不同，在较慢的电脑上会出现声音播放完 毕但动画还在进行的结果（歌曲与歌词字 幕动画），那么如何保证声音与动画严格 同步？ 2012/5/8 图形与人机交互 45 影片的发布和导出 • 发布设置 • 导出视频文件 2012/5/8 图形与人机交互 46 其它形式的按钮制作 • 声音按钮 • 动画按钮 • 立体按钮 2012/5/8 图形与人机交互 47