Flash动画制作教程.docx
- 文档编号:3977573
- 上传时间:2022-11-26
- 格式:DOCX
- 页数:14
- 大小:272.98KB
Flash动画制作教程.docx
《Flash动画制作教程.docx》由会员分享,可在线阅读,更多相关《Flash动画制作教程.docx(14页珍藏版)》请在冰豆网上搜索。
Flash动画制作教程
Flash动画制作教程
一、Flash介绍
Flash是Macromedia公司的一个的网页交互动画制作工具。
在Flash里我们把做成的动画文件称为电影,实际上Flash中的许多名词都与电影有关,包括帧、舞台和场景等。
电影(包括动画电影)放映时都是一帧一帧连续播放的,通常每秒24帧。
由于视觉暂留的原因,我们看到的电影就是连续有动作的。
Flash与电影一样,也是要制成连续动作的图像,再输出播放就形成了电影。
输出的电影可以使用Flash专有的电影格式,也可以输出成其它图片格式,比如Gif动画。
舞台Stage
舞台是编辑电影的窗口,也就是文件窗口,你可以在里面作图或编辑图像,也可以测试播放电影。
时间轴Timeline
Flash将时间分割成许多同样的小块,每一块表示一帧。
时间轴上的每一小格就表示一帧,帧由左向右按顺序播放就形成了动画电影。
时间轴是安排并控制帧的排列及将复杂动作组合起来的窗口。
时间轴上最主要的部分是帧、层和播放指针。
帧Frame
帧是时间轴上的一个小格,是舞台内容的中的一个片断。
关键帧KeyFrame
在电影制作中,通常是要制作许多不同的片断,然后将片断连接到一起才能制成电影。
对于摄影或制作的人来说,每一个片断的开头和结尾都要做上一个标记,这样在看到标记时就知道这一段内容是什么。
在Flash里,把有标记的帧称为关键帧,它的作用与上面是一样的。
除此之外,关键帧还可以让Flash识别动作开始和结尾的状态。
比如在制作一个动作时,我们将一个开始动作状态和一个结束动作状态分别用关键帧表示,再告诉Flash动作的方式,Flash就可以做成一个连续动作的动画。
对每一个关键帧可以设定特殊的动作,包括物体移动、变形或做透明变化。
如果接下来播放新的动作,我们就再使用新的关键帧做标记,就象做动作的切换一样。
当然新的动作也可以用场景的方式做切换。
场景Scene
电影需要很多场景,并且每个场景的人物、时间和布景可能都是不同的。
与拍电影一样,Flash可以将多个场景中的动作组合成一个连贯的电影。
当我们开始要编辑电影时,都是在第一个场景"Scene1"中开始,场景的数量是没有限制的。
对于简单的电影是没有必要使用场景的。
使用场景必须要学会使用Flash中的一些命令。
层Layer
层可以理解为一张张透明的胶片。
我们可以在不同的层上做图,再叠放到一起组成一个复杂的图片。
每个层本身都是透明的,所以图像叠到一起时仍感觉象在同一个层上。
当图像要重叠时,排在时间轴的窗口中上面的层中的图像要覆盖排在下面层中的图像。
例如,鸟在云朵中飞翔,bird层中的图像要覆盖cloud层中的图像,看起来就是鸟飞在云彩的前面,而不会隐藏到云彩的后面。
使用过Photoshop的朋友会对层很熟悉。
与Photoshop一样,Flash中的层每个层中的图像与其它层中的图像都是不相关的;不同的地方是Flash中的层可以使用各自的时间轴,设定各自的动作而互不干扰。
使用的作图工具
打开Flash,舞台窗口将出现一个空白的电影。
建立新的电影文件,使用命令文件>新建。
如果要对电影的尺寸进行修改,使用命令修改>影片。
你可以修改电影的尺寸、背景颜色。
在电影中制作图形可以使用Flash中提供的制图工具,这些工具与其它做图软件提供的工具基本是一样的。
如果要在Flash中制作出好的电影,必须先花时间熟悉这些工具的用法及特点,获得感性认识后就可以任意发挥你的想象了。
Flash也可以对其它格式的图片进行编辑。
它可以打开多种格式的图片文件,也可以导入动画文件,比如Gif动画及其它的动画图片的序列。
二、动画制作
1、变形动画制作
相关知识:
帧、关键帧、空白关键帧
1)绘图工具的认识(画笔、椭圆、矩形)
2)旋转工具的使用(面板→转换)
3)一般变形动画制作步骤
步骤1:
新建一个文件;
步骤2:
在屏幕上绘制一个任意图形;
步骤3:
在时间轴30帧处单击鼠标右键,插入“空白关键帧”;
步骤4:
在该空白关键帧中,绘制另一个任意图形;
步骤5:
在时间轴1帧处单击鼠标左键,找到“属性”面板;
步骤6:
在下方的“属性”窗口中的“补间”中选择“形状”;
步骤7:
按键盘Ctrl+Enter,运行动画。
练习:
1)制作简单变形动画
2)制作多关键帧动画
3)制作形状提示点动画(长方形→平行四边形)
注意:
在使用提示点的时候,先要制作成变形动画,然后再去设定提示点,最后调整第一帧和最后一帧中的提示点位置。
(修改→转换→添加形状提示点)
2、移动动画制作
相关知识:
移动动画与变形动画有所不同,不能直接在舞台上绘制图形。
要移动的物品,必须是一个组件(有时翻译成“元件”,本讲义后续章节都用“组件”)。
新建组建的方法为:
菜单“插入→新建元件”。
组件(元件):
相当于一个零件。
在制作动画过程中,可以把整个画面上的物品分别做成一个个小的组件。
往往动画的画面是通过调用不同的组件,拼装而成的。
其优点是,当动画制作完成后,可以对这些零件进行加工(如颜色、线条等),而不需要作其他修改。
同时,利用组件可以使一张图形重复被使用。
组件有三种类型:
图形、影片剪辑、按钮。
1)单层动画制作步骤
步骤1:
新建一个文件;
步骤2:
插入一个组件,命名为“yuan”;
步骤3:
在该组件中,绘制一个图形(图形尽量靠近中心点位置);
步骤4:
单击“场景1”,回到场景;
步骤5:
单击菜单“窗口图库”;
步骤6:
选择图库中的“yuan”,将其拖曳到舞台左边;
步骤7:
在时间轴30帧处单击鼠标右键,选择“插入关键帧”;
步骤8:
把屏幕上的图形移动位置,至舞台的右边;
步骤9:
在时间轴1帧处单击鼠标右键;
步骤10:
在下拉的窗口中选择“创建补间动画”;
步骤11:
按键盘Ctrl+Enter,运行动画。
2)多层动画制作
制作多层动画,只是在原有的基础上,添加一个图层,各层之间在动画的顺序上没有关联,各层动画独占一层,只是在叠放层次上有所区别。
层与层之间的叠放层次可以调整。
练习:
1)制作简单的移动动画1(球上下弹动)
2)制作简单的移动动画2(天空中云朵在飘,小鸟在飞)
3)制作物体移动动画3(移动几个方块到屏幕上,先移入一个方块,在屏幕上停留一会儿,再移出)
4)制作物体移入、停止、移出
3、放大、缩小、扭曲、旋转动画制作
相关知识:
图片的导入与编辑。
在flash中,除了使用工具,自己绘制相关图形外,还可以从外部把图片文件导入进去。
对于导入的图形,可以把它转换成图形组件,此后,就和其他的组件一样使用。
导入方法:
文件→导入,选择相关的图形文件,即可导入到flash中。
导入后,根据需要可以把图片转换成组件(如:
制作移动动画,必须要使用组件)。
1)放大、缩小动画制作步骤:
步骤1:
新建一个文件;
步骤2:
插入一个组件,命名为“fangkuai”;
步骤3:
在该组件中,绘制一个图形(图形尽量靠近中心点位置);
步骤4:
单击“场景1”,回到场景;
步骤5:
单击菜单“窗口图库”;
步骤6:
选择图库中的“fangkuai”,将其拖曳到舞台左边;
步骤7:
在时间轴30帧处单击鼠标右键,选择“插入关键帧”(注:
此时,时间轴中,正好选中第30帧);
步骤8:
使用箭头工具,选中30帧中的图形。
步骤9:
选择工具中“任意变形工具”。
步骤10:
用鼠标拖曳图形四周的小方块,调整其大小;
步骤11:
在时间轴1帧处单击鼠标右键;
步骤12:
在弹出的窗口中“创建补间动画”;
步骤13:
按键盘Ctrl+Enter,运行动画。
2)扭曲动画的制作
在选择箭头工具后(上面步骤9)
,在图形四周出现的小方块上拖曳调整图形大小时,可以使图形进行翻转(即调整过头)。
其他步骤同上,即可产生物体翻转动画。
3)旋转动画的制作
在flash中,可以控制物体根据某个轴心进行旋转,如旋转的风车。
旋转动画制作步骤:
步骤1:
新建一个文件;
步骤2:
插入一个图形组件,命名为“leaf”;
步骤3:
在该组件中,绘制一个圆形,并利用箭头工具调整圆的边框,使其成为叶子状;
步骤4:
调整叶子位置,使其叶柄位置对准中心点位置;
步骤5:
插入另一个图形组件,命名为“windmill”;
步骤6:
单击菜单“窗口图库”;
步骤7:
选择图库列表中的“leaf”组件,将其拖曳至当前组件(即windmill)中。
共拖曳4次,拖曳出4片叶子。
步骤8:
使用任意变形工具进行旋转调整至风车样;
步骤9:
插入另一个影片剪辑组件,命名为“rotatewindmill”;
步骤10:
从图库中,将windmill组件拖曳至舞台上,将其中心点位置与当前组件的中心点位置对齐;
步骤11:
在时间轴30帧处单击鼠标右键,选择“插入关键帧”(注:
此时,时间轴中,正好选中第30帧);
步骤12:
使用箭头工具,选中30帧中的图形。
步骤13:
选择工具栏中“任意变形工具”按钮选项。
步骤14:
用鼠标拖曳图形四周的小圆点,调整其旋转度数和方向;
步骤15:
在时间轴1帧处单击鼠标右键;
步骤16:
在下拉窗口中选择“创建补间动画”;
步骤17:
按键盘Ctrl+Enter,运行动画。
练习:
1)影子动画的制作1(弹动的小球,加上影子)
2)影子动画的制作2(青蛙走路,其地上的影子)
3)转动的风车动画制作,并为风车加上一个风车架
4、遮罩动画制作
相关知识:
自定义填充色、字体设置。
除了系统默认提供的几种填充色外,用户可以自定义填充色(如定义一个彩色的圆环)。
→
→
,选择对应的填充方式,编辑对应的颜色。
使用文本工具
,输入字符后,在文字被选中的情况下,可以进行字体设置。
可以从窗口下放“属性”中,设置字体的颜色、字体和大小。
遮罩动画制作步骤:
步骤1:
新建一个文件;
步骤2:
插入一个图形组件,命名为“yuan”;
步骤3:
在该组件中,绘制一个圆形,使其填充色为渐变色;
步骤4:
插入另一个图形组件,命名为“wenzi”;
步骤5:
在该组件中使用文字输入工具,输入“Flash动画制作”(注意,选择文字输入工具后,在屏幕上用鼠标点击后输入文字,不要使用鼠标拖曳一个矩形框后再输入,否则文字会自动换行);
步骤6:
使用箭头工具,选中所输入的文字,选择菜单“窗口面板字符”,调整文字的字体和大小;
步骤7:
新建影片剪辑组件,命名为“zhezhao”;
步骤8:
单击菜单“窗口图库”;
步骤9:
(此时,时间轴中只有一个图层)先将图库中的“yuan”组件拖曳出来(即拖曳到图层1所在的舞台上);
步骤10:
将该组件制作成一个左右移动的移动动画。
(先调整组件的起始位置插入关键帧调整该帧中的组件位置,即终点位置创建动画。
步骤11:
锁定第一个图层;
步骤12:
插入新的图层(图层2);
步骤13:
从图库中,将“wenzi”组件拖曳至图层2所在的舞台(注意,视觉上当前的两个图层在同一个平面上,事实上,他们在不同的图层中。
在动画的运行过程中,每个图层各自逐帧运行本图层中的动画,与其他层无关),调整其位置至“yuan”组件的移动路径上;
步骤14:
鼠标右键单击时间轴左边的图层的命名处,选择“遮罩”。
步骤15:
回到“场景1”,从图库中拖曳“zhezhao”组件至舞台上,并运行动画。
遮罩动画说明:
遮罩动画有两个图层组成,总是在上面一层上作遮罩。
上面一个图层是遮罩的轮廓,下面一层是实际显示的物品,动画运行过程中,只显示轮廓所在位置后面的物品。
练习:
1)先去除原先的遮罩(鼠标右键单击时间轴左边的图层的命名处,再次选择“遮罩”),调换两个图层的位置,再做遮罩,观察动画运行结果。
2)导入一张外部的图片,将其转换成组件。
然后,按照上面的制作步骤,制作一个欣赏图片的遮罩动画。
(提示:
遮罩的方式可以是移动动画、变形动画、放大缩小动画、旋转动画)
3)制作一个类似开幕和闭幕的动画。
(提示,要制作一个放大、缩小的动画)
5、路径动画制作
相关知识:
在动画的制作工程,经常会有一些误操作,可以使用编辑菜单中的“撤销”、“重复”命令来恢复前面的操作结果。
在修改动画的过程中,可以灵活操作时间轴中的帧。
用户在选择相应的一个或多个帧后,在选中的帧上单击鼠标右键,便可以对其进行操作。
下面介绍几个操作:
插入帧:
就是在该层中,从前一个关键帧中,连续填充中间的空白帧,起到延长该图层中物品在动画运行过程中的显示时间的作用;
移除帧:
把选中的一个帧或多个帧中的物品全部清除,如果被选中的帧不是该图层中的结尾的帧,则后面的帧自动向前移动。
清除关键帧:
该命令只能清除关键帧。
路径动画制作步骤:
(树叶下落)
步骤1:
新建一个文件;
步骤2:
插入一个图形组件,命名为“yuan”;
步骤3:
在该组件中,绘制一个圆形,使其填充色为渐变色;
步骤4:
插入另一个图形组件,命名为“wenzi”;
步骤5:
在该组件中使用文字输入工具,输入“Flash动画制作”(注意,选择文字输入工具后,在屏幕上用鼠标点击
练习:
1.制作月亮绕着地球转(制作在动画组件中)
2.制作地球绕着太阳转
3.制作飘带文字
Flash8绘制秋之落叶
(1)
2006-8-239:
19:
07 中国动画网
首先让我们先看一下制作完成之后的效果如图1所示:
图1
现在我们开始制作:
第一步:
创建灯光以及树叶轮廓
1)我们要通过建立一个虚拟灯光,让灯光照在树叶上,使树叶有高光区和阴影区,这样可以达到更加逼真的效果。
首先将背景颜色设定为#666666,然后建立一个图层,名为‘lightsource’,在第10帧按F5创建关键帧,在绘图区的左上角用绘图工具绘制出一个虚拟的灯光(如图2所示),这个灯光将决定我们在树叶的什么部分绘制的阴影区以及高光区。
2)然后在lightsource下面建立一个图层,名称为‘outline’,然后用线条、铅笔工具以及选择工具和部分选择工具(线条颜色为#00FF00)画出树叶的轮廓如图2所示:
图2
第二步:
创建树叶的叶脉
在outline上建立一个新图层,名称为leaf,右单击outline上的第一帧,选择‘复制帧’,在第2帧上按F6,右单击第2帧,选择‘粘贴帧’,用线条工具绘制叶脉,也可以用钢笔工具,这样修改起来更加细致逼真,最后再用部分选择工具最后修改一下就OK了,效果如图3:
图3
第三步:
给叶脉填色
在leaf上建立一个新图层,名称为vein,在第3帧按F6,在leaf层上选择所有叶脉,crtl+c,选择vein上的第3帧,crtl+V,然后用两个线性填充色来填充叶脉的主干,和叶脉的分支。
两个线性填充的值分别如下图所示:
主干填充色
第一个色块值为#8A1B00
第二个色块值为#490000
分支填充色
第一个色块值为#B4200C,Alpha:
50%
第二个色块值为#490000,Alpha:
75%
填充完成效果如图4所示:
图4
第四步:
给叶脉绘制不同的填色区域,对树叶的颜色进行分区及填色
在leaf层上的第3、4帧上按F6,然后将第3帧上的内容清空,在第4帧上用铅笔工具绘制树叶的不同亮度以及不同颜色的填充区域。
在第5帧上按F6,用填充工具,根据我们前面建立的虚拟灯光照射的角度,浅颜色代表高光区,深颜色代表阴影区,选择不同颜色进行填充。
绘制及填充颜色完成如图5所示:
Flash8绘制秋之落叶
(2)
2006-8-239:
20:
09 中国动画网
颜色由浅入深共4种,最浅为:
#F4C84C#EC8926#C32A0B#820C06,你会发现在一大块区域没有填色,那个是用放射状填充的,具体值如下:
第一色块值为#C32A0B,第二色块值为#E36C24,设置好后,对未填充的地方进行填充。
我们一定要注意细节,我们的叶柄还没有上色呢。
叶柄也是用放射状填色的。
其值如下所示:
色块颜色依次为:
#A22F12#D1885B#E0AC8D#D17F50#D14C13,设置完成后,可以进行填充。
注:
在第四步中为操作方便将vein先隐藏起来,操作完成后可再显示出来。
第五步:
去除颜色区域边框线
选择leaf层,在第6帧上选择所有的边框线,按DELE键删除。
效果如图6所示:
图6
制作到这里,也许你认为已经很像了,其实不然,我们之前第一步就建立一个虚拟灯光,目的是为了让树叶更加真实,下面我们将进行一系列的细节处理。
第六步:
建立树叶的第一个纹理
在leaf上建立一个新图层,名为texture1,在其第7帧上按F6,用建立一个放射状填充的渐变,值如下图所示:
两个色块的颜色都是一致的为:
#820C06两个色块的Alpha分别为:
75%和0%;
然后用画圆工具(其填充色为刚刚设置的放射状渐变,无边框色)绘制一个圆形,然后选择此圆形后按ctrl+G将其组合,然后分别复制6个,通过变形、旋转工具将其变形旋转后,根据虚拟灯光的照射角度,把它们放在叶子的不同位置,达到阴影的效果。
完成效果如图7所示:
图7
我把这几个图形都选择上,以方便大家知道它们所放的位置,最后大家别忘记把那个左上角无用的图形删除掉。
第七步:
建立第二个树叶纹理
同第六步,方法基本一致,在texture1上建立一个新图层,名为texture2,在其第8帧上按F6,用建立一个放射状填充的渐变,值如下图所示:
两个色块的颜色都是一致的为:
#D24917两个色块的Alpha分别为:
75%和0%;
然后用画圆工具(其填充色为刚刚设置的放射状渐变,无边框色)绘制一个圆形,然后选择此圆形后按ctrl+G将其组合,然后分别复制15个,通过变形、旋转工具将其变形旋转后放在叶子的不同位置,完成效果如图8所示:
图8
同第六步一样,我把这几个图形都选择上,以方便大家知道它们所放的位置,最后大家别忘记把那个左上角无用的图形删除掉。
第八步:
给树叶加上杂点
为了使树叶更加逼真,我们给树叶加上许多更加小的细节部分,在texture2上建立一个新图层,名为texture3,在其第9帧上按F6,你以用用铅笔,钢笔等绘图工具,不用同颜色在叶子的不同位置绘制不同的杂点,使树叶更加真实,千万别忘记叶柄的根部还有一个小杂点呢。
所有步骤完成后的最终效果如图9所示。
图9
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Flash 动画 制作 教程