永宁中学八年级信息技术Flash教案.docx

永宁中学八年级信息技术Flash教案.docx

《永宁中学八年级信息技术Flash教案.docx》由会员分享，可在线阅读，更多相关《永宁中学八年级信息技术Flash教案.docx（41页珍藏版）》请在冰豆网上搜索。

永宁中学八年级信息技术Flash教案

《Flash8.0》

信息技术八年级

教案

任教班级：

初二年级1278910

学期：

2012学年下学期

任课教师：

朱红卫

2012年6月

备课节次2第1节

FLASH简介概述

教学目的：

1、动画的应用领域

2、了解动画的制作流程。

重点：

动画的制作流程

难点：

动画的制作流程

教学方法：

讲授法

教学过程:

讲授新知:

一、动画的应用领域

Flash是美国的MACROMEDIA公司于1999年6月推出的优秀网页动画设计软件。

它是一种交互式动画设计工具，用它可以将音乐，声效，动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。

大家知道，HTML语言的功能十分有限，无法达到人们的预期设计，以实现令人耳目一新的动态效果，在这种情况下，各种脚本语言应运而生，使得网页设计更加多样化。

然而，程序设计总是不能很好地普及，因为它要求一定的编程能力，而人们更需要一种既简单直观又功能强大的动画设计工具，而Flash的出现正好满足了这种需求。

FLASH的特点

1.使用矢量图形和流式播放技术。

与位图图形不同的是，矢量图形可以任意缩放尺寸而不影响图形的质量；流式播放技术使得动画可以边播放边下载，从而缓解了网页浏览者焦急等待的情绪。

2.通过使用关键帧和图符使得所生成的动画（.swf）文件非常小，几K字节的动画文件已经可以实现许多令人心动的动画效果，用在网页设计上不仅可以使网页更加生动，而且小巧玲珑下载迅速，使得动画可以在打开网页很短的时间里就得以播放。

3.把音乐，动画，声效，交互方式融合在一起，越来越多的人已经把Flash作为网页动画设计的首选工具，并且创作出了许多令人叹为观止的动画（电影）效果。

而且在Flash4.0的版本中已经可以支持MP3的音乐格式，这使得加入音乐的动画文件也能保持小巧的‘身材’。

4.强大的动画编辑功能使得设计者可以随心所欲地设计出高品质的动画，通过ACTION和FSCOMMAND可以实现交互性，使Flash具有更大的设计自由度，另外，它与当今最流行的网页设计工具Dreamweaver配合默契，可以直接嵌入网页的任一位置，非常方便。

总之，Flash已经慢慢成为网页动画的标准，成为一种新兴的技术发展方向。

二、了解动画制作流程

1、前期策划

在制作动画之前，首先应该想清楚制作这个动画要达到什么样的目的和效果，通过怎样的手法制作动画的角色和形工等。

2、素材搜集

前期策划完成后，就可以对动画中需要使用的素材进行搜集。

在搜集时应用注意目的性，主要根据动画策划的所规划好的素材类型进行搜集，这样能有效地节约时间和精力。

3、动画制作

Flash动画的制作中很关键的一步就是制作动画的过程，在对动画进行前期策划和素材搜集之后，动画的最终品质将很大程度上取决于动画的制作过程。

4、后期测试与发布

动画制作完成后，需对动画进行测试，以保证动画作品的最终质量。

巩固练习:

1、动画有能应用到哪些领域？

2、Flash动画的制作过程大致可分为哪些？

小结：

完成一部优秀的Flash动画作品需要经过很多的制作环节，其中每一环节的质量都直接关系到作品的最终效果，因此应该认真地把握每个环节的制作。

作业：

上机熟悉Flash8.0的工作环境

备课节次2第2节

动画的基本创作流程

一、要求掌握以下实习内容：

1、动画创作的通用工作流程

2、如何新建文档和设置文档的属性

3、如何导入、调整、转换图形素材

4、插入普通帧和关键帧并设置帧的类型

5、创建补间动画

6、绘图纸外观和编辑多帧的使用

7、测试和发布FLASH影片

二、实例演练——模拟客机从滑行到起飞以至降落的全过程

操作步骤：

1、新建FLASH文档。

2、导入背景图像。

（调整图像与舞台同样大小，X730，Y244，并将图层名称改为“背景”。

3、新建图层，改名为“飞机”，导入飞机素材，将对象转换为元件。

4、在“背景”层的130帧处插入帧。

（F5键）

5、在“飞机”层的第10、30、70、90、110帧处分别插入关键帧。

并调整飞机在各点的方向。

在130帧处插入帧。

6、设置各帧标签。

7、在各帧之间分别创建补间动画。

8、在1-10帧设置加速。

90-110处设置减速。

（负值表示加速，正值表示减速）。

9、测试影片。

（2种方法）

10、导出和发布影片。

三、练一练

1、尝试绘制球体，插入帧和关键帧来模仿球体弹跳的过程。

备课节次2第3节

图形的绘制和编辑

一、教学内容：

1、用钢笔工具绘制心形操作流程

概念：

贝赛尔曲线：

用钢笔工具绘制的矢量图形，图形具有节点，并且这些线条的角度、长度、曲度是可以通过节点上的手柄进行调节的。

操作步骤：

1）新建FLASH文档，调整舞台大小，设置背景色为蓝色。

调出标尺，拖出一条辅助线。

2）在工具箱中选择钢笔工具，在辅助线的下部，单击鼠标不放往舞台左上方拖出一根方向线。

3）将鼠标对齐辅助线，在上方向右下角拖出一条方向线。

4）回到起始锚点，往左下方拖，封闭图形。

5）使用部分选取工具，单击节点，按下ALT键拖动右侧手柄，调整成心形。

（注意，按ALT键是只控制一侧）

6）用颜料桶为心形上色。

并删除线条色。

练习：

利用钢笔工具绘制苹果的形状。

2、创建形状补间动画

区分：

形状补间动画：

在一个关键帧中绘制一个形状，然后在另一个关键帧中更改该形状或绘制另一个形状，FLASH根据二者之间的形状来创建的动画称为“形状补间动画”。

它可以实现两个图形之间颜色、形状、太小、位置的相互变化。

时间帧面板的背景色变为淡绿色。

如果是对象是图形元件、按钮、文字则必先“打散”。

动作补间动画：

在一个关键帧上放置一个元件，然后在另一个关键帧改变这个元件的大小、颜色、位置、透明度等。

FLASH根据二者之间的帧创建的动画称为“动作补间动画”。

构成动作动画的元素是元件，不能是形状，只有把形状“组合”或者转换成“元件”后才可以做“动作补间动画”。

时间帧面板的背景色变为淡紫色。

1）选择心形，按F8键将其转换为一个影片剪辑，名为“heart”。

2）双击进入影片剪辑，在第5帧插入一个关键帧，使用任意变形工具按下ALT从上下往中间缩小，（两个方向同时缩小）

3）选择该层第1帧，调出“属性”检查器，在补间列表中选择“形状”

4）保存。

练习：

制作一个红色圆形变为蓝色多边形的动画。

备课节次2第4节

图形的绘制和编辑

一、教学内容：

1、用钢笔工具绘制心形操作流程

概念：

贝赛尔曲线：

用钢笔工具绘制的矢量图形，图形具有节点，并且这些线条的角度、长度、曲度是可以通过节点上的手柄进行调节的。

操作步骤：

1）新建FLASH文档，调整舞台大小，设置背景色为蓝色。

调出标尺，拖出一条辅助线。

2）在工具箱中选择钢笔工具，在辅助线的下部，单击鼠标不放往舞台左上方拖出一根方向线。

3）将鼠标对齐辅助线，在上方向右下角拖出一条方向线。

4）回到起始锚点，往左下方拖，封闭图形。

5）使用部分选取工具，单击节点，按下ALT键拖动右侧手柄，调整成心形。

（注意，按ALT键是只控制一侧）

6）用颜料桶为心形上色。

并删除线条色。

练习：

利用钢笔工具绘制苹果的形状。

2、创建形状补间动画（11-12节）

区分：

形状补间动画：

在一个关键帧中绘制一个形状，然后在另一个关键帧中更改该形状或绘制另一个形状，FLASH根据二者之间的形状来创建的动画称为“形状补间动画”。

它可以实现两个图形之间颜色、形状、太小、位置的相互变化。

时间帧面板的背景色变为淡绿色。

如果是对象是图形元件、按钮、文字则必先“打散”。

动作补间动画：

在一个关键帧上放置一个元件，然后在另一个关键帧改变这个元件的大小、颜色、位置、透明度等。

FLASH根据二者之间的帧创建的动画称为“动作补间动画”。

构成动作动画的元素是元件，不能是形状，只有把形状“组合”或者转换成“元件”后才可以做“动作补间动画”。

时间帧面板的背景色变为淡紫色。

7）选择心形，按F8键将其转换为一个影片剪辑，名为“heart”。

8）双击进入影片剪辑，在第5帧插入一个关键帧，使用任意变形工具按下ALT从上下往中间缩小，（两个方向同时缩小）

9）选择该层第1帧，调出“属性”检查器，在补间列表中选择“形状”

10）保存。

区别之处

动作补间动画

形状补间动画

在时间轴上的表现

淡紫色背景加长箭头

淡绿色背景加长箭头

组成元素

影片剪辑、图形元件、按钮

形状，如果使用图形元件、按钮、文字，则必先打散再变形。

完成的作用

实现一个元件的大小、位置、颜色、透明等的变化。

实现二个形状之间的变化，或一个形状的大小、位置、颜色等的变化。

练习：

制作一个红色圆形变为蓝色多边形的动画。

备课节次2第5节

制作会飞的心

操作步骤：

1、使用椭圆工具绘制一个椭圆，按照上面的方法，有规律地绘制四个椭圆，并错开。

2、使用选择工具将对象原左侧区域圈选，按DELETE，删除左侧区域。

3、使用选择工具，拖出一个翅膀样子。

4、选择翅膀形状，按F8键将其转换为一个名为“wing”的图形元件，再次按F8键转换该图形元件为一个名为“wings”的影片剪辑。

形成一个元件嵌套。

5、双击“wings”影片剪辑实例，进入后对“wing”图形元件实例进行编辑。

选择任意变形工具，将图形元件实例翅膀旋转呈垂下状态，并拖动中心点至左侧。

6、在该层第10帧插入一个关键帧，使用任意变形工具将翅膀抬起。

回到第1帧，“创建补间动画”。

7、回到场景1，选择影片剪辑实例“wings”确定中心点在心形中间，CTRL+T调出变形面板，产生一个翅膀副本。

选择两个翅膀，CTRL+将对象移至下层，另外将三个对象一起选定，按F8键，把三者转换为”flyheart”,将三者组为一个更高级的嵌套。

备课节次2第6节

图形绘制

一、教学目的：

1、掌握椭圆工具的使用

2、掌握箭头工具的使用

3、灵活运用变形工具及变形面板

4、掌握混色器中的色调

二、教学内容及步骤：

（一）绘制树叶

1、调整舞台属性

2、选择椭圆工具，设置笔触颜色为淡绿，填充颜色为深绿，在舞台中间先画一个椭圆。

3、按下CTRL键，将椭圆拖出一个叶尖，并调整好叶子的形态。

4、用直线工具依次画好叶脉。

5、将画好的叶子复制多个。

6、使用变形工具调整好各叶子的形态。

7、将树叶转成组件。

练习：

1、画一片树叶

3、画一株树。

（注意：

画树干使用刷子工具）

（二）绘制花朵

1、调整舞台大小

2、使用椭圆工具，采用线性填充，绘一个椭圆。

3、将中心点移至下面。

4、按CTRL+T打开变形面板，将对象复制并应用变形，成为一朵花的形状。

5、将对象转成组件。

6、在60帧处插入一个关键帧。

7、创建运动动画，并调整旋转状态为顺时针或逆时针。

8、新建一个图层，使用矩形工具画好一个杆子。

9、移至对象的中心。

练习：

绘制大风车动画片的图标。

备课节次2第7、8节

文字的处理

一、教学目的：

1、掌握工具箱中的文字工具的使用

2、掌握如何调整文字的格式

3、掌握七彩字的制作

4、掌握透视字的制作

5、掌握波浪字的制作

6、]掌握立体字的制作

7、掌握霓红灯字的制作

二、教学内容及步骤：

（一）七彩字的制作

1、选择文本工具在舞台中输入“圣诞节快乐”

2、选择箭头工具，调出属性面板，调整大小和方向。

3、转换为图形，按CTRL+B两次。

4、选中文字，选择填充颜色中的七彩颜色。

然后填充即可。

练习

（二）透视字的制作

1、选择文本工具在舞台中输入

祝福：

圣诞节快乐

1、选中，将文字打散，填充七彩颜色

2、选择变形工具，在选项工具组里选择扭曲，调整字的形状。

练习

（三）波浪字的制作

1、选择文本工具输入“你是我心中的唯一”

2、将文字打散

3、选择变形工具，在选项组里选择封套。

4、然后利用点来调整文字成波浪形状。

练习

（四）立体文字的制作

1、选择文本工具输入“一”

2、选择，打散。

再复制一个。

调整。

填充成另外一种颜色。

3、使用放大镜放大，使用箭头工具调整。

练习将自己的名字制作成立体文字。

（五）霓红灯字的制作

1、选择文本工具输入“元旦快乐”

2、打散。

3、将线条颜色填上另外一种颜色。

将填充颜色删除。

4、选择文字。

执行修改——变形——将线条转化为填充。

5、选择文字。

执行修改——变形——将柔化填充边缘。

练习

备课节次2第9、10节

创建文字变色效果

1.创建文字变色效果

2.创建文字改变大小效果

3.创建文字改变透明度效果

4.制作步骤

（1）创建影片文档

5.1、设置影片文档属性

6.执行【文件】|【新建】命令，在弹出的面板中选择【常规】|【Flash文档】选项后，点击【确定】按钮，新建一个影片文档，在【属性】面板上设置文件大小为520*60象素，【背景色】为白色。

如图3-4-8所 示。

图3-4-8启航Banner文档属性

2、设置背景图层

执行【文件】|【导入到场景】命令，将本实例中名为“启航banner.bmp”图片导入到场景中，在第205帧处按F5，加普通帧，如图3-4-9所示。

图3-4-9设置背景

（2）创建元件

1、创建“电脑动画”元件

执行【插入】|【新建元件】命令，新建一个图形元件，名称为“电脑动画”。

在“新元件编辑窗口”中选择第一帧，单击工具栏上的文字工具

，在场景中点击一下，然后在【属性】面板上设置【文本类型】为静态文本、【字体】为隶书、【字体大小】32、【颜色】#FF9900，最后在场景中写下“电脑动画”四个字，如图3-4-10所示。

2、创建“网页设计”元件

执行【插入】|【新建元件】命令，新建一个图形元件，名称为“网页设计”。

在编辑窗口选择第一帧，按上面的方法,在场景中写下“网页设计”四个字，参数同上。

3、创建“图象制作”元件

执行【插入】|【新建元件】命令，新建一个图形元件，名称为“图象制作”。

在编辑窗口选择第一帧，按上面的方法，在场景中写下“图象制作”四个字，参数同上。

4、创建“闪客启航”元件

执行【插入】|【新建元件】命令，新建一个图形元件，名称为“闪客启航”。

在编辑窗口选择第1帧，单击工具栏上的文字工具

，在【属性】面板上设置【文本类型】为静态文本、【字体】为隶书、【字体大小】为50、【颜色】为#FF6600,在场景中写下“闪客沙龙”四个字，如图3-4-11所示。

5、创建“语音教学”

执行【插入】|【新建元件】命令，新建一个图形元件，名称为“语音教学”。

在编辑窗口选择第1帧，单击工具栏上的文字工具

，文字属性不变,在场景中写下“语音教学”四个字。

（3）创建动画

1、创建“电脑动画”文字效果在场景中新建一个图层。

先在第1帧中，把库里的“电脑动画”元件拖到场景的外面，在【属性】面板上设置元件的【W】值为300，【H】值为76,【X】值为47，【Y】值为27,【Alpha】值为3％，然后在第20帧处加关键帧，把“电脑动画”元件拖到场景的中间，设置【属性】面板的【W】值为141,【H】值为36，【X】值为127，【Y】值为12,【颜色】选项为“无”。

图3-4-12是“电脑动画”元件在【属性】面板的第1、20帧处的位置设置。

在第28帧处加关键帧，不改参数，这是为了给该文字对象一个停顿，让别人能看清楚。

在第48帧加关键帧，设置【属性】面板上参数【W】值84，【H】值21,【X】值9,【Y】值3，【颜色】选色调，黑色。

在第1和第28帧处分别动建立动作补间动画，在第205帧添加普通帧使帧内容延续。

2、创建“网页设计”文字效果。

在场景中新建一个图层。

在此图层的第49帧加关键帧，把库里的“网页设计”元件拖到场景的外面，在【属性】面板上设置元件的【W】值为300，【H】值为83,【X】值为43，【Y】值为20,【Alpha】值为6％,然后在第71帧处加关键帧，把“网页设计”元件拖到场景的中间，设置【属性】面板的【W】值为135,【H】值为36，【X】值为131，【Y】值为11,【颜色】选项为“无”，如图3-4-13所示。

图3-4-13“网页设计”元件在第49、71帧的位置

再在第78帧处加关键帧，不改参数，在第97帧加关键帧，设置【属性】面板上参数【W】值81，【H】值22,【X】值18,【Y】值20，【颜色】选色调，黑色。

最后在第49和第78帧处分别建立动作补间动画，在第205帧添加普通帧。

3、创建“图象制作”文字效果。

在场景中新建一个图层。

先在第98帧加关键帧，把库里的“图象制作”元件拖到场景的外面，在【属性】面板上设置元件的【W】值为360，【H】值为90,【X】值20,【Y】值23，【Alpha】值为5％,然后在第119帧处加关键帧，把“图象制作”元件拖到场景的中间，设置【属性】面板的【W】值为144,【H】值为36，【X】值128,【Y】值10，【颜色】选项为“无”,再在第126帧处加关键帧，不改参数，在第146帧加关键帧，设置【属性】面板上参数【W】值86，【H】值22,【X】值27,【Y】值35，【颜色】选色调，黑色，最后在第98和第126帧处分别建立动作补间动画，在第205帧添加普通帧，如图3-4-14所示。

图3-4-14“图象制作”元件在第126、146帧的位置

4、创建“闪客启航”文字效果。

在场景中新建一个图层。

先在第147帧处加关键帧，把库里的“闪客启航”元件拖到场景的外面，在【属性】面板上设置元件的【W】值为487，【H】值为124,【X】值-28,【Y】值-144，【Alpha】值为3％，然后在第166帧处加关键帧，把“闪客启航”元件拖到场景的中间，设置【属性】面板的【W】值为212,【H】值为54，【X】值123,【Y】值5，【颜色】选项无。

最后在第147帧处建立动作补间动画，在第173帧添加普通帧。

5、创建“语音教学”文字效果。

在场景中新建一个图层。

先在第174帧处加关键帧，把库里的“语音教学”元件拖到场景的外面，在【属性】面板上设置元件的【W】值为450，【H】值为115,【X】值-20,【Y】值29，【Alpha】值为3％。

然后在第194帧处加关键帧，把“语音教学”元件拖到场景的中间，设置【属性】面板的【W】值为210,【H】值为54，【X】值123,【Y】值3，【颜色】选项无。

最后在第174帧处动作建立补间动画，顺时钟旋转一圈，在第205帧添加普通帧，如图3-4-15所示。

图3-4-15“语音教学”元件在第174帧的【属性】面板参数

完成后的部分时间线情况如图3-4-16所示。

在实际制作中，本例中各图形元件的大小、位置均不必拘束于书中所示的数字，您可自行调整至满意为止。

备课节次2第10、11节

遮罩动画

在Flash8.0的作品中，我们常常看到很多眩目神奇的效果，而其中不少就是用最简单的“遮罩”完成的，如水波、万花筒、百页窗、放大镜、望远镜……等等。

那么，“遮罩”如何能产生这些效果呢？

在本节，我们除了给大家介绍“遮罩”的基本知识，还结合我们的实际经验介绍一些“遮罩”的应用技巧，最后，提供二个很实用的范例，以加深对“遮罩”原理的理解。

在Flash8.0中实现“遮罩”效果有二种做法，一种是用补间动画的方法，一种是用actions指令的方法，在本节中，我们只介绍第一种做法。

1．遮罩动画的概念

（1）什么是遮罩

“遮罩”，顾名思义就是遮挡住下面的对象。

在Flash8.0中，“遮罩动画”也确实是通过“遮罩层”来达到有选择地显示位于其下方的“被遮罩层”中的内容的目地，在一个遮罩动画中，“遮罩层”只有一个，“被遮罩层”可以有任意个。

（2）遮罩有什么用

在Flash8.0动画中，“遮罩”主要有2种用途，一个作用是用在整个场景或一个特定区域，使场景外的对象或特定区域外的对象不可见，另一个作用是用来遮罩住某一元件的一部分，从而实现一些特殊的效果。

2．创建遮罩的方法

（1）创建遮罩

在Flash8.0中没有一个专门的按钮来创建遮罩层，遮罩层其实是由普通图层转化的。

你只要在要某个图层上单击右键，在弹出菜单中把“遮罩”前打个勾，该图层就会生成遮罩层，“层图标”就会从普通层图标

变为遮罩层图标

，系统会自动把遮罩层下面的一层关联为“被遮罩层”,在缩进的同时图标变为

，如果你想关联更多层被遮罩，只要把这些层拖到被遮罩层下面就行了，如图3-5-1所示。

图3-5-1多层遮罩动画

（2）构成遮罩和被遮罩层的元素

遮罩层中的图形对象在播放时是看不到的，遮罩层中的内容可以是按钮、影片剪辑、图形、位图、文字等，但不能使用线条，如果一定要用线条，可以将线条转化为“填充”。

被遮罩层中的对象只能透过遮罩层中的对象被看到。

在被遮罩层，可以使用按钮，影片剪辑，图形，位图，文字，线条。

（3）遮罩中可以使用的动画形式

可以在遮罩层、被遮罩层中分别或同时使用形状补间动画、动作补间动画、引导线动画等动画手段，从而使遮罩动画变成一个可以施展无限想象力的创作空间。

3．应用遮罩时的技巧

遮罩层的基本原理是：

能够透过该图层中的对象看到“被遮罩层”中的对象及其属性（包括它们的变形效果），但是遮罩层中的对象中的许多属性如渐变色、透明度、颜色和线条样式等却是被忽略的。

比如，我们不能通过遮罩层的渐变色来实现被遮罩层的渐变色变化。

1.要在场景中显示遮罩效果，可以锁定遮罩层和被遮罩层。

2.可以用“AS”动作语句建立遮罩，但这种情况下只能有一个“被遮罩层”，同时，不能设置_alpha属性。

3.不能用一个遮罩层试图遮蔽另一个遮罩层。

4.遮罩可以应用在gif动画上。

5.在制作过程中，遮罩层经常挡住下层的元件，影响视线，无法编辑，可以按下遮罩层时间轴面板的显示图层轮廓按钮

，使之变成

，使遮罩层只显示边框形状，在种情况下，你还可以拖动边框调整遮罩图形的外形和位置。

6.在被遮罩层中不能放置动态文本。

实例：

红星闪闪

图3-5-2红星闪闪

知识提要

1.将线条转化为填充

2.创建遮罩动画

3.使用变形面板

4.任意变形工具中“注册点”的应用

5.学习使用橡皮工具中的“水笼头”工具和擦除线条

6.创建影片文档

7.设置影片文档属性

8.执行【文件】|【新建】命令，在弹出的面板中选择【常规】|【Flash文档】选项后，点击【确定】按钮，新建一个影片文档，在【属性】面板上设置文件大小为400*400象素，【背景色】为黑色。

（在教程中，我们为了更好的显示场景中的内容，背景色设为了深蓝色），如图3-5-3所示。

图3-5-3文档【属性】面板

（2）创建元件

1、创建“闪光