9.2 网页发布（教案）-《Flash CC动画设计与制作》同步教学（劳动版）

课题 9.2网页发布 课时 1、运用所学知识制作案例 教学内容 2、掌握网页发布的技巧 3、掌握模拟网页加载的进度条的制作方法 教学目标 运用所学知识制作网页加载的进度条，掌握网页发布技巧 教学重点 运用所学知识制作进度条案例，并进行发布 教学难点 通过学习掌握网页的技巧，在今后的实际工作中能够应用 教学活动及主要语言 学生活动 一、 创设意境，导入新课（设疑法、提问法） 教师展示 导入：展示案例 图片，导 二、 新课教学（讲解法、提问法、示范法） 出本节课 步骤： 要学习的 1.选择【文件】>【新建】命令，在“建新文档”选择ActionScript 内容。吸 3.0。宽607像素，高400像素。 引学生兴 2.新建“元件1”，使用“矩形工具”绘制进度条，添加渐变颜 趣 色，如图所示。使用“渐变变形工具”，调整渐变方向和位置，如图 所示。 此部分主 要由老师 来讲解， 同时学生 也配合着 老师回答 一些常见 3.在第100帧插入“关键帧”，回到第1帧，使用“选择工具” 问题 点选进度条，打开“属性”，在“位置与大小”中把宽“1”。在第1-100 帧之间任意选一帧，右击鼠标，选择“创建形状补间”。如图所示。 10 4.新建“元件2”。选择“矩形工具”，打开“属性”，设置圆角 的矩形。在“矩形选项”栏中参数改为10，如图所示。绘制长条圆 角矩形，如图所示。 此时学生 回矩工具 应该注意 ,元射 听教师的 109 讲解，因 样女服 为此处是 新知识， 艳8G, 同时也应 ,地频 了03■ 积极回答 相应的问 题，进行 5.选择“矩形工具”，设置画笔边框为黑色颜色。在长条圆角矩 认真的思 形上方绘制一个缩小的长条圆角矩形，如图所示。然后把新绘制的 考 长条矩形删除，掏空中间，如图所示。 6.填充渐变颜色。点选矩形，打开颜色，设置白色到黑色的渐 学生听 变颜色，白色透明度设置为0，如图所示。使用“渐变变形工具”， 讲，笔记 调整渐变方向和位置，如图所示。 口重四 7.选择“图层1”，右击鼠标，弹出面板，选择“复制图层”。把 复制的图层等比例放大，填充灰色到白色的渐变颜色，如图所示。 使用“渐变变形工具”，调整渐变方向和位置。如图所示。 我色环 球性新实 第：口国四 5题的 圆轼性G % A和100% 8.新建“元件3”，使用“文本工具”，输入“1 oading”,如图 所示。可以根据字体设计需要在属性面板中修改参数，如图所示。 话 T 立木 世吾肤小 关明 万 两：5g 无制E 大：请 堂日应资口通 M他品士托网表苦字性 面)■ loading +听底 9.在第5帧插入关键帧，在“1 oading”后边加“”，如图所示。 用同样的方法给“loading”的后面加到6个点。如图所示。 Hloading 十 loading·· 811510152025 和w1中也石地 10.回到“场景1”，使用“矩形工具”绘制方形背景，填充灰色 到黑色径向渐变颜色，如图所示。新建“图层2”，把“元件1”拖 到舞台，调整好位置。接着把“元件2”拖到舞台，放在元件1上层， 调整位置与“元件1”位置匹配。再新建“图层3”，把“元件3”拖 到舞台，效果如图所示。 学生根据 教师要求 进行扩展 项目练习 l0.按键盘[Ctrl+Enter]测试效果。 11.选择【文件】>【发布设置】命令，选择HTL包装器，设置 参数。“大小(Z)”选择“百分比”，“缩放(C)”选择“精确匹配”， 如图所示。设置完后，点击“发布”按钮发布。可以得到“进度条” HTL文档，用网页浏览器打开，可以看到效果，效果如图所示。 川L会本安中 D司年s 104 三、能力扩展 结合进度表运动原理制作，运用传统补间动画，制作玻璃瓶水 满效果动画。 本章小结： 本章结合动画案例，重点讲述如何将制作的Flash动画作品进 行发布，从动画发布、网页发布和图片发布发布三种格式进行设置， 学生有不 对以后把自己的动画作品发布到网上有很大的帮助，必须熟练掌握。 懂的地方 向老师提 出问题， 寻求解