flash动画制作教案

发布时间:2020-04-07 20:05:30

信息技术兴趣小组活动教案

亿利东方学校

第一周 FLASH的基本知识

教学目标:

1、熟悉FLASH的界面。

2、掌握几个基本工具的使用:选取工具、变形工具、填充工具、线条工具、椭圆工具、矩形工具、颜料筒工具、墨水瓶工具。

3、掌握几个基本术语:图层、元件

4、记住几个快捷键

5、完成四幅绘制图案

教学重点: 应用工具画图

教学难点: 复杂遮照的创建。

教学过程:

一、界面环境介绍

二、工具箱的介绍

   工具箱提供了用于图形绘制和图形编辑的各种工具。工具箱内从上到下分为4个栏:“工具”栏、“查看”栏、“颜色”栏和“选项”栏,单击某个工具的按钮,即可激活相应的操作功能,以后把这一操作叫作使用某个工具。

1)“工具”栏:工具箱之“工具”栏内的工具用来绘制图形、输入文字和编辑图形。

2)“查看”栏:工具箱之“查看”栏内的工具是用来调整舞台编辑画面的观察位置和显示比例的。其中两个工具按钮的名称与作用如表1-1-3所示。

3)“颜色”栏:工具箱之“颜色”栏的工具是用来确定绘制图形的线条和填充的颜色。其中各工具按钮的名称与作用如下。

(笔触颜色)按钮:用于给线着色,也叫作描绘颜色。

(填充色)按钮:用于给填充着色。

(从左到右分别是:黑白、没有颜色和交换颜色)按钮:单击“黑白”按钮,可使笔触颜色和填充色恢复到默认状态(笔触颜色为黑色,填充色为白色)。在选择了椭圆或矩形工具后,“没有颜色”按钮才有效,变为,单击它可以在没有颜色和有颜色之间切换。单击“交换颜色”按钮,可以使笔触颜色与填充色互换。

4)“选项”栏:工具箱之“选项”栏中放置了用于对当前激活的工具进行设置的一些属性和功能按钮等选项。这些选项是随着用户选用工具的改变而变化的,大多数工具都有自己相应的属性设置。在绘图、输入文字或编辑对象时,通常应当在选中绘图或编辑工具后,再对其属性和功能进行设置,才能顺利达到预期的效果。

三、动手用一下工具

1、使用工具制作一个“笑脸”或“哭脸”

2、渐变工具的使用:几个关键概念

颜色调板                 

  填充变形工具的使用

3、用椭圆画个画环

操作步骤:

1、用填充色画圆,并设置笔触的粗细。

2、设置边线的填充色为“七彩色”。

3、将该线形圆环转换成填充色:修改--形状--将线条为填充。

4、使用“墨水瓶”工具给圆环加边线。

效果如右:

4、用多边形工具画太阳

操作步骤:

1、用多边星形工具制作太阳的外围,作以下设置:

1)将矩形工具转换成多角星形工具

2)设置多角星形的“属性”中的“选项”

3)设置“样式”为星形,输入星形数,及星形顶点大小(顶点越小,星形越尖)

2、设置填充色为放射性,无边线

3、开始画星形。

4、创建一个同心的圆为太阳的脸。

5、使用直线工具画眼、嘴。(注意:用选择工具调整其曲线度,利用变形工具作旋转)

四、课堂习题:自创月亮

五、课后作业

1、书本P34页的实例6:茶杯。

第二周 各类特效文字的制作

教学进度:正常

教学目标:

1、要求学生掌握渐变工具、多角星形工具、墨水瓶工具、文字工具、滤镜的使用。

2、要求学生掌握修改菜单中的位图、元件、形状的菜单项。

3、掌握如何制作特效文字。

4、掌握位图的导入及矢量图的转换。

教学重点: 1、掌握空心文字、投影文字、点框文字、彩虹文字、金属文字、雪花文字的制作

教学难点: 复杂遮照的创建。

教学过程:

一、 点框文字

制作步骤:

1、用文字工具输入文字

2、将文字使用“分离”或按下(ctrl+B)组合键

3、再将每个分离的文字使用“分离”,即直到文字被选中时呈现点型。

4、使用“墨水瓶”工具,设置线型为“点型”,设置线的颜色(注意务必使用与文字颜色不同的一种颜色),用鼠标单击文字

5、所有文字的边线勾勒完毕后,用选取工具选取文字内心,并删除。

二、彩虹文字

制作步骤:

1、用文字工具输入文字

2、将文字使用“分离”,(分离二次)

3、选择填充颜色,再用颜料筒单击文字即可

三、彩图文字  图片下载

制作步骤:

1、用文字工具输入文字

2、将文字使用“分离”

3、选择填充类型为“图片”,图片填充有二类

4、再用墨水瓶工具勾勒边缘

5、将边缘线条转化为填充

6、“修改”--“形状”--“柔化填充边缘”

四、雪花文字

五、补充知识:倒影字的制作

六、课后作业:制作一个图案文字

小技巧:ctrl+vctrl+shift+v的区别:后者是复制时保持前后位置都一样。

第三周 直线运动和变形运动

教学目标:

1、要求学生掌握直线运动和变形运动的补间。

2、掌握直线运动的特点:元件与普通形状对象都可以制作直线运动。

3、掌握变形运动的特点:普通形状对象可以变形。

4、掌握影片元件的制作方法。

教学重点: 运动补间的设置;影片元件的创建。>

教学难点: 关键帧/普通帧的区别;

教学过程:

一、导入:动画制作的关键要素

 1、帧——是进行flash动画制作的最基本的单位,每一个精彩的flash动画都是由很多个精心雕琢的帧构成的,在时间轴上的每一帧都可以包含需要显示的所有内容,包括图形、声音、各种素材和其他多种对象。

 2、关键帧——顾名思义,有关键内容的帧。用来定义动画变化、更改状态的帧,即编辑舞台上存在实例对象并可对其进行编辑的帧。

 3、空白关键帧——空白关键帧是没有包含舞台上的实例内容的关键帧。

 4、普通帧——在时间轴上能显示实例对象,但不能对实例对象进行编辑操作的帧。

 5、以上四种帧的区别

  ① 关键帧在时间轴上显示为实心的圆点,空白关键帧在时间轴上显示为空心的圆点,普通帧在时间轴上显示为灰色填充的小方格

  ② 同一层中,在前一个关键帧的后面任一帧处插入关键帧,是复制前一个关键帧上的对象,并可对其进行编辑操作;如果插入普通帧,是延续前一个关键帧上的内容,不可对其进行编辑操作;插入空白关键帧,可清除该帧后面的延续内容,可以在空白关键帧上添加

新的实例对象。

  ③ 关键帧和空白关键帧上都可以添加帧动作脚本,普通帧上则不能。

 6 应用中需注意的问题

应尽可能的节约关键帧的使用,以减小动画文件的体积;

尽量避免在同一帧处过多的使用关键帧,以减小动画运行的负担,使画面播放流畅。

二、基本动画

1、变形动画:要求参与动画的对象必须是形状,不得使用元件。

例如:以下动画中A-->B-->C之间、五角星——>十角形即为形状变形。

操作步骤:

①设置背景色

②插入第一关键帧,并绘制一个五角形。

③在第30帧上插入空白关键帧,并绘制一个十角星形。

④利用时间轴上的“编辑多帧”工具,对齐第一、二关键帧的各自五个角。

⑤在第一关键帧上设定五个“形状提示点”,修改--形状--添加形状提示点。

⑥在第二关键帧上设定各提示点的对应终点位置。

⑦对第一关键帧设定“形状”动画补间。

思考:

2、直线运动动画:任何对象都可以设置直线动画,只需二个关键帧

例如:素材下载

3、渐变运动动画

淡入、淡出动画:使用实例才能完成此项动画,一般通过调整关键帧的透明度来设置场景中的各实例的出现方式。

一般淡入淡出式动画是用二个关键帧完成,第一关键帧为全透明(100%)或部分透明,第二关键帧透明度为0

②闪烁动画:一般用三个关键帧完成,即从淡入到淡出的过程,即全透明--不透明--全透明的设置过程。

例如:以下例子中星星,就是用影片元件来完成的。

4、旋转动画:一般旋转度数在360度以上,则采用实例,即旋转的对象必须是通过元件调入的。而旋转度小于360度,则旋转对象可以是形状。动画设定只需二个关键帧。

例如:拖影文字(课后完成)

操作步骤:

①建立文字元件,拖到舞台

②创建第一图层,设定第一、二关键帧(同帧),并设制“动画”补间,旋转为1次。

②创建第二图层,此层为阴影层,复制第一层的关键帧,用方向箭头控制。

③创建第三至第九图层,这些层均为拖影层,每层之间涉后二帧。与第一图层相比,这些层均要逐渐调整透明度。

三、总结巩固:

1、图形元件的制作

2、图形元件的应用:

①实例:元件调入到场景后,就叫实例,实例可以取名,以后便于以后写代码(编程)时调用。

②对元件的编辑:

③对实例的编辑:与元件编辑最大区别在于对元件本身不修改,主要的编辑方法有改变色调、透明度等。

四、作业:

本周作业名称为:1、字母变形

2、应用提示点变形(星型)

3、拖影文字

4、预习:夜色中的汽车(综合渐变星星一起做)

第四周 Flash 中的动画

教学目标:

1、要求学生掌握直线运动的补间。

2、掌握直线运动的特点:元件与普通形状对象都可以制作直线运动。

3、掌握影片元件的制作方法。

4、了解flash 中的几种基本动画

教学重点: flash 中的几种基本动画。

教学难点: 基本动画的区别;

教学过程:

一、导入:Flash 中的几种基本动画。

1、动作补间动画

Flash 中最常见的动画类型。它可以结合色彩、透明度、位置的变化,使作品更加绚丽多彩。如何通过动作补间动画将对象的运动形象生动的表现出来,是学习运动动画的根本目的。如上堂课的汽车运动动画。

2、形状补间动画

同样是Flash 中最常见的动画类型。但是它的变形对象是矢量图形,利用这种动画可以使场景上的矢量图形作出任意形状、位置和颜色的平滑变化。它与动作补间动画的区别是:动作补间的作用对象是元件或被组合的对象,而形状补间动画的作用对象是矢量图形。如上堂课的字母变形动画。

3、逐帧动画

要创建逐帧动画,需要将每一个帧都定义为关键帧,然后给每一个帧都创建不同的图象。 制作逐帧动画的基本思想是把一系列相差甚微的图形或文字放置在一系列的关键帧中,使动画播放的时候看起来像是一系列连续变化的动画。如图所示,展示了一个小男孩的行为动画。

4、蒙版动画

在制作动画的过程中,有些效果用通常的方法很难实现。比如:手电筒、探照灯、百页窗等效果。这时就要用到蒙版动画了。

要创建蒙版动画,需要有两个图层:遮罩层和被遮罩层。遮罩项目像是一个窗口,透过它可以看到位于它下面的链接层区域,而且除了透过遮罩项目显示的内容,其余的所有内容都被隐藏起来了。如图所示:

5、引导层动画

引导层作为一个特殊的图层, Flash 动画设计中的应用也十分广泛。在引导层的帮助下,可以实现对象沿着特定的路径运动。要创建引导层动画,需要两个图层,如图所示

二、回顾旋转动画:一般旋转度数在360度以上,则采用实例,即旋转的对象必须是通过元件调入的。而旋转度小于360度,则旋转对象可以是形状。动画设定只需二个关键帧。

例如:拖影文字

操作步骤:

①建立文字元件,拖到舞台

②创建第一图层,设定第一、二关键帧(同帧),并设制“动画”补间,旋转为1次。

②创建第二图层,此层为阴影层,复制第一层的关键帧,用方向箭头控制。

③创建第三至第九图层,这些层均为拖影层,每层之间涉后二帧。与第一图层相比,这些层均要逐渐调整透明度。

三、元件的创建,多图层动画的制作

四、本周作业:

1、拖影文字

2、夜色马路

第五周 巩固与检测

教学目标:

1、要求学生巩固椭圆工具、直线工具、填充工具、钢笔工具、变形工具、选取工具、墨水瓶工具、矩形工具的使用。

2、巩固图形元件、影片元件的创建。

3、巩固二类补间动画的特点。

4、巩固二类动画:变形动画、直线运动动画。

5、测验学生的图形绘制能力,时间1小时

教学重点: 运动补间的设置;影片元件的创建。

教学难点: 影片元件与图形元件的区别。

教学过程:

一、巩固复习题:

1、倒影动画(本实例主要使用了文本工具、墨水瓶工具、打散功能、Alpha值设置等来操作)。主要通过一下几个步骤来完成。

使用文本工具在舞台场景中输入文字。

使用打散功能将文字打散为矢量图形。

使用墨水瓶工具为文字描边。

使用F8快捷键将文字转化为影片剪辑,并在其中进行Alpha值的设置。

2、多层变形动画(掌握对象绘制工具的使用。)

3、思考并完成一下动画效果的制作,分析帧之间的时间顺序及文字分别做了什么动画?(背景下载)

二、十一课后作业:完成作业本上前几周作业的上传、学习上堂课中五种基本动画的设计制作。(素材下载) (补充源代码下载)

本周上传作业名称为:1、阴影动画

2、圆环字母变形

第六周 巩固与检测

教学目标:

1、要求学生巩固掌握FLASH的工具中的一些技巧。

2、巩固FALSH中存在的五种变化--移动、缩放、旋转、颜色、透明度

教学重点:工具中技巧的合理运用。

教学过程:

一、在FLASH中有些工具使用的技巧有助于动画设计的美感,下面总结几种我们平时制作当中常用到的几种小技巧:

1、柔化物体边缘 先看下图一的效果,此效果,我们所使用的最简单的方法是利用 FLASH 本身的边缘柔化功能:

图一 图二 图三

先画好一个圆,如图二;然后选中此图形(不可是元件图形)--圆,选择修改--形状--柔化边缘填充,在弹出的对话框里设置参数,如图三,确定以后就形成上图的效果。(注意:参数的大小影响了边缘柔化的程度,但有一点,最好只进行一次柔化,如在柔化以后再柔化可能会使FLASH计算复杂,而出现于要求不同的效果。)

同理,我们可以对文字边缘进行柔化,如下效果34分别是对文字的填充色和笔触进行了柔化。值得注意的是必须先把文字分离,并且在对笔触进行柔化之前,事先要求将线条转化为填充。

引申:

在实际运用当中如果要进行较为灵活的边缘柔化,我们不妨利用混色器来完成。 即在选中图形后调出混色器编辑框,颜色填充样式选择放射状,然后将左右两个颜色填充节点的颜色都设置为白色, 再将右边的颜色节点的透明度为“0 如下图

用此方法制作的效果有一点好处就是可以灵活的改变边缘柔化的程度, 思考如何达到后面三种图形的效果。

2、变形复制

效果如下:对于这个效果我们使用的是复制并变形的功能。

首先可以画一个椭圆,然后选中此对象,用变形工具改变它的自由变化中心,如下面左右两图,左边为没有改变的状态,右边为改变以后的状态:

自由变化中心的改变

然后选择 窗口--变形 调出变形对话框,如图:在旋转参数里输入对象旋转的角度,比如20度,再点击对话框右下角的拷贝并应用变形按钮,直到图象变成我们所需状态。

3、对象绘制

这是 Flash8 的新功能。原先版本中,我们在同一图层中叠加两个图形时,会产生合并的效果,如果移动其中一个图形时,下面图形的叠加部分就会消失,这有一定的优越性但是又有局限性,如果我们要绘制两个图形叠加在一起但是不合并的话,就需要把这两个图形转换成元件或是放在两个图层中,这样就比较麻烦。 而对象绘制就可以避免产生这种问题。例如,原先版本中移动图象后:

而如果是单击“椭圆”工具,在选项栏里,点击“对象绘制”按钮后,再绘制两个图象,这时尽管两个图象之间彼此是叠加的,但是互相不会干扰。

另外,在“修改”菜单栏中,对象绘制还具有四种合并效果:联合,交集,打孔,裁切。希望大家自己去观察它们各自的作用。

二、 FALSH中存在的五种变化--移动、缩放、旋转、颜色、透明度

具体效果看影片文件(注意:后面两种变化必须是对实例,即对拉到场景中的元件进行设置。)

第七周 巩固

教教学目标:

1、巩固掌握FLASH制作中几种常见字体效果的制作。

2、掌握FLASH动画制作中用到的两种补间过程

教学重点: 字体效果的制作、各补间的特性和要求

教学过程:

一、在一个好的FLASH作品里常常会运用到一些经过处理的FLASH字效,前面我们已经介绍了多种在FLASH中常用的字效:点框文字、彩虹文字、位图文字、立体字、倒影字等,今天,再补充几个特效文字的处理。

1 双色(多色)字

图一 图二 图三

关键技术要求:

[1]、制作此类文字效果,只要将文字打散成离散的图形;

[2]、然后用选取工具选取其中部分,再对选中部分进行颜色填充;

[3]、选取次数可以随意定。

2 镂空字 (素材下载)

关键技术要求:

[1]、此类效果需两层图层才能完成;

[2]、底层放置一张图片;

[3]、在上层画一个矩形盖住底层的图片(可适当设置透明度);

[4]、在矩形层上输入文字并调整好文字的位置;

[5]、将文字打散;

[6]、鼠标点击影片空白处取消对文字的选择;

[7]、再次选中文字图形并将其删除即可。

3 阴影字

关键技术要求:

1、养成一个图象一个图层的好习惯,根据情况,这里可以创建三个图层,蓝色字、黑色字,深灰色字,分别呈现原层、立体层、阴影层的效果;

2、立体层的制作:可以按快捷键Shift+Ctrl+V把“原层”中的文字复制到“立体层”中,并利用方向键“→”、“↑”将黑色字层向右、向上各移动2个像素;

3、阴影的制作: 选中“原层”中的文字,然后按快捷键打开Ctrl+T打开“变形”面板,并上右图所示设置。设置好后,单击“变形”面板上的“复制并应用变形”按钮 。一个经过变形的副本就被复制出来了。

4、阴影层的制作: 选中刚刚做好的副本,按快捷键Ctrl+X剪切。按快捷键Shift+Ctrl+V把这个副本原位粘贴到“阴影层”中。最后适当的调整位置,并把色彩换成#666666。到这里,文字的阴影效果就做好了。

综上所述,关键技术都比较类似,所以希望大家课后能好好复习,做到在熟练绘制的基础上创作出更多其他效果的文字。

二、 FLASH动画中,存在着两种基本的补间:移动和行变。下面就将这两种补间进行介绍。

1、形状补间

延伸的直线 拉动的幕布 画线框(四条边放在四个图层上,如下图所示,考虑为什么?)

星星变形(注意为了防止变形过程不凌乱,可以利用修改-形状中的“添加形状提示”工具, 再五角星上加入5个提示点,并放到相应变化位置上,以红色的小圆圈表示,abcde用来标识提示点。看一看最后的一帧,可以发现十角星上也有一个对应的红色提示点,当你设置好位置时,会发现提示点变绿了,回到第一帧,这时提示点由红色变成了黄色,这表明提示点的设置正确。)

2、运动补间

它与动作补间动画的区别是:动作补间的作用对象是元件或被组合的对象,而形状补间动画的作用对象是矢量图形。

运动的小球:比较下面三副动画,考虑有什么不同,分别做了什么动作。提示:缓动选项的作用。

现在大家应该知道缓动选项的作用了吧。它的作用是在运动的过程中产生速度上的变化,默认值为0,即为匀速运动。当值为负时,运动的物体做加速运动,相反,当值为正时,运动的物体做减速运动。在小球下落的过程中,速度越来越快,所以我们把值改为负值,注意在值为-100时,比较接近重力加速度。当小球弹起时,速度越来越慢,因此值为正。

引申:(旋转的风车)

从这一制作中我们不仅要学习运动渐变动画的另一种形式:旋转动画(自转),而且还要练习用箭头工具对对象进行修改,利用变形面板制作多个风车叶的方法。 思考:下面两幅动画的差异在哪里?

第八周 运动引导层

教学目标:

1、要求学生掌握各类曲线运动的制作技巧,掌握引导线、引导层的概念及作用。

2、能根据运动的需求,画出运动轨迹线,即引导线。

教学重点: 运动引导层的创建,动画关键帧的设置。

教学难点: 做引导层时的几个注意点。

教学过程:

一、引入:

①引导线、引导层的概念

1、引导线:引导线就是轨迹或辅助线的作用。它让物体沿着引导线路径运行。(即物体运动的轨迹,一般使用钢笔工具来制作)

2、引导层:引导线必须制作在引导层中,而需要使用引导线作为运动轨迹线的物体所在层必须在引导层的下方,一个引导层可以为多个图层提供运动轨迹。同时在一个引导层中可以有多条运动轨迹。

二、滚球的制作

知识点:

1、背景层的创建:

①设定场景色

②用钢笔工具勾勒一个上边为曲线的多边形。

2、运动引导层的创建:该层中专门用来放置物体运动的轨迹,轨迹一般用线条描述,而在运动引导层中的线条在实际导出成SWF文件时是不可见。

使用的方法:要使用轨迹的对象必须独立地放在引导层的下方图层中,运动的对象其关键帧必须完全吸附在轨迹上。

③复制曲线。

如图:第一、二关键帧的定点

3、制作技巧:

①引导层一旦建立完成后应将其锁定

②对运动对象定位时最好打开“帖紧至对象”工具,这样当吸附正确时中心点会放大。

三、思考自强不息和山地车实例的制作

四、我是一条鱼  素材下载

1、水泡的制作(掌握刷子和填充变形工具的使用,并把水泡转换为元件。)

水泡的颜色调板:白色透明度为02100

2、浮起的水泡制作(影片元件:注意引导层绘制好后,可以及时锁定。)

3、游动的小鱼

可以从左向右游动,也可以从右向左游动,小鱼的运动轨迹为

4、在场景中创建:

①背景图片放入场景。

②建立第二层,放入大小不一的水影片元件,注意水泡的放置位置

③建立第三层,放入多条小鱼,使用小鱼的影片元件时,可将其翻转,从而改变其运动方向。

五、课后作业:

必做题:

1、滚球

2、我是一条小鱼

选做题:

1、自强不息

2、山地车

第九周 按钮的制作

教学目标:

1、掌握按钮制作的基本方法。

2、掌握按钮中的动画设计方法。

3、掌握透明按钮的制作

教学重点: 按钮元件的创建,按钮动画的设计。

教学难点: 按钮中的四种状态。

教学过程:

一、按钮元件(可详见课本P111

按钮用于响应鼠标,即随鼠标显示不同的状态,执行指定的行为。

1、插入按钮元件,执行“插入”-“新建元件”命令(或者按键),在创建新元件对话框中设置元件类型为按钮,即可见如下界面

2、编辑按钮元件:按钮元件有弹起、指针经过、按下和点击四种状态,如图所示:

V 弹起:表示鼠标没有在按钮上时的按钮的状态。

V 指针经过:表示鼠标经过按钮时按钮的状态。

V 按下:表示按下鼠标时按钮的状态。

V 点击:设置按钮响应鼠标的区域。

如果要制作透明按钮,仅在“点击”画出点范围即可。

二、上机操作:制作以下实例

1、基本按钮

分析:

1、弹起:二个图片元件分别放置在文字和边框图层中

2、经过:与弹起时的一个图片元件相同,在此基础上用“按我”的图片元件创建一个影片剪辑元件。

3、按下:用“谢谢”图片元件替换“按我”图片元件

4、点击:延续边框图层的第一帧,代表鼠标进入边框区域后,按钮才会有响应。

弹起帧   指针经过帧

按下帧   点击帧

2 练习:制作一个带有以下动画效果的按钮(自选一个完成)

提示:将按钮下面的文字放在新的图层上。

三、按钮的点击作用

1、一般按钮点击后均会产生一个动作,如:停止、播放、重放、跳转、超链接,如:(源文件下载)

2、按钮的几个常用动作:

on动作命令

下面我们就详细地向大家介绍一下这八种事件的使用。

  (1)press 在鼠标指针经过按钮时按下鼠标按钮。单击press,然后选择动作语句,双击【全局函数】|【时间轴控制】中的play 命令。

  完整的action是:

on(press){ //设定鼠标事件为按下,然后执行大括号里面的语句。

play(); //按钮响应后执行play(播放)动作 }

press动作 当然,在大括号里面还可以用其他的语句,比如说,gotoAndPlay(yourframe); //点击按钮后,就会从你设置的帧播放。

  (2) release 在鼠标指针经过按钮时释放鼠标按钮。单击选择release然后与第一个事件相同加入play命令。完成的语句如下:

on(release){ //当鼠标按下释放的时候,执行下面的语句动作。

play(); //按钮响应后执行play(播放)动作。 }

release动作 可以看到,当鼠标左键按下按钮的时候,并没有激发播放动作,而是当鼠标左键放开的时候,执行了播放动作。这也是与“press”事件不同的地方。

  (3)releaseOutside 当鼠标指针在按钮之内时按下按钮后,将鼠标指针移到按钮之外,此时释放鼠标按钮。 添加语句的方法同上。完整的语句如下:

on (releaseOutside) { //当鼠标在按钮外部释放的时候执行下面的语句。

play(); //按钮响应后执行播放动作。 }

releaseOutside动作

  通过这个例子我们知道,当鼠标左键在按钮上按住并移动到按钮以外的地方放开后,触发了按钮的动作。这是一个具有非常想象力的事件,大家可以利用on的这个事件来制作游戏。

 (4) rollOver 鼠标指针滑过按钮。制作方法同上,完整的as语句为:

on(rollover){ //当鼠标滑动到按钮上时执行下面的动作。

play(); //按钮执行播放动作。 }

rollOver动作 当鼠标指针从按钮上滑过的时候,动画就开始执行播放动作了,而不需要点击它。我们可以利用on的这个特点来制作一些图示板,非常简单有效

(5)rollOut 鼠标指针滑出按钮区域。制作方法同上,完整的as语句为:

on(rollOut){ //当鼠标滑动到按钮上并离开时执行下面动作。

Play(): //按钮响应播放动作。 }

rollOut动作

  滑离与滑过并不是相同的,滑离是指鼠标滑动到按钮上并离开以后开始响应,而滑过是指只要鼠标滑到按钮上,就开始执行动作。

(6)dragOut 在鼠标指针滑过按钮时按下鼠标按钮,然后滑出此按钮区域。完整的as是:

on(Drag Out){ //当鼠标拖过的时候执行下面的动作。

play(); //执行播放动作。 }

dragOut动作

  拖离与拖过有所不同,只要在按钮上按住鼠标左键然后移动到按钮外就会相应。他与滑离的区别在于拖离需要按住鼠标左键。

  (7dragOver 在鼠标指针滑过按钮时按下鼠标按钮,然后滑出此按钮,再滑回此按钮。完整的as是:

on (dragover) { //当鼠标指针滑过按钮时按下鼠标按钮,然后滑出此按钮,再滑回此按钮时执行下面的动作。

play(); //执行播放动作 }

dragOver动作

  拖过的效果是在按钮上点击并按住鼠标不放,移出按扭区,再移回按钮上释放的事件。注意:此例中是一个文字按钮,在做文字按钮的时候,应在文字的下方用一透明方块,以增加按钮的反应区域,或者在按钮的第4帧绘制一个矩形来增加反映区。

  (8) keyPress ("key") 按下指定的键。对于此参数的 key 部分,需指定键控代码或键常量。

  我们在(“key”)中键入“k”。完整地as语句为:

on (keyPress "z") { //当按下键盘中的“z”健时执行下面的动作。

play(); //执行播放动作 }

  注 ——在给动画作品添加按钮的时候应该放到单独一层,这样便于修改。

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

  技 ——在一般flash作品中,大家不会有意区分这些on的功能的,一般采用默认的语句。如果没有特殊说明,你使用了拖离,滑离等事件来制作“replay”按钮,会让人们摸不着头脑的。

  试一试 ——我们了解了on得这么多的功能,利用这些功能可以轻易的制作出flash课件,flash游戏里面的效果,大家不妨试一试。

  分 ——on语句的功能与按钮息息相关,有按钮的地方一定会有on语句的使用。而有flash作品的地方,就会有按钮的出现,所以说on的重要作用不可忽视。今天向大家详细地介绍了on的各种功能,我们就可以结合按钮自身的特点,发挥他们的功能。

四、作业

必做题:

1、“按我”

2move on next and back

3、完成书中P104页的动态按钮制作: 素材

第十周 复习

教学目标:

1、巩固掌握引导线的基本技巧。

2、巩固掌握按钮制作的基本方法。

3 通过测试了解学生的掌握情况。

教学重点: 掌握引导线、按钮的创建。

教学难点: 通过考试,巩固薄弱知识点。

教学过程:

一、复习

1、“调整到路径”功能: 将补间元素的基线调整到运动路径, 比较下面两个动画

2、做引导层时的几个注意点:

①路径是否在引导层中,引导层的创建是否正确。

②路径是否闭合。

③运动物体中心点是否在路径上,大家在拖动的时候可以使用吸附工具,这样比较容易观察。

④引导线千万不能是元件,如果绘制出来是对象的话,要及时打散。

⑤要让引导层在导出文件中可见,就必须再添加一个背景层。

3、观看下面的动画实例,分析在动画中有哪些效果?

分析:按钮的四个帧上分别放置的是什么?

三、本周作业:预习遮罩动画

第十一周 遮照的基本概念

教学目标:

1 掌握遮照的原理

2 掌握遮照的操作方法

3 学会遮照的基本应用,增强分析动画的能力

教学重点: 掌握遮照的操作方法

教学难点: 遮照的基本应用,学会从现成的作品中获取设计方法

教学过程:

一、知识回顾:

补间:形状

补间:动作

补间:动作,光束为元件

补间:动作,以物体中心为轴向两边扩张的一般为元件

二、引入新课:

1、请注意观察以下这个动画,在它的文字中有何特色,它的动画特点是什么?

1)文字用图案填色,且是自上而下运动着的图案填色。

2)文字完整显示,而图案显示不完整。

3)文字在最上层,图案在下层,且下层是一个动画层。

三、新课内容( 上课素材下载 )

(一)遮罩的原理

1、遮罩是需要通过两层实现的,上一层叫遮罩层,下一层叫被遮罩层。

2、遮罩结果显示的是二层的叠加部分。

3、遮罩显示结果的色彩由被遮罩层的色彩决定, 即可通过辨别色彩的来源来确定哪一层为被遮罩层

4、在遮罩层和被遮罩层中均可设定动画。

(二)遮罩的应用

1、电影字幕效果

分析关键点:什么颜色为遮罩效果的主色,什么层在自下而上移动?

此例的结论:说明遮罩层与被遮罩层均可根据需要设定动画。

分析的特点:用显示色彩的特性确定了被遮罩层。

2、光束的照射效果

比较一下两幅动画的差异

本题总结:在遮罩层和被遮罩层之后,可适当添加辅助层,以衬托遮罩效果。  

3MTV字幕效果

分析关键点:上面两幅动画分别需要几层?蓝色的FLASH文字层是否产生遮罩效果?

四、作业布置:

1、必做题: 字幕、光照、MTV字幕1MTV字幕2(如下)

2、选做题:

第十二周 声音与遮罩技巧

教学目标:

1 能导入各类声音,并能处理一些声音的叠加。

2 遮照技巧的灵活应用。

3 学会遮照的基本应用,增强分析动画的能力

教学重点: 遮照技巧的灵活应用

教学难点: 遮照的基本应用,学会从现成的作品中获取设计方法

教学过程:

一、FLASH中声音的加载

①导入声音文件:

文件--导入到库--选择声音源

我们只需新增一图层(声音层)--将库中的声音拖入,或者在属性面板中选择声音就可以使用声音文件了,事情就这么简单。

②声音文件的使用技巧

为动画添加背景音乐

(1)新建或打开需要添加声音的文件,在原来的动画上再增加一个“声音层”的新层。需要在文件中多处有声音时,我们通常会把几个声音文件放置在不同的层中,这样不但便于控制,而且还能达到混响效果。

(2)导入所需要的声音文件,然后从库中将所需声音文件拖拉到“声音层”上即可。

为按钮添加提示声音

在原来的层上插入一新层,假设在按下帧上按F7添加空白关键帧,然后将声音文件拖放到该帧即可,并将同步设置为“事件”。 则测试时,当鼠标单击按钮时会发出声音。

二、声音的处理

当声音被加载到FLASH中后,可进行如下处理:

1、取部分声音播放。

2、控制声音的淡入、淡出等。

3、处理方法:在属性面板上,单击声音编辑即可

4、“事件”选项会将声音和一个事件的发生过程全部同步起来。如果触发了播放声音的事件,它会自动播放直至结束,在这个过程中声音的停止不受动画本身的制约。例如我们在Flash中制作了一个声音播放按钮,如果事件声音正在播放,而再次点击,第一个实例继续播放,另一个声音实例同时开始播放。

“开始”选项和“事件”选项一样,只是如果声音正在播放,就不会播放新的声音实例。

“停止”选项可以使指定的声音静音。

“数据流”用于在互联网上同步播放声音。Flash会协调动画与声音流,使动画与声音同步。如果Flash显示动画帧的速度不够快,Flash会自动跳过一些帧。与事件声音不同的是,如果声音过长而动画过短,声音流将随着动画的结束而停止播放。在播放影片时,声音流是混合在一起播放的。

5、不同声音的叠加:将声音加载在不同图层上。

三、实例:

1、按钮上加载声音   源文件下载 声音下载 (右击下载)

体会在按钮上加声音与在图层上加声音的区别。

四、遮照技巧

1、百叶窗( 素材下载 )

(一)遮罩的原理

操作步骤:

[1]、建立一个按水平线缩放的长方条作为影片元件。

[2]、将第一步中创建的影片元件多个叠加,组合成一扇百叶窗,并将其作为第二个影片元件。

[3]、在场中创建三层,其中最上层放步骤二中影片元件,中间层与底层各放一张图片。

[4]、将遮照效果应用在最上层。

思考:步骤2中能否不建影片元件?

2、闪闪红星的制作

制作步骤:

[1]、制作一个扇片,并生成元件。

[2]、由步骤1的元件旋转复制360度后而绕成一圈,并将此图案生成元件。(注意调整元件中心点位置)

[3]、将步骤2生成的元件加以应用于,实施翻转。

[4]、将以上二个实例各自放入不同层,并在二层间实施遮照。

五、作业

1、完成以上二个实例:百叶窗、闪闪红星

2、校名:

3、书本作业:横向百叶窗

第十三周 遮照技巧应用()

教学目标: 通过练习,使学生进一步掌握遮照与变形的综合应用。

教学重点: 遮照技巧应用。

教学难点: 复杂遮照的创建。

教学过程:

一、巩固复习:制作并讲解上一节课的作业纵向百叶窗(详见课本P99,图片下载)。

知识点:

①分散到图层。

②直线动画的制作。

③关键幀的复制。

④遮照的使用。

二、制作跑车广告   素材下载

1、准备工作,试着制作下列图案

2、查看跑车广告

3、分析跑车广告的元件及图层

①数字计时:帧帧动画(序号之间的渐变效果)

②遮照效果:遮照层:动画层(形状补间的变形动画、)

被遮照层:清晰跑车

背景层:模糊跑车

③落下帷幕:缩放动画、变形动画。

4、时间轴参考(没有设计计时时的效果图)

三、课后作业

必做:

1、跑车广告

2、按下图的提示制作“波浪文字”

提示:

效果动画:

选做:3、制作以下“图片切换效果”

第十四周 遮照复习

教学目标:

1、掌握多层遮照的基本技巧。

2、注意对遮照层和被遮照层的设定。

3、通过测试了解学生的掌握情况。

教学重点: 多层遮照技巧的原理。

教学难点: 多层遮照技巧的应用。

教学过程:

一、复习:

1、旋转的地球   地图下载

提示:

1、注意观察二幅地图的颜色。

[2]、思考用几层遮照。

[3]、地图的颜色是否发生变化。

[4]、是否有背景层。

[2] 波浪文字

源代码下载

要求:自行分析以上两个动画的遮照技巧,在源代码的基础上,修改完成第二种波浪效果。

第十五周 基本ActionScript

教学目标:

1、要求学生了解什么是ActionScript

2、掌握如何编辑ActionScript

3、三种添加脚本的对象。

教学重点: ActionScript的基本概念。

教学难点: 编辑ActionScript

教学过程:

一、什么是 ActionScript(以下简称AS

AS FLASH的动作脚本语言。可以 AS 使用控制FLASH影片中的对象,创建导航和交互元素,也可以扩展FLASH,制作高级交互影片和FLASH交互网站。

二、 利用AS 能做些什么?

使用 AS,用户不仅可以动态地控制动画的进行,而且能够进行各种运算,甚至由各种方式获取用户的动作并且即时作出回应。目前它在交互式网站、课件的制作及一些游戏、MTV和电子贺卡制作中的应用及为广泛。

三、编辑 AS

1、动作面版的介绍

①动作工具箱

②脚本导航器

③脚本助手

2、脚本窗口

3、行为面版(窗口--行为)

用户可以使用行为来装载和卸裁实例,播放,停播、复制或拖动实例。

4、添加脚本的对象

①在帧中添加:

写在关键帧上面的AS,当时间轴上的指针走到这个关键帧的时候,就写在这个帧上面的AS就被触发执行了。常见的例子有在影片结尾的帧写上 stop() 等。操作方法就是点选关键帧,然后打开AS面板。

②在按钮中添加:

不同于帧上面的AS,按钮上面的AS是要有触发条件的。要把AS写在按钮上,操作方法是点选目标按钮,然后打开AS面板。举个例子能说的更明白:

●●假设有一个动画,要让它在播放完同时停止,那么,你要做的就是在这个动画的最后一帧写stop();

●●再假设有个按钮,效果是按下按钮后停止播放,那么步骤如下:

做一个按钮,放到主场景,点选按钮,然后打开AS面板。现在如果也在按钮上写 stop(); 那么,输出的时候就会提示错误。

正确的应该这样写: 整个代码翻译过来就是:

on(release){

stop(); } (松开){ 停止 }

   这里要比帧的动画多这些代码: on(release){} ,

  ③在影片剪辑中添加

四、 AS 基本语法

1、点语法:点(.)被用于指出与一个对象或影片剪辑相关联的特性或方法,也是用于标识指向一个影片剪辑或变量的目标路径。

2、括号:用于定义函数中的相关参数

3、大括号:凡是用大括号结合在一起的是一个语句块。

4、分号:每一条语句都必须是以分号作为结束的。

其它具体的使用规则我们在具体的实例再进行讲解,有兴趣的同学也可以参看  ActionScript 教程

五、第一实例(下拉菜单的制作)

1 实例源文件下载

使用goto配合帧标签制作下拉菜单

步骤 小技巧

  ①打开源文件并分析

  ②在三个菜单下拉的最后关键帧上添加Stop();语句,

  ③选择第一个按钮(company),按下F9打开动作面板,添加以下语句:

   on(rollover){gotoAndPlay("2");}

  ④其它二个按钮也以此类推添加语句。   当时间轴上有大量帧时,可以通过给帧命名,从而方便地调用帧。如本例中,可以在第②、③步之间插入一步:

  为三个菜单下拉的图层中第一关键帧定义名称,分别为t1t2t3

  这时,按钮(company)上的语句就得变成:

   on(rollover){gotoAndPlay("t1");}

观察制作的结果:

六、第二个实例:Food house

1 下载源文件  分析一下其中的动画效果

2、制作以下效果:

七、补充:利用getURL跳转到其他网页

1、查看一下精美的韩版菜单条(你能仿制吗?)     看一下源代码

2、为这个菜单添加getURL语句:参考

on(release){getURL("http://www.sxszjzx.com");}

思考:加在什么位置

八、本周作业:

1、下拉菜单

2Food house (时间轴提示)

第十六周 AS实例制作训练

教学目标:

1、掌握复制影片剪辑命令duplicate的使用。

2、掌握随机函数random的使用,_visible隐藏属性的应用。

3、掌握影片剪辑x,y轴比例属性_xscale,_yscale以及透明属性_alpha的应用。

教学重点: 复制影片剪辑命令duplicate和随机函数random的使用。

教学难点: 编辑ActionScript

教学过程:

一、知识铺垫

Flash中制作多个对象不规则地出现,通常会用到两个Action语句,即复制影片剪辑命令duplicateMovieClip和随机函数random()。前者用于复制出相同的影片剪辑,后者则用于创建随机数,并将这些随机数应用到相应的属性中,使复制出的影片剪辑具有不同的状态。

1duplicateMovieClip语句可以复制一个Movie Clip(影片剪辑),同时可以为复制得到的Movie Clip 重新命名。该命令是一条单独的语句,语法结构如下:

duplicateMovieClip(目标,新名称,深度)

由于每一个复制出来的影片剪辑都具有与目标影片剪辑一样的属性并且每一个复制出来的影片剪辑其初始位置与目标影片剪辑是叠加在一起的,因此为了区分每一个新复制的影片剪辑,防止后面复制的影片剪辑替换掉前面的影片剪辑,要设置每一个影片剪辑的深度参数,来规定新影片在舞台上的叠加次序。

2random()函数是一个随机函数,这个函数实现的是在设定的最大数值和0之间随机地返回一个数值。

3_root语句的使用:处于全局属性的标识符中。

_root”是Flash中比较特殊的用法,表示后主场景中的绝对路径,使“.”来连接后面的语句,如_root.snow代表主场景中的snow实例。

另外,本课还使用到了_visible_x_y(轴坐标值属性)、_xscale_yscale_rotation_alpha属性,请详见课本P141页。

二、“下雨”实例制作

1、制作一个影片元件:一滴雨水滴落的过程。

    雨滴落下   水圈扩大

2、“下雨”的代码

返回到场景,将完成的影片元件拖入到场景中,并且将该实例取名为“drop”。

新添加一个图层,取名为“as,在第一关键帧上的代码:

第三关键帧上的代码:

三、“飘雪”实例制作(素材下载)

1、制作一个图处元件:雪片

2 制作一个影片元件:一片雪花飘落的过程(引导层)

3、“下雪”的代码:

第一关键帧上的代码:

思考:此段代码有没有需要修改的地方?

第二关键帧上的代码:

第三关键帧上的代码:

四、 根据所给素材制作引导页(练习按钮的制作)

制作完毕后,想想可以如何创作一下,把它改编成一个网站的引导页。

五、本周作业:

1、第一题:下雨

2、第二题:飘雪

3、引导页(按钮)

第十七周 达标复习一

教学目标:

1、巩固各类知识点:时间线、按钮、遮照、变形。

2、达标复习。

教学过程:

一、蜜蜂采蜜:

关键点:1、背景,蜜蜂的绘制。

2、引导线动画制作。

二、残影文字

关键点:1、文字处理。渐变填充、多层文字旋转的位差。

2、帧的复制,粘贴。

3、透明度,旋转的设置。

三、地球与网络

关键点:1、图片的分割。

2、分散到图层。

四、进度条

关键点:1、图片的处理。

2、逐帧动画。

3、形状补间动画。

五、小球滚山坡

关键点:1、场景的绘制。

2、引导线的绘制。

3、动作补间动画。

第十八周 引导层的应用

教学目标:

1、进一步理解和掌握引导线的绘制和引导层的设置;

2、掌握引导层在动画制作中的应用。

教学重点: 引导线的绘制,及分析Flash中引导线。

教学难点: 对知识的梳理和理清引导层路径动画制作的思路,提高分析问题的能力。

教学过程:

一、课前热身:

观察下面的两个flash动画,思考分别在做什么运动,是通过Flash中的什么动画实现的呢?并完成两幅作品。

唉…我不会拐弯!

  瞧我,跳得多自由!

回顾:路径动画知识点 跳动小球制作视频

二、新课:实例应用(素材下载)

观看实例,同时也分析该例中用到了哪些动画效果?哪一处运动应用了引导层? (实例浏览)

我们可以将整个动画进行分解:

1)先创建单个小球跳动动画,设计效果如下:

(界面设计图,制作视频)

思考:

1、如何形成小球有远及近的视觉效果?

要点提示

2、如何控制小球运动的节奏,使之符合万有引力定律?

要点提示

2 有了第一步,接下来我们就要对引导层和引导对象进行拓展应用。比如,要求完成下面这种效果。

(界面设计图,制作视频)

点评:1、一个引导层可以为多个图层提供运动轨迹,同时在一个引导层中可以有多条运动轨迹。

2 引导线允许重叠,比如螺旋状引导线,但在重叠处的线段必需保持圆润,让Flash能辨认出线段走向,否则会使引导失败。

三、知识扩展

在网络上可以搜索到很多相关的路径动画影片,希望大家能通过分析,模仿制作出类似的动画效果,比如物理课件中经常用到的平抛动画、MTV场景中的落叶效果以及非常炫酷的激光写字效果等等:

(路径绘制图)

(路径绘制图)

(路径绘制图)

四、总结点评:

1 、掌握做引导层时的几个注意点,做出引导动画效果。

2 、能综合所学的 Flash 相关知识,自己构思并制作出较复杂的动画影片。

五、课后作业:

1、模仿完成实例下面环节的效果,可以发散思维,适当添加其他的效果。

补充知识:图层文件夹的使用。

2、预习遮罩层的应用。

第十九周 达标复习二

教学目标:

1、巩固复习各类知识点。

2、复习并掌握达标中级题。

教学过程:

一、拖动的探照灯:

关键点:按钮的制作、影片元件、元件的设置、遮照技巧、鼠标跟随运动。

二、图片展

关键点:淡入淡出动画、帧标签设置、鼠标控制动作

三、百叶窗

关键点:分清楚各层之间的关系,花的图片在背景层,树林的图片在被遮照层,变形条的影片剪辑要放在遮罩层;影片剪辑是由若干个变形条的影片剪辑组成,正好布满图片,这样才能保证完成遮照效果。

四、闪闪红星

关键点:1、图形的绘制,利用多边形工具绘制一个等腰三角形,画完后把中心点拖到边角上,进行变形工具的复制应用(旋转10度~12度左右)

2、场景中总共分为三层,最低层为被遮照层,图形水平反转,静态状,第二层为遮照层,图形作旋转动画,第三层放入五角形

3、五角形的绘制,放射性渐变填充,白色笔触,然后连接各顶点。

五、按钮:

关键点:分清楚按钮的四种状态,在弹起状态放入静态的圆;指针经过状态放入圆和旋转棒的影片剪辑,注意叠放顺序;在按下状态放入静态的大圆和小棒的组合图形;最后把按钮放入场景中

六、下雨

关键点:1、雨滴影片剪辑的制作。场景中该实例的命名。

2、动作脚本的添加。

flash动画制作教案

相关推荐