Flash动画及课件开发Word文件下载.docx
- 文档编号:21043596
- 上传时间:2023-01-27
- 格式:DOCX
- 页数:27
- 大小:765.25KB
Flash动画及课件开发Word文件下载.docx
《Flash动画及课件开发Word文件下载.docx》由会员分享,可在线阅读,更多相关《Flash动画及课件开发Word文件下载.docx(27页珍藏版)》请在冰豆网上搜索。
①运行FlashMX,打开的窗口就是新建的一个[无标题-1]的Flash文件。
②先在工具箱中选择椭圆工具按钮
,在舞台右侧绘出一个圆。
注意:
由于FlashMX默认第1帧是空白关键帧,故没有必要在第1帧建立空白关键帧。
③选择第30帧,点击鼠标右键,在随后弹出的快捷菜单中选择“插入关键帧”。
④紧接着上一步按Delete键删除该帧(第30帧)的圆形,在工具箱中选择矩形工具按钮
,在舞台左侧绘出一个矩形。
⑤选择第1帧,点击鼠标右键,在随后弹出的快捷菜单下方选择“属性”,打开“属性”对话框。
在“属性”对话框中间,有一个选项“中间”,表示两关键帧之间动画的类别。
点击该栏右边列表按钮
,从下拉列表中选择“形状”,如图3-1所示。
图3-1选择“形状”
这里,选择“形状”是为了制作一个形状渐变动画。
关于动画的类别在下一节中将会介绍。
⑥关闭“属性”对话框。
此时可以看到时间轴上起始关键帧与终点关键帧之间呈浅绿色背景,有一箭头指向终点关键帧——说明动画制作已经成功!
⑦保存文件后,按“Ctrl+Enter”键测试影片并输出一个同名的Flash电影。
从这个实例中,我们可以总结一下:
(1)Flash动画必须在两个不同画面的关键帧之间完成,中间的动画实际上是由计算机运算出来的。
如果只有一个关键帧,无法要求计算机制作出动画。
(2)动画制作完成后,一定要测试动画。
测试动画的同时,会输出一个同名的Flash电影。
读者可以从Windows操作系统的窗口打开自己保存的该实例文件,会发现两个同名的Flash文件:
●一个文件的图标是
,相应的文件扩展名是“.FLA”——这是Flash原程序文件。
,相应的文件扩展名是“.SWF”——这是Flash影片文件。
3.3Flash动画的分类
各种各样的动画五彩缤纷,动画的制作技巧也层出不穷,究竟怎样将Flash动画进行分类呢?
我们将Flash动画进行分类,一般是按动画创作的方法来区分的。
我们制作Flash动画既可以一帧一帧的绘制,也可以只设定两个关键帧,由计算机运算逐渐改变的中间画面来完成。
因此,Flash动画一般可分成两大类:
逐帧动画与渐变动画。
渐变动画又可以根据两关键帧之间的变化对象分成形状渐变动画(变化对象是图形)和移动渐变动画(变化对象是元件),如图3-2所示。
图3-2Flash动画分类
3.4逐帧动画
逐帧动画的每一幅画面均是由关键帧构成。
如图3-3所示是一个逐帧动画的时间轴示意,通过此图可以看到连续的画面都是关键帧。
图3-3逐帧动画的时间轴
我们所做的逐帧动画可以去使用绘图工具在每一帧中绘制,也可以从外部逐帧导入图片。
这里就不演示逐帧绘制画面的逐帧动画,下面介绍从外部导入图片的两种逐帧动画制作方法。
3.4.1逐帧动画方法一
这种方法是先建立连续空白关键帧,再逐帧从外部导入图片。
操作步骤如下:
①先选中第1帧,接着按住Shift键选定逐帧动画的最后1帧点击鼠标右键,在弹出的快捷菜单中选择“转换为关键帧(ConverttoKeyframes)”命令,将所有选中的帧都转换成空白关键帧。
②逐次选中每一空白关键帧,执行菜单命令“文件”→“导入…”,从预定的目标位置导入图片。
3.4.2逐帧动画方法二
这种方法是先将准备导入的图片放入同一文件夹中,然后依次将这些图片文件取同一文件名且加上图片出现的序号,最后导入到逐帧动画的起始帧。
①将准备导入的图片放入同一文件夹中,然后依次将这些图片文件取同一文件名且加上图片出现的序号。
例如:
“N0051”、“N0052”、“N0053”、“N0054”……,如图3-4所示。
图3-4图片文件的序号
②在FlashMX的时间轴中,选定准备插入逐帧动画的起始帧,执行菜单命令“文件”→“导入…”,从预定的文件夹中导入图片,此时系统会弹出一个对话框如图3-5所示。
图3-5询问是否输入全部图像序列的对话框
③在上图的对话框中选定“是”,系统将按序号导入所有的图片形成逐帧动画,完成这部分的逐帧动画制作。
在后面综合实例中,笔者还会运用到逐帧动画的制作方法。
3.5形状渐变动画
对象形状逐渐改变的动画叫做形状渐变动画。
在形状渐变动画中,对象的位置可以移动、对象的颜色可以改变,但这种变化是以矢量图形对象为动画主角。
舞台上的矢量图形,在没有转化为素材库中的元件之前,只是普通的图形,因此只能用来制作形状渐变的动画,不能用来制作移动渐变动画。
3.5.1.形状渐变动画
形状渐变动画发生在两个不同形状的矢量图形之间,我们只要在两个关键帧上绘制不同的图形就可以了。
例1燃烧的蜡烛
①运行FlashMX,新建的一个Flash文件,保存文件名为“燃烧的蜡烛”。
②先在工具箱中选择矩形工具按钮
,接着在颜色选项栏选定描绘颜色工具
,再点击下面的没有颜色按钮
,随后在舞台上绘出一个没有轮廓线的矩形。
③执行菜单命令“窗口”→“调色板”,打开调色板面板。
选择“线性”填充方式,在色彩区域调整区设定左侧为白色,右侧为深红色,如图3-6所示。
设置完成后关闭窗口。
图3-6设置第③步的调色板图3-7设置第⑧步的调色板
④选择工具箱的填充工具
,在矩形中心单击,完成线性填充。
⑤为矩形所在图层取名为“蜡烛”,然后中第60帧点击鼠标右键,从快捷菜单中选择“插入帧(InsertFrame)”命令。
这是为了使静止的蜡烛图像作为背景一直保持在场景中。
⑥点击时间轴左侧插入图层按钮
,新建一个图层,取名为“火焰”。
⑦在“火焰”图层第1帧,先在工具箱中选择椭圆工具按钮
,随后在舞台上绘出一个没有轮廓线的椭圆。
⑧再次执行菜单命令“窗口”→“调色板”,打开调色板面板。
选择“径向”填充方式,在色彩区域调整区设定左侧为白色,中间为红色,右侧为浅黄色,如图3-7所示。
⑨选择工具箱的填充工具
,在椭圆下端单击,完成径向填充。
再用
工具编辑椭圆,使之成为火焰状。
⑩分别在“火焰”图层的第15帧、第30帧、第45帧、第60帧插入关键帧,并对每一帧的火焰形状进行修改,如图3-8所示。
图3-8各关键帧的火焰形状
分别选定“火焰”图层的第15帧、第30帧、第45帧后点击鼠标右键,在随后弹出的快捷菜单下方选择“属性”,打开“属性”对话框。
在选项“中间”栏下拉列表中选择“形状”,依次形成形状渐变动画后关闭“属性”对话框。
再次保存文件,按“Ctrl+Enter”键测试影片并输出一个同名的Flash电影。
通过动画展示窗口可以看到蜡烛的火焰在微风中摇曳。
如果在这个实例中选择黑色作为背景,可以得到更真实地效果。
通过上面这个例子,我们可以看到要设计燃烧的酒精灯、篝火等都可以如法炮制。
它还给我们一个启示:
凡是要制作一个动态的图形在静止的背景中变化,可以将它们分别放在动态图层与静止图层之中,这样便于编辑修改。
在图形渐变动画中,并不是要求起始帧与终点帧画面一定都只有一个图形。
如果要设计一个图形变成多个图形,也是可行的。
下面是一个图形分裂成多个图形的实例。
例2分裂
①运行FlashMX,新建的一个Flash文件,保存文件名为“分裂”。
,去掉轮廓线,任选一种填充色,在舞台上绘出一个没有轮廓线的圆。
选中圆,点击常用工具栏的复制按钮
。
③在第30帧插入关键帧,接着点击常用工具栏的粘贴按钮
,将复制在舞台中心的圆拖放到舞台下方。
按此操作连续复制三次。
④选定第1帧后点击鼠标右键,在随后弹出的快捷菜单下方选择“属性”,打开“属性”对话框。
在选项“中间”栏下拉列表中选择“形状”后关闭“属性”对话框。
⑤再次保存文件,按“Ctrl+Enter”键测试影片并输出一个同名的Flash电影。
3.5.2绘图纸功能
图形变化的中间过程也可以显示出来,这种显示需要使用绘图纸功能。
绘图纸功能不仅适用于形状类渐变动画,也适用移动类渐变动画。
绘图纸功能一般也称为洋葱皮窗口。
这种创作动画的过程模拟的是传统的动画片制作方式。
在传统的动画制作方式中,一般将一张张动作连贯的透明胶片固定叠加在灯箱上作画,由于灯箱可以清晰透出叠在下面的每张透明胶片的内容,所以绘制下一张时可以轻松地掌握图像位置关系。
以前面“例2分裂”为例,在动画的时间轴上点击绘图纸外观按钮
,帧数标尺上将显示出绘图纸起点标记符号和终点标记符号。
拖动起点标记符号或终点标记符号可以改变绘图纸描绘的起始位置,如图3-9所示。
图3-9绘图纸的起始位置图3-10进入绘图纸状态的显示
这里介绍绘图纸功能的四个按钮:
绘图纸外观
、绘图纸边框
、编辑多帧
、修改标记
●绘图纸外观
:
单击此按钮,动画进入绘图纸状态。
如图3-10所示,即是“例2分裂”进入绘图纸状态的显示。
●绘图纸边框
以外框形式显示动画的绘图结果。
如图3-11所示,即是“例2分裂”显示绘图纸边框的状态。
图3-11显示绘图纸边框的状态图3-12显示绘图纸边框和编辑多帧状态
●编辑多帧
当按下此按钮时,所有的关键帧的内容均会与原色的方式出现在舞台上,并且显示的关键帧可以选取和进行编辑,此按钮最好与绘图纸边框按钮
一起使用,以便观察得更清晰。
如图3-12所示,即是“例2分裂”同时按下绘图纸边框
和编辑多帧
的绘图纸状态。
●修改标记
当按下此按钮时,会弹出绘图纸设定的相关菜单。
3.5.3.颜色变化的形状渐变动画
在FlashMX中,颜色变化的形状渐变动画在制作上与普通形状渐变动画没有什么差异,只要在动画的起始帧图形与终点帧图形上设定图形不同的颜色即可。
无论起始帧图形颜色与终点帧图形颜色有什么差别,也不管填充颜色采用的是纯色填充还是渐变填充(即线性填充或径向填充),计算机都会自动完成这种颜色变化的动画。
3.5.4.添加形状提示控制点的形状渐变动画
有时候我们在形状渐变动画中设定起始图形与终点图形,在测试结果的影片中,动画确实是由起始图形变成了终点图形,但我们却感觉失望,这是为什么呢?
这是因为我们有时不仅要求图形变化由起始图形变成终端图形,同时还希望变化过程能按我们的设计进行。
这时,运用形状提示控制点能帮助我们来控制图形的变化过程
形状控制点是指在图形的起点关键帧设定控制点a、b、c、d、e……,这些点设置在图形的某些重要位置上。
在终点帧,也会有相应的控制点,将这些点拖放到预先设计的特定位置上。
起始帧的控制点与终点帧的控制点一一对应:
起始帧的a点渐变到终点帧的a
点、起始帧的b点渐变到终点帧的b点、起始帧的c点渐变到终点帧的c点……,复杂的图形变化也能在控制点的控制下乖乖听话。
下面我们通过一个例子来研究形状提示控制点的使用方法。
例3添加形状提示点的研究
①新建的一个Flash文件,在工具箱中选择矩形工具按钮
,在舞台左侧绘出一个矩形,去掉填充色。
②在第30帧插入关键帧,将矩形拖放到舞台右侧。
③选定第1帧后点击鼠标右键,在随后弹出的快捷菜单下方选择“属性”,打开“属性”对话框。
④按“Ctrl+Enter”键测试影片,可以看到图形渐变动画已经成功。
下面是研究形状提示控制点的使用。
⑤选定第1帧,执行菜单命令“修改”→“外形”→“添加形状提示”,会在矩形中央出现一个红色的“a”点。
接着按“Ctrl+Shift+H”键多次,会依次出现“b”、“c”、“d”。
将这些点拖放到四个角上。
此时分别选中起始帧与终点帧观察,会发现起始帧的红色形状提示点分布在四个角上,而终点帧的红色形状提示点还叠放图形中央。
显示结果如图3-13所示。
图3-13起始帧与终点帧形状控制点
下面将分别设置终点帧的形状提示控制点在图形的不同位置上,研究控制点的控制效果。
为了清晰地观察到变化过程,我们打开绘图纸功能的边框按钮
和编辑多帧按钮
,并设置绘图纸起点与动画起点一致、绘图纸终点与动画终点一致。
⑥设置终点帧形状提示控制点的位置与起点帧的形状提示控制点相同,敲Enter运行结果如图3-14所示。
图3-14终点帧与起点帧的形状提示控制点位置相同的动画
⑦设置终点帧每一个形状提示控制点的位置依次逆时针移动一个角,敲Enter运行结果如图3-15所示。
读者可以清晰地看到图形逆时针逐渐变化。
图3-15图形逆时针逐渐变化
⑧相对于步骤⑥,设置终点帧的“a”点和“c”点到对角线的角上(即交换两个点的位置),敲Enter运行结果如图3-16所示。
读者可以清晰地看到图形绕bd对角线进行了翻转。
图3-16图形绕bd对角线进行翻转
⑨相对于步骤⑥,设置终点帧各形状提示控制点到对角,敲Enter运行结果如图3-17所示。
图3-17终点帧各形状提示控制点到对角
关于形状提示控制点,还有两点要说明:
●FlashMX的形状控制点共有26个,即从英文字母a至z。
一般情况下,无论怎样复杂的图形变化都能够控制。
●在起始帧与终点帧的形状提示控制点设置完毕时,起始关键帧的变形提示控制点呈现为黄色,而终点关键帧中的形状提示控制点呈现为绿色。
如果控制点不在图形曲线上,则呈现红色。
利用形状提示控制点功能可以精确地控制变形方向和方式,并使变形效果趋于平滑。
具体的效果和妙用还需要读者在实际的应用中认真琢磨。
3.6移动渐变动画
移动渐变动画是Flash动画中的主力军,大量的Flash创作作品,总是以移动渐变动画为主。
Flash软件的开发者知道这个特点,因此在快捷菜单的最上面设定了建立移动渐变动画的命令“创建动画动作(CreateMotionTween)”。
请读者注意,这个命令只适用于建立移动渐变动画。
3.6.1移动渐变动画基本操作过程
移动渐变动画与形状渐变动画的最大不同在于动画的对象:
移动渐变动画的动画对象是元件;
形状渐变动画的动画对象是矢量图形。
因此,凡是需要制作移动渐变动画时,必须先确认动画对象已是元件。
移动渐变动画的制作过程可以总结为下面的操作步骤:
⑴建立元件(含由图形转换成元件)。
⑵设定动画的起始关键帧与终点关键帧。
⑶设定动画动作。
⑷设定动画效果
下面以一个最简单的实例说明这种动画的基本操作步骤。
①运行FlashMX,新建一个文件。
②选择矩形工具
,在舞台左侧绘制出一个矩形。
接着使用箭头工具
选择这个矩形,执行菜单命令“插入(Insert)”→“转换成元件(ConverttoSymbol)”,随后在“转换成元件”对话框中选择“图形”素材,为元件取名为“矩形”,如图3-18所示。
最后点击“确定”关闭对话框。
此时矩形中央出现一个符号
(表示元件中心),矩形周围出现一个淡蓝色的边框,这说明矩形已经转换成了元件。
图3-18转换为元件对话框
③在第30帧点击鼠标右键,从快捷菜单中选择“插入关键帧”。
④选定第1帧点击鼠标右键,从快捷菜单的最上面选择“创建动画动作(CreateMotionTween)”命令。
此时时间轴上起始关键帧与终点关键帧之间呈现淡青色,有一箭头由起始关键帧指向终点关键帧。
⑤按“Ctrl+Enter”键测试影片——一个最简单的移动渐变动画已经完成,后面就可以为动画加了各种效果了。
导入GIF动画作为影片剪辑元件,能够得到更有趣味的移动渐变动画。
例4走动的小公鸡
,在舞台下方绘制出一个矩形,这个矩形将作为地面的背景存在。
双击该图层名称栏,为此图层取名为“地面”。
③选择第50帧点击鼠标右键,从快捷菜单中选择“插入帧(InsertFrame)”。
这一操作步骤是为了使地面背景从第1帧延伸到动画结束(动画共50帧)。
④执行菜单命令“插入”→“新建元件(ConverttoSymbol)”,随后在“创建新元件”对话框中选择“影片剪辑”素材,为元件取名为“公鸡”,如图3-19所示。
最后点击“确定”关闭对话框,进入元件编辑窗口。
图3-19为元件取名为“公鸡”
⑤在元件编辑窗口中,执行菜单命令“文件”→“导入”,从外部导入预先准备好的GIF动画,在素材编辑窗口的时间轴上呈现出逐帧动画,如所示。
图3-20时间轴上呈现出逐帧动画
⑥点击素材编辑窗口时间轴下方的“场景1”,回到主场景中来。
⑦新建一个图层,取名为“公鸡”。
选定第1帧,执行菜单命令“窗口”→“库”,打开元件库窗口,从元件库中拖放影片剪辑元件
“公鸡”到舞台上,调整初始位置在舞台右侧的地面上。
⑧选择第50帧点击鼠标右键,从快捷菜单中选择“插入关键帧”。
接着在该帧将公鸡拖放到舞台左侧的地面上,使得在动画移动过程中,公鸡从右侧走到左侧。
⑨按“Ctrl+Enter”键测试影片,我们将看见小公鸡神气活现地从地面上走过去,如图3-21所示。
图3-21测试影片的效果
强调指出,在步骤⑨中应该按“Ctrl+Enter”键测试影片。
如果只敲击Enter检验效果,此时Flash动画在播放状态下,GIF动画不会动——公鸡只能从右侧滑向左侧!
3.6.2旋转效果的动画
如果已经完成移动渐变动画,要为动画添加效果非常容易。
以前面例制作的简单动画为基础,我们接着添加旋转效果:
(紧接着例3)①选定第1帧点击鼠标右键,从快捷菜单中选择“属性”,打开帧属性面板。
从面板中设定旋转方向和旋转次数,如图3-22所示。
关闭帧属性面板返回舞台。
图3-22从面板中设定旋转方向和旋转次数
②为了清楚地看到旋转过程,打开绘图纸功能的边框按钮
最后按“Ctrl+Enter”键测试影片,将看到矩形旋转效果如图3-23所示。
图3-23矩形旋转效果
3.6.3改变速度的移动渐变动画
在不作设定的情况下,动画对象的运动是匀速运动。
我们可以使动画对象运动越来越快或者越来越慢,这需要设置对象的属性。
下面我们设计一辆小汽车水平运动时,速度减慢到逐渐停止下来。
例5减速停车
③选择第40帧点击鼠标右键,从快捷菜单中选择“插入帧(InsertFrame),使地面背景从第1帧延伸到动画结束(动画共40帧)。
④执行菜单命令“插入”→“新建元件(ConverttoSymbol)”,随后在“创建新元件”对话框中选择“影片剪辑”素材,为元件取名为“小汽车”,最后点击“确定”关闭对话框。
⑤在元件编辑窗口中,执行菜单命令“文件”→“导入”,从外部导入预先准备好的GIF动画,在素材编辑窗口的时间轴上呈现出逐帧动画。
⑦新建一个图层,取名为“汽车”。
“小汽车”到舞台上,调整初始位置在舞台右侧的地面上。
⑧选择第40帧点击鼠标右键,从快捷菜单中选择“插入关键帧”。
接着在该帧将小汽车拖放到舞台左侧的地面上,使得在动画移动过程中,汽车从右侧运动到左侧并停下来。
⑨选定“汽车”图层第1帧点击鼠标右键,从快捷菜单中选择“属性”,在“属性”面板“中间”栏先选择“移动”,再于“简易”栏点击右侧按钮显现出滑杆与指针。
用鼠标拖动指针可以使指针上下滑动:
●指针滑向上方,物体运动越来越慢。
●指针滑向下方,物体运动越来越快。
在这个示例中,我们将指针滑向上方,使小汽车减速运动并停下来,如图3-24所示。
设置完毕后关闭属性面板回到舞台上。
图3-24将指针滑向上方改变速度
⑩按“Ctrl+Enter”键测试影片,我们将看见小汽车运动速度减慢并最后停止运动,如图3-25所示。
图3-25例5动画效果
3.6.4改变大小的移动渐变动画
动画对象在移动渐变过程中可以改变大小,这种操作也称为缩放对象的移动渐变动画。
例6回家的小公鸡
②执行菜单命令“文件”→“导入”,从预先准备的文件夹中导入一幅有山、水、房子、树木的图片作为动画背景。
调整图片的大小和位置,然后双击该图层名称栏,取名为“背景”。
③在“背景”图层中选择第20帧点击鼠标右键,从快捷菜单中选择“插入帧(InsertFrame)”。
使背景从第1帧延伸到动画结束。
④执行菜单命令“插入”→“新建元件”,随后在“创建新元件”对话框中选择“影片剪辑”素材,为元件取名为“公鸡”。
⑤在元件编辑窗口中,执行菜单命令“文件”→“导入”,从外部导入预先准备好的小公鸡GIF动画。
点击时间轴下方的“场景1”,回到主场景中来。
⑥新建一个图层,取名为“公鸡”。
“公鸡”到舞台上,调整初始位置在舞台右侧。
⑦选择“公鸡”图层第20帧点击鼠标右键,从快捷菜单中选择“插入关键帧”。
接着在该帧将公鸡拖放到图片中小房子的门口,使用自由转换工具
,改变小公鸡的大小,使得小公鸡能走进小房子的门。
⑧选定第1帧点击鼠标右键,从快捷菜单的最上面选择“
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Flash 动画 课件 开发
![提示](https://static.bdocx.com/images/bang_tan.gif)