flash教案

教学内容：电脑动画制作初探

教学目标：

知识与技能目标

1、学会启动Flash的方法，认识Flash工作界面。

2、初步理解动画制作中的基本概念。

3、了解动画制作的一般步骤。

过程与方法

通过对一段Flash动画源文件的分析研究，在初步理解Flash动画制作思想的同时，初步理解Flash动画制作中的相关概念；又通过实际制作“移动的小球”的体验，了解Flash动画制作的过程，并从中总结出动画制作的主要步骤。

情感态度与价值观

激励学生学习动画制作的兴趣，培养学生乐于接受和探究新知识的精神。

教学方法：

演示讲授法、模仿学习、合作学习。

重难点：

重点：简单对象的移动、缩放动画的制作方法。

难点：Flash8界面的认识及相关操作；帧、关键帧、空白关键帧等概念的理解。

教学过程：

导入

同学们一定很喜欢在网上看Flash动画，老师也下载了一些，我们一起来欣赏几个精彩的动画。

（播放几个Flash动画）

这些动画是怎么做出来的呢？如果我们自己也会做该有多好啊！好，今天开始老师就和大家一起学习Flash动画的制作。

讲授新课

一、启动Flash8，对其界面及基本操作进行简单介绍。

1、Flash的特点

Flash是一个功能强大、简单易学的网页动画制作工具。用Flash制作出来的动画不但占用的空间小，而且动画品质高，不管怎样放大、缩小，都不会影响画面质量。

Flash动画的迷人之处还在于我们可以通过点击按钮，选择菜单来控制动画播放，甚至可以制作成小游戏。正是有了这些优点，使得Flash在网络上非常流行。

2、启动Flash 8

单击“开始”→“程序”→“Macromedia ”→“Macromedia Flash 8”即可。

3、Flash 8编辑窗口的介绍

菜单栏

常用工具栏、控制工具栏（动画播放的控制工具栏）

绘图工具栏（放置了各种绘图及编辑工具）、辅助选项

图层区、时间轴（可以设置动画的播放状况）

面板（可以用来控制各种设置）

场景（可以直接在这里绘图或摆放一些图片、文字、按钮、动画等进行编辑）

4、试一试：教师先隐藏常用工具栏、属性面板、混色器窗口，要求学生重新显示。

二、文档属性设置及元件、库、场景、时间轴的概念。

打开并播放一个Flash动画源文件，分析Flash动画的创建思想方法，用生动的语言和通俗形象的比喻讲解相关的概念。

元件：一个位图、矢量图形、音乐片段或是一段独立的Flash动画（好比是演员）。元件都被放置在库中，使用时只用将其拖放到场景中即可，在场景中只能对其位置和形状进行编辑，如果要对元件进行编辑，需要切换到元件编辑状态。

库：存放动画元件的地方（好比是一场戏的后台）

场景：动画的表现场所（好比是舞台）

时间轴：动画制作的最重要的区域，是编辑动画的工作台，是加工动画的流水线，包括了层编辑区、帧编辑区和时间线。（好比是剧本）

要制作一个动画，就好比是在导演一出戏，需要找好演员（制作好元件），置于后台（放在库里），然后把演员放在舞台上（把元件放在场景上），让演员照着剧本演出（在时间线上设置开始、结束时的状态，生成动画）。

图层：图层可以看成是叠放在一起的透明的胶片，可以根据需要，在不同的层上编辑不同的动画而互不影响，在放映时得到的是各图层合成的效果。制作复杂的动画时，通常把动画角色单独放在一个图层里，这样相互不会影响，编辑修改也很方便。

三、演示制作移动动画

现在我们一起用Flash 8来制作一个简单的动画。

教师边演示边讲解，学生一步一趋跟着老师制作“移动的小球”的动画。

注意讲清每一步骤的意义，同时结合实际制作讲解基本概念，将抽象的概念放到具体实践操作中去加以理解。

制作“移动的小球”操作中需注意：

步骤3：在时间轴中的图层1的第1帧中出现一个实心的黑点，这就是“关键帧”。动画对象一定要创建在关键帧上。

步骤4：也可以在图层1的第30帧处，单击鼠标右键，在弹出的快捷菜单中选择“插入关键帧”。

步骤5：用鼠标将小球拖到编辑区的右边，其意义是改变动画对象的位置属性。

步骤6：完成“创建补间动画”后拖动播放指针，查看帧内容，证实动画已被创建。

补充解释：时间轴中的每一个小格子称为“帧”，帧有两种形式：普通帧和关键帧。普通帧上的图片与它前面相邻关键帧的图片相同并以空心方块为结束标记，关键帧是以实心黑点为结束标记，动画图片一定要创建在关键帧上。

步骤8：注意提醒学生记住Flash原始文件和Flash影片的扩展名（分别为.fla 和.swf）。

四、总结制作步骤

教师以清晰简明的步骤熟练地重做一遍，让学生感到这个动画制作很容易。同时概括出三大步骤：第一步，在一段动画的起始帧插入关键帧，在起始帧的场景中编辑对象；第二步，选择结束帧插入关键帧，在结束场景中编辑对象；第三步，选择开始帧，“创建补间动画”。

五、学生自主练习

学生根据老师刚才的演示，自主、合作制作动画“移动的小球”，相互讨论各制作步骤的意义，并概括总结出动画制作的主要步骤。

课堂小结

1、教师总结本课教学内容，点评学生制作过程中遇到的问题。

2、请学生说出动画制作的三大主要步骤。

教学内容：创建补间动画

教学目标

1、了解元件和实例的概念。

2、会在Flash动画中导入图片。

3、掌握动作补间动画的基本制作方法。

教学重点：制作简单的动作补间的过程

教学难点：理解“元件”和“实例”的概念

教学方法：讲解演示法、自主学习法。

教学用具：计算机教室

教学过程

一、组织课堂创设情景

上节课我们学习了简单的动作补间动画的制作，一个运动的圆。大家知道了Flash动画制作中的一些概念，帧频、元件、关键帧、过渡帧等。从而导入本课的新课——动作补间动画。

二、新授

利用导入的图片制作动画

在Flash窗口中绘制起始帧和结束帧的画面，也可以在起始帧和结束帧中导入已有的图片。确定起始关键帧的画面后，在下一个关键帧中利用工具箱中的工具改变对象的大小、位置和角度等属性，然后动作补间，生成两个关键帧之间的补间动画。

教师演示

1、导入图片

第一步：启动Flash，执行“插入→新建元件”命令，出现“创建新元件”对话框时，在名称中输入适当的元件名“小女孩”，在行为栏中选定“图形”选项，再单击“确定”按钮，进入元件编辑状态。

第二步：执行“文件→导入”命令，出现“导入”对话框后，打开保存图片的文件夹，选定要导入的图片文件，然后单击“打开”按钮。这时，元件编辑区中会显示出导入的图片。

2、制作动画

制作图片从舞台的左上角进入，沿对角线运动到舞台的右下角，然后再从右下角移出的动画。

第一步：单击“场景1”图标，进入场景编辑状态。

第二步：执行“窗口→库”命令，打开“库”面板，在“库”面板中单击“小女孩”图形元件名，然后把“小女孩”元件拖到舞台中。

第三步：把指针指向图片后拖动，把它拖至舞台左上角以外的灰色区域，作为动画的起始点。

第四步：单击“时间轴”面板中的第30帧，然后插入关键帧。

第五步：把“小女孩”图片拖至舞台右下角以外的灰色区域，作为动画的结束点。

第六步：单击“时间轴”面板上的第1帧，执行“插入→创建补间动画”命令，在1～30帧之间创建补间动画。

第七步：执行“控制→播放”命令（或敲回车键），播放动画，可以看到“小女孩”图片从左上角进入舞台，然后从右下角移出舞台。

第八步：保存文件为“小女孩.fla”

三、课堂小结

这个动画的基本制作过程：

先绘制或导入对象，再把它转换成图形元件，然后确定对象运动前的画面（关键帧）；再在“时间轴”面板上选定下一关键帧的位置，在这个关键帧中，利用工具箱中的工具改变对象的大小、位置和角度等属性；再次，执行“插入→创建补间动画”命令或选定“属性”面板中的“动作”补间，生成前后两个关键帧之间的补间动画。

动作补间动画——在Flash里，这种先确定一段动画首尾两帧画面中对象的位置，然后由计算机自动生成这两帧之间画面的动画。

元件——是指可以重复使用的对象，分为图形元件、按钮元件和影片剪辑元件。

实例——元件在舞台中的实际应用称为实例。把元件从“库”面板里拖到舞台上时，就创建了该元件的一个实例。

五、作业

1、阅读20【知识窗】

2、完成课后练习1

教学内容：设计鼠标交互

教学目标：

1.掌握动态文本的概念。

2.掌握交互动画的制作方法。

3.回顾鼠标动作的设置。

教学重点：

1.加法器的制作。

2.小球位置的控制。

教学难点：

交互动画的制作

教学过程：

一、准备知识：

1、静态文本：用文字工具创建，文字直接在FLA文件中输入。

2、动态文本：用文字工具创建，在属性中设定动态文本，动态文本除了可以设定标签，还可以设定变量，其显示值由变量给出。

3、输入文本：用文字工具创建，在属性中设定输入文本，也可以设定变量，其值可以由键盘输入。

4、鼠标动作（按钮）的设置——on为按钮上的动作，所以我们必须首先要选中按钮，以后才可以添加on语句。有的朋友在论坛里面提问，“为什么我的on为灰色不可选状态？”原因就是你没有选中按钮。

二、加法器的设计

提示：对按钮设置动作，当按钮按下时，把a和b两个加数框中的数据进行相加。格式如下：

result = Number(a)+ Number(b)

三、鼠标控制小球

知识点：

1、getProperty()

①用法getProperty(my_mc, property)

②操作数my_mc 要检索其属性的影片剪辑的实例名称。

property 影片剪辑的属性。

③说明函数；返回影片剪辑my_mc 的指定属性的值。示例

x_value = getProperty("ball", _x);

2、setProperty()

①用法setProperty(target, property, value/expression)

②操作数target 指向要设置其属性的影片剪辑实例名称的路径。

property 要设置的属性。

value 属性的新文本值。

expression 计算结果为属性新值的公式。

③说明函数；当影片播放时，更改影片剪辑的属性值。

示例：setProperty("target_itme",_y,getProperty("target_itme",_y)-15);

说明：

1、向上按钮的行为动作

on (release) {

setProperty ("ball", _y, getProperty("ball", _y)-5);

x_value = getProperty("ball", _x);

y_value = getProperty("ball", _y);

}

2、其余按钮的行为以此类推，由大家自行设定。

补充：

3、放大按钮的行为动作

on (release) {

x_scale_value = int(getProperty("ball", _xscale)*1.1);

y_scale_value = int(getProperty("ball", _yscale)*1.1); setProperty ("ball", _xscale, x_scale_value); setProperty ("ball", _yscale, y_scale_value);

}

四、作业：

1、完成并把作业一、二