2023年7月14日发(作者：)

第九章 Flash CC动画优化和发布

课题

教学内容

教学目标

教学重点

9.1 动画发布

1、运用所学工具制作案例

2、掌握发布动画

课时

使用所需知识制作蝴蝶停在梅花上舞动效果案例

运用所学工具制作案例

通过学习掌握动画制作和动画发布，在今后的实际工作中教学难点

能够应用

教学活动及主要语言 学生活动

一、创设意境，导入新课（设疑法、提问法）

导入：同学们，你们知道制作好的Flash动画作品进行发布 学生回顾动画作品是如何将制作的 自己在日二、新课教学（讲解法、提问法、示范法） 常生活中步骤： 碰到的邮1．选择【文件】>【新建】命令，在“建新文档”选择Action票图形，Script 3.0 ，宽607像素，高400像素。 并随着教2．在库中，鼠标右击弹出面板，选择“新建元件”，类型选师的讲解择“图形”，命名“蝴蝶身”。使用“椭圆工具”绘制蝴蝶的身体，引导出、头部和触角，如图所示。 本节课要学习的内容。

3.新建元件，命名“蝴蝶翼”。在“图层1”中，使用“钢笔

工具”绘制蝴蝶翼的形状，填充“线性渐变”颜色，修改渐变方向

。新建“图层2”，使用“钢笔工具”绘制蝴蝶翼花纹，填充“线 性渐变”颜色。新建“图层3”，使用“刷子工具”绘制斑点，效果如图所示。

此时学生应该注意听和观看教师的讲解与操作，因为此处是新知识，同时也应积极回答相应的问题，进行认真的思考

学生听讲，笔记

4.制作蝴蝶飞动画

（1）新建元件，命名“蝴蝶”，类型选择“影片剪辑”。把“蝴蝶身”元件拖到“蝴蝶”元件的“图层1”中。新建“图层2”，把“蝴蝶翼”元件拖进“图层2”。新建“图层3”，选择“图层2”的关键帧，右击鼠标，选择“复制帧”，把复制的帧粘贴到“图层3”，然后在菜单栏中【修改】>【变形】>【水平翻转】命令，调整位置，蝴蝶制作完成，效果如图所示。

（2）选择“图层2”，在第1帧，点选蝴蝶右翼，打开“属性”，修改蝴蝶翼的参数。选择“图层3”，在第1帧，点选蝴蝶左翼，打开“属性”，修改蝴蝶左翼“X”的参数为负值。制作出蝴蝶翼收起来状态，如图所示。

学生听讲，笔记

（3）选择“图层2”，在第15帧插入关键帧，点选蝴蝶右翼，打开“属性”，修改蝴蝶翼宽的参数。选择“图层3”，在第15帧插入关键帧，点选蝴蝶左翼，打开“属性”，宽的参数与蝴蝶右翼参数一样。制作出蝴蝶翼展开的状态，如图所示。

（4）选择“图层2”、“图层3”的第20帧，插入关键帧。

（5）选择“图层2”、“图层3”的第21帧，插入空白关键帧，选择“图层2”、“图层3”的第1帧，复制粘贴到第21帧。

（6）选择“图层2”、“图层3”的第24帧，插入空白关键帧。选择“图层2”、“图层3”的第20帧，复制粘贴到第24帧。然后分别给“图层2”、“图层3”的关键帧动画添加“创建传统补间”，如图所示。

学生听讲，笔记

学生思考、讨论

图9-14

5.新建元件，命名“树枝”，使用“钢笔工具”绘制树枝，填充褐色，删除边框，如图所示。

学生根据教师规定动手制作案例

6.新建元件，命名“花苞”，使用“钢笔工具”在“图层1”绘制花瓣，填充粉红到白色“线性渐变”颜色。使用“渐变变形工具”调整渐变角度。新建“图层2”，使用“钢笔工具”绘制花托，填充绿色，删除边框，效果如图所示。

7.新建元件，命名“花1”，使用“钢笔工具”在“图层1”绘制花托，填充深绿到浅绿的“径向渐变”颜色。新建“图层2”，使用“钢笔工具”绘制花瓣，填充粉色到白色的“径向渐变”颜色，效果如图所示。 8.新建元件，命“名花2”，使用“钢笔工具”绘制花托，填充深绿到浅绿的“径向渐变”颜色。新建“图层2”，使用“钢笔工具”绘制花瓣，填充粉色到白色的“径向渐变”颜色。新建“图层3”，使用“钢笔工具”绘制花瓣，填充粉色到白色的“径向渐变”颜色，效果如图所示。 9.新建元件，命名“梅花”，类型选择“影片剪辑”。把制作好的“树枝”、“花1”、“花2”、“花苞”元件，拖进“梅花”元件中，组合成一颗梅花树，如图所示。 10.回到“场景1”，选择“图层1”，使用“矩形工具”绘制方形背景，填充米黄色。新建“图层2”，分别把“梅花”元件、“蝴蝶”元件拖到舞台。再复制“梅花”元件，使用“任意变形工具”缩小，点选上梅花，按键盘快捷键[Ctrl+向下箭头]下移一层，如图所示。

11.新建“图层3”，把“花1”元件拖进来，调整花朵大小，放在树枝上，位置自定。制作花朵掉落下来的效果。在第30帧插入关键帧，把花朵往下移到画面外，旋转一下角度。添加“创建传统补间”命令。分别在图层1、图层2的第30帧插入帧。如图所示。

12.发布动画。【文件】>【发布设置】命令，打开【发布设置】对话框，如图所示。发布选择Flash（.swf）。从中可以对swf进行设置。在目标选项框里可以选择播放器版本。输出文件里可以给文件命名和选择发布的位置。JPEG品质是设置动画的图形质量，数值为0-100，根据个人需要设置。完成一系列设置，在对话框下方按“发布”按钮进行发布。

三、能力扩展

综合运用前面所写知识，制作蝴蝶在梅花林中的飞舞动画。 课题

9.2 网页发布

课时

教学内容

教学目标

教学重点

教学难点

1、运用所学知识制作案例

2、掌握网页发布的技巧

3、掌握模拟网页加载的进度条的制作方法

运用所学知识制作网页加载的进度条，掌握网页发布技巧

运用所学知识制作进度条案例，并进行发布

通过学习掌握网页的技巧，在今后的实际工作中能够应用

教学活动及主要语言 学生活动

一、创设意境，导入新课（设疑法、提问法） 教师展示导入：展示案例 图片，导二、新课教学（讲解法、提问法、示范法） 出本节课步骤： 要学习的1．选择【文件】>【新建】命令，在“建新文档”选择ActionScript 内容。吸3.0 。宽607像素，高400像素。 引学生兴2．新建“元件1”，使用“矩形工具”绘制进度条，添加渐变颜趣

色，如图所示。使用“渐变变形工具”，调整渐变方向和位置，如图

所示。

此部分主要由老师来讲解，同时学生也配合着老师回答

一些常见3.在第100帧插入“关键帧”，回到第1帧，使用“选择工具”问题

点选进度条，打开“属性”，在“位置与大小”中把宽“1”。在第1-100

帧之间任意选一帧，右击鼠标，选择“创建形状补间”。如图所示。

4.新建“元件2”。选择“矩形工具”，打开“属性”，设置圆角 的矩形。在“矩形选项”栏中参数改为10，如图所示。绘制长条圆

角矩形，如图所示。

此时学生应该注意

5.选择“矩形工具”，设置画笔边框为黑色颜色。在长条圆角矩听教师的形上方绘制一个缩小的长条圆角矩形，如图所示。然后把新绘制的讲解，因长条矩形删除，掏空中间，如图所示。 为此处是新知识，同时也应

积极回答相应的问题，进行

认真的思6.填充渐变颜色。点选矩形，打开颜色，设置白色到黑色的渐考

变颜色，白色透明度设置为0，如图所示。使用“渐变变形工具”，

调整渐变方向和位置，如图所示。

学生听讲，笔记

7.选择“图层1”,右击鼠标，弹出面板，选择“复制图层”。把

复制的图层等比例放大，填充灰色到白色的渐变颜色，如图所示。

使用“渐变变形工具”，调整渐变方向和位置。如图所示。

8.新建“元件3”，使用“文本工具”，输入“loading”, 如图

所示。可以根据字体设计需要在属性面板中修改参数，如图所示。

9.在第5帧插入关键帧，在“loading”后边加“·”，如图所示。

用同样的方法给“loading”的后面加到6个点。如图所示。

学生根据教师要求进行扩展项目练习

10.回到“场景1”，使用“矩形工具”绘制方形背景，填充灰色到黑色径向渐变颜色，如图所示。新建“图层2”，把“元件1”拖到舞台，调整好位置。接着把“元件2”拖到舞台，放在元件1上层，调整位置与“元件1”位置匹配。再新建“图层3”，把“元件3”拖到舞台，效果如图所示。

10.按键盘[Ctrl+Enter]测试效果。

11.选择【文件】>【发布设置】命令，选择HTML包装器，设置参数。“大小（Z）”选择“百分比”，“缩放（C）”选择“精确匹配”，如图所示。设置完后，点击“发布”按钮发布。可以得到“进度条”HTML文档，用网页浏览器打开，可以看到效果，效果如图所示。

三、能力扩展

结合进度表运动原理制作，运用传统补间动画，制作玻璃瓶水满效果动画。

本章小结：

本章结合动画案例，重点讲述如何将制作的Flash

动画作品进行发布，从动画发布、网页发布和图片发布发布三种格

学生有不式进行设置，对以后把自己的动画作品发布到网上有很大的帮助，必须熟练掌握。

懂的地方向老师提出问题，寻求解答。

课题

教学内容

教学目标

教学重点

9.3 图片发布

1、运用所学工具制作案例

2、掌握图片发布

课时

使用所需知识制作图片发布案例

运用所学工具制作案例

通过学习掌握图片制作和图片教学难点

发布，在今后的实际工作中能够应用

教学活动及主要语言

一、创设意境，导入新课（设疑法、提问法）

导入：同学们，你们知道制作好的Flash图片作品进行发布？

动画作品是如何将制作的

二、新课教学（讲解法、提问法、示范法）

步骤：

１. 在菜单栏中选择 【 文件】 →【 新建】命令,弹出

“ 新建文档”对话框,在 “ 新建文档 “ 对话框中选择 “ A c t

i o n S c r i p t ３ .０ ” ,将分辨率设置为 “２ ８ ０×４ ０

０ 像素” ,单击“ 确定”按钮,建立新文档.

２.选择“颜色”面板,把颜色模式改为线性渐变 ,颜色选择浅蓝色,如图所示.

３.用“矩形工具”在舞台绘制一个渐变的天空,用渐变变形工具”调整其方向,如图所示.

４.新建“云朵”图层,使用钢笔工具”在舞台中绘制出云朵,复制绘制好的云朵,并调整其大小;新建太阳”图层,使用绘制工具绘制出太阳,如下图所示.

学生活动

学生回顾自己在日常生活中碰到的邮票图形，并随着教师的讲解，引导出本节课要学习的内容。

此时学生应该注意听和观看教师的讲解与操作

５.新建“草”图层,使用钢笔工具”绘制出简单的草坪,用同，因为此样的方法绘制出“ 山” ,如上图所示. 处是新知６.选择【文件】→【发布设置】命令”发布设置”对话框中识，同时勾选“J P E G 图像” ,并选择保存路径。 也应积极７.单击”发布”按钮,在保存路径中即出现发布的图片和网页回答相应文件,单击 “ 打开”按钮,即可在网页上查看发布的图片. 的问题， 进行认真三、能力扩展 的思考

综合运用前面所写知识，制作如下图所示的 P NG 网页图像。

学生听讲，笔记

学生听讲，笔记

学生听讲，笔记

学生思考、讨论

学生根据教师规定动手制作案例