FLASHCS5课件制作初步FLASHCS5课件制作初步----多媒体课件制作第4章制作Flash补间动画常用的补间动画1)传统运动补间动画2)形状补间动画3)引导层补间动画–沿制定路径移动的补间动画4)FlashCS4以后添加的补间动画5)遮罩补间动画4.1传统运动补间动画•要素:首尾两个关键帧,中间插入传统补间•要求:首尾两个关键帧中必须是同一个元件对象•特点:尾帧中改变的实质上只是这个元件的属性:如,大小、位置、颜色、透明度等等•关于帧上补间的其他一些属性设置:•旋转:设置移动过程中的旋转:可以顺时针或逆时针(如,渐变小球滚动)•调整到路径:即,使得元件的某一端一直对着移动的前方(如,飞机沿椭圆轨道移动)•缓动:0元件匀速移动(默认)•100元件移动渐慢•-100元件移动渐快起始关键帧终止关键帧同一元件设置传统补间同一元件缓动实例:弹动的笑脸•层1(笑脸):用椭圆工具和直线工具画出笑脸,并转化为元件。“直接复制”为哭脸元件再修改,泪滴用刷子工具绘制。•1-23帧为“笑脸下落到舞台底部”的补间动画,补间缓动:-100•24-26帧是帧逐渐挤扁的哭脸•26-50帧为“笑脸弹升到舞台上部”的补间动画,补间缓动:100•层2(阴影):1-25帧为阴影收缩的效果,25-50帧为阴影放大效果4.2形状补间动画起始关键帧终止关键帧打散的对象设置形状补间打散的对象•要素:首尾两个关键帧,中间插入形状补间•要求:首尾两个关键帧中内容必须是打散的对象。即,形状•特点:首尾帧两个关键帧中内容可以是不同的对象,甚至可以是多个对象,但都必须是打散的。利用【绘图纸外观】按钮,可以得到左边效果。俗称洋葱皮效果。•例1)红圆变蓝方2)1圆变2圆3)花变“欢度春节”•形状提示菜单:修改|形状|添加形状提示•通过在“开始帧”和“结束帧”中添加相对应的形状提示点,可以控制形状变化过程4.3沿路径的补间动画•要素:在传统补间动画的基础上附加一个运动引导层,运动引导层起到设置运动路径的导向作用。•特点:实现沿路径移动没选此项!你试一试,如果选了,小松鼠大头朝前,像是游泳的动作。没选此项!你试一试,如果选了,小松鼠大头朝前,像是游泳的动作。例11沿椭圆走的小松鼠•层1(小松鼠):导入小松鼠gif到库,将自动生成的动画元件改名为小松鼠。拖入舞台调整好大小,如下图所示建立60帧传统移动补间动画,30帧面向右从左走向右,30帧面向左(用形变工具水平翻转),从右走向左。•层2(路径):用椭圆工具画一个椭圆作为路径•复制层2,粘贴得到层3(显示路径):将层3拖至最底层。•选中层2(路径)利用右键菜单设置其为引导层,并用橡皮工具擦出一个小口,如图。•选中层1(松鼠)中第1帧中松鼠拖至路径的起点,选中第30帧中松鼠拖到路径的右端,类似,将第30帧中和第60帧中松鼠拖到路径上的合适位置。•将最底层的要显示的路径,下移到合适位置•Ctrl+Enter,测试影片•拓展:加一个层3(按钮):从公用库中拖入两个按钮,分别附加动作:on(release){stop();}和on(release){play();}然后再测试影片。4.4CS4后新增的补间动画功能•要素:只需一个首关键帧,并在其后的普通帧中拖动其中元件,即生成补间动画结点及相应移动路径•要求:首关键帧中必须是一个元件对象•特点:可以随意调整移动路径,还可以在首关键帧后做多个移动节点起始关键帧元件等整体添加补间动画属性关键帧(补间动画结点)实例秀文字标题例1:秀文字:文本从左端进入舞台中央,暂停片刻,缩小、放大归位,文本从右端移出舞台。例2:秀标题:主标题从上方旋转移入,暂停片刻,放大、再缩小归位。副标题淡出。例3:秀标题:线段从一点生长出来,标题从线下方切出。--特别:线段必须先做成元件,再做补间动画,否则会出现问题的。例2:上方旋转移入放大+缩小归位淡入淡出例1:左移入缩小+放大归位右移出例3:线生长文字切出例5霓虹变色文字设置文档550*200,12fps,背景黑色1)直线变填充,然后柔化:向外5,10,转为元件。2)文字打散,向内柔化:5,5,转为元件。3)60帧传统补间:15帧一变色:红、绿、黄、蓝、红方法2:做成元件,用模糊滤镜或同色的发光滤镜,但不如方法1效果好。例5动态秀文字–文字剪影向外发散设置文档550*200,12fps,背景黑色1)层1(制作人文本):制作人:黄荧,放在右下角2)层2(标题文本):大标题从舞台上方移入+稍微放大3)层3(标题剪影左移淡出):在15帧处插入关键帧,复制标题在其中作为剪影,左移淡出.4)层4(标题剪影右移淡出):在15帧处插入关键帧,复制标题在其中作为剪影,右移淡出.5)Ctrl+Enter,测试影片例6动态秀文字–旋转洋葱头文字效果•步骤1:设置文档550*200,40fps•步骤2:制作两个文本mc:ONLONSKIN–洋葱皮,琥珀字体、字号:40•文本1(文字带边沿),文本2(文字不带边沿)--文字打散•步骤3:编辑主场景•层1(旋转文本1):文本1_mc,50帧动画,逆时针旋转1周•层2(旋转文本2):文本2_mc,2帧空白,50帧动画,逆时针旋转1周,透明度设为50•层3(旋转文本2):文本2_mc,4帧空白,50帧动画,逆时针旋转1周,透明度设为45•层4-层9(旋转文本2):文本2_mc,每次增加两帧空白,动画相同,透明度依次减5•步骤4:Ctrl+Enter,测试影片例6:秀标题:线段开合带出文字与图片设置Flash文档:780*450像素,白色背景1)层1(line):线段在中部从一点展开2)层2(linedown):线段1下移3)层3(lineup):同时,线段2上移4)层4(p1,图片1):人物图片淡入+左移5)层5(t1,文本1):欢迎文本从一点处放大出现,暂停片刻6)层6(p2,图片2):星形图片旋转着由小到大从左侧进入,同时,层5的人物图片淡出实例秀图片例7:地球与帆船。设置Flash文档:550*400像素,白色背景1)层1:地球先放大、后缩小恢复2)层2:帆船从地球下方,从左至右掠过3)层3:缩小2号的帆船从地球上方,从右至左掠过--实例:碰撞•如上图画出小球和三个bar:(bar用刷子绘制),分别转化为元件并分散到各图层•1)做圆球的补间动画:•建立Flash文档,设置12fps•在第1帧用线条工具绘制一个三棱锥,用黄色渐变填充它的两个面,特别注意,用渐变工具调整大三角形填充色时,用渐变工具对准大三角形右边的边。用渐变工具调整小三角形填充色时,旋转渐变色的方向,用渐变工具同一条边对准小三角形左边的边。即,让两个填充色对称于大三角形右边的边,背靠背。填充好,删除边棱线。•在第20帧插入关键帧,用菜单:【形变】|【水平翻转】,翻转三棱锥如下右图。•在第1帧与第20帧之间,插入形变补间,并加入提示符如下:左图小三角形abc,变成右图大三角形abc,左图大三角形acd,变成右图小三角形acd,ef分别指定他们的边棱。•在第21帧插入关键帧,删除左端小三角形,再插入1个普通帧。•Ctrl+Enter,测试动画。例旋转的三棱锥