1、Flash 动画设计,计算机基础教研室 王桂红,Flash 是Macromedia 公司推出的著名的动画制作软件，并且也是目前最优秀、最火爆的网络交互动画制作工具。Flash与Fireworks和Dreamweaver称为网页三剑客。许多大公司的主页都采用动态Flash技术。,.Flash 启动 .基本概念 一.基本动画1.变形动画 2.移动动画 二、引导线技术 三、多图层设计 四、镂空字 五、遮照 六、按钮制作与应用 七、拖拽八、交互式设计 九、多场景 十、展开画卷 十一、用毛笔写龙字实例 十二、多个动画组合 十三、展开特效 十四、球体移动带阴影 十五、Flash模板,启动Flash：创建新
2、项目Flash文档,启动FLASH,FLASH文件扩展名为fla 影片文件扩展名为:SWF,修改/文档 可改变舞台的宽和高。 或：,舞台：绘制、编排和测试动画的地方。默认状态下舞台的宽550像素 、高400像素。,单击窗口下方的 。,1.帧和关键帧Flash将时间分割成许多同样大小的小块，每一块表示一帧，一般的动画都是依靠时间线和关键帧来实现的，用户只需要给出一个对象的几个关键动作，系统即会根据需要在各个关键帧之间自动插入平滑的动画。,基本概念,动画是一系列连续播放的画面，系统默认放映速度是每秒播放12个帧。,2.层 Flash中使用了层的概念，不同角色的对象可以出现在不同的层面上，而互相之间
3、并不干扰，这样便于用户对不同的对象作不同的修改。,3. 矢量图是使用直线和曲线描述的图像，同时包括图形颜色和位置的属性。如矢量椭圆是通过描述椭圆的轮廓线来给出它的形状，而整体的颜色则是由轮廓边缘的颜色和轮廓内区域的颜色确定的。所以编辑矢量图时，尽管改变椭圆大小、位置和形状，而只要确定了椭圆的轮廓线及线内的对象，就不会影响最后浏览的效果。这意味着矢量图能够在任何分辨率的输出设备上清晰地显示。,4. 位图是由像素组成的。使用像素来描述图像，计算机必须精确地计算组成位图的每一个像素位置和颜色等信息。所以当编辑一个位图时，修改的是每一个像素，而不是直线和曲线，这样就会影响最后输出的质量。尤其当像素较低
4、的图像被放大输出时，图像的边界会很粗糙。,课堂练习,画圆 要求:边线颜色为:红色、8磅、点组成， 椭圆，光照角度在下面,并旋转 注意:边线和内部要全选. Ctrl+G组合图像。,逐祯动画 基本几何变形动画 文本变形动画 图形组件的变形动画,一.基本动画 （一）.变形动画,1.逐祯动画 例题：模拟写王字,5 10 15 25,插入关键帧,注意：加入stop( ); 使动画播后停止。 中间无补间。,2.基本几何变形动画 例题1:圆变任意图形,1帧 30帧 圆 利用封套做出复杂图形 回到第一帧补间选形状 Ctrl+回车播放,3.基本几何变形动画 例题2：一分为二,练习:制作延伸线效果.,1 30 圆
5、 利用复制变成2个圆 回到第一帧补间选形状 Ctrl+回车播放,4.文本变形动画 例题1:字由大到小或由小到大,1 30 A A 回到第一帧补间选动作 Ctrl+回车播放,5.文本变形动画 例题2:F L A S H 字母任意变,1 5 10 15 25 F L A S H,注意：也可将文字用右键-分离变为图形，可在字上添新颜色。,6.图形组件的变形动画 例题：文字淡入淡出效果,1帧处 写 FLASH ，转换成图形元件。改颜色为ALPHA，再改变颜色深浅。也可将文字二次分离后再转换成图形元件。,几何图形移动 文本动画,（二）.移动动画,1.几何图形移动 例题：小球由上到下，再反弹回去。,1 在
6、上部画小球 20 小球移下(注意x,y坐标) 40 小球移上 1帧和20帧处加上补间,实现快慢：1帧处简易为-100，20处为100 实现旋转：1帧处将小球转换为图形元件，补间改为动作，设旋转，20帧处将小球转换为图形元件，补间改为动作，设旋转， 40帧处将小球转换为图形元件。,2.文本动画 例题：文字的飞入飞出。,1 写字 30将字移到中间40 改字 50 将字移走 1帧和40帧处补间设为动作。,练习：照片由左侧飞入旋转再变大。,二、引导线技术,例：引导球体移动。,课堂练习：设计蝴蝶飞舞动画。,例：右侧飞入“多媒体教学课程”停下后,从左侧飞入“_flash 课程”,和左右一起飞入“沈阳农”“
7、业大学”。此例用了四层注意:图层的改名、删除和移动。,三、多图层设计,1.首先画个大矩形-蓝色-然后写字-2次分离-按delete键 2.图层2画个多色小球，图层1在上面。,四、镂空字,注意：可以加声音,方法：导入到库找声音，窗口-库-声音。将声音拖入到图层3。,五、遮罩,例：图片遮罩 第一层：,1 导入图片 ( 文件/导入/导入到舞台） 30插入关键针,第二层：小球移动 （注意：单击第二层的第一帧再设计）,右击第二层选遮罩层。,六、按钮制作与应用,制作简单按钮：插入-新建元件-按钮-取名-确定设计按钮。回到场景1。窗口-库，在新的图层拖入按钮。,on(release)gotoandplay(
8、“aa“,1);,图层名,Replay 按钮动作代码：,1.Replay 按钮制作：,2.做特殊按钮 作用：鼠标经过会弹出信息。,on (release) geturl(“http:/”); ,3、按钮应用于:弹出网页,七、实现拖拽功能,1.首先制作一个名字为aa的按钮（插入/新建元件）。 2.然后做一个名字为bb的影片剪辑（插入/新建元件）。将aa 拖入bb中，窗口左下角写入实例名称aa。写动作代码：on(press)startdrag(“aa“);on(release)stopdrag();3.回到场景1，拖入bb。,八、交互界面设计技术,输入框,输入文本,变量,input,输出框,动态文
9、本,变量,output,选择在文本周围显示边框,对确定按钮加动作： on(release) output=input; 对清除按钮加动作： on (release)input=“”;output=“”;,文本类型,设置是否显示边框,设置变量名,九、多场景,注意场景的改名,on(release) if (input eq “wgh“) gotoAndPlay(“true“, 1); else gotoandplay(“false“,1);,on(release)gotoandplay(“main“,1);,十、展开画卷实例,利用了遮照技术。 分析：有三个图层，一个是画卷图层，一个是书轴移动图层，
10、一个是遮照图层。 制作过程： 第一层：制作画卷。 首先画一个无边的红色矩形，红色矩形上下都画一个黑边填充褐色的长矩形。导入一个图片，调整到合适大小，加上边线。在80帧处插入关键帧。 第二层：制作书轴移动。 首先画好书轴，全选上后按ctrl+G,将其组合起来。在80帧处插入关键帧，将书轴移到最下部。回到第1帧，补间选动作。 第三层：做遮照层。 第一帧处画一个长的小矩形，在80帧处插入关键帧，将小矩形抻长至下轴上部。回到第1帧，补间选形状。改图层顺序为：3，1，2 指向第三层，按右键选遮照层。Ctrl+回车播放。,十、展开画卷提示,1.新建名为“毛笔”的图形元件，用矩形等工具画一毛笔。 2.用文字
11、工具，输入“龙”字，字体可设为楷体，字号值为“300”(自己输入)，颜色为黑色。 3.右键选分离，打开库，然后将“毛笔”拖到图层1上。 4.插入一关键帧，选中“毛笔”，移动到“龙”字最后一笔“点”上。 5.再插入一关键帧，选中“毛笔”，稍向下移动，再用橡皮工具擦除掉刚才的一部分笔画。 6.重复第5步，直至把整个“龙”字擦干净为止。 7.选中所有帧，调出右键快捷菜单，并且选择“翻转帧”。 书写的快慢及细腻程度可由建立帧数的多少决定。,十一、用毛笔写龙字实例,十二、多个动画组合,制作方法: 一个图层导入一个动画。还可导入声音。,分图层操作： 第一层：图片的淡入淡出。 文件-导入到舞台-选择图片文件
12、 -拖动图片四周小句柄调整图片大小。 因为想改变明暗，先将图片按右键选择转换成元件（图形）。 在40帧处插入关键帧。改变图形的颜色为alpha,再改变右侧的%为小一点。 回到第一帧插入补间动画：将补间改为形状。 如何再让它由暗变明呢？我们再在第80帧处插入关键帧。将图形的alpha值调回100% 再回到第40帧插入补间动画。 注意：ctrl+enter播放,十三、展开特效,第二层：晃动文字制作。 指向图层1，按右键，选择插入图层。此时增加了图层2。 注意：为了简单化制作过程，可将图层1不显示。单击图层1的眼睛。 单击“文本工具”A ，在图层上画出适当大小的矩形，写字。 注意：可以通过键头移动位置。也可改变颜色。 那如何改变复杂的颜色呢？指向文字按右键-分离-分离。再选择填充颜色。选择单个字可改变位置。 那如何让它晃动起来呢？ 再将其转换成图形元件。选择选择插入时间轴特效等。,第三层：静态文字。,十四、球体移动带阴影,十五、Flash模板,END,
