东北大学东北大学 艺术学院艺术学院 讲师讲师 高路高路天下事没有不劳而获的东西。 No pain, no gain. 人生警句2第六章Flash动画基础3Flash动画设计及制作 东北大学 艺术学院 讲师 高 路第六章 Flash动画基础场景帧图层动画原理及分类逐帧动画补间形状动画传统补间动画传统运动引导动画遮罩动画高级发布设置自定义测试影片的下载速度4Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.1场景场景SETTING场景指整部或部分电影的拍摄场地。在FLASH中可以有多个场景，在不同场景中跳转的可以gotoandplay(“目标场景”，帧)。至少要有一个场景）。 动画场景1场景2场景 形状元件声音动作形状元件声音动作形状元件声音动作5Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.1场景场景选择“窗口”“其他面板”“场景”场景可复制，可重新命名，可删除。默认情况下，将按照场景的上下顺序进行播放，另外，使用ActionScript语言可以更灵活地控制场景之间的切换。 6Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.2帧帧 帧是Flash动画的基本单位，理解帧的概念并灵活得使用它，使创作Flash动画的关键。帧就是影像动画中最小单位的单幅影像画面，相当于电影胶片上的每一格镜头。一帧就是一副静止的画面，连续的帧就形成动画，如电视图象等。7Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.2帧帧频简单的说，就是动画的播放的速度。以每秒播放的帧数Fps为度量单位。标准的动画速率是24 Fps，它能够满足在网页或FlashMTV等领域的播放需求，这也是Flash默认的帧频。 8Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.2帧时间轴基础帧选择帧编辑帧帧的设置9Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.2帧时间轴Flash中非常重要的面板，快捷键Ctrl+Alt+T，播放头，当前帧，帧速率，运行时间，帧居中按钮10Flash动画设计及制作 东北大学 艺术学院 讲师 高 路播放头帧居中按钮当前帧帧速率运行时间6.2帧基础帧帧分为两类，基础帧和动画帧。基础帧有三种类型，即关键帧、空白关键帧、延长帧。动画帧，如传统补间动画帧、补间形状帧等。空白帧：不包括任何内容的帧。11Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.2帧基础帧关键帧：包括任何有意义内容的帧，快捷键F712Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.2帧基础帧延长帧：对前一个关键帧的内容起到延长其显示时间的作用。13Flash动画设计及制作 东北大学 艺术学院 讲师 高 路延长帧6.2帧选择帧在时间轴上单击其一帧即可选择帧。按住Shift键并单击其他帧，可选择多个连续的帧。按住Ctral键并单击其他帧，可选择多个不连续的帧。选择所有帧，可选择“编辑”“时间轴”“选择所有帧”按住鼠标左键在“时间轴”上拖动，可以将鼠标滑过的帧都选中。14Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.2帧编辑帧删除帧，剪切帧，复制帧，粘贴帧，清除帧，反转帧，15Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.2帧帧的设置16Flash动画设计及制作 东北大学 艺术学院 讲师 高 路绘图纸外观按钮编辑多个帧按钮修改绘图纸标记按钮帧居中按钮绘图纸外观轮廓按钮6.2帧帧的设置制作Flash动画时，同一时间点只能显示动画序列中的一帧内容，但有时需要同时查看多个帧，这就要使用到“洋葱皮”工具。17Flash动画设计及制作 东北大学 艺术学院 讲师 高 路显示洋葱皮范围6.2帧帧的设置时间轴的显示模式18Flash动画设计及制作 东北大学 艺术学院 讲师 高 路取消“彩色显示帧”选择“预览”模式6.3 图层象盖房子一样，一层一层的，每一层都有内容。相互重叠、覆盖互不影响“层”的概念在Photoshop中非常重要，它是构成图像的重要组成单位，许多效果可以通过对层的直接操作而得到，用图层来实现效果是一种直观而简便的方法。19Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.3 图层20Flash动画设计及制作 东北大学 艺术学院 讲师 高 路锁定解锁所有图层显示隐藏所有图层图层显示区新建图层按钮将所有图层显示为轮廓新建文件夹按钮删除图层按钮6.3 图层创建图层默认状态下，Flash文件只有一个图层。创建图层的方法：1、单击“时间轴”面板上的“新建图层”按钮2、选择“插入”“时间轴”“图层”默认状态下，新建图层的命名为“图层N”，N为创建新图层的次数。21Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.3 图层命名图层双击图层名称，待其变为可输入状态后，输入新的图层名称，按Enter键即可。双击需要命名的图层名称前的图标，在弹出的“图层属性”对话框中输入新的图层名称，单击“确定”按钮退出对话框即可。在需要命名的图层上右击，再弹出的菜单中选择“属性”命令，在弹出的“图层属性”对话框中输入新的图层名称，单击“确定”按钮退出对话框即可。22Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.3 图层选择图层在“时间轴”面板上单击某一个图层，即可选中。在“时间轴”面板上单击某一帧，即可将该帧所在的图层选中。在工作区域选择一个对象，可将该对象所在的图层选中。按Shift键，单击多图层，可选择相邻的多图层。按Ctral键，单击多图层，可选择不相邻的多图层。23Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.3 图层移动图层在Flash中图层的顺序将决定重叠对象间的覆盖情况，而且总是处于上层的对象遮盖下层的对象。在新建图层时，新的图层总是位于当前选择的图层的上方。复制图层通过复制图层，可以将该图层中的所有图形、图像及其他对象复制一份。删除图层对不需要的图层，可以将其删除，以免有太多图层干扰操作。24Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.3 图层图层属性显示或隐藏所有图层按钮锁定或解除锁定所有图层按钮将所有图层显示为轮廓按钮图层文件可以将图层存放在图层文件夹中，方便对图层进行分类管理。而且通过隐藏或锁定一个图层文件夹。可以一次性隐藏或锁定文件夹中的所有图层内容，提高图层的管理效率。25Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.4动画原理及分类动画是一系列彼此在视觉效果上相关的图画快速逐帧显示的效果。由于人的眼睛有0.1秒的视觉残留，所以看上去就像是物体运动起来了。在Flash中，包括传统补间动画，补间动画，补间形状及逐帧动画等。无论是哪一种，都需要帧、图层、场景、舞台的元素的相互配合。帧是构成动画的基本单位。图层是用于装载帧的一个载体。图层之间还有上下层叠顺序的特性，在视觉上可以造成远近、前后的距离感。舞台是展示动画效果的地方，在播放器中播放，只有在舞台中的对象被显示。26Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.5逐帧动画工作原理在每一帧种插入不同的图片或在每一帧中改变图片的部分元素。是Flash动画制作中最为麻烦，但动画效果最好的一种。类似于传统动画。要求制作者掌握动画的运动规律。27Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.6补间形状动画工作原理补间动画是某一个对象在一定时间内其形状发生过渡型补间的动画。在创建补间动画时参与动画制作的对象必须为分解的矢量对象即形状。补间形状动画在时间轴上此类帧表现为绿色底、首尾间以箭头连接的若干个帧。28Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.6补间形状动画设置变形控制点1、在“时间轴”面板中单击选择形状补间动画第一帧。2、选择“修改”“形状”“添加形状提示”，快捷键Ctrl+Shift+H组合键，第一帧的形状对象添加了一个标有字母“a”的红色圆形控制点。3、移动红色圆形控制点到图形对象需要标记的位置。4、单击选择形状补间动画的最后一个关键帧，该帧的图形对象中自动添加了一个标有“a”的红色圆形控制点。5、移动最后一个关键帧中的标记到需要与第一帧的标记相对应的位置，移动后，控制点由红色变为绿色。6、返回到第一帧，此时红色圆形控制点变为黄色。7、重复操作，可增加控制点。控制点越多，形状变形的时候会越精确。29Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.7传统补间动画Flash中的补间补间是Flash中非常庞大的一个动画制作手法，它可以通过设置相应的参数，调整帧与帧之间的元素的属性变化，如位置、大小、颜色及透明度。从创建形式上，可分为：1、传统补间动画2、补间动画3、补间形状动画传统补间动画和补间动画都可以在元件及文本之间创建。补间形状动画必须在普通的图形之间创建。30Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.7传统补间动画工作原理传统补间动画是早期版本运用比较广泛的一种动画形式。它需要有两个处于同一图层中的关键帧，其中必须只能存在一个元件或文本对象。传统补间动画显示为蓝紫色背景，且关键帧之间会有一个箭头。31Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.7传统补间动画工作原理相关属性：帧标签，标签类型，补间，缩放，缓动，编辑缓动，旋转，调整到路径，同步，对齐，声音32Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.7传统补间动画工作原理色彩补间动画是补间动画的一个分支。灵活利用元件的色彩、亮度、透明度来变化效果。色彩补间动画的效果比较适合网页片头的一些特效制作。33Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.8传统运动引导动画传统运动引导动画是指一图层中的对象沿另一图层中的引导路径进行运动的动画，而且在动画中不会看到引导路径的内容。引导路径所在的图层被称为“运动引导层”。引导路径只能为形状，不可以为元件或组件等形式。沿路径运行的对象所在的图层为“被引导层”一个引导层可以引导多个被引导层。34Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.9遮罩动画遮罩动画遮罩是Flash的一项最基本的功能，使用遮罩可以制作出很多效果。遮罩动画的特点：至少需要两个图层，即遮罩层和被遮罩层。常用于创建类似放大镜、突出主题、逐渐显现或隐藏等效果的动画。35Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.10 高级发布设置默认情况下，按Ctrl+Enter组合键预览动画。同时会与当前文件相同位置的保存位置创建一个对应的Flash动画文件，即SWF格式动画文件。除此之外，如果要对发布的文件进行更详细的设置，就需要进行发布设置。36Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.10 高级发布设置发布为Flash动画通过Flash发布设置选项，可以设定SWF文件的版本、加载顺序、JPEG格式图像的品质和密码等参数。37Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.10 高级发布设置发布为Flash动画1、设置发布版本根据需要可以将动画发布为从Flash1-Flash10及FlashLite1.0-FlashLite3.0中的任意一个版本的动画。注：低版本可以在高版本中演示，高版本不可以在低版本中演示。2、设置Flash动画显示时的顺序为了避免浏览者因为时间缓慢而放弃浏览。可以采取设置“加载顺序选项”。由上至下、由下至上。3、设置发布的脚本版本ActionScript3.0与ActionScript2.0有很大程度的改变。 通过ActionScript2.0发布的不能在ActionScript3.0时正常运行。38Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.10 高级发布设置发布为Flash动画4、加密保护发布的Flash动画给动画文件设置保护模式，可以避免他人剽窃自己的劳动成果。在发布设置对话框中，勾选“防止导入”复选项。还可以在“密码”中设入密码，输入正确密码才能导入当前文件。5、设置动画文件中的位图质量Flash中的位图是以JPEG的格式存储的。数值越大，图像质量与高。6、设置全局声音压缩方式39Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.10 高级发布设置发布为HTML文件根据需要，可以将Flash动画直接发布为HTML文件，从而减少将Flash动画文件置入HTML文件的操作步骤。40Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.10 高级发布设置发布为HTML文件1、选择HTML文件的模板Flash提供了数种生成HTML文件时可用的模板。每个模板都有对应的模式选项信息。41Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.10 高级发布设置发布为HTML文件2、检测用户现有版本在发布设置对话框中，选择“检测Flash版本”选项，则在用户浏览该网页时，会自动检测用户当前所用的播放器版本。如果低于Flash文件输出的版本，则会弹出提示框提醒。3、设置Flash动画尺寸由于Flash采用矢量技术，因此可以根据需要改变网页中Flash动画尺寸。在发布设置对话框中，设置“宽”和“高”。还可以对“像素”和“百分比”两种不同的方式进行修改。42Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.10 高级发布设置发布为HTML文件4. 回放开始时暂停，循环，显示菜单，设备字体（只对静态文本有用） 5.隐藏Flash动画右键播放控制菜单在发布设置对话框中，取消“显示菜单”复选框，即可隐藏右键哦南瓜子菜单。43Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.10 高级发布设置发布为HTML文件6. 设置Flash动画的质量在“品质”下拉列表框中，选择不同的选项，可以设置动画质量。低，自动降低，自动升高，中，高，最佳。质量低，速度快。 7.对齐方式 HTML对齐：默认，左对齐，右对齐，顶部，底部等 Flash对齐：“水平”左对齐，居中，右对齐。“垂直”顶部，居中，底部。 8.对齐方式 根据需要，可以设置Flash动画在网页中的窗口模式。窗口，不透明无窗口，透明无窗口。44Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.10 高级发布设置发布为HTML文件 9. 设置缩放方式根据需要，置入网页的动画可能被缩小或放大，也可能被裁减。在发布设置对话框中通过设置“缩放”选项，设置动画的缩放方式。默认，无边框（能保证长宽比），精确匹配（不能保证长宽比），无缩放。45Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.10 高级发布设置发布为放映文件由于不能保证所有需要观赏Flash动画的终端浏览者都安装有Flash播放器，因此，某些情况下必须将动画文件发布为放映文件。放映文件：是Flash将其播放器与动画文件结合成为一个可执行的文件。可以在发布设置中选择Windows放映文件.exe或Macintosh放映文件.app，从而可以应用到Windows和Macintosh两个平台上的放映文件。46Flash动画设计及制作 东北大学 艺术学院 讲师 高 路6.11自定义测试影片的下载速度通过测试动画，可以得知当前动画是否能够在网络上以流畅的速度下载，Flash允许用户以不同的调制解调器速度来测试动画在Web上的传递。具体方法：打开一个SWF文件，选择“视图”“下载设置”虽然在下载设置菜单中已有数种Modem的速度，但如果需要自定义Modem速度，可进行操作：）按Ctrl+Enter组合键测试动画。）选择“视图”“下载设置”“自定义”47Flash动画设计及制作 东北大学 艺术学院 讲师 高 路