Flash 动画设计

1. Flash 动画设计 计算机基础教研室

2. FLASH文件扩展名为fla 影片文件扩展名为:SWF 舞台：绘制、编排和测试动画的地方。默认状态下舞台的宽550像素 、高400像素。 修改/文档 可改变舞台的宽和高。 或： 单击窗口下方的 。

3. 基本概念 • 矢量图 • 位图 • 帧 • 图层与图层夹 • 元件与实例 • 动画类型

4. 矢量图 • 是使用直线和曲线描述的图像，同时包括图形颜色和位置的属性。如矢量椭圆是通过描述椭圆的轮廓线来给出它的形状，而整体的颜色则是由轮廓边缘的颜色和轮廓内区域的颜色确定的。所以编辑矢量图时，尽管改变椭圆大小、位置和形状，而只要确定了椭圆的轮廓线及线内的对象，就不会影响最后浏览的效果。这意味着矢量图能够在任何分辨率的输出设备上清晰地显示。

5. 位图 • 是由像素组成的。使用像素来描述图像，计算机必须精确地计算组成位图的每一个像素位置和颜色等信息。所以当编辑一个位图时，修改的是每一个像素，而不是直线和曲线，这样就会影响最后输出的质量。尤其当像素较低的图像被放大输出时，图像的边界会很粗糙。

6. 帧 • FLASH中最小的时间单位是帧。根据帧的作用区分，可以将帧分为以下四类： • A、 普通帧：包括普通帧和空帧。普通帧只能将关键帧的状态进行延续，一般是用来将元素保持在场景中 • B、关键帧：包装关键帧和空白关键帧。关键帧是一个非常重要的概念，只有在关键帧中，才可以加入AS脚本命令、调整动画元素的属性，而普通帧和过渡帧不可以。 • C、空白关键帧：是一种特殊的关键帧，即该关键帧的内容是空白的，它时间轴中以空白的小圆圈表示。 • D、过渡帧：包括形状过渡帧和运动过渡帧。过渡帧是将过渡帧前后的两个关键帧进行计算得到，它所包含的元素属性的变化是计算得来的。 • 快捷键： F5创建帧， F6创建关键帧， F7创建空白关键帧。

7. 图层与图层夹 （1）图层是所有图形图像软件当中必须具备的内容，是我们用来合成和控制元素叠放次序的工具。 图层的类型与编辑 图层根据使用功能的不同分为三种基本类型： A、普通层：就是我们通常制作动画、安排元素所使用的图层，和PS中的层是类似的概念和功能。 B、遮罩层：只用遮罩层的可显示区域来显示被遮罩层的内容，与PS中的遮罩类似。 C、运动引导层：运动引导层包含的是一条路径，运动引导线所引导的层的运动过渡动画将会按照这条路径进行运动 (2)图层夹 是新增加的一项功能，它可以让我们方便的合并一些同类型的层，让设计师在设计时能够快速的寻找层，效率更高。

8. 元件与实例 • 符号与实例符号是FLASH当中最重要的一个概念。符号是构建FLASH的砖瓦，是创作的基础。是进行FLASH影片设计的一个重点。对实例的操作不会影响到符号本身，但改变符号的话所有的实例将随之发生同样的变化。 • 在FLASH当中，符号是代表一系列可无偿重复利用的元素的集合（这里的无偿其实指的是不增加文件的尺寸）。当将一个符号从库面板当中拖到当前的舞台上时，这个符号就成了一个实例。这时候就可以对实例进行一系列的操作。 • (1)文字可以是符号，数字也可以是符号，它们都是利用简单的表现形式来传达特定的意义。由于使用符号将不增加文件的尺寸，因此应该尽可能重复利用FLASH中的各种符号，从而可以减小文件的尺寸，也为我们的修改带来极大的方便。 • (2)创建符号与库面板 舞台上的任何一个元素均可以转化成为符号，只要选中舞台上的对象，按F8键或通过右键菜单来创建，另外也可以通过菜单栏中的“插入”--“新建元件”来创建新的符号。 • 符号分为三类：影版剪辑（Movie Clip 简称MC）、按钮（Button）、图形（Graphic）。

9. 动画分类： 1、形状补间动画：是Flash中的一种补间类型动画。通过形状补间动画可以变形或过渡对象的形状、颜色、大小、透明度、位置等与形状有关的元素。对象本身发生了变化，比如A变成了B，或者圆形变成了方块等。形状补间动画的对象是分离的可编辑图形（点阵图），图片、文本等进行形状渐变必须“ctrl+b”分解组件。形状补间是淡绿色底加一个黑色箭头组成的。 2、动画补间：是由一个形态到另一个形态的变化过程，像移动位置，改变角度等。动画补间是淡紫色底加一个黑色箭头组成的。构成动画补间的元素是元件，包括影片剪辑、图形元件、按钮、文字、位图、组合等等，但不能是形状，只有把形状组合（Ctrl+G）或者转换成元件后才可以做动画补间。

10. 课堂练习 画圆 要求:边线颜色为:红色 、8磅、点组成， 椭圆，光照角度在下面,并旋转 注意:边线和内部要全选. Ctrl+G组合图像。

11. 一.基本动画（一）.变形动画 • 逐祯动画 • 基本几何变形动画 • 文本变形动画 • 图形组件的变形动画

12. 1.逐祯动画例题：模拟写王字 • 5 10 15 25 插入关键帧 注意：加入stop( ); 使动画播后停止。 中间无补间。

13. 2.基本几何变形动画 例题1:圆变任意图形 1帧 30帧 圆 利用封套 做出复杂图形 回到第一帧补间选形状 Ctrl+回车播放

14. 3.基本几何变形动画例题2：一分为二 1 30 圆利用复制变成2个圆 回到第一帧补间选形状 Ctrl+回车播放 练习:制作延伸线效果.

15. 4.文本变形动画例题1:字由大到小或由小到大 1 30 A A 回到第一帧补间选动作 Ctrl+回车播放

16. 5.文本变形动画例题2:F L A S H 字母任意变 1 5 10 15 25 F L A S H 注意：也可将文字用右键---分离变为图形， 可在字上添新颜色。

17. 6.图形组件的变形动画例题：文字淡入淡出效果6.图形组件的变形动画例题：文字淡入淡出效果 1帧处 写 FLASH ，转换成图形元件。 改颜色为ALPHA，再改变颜色深浅。 也可将文字二次分离后再转换成图形元件。

18. （二）.移动动画 • 几何图形移动 • 文本动画

19. 1.几何图形移动例题：小球由上到下，再反弹回去。1.几何图形移动例题：小球由上到下，再反弹回去。 1 在上部画小球 20 小球移下(注意x,y坐标) 40 小球移上 1帧和20帧处加上补间 实现快慢：1帧处简易为-100，20处为100 实现旋转：1帧处将小球转换为图形元件，补间改为动作，设旋转，20帧处将小球转换为图形元件，补间改为动作，设旋转， 40帧处将小球转换为图形元件。

20. 2.文本动画例题：文字的飞入飞出。 1 写字 30将字移到中间 40 改字 50 将字移走 1帧和40帧处补间设为动作。 练习：照片由左侧飞入旋转再变大。

21. 二、引导线技术 例：引导球体移动。 课堂练习：设计蝴蝶飞舞动画。

22. 三、多图层设计 例：右侧飞入“多媒体教学课程”停下后,从左侧飞入“__flash 课程”,和左右一起飞入“沈阳农”“业大学”。 此例用了四层 注意:图层的改名、删除和移动。

23. 四、镂空字 1.首先画个大矩形----蓝色----然后写字----2次分离----按delete键 2.图层2画个多色小球，图层1在上面。 注意：可以加声音,方法：导入到库找声音，窗口---库----声音。 将声音拖入到图层3。

24. 五、遮罩 例：图片遮罩 第一层： 1 导入图片 ( 文件/导入/导入到舞台） 30插入关键针 第二层：小球移动（注意：单击第二层的第一帧再设计） 右击第二层选遮罩层。

25. 六、按钮制作与应用 1.Replay 按钮制作： 制作简单按钮： 插入----新建元件-----按钮-----取名-----确定 设计按钮。 回到场景1。 窗口----库，在新的图层拖入按钮。 Replay 按钮动作代码： on(release){ gotoandplay("aa",1);} 图层名

26. 2.做特殊按钮 作用：鼠标经过会弹出信息。 3、按钮应用于:弹出网页 on (release) { geturl("http://www.syau.edu.cn”); }

27. 七、实现拖拽功能 1.首先制作一个名字为aa的按钮（插入/新建元件）。 2.然后做一个名字为bb的影片剪辑（插入/新建元件）。 将aa 拖入bb中，窗口左下角写入实例名称aa。写动作代码： on(press) {startdrag("aa");} on(release) {stopdrag();} 3.回到场景1，拖入bb。

28. 八、交互界面设计技术 变量 输入文本 输入框 input 变量 动态文本 输出框 output 选择在文本周围显示边框 对确定按钮加动作： on(release) {output=input;} 对清除按钮加动作：on (release){input=“”;output=“”;}

29. 文本类型 设置变量名 设置是否显示边框

30. 九、多场景 on(release) { if (input eq "wgh") {gotoAndPlay("true", 1);} else {gotoandplay("false",1);} } 注意场景的改名 on(release){ gotoandplay("main",1);}

31. 十、展开画卷实例

32. 十、展开画卷提示 利用了遮照技术。 分析：有三个图层，一个是画卷图层，一个是书轴移动图层，一个是遮照图层。 制作过程： 第一层：制作画卷。 首先画一个无边的红色矩形，红色矩形上下都画一个黑边填充褐色的长矩形。导入一个图片，调整到合适大小，加上边线。在80帧处插入关键帧。 第二层：制作书轴移动。 首先画好书轴，全选上后按ctrl+G,将其组合起来。在80帧处插入关键帧，将书轴移到最下部。 回到第1帧，补间选动作。 第三层：做遮照层。 第一帧处画一个长的小矩形，在80帧处插入关键帧，将小矩形抻长至下轴上部。回到第1帧，补间选形状。改图层顺序为：3，1，2 指向第三层，按右键选遮照层。Ctrl+回车播放。

33. 十一、用毛笔写龙字实例 1.新建名为“毛笔”的图形元件，用矩形等工具画一毛笔。 2.用文字工具，输入“龙”字，字体可设为楷体，字号值为“300”(自己输入)，颜色为黑色。 3.右键选分离，打开库，然后将“毛笔”拖到图层1上。 　　 4.插入一关键帧，选中“毛笔”，移动到“龙”字最后一笔“点”上。 5.再插入一关键帧，选中“毛笔”，稍向下移动，再用橡皮工具擦除掉刚才的一部分笔画。 6.重复第5步，直至把整个“龙”字擦干净为止。 　　 7.选中所有帧，调出右键快捷菜单，并且选择“翻转帧”。 　　 书写的快慢及细腻程度可由建立帧数的多少决定。

34. 十二、多个动画组合 制作方法: 一个图层导入一个动画。 还可导入声音。

35. 十三、展开特效 分图层操作： 第一层：图片的淡入淡出。 文件---导入到舞台-----选择图片文件 -----拖动图片四周小句柄调整图片大小。 因为想改变明暗，先将图片按右键选择转换成元件（图形）。 在40帧处插入关键帧。改变图形的颜色为alpha,再改变右侧的%为小一点。 回到第一帧插入补间动画：将补间改为形状。 如何再让它由暗变明呢？我们再在第80帧处插入关键帧。将图形的alpha值调回100% 再回到第40帧插入补间动画。 注意：ctrl+enter播放

36. 第二层：晃动文字制作。 • 指向图层1，按右键，选择插入图层。此时增加了图层2。 • 注意：为了简单化制作过程，可将图层1不显示。单击图层1的眼睛。 • 单击“文本工具”A ，在图层上画出适当大小的矩形，写字。 • 注意：可以通过键头移动位置。也可改变颜色。 • 那如何改变复杂的颜色呢？指向文字按右键----分离------分离。再选择填充颜色。选择单个字可改变位置。 • 那如何让它晃动起来呢？ • 再将其转换成图形元件。选择选择插入……时间轴特效等。 第三层：静态文字。 十四、球体移动带阴影 十五、Flash模板

37. END