Flash动画制作综合实例flash动画实例制作教程.docx
《Flash动画制作综合实例flash动画实例制作教程.docx》由会员分享，可在线阅读，更多相关《Flash动画制作综合实例flash动画实例制作教程.docx（38页珍藏版）》请在冰豆网上搜索。
Flash动画制作综合实例flash动画实例制作教程
第14章Flash动画制作综合实例
教学提示：
Flash最主要的功能是制作矢量动画，制作出效果独特且容量很小的Flash
动画作品是其主要特色。
同时，通过动作（Actions）指令集控制动画的播放、开关音效、制
作交互式接口效果、Java网页特效等效果是其另一大特色。
这使得Flash不再只是单纯的动画制作软件，而成为交互式多媒体工具、交互式网页制作工具、光盘自动播放画面制作工具。
此外，它还可以做出多种格式的动画，不需死记程序语言就能做交互式游戏。
本章介绍了4个Flash动画制作实例，综合运用了Flash的编程语言技术、Flash的设
置文档属性、制作元件、时间轴、文字工具、测试动画速度等技术。
教学目标：
在掌握前面几章介绍的基本操作和基本知识的基础上，本章主要通过几个Flash动画制作的实例，让读者领略Flash的特效动画制作和强大的编程功能，进一步熟悉
Flash利用动作语句来制作动画特效的操作方法和独自完成实例创作的能力，加深对Flash
动画制作方法的认识和提高。
14.1星光闪烁的特效实例
大家可以想像这样一种场景：
漆黑的夜空中，出现一点微弱的亮光，然后光线慢慢地增强，最后变成许许多多光芒四射的星星，若隐若现，而且，星星可以变换多种形状和颜色，很美的画面吧！
如果将这些添加在你的动画中，将是一道非常亮丽的风景线。
14.1.1设置文档属性
（1）选择【文件】|【新建】命令，或单击标准工具栏中的新建按钮丄，新建一个Flash
MX2004文档。
（2）为了作图方便，选择【修改】|【文档】命令，打开如图14.1所示的【文档属性】
对话框。
只击B5DWCH）k*»兰2｛砥）
EE：
|打砌凹「|内咅曲「|狀认站|
话債脛：
二J
橱凹：
[is_
掠艮帧：
8黑.V
|设地认*.[联〔砒
图14.1【文档属性】对话框
（3）场景大小自定，背景颜色设为黑色，主要是为了增加一种神秘的感觉，而且更能突出光线的效果，与动画设置的环境相搭配。
14.1.2制作元件
（1）制作一个球体。
新建一个元件，取名为“光球”，行为为“图形”，然后在工具栏里选取圆形工具，在工作区绘制一个正圆形。
（2）设置颜色效果。
选择【窗口】|【混色器】命令，打开【混色器】面板，选择渐变
色中的圆形渐变，制作两个滑块的渐变色，其中第一个滑块颜色选取成白色，但Alpha值
设置为100，表示不透明，最好不要放在最左边，否则，中间的白点就太小；第二个滑块为浅黄色，Alpha值设置成0，即为全透明。
这样设置以后，将会达到很好的视觉效果，如
图14.2所示。
（3）
用渐变色填充图形，得到如图14.3所示的图形，小球有了放射性的效果。
（4）
制作光线1。
首先设置第一种光线色彩效果，选择矩形工具，并在【混色器】面
板中，选择渐变色中的线性渐变，制作4个滑块的渐变色，其中两头的滑块颜色选取成黄
色，但Alpha值设置为0,即全透明的黄色。
中间滑块的颜色也选取成黄色的，但Alpha
值仍设置为80,部分透明，如图14.4所示。
（5）新建一个元件，取名为“光线一”，选择矩形工具，在黑色背景的电影上任意画
一个区域，矩形框高度大概为“1pixel”左右，此时会有光线的效果。
（6）制作光线2。
首先设置第二种光线色彩效果。
按照第（4）步的设置，制作4个滑块
的渐变色，其中在两边的滑块颜色设为粉红色，Alpha值为0;中间滑块的颜色设为白色，
Alpha值为100，如图14.5所示。
（7）按照第（5）步的制作方法，制作一个元件，并命名为“光线二”。
准备工作到现在都已经完成了，接下来，我们来应用做好的元件，制作另外一个星星的元件。
（8）新建一个元件，设为“影片剪辑”，并命名为“星星”，直接按Ctrl+L组合键调
出元件库，将“光线一”拖入，按组合键Ctrl+Alt+S，弹出对话框，调整它的大小和旋转
角度，设旋转角度为20°，如图14.6所示。
（9）再拖入一条“光线一”，与前一条光线的中心重合，按照同样的方法，旋转角度
40°，大小设为不同于前光线，同理再拖入第3条“光线一”，分别旋转40°、50°和
80°不等，角度大小均有所变化，如图14.7所示。
（10）
新建一图层，在新层中拖入“光线二”，一条旋转90°,—条不旋转角度，并把
它们的大小设为比“光线一”大，这样才能重点突出它们，注意中心与前面的光线一致，如图14.8所示。
（11）
再新建一层，将“光球”拖入，调整大小和位置。
这样星星的整体形状我们就做出来了，如图14.9所示。
14.1.3
制作场景
上小节中的操作只是一个星星的元件，还没有设定动画，下面我们就要制作流星的动画了。
（1）选择【插入】|【创建新元件】命令新建一个影片剪辑，命名为“运动的星星”，按Ctrl+L组合键调出元件库，把刚才做好的星星拖放到工作区中心，注意和十字重合，如
图14.10所示。
（2）选取这个星星，运用工具栏中的回工具把这个星星放大，然后在第20帧按F5键,插入一个普通帧，并且锁住这个层。
（3）再新建一个图层，从元件库中拖入一个星星，放在刚做好的那个大星星的中心，再在第20帧按F6键插入一个关键帧。
（4）
再把这个星星的透明度设为40%,
把第20帧的那个星星拖到大星星的一个角上，返回第一帧设为“运动渐变”动作，如图14.11所示。
（5）
再新建一个层，把第二层第1帧的星星复制到第三层的第1帧，这样做是为了使
星星能重合，按照第二层的做法把它设为运动渐变，这次要把第20帧的星星放到大星星的
另一个角上，依次做好五个层的运动星星，如图14.12所示。
（6）把那个大星星层连同星星一起删除，因为我们只是用它来起辅助作用的。
（7）选择【插入】|【创建新元件】命令再新建一个影片剪辑，命名为“运动”，现在
是设流星的运动路径。
本实例中用的是一个椭圆，你也可根据目的的不同画出不同的动运路径。
在第100帧按F5键插入一个帧，然后锁定这个层，如图14.13所示。
（8）新建一个层，把刚才做好的那个“运动的星星”元件拖到第1帧，中点对好运动
路径的开头，再在第20帧按F7键，这样“运动的星星”做完了20帧的运动后就会停下来，如图14.14所示。
（9）新建一个层，在第2帧按F7键，然后把“运动的星星”拖到第2帧，这颗星一定
要放到第一颗星的后面，中心对好运动路径，再在第21帧按F7键，如图14.15所示。
（10）新建一个层，在第3帧按F7键，然后把“运动的星星”拖到第3帧，这个星星放
在第二个星星的后面，中心也要对好运动路径，然后在第22帧按F7键。
依照这样的方法
把星星依次排成你设定的运动路径。
（11）
最后把第一层的运动路径删除掉，如图14.16所示。
图14.16建立星星图层
（12）最后你把“运动”的影片剪辑拖放到绘制的背景图上，按Ctrl+Enter组合键观赏
动画，如图14.17所示，有了闪烁的星星做装饰，画面显得很丰富多了！
图14.17将元件拖拽到背景图
14.2控制动画鱼影片的实例
在这个练习当中，可以用四个不同的按钮分别来控制动画鱼的身体各个身体部件的运动。
14.2.1设置文档属性
（1）选择【文件】|【新建】命令，或单击标准工具栏中的新建按钮口，新建一个Flash
MX2004文档。
（2）选择【修改】|【文档】命令，打开【文档属性】对话框。
（3）场景大小设置成400像素X500像素，背景颜色设为白色，主要是为了看清楚动画的运动，如图14.18所示。
图14.18【文档属性】对话框
1422制作元件
（1）新建一个影片剪辑，命名为“身体”，在元件编辑区绘制一个鱼的图形，如图14.19
所示。
（2）在第4帧插入一个关键帧，然后将鱼的头部图形改变，将它的嘴巴张开，然后将帧延长到第6帧，如图14.20所示。
（3）
新建一个影片剪辑，命名为“背鳍”，在元件编辑区绘制一个背鳍，注意要让中
心点对准背鳍图形的角部，如图14.21所示。
（4）在第4帧插入关键帧，然后旋转并变形背鳍，将帧延长到第6帧，如图14.22
所示。
（5）新建一个影片剪辑，命名为“胸鳍”，然后在元件编辑区绘制一个胸鳍的图形，
如图14.23所示。
（6）在第4帧插入关键帧，将胸鳍旋转并变形，将帧延长到第6帧，如图14.24所示。
同样，新建一个影片剪辑，命名为“腹鳍”，然后在元件编辑区绘制一个腹鳍的图形，在
在第4帧插入关键帧，将腹鳍旋转并变形，将帧延长到第6帧。
（7）
新建一个影片剪辑，命名为“动画鱼”，在时间轴建立四个图层，分别命名为“身体”、“胸鳍、“背鳍”、“腹鳍”，然后从元件库中将鱼的元件拖拽到元件编辑区，分别对应放在四个图层上，最后组合成完整的鱼图形，如图14.25所示。
（8）新建一个按钮元件，命名为“普通按钮”，在编辑区制作一个按钮，在这里为了使读者能够看得更清楚，我们使用一个不加修饰的长方形按钮，根据自己的喜好，在“指针经过”、“按下”、“点击”状态时插入关键帧，并设置颜色，如图14.26所示。
到这
里，所有的元件都制作完了。
14.2.3制作场景
（1）回到主场景中，现在的主场景是一片空白，将图层命名为“动画鱼”，从兀件库
中将“动画鱼”的元件拖拽到场景中央，如图14.27所示。
（2）
新建一个图层，命名为“身体按钮”，从元件库中将“普通按钮”元件拖拽到场景中，放在如图14.28所示的位置上，并在按钮下面输入“身体控制”。
（3）
用同样的方法，建立新层“背鳍按钮”、“胸鳍按钮”及“腹鳍按钮”，然后在图层上放置普通按钮元件，并输入对应文字“背鳍控制”、“胸鳍控制”及“腹鳍控制”，如图14.29所示。
（4）用鼠标单击动画鱼元件，将它选取，然后选择【窗口】|【属性】命令，打开【属
性】面板，在实例名称标签栏里输入“fish”，这样，就将实例的名称设置为fish了，如
图14.30所示。
（5）双击动画鱼元件，进入到元件编辑区内，可以看到动画鱼被分为四层，每一层分别放置着动画鱼的身体各个部位的元件。
（6）单击身体的元件，将其选取，然后打开【属性】面板，在实例名称标签栏里输入
“body”，这样就指明了实例名称，如图14.31所示。
（7）按照上述方法，分别将“胸鳍”、“背鳍”和“腹鳍”分别命名为“sidefin”、
“topfin”和“minfin”。
（8）单击“场景1”回到主场景，新建一个图层，命名为“动作”。
（9）
选取动作层的第1帧，选择【窗口】|【开发面板】|【动作】命令（快捷键为F9），
选取动作命令打开面板，在面板里加入下列语句，如图14.32所示：
topfinFlag=0;sidefinFlag=O;bodyFlag=0;minfinFlag=O;
此变量的作用是记忆按钮的状态。
例如，单击胸鳍按钮时，如果胸鳍在动的话，就停止；如果胸鳍处于静止状态，就让它动起来，它是一个记忆各部分是否处于动态的变量。
将各个按钮的Flag状态值的初始值设置为0，则相应的实例处于动态；变量为1,则处于
静止状态。
图14.33给控制胸鳍的按钮加命令
//每次单击时停止或播放指定的Instance
on（release）{
if（sidefinFlag==0）{
//在当前位置停止sidefin实例的帧播放this.fish.sidefin.stop（）;
sidefinFlag=1;
}else{
//在当前位置播放sidefin实例的帧
this.fish.sidefin.play（）;
sidefinFlag=0;
}
}
由on（release）指定按钮处理程序，使单击鼠标时执行动作。
先检查变量sidefinFlag，如
果为0，则停止sidefin实例的帧，如果为1,则重新播放，按下的时候如果处于停止状态，那么放开的时候就重新播放。
（11）按照这个原理，给下面两个按钮添加命令，如图14.34和图14.35所示，四个按钮
的动作结构基本上相同，只不过变量和播放、停止实例方面有所变化。
（12）同理，给腹鳍控制加上动作语言。
（13）到这里，按钮控制不同影片片段的动画就制作完了，按Ctrl+Enter组合键预览动
画，单击四个蓝色按钮，可以看到动画鱼先是乱动，然后停止，再按一次按钮就又开始乱
动了。
14.3
制作金属小球跟踪鼠标
在Flash中，利用动作语言，能制作出许多变化多姿的鼠标效果，鼠标将再也不是我们以前所见的样子，它将以一种崭新的姿态出现在我们的眼前，像是具有了灵性。
将这些鼠标动画用在个人网站上，将能增加许多很酷的动感效果，下面将介绍常用的鼠标效果。
在本实例中，只要在屏幕上拖动鼠标即可以看到鼠标周围有一连串的带有金属质感的小球旋转的动画效果。
14.3.1设置文档属性
（1）选择【文件】|【新建】命令，或单击标准工具栏中的新建按钮口，新建一个Flash
MX2004文档。
（2）为了作图方便，选择【修改】|【文档】命令，打开如图14.36所示的【文档属性】对话框。
图14.36【文档属性】对话框
（3）将尺寸选项区的宽设为550像素，高设为400像素（图中在数字之后以px表示像素），单击【确定】按钮。
14.3.2制作元件
（1）新建一个元件，输入元件名称“小球”，行为选择【图形】单选项，再单击【确定】按钮。
（2）使用工具箱中的椭圆工具，绘制一个带有金属质感的球体，并将其定位到“十”字处，如图14.37所示。
图14.37绘制小球
（3）再次选择【插入】【按钮】。
|【新建兀件】命令，添加一个按钮类型的兀件，并将其命名为
（4）单击帧插入一个空白帧，再次选择工具箱中的椭圆工具，绘制一个同金属球一般大小的圆，并且以另外一种颜色填充，注意，可以使用显示参考线进行绘制，确保大小一样，如图14.38所示。
（5）按Ctrl+F8组合键，添加一个影片片段，并将其命名为【动画】，再单击【确定】按钮。
（6）按Ctrl+L组合键，快速启动Library面板，将按钮元件拖放到“十”字处，如图14.39所示。
（7）
单击第2帧，然后按F7键，插入一个空白帧，将【小球】元件拖放到“十”字处,如图14.40所示。
（8）
单击第10帧，然后按F6键，插入一个关键帧，将该帧内的小球向下移动一段距离，如图14.41所示。
图14.40拖动元件图14.41移动元件
（9）选择【窗口】|【变形】命令，打开【变形】面板，输入按图14.42所示的数值,
再单击園按钮，就可以将小球变形，变形的小球如图14.43所示。
并将第二个浮动层没有
变形的小球删除。
（10）单击选取第2帧，然后打开【属性】面板，在【补间】下拉列表框中选择【动作】选项，在旋转下拉列表中选择【顺时针】选项，并在次数文本框中输入数值2，即表示将
小球顺时针旋转两圈，如图14.44所示。
■f〒m
njj桢
补闻蒯」v
■岬韩基》
简曷：
也
莽毎裘勢：
□雌到賂轻叵］同捋回划齐
图14.44设定选项
（11）单击第20帧，然后按F6键，插入一个关键帧，删除该帧内的小球，然后从元件
库当中重新拖动一个小球元件到“十”字处，如图14.45所示。
（12）选取该帧小球，在【属性】面板中，将【透明度】的值设置为0,然后选取第10
帆在第10帧与第20帧之间建立一段运动渐变动画，如图14.46所示。
（13）
接下来，选取第1帧，打开【动作-帧】面板，选择【全局函数】|【时间轴控制】命令展开列表，然后双击Stop选项，为该帧加入帧行为，如图14.47所示。
这样，影片一开始就会停止在第1帧上面。
（14）单击选取第1帧内的按钮元件，然后输入以下命令:
on（rollOver）{gotoAndPlay
（2）;
}
意思是鼠标跳到该按钮上面之后，就跳转到第2帧开始播放，如图14.48所示。
图14.48添加命令
14.3.3制作场景
（1）单击“场景1”标签，返回到主场景，然后再改变文件属性，如图14.49所示。
（2）打开元件窗口，将【动画】元件拖动到场景中，然后将其缩放到适当的大小，最
后在场景中复制无数个动画元件，并将它们紧密地排列在一起，如图14.50所示。
图14.49设置属性图14.50复制动画元件
（3）至此，本实例全部制作完毕，按Ctrl+Enter组合键可观看动画播放按钮，如
图14.51所示。
图14.51动画效果
14.4编程语言控制鼠标跟随实例
本实例是制作一个Flash的动态鼠标跟随实例。
效果图如图14.52和图14.53所示。
图14.53效果图二
图14.52效果图一
14.4.1设置文档属性
（1）按Ctrl+N组合键，新建一个文档。
（2）按Ctrl+M组合键，打开【文档属性】对话框，并设置影片的尺寸宽为780像素,
高为440像素（图中在数字之后以px表示像素），背景颜色为#99CC33，如图14.54所示。
图14.54设置属性
14.4.2制作元件
跟随鼠标的文字串为"Hi,lookatme”，其所包含的文字为a，e,H，i，k，l，m，o，和t。
（1）按Ctrl+F8组合键打开【创建新元件】对话框。
（2）将元件命名为“a”，并选择元件的行为为“影片剪辑”。
（3）选择【文字】工具，在元件“a”窗口中输入文字a，并设置其字体为“ComicSansMS”，大小为20，颜色为红色，如图14.55所示。
（4）重复步骤
（1）~（3），分别建立元件e，H，i，k，l，m,o，t和一个空元件dummy（即什么也没有）。
（5）按下Ctrl+L组合键打开【库】面板，在【库】面板中，按下二按钮，新建一个目
录Letters。
并把刚新建的所有元件拖动到目录中去，如图14.56所示。
（6）按Ctrl+F8组合键打开【创建新元件】对话框。
⑺将元件命名为"period”，并选择元件的行为为"影片剪辑”。
（8）在元件period编辑窗口中单击时间轴的第5帧按“F6”键插入一个关键帧。
（9）选择文本工具，输入一个“.”号。
（10）单击时间轴第10帧，按F6键插入一个关键帧。
（11）选择文本工具后，单击刚插入的“.”号，然后在其后面插入一个“•”号。
（12）单击时间轴第15帧，按F6键插入一个关键帧。
（13）选择文本工具后，单击刚插入的“.”号，再在其后面插入一个“•”号。
（14）
单击时间轴第20帧，按F5键插入一个帧，时间轴如图14.57所示。
（15）单击【库】面板中的」按钮，新建一个目录“draggedobject”。
（16）在【库】面板中的“draggedobject”目录里，按Ctrl+F8组合键打开【创建新元件】对话框，新建一个元件“loadingdragOBJ"，并选择元件的行为为“影片剪辑”。
（17）在元件loadingdragOBJ编辑窗口中，选取第1帧，打开【动作】面板。
（18）在【动作】面板中的编辑窗口中输入以下代码：
i=16;//"Hilookatme…"字符串（计算空格在内）共16个元件
a=5;
b=1.66;
k=12;
//替换各元件位置
while（Number（i）>=0）{
set（"〔trail"addiadd":
x_value",getProperty（"〔trail"addi,_x））;
set（"〔trail"addiadd":
y_value",getProperty（"〔trail"addi,_y））;
set（"|trail"addiadd":
vx",0）;
set（"|trail"addiadd":
vy",0）;
i=iT;
}
//使元件能拖动
startDrag（"〔trailO",true）;
此时，【动作-帧】面板如图14.58所示。
图14.58添加代码后的【动作-帧】面板
（19）单击时间轴第2帆按F6键插入一个关键帧。
（20）选取时间轴第2帧，在【动作】面板中输入以下代码：
//替换各元件位置
i=1;
while（Number（i）<=16）{
set（"|trail"addiadd":
vx",（eval（"|trail"addiadd
":
vx"）+（eval（"|trail"add（iT）add":
x_value"）+k-eval（"〔trail"addiadd
":
x_value"））*1〔a）〔b）;
set（"|trail"addiadd":
vy",（eval（"|trail"addiadd
":
vy"）+（eval（"|trail"add（iT）add":
y_value"）-eval（"〔trail"addiadd
":
y_value"））*1〔a）〔b）;
set（"|trail"addiadd":
x_value",eval（"|trail"addiadd
":
x_value"）+eval（"|trail"addiadd":
vx"））;
set（"|trail"addiadd":
y_value",eval（"|trail"addiadd
":
y_value"）+eval（"|trail"addiadd":
vy"））;
i=Number（i）+1;
}
//重新获得各元件的位置
|trailO:
x_value=getProperty（"|trail0",_x）;
|trail0:
y_value=getProperty（"|trail0",_y）;
//重新写入各元件位置
i=16;
while（Number（i）>=1）{
setProperty（"〔trail"addi,_x,eval（"|trail"addiadd
":
x_value"））;
setProperty（"〔trail"addi,_y,eval（"|trail"addiadd":
y_value"））;
i=iT;
}
（21）单击时间轴第3帧，按F6键插入一个关键帧。
（22）点击时间轴第3帧，在动作】面板中，单击“+”，选择【全局函数】|【时间轴
控制】|gotoAndPlay命令，值设为2,如图14.59所示。
图14.59【动作-帧】面板
（23）单击时间轴的第40帆按F5键插入一个帧，此时，时间轴如图14.60所示。
图14.60时间轴
14.4.3制作场景
（1）在场景中选择【查看】|【网格】|【显示网格】命令。
（2）按下Ctrl+L组合键打开【库】面板。
（3）在【库】面板中，选择元件"loadingdrag
升级会员 