补间动画和形状补间.docx

补间动画和形状补间.docx

《补间动画和形状补间.docx》由会员分享，可在线阅读，更多相关《补间动画和形状补间.docx（33页珍藏版）》请在冰点文库上搜索。

补间动画和形状补间

制作“运动补间动画”的详细步骤

   应博友的要求，现以《七仙女下凡》为例介绍使用flash8.0软件制作“运动补间动画”的详细步骤，由于我也是刚刚开始学习，所以文中如有不当之处还请各位博友指正。

   准备工作：

要准备2幅图片，其中一幅是JPG格式的《老槐树下》,作为动画的背景图；另一幅是GIF格式的《七仙女》，是在PS软件中经过抠图处理，背景是透明的，作为动画元件之用。

下面是制作的详细步骤。

   1.打开flash8.0软件，点菜单中“文件”-“新建”，出现“新建文档”对话框，点选“flash文档”，点“确定”。

   2.点下面“属性”面板中的“大小550*400像素”，出现“文档属性”对话框，改尺寸为600（宽）*800（高），点“确定”。

   3.点菜单的“视图”-“缩放比例”-“符合窗口大小”。

   4.点“文件”-“导入”-“导入到舞台”。

   5.在出现的“导入”对话框中查找到电脑硬盘中的《老槐树下》，打开。

   6.此时在舞台中出现“老槐树下”背景图。

拉动“时间轴”窗口下面的滚动条，使上面一长串数字（这是表示帧数）出现150，在“150”数字下面的浅灰色格子上点一下，然后按键盘上的F5键（意思是插入帧），表明这幅动画的长度为150帧。

   7.按Ctrl+F8键，出现“创建新元件”对话框，改“名称”为“七仙女”，类型点选“图形”，点“确定”。

   8.此时在右下方的“库”面板上出现“七仙女”的元件名称。

点“文件”-“导入”-“导入到库”。

   9.出现“导入到库”对话框，从电脑硬盘中找到名为《七仙女6》的图片，打开。

   10.此时在“库”面板中出现“七仙女6”的位图，用鼠标点住这几个字拖到空白的舞台上（不作任何处理）。

   11.点击“时间轴”面板上面“场景1”处，舞台上又出现背景图，再点该面板左下方最左面的“插入图层”按钮。

   12.此时在时间轴面板上出现“图层2”。

拖动该面板下面的滑块向左，使出现第1帧，然后点图层2的第一帧（变黑）。

   13.从“库”中拖“七仙女6”到舞台上。

   14.选用“任意变形工具”（“工具”栏左面第二个按钮）在“七仙女6”的四周出现8个控点。

   15.按住Shift键，在一个角的控点处向中间拉，使图形缩小，然后拖到合适的位置（云头上）。

   16.点图层2的第30帧，按键盘上的F6键（意思是插入关键帧），把舞台上的动画元件（七仙女6）拖到云头下面一点的位置，按住Shift键拉动角上的控点，使动画元件稍稍变大一点。

   17.点图层2的第1帧，再点属性面板的“补间”窗口右面的下拉箭头，出现下拉条，点选其中的“动画”。

   18.此时在时间轴图层2的第1帧到第30帧之间出现一条长箭头（表示补间已经成功）。

点图层2的第80帧，按键盘上的F6键，把动画元件拖到背景图的草地上，按住Shift键拉动角上的控点，使动画元件变大。

   19.点图层2的第30帧，再点属性面板的“补间”窗口右面的下拉箭头，出现下拉条，点选其中的“动画”，在时间轴图层2的第30帧到第80帧之间出现一条长箭头。

   20.点图层2的第92帧，按F6键，然后再按键盘的向上键15次，点图层2的第80帧，再点“补间”的下拉箭头，点选其中的“动画”，在第80帧到第92帧之间出现一条长箭头。

   21.点图层2的第100帧，按F6键，然后再按键盘的向下键15次，点图层2的第92帧，再点“补间”的下拉箭头，点选其中的“动画”，在第92帧到第100帧之间出现一条长箭头。

制作完成。

   22.按Ctrl+Enter键可以预览到制作的结果。

关闭预览，点“文件”-“发布设置”，出现“发布设置”对话框，点“Flash（swf）”右面的黄色文件夹图标，出现“选择发布目标”对话框，取文件名为“七仙女下凡”，选择保存路径后点“保存。

   23.在重新出现的“发布设置”对话框的上方，点击“Flash”小方框，再点击“发布”，保存完成。

   附：

素材图和制作完成的动画图。

   （注：

如果从这里下载“七仙女”的素材图，是GIF格式，可以直接使用） 

Flash8形状补间动画详解及实例

形状补间动画是Flash中非常重要的表现手法之一，运用它，你可以变幻出各种奇妙的不可思议的变形效果。

　　本节从形状补间动画基本概念入手，带你认识形状补间动画在时间帧上的表现，了解补间动画的创建方法，学会应用“形状提示”让图形的形变自然流畅，最后，提供了二个实例练手，帮助你更深地理解形状补间动画。

1．形状补间动画的概念

（1）形状补间动画的概念

　　在Flash的时间帧面板上，在一个时间点（关键帧）绘制一个形状，然后在另一个时间点（关键帧）更改该形状或绘制另一个形状，Flash根据二者之间的帧的值或形状来创建的动画被称为“形状补间动画”。

（2）构成形状补间动画的元素

　　形状补间动画可以实现两个图形之间颜色、形状、大小、位置的相互变化，其变形的灵活性介于逐帧动画和动作补间动画二者之间，使用的元素多为用鼠标或压感笔绘制出的形状，如果使用图形元件、按钮、文字，则必先“打散”再变形。

　　（3）形状补间动画在时间帧面板上的表现

　　形状补间动画建好后，时间帧面板的背景色变为淡绿色，在起始帧和结束帧之间有一个长长的箭头，如图3-3-1所示。

　　图3-3-1形状补间动画在时间帧面板上的标记

　　（4）创建形状补间动画的方法

　　在时间轴面板上动画开始播放的地方创建或选择一个关键帧并设置要开始变形的形状，一般一帧中以一个对象为好，在动画结束处创建或选择一个关键帧并设置要变成的形状，再单击开始帧，在【属性】面板上单击【补间】旁边的小三角，在弹出的菜单中选择【形状】，此时，时间轴上的变化如图3-3-1所示，一个形状补间动画就创建完毕。

2．认识形状补间动画的属性面板

　　Flash的【属性】面板随鼠标选定的对象不同而发生相应的变化。

当我们建立了一个形状补间动画后，点击时间帧，【属性】面板如图3-3-2所示。

　　图3-3-2形状补间动画【属性】面板

　　形状补间动画的【属性】面板上只有二个参数：

（1）“简单”选项

　　在“0”边有个滑动拉杆按钮

，单击后上下拉动滑杆或填入具体的数值，形状补间动画会随之发生相应的变化。

在1到-100的负值之间，动画运动的速度从慢到快，朝运动结束的方向加速度补间。

在1到100的正值之间，动画运动的速度从快到慢，朝运动结束的方向减慢补间。

默认情况下，补间帧之间的变化速率是不变的。

（2）“混合”选项

　　“混合”选项中有二项供选择：

“角形”选项：

创建的动画中间形状会保留有明显的角和直线，适合于具有锐化转角和直线的混合形状。

“分布式”选项：

创建的动画中间形状比较平滑和不规则。

　　至此，“形状补间动画”的相关知识大家都已经有所了解，下面动手个实例，体会一下形状补间动画的奇妙。

实例:

庆祝国庆

　　实例简介

　　国庆的夜空绚丽多彩，朵朵礼花在天空中绽放，远处传来礼炮的轰鸣声，让我们来给这美丽的夜晚增加点喜庆，挂几个大红灯笼来庆祝祖国的生日吧。

实例播放效果如图3-3-4所示。

　　图3-3-4庆祝国庆实例画面

　　知识提要

创建矢量图形创建形状补间动画将文字转变为形状用混色器设置颜色

　　制作步骤

　　1、创建新文档

　　执行【文件】|【新建】命令，在弹出的面板中选择【常规】|【Flash文档】

　　选项后，点击【确定】按钮，新建一个影片文档，在【属性】面板上设置文件大小为400*330

　　象素，【背景色】为白色，如图3-3-5所示。

　　图3-3-5文档属性

　　2、创建背景图层

　　执行【文件】|【导入到场景】命令，将本实例中名为“节日夜空.jpg”图片导入到场景中，在第80帧处按下F5，加普通帧。

如图3-3-6所示。

　　图3-3-6插入背景图片

　　3、创建灯笼形状

　　我们先来画灯笼，执行【窗口】|【设计面板】|【混色器】命令，打开混色器面板，如图3-3-7所示设置混色器面板的各项参数。

　　图3-3-7混色器面板设置之一

　　选择工具栏上的椭圆工具

，去掉边线

，在场景中画一个椭圆做灯笼的主体，大小为65*40象素。

　　接着我们来画灯笼上下的边，打开【混色器】面板，按照如图3-3-8设置参数。

　　图3-3-8混色器面板设置之二

　　选择工具栏上的矩形工具

，去掉边线，画一个矩形，大小为30*10象素，复制这个矩形，分别放在灯笼的上下方，再画一个小的矩形，长宽为7*10象素，作为灯笼上面的提手。

　　最后用直线工具

在灯笼的下面画几条黄色线条做灯笼穗，一个漂亮的灯笼就画好了。

如图3-3-9所示（为了能清楚的显示灯笼，可暂时将背景色改为蓝色）。

　　图3-3-9画好的灯笼

　　4、复制粘贴四个灯笼

　　复制刚画好的灯笼，新建三个图层，在每个图层中粘贴一个灯笼，调整灯笼的位置，使其错落有致的排列在场景中。

　　在第20、40帧处为各图层添加关键帧，如图3-3-10所示。

　　图3-3-10错落有致的灯笼及时间轴面板

　　5、把文字转为形状取代灯笼

　　选取第一个灯笼，在第40帧处用文字“庆”取代灯笼，文字的的【属性】面板上的参数：

【文本类型】为静态文本，【字体】为隶书，【字体大小】为60，【颜色】为红色。

　　对“庆”字执行【修改】|【分散】命令，把文字转为形状。

如图3-3-11上半部分所示。

　　依照以上步骤，在第40帧处的相应图层上依次用“祝”、“国”、“庆”三个字取代另外三个灯笼，并执行【分散】操作，其结果如图3-3-11下半部分所示。

　　图3-3-11用文字形状取代灯笼形状及文字打散

　　6、设置文字形状到灯笼形状的转变。

　　在“灯笼”各图层的第60帧及80帧处，分别添加关键帧，现在，在80帧处各“灯笼”图层中的内容为“文字图形”，应该把它们换成“灯笼”。

　　具体办法可以分别选择第20帧中的“灯笼”图形，再一个个“粘贴”进第80帧中，当然，你先应该清除第80帧处4个“灯笼”图层中的内容哦！

　　7、创建形状补间动画。

　　在“灯笼”各图层的第20、60帧处单击帧，在【属性】面板上单击【补间】旁边的小三角在弹出的菜单中选择【形状】，建立形状补间动画，如图3-3-12所示。

　　图3-3-12创建形状补间动画

　　8、测试存盘

　　执行【控制】|【测试影片】命令，观察本例swf文件生成的动画有无问题，如果满意，执行【文件】|【保存】命令，将文件保存成“庆祝国庆.fla”文件存盘，如果要导出Flash的播放文件，执行【导出】|【导出影片】命令保存成“庆祝国庆.swf”文件。

使用形状提示

　　形状补间动画看似简单，实则不然，Flash在“计算”2个关键帧中图形的差异时，远不如我们想象中的“聪明”，尤其前后图形差异较大时，变形结果会显得乱七八糟，这时，“形状提示”功能会大大改善这一情况。

形状提示的作用

　　在“起始形状”和“结束形状”中添加相对应的“参考点”，使Flash在计算变形过渡时依一定的规则进行，从而较有效地控制变形过程。