多媒体技术与网页设计 Flash综合实例

多媒体技术与网页设计第17章Flash综合实例图17.1输入文字

(4)在图层1的第20帧处插入关键帧。

(5)选中图层1的第1帧，选择窗口菜单中的“变形”命

令，在弹出的“变形”对话框中选中“约束”复选框，在文

本框中输入缩放数值350.0%(如图17.2所示)，然后回车

确认。图17.2“变形”对话框

(6)将放大的文字选中，在属性面板中的填充颜色项里修改Alpha值为0%，将文字更改为透明状态，如图17.3所示。图17.3Alpha值设置

(7)在图层1的第1帧到第20帧之间的帧上单击鼠标，在属性面板上选择补间类型为“形状”。

(8)在图层1的第30帧处单击鼠标右键插入帧，延长文字显示时间。

(9)保存并测试影片，如图17.4所示。图17.4影片测试上述(1)～(9)步完成了文字淡入效果的动画制作。文字淡出动画和文字淡入动画的制作类似，只不过两者是一个相反的过程，这里不再赘述，读者可以自己动手尝试。

17.2制作文字逐个缩放动画

本实例制作文字逐个缩放动画，其操作步骤如下：

(1)新建Flash文档，并修改文档属性，尺寸为550px

×200px，背景颜色为#CC9933。

(2)新建5个图层，共形成6个图层，图层1命名为

“文”，图层2命名为“字”，图层3命名为“逐”，图层4命名

为“个”，图层5命名为“缩”，图层6命名为“放”，如图17.5所示。图17.5图层设置(3)分别在不同的图层使用“文本工具”输入对应的文字“文”、“字”、“逐”、“个”、“缩”、“放”，字体为“宋体”，字号为“80”，颜色为“黑色”，并使用“对齐”面板将文字排列整齐，如图17.6所示。图17.6输入文字

(4)拖动鼠标选中将所有图层的第12帧，插入关键

帧，如图17.7所示。图17.7插入关键帧

(5)在“变形”面板中，不选“约束”复选框，将垂直变形比例设置为0.0%，如图17.8所示。图17.8变形(6)在属性面板中为所有图层设置补间动画。

(7)从“字”图层开始到“放”图层，分别选中第1～12

帧，相对于前一个图层拖动鼠标向右移动6帧，如图17.9

所示。图17.9各图层帧的移动(8)在所有图层的第60帧处插入帧延续播放时间，如图17.10所示。图17.10帧延续(9)保存并测试影片，如图17.11所示。图17.11影片测试17.3制作“珍惜时间”动画

本实例制作“珍惜时间”动画，其操作步骤如下：

(1)新建一个Flash文档，设置文档属性，背景颜色为#339999。

(2)使用“椭圆工具”，笔触颜色为无，填充颜色为#FF9933，绘制椭圆。选中绘制好的椭圆，执行复制命令，点击鼠标右键粘贴到当前位置，使用键盘上的箭头键向上移动少许位置，设置填充颜色为#FF6633，如图17.12所示。然后使用“选择工具”选中绘制好的两个椭圆，按键盘上的F8键，将其转换为影片剪辑元件，命名为“沙漏底”。图17.12沙漏底

(3)使用“矩形工具”，笔触颜色为无，填充颜色为#990000，绘制沙漏柱子。然后使用“选择工具”选中绘制的矩形(如图17.13所示)，按键盘上的F8键，将其转换为影片剪辑，命名为“柱子”。图17.13沙漏柱子

(4)使用“矩形工具”，笔触颜色为无，填充颜色为白

色，Alpha值设置为30%，按照沙漏盖子的宽度绘制矩形(如图17.14所示)，使用“任意变形工具”的“封套”选项将其调整成沙漏玻璃容器(如图17.15所示)，注意玻璃容器底部要与“沙漏底”元件的边缘匹配(如图17.16所示)。然后使用“选择工具”选中绘制的矩形，按键盘上的F8键，将其转换为影片剪辑，命名为“沙漏玻璃容器”。图17.14沙漏玻璃容器绘制1图17.15沙漏玻璃容器绘制2图17.16沙漏玻璃容器绘制3

(5)使用“任意变形工具”将“柱子”缩小一些，并复制一个作为沙漏后排的柱子，放在防漏底上，再使用“任意变形工具”进行调整，使其边缘和沙漏底的边缘结合，然后拖出两个“柱子”元件作为沙漏的前柱子，最后拖出“沙漏

盖”元件作为沙漏顶盖，调整好位置、大小以及排列层

次，如图17.17所示。完成后将制作好的沙漏元件全部选

中，按F8键将其转换为影片剪辑元件，命名为“沙漏”。图17.17沙漏

(6)新建图层2，锁定图层1，在图层2的第1帧使用“刷子工具”，笔触颜色为无，填充颜色为#FFCC33，绘制上部沙子图形(如图17.18所示)，然后将其转换为影片剪辑元件，命名为“上部沙子”。图17.18上部沙子

(7)新建图层3，锁定图层1和图层2，在图层3的第1帧使用“刷子工具”，笔触颜色为无，填充颜色为#FFCC33，绘制下部沙子图形(如图17.19所示)，然后将其转换为影片剪辑元件，命名为“下部沙子”。图17.19下部沙子

(8)选定“上部沙子”所在图层2，插入图层，在新建的图层4的第1帧使用“矩形工具”，笔触颜色为无，填充色为绿色，绘制矩形遮住“上部沙子”，并使用“任意变形工具”对绿色矩形的上部做弧度微调，如图17.20所示。图17.20上部沙子遮罩图层

(9)选定“下部沙子”所在图层3，插入图层，在新建的图层5的第1帧使用“矩形工具”，笔触颜色为无，填充色为红色，绘制矩形遮住“下部沙子”，并使用“任意变形工具”对绿色矩形的上部做弧度微调，如图17.21所示。图17.21下部沙子遮罩图形

(10)在图层1、图层2、图层3的第60帧处插入帧做延续，在图层4的第60帧处插入关键帧，在图层4的第60帧位置将绿色矩形向下方移动，完全露出“上部沙子”元件，在第1～60帧设置形状补间动画，并将图层4设置为遮罩层，如图17.22所示。图17.22图层设置

(11)在图层5的第60帧处插入关键帧，在图层5的第60帧位置将红色色矩形向上方移动，完全遮住“下部沙子”元件，在第1～60帧设置形状补间动画，并将图层5设置为遮罩层，如图17.22所示。

(12)选中图层5，插入新图层，在新建图层6的第60帧处插入关键帧，使用“文本工具”输入“时光会倒流吗？”，颜色为黄色，竖排，字体为宋体，字号为50，如图17.23

所示。图17.23动画文字

(13)在图层1～6的第80帧处插入帧做延续，分别在图层6的第63帧、66帧、69帧、72帧、75帧处插入关键帧，在第60帧删除其它文字，只保留“时”，在第63帧删除其它文字，只保留“时光”，在第66帧删除其它文字，只保留“时光会”，在第69帧删除其它文字，只保留“时光会倒”，在第72帧删除其它文字，保留“时光会倒流”，在第75帧删除其它文字，保留“时光会倒流吗”，制作文字动画。

(14)保存并测试影片。

17.4制作“爱护树木”动画

本实例制作“爱护树木”动画，其操作步骤如下：

(1)新建Flash文档，设置文档属性，背景颜色为黑

色。

(2)单击“插入”菜单下的“新建元件”命令，新建一个图形元件，命名为“斧头”，绘制斧头并填充为红色，如图17.24所示。图17.24绘制斧头

(3)分别在第10帧和第20帧处插入关键帧，在第10帧旋转斧头图形，制作斧头砍下的情形，分别在第1～10帧和第10～20帧设置形状补间动画。

(4)单击工具栏上的“场景1”图标，返回主场景窗口，在图层1的第1、20、40、60帧处插入关键帧，分别绘制树木被砍深的画面(如图17.25～图17.28所示)，树木颜色填充为深绿色。图17.25绘制树木1图17.26绘制树木2图17.27绘制树木3图17.28绘制树木4

(5)新建图层2，在第10帧处插入关键帧，从库中拖入“斧头”元件，调整好位置和方向(如图17.29所示)，在第60帧处插入普通帧。

(6)单击“插入”菜单下的“新建元件”命令，新建一个图形元件，命名为“人形”，绘制人形并填充为深绿色，如图17.30所示。图17.29拖入斧头元件制作斧头砍树图17.30绘制人形

(7)在第10帧处插入关键帧，绘制倒下的人形(如图17.31所示)，为第1～10帧设置形状补间动画，并在第20帧处插入帧做延续。

(8)单击工具栏上的“场景1”图标，返回主场景窗口，在图层1的第61帧处插入关键帧，从库面板中拖入“人形”元件，调整大小后放置在适当的位置，并在第80帧处插入帧做延续。

(9)保存并测试影片，如图17.32所示。图17.31绘制被砍倒的人图17.32影片测试17.5制作鼠标跟随特效动画

本实例制作鼠标跟随特效动画，其操作步骤如下：

(1)新建Flash文档，设置文档属性，背景颜色为黑

色。

(2)单击“插入”菜单下的“新建元件”命令，新建一个图形元件(如图17.33所示)，命名为“图形圆”，用“椭圆工具”在舞台中心位置绘制一个笔触颜色为无填充颜色为黄色、大小为25px×25px的圆。图17.33新建元件

(3)单击“插入”菜单下的“新建元件”命令，新建一个按钮元件，命名为“按钮圆”，在“指针经过”帧插入关键帧，在舞台中心位置绘制一个颜色为黄色、大小为25px×25px的圆。

(4)单击“插入”菜单下的“新建元件”命令，新建一个影片剪辑元件，命名为“影片剪辑圆”，从库中拖入元件“按钮圆”放在时间轴上图层1的第1帧的舞台中心位置。

(5)新建图层2，在图层2的第2帧处插入关键帧，从库中拖入“图形圆”元件放在舞台的中心位置。

(6)在图层2的第15帧处插入关键帧，使用“任意变形工具”将“图形圆”元件适当放大，使用“箭头工具”选取被放大的“图形圆”元件，在属性面板中将其Alpha值设置为20%(如图17.34所示)，并为图层2的第2～15帧设置形状补间动画。图17.34在属性面板中设置Alpha值

(7)为图层1的第1帧设置动作语句stop( )(如图17.35

所示)，接着选中图层1上的“按钮圆”元件，设置动作语句on(rollover){play( );}，如图17.36所示。

(8)单击工具栏上的“场景1”图标，返回主场景窗口，单击时间轴上图层1的第1帧，放入元件“影片剪辑圆”，并复制若干个排列满整个窗口，如图17.37所示。图17.35设置帧动作语句图17.36设置按钮元件动作语句图17.37排列影片剪辑元件(9)保存并测试影片，如图17.38所示。图17.38影片测试

17.6制作透镜成像动画

本实例制作透镜成像动画，其操作步骤如下：

(1)新建Flash文档，设置文档属性，背景颜色为#66FF99。

(2)在图层1的第1帧选择“椭圆工具”，笔触颜色为黑

色，填充颜色为#00CCFF，绘制透镜，如图17.39所示。绘制完成后按键盘上的F8键将其转换为影片剪辑元件，命名为“透镜”。图17.39绘制透镜

(3)使用“线条工具”，笔触颜色为黑色，线条宽度为3(如图17.40所示)，绘制一条水平直线。使用“刷子工具”，笔触颜色为黑色，填充颜色为黑色，在水平直线的两端点绘制两个小圆点，如图17.41所示。然后使用“选择工具”选中绘制的圆点和直线，在键盘上按F8键将其转换为影片剪辑元件，命名为“线段”。图17.40线条属性设置图17.41线段制作(4)拖动刚才绘制的线段并复制五份，做成透镜主

轴，如图17.42所示。图17.42透镜与主轴线

(5)单击“插入”菜单下的“新建元件”命令，新建一个影片剪辑元件，命名为“蜡烛”。在第1帧的舞台中心位置，使用“矩形工具”，笔触颜色为无，填充颜色为红色，绘制一个矩形。使用“任意变形工具”将红色矩形调整成蜡烛体形状，使用“铅笔工具”绘制蜡烛的火苗，填充成黄色，在第3帧处插入关键帧，使用“任意变形工具”调整火苗的形状，如图17.43所示。图17.43蜡烛和火苗的绘制

(6)从库面板中将蜡烛元件拖放到透镜左侧主轴两倍焦距以外的位置，调整好大小，如图17.44所示。

(7)插入4个新图层，在图层2的第1帧使用“直线工

具”，笔触颜色为黑色，线条宽度为3，画出两条线段，如图17.45所示。图17.44放置蜡烛的位置图17.45线段的绘制1

(8)在图层4的第1帧使用“直线工具”画出一条线段，如图17.46所示。

(9)在图层1、图层2和图层4的第60帧处插入关键帧，单击图层1的第60帧，从库面板中拖入“蜡烛”元件，对齐进行垂直翻转，调整好大小和位置，如图17.47所示。图17.46线段的绘制2图17.47放入透镜成像的蜡烛

(10)将图层1、图层2、图层4锁定，在图层3的第1

帧，使用“矩形工具”，笔触颜色为无，填充颜色为#006600，绘制竖长条形，并复制多个组成竖状斑马线，使用“选择工具”选中所有竖条，按Ctrl+G键将其组合，如图17.48所示。图17.48绘制斑马线

(11)在图层3的第30帧处插入关键帧，在第1帧将斑马线移动到左边蜡烛的左侧，为第1帧到第30帧设置补间动画，如图17.49所示。

(12)单击图层4的第1帧，将其拖动到第30帧的位置，如图17.49所示。

(13)将图层3的第1～30帧选中并复制帧，在图层5的第30帧处插入关键帧，并粘贴帧，如图17.49所示。

(14)将图层3和图层5设置为遮罩层，在所有图层的第80帧处插入帧做延续，如图17.49所示。图17.49图层设置(15)保存并测试影片，如图17.50所示。图17.50影片测试17.7制作“计算一元二次方程”动画

本实例制作“计算一元二次方程”动画，其操作步骤如下：

(1)新建Flash文档，设置文档属性，背景颜色为黑

色。

(2)单击“插入”菜单下的“新建元件”命令，新建一个

按钮元件，命名为“计算”，使用“矩形工具”，笔触颜色为无，填充颜色为黄色，边角半径为15点，绘制一个按钮。使用“文本工具”在按钮上输入文字“计算”，字体为宋体，字号为20，字形加粗，颜色为红色。在“指针经过”帧插入关键帧，更改按钮填充颜色为紫色；在“按下”帧插入关键帧，更改按钮填充颜色为绿色，使用同样的方法制作“清除”按钮，如图17.51所示。图17.51“计算”按钮和“清除”按钮

(3)单击工具栏上的“场景1”图标，返回主场景，在图层1的第1帧使用“文本工具”制作界面，其中“A=”、“B=”和“C=”对应的文本设置为“输入文本”，实例名称分别设为

“a”、“b”和“c”，“X1=”、“X2=”以及其上方的文本设置为“动态文本”，实例名称分别设为“x1”、“x2”和“x”，从库面板中拖入两个按钮，如图17.52和图17.53所示。图17.52主界面设计图17.53文本设置(4)在图层1的第1帧添加动作语句stop();。

(5)选中“清除”按钮并添加如下动作语句：

on(press){

a.text=“”;

b.text=“”;

c.text=“”;

x1.text=“”;

x2.text=“”;

x.text=“”;

}

(6)选中“计算”按钮并添加如下语句：

on(press){

a=a.text;

b=b.text;

c=c.text;

d=(b*b)-(4*a*c);

if(d<0)

{

x.text=“无解”;

}

if(d>=0)

{

x.text=“有解！”;

x1.text=(-b+Math.sqrt(d))/(2*a);

x2.text=(-b-Math.sqrt(d))/(2*a);

}

}(7)保存并测试影片，如图17.54所示。输入A、B和C的值，点击“计算”按钮可进行计算。图17.54影片测试17.8制作“放大镜”动画

本实例制作“放大镜”动画，其操作步骤如下：

(1)新建Flash文档，设置文档属性，背景颜色为#009933。

(2)下载一副“枫叶”图片，在Photoshop中将其背景去除为透明，保存成png文件，在Flash中导入到库。

(3)单击“插入”菜单下的“新建元件”命令，新建一个图形元件，命名为“枫叶”，将库中的枫叶拖动到舞台中央，调整好大小。

(4)单击工具栏上的“场景1”图标，返回主场景窗口，插入3个新图层，在图层1的第1帧将枫叶元件拖到舞台中部，调整好位置。

(5)使用“文本工具”输入“秋天的枫叶”，颜色为白色，字体为宋体，字号为30，如图17.55所示。

(6)在图层2的第1帧将枫叶元件拖到舞台中部，使

其和图层1的图形重合，然后将其适当放大，如图17.56

所示。图17.55枫叶与文字图17.56放大的枫叶与文字(7)在图层3的第1帧使用“椭圆工具”，笔触颜色为白

色，填充颜色为黑色，在枫叶右下角绘制一个圆，在键盘上按Ctrl+G键将其组合，如图17.57所示。图17.57绘制圆

(8)复制刚才绘制的圆，在图层4的第1帧粘贴到当前位置，在键盘上按Ctrl+B键，取消组合，删除圆的填充部分，再在键盘上按Ctrl+G键将刚才得到的白色圆圈组合。

(9)在图层3的第35帧处插入关键帧，将圆移动到枫叶的左上角，设置动作补间动画。

(10)将图层3设置为遮罩层。

(11)在图层4的第35帧处插入关键帧，将白色圆圈移动到枫叶的左上角，和图层3的黑色圆重合，设置动作补间动画。

(12)按照相同的方法可以在后续位置插入关键帧，制作由左下角到右上角的动画或其它方向的动画。

(13)保存并测试影片，如图17.58所示。图17.58测试影片17.9制作电影胶片动画

本实例制作一段电影胶片动画，其操作步骤如下：

(1)新建一个Flash文档。

(2)用“矩形工具”，边线为无，填充颜色为黑色，绘制一个大长方形。

(3)用“矩形工具”， 边线为无， 填充颜色为红色，绘制一个小正方形，并按住Shift+Ctrl键水平方向复制多个。

(4)将绘制的所有正方形选中，水平平均分布并对

齐。

(5)使用“箭头工具”将所有正方形选中，放置到黑色矩形靠上方边界的内部位置，再按住Alt键拖动到黑色矩形下方边界的内部位置。

(6)移动黑色矩形到其它位置，删除红色正方形。

(7)使用“箭头工具”选中胶片中间部分，更改颜色为深红色。

(8)导入反相图片(反相图片可以使用光影魔术手转

换)，放置到胶片中间部分，如图17.59所示。

(9)选择时长，移动创建补间动画。

(10)保存并测试影片。图17.59胶片效果17.10制作模拟钟表动画

本实例制作一个模拟钟表动画，其操作步骤如下：

(1)新建Flash文档，设置文档属性，尺寸为400px

×400px。

(2)用Photoshop或Flash绘制表盘作为背景。

(3)新建3个影片剪辑元件，命名为“s”、“m”和“h”，画法分别如下：

●秒针“s”元件画法：使用“矩形工具”从中心下方一点处向上画一条红色细线(如图17.60所示)；

●分针“m”元件画法：使用“矩形工具”从中心处向上画一条比秒针s略宽略短的蓝色细线(如图17.60所示)；●时针“h”元件画法：使用“矩形工具”从中心处向上画一条比分针略宽略短的黑色宽线(如图17.60所示)。

秒针“s”、分针“m”和时针“h”的绘制长度根据表盘

来定。图17.60秒针、分针和时针的绘制

(4)新建4个图层，从上到下命名为“动作”、“S”、

“M”、“H”、“背景”(如图17.61所示)，具体设置含义如下：

●“动作”图层：放入动作代码；

●“S”图层：放入影片剪辑元件秒针“s”；

●“M”图层：放入影片剪辑元件分针“m”；

●“H”图层：放入影片剪辑元件时针“h”；

●“背景”图层：放入绘制好的表盘。图17.61图层设置时针、分针、秒针的放置位置如图17.62所示。图17.62指针的放