首页 理论教育教你玩转FlashCS6:小船的航行案例

教你玩转FlashCS6:小船的航行案例

【摘要】:本案例为“小船的航行”。动画中的小船会从左边向前航行一直到最右边。图1.26 放置云朵到舞台上的效果Step2 新建图层并重命名为“小船”。图1.27 时间轴的具体设置6.测试、发布影片Step1 执行“文件”→“保存”菜单命令,弹出保存文件对话框,在文件名处输入“小船的航行”,单击“保存”按钮将文件保存。

【案例概述】

本案例为“小船的航行”。动画中的小船会从左边向前航行一直到最右边。通过本案例的学习,读者可以掌握使用Flash制作动画的基本理念和思路,其效果图如图1.16所示。

【实现过程】

1.设置“文档属性”

启动Adobe Flash CS6后,新建一个文档。执行“窗口”→“属性”命令,打开文档的属性窗口,如图1.17所示。用鼠标双击舞台属性后面的色块,设置舞台背景颜色为“#03B2EB”。

978-7-111-50093-3-Chapter01-17.jpg

图1.16 “小船的航行”效果图

978-7-111-50093-3-Chapter01-18.jpg

图1.17 文档属性设置

2.绘制元件“云朵”

Step1 执行“插入”→“新建元件”菜单命令,打开“创建新元件”对话框,如图1.18所示,设置新元件的名称为“云朵”,类型为“图形”,然后单击“确定”按钮

978-7-111-50093-3-Chapter01-19.jpg

图1.18 “创建新元件”对话框

Step2 单击“工具箱”中的“椭圆工具”按钮,然后修改工具箱中“笔触颜色”为“无”,填充颜色为“白色”,在舞台上绘制出多个相连的椭圆,如图1.19所示。

3.绘制元件“小船”

Step1 执行“插入”→“新建元件”菜单命令,新建图形元件“小船”。

Step2 单击“工具箱”中的“线条工具”按钮,然后修改工具箱中“笔触颜色”为“黑色”,在舞台上绘制出小船的基本轮廓,效果如图1.20所示。

978-7-111-50093-3-Chapter01-20.jpg

图1.19 “云朵”效果图

978-7-111-50093-3-Chapter01-21.jpg

图1.20 “小船”基本轮廓

Step3 单击“工具箱”中的“椭圆工具”按钮,然后修改工具箱中“笔触颜色”为“黑色”,填充颜色为“无”,在小船的中间添加三个圆圈,其效果如图1.21所示。

Step4 设置“工具箱”中的“填充颜色”,单击工具箱中“颜料桶工具”按钮,为小船填充颜色,其效果如图1.22所示。

4.绘制大海

Step1 用鼠标单击文档选项卡下面的“场景”按钮,回到主场景。单击工具箱中的“矩形工具”按钮,设置笔触颜色为“无”,填充颜色为“#0184CC”,在舞台的中下部分画一个矩形,如图1.23所示。单击工具箱中的“选择工具”按钮,选中该矩形,打开其属性窗口,如图1.24所示,修改其属性窗口中位置大小X为“0”,宽为“550”。

978-7-111-50093-3-Chapter01-22.jpg(www.chuimin.cn)

图1.21 “小船”最终轮廓图

978-7-111-50093-3-Chapter01-23.jpg

图1.22 小船最终效果图

978-7-111-50093-3-Chapter01-24.jpg

图1.23 绘制大海

978-7-111-50093-3-Chapter01-25.jpg

图1.24 “大海”属性设置窗口

Step2 鼠标双击时间轴上的“图层1”,将其重命名为“大海”,并单击“锁定”按钮将图层锁定,如图1.25所示。

978-7-111-50093-3-Chapter01-26.jpg

图1.25 “大海”图层设置

注意:锁定后的图层,位置和形状将不能够修改。

5.制作动画

Step1 新建图层并重命名为“云朵”,打开“库”面板,拖动元件“云朵”到舞台上,将其移动到合适的位置;再一次拖动元件“云朵”到舞台上,并放置到合适的位置。这时舞台上出现两朵云彩,使用“变形工具”调整它们的大小,其效果如图1.26所示。

978-7-111-50093-3-Chapter01-27.jpg

图1.26 放置云朵到舞台上的效果

Step2 新建图层并重命名为“小船”。打开“库”面板,拖动元件“小船”到舞台上。单击“小船”图层的100帧,单击鼠标右键,在弹出菜单中选择“插入关键帧”,并移动“小船”到舞台的最右边。用鼠标右键单击“小船”图层中1~100帧中间的任意帧,在弹出菜单中选择“创建传统补间”。

Step3 用鼠标右键单击“大海”图层的第100帧,在弹出的菜单中选择“插入帧”,插入普通帧;在“云朵”图层的第100帧处也插入普通帧。时间轴的具体设置如图1.27所示。

978-7-111-50093-3-Chapter01-28.jpg

图1.27 时间轴的具体设置

6.测试、发布影片

Step1 执行“文件”→“保存”菜单命令,弹出保存文件对话框,在文件名处输入“小船的航行”,单击“保存”按钮将文件保存。注意此时保存的为扩展名为.fla的动画源文件。

Step2 动画完成后,可按【Enter】键测试动画在时间轴上的播放效果。执行“控制”→“测试场景”菜单命令,即可打开Flash Player播放测试影片,小船就会从舞台的左边行驶到右边。

Step3 执行“文件”→“测试场景”菜单命令,即可在源文件所在的位置生成扩展名为.swf和.html的影片文件。

【技术讲解】