中职 网页动画制作项目十四 小小童乐园 电子课件 .ppt
《中职 网页动画制作项目十四 小小童乐园 电子课件 .ppt》由会员分享,可在线阅读,更多相关《中职 网页动画制作项目十四 小小童乐园 电子课件 .ppt(70页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、中职 网页动画制作项目十四 小小童乐园 电子课件(高教版)中职 网页动画制作项目十四 小小童乐园 电子课件(高教版)项目十四 小小童乐园Flash网站的制作 任务一 制作网站首页动画 任务二 添加导航链接 任务三 发布网站 实战演练 利用框架制作网站本任务目标:运用补间动画制作首页动画。本任务重点:补间动画的应用。项目任务 上一页 下一页【开篇语】本实例综合前面学习的内容,设计了一个以学龄前儿童的学习和娱乐为主题的Flash网站。首先,将前面设计的蝴蝶动画、风车动画、文字动画和导航按钮等内容集成在一起制作一个网站的首页,再通过导航按钮的二级菜单命令,利用URL链接将电子贺卡、电子相册、Flas
2、h游戏和电子课件四个综合项目中的实例整合在一起,形成一个完整的Flash网站,为全书完成一个精彩的总结。项目任务 上一页 下一页一、新建Flash文件新建一个名为“小小童乐园”的Flash文件(ActionScript 2.0),执行【修改】【文档】命令,打开如图14-1所示“文档属性”对话框,设置文档宽度为800像素,高度为450像素,背景颜色为灰色,帧频为30fps,单击“确定”按钮完成设置。图 14-1修改文档属性项目任务 上一页 下一页二、导入背景图片将默认图层改名为“背景”,将光盘中“素材与实例project14素材小小童乐园”目录下的“首页.jpg”图片导入到舞台。调整图片使它正好
3、覆盖舞台,在第21帧处插入帧来延长画面。时间轴如图14-2(a)所示,“背景”图层效果如图14-2(b)所示。图 14-2 背景图层效果和时间轴项目任务 上一页 下一页三、添加蝴蝶关键帧动画在“背景”图层上新建一个名为“蝴蝶”的图层,执行【文件】【导入】【打开外部库】命令,导入光盘中“素材与实例project10实例”目录下“母亲节贺卡.fla”文件的库,将库中的“蝴蝶”影片剪辑元件拖入到舞台,设置蝴蝶的位置为x:12,y:202.8,宽度为131,高度为130。“蝴蝶”图层的效果和时间轴如图14-3所示。图 14-3蝴蝶图层的效果和时间轴项目任务 上一页 下一页四、添加风车补间动画在“蝴蝶”
4、图层上新建一个名为“风车”的图层,执行【文件】【导入】【打开外部库】命令,导入光盘中“素材与实例project08实例”目录下“儿童网站按钮.fla”文件的库,将库中的“风车转”影片剪辑元件拖入到舞台,设置它的位置为x:682,y:322,宽度为208,高度为199.6。再复制出一个“风车转”影片剪辑元件,设置第二个风车的位置为x:663.4,y:366.9,宽度为101,高度为99.7。利用“线条工具”在两个风车下面绘制出笔触颜色为绿色(#66B323),笔触为2的手柄。风车图层效果和时间轴如图14-4所示。项目任务 上一页 下一页图 14-4风车转动画项目任务 上一页 下一页五、添加文字动
5、画效果在“风车”图层上新建一个名为“文字”的图层,执行【文件】【导入】【打开外部库】命令,导入光盘中“素材与实例project14素材小小童乐园”目录下“动态文字素材.fla”文件的库,将库中“儿童快乐课堂”影片剪辑元件拖入到舞台。设置该元件的位置为x:265,y:273.35,宽度为64,高度为62。文字的位置和时间轴如图14-5所示。图 14-5 文字动画的位置和时间轴项目任务 上一页 下一页六、制作白云飘补间动画1.制作白云飘元件新建一个名为“白云飘”的影片剪辑元件,在图层1的第1帧中导入光盘“素材与实例project14素材小小童乐园”目录下的“白云.png”文件,设置白云的位置为x:
6、-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,在“文字”图层上新建一个名为“白云”的图层,将库中的“白云飘”元件拖入到舞台,
7、设置“白云飘”的位置为x:451.5,y:174.4,宽度为248,高度为161。“白云”图层的效果和时间轴如图14-7所示。图 14-7 白云图层效果和时间轴项目任务 上一页本任务目标:为按钮进行导航链接本任务重点:按钮链接页面脚本的编写。项目任务 下一页 上一页一、添加导航按钮在“白云”图层上新建一个名为导航栏的图层,执行【文件】【导入】【打开外部库】命令,导入光盘中“素材与实例project14素材小小童乐园”目录下“导航栏按钮.fla”文件的库,将库中的“导航栏下拉菜单”影片剪辑元件拖入舞台中。在属性面板中设置参数为x:462,y:226,宽度432,高度25。最后修改完的导航按钮位置
8、和时间轴如图14-8所示。图14-8 导航按钮的位置和时间轴项目任务 上一页 下一页二、制作实例网页1.制作生日贺卡网页打开光盘中“素材与实例project10实例”目录下“生日贺卡.fla”文件,执行【文件】【发布设置】命令,打开发布设置对话框,在HTML选项卡中按照图14-9所示的参数进行HTML网页发布设置,然后单击发布按钮,则在相同目录下除了生成swf文件,还生成了一个Html文件。图14-9 生日贺卡的发布参数设置项目任务 上一页 下一页2.制作其它实例的网页用相同的方法分别将母亲节贺卡、阳光宝贝、猫咪物语、智力拼图、砸仓鼠和卡通水果英语课件等六个fla文件发布生成html网页。然后
9、在“素材与实例project14素材小小童乐园”目录下新建一个名为example的文件夹,分别将前面发布的那7个实例动画的swf文件和html文件拷贝到example文件夹中(注意不能只拷贝html文件,一定要把swf文件也拷贝过去,否则不能显示)。项目任务 上一页 下一页三、添加URL链接 1.添加电子贺卡下拉菜单中的按钮脚本返回“小小童乐园”文件,在库中打开“下拉01”影片剪辑元件,选择生日贺卡按钮,单击鼠标右键执行【动作】命令,进入”脚本语言编辑”界面,输入控制代码,使鼠标单击该按钮时链接example目录下的“生日贺卡.html”文件。然后再为母亲节贺卡按钮添加动作脚本,使它链接到ex
10、ample目录下的“母亲节贺卡.html”文件。电子贺卡下拉菜单中两个按钮脚本代码的具体内容如图14-10所示。图 14-10 生日贺卡按钮和母亲节贺卡按钮的脚本代码项目任务 上一页 下一页2.添加电子相册下拉菜单中的按钮脚本在库中打开“下拉02”影片剪辑元件,选择阳光宝贝按钮,单击鼠标右键执行【动作】命令,进入”脚本语言编辑”界面,复制生日贺卡按钮中的脚本代码,将“生日贺卡”几个字改为“阳光小宝贝”。然后再为猫咪物语按钮的添加脚本,同样复制生日贺卡按钮中的脚本代码,将“生日贺卡”几个字改为“猫咪物语”。电子相册下拉菜单中两个按钮的脚本代码如图14-11所示。图 14-11 阳光宝贝按钮和猫咪
11、物语按钮的脚本代码项目任务 上一页 下一页3.添加益智园下拉菜单中的按钮脚本按照同样的方法,为益智园菜单中的智力拼图和砸仓鼠两个按钮添加脚本代码,如图14-12所示。图 14-12 智力拼图按钮和砸仓鼠按钮的脚本代码项目任务 上一页 下一页4.添加学习课件下拉菜单中的按钮脚本由于物理课件中凸透镜成像原理的知识不符合学龄前儿童,为此学习课件下拉菜单中只有英语课件一个按钮。为它添加的脚本如图14-13所示。图 14-13 英语按钮的动作脚本代码项目任务 上一页本任务目标:网站发布的设置本任务重点:如何发布网站。项目任务 上一页 下一页返回场景1,执行【文件】【发布设置】命令,打开发布设置对话框,在
12、HTML选项卡中按照图14-14所示的参数进行HTML网页发布设置,然后单击发布按钮,则在相同目录下生成一个swf文件和一个html文件。项目任务 上一页 下一页图 14-14 小小童乐园的发布参数设置 项目任务 上一页 下一页在发布设置的参数中,最重要的是尺寸,在不同大小和分辨率显示器中网页显示的尺寸会不同,实际操作时可以反复修改尺寸参数,以得到在浏览器中的显示最佳效果。最终发布后在浏览器中显示的效果如图14-15所示。图 14-15 小小童乐园的发布参数设置 项目任务 上一页本任务目标:利用框架和脚本制作网站。本任务重点:1.Flash中框架的应用。2.网页跳转脚本代码的编写。项目任务 上
13、一页 下一页【实战演练】为了将前面项目中设计的风格各异,尺寸不一的实例整合在一起,小小童乐园网站采用HTML链接的方式来实现网站的设计,下面我们再介绍另一种制作Flash网站的方法。在首页中使用统一的框架,具体的网站内容也显示在同一个框架中,并完全利用ActionScript脚本代码完成页面的跳转。网站制作的具体操作步骤如下:1.新建一个名为“速写天津”的Flash(ActionScript2.0)文件,设置文档尺寸,宽度为760像素,长度为515像素,背景色为黑色,帧频为12fps。项目任务 上一页 下一页2.新建一个名为“底1”的影片剪辑元件,利用矩形工具绘制一个填充颜色为灰色(#424F
14、58),宽度为145,高度为444.9,弧度为15的无边线圆角矩形。再建一个名为“底2”的影片剪辑元件,利用矩形工具绘制一个填充颜色为灰色(#353E4D),宽度为530,高度为445,弧度为15的无边线圆角矩形。按照通用的方法创建名为“底3”的影片剪辑元件,绘制一个填充颜色为灰色(#353E4D),宽度为530,高度为445,弧度为15的无边线圆角矩形。返回场景1,将默认图层改名为“矩形边框”。将库中的底1、底2和底3三个元件拖入到舞台的合适位置上,并在第120帧处插入关键帧来延长画面。矩形边框图层的效果和时间轴如图14-16所示。项目任务 上一页 下一页图 14-16 矩形边框图层效果和时
15、间轴项目任务 上一页 下一页3.在“矩形边框”图层上新建一个名为“内容区域底色”的图层,使用矩形工具绘制一个填充颜色为黑色,宽度为366,高度为425,弧度为10的无边线圆角矩形,设置矩形位置为x:211,y:45。“内容区域底色”图层效果和时间轴如图14-17所示。图 14-17 内容区域底色图层效果和时间轴项目任务 上一页 下一页4.新建一个名为“按钮底”的影片剪辑元件,利用矩形工具在舞台上绘制一个圆角矩形,它的填充类型为线性,颜色从左到右依次为橙色(#F99706)、黄色(#F9C806)、浅黄色(#FDFD35),弧度为10,笔触为0.1,颜色为灰白色(#CCCCCC)。设置矩形宽度为
16、98,高度为100,圆角矩形效果和渐变色参数设置如图14-18所示。图 14-18 圆角矩形效果和渐变色设置项目任务 上一页 下一页5.新建一个名为“印象”的影片剪辑元件进入元件编辑界面,将默认图层改名为“底色”,将库中的“按钮底”元件拖入舞台中,设置实例对象的位置为x:0,y:0,宽度为98,高度为100,并添加调整颜色滤镜,然后在第2帧处插入帧来延长画面。底图的效果、滤镜的参数和时间轴如图14-19所示。图 14-19 绘制按钮底滤镜效果项目任务 上一页 下一页6.在“底色”图层上新建一个名为“火焰”的图层,在第2帧处插入关键帧,执行【文件】【导入】【打开外部库】命令,导入光盘中“素材与实
17、例project14素材速写天津”目录下“火焰燃烧.fla”的库,将库中的sprite 17元件拖入到舞台,设置它的位置为x:-1.1,y:-21.5,宽度为189.9,高度为190。然后在“火焰”图层上新建一个名为“火焰遮罩”的图层,在第2帧处插入关键帧,利用矩形工具绘制一个与按钮底重合的宽度为98,高度为100,弧度为10的任意颜色的无边线矩形。在“火焰遮罩”图层上单击右键执行【遮罩层】命令,完成遮罩的制作。火焰遮罩的效果和时间轴如图14-20所示。项目任务 上一页 下一页图 14-20 火焰的遮罩效果和时间轴项目任务 上一页 下一页7.在“火焰遮罩”图层上新建一个名为“文字”的图层,用文
18、本工具输入文字“印象”,设置它的位置为x:-40,y:-35,字符系列为迷你简柏青,大小为38点,颜色为白色。再输入文字“天津”,设置它的位置为x:2,y:12,字符系列为華康圓緣斗雲體(P),大小为14点,颜色为白色。文字效果和时间轴如图14-21所示。图 14-21 文字效果和时间轴项目任务 上一页 下一页8.在“文字”图层上新建一个名为白色的图层,将光盘中“素材与实例project14素材速写天津”目录下的“白色.png”图片导入到舞台。设置它的位置为x:-44,y:-45。白色透明效果和时间轴如图14-22所示。图 14-22 白色透明效果和时间轴项目任务 上一页 下一页 9.在“白色
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 中职 网页动画制作项目十四 小小童乐园 电子课件 网页 动画 制作 项目 十四 小童 乐园 电子 课件
限制150内