13级《FLASH动画设计》教案.docx

13级《FLASH动画设计》教案.docx

《13级《FLASH动画设计》教案.docx》由会员分享，可在线阅读，更多相关《13级《FLASH动画设计》教案.docx（58页珍藏版）》请在冰豆网上搜索。

13级《FLASH动画设计》教案

瓦房店市职业教育中心

2013-2014学年第二学期

教师学期授课计划

　课程名称＿FLASH动画设计＿

任教班级13计算机班

教研室计　算　机＿

教师姓名　＿xxxxxxxx＿

课程表

2013-2014学年第二学期

节数

星期一

星期二

星期三

星期四

星期五

上午

第一节课

第二节课

第三节课

13计算机

第四节课

下午

第五节课

13计算机

第六节课

第七节课

第八节课

瓦房店市职业教育中心2013-2014学年第二学期

学科教学工作计划

教师：

xxxxxx学科：

FLASH动画设计专业：

计算机年级：

13级

学生情况分析

学生基础参差不齐，学习积极性不高

教学内容分析

教学内容全面、难度不大，适应不同层次学生的不同需求

教学目标

培养学生的学习兴趣，提高学生的实践操作能力

提高教学

质量措施

注重学生学习兴趣的培养，加强基本功的训练

教学进度表

周次

起止日期

课时

教学内容

备注

1

3月3日-3月7日

4

动画设计概述

2

3月10日-3月14日

4

逐帧动画

3

3月17日-3月21日

4

逐帧动画

4

3月24日-3月28日

4

补间动画

5

3月31日-4月4日

4

补间动画

周次

起止日期

课时

教学内容

备注

6

4月7日-4月11日

4

元件的介绍

7

4月14日-4月18日

4

元件的介绍

8

4月21日-4月25日

4

文字动画：

9

4月28日-5月2日

4

文字动画：

10

5月5日-5月9日

4

引导层动画和遮罩层动画的制作

11

5月12日-5月16日

4

引导层动画和遮罩层动画的制作

12

5月190日-5月23日

4

引导层动画和遮罩层动画的制作

13

5月26日-5月30日

4

跳动的音符

14

6月2日-6月6日

4

跳动的音符

15

6月9日-6月13日

4

FLASH-MTV的创作

16

6月16日-6月20日

4

FLASH-MTV的创作

17

6月23日-6月27日

4

动画的发布与后期编辑

18

6月30日-7月4日

4

特效体验

19

7月7日-7月11日

4

课件制作

专业

计算机

学科

动画设计

班级

13计算机

时间

3.4

第1课

课题

动画设计概述

教法

讲授

课型

新授

教学

目标

认知

认识FlashMX2004的历史、特点

技能

懂得安装FlashMX2004

情感

培养学生的学习兴趣，使学生主动学习

教材

分析

重点

安装FlashMX2004

难点

安装FlashMX2004

关键

安装FlashMX2004

教具

环节

教师讲授指导内容

学生活动

时间

组织教学

开始部分：

介绍这节课要讲的知识点：

•1、FlashMX的历史

•2、FlashMX的特点

•3、FlashMX的安装

展开部分：

FlashMX概述

1．1．1Flash的历史

Flash的前身是美国一家电脑公司生产的一个很小的计算机软件，早期称为FutureSplash。

从flash1.0发展到现在的flash9.0。

我最常用的还是flashMX2004版本。

1．1．2Flash的特点

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

2．通过使用关键帧和元件，使得所生成的.swf格式的动画文件非常小。

3．将音乐、动画、声效融合在一起。

这样使得越来越多的人把Flash作为网页动画设计的首选工具。

4．拥有功能强大的ActionScript语言，有自己的ActionScript函数、属性和目标对象等，兼容并支持Flash低版本。

另外，它与当今最流行的网页设计工具Dreamweaver配合默契，可以直接嵌入网页的任一位置，非常方便。

FlashMX的特点还有很多，需要我们在学习本教程的过程中，认真仔细的去体会。

FlashMX安装

1．2．1FlashMX的系统需求

•600MHz英特尔奔腾Ш处理器或以上。

•Windows98SE，Windows2000，或WindowsXP。

•128MB内存（FlashMX较以前版本，占用内存较大，建议使用256MB内存）。

•190MB可用硬盘空间。

1．2．2FlashMX的安装过程

现场展示安装过程。

小结：

听讲

3’

15’

25’

3’

作业

复习课堂知识。

专业

计算机

学科

动画设计

班级

13计算机

时间

3.5

第2课

课题

动画设计概述

教法

讲授

课型

新授

教学

目标

认知

熟悉FlashMX2004的常用工具和面板

技能

能使用FlashMX2004的常用工具和面板

情感

培养学生的学习兴趣，使学生主动学习

教材

分析

重点

FlashMX2004的常用工具和面板

难点

FlashMX2004的常用工具和面板

关键

FlashMX2004的常用工具和面板

教具

环节

教师讲授指导内容

学生活动

时间

组织教学

新授

FlashMX的工作环境

分别介绍以下几个知识点：

1、标题栏：

2、菜单栏：

3、时间轴：

4、工具箱：

5、舞台：

6、各种面板：

1．3．3场景与舞台

1．3．4时间轴窗口

1．3．5工具栏

1．3．6浮动面板

•1、属性面板

•2、混色器面板

•3、颜色面板

4、信息面板

•5、变形面板

6、动作面板

•7、电影浏览器面板

•8、库面板

学生练习

小结

听讲

5’

5’

30’

5’

板书

设计

作业

复习课堂知识。

专业

计算机

学科

动画设计

班级

13计算机

时间

3.7

第3课

课题

逐帧动画

教法

讲授

课型

新授

教学

目标

认知

理解时间轴和帧的概念及操作

技能

懂得绘图工具的使用和图形颜色的编辑

情感

培养学生的学习兴趣，使学生主动学习

教材

分析

重点

逐帧动画的制作

难点

逐帧动画的生成

关键

逐帧动画的生成

教具

环节

教师讲授指导内容

学生活动

时间

开始部分：

在了解Flash的历史、特点，以及相应的工作环境后，心急的你一定想亲自动手制作动画了吧？

展开部分：

•绘图工具的使用动画里包含各种各样精彩的图形，使用工具箱里的基本画图工具就可以绘制出自己想要的图形。

比较常用的有铅笔工具、钢笔工具、直线工具、椭圆工具、矩形工具等，尽管使用这些工具创建的矢量图形比较简单，但是这些简单的图形对象是创建复杂矢量图形的基础。

下面我们通过一些简单实例来介绍如何使用这些工具创建矢量图形。

实例剖析

帧帧动画，也叫逐帧动画，是由若干个连续关键帧组成的动画序列，是和传统的动画制作方式类似的最为基础的动画制作方式。

在制作这种动画时，需要对每一帧的内容进行逐个绘制，工作量非常大，但是其所产生的动画效果，也是相当强的。

帧帧动画非常适合于制作复杂的动画场景，这样可以通过每一帧的内容来表现对象发生的微妙过程。

但帧帧动画对于人员的绘图技巧有着较高的要求，而且文件的数据量也变得非常大。

下面介绍其制作步骤。

编辑帧帧动画的具体步骤如下：

1．单击某个图层使其成为当前层；

2．在该层上选择起始帧；

3．把起始帧设置为关键帧；

4．设置背景图；

5．在起始帧建立动画内容；

6．设置起始帧后的第2帧，将该帧设置为关键帧，然后编辑内容；

7．重复第6步，设计其他的每一帧；

8．执行【控制】菜单中的【测试影片】命令观看设计效果；

9．关闭播放窗口，回到编辑舞台，如不满意重新编辑；

10．重复第8、第9步，直到设计出满意的效果为止。

小结。

听讲

操作

10’

30’

5’

作业

习题

专业

计算机

学科

动画设计

班级

13计算机

时间

3.12

第4课

课题

逐帧动画

教法

讲授

课型

新授

教学

目标

认知

理解时间轴和帧的概念及操作

技能

懂得绘图工具的使用和图形颜色的编辑

情感

培养学生的学习兴趣，使学生主动学习

教材

分析

重点

逐帧动画的制作

难点

逐帧动画的生成

关键

逐帧动画的生成

教具

环节

教师讲授指导内容

学生活动

时间

制作一个小跳动的秒表，具体操作步骤如下：

⑴选择【文件】菜单中的【新建】命令，在弹出的【新建文档】对话框中选择“Flash文档”。

⑵在文档【属性】对话框中将舞台大小设置为500*100像素，背景色为淡紫色，使用默认帧频12fps（帧/秒），如图2-27所示。

实例剖析

⑶在工具箱中选择文本工具，在舞台下边的【属性】面板中设置字体为ArialBlack，字体大小为60磅，字体颜色为黑色，如图2-28所示。

⑷在舞台中间单击鼠标，看见文本输入标志，输入数值“01”，在上边的时间轴中可以看到第1帧出现了一个黑色圆点，表示已经建议了一个有内容的关键帧，如图2-29所示。

⑸在时间轴上单击第2帧，按F6键，即插入一关键帧，可以看到第2帧的位置上出现了一个黑色圆点，表示第1帧的内容被完全复制到了第2帧上。

选中第2帧，将原来的“01”删除，改成“02”，这样第2个关键帧所对应的内容为数字“02”，如图2-30所示。

⑹按照第5步的方法继续下去，在第3帧上插入一个关键帧，将舞台上的数字改成“03”。

在第4帧上插入一个关键帧，将舞台上的数字改成“04”……依次类推，到第10帧的数字为“10”，如图2-31所示。

⑺用鼠标单击第一帧，指定第一帧为当前帧。

执行【控制】菜单下的【测试影片】命令，可以观看到数字变化的过程。

小结

观察

操作

10’

30’

5’

作业

习题

专业

计算机

学科

动画设计

班级

13计算机

时间

3.14

第5课

课题

补间动画

教法

讲授

课型

新授

教学

目标

认知

懂得图形工具的使用

技能

掌握形状动画和动作动画的制作

情感

培养学生的学习兴趣，使学生主动学习

教材

分析

重点

形状动画和动作动画的制作

难点

形状动画和动作动画的制作

关键

形状动画和动作动画的制作

教具

环节

教师讲授指导内容

学生活动

时间

在舞台上创建图形后，常常需要对其进行修改、编辑等操作。

FlashMX2004提供了多种编辑矢量图形的工具，对于对象的处理方式也多种多样，包括选择对象、移动对象、对齐对象、组合和打散对象等，使用图形编辑工具对已经创建的矢量图形进行加工处理，是使基本的对象最终变得丰富多彩的必要手段。

•一．选择对象

•1、使用【箭头】工具选择对象

•2、使用【套索】工具选择对象

•二、删除、移动和复制对象

•删除、移动和复制对象是编辑对象中最基本的操作，这些操作都很简单。

•1、删除对象2、移动对象3、复制对象

•三．改变对象的大小与形状

•在FlashMX2004中，可以改变对象的大小与形状，如使用箭头工具可以任意改变对象的大小或进行缩放，使用菜单命令可以精确调整对象等等。

•1、使用箭头工具任意改变对象的大小与形状

•2．使用任意变形工具改变对象的形状

•3．使用命令菜单精确调整对象

•4、使用【变形】面板精确进行调整

•5、使用【信息】面板进行精确调整

•四．对齐对象

•在制作动画的过程中，用户需要借助许多辅助工具来布局、管理所制作的对象。

其中【对齐】工具为用户控制对象的布局提供了很大的方便。

•1．【对齐】面板2．对象间的分布与对齐3．对齐到场景

•五．组合对象

•在FlashMX2004中，经常用到对象的组合，它使用户更加轻松地将对象进行有机的结合，使操作更加合理、使用更加方便、绘图更加快捷。

•1．建立组合对象2.编辑组合对象3．解散组合对象

•六．分离对象

•分离对象，也叫作打散对象。

当需要分离对象时，执行【修改】菜单下的【分离】命令，即可将所选对象分离。

分离命令用来将集合、文本块、实例、位图和OLE对象分成独立的可编辑的元素。

它可以显著地减少输入图形的文件尺寸。

小结

听讲

操作

听讲

5

30

5

5

作业

习题

专业

计算机

学科

动画设计

班级

13计算机

时间

3.18

第6课

课题

补间动画

教法

讲授

课型

新授

教学

目标

认知

懂得图形工具的使用

技能

掌握形状动画和动作动画的制作

情感

培养学生的学习兴趣，使学生主动学习

教材

分析

重点

形状动画和动作动画的制作

难点

形状动画和动作动画的制作

关键

形状动画和动作动画的制作

教具

环节

教师讲授指导内容

学生活动

时间

实例剖析

制作动画除了有逐帧动画外，还有一种补间动画方式。

在补间动画中，又分为补间形状和补间动作两种类型。

形状渐变动画就是使图形对象在异端时间内由一种形态变成另一种形态。

形态包括图形对象的外观样式、位置、大小和颜色等。

形状渐变动画的对象只能是矢量图形。

如果要对符号、文字或者位图图片进行变形动画的话，需要先将他们打散，让它们变成矢量图。

动作动画就是改变物体两帧之间的位置，令物体从一个位置移动到另一个位置的动画。

动作动画的对象是组、符号（实例）、文本块和位图图形等。

除了实现对象位置的移动外，还可以使对象产生大小、旋转和颜色的渐变效果等。

动作动画是FlashMX2004中常用的一种动画制作方法。

但动画制作也有局限性，如初学者经常在舞台上绘制一些矢量图形，在没有转换成元件之前，是不能创建动作动画的。

下面通过两个具体的例子来学习形状动画和动作动画。

3．2．1形状渐变动画——圆变化为正方形

如下步骤中我们制作一由圆变化为正方形的形状渐变动画。

（1）选择【文件】菜单下的【新建文件】，建立一flash文件。

（2）在工具箱中选择椭圆工具，关闭笔触颜色，选用绿色填充色。

在舞台中画出一个正圆。

（3）选中时间轴上任一帧，如第15帧，单击鼠标右键，选择“插入空白关键帧”，如图3-62所示。

（4）在工具箱中选择矩形工具，在舞台中画出一个矩形，看到时间轴上第15帧变成有黑圆点的关键帧，如图3-63所示。

（5）在时间轴上单击第1帧，指定这一帧为当前帧。

在“属性”栏“补间”下拉框中选择“形状”选项。

看到时间轴上从变形起始帧到结束帧之间产生了一条带箭头的实线，如图3-64所示。

（6）到此，形状渐变动画已经制作完毕。

按回车键，可以看到起始帧的圆逐渐变成了结束帧的正方形。

3．2．1动作动画——颜色渐变的运动球

下面步骤我们制作一个运动的球，在运动过程中颜色从绿色到无色，再从无色到绿色。

（1）选择【文件】菜单下的【新建文件】，建立一flash文件。

（2）在工具箱中选择椭圆工具，关闭笔触颜色，选用绿色为填充色。

在舞台中画出一个正圆。

（3）选中绘制的圆，将其转化为“图形元件”，名称为“球”。

（4）选中第1帧，将球拖放到舞台的最左边。

（5）选中第10帧，按F6键，复制一关键帧。

选中球，将球拖放到舞台中间。

在【属性】面板【颜色】选项中，选择“Alpha”，将其设置为“0%”。

如图3-65所示。

（6）选中第20帧，按F6键，复制一关键帧。

选中球，将球拖放到舞台最右边。

在【属性】面板【颜色】选项中，选择“Alpha”，将其设置为“100%”。

（7）在时间轴上单击第1帧，指定这一帧为当前帧。

在“属性”栏“补间”下拉框中选择“动作”选项。

选种第10帧，做同样的设置。

看到时间轴上从变形起始帧到结束帧之间产生了一条带箭头的实线，如图3-66所示。

（8）至此，动作动画已经制作完毕。

按Ctrl+回车键测试影片。

可以看到球从舞台的最左边运动到舞台的最右边。

同时，在运动的过程中，球的颜色从绿色变化到无色，再从无色到绿色。

小结

听讲

操作

15

25

5

板书

设计

作业

实例

专业

计算机

学科

动画设计

班级

13计算机

时间

3.20

第7课

课题

元件的介绍

教法

讲授

课型

新授

教学

目标

认知

理解元件和实例的概念及区别

技能

懂得创作三种类型的元件

情感

培养学生的学习兴趣，使学生主动学习

教材

分析

重点

创作三种类型的元件并知道他们之间的区别。

难点

图形元件与影片剪辑元件的区别

关键

图形元件与影片剪辑元件的区别

教具

环节

教师讲授指导内容

学生活动

时间

展示上节课好的作品以及需要完善的作品。

和学生一起点评所展示作品的优缺点。

做动画，用得最多的是三种元件，用它可以编辑丰富多彩的场景画面。

这三种元件就是：

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

下面我们深入认识它们。

展开部分：

•元件和实例是制作动画的基础。

在FlashMX2004中，无论是简单的渐变动画，还是复杂的动作脚本，都是基于元件的。

•一、元件和实例

•1．元件和实例的概念

元件又称为符号（Symbol）或图符，它是在元件库中存放的各种图形、动画、按钮或者导入的声音和电影文件。

这里我们所讲的图形可以是内部创建的矢量图形，也可以是从外部导入的JPG、GIF和BMP等各种FlashMX2004所支持的图形格式。

可以先制作或导入元件，然后将其存在库中。

当用户想使用时，只要打开这个库，直接引用它。

此时用户使用的元件只是该元件的一个复制品而已。

实例就是将元件从库中拖放到舞台上创建的一个该元件的引用。

用户可以随意地对引用的元件进行编辑和修改，而不会影响该元件的属性。

如图3-32所示为由元件创建的3个实例。

这3个实例分别是原形、经过缩放和旋转后的图形。

•1、元件和实例的关系

•我们可以把元件看作是一种模板，使用同一个模板能够创建多个互不相同的实例。

也就是说，舞台上表演的是元件的实例，而不是元件本身。

对元件的属性，如颜色和形状以及边线的粗细等，我们也可以改变。

当对元件的属性更改后，舞台上所有实例的属性也跟着发生相应的变化。

•2、将图形转化为实例的优点

•根据上面的介绍可以看出，使用元件的优点，就是在将图形转化为元件后，可以创建出理论上无限多个实例，并且对该元件的修改可以全部赋予它的所有实例，而不必逐一去修改。

当制作多个相同的阵列式的图象时，可以方便用户的操作，大大减少工作量。

•另一方面，使用元件还可以大大减小文件的体积，将多个分离的图形元素合并成一个元件后，所需的存储空间远远小于单独存储时占用的空间，而且一个元件的多个实例只占一个元件的空间，这样就能加快动画的播放速度，加快动画在网络中的传输速度等。

•3、元件的分类

•元件主要有图形、影片剪辑和按钮3种类型，不同类型的元件有着不同的作用。

•【图形】元件主要用来制作动画中的静态图形，不具有交互性。

图形元件具有相对独立的编辑区域和播放时间，当应用到场景中时，会受到当前场景中帧序列和其他交互式设置的影响。

•【影片剪辑】元件又称为影片片段，是可单独重复使用的动画片段。

它有自己的时间线，主要用来制作独立于主影片时间轴的动画，可以包括交互性控制、声音甚至其他影片的部分剪辑，也可以把影片剪辑实例加载到按钮的时间轴中，从而实现动画按钮。

有时候为了实现动画的交互性，还可以将单独的图象制作成影片剪辑元件。

•影片剪辑元件和图形元件都可以是一个动画，但是在播放时是有区别的，影片剪辑实例只需要一个关键帧就可以播放，它是完全独立于主场景的。

如果主场景播放已经结束，但它的时间轴还是继续向前播放，直到影片剪辑播放完，然后它将返回到影片剪辑的第1帧。

而图形实例必须放在需要它的每一帧里，所以图形实例动画可以设置其播放的具体位置。

•【按钮】元件是一个只含有4帧的特殊影片剪辑。

主要用于创建在影片中对标准的鼠标事件（如点击、滑过或移离等）做出响应的交互性按钮。

按钮元件有四种状态，即弹起、指针经过、按下和点击，每种状态都可以通过图形、元件以及声音来定义。

小结

听讲

听讲

操作

5

15

20

5

作业

练习课堂知识

专业

计算机

学科

动画设计

班级

13计算机

时间

3.24

第8课

课题

元件的介绍

教法

讲授

课型

新授

教学

目标

认知

理解元件和实例的概念及区别

技能

懂得创作三种类型的元件

情感

培养学生的学习兴趣，使学生主动学习

教材

分析

重点

创作三种类型的元件并知道他们之间的区别。

难点

图形元件与影片剪辑元件的区别

关键

图形元件与影片剪辑元件的区别

教具

环节

教师讲授指导内容

学生活动

时间

一、导入外部素材为元件

Flash本身有很强的图象和动画的制作过程，但是还是有很多素材不能够也不需要由Flash制作。

FlashMX2004有一非常开放的工作环境，可以把动画、图像、声音等由外部直接引入。

跟元件一样，所有引入的素材都可以放置在【库】面板中。

在这里我们导入的外部素材主要包括3种类型：

图象素材、视频素材和音频素材。

图象素材：

常用的两种格式是JPG和GIF格式。

视频素材：

常用的格式为mov，它是QuickTime视频格式文件，但是这种格式的文件，不能在Flash中直接播放，必须安装QuickTime播放器才能观看。

音频素材：

音频素材的类型有WAV格式，其具体的导入和编辑方法在以后的章节中会具体讲到。

一、创建元件

1、创建图形元件

图形元件可以是矢量图形、图象、动画或声音，它主要用来制作动画中的静态图形。

创建图形元件主要有两种方式，一是使用菜单命令创建一个新的空的图形元件，然后再通过元件编辑舞台进行修改、添加内容。

二是直接将舞台工作区中的图形、图像对象转化为图形元件。

还可以将外部的GIF动画转化为图形元件，甚至将舞台工作区的动画转化为图形元件。

下面重点介绍前两种方法。

▲将舞台工作区的对象转换为元件