《快乐的校园》动画制作步骤(最终版)

《快乐的校园》片头动画制作步骤

第6周操作任务：（2人为一小组）

操作准备：从ftp://10.24.110.120/下载“第6周期中作业”课堂资源到自己电脑上。

1．启动Flash MX 2004，新建一个Flash文档，设置该文档大小为“800px*600px”，背景颜色为黑色。

2．从菜单中选择“窗口”→“设计面板”→“场景”命令，打开“场景”面板，双击“场景1”名称将其改名为“快乐的校园”，如下图示。

3．将“图层1”改名为“背景”图层，把“素材”文件夹里的“背景.jpg”图片导入到该图层的第1帧。

4．在“背景”图层第190帧按插入帧，然后锁定该图层。

5．在“背景”图层上方新建图层，将其改名为“标题”图层，分别在第20帧和第40帧插入关键帧。

6．选中“标题”图层的第20帧，绘制5个大小不一的空心正方形。如下图排列：

7．选中“标题”图层的第40帧，从“素材”文件夹中导入“标题.png”，如下图。

8．选中该图像，将其打散为分离图形。

9．选择“标题”图层第20～40帧中间的某一帧，设置形状补间动画。

10．选择“标题”图层的第190帧，插入帧，并将其锁定。

11.保存文件：以文件名“快乐校园+2个同学的班级学号.fla”（如8班2号与12号小组的同学文件可命名为快乐校园0802+0812.fla保存，并上交到各自的FTP。

第七周操作任务：

12．从FTP下载上周的文件并双击打开，在“标题”图层上方新建图层，命名为“按钮1”，在第40帧插入关键帧，从“素材”文件夹中导入“按钮.png”图片到该帧，并将其转换为“button1“图形元件。

图一

图二

13．选中“按钮1”图层，单击“添加运动轨迹”按钮，绘制一个比背景图椭圆略大的空心椭圆，调整其大小并旋转，效果如下图：

14．利用“选择工具”将空心椭圆的上半部分选中并删除，效果如下图。

15．选中“按钮1”图层第40帧，将按钮中心点对齐弧形轨迹的左边起点，如下图所示。

16．在“按钮1”图层第60帧插入关键帧，并将按钮中心点对齐弧形路径的右边终点，如下图所示。

17．选择“按钮1”图层的第40帧，调整该帧的按钮透明度为20%。

18．在“按钮1”图层的第40～60帧中创建动作补间动画，时间轴面板如下所示：

19．在“按钮1”图层上新建“按钮2”图层，在第45帧插入关键帧。

20．从库面板中将“button1”元件拖到舞台，调整其宽度和高度，使它比按钮1略小。

21．参照按钮1动画制作步骤14~17在45~65帧之间制作按钮2的淡入动画，使按钮2沿弧形轨迹运动并停在按钮1的下方。完成后的时间轴面板如下：

完成后的效果图如下：

22．参照以上方法制作其他3个按钮的淡入动画，使他们出现间隔相差5帧，完成后的时间轴面板如下：

23．在“引导层”上方新建“校园风采”图层，在第75帧插入关键帧，输入文字“校园风采”，将其转换为“校园风采”按钮元件，并编辑该按钮元件，编辑完后退出元件编辑窗口返加主场景；

24．选中该按钮元件，在“动作”面板添加如下动作脚本实现超级链接到校园网“校园风采”页面。

on (press) {

getURL("http://10.24.40.7/1xxjj/116_xyfc_index.asp");

}

25．在“校园风采”上方依次新建“校园新闻”、“校园电视台”、“退出”图层，分别在“校园新闻”图层的第80帧、“校园电视台”图层的第85帧、“退出”图层的第6帧插入关键帧，并分别放置“校园新闻”、“校园电视台”、“退出”按钮元件（方法同上），再分别链接到校园网的校园新闻页面（http://10.24.40.7/news/default.asp）、校园电视台页面（http://10.24.40.7/spdb/default.asp）和实现退出（即fscommand("quit");）；完成后的时间轴面板和效果图如下：

26、保存文件并上交到FTP。

第8周操作任务：

操作准备：从FTP下载上周的期中作业文件，用Flash打开后，锁定各图层，以免被误改。

1、在“标题”图层上方新建“校园图片”图层，时间轴面板如下所示：

2、将“学校.jpg”图片文件导入到库中，从库中拖入到舞台，放在“校园图片”图层的第1帧，并将其转

换为“校园图”图形元件，然后制作由右到左水平移动的的动作补间动画，长度为190帧。时间轴面板如下显示：

3、隐藏“校园图片”图层，在其上方新建“椭圆”图层，并在其第1帧画一个无边线的实心椭圆，调整

其大小并旋转方向，使其中心与背景的白色椭圆重合。时间轴面板如下显示：

4、将“椭圆”图层设为“遮罩层”，取消“校园图层”的隐藏，完成后的时间轴面板如下所示：

5、在“椭圆”图层上方新建“矩形”图层，并在第1帧画一个800*600的黑色无边框的矩形，与背景完全重合，右击将其转换为“矩形”图形元件。

6、在“矩形”图层的第5帧和第15帧插入关键帧，并设置第15帧的对象透明度为“0%”，并制作动作补间动画。

7．保存文件，并测试动画，将FLA的源文件和生成的swf文件一起上交到FTP。最后完成的时间轴面板如下（所有图层到190帧结束）：