正在阅读：Flash形状补间动画:看我七十二变教程Flash形状补间动画:看我七十二变教程

　　更多精彩平面及网站设计图文教程、视频教程，尽在PConline创意设计栏目。

　　本文由中国教程网 英子 原创。
　　
　　本例主要学习内容：形状补间与动画补间的综合运用。

　　演示：

 
看我七十二变教程效果图

　　点击下载源文件：（附压缩包）

　　
　　制作方法如下:

　　一、建新文档，把背景设为蓝色。(背景色随意.为了多一个色系使用,做好后我把文档背景改为白色)

图1

　　二、显示网格

图2

　　三、制作成图片元件。（swf、wmf、ai、eps格式图片打散后都可以制作形状补间）

　　1、点文件-导入-导入到库，把准备好的图片导入。

 
图3

　　2、点插入—新建元件，建一个影片剪辑，名：元件1，把图1库里拖出，在属性面版里将图1尺寸改为280x280，打开对齐面版，居中对齐。（注意：修改图片尺寸的时候要注意不要把图片拖拉变形得太离谱）。 

 
图4

　　3、回到埸景1（点埸景1）点插入--新建元件，建一个影片剪辑，名：元件2，把图2从库里拖出，在属性面版里将尺寸改为280x280，打开对齐面版，居中对齐。

　　用同样的方法把所有的图片建成影片剪辑元件3、元件4、元件5...... 

图5

　　四、“人物”层的制作

　　1、新建图层2，把图层2改为人物层，点第1帧，将元件1拖出舞台摆放在合适的位置。点修改-分离，分离2~3次，把元件1图片打散。相关主题如下：

图6

　　2、15帧插入关键帧。25帧插入一个空白关键帧，将元件2拖出舞台摆放在合适的位置，点修改--分离，分离2~3次，把元件2图片打散。点15帧，在属性面版里把“补间”设为形状。相关主题如下：

 
图7

　　3、40帧插入关键帧。50帧插入一个空白关键帧，将元件3拖出舞台摆放在合适的位置，点修改--分离，分离2~3次，把元件3图片打散。点40帧，在属性面版里把“补间”设为形状。相关主题如下：

 
图8

　　4、重复第2步或第3步，直至把图片元件全部在时间轴上安插好。相关主题如下：

图9

　　五、制作五彩边框

　　1、搭建框架

　　①插入--新建元件，建一个名为边框的影片剪辑元件。

图10

　　②在边框元件的编辑器里，使用线条工具，实线2，笔融黄，填充无，拖出4条直线，组成边框。并在属性版里把矩形改与舞台一样大小：530x380。

图11

　　③打开对齐面版，相对于舞台-水平中齐-垂直中齐,把矩形居中对齐。

 
图12

　　④用同样的手法再拖出一个490x340的矩形。

 
图13

　　⑤新建图层2，使用线条工具，虚线13，笔融红，填充无，在前二条边框直线中间拖出4条直线，组成边框。

 
图14

图15

　　⑥点埸景1,把图层1改名为边框，点第1帧，把边框元件在库里拖出来，居中对齐。290帧插入帧，上锁。

图16

　　2、制作边框颜色

　　双击库里的边框元件，进入边框编辑器：

　　①在边框编辑器里，打开图层1、图层2的锁，250帧分别插入关键帧。在对应人物层的共21帧插入关键帧。

图17

　　②分别点每一个关键帧，把图层1（二个小边框）和图层2（中间的圆点框）分别改为不同的颜色。
　　
　　a、先点图层2，把圆点框的颜色设置与左右关键帧不同的颜色；

　　b、再点图层1，把小双线框改为与圆点框不同的颜色。相关主题如下: 

图18

图19

　　3、顺便说Flash8对元件改变颜色的方法：

　　只要是在FLASH内制作的元件(线、圆、星、多边形......)，或图片元件在分离状态下，都可以通过笔融或填充来改变颜色。操作如下:

　　①在边框编辑器里，点亮图层1的第2个关键帧，在工具栏里，填充为无，把笔融色改为粉绿，二个小边框就变成粉绿色了。
　　
　　②点亮图层2的第2个关键帧，在工具栏里，填充为无，把笔融色改为黄色 (或在属性面片里修改也可以). 圆点边框就变成黄色。
　　
　　③重复①②步操作，分别把图层1图层2里的21个关键帧全部设置好。相关主题如下： 

图20

　　④顺便说一说，给字体加彩边的方法：字体必需在分离状态下，点亮加彩边的帧，把工具栏的笔融改为心仪的颜色，（或在属性面版改变笔融色），点墨水瓶工具，在字边上点一下，彩边就加上了。

图21

　　六、文字层的制作

　　点埸景1，增加3个图层，从上至下名为：文字1、文字2、文字3 ，分别设置三个：“变”字的变化。
　　
　　1、分别点文字1~3层的第1帧，使用文本工具用不同的颜色输入一个“变”字，大小为60x60像素，笔融无，填充任意。把它们摆放好位置，250帧分别插入关键帧。
　　
　　2、对应人物层的21个关键帧位置，给文字1、文字2层分别插入共21个关键帧。

图22

　　3、“文字3”层的制作：

　　①、锁上文字1、2层。点“文字3”第15帧，使用任意变形工具把文字拖大为140x115，把15帧复制到25帧，并把15帧和25帧的文字彩边改为不同的颜色。

　　②、把第1帧复制到以下帧：26 51 76 101 126 151 176 201 226 251并改变以上帧的文字颜色，并在各帧打开属性面版设补间为：形状。

　　③、把第15帧复制到以下帧：40 50 65 75 90 100 115 125 140 150 165 175 190 200 215 225 240 250 并改变以上帧的文字颜色以及彩边颜色，各帧打开属性面版设补间为：形状。

　　④、把以下帧的填充色改为无:15 40 65 90 115 140 165 175 190 215 240。使这11帧变成空心字。相关主题如下：

图23

　　5、“文字1”、“文字2”的制作

　　①把“文字3”锁上，打开文字1、2层。

　　②分离状态下，兼顾人物主色、"文字3"字色，边框色, 把“文字1”、“文字2”各帧文字分别改不同颜色，然后对每个“变”字全选，点修改--组合。打开属性面版，把补间设为动画并设旋转，若“文字1”上的某个关键帧设为顺时针旋转1，则“文字2”所对应的帧设为逆时针旋转。直至把全部关键帧设置完毕。相关主题如下：

 
图24

　　七、利用形状补间制作五色背景

　　一般制作FLASH，都是先做好背景。而这ＦＬＡＳＨ的主要层是：人物层，边框层，文字层颜色都是互相关联的，所以我们把背景的制作放在最后。

　　1、在主埸景点插入--新建元件，新建一个名为背景１的影片剪辑。

　　2、使用矩形工具，笔融无，填充色放射状，拖出一个与舞台同大小的矩形:550x400,打开对齐面版，居中对齐。步骤如下：
　　
　　①把填充色设为放射状。

 
图25

　　②点窗口--混色器，打开颜色面版，把放射状改为线性。利用小滑板把颜色调好。
　　
　　1.线性

 
图26

　　2.放射状态

 
图27

　　3.小滑板调色

 
图28

　　③使用矩形工具拖出一个矩形。调整为550x400像素。打开对齐面版居中对齐。

图29

　　④用第2步方法分别再做4个放射状不同颜色的背景剪辑元件：背景2、背景3、背景4、背景5，共5个背景元件。
　　
　　3、点埸景1，新建一个图层，名为背景。

　　①把第1帧点亮，在库里将背景元件拖出舞台，打开对齐面版，居中对齐。点修改-分离，在属性面版上把补间设为形状。

图30

　　②25帧插入一个空白关键帧，把背景２元件拖出舞台，居中对齐。点修改-分离，在属性面版上把补间设为形状。

　　③用步骤②的方法，分别在50 75 100 125 150 175 200 225帧插入一个空白关键帧，把背景元件分别拖出来，修改--分离, 在属性面版进而设置形状补间动画。 复制第1帧的背景元件，粘贴在250帧。
　　
　　八、全部图层255帧插入帧。 相关主题如下：

图31

　　测试，另存为*.fla 导出影片*.swf    (全文终)