FLASH动画设计.ppt

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