乔家的儿女叶小朗金志文身高
第九章 Flash CC动画优化和发布
课题
9.1 动画发布
课时
教学内容
1、运用所学工具制作案例
2、掌握发布动画
教学目标
使用所需知识制作蝴蝶停在梅花上舞动效果案例
教学重点
运用所学工具制作案例
教学难点
通过学习掌握动画制作和动画发布，在今后的实际工作中能够应用
教学活动及主要语言
学生活动
一、创设意境，导入新课（设疑法、提问法）
导入：同学们，你们知道制作好的Flash动画作品进行发布
动画作品是如何将制作的
二、新课教学（讲解法、提问法、示范法）
步骤：
1．选择【文件】>【新建】命令，在“建新文档”选择ActionScript 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帧，插入关键帧。
兰州86警花（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 动画作品进行发布，从动画发布、网页发布和图片发布发布三种格式进行设置，对以后把自己的动画作品发布到网上有很大的帮助，必须熟练掌握。
学生有不懂的地方向老师提出问题，寻求解答。