高二电子工业出版社二维动画设计软件应用（Flash CS4）课件项目十四 小小童乐园

项目十四 小小童乐园 ——Flash网站的制作 任务一 制作网站首页动画 任务二 添加导航链接 任务三 发布网站 实战演练 利用框架制作网站 目 录 任务一 制作网站首页动画 [本任务目标]: 运用补间动画制作首页动画。 [本任务重点]: 补间动画的应用。 项目任务 上一页 下一页 【开篇语】 本实例综合前面学习的内容，设计了一个以学龄前儿童的学习和娱乐为主题的Flash网站。首先，将前面设计的蝴蝶动画、风车动画、文字动画和导航按钮等内容集成在一起制作一个网站的首页，再通过导航按钮的二级菜单命令，利用URL链接将电子贺卡、电子相册、Flash游戏和电子课件四个综合项目中的实例整合在一起，形成一个完整的Flash网站，为全书完成一个精彩的总结。 项目任务 上一页 下一页 一、新建Flash文件 　　新建一个名为“小小童乐园”的Flash文件（ActionScript 2.0)，执行【修改】→【文档】命令，打开如图14-1所示“文档属性”对话框，设置文档宽度为800像素，高度为450像素，背景颜色为灰色，帧频为30fps，单击“确定”按钮完成设置。 图 14-1修改文档属性 项目任务 上一页 下一页 二、导入背景图片 　　将默认图层改名为“背景”，将光盘中“素材与实例→project14→素材→小小童乐园”目录下的“首页.jpg”图片导入到舞台。调整图片使它正好覆盖舞台，在第21帧处插入帧来延长画面。时间轴如图14-2（a）所示，“背景”图层效果如图14-2（b）所示。 图 14-2 背景图层效果和时间轴 项目任务 上一页 下一页 三、添加蝴蝶关键帧动画 　　在“背景”图层上新建一个名为“蝴蝶”的图层，执行【文件】→【导入】→【打开外部库】命令，导入光盘中“素材与实例→project10→实例”目录下“母亲节贺卡.fla”文件的库，将库中的“蝴蝶”影片剪辑元件拖入到舞台，设置蝴蝶的位置为x:12,y:202.8,宽度为131，高度为130。“蝴蝶”图层的效果和时间轴如图14-3所示。 图 14-3蝴蝶图层的效果和时间轴 项目任务 上一页 下一页 四、添加风车补间动画 　 　　在“蝴蝶”图层上新建一个名为“风车”的图层，执行【文件】→【导入】→【打开外部库】命令，导入光盘中“素材与实例→project08→实例”目录下“儿童网站按钮.fla”文件的库，将库中的“风车转”影片剪辑元件拖入到舞台，设置它的位置为x:682,y:322,宽度为208，高度为199.6。再复制出一个“风车转”影片剪辑元件，设置第二个风车的位置为x:663.4,y:366.9,宽度为101，高度为99.7。利用“线条工具”在两个风车下面绘制出笔触颜色为绿色（#66B323），笔触为2的手柄。风车图层效果和时间轴如图14-4所示。 项目任务 上一页 下一页 图 14-4风车转动画 项目任务 上一页 下一页 五、添加文字动画效果 　　 　　在“风车”图层上新建一个名为“文字”的图层，执行【文件】→【导入】→【打开外部库】命令，导入光盘中“素材与实例→project14→素材→小小童乐园”目录下“动态文字素材.fla”文件的库，将库中“儿童快乐课堂”影片剪辑元件拖入到舞台。设置该元件的位置为x:265,y:273.35,宽度为64，高度为62。文字的位置和时间轴如图14-5所示。 图 14-5 文字动画的位置和时间轴 项目任务 上一页 下一页 六、制作白云飘补间动画 1 . 制作白云飘元件 　　新建一个名为“白云飘”的影片剪辑元件，在图层1的第1帧中导入光盘 “素材与实例→project14→素材→小小童乐园”目录下的“白云.png”文件，设置白云的位置为x:-20，y:-166。在第400帧处插入关键帧，在其间创建补间动画，然后将第400帧的位置改为x：-846.3，y:-154.7。再新建一个图层，在第200帧处插入关键帧，并复制一个白云的元件对象，设置第二朵白云的位置为x:61，y:-162，宽度为196，高度为148。在第400帧处插入关键帧并创建补间动画，将第400帧中白云的位置改为x:-370，y:-152。两朵白云的位置和时间轴如图14-6所示。 项目任务 上一页 下一页 图 14-6 两朵白云的位置和时间轴 项目任务 上一页 下一页 2 . 添加白云飘元件 　　返回场景1，在“文字”图层上新建一个名为“白云”的图层，将库中的“白云飘”元件拖入到舞台，设置“白云飘”的位置为x:451.5,y:174.4,宽度为248，高度为161。“白云”图层的效果和时间轴如图14-7所示。 图 14-7 白云图层效果和时间轴 项目任务 上一页 [本任务目标]: 为按钮进行导航链接 [本任务重点]: 按钮链接页面脚本的编写