园丁工程动画制作授课讲义.docx
《园丁工程动画制作授课讲义.docx》由会员分享,可在线阅读,更多相关《园丁工程动画制作授课讲义.docx(17页珍藏版)》请在冰豆网上搜索。
园丁工程动画制作授课讲义
园丁工程《动画制作》授课讲义
广西师范学院初等教育学院袁俊
使用软件:
MacromediaFlash8
学习目标:
知识:
使学生掌握以下知识:
◆绘制静态矢量图形
◆编辑对象和应用位图
◆动画基本知识和制作技巧
◆层和元件在动画中的应用
◆动作脚本知识及创建交互动画
◆发布动画作品
能力与技能:
使学生具备以下能力与技能:
◆熟练制作Flash动画作品
◆具备动画设计和开发的能力
态度与情感:
让学生了解动画制作的原理,培养学生审美能力,提高学生的创新意识,通过制作出生动活泼的Flash动画作品,激发学生的学习兴趣,增强学生自信心。
第一章Flash8基础知识
一、Flash8概述
Flash是美国Macromedia公司推出的世界主流多媒体网络交互动画工具软件,它支持动画、声音以及交互,具有强大的多媒体编辑功能,可以设计出领导潮流的网站及多媒体互动影像。
基于矢量图形的Flash动画,随意缩放其尺寸,也不会影响图像的质量和文件的大小。
点阵位图图形:
计算机屏幕上显示的点阵位图图形是由屏幕上固定的点阵组成,该类图形的特点:
1.文件大小决定于图形的尺寸和色彩深度;
2.在同一屏幕分辨率下,图形的显示尺寸固定不变。
矢量图形:
是由计算机根据矢量数据计算后绘制而成的,矢量图是由线条和色块组成的,而与屏幕显示点无关,该类图形的特点:
1.文件大小与图形的复杂程序有关,而与图形的尺寸无关;
2.图形的显示尺寸可以无级缩放,变化后不影响图形显示精度。
利用Flash中的绘图工具可以绘制矢量图形:
矢量曲线(Lines)和色块(Fills),也可以在Flash中调入和编辑其他图形软件制作的位图图形。
二、Flash8界面组成
使用时应将屏幕的分辨率设为1024×768。
简单介绍工作界面:
标题栏、菜单栏、工具箱、时间轴、场景舞台、属性面板、控制面板。
在窗口右侧出现的工具面板中,单击其标题栏,可展开或折叠该面板。
三、Flash8基本操作
1.舞台视图缩放
学习缩放、手形工具的使用,要求掌握几个常用的快捷键:
Ctrl+=放大显示对象;Ctrl+-缩小显示对象;Ctrl+1按原样大小显示对象
Ctrl+2将场景舞台以最大化全部显示;Ctrl+3将当前画面中的对象以最大化显示按住空格键时可切换成手形工具,这时可用鼠标移动视图区。
注意:
在使用快捷键时关掉中文输入法。
2.预览和测试动画
按Ctrl+Enter组合键,可直接进入预览播放器窗口浏览动画效果。
四、绘制图形对象
1.椭圆、铅笔、刷子、墨水瓶、颜料桶工具
注意线条与色块的区别,并掌握选择工具的使用。
铅笔:
绘制线条
刷子:
绘制色块
墨水瓶:
修改线条
颜料桶:
修改色块
选择工具的使用方法:
1)用鼠标单击色块,可选中该色块,双击色块,选中该色块及其周边的线条。
2)用鼠标单击线条,可选中该线条,双击线条,选中相连的所有线条。
3)只有选中线条后,才能用鼠标来移动它们。
4)将鼠标移到色块内部,当鼠标指针出现四个方向的箭头时,可按住鼠标左键移动该色块。
5)在没有选中对象的状态下,将鼠标移至色块或线条边缘时,指针形状会出现一条弧线,这时按住鼠标左键拖动,可改变色块或线条的形状。
6)选择多个对象:
按住Shift键,用鼠标依次单击对象。
7)删除对象:
先选择要删除的对象,再按下Delete键。
双击橡皮擦工具可清除当前帧中未锁定层的所有对象。
常用快捷键:
Ctrl+A(全选)
Ctrl+’是显示网格的开关
Ctrl+Shift+’是吸附网格的开关
Ctrl+Z撤消,Ctrl+Y重做
2.颜色的设置
如何进行颜色的设置:
1)在属性面板中进行取色、调色、自定义颜色样本。
2)在颜色面板中调渐变色、添加、删除颜色样本、设置透明色。
方法:
1)当用吸色棒吸取一种新的填充色时,在“颜色样本”窗口中会自动添加这种新的颜色。
2)在“混色器”窗口中调好一种色彩后,单击该窗口右上角按钮,在弹出的菜单中选择“添加样本”(或将鼠标移至“颜色样本”窗口中,当鼠标指针变成颜料桶工具时,单击鼠标),可将调好的色彩加入面板中。
3)若选中“颜色样本”窗口中某色彩后,再单击“颜色样本”窗口右上角按钮,在弹出的菜单中选择“删除样本”,可将选中的色彩删除。
五、组合、打散对象
通过学习绘制对象功能让学生理解散件与组合两种不同对象的编辑方法,并学会如何将散件与组合互相转换,学会设置对象的层,并掌握快捷键:
Ctrl+G(组合)、Ctrl+B(打散)
Ctrl+↑(上移一层)、Ctrl+↓(下移一层)
六、排列与对齐图形对象
执行[窗口]/[对齐]命令,可调出[对齐]面板。
技巧:
在标尺显示的情况下,用鼠标按住标尺不放,往舞台方向拖动,可生成辅助线,用于对齐多个对象,把辅助线拖回标尺处,可清除辅助线。
注意:
对齐对象是以鼠标拖动点为准进行对齐。
七、对象的旋转
通过绘制方形玫瑰和芍药花,掌握填充变形工具、复制并应用变形工具的使用。
第二章制作简单动画效果
一、基础知识
Flash动画分成两种类型:
逐帧动画(frame-by-frameanimation)和过渡帧动画(tweenedanimation)。
1.逐帧动画
逐帧动画就是对每一帧的内容逐个编辑,然后按一定的时间顺序进行播放而形成的动画。
优点是变化复杂,可以制作出任何效果;缺点是制作过程比较繁琐,生成的动画文件比较大。
逐帧动画制作时一般是在某一帧前、后新建一个内容完全相同的关键帧,再对舞台中的内容按照动画发展的要求进行编辑、修改,使之与相邻帧中的同一对象相比有一点变化,如此重复,直至完成全部动画的帧系列。
要创建逐帧动画,需要将每个帧都定义为关键帧,然后给每个帧创建不同的图像。
每个新关键帧最初包含的内容和它前面的关键帧是一样的,因此可以递增地修改动画中的帧。
2.过渡帧动画
过渡帧动画(tweenedanimation)又叫补间动画,分为两种:
1)形状(Shape)变形动画其变形对象是矢量图形,可使矢量图形做出任意形状、位置和颜色的平滑变化。
(浅绿色带箭头直线的帧序列)
2)运动(Motion)变形动画其变形对象是舞台中组合后的图形对象、符号的引用或其他嵌入对象等,可使上述对象产生位置、大小、旋转以及颜色等平滑变形,并可设置移动路径、旋转方向等变形细节。
(浅兰色带箭头直线的帧序列)
二、帧的使用
(一)帧的类型:
1.关键帧:
当创建逐帧动画时,第个帧都是关键帧,在创建形状变化的动画时,需要在动画有变化的地方创建关键帧。
2.空白关键帧:
指没有添加任何对象的帧。
3.普通帧:
也称为静态帧,显示同一层中前一个关键帧的内容。
4.过渡帧:
在形状变化、动作变化动画中两个关键帧之间的帧。
(二)编辑帧
1.选取帧:
选取一个帧:
单击
选取多个帧:
用鼠标拖选,或使用Shift键
2.插入普通帧:
在时间轴关键帧后要插入的地方单击鼠标,然后按F5。
可同时插入多个普通帧
3.插入关键帧:
在时间轴中要插入的地方单击鼠标,然后按F6。
F5将帧延续
F6复制关键帧
F7插入空白关键帧
三、形状变形动画
1.形状变化
用于创建对象的位置、大小、颜色、形状改变的动画,注意对象必须是散件。
实例1:
圆变方
制作步骤:
1)新建一个flash文件,在下方的属性面板中设置场景的大小为550×200;
2)按Ctrl+2将场景舞台以最大化全部显示,在第1帧(关键帧)中绘制一个圆;
3)单击40帧的位置按F6,这样就可在第40帧插入一个关键帧,并将第1帧的内容复制到第40帧;
4)将第40帧中的圆移动位置、改变大小、改变颜色,使得首尾两个关键帧中的内容不一致;
5)选择第1帧后,在下方的属性面板中将[补间]设为[形状],这时在两个关键帧中会出现一条绿底的实线箭头,说明形状变化的动画制作成功;
6)将时间轴中的红色播放滑块定位在第1帧,按Enter键可在编辑状态下观看动画效果;
7)将第40帧中的圆删除,重新画一个正方形,可得到圆变方的动画效果;
8)将文件以“圆变方.fla”保存,按Ctrl+Enter键可观看生成swf文件格式的影片效果,同时会在同一文件夹中生成名为“圆变方.swf“的动画文件。
实例2:
魔幻花
制作步骤:
1)新建一个flash文件,选择椭圆工具后,在下面的属性面板中将笔触颜色设为黑色,线的粗细为1,填充颜色先为预置红黑球形,然后再通过右侧的混色器面板将填充色调为黄红球形(左黄右红);
2)在第1帧中绘制一片花瓣,并通过填充变形工具调整花瓣的填充效果;
3)在第50帧插入一个关键帧,通过任意变形工具将第50帧中的花瓣的中心点调到底部中点,然后在变形面板中设置旋转角度为15度,单击[复制并应用变形]按钮,直到形成一朵花;
4)选择第1帧,在下方的属性面板中将[补间]设为[形状]。
实例3:
文字变化
制作步骤:
1)新建一个flash文件,在第1帧中输入文字“动”;
2)在第20帧按F6插入一个关键帧,将第20帧的字改为“画”,相应地改变文字的位置及颜色;
3)在第40帧按F6插入一个关键帧,将第40帧的字改为“制”,相应地改变文字的位置及颜色;
4)在第60帧按F6插入一个关键帧,将第60帧的字改为“作”,相应地改变文字的位置及颜色;
5)将四个关键帧的文字打散,最后将第1帧、第20帧、第40帧的[补间]动画设为[形状]变化。
2.使用形状提示
要控制对象的形状变化,可以使用形状提示,形状提示点会标识起始形状和结束形状中的相对应的点。
实例1:
翻转
实例1制作步骤:
1)新建一个flash文件,双击图层1,将图层的名字改为“矩形”;
2)在第1帧的左下角画一个矩形,在第20帧按F6插入一个关键帧,将第20帧的矩形移到右上角,将矩阵变大,并改变矩形的填充色;
3)将第1帧的[补间]动画设为[形状]变化;
4)在第1帧被选中的状态下,执行菜单[修改]/[形状]/[添加形状提示点]命令,这时,在第1帧的矩形中心出现一红底的字母a,用鼠标将字母a移动到矩形的左下角;
5)这时第20帧的矩形中心也会出现一红底的字母a,用鼠标将字母a移动到矩形的左下角,这时红底的字母a会变为绿底,同时第1帧中的字母a会变为黄底,表示这两点建立了动画变化的对应关系;
6)使用添加形状提示点的快捷键Ctrl+Shift+H给第1帧再添加三个形状提示点b、c、d,按逆时针方向分别放在矩形的四个角点上,对应的在第20帧中放置相应的形状提示点;
7)将第20帧中的c、d两个形状提示点交换位置,完成矩形的动画制作后,将图层“矩形”锁定;
8)新建一个图层,命名为“三角形”,在第1帧中利用网格绘制一个三角形;
9)在第20帧按F6插入一个关键帧,利用任意变形工具将第20帧的三角形的中心移到底边的中心,再执行[修改]/[变形]/[垂直翻转]命令,将三角形垂直翻转;
10)将图层“三角形”第1帧的[补间]动画设为[形状]变化;
11)给图层“三角形”第1帧添加两个形状提示点a、b,在第1帧中a点放在三角形最上面的顶点,b点放在底边的右端点,在第20帧中a点放在三角形最下面的顶点,b点还是放在底边的右端点。
操作技巧:
1)对形状提示点的操作,只能在[形状]变化的第一关键帧使用。
2)右击形状提示点,可添加、删除、隐藏形状提示点。
3)执行菜单[视图]/[显示形状提示]命令,可重新显示形状提示点。
将一个对象复制到另一关键帧中的操作:
1)选中对象后,按Ctrl+C复制对象;
2)单击要粘贴对象的关键帧,按Ctrl+V可将对象粘贴在场景中心点,按Ctrl+Shift+V可将对象粘贴在原位置。
动画技巧:
怎么制作一条线一点点延伸出来的动画效果?
在一关键帧画一条线段,在后一关键帧按F6插入一关键帧,将前一关键帧中的线段擦掉一部分,使线段变短,并将该关键帧的[补间]动画设为[形状]变化。
第三章制作复杂动画效果
一、基础知识
元件(Symbol)可以是一个矢量图形、一个位图、一个音频片段、一段独立的Flash动画。
素材是由Flash外部导入的对象。
在一个作品中可以多次使用某一元件或素材,而在发行或输出时,被使用的元件或素材只保存一次,以减少文件的大小。
在编辑舞台中的元件或素材称为“实例”(Instant),可以任意移动和变形,所有的变化都不会影响到原元件、素材,也不会影响该元件或素材在其他位置或帧中的“实例”显示效果;若原元件或素材的形状、属性发生改变,则会影响整个作品中所有引用该元件的帧,便于进行统一修改。
1.Flash内部支持的元件:
(1)图形元件(Graphic)
图形元件可以是一帧静止的矢量图形对象,也可以是一段没有音效和交互的动画片段。
作为图形元件的动画片段,有自己独立的时间线、动画轨道和帧序列,这些时间线、动画轨道和帧序列不会显示在当前作品的时间线上,但其播放时受到当前作品时间线和控制按钮的控制。
即图形元件可以像普通的图像组一样在作品的时间线上设置一定长度的静止播放帧序列或在该长度的帧序列中设置一个变形效果(移动、旋转、透明度变化等),这种情况下,如果矢量图形元件是一个动画片段,在完成主时间线上的播放或变形帧序列的同时,还将完成其自身的一个动画帧序列。
(2)按钮元件(Button)
支持鼠标指向/点击的交互操作。
在元件编辑时,按钮元件由4个连续帧组成,前面三帧分别对应于按钮的[弹起]、[鼠标经过]和[按下]三种状态,最后的[点击]帧,可以设置按钮对鼠标响应区域的大小和位置。
对于[鼠标经过]和[按下]帧,可以针对鼠标的操作设置事件响应,这样,就可以利用按钮元件在动画中建立与操作者的交互接口。
(3)影片剪辑元件(MovieClip)
其制作和设置与图形元件中的动画片段有点相似,不同的是:
“影片剪辑”元件支持音频信息和交互响应,其播放不会受到主时间线的影响。
“影片剪辑”元件在Flash编辑窗口内不能被播放预览,只有通过菜单中的[测试影片]、[测试场景]命令或输出成动画播放文件后,才能正常播放。
2.素材元件库(Library)
元件库是用来存放、管理作品中所有元件的容器。
在元件库中,每一个素材元件都有各自的图标、名称、类型、在该作品中的使用次数统计以及最后修改日期等信息,可对库中的素材元件按某一顺序排列,还可以用文件夹对元件进行管理。
在编辑作品时,可调用其他作品的素材元件库:
执行菜单[文件]/[导入]/[打开外部库…]命令后,选择fla文件。
素材
Flash将外部输入的素材也保存在元件库中,但不能在Flash中进行编辑,素材包括:
1)音频素材:
只能用[文件]/[导入]命令从外部文件引入。
2)位图素材:
其使用与矢量图形素材元件基本相同,可移动、缩放或改变透明度(要将其转化为元件才能改变图片的透明度),但不能对图形本身编辑。
3)视频素材
3.创建元件的方法:
Ctrl+L是库窗口的开关
Ctrl+F8是新建元件
可将在场景中的某一对象拖放在库窗口中使其转化为元件
二、运动变形动画
用于创建对象的旋转、透明度、颜色、明暗度、大小变化的动画,注意对象必须是元件。
注意:
1)要设置动画的对象必需单独放在一层。
2)在运动变化中,前后两个关键帧中的对象必需是同一个元件。
(一)旋转
1.原地大小不变进行旋转
通过制作一条线段绕着一端旋转的动画效果,使学生掌握运动变化的动画制作要点,学会如何设定元件的中心点及旋转的方向、速度。
实例:
指针转
制作步骤:
1)新建一个Flash文件,在第1帧中绘制一条水平放置的线段;
2)按Ctrl+L打开库窗口,用鼠标将线段拖放到库窗口中,将该线段转化为图形元件“line”;
3)利用任意变形工具将场景中的元件“line”的中心点移到线段的左端点;
4)在第60帧按F6插入一个关键帧;
5)选择第1帧,在下方的属性面板中将[补间]设为[动画],旋转设为顺时针1次。
注意:
旋转的设置必须在属性面板完全展开时才能看见,属性面板右下角有个三角形按钮,单击该按钮可完全展开属性面板。
2.原地缩放旋转
要制作六叶风车由远到近旋转的动画效果,是在原地大小不变进行旋转的动画效果上给对象加上放大缩小的变化。
通过这个实例,巩固前面学习的绘图、制作旋转动画等知识点,掌握变速运动变化的动画制作方法。
实例:
风车
制作步骤:
1)新建一个Flash文件,将场景大小设为220×220;
2)在第1帧中绘制一个六叶风车,并将其转化为图形元件“风车”;
3)在第30帧按F6插入一个关键帧;
4)选择第1帧,将第1帧中的风车缩小为原来的50%,将[补间]设为[动画],旋转设为顺时针1次,缓动设为-100,这样可使动画的速度由慢变快。
3.移动旋转
要制作车轮从左到右滚动的动画效果,是在原地大小不变进行旋转的动画效果上加上对象移动的变化。
实例:
轮转
(二)渐变
通过制作文字渐变出现的动画效果,掌握多个对象运动变化的动画制作,学会将多个对象分散到层的方法,进一步练习帧的使用。
实例:
文字渐出
制作步骤:
1)新建一个Flash文件,将场景大小设为600×200;
2)在图层1的第1帧中写出“朝花夕拾”四个文字,调整好字体、大小及颜色;
3)按两次Ctrl+B将四个字打散成散件,依次将四个字转化成图形元件,并对应以“朝”、“花”、“夕”、“拾”给元件命名;
4)选择第1帧,执行菜单[修改]/[时间轴]/[分散到图层]命令,将四个元件分别放在名为“朝”、“花”、“夕”、“拾”的四个图层中,这时图层1为空的图层,可将图层1删除;
5)通过鼠标拖动同时选中四个图层的第20帧,按F6在四个图层的第20帧都插入一个关键帧,并在下面的属性窗口将第20帧中四个字的颜色色调分别设为绿、红、橙、蓝;
6)同时选中四个图层的第1帧,将[补间]设为[动画],并将第1帧中的四个字变大为原来的600%,调整好适当的间距后,在下面的属性窗口将四个字的Alpha值都设为0;
7)将图层“花”中的所有帧向后移动10帧,图层“夕”中的所有帧向后移动20帧,图层“拾”中的所有帧向后移动30帧,使四个字分先后出现;
8)这时图层“拾”的最后一帧为第49帧,同时选中其它三个图层的第49帧,按F5插入一普通帧,使得前三个图层出现的画面能保留下来。
(三)导入gif动画制作影片剪辑
将gif动画文件导入到库,可自动得到包含该动画的影片剪辑。
实例:
小天使
制作步骤:
1)新建一个Flash文件,执行菜单[文件]/[导入]/[导入到库]命令,将外部图片xingkong.jpg及gif动画文件angel.gif导入到库中,这时会自动得到一个影片剪辑元件,将该影片剪辑元件重命名为“天使”;
2)将图层1命名为“星空”,从库窗口中将位图素材xingkong.jpg拖放到第1帧中,利用对齐面板将图片放在场景中央,锁定该图层;
3)在图层“星空”上面新建一图层,命名为“天使”,从库窗口中将影片剪辑元件“天使”拖放到第1帧中,放在星空图片外的右上角处,并将小天使水平翻转;
4)在第40帧按F6插入一个关键帧,将小天使移动到星空图片中的树枝上;
5)在第50帧按F6插入一个关键帧,将小天使水平翻转;
6)在第90帧按F6插入一个关键帧,将小天使移动到星空图片外的右上角处;
7)将第1帧和第50帧的[补间]设为[动画]。
三、应用引导层
1.沿非封闭路径运动
在运动变化动画中可以通过设置运动路径,使元件、组、文本沿我们所绘制的路径进行运动。
在创建特定的运动引导图层中绘制运动路径,并将前后两个关键帧的对象分别置于运动路径的两个端点上即可。
注意:
1)在将对象置于运动路径上时要将吸附在对象上的功能按钮按下。
2)若引导层的图标为一条红色弧形,被引导层缩进显示,表示引导层与被引导层建立了引导关系后。
3)若引导层的图标为锤子,被引导层没有缩进显示,表示引导关系断开,这时可用鼠标将被引导层拖放到引导层的右下方,给它们建立引导关系。
实例:
plane
制作步骤:
1)新建一个Flash文件,在第1帧中绘制一纸飞机,并将其转化为图形元件“plane”,放在场景的右下角;
2)在第60帧按F6插入一个关键帧,将飞机变小并移到场景的左上角;
3)选择第1帧,将[补间]设为[动画];
4)给图层1添加运动引导层,用铅笔工具在引导层中绘制一条平滑的曲线,作为飞机运动的路径;
5)将图层1中第1帧、第60帧两个关键帧中的飞机中心吸附在路径的两个端点上,并通过任意变形工具将飞机的方向调整到与运动路径方向一致;
6)选择图层1中第1帧,在下面的属性面板中将[调整到路径]项选中,这样飞机的方向就能随着运动的方向而发生改变。
2.沿封闭路径运动
在创建沿路径运动的运动变化的动画时,若创建的路径是一个封闭的曲线,会发现动画对象通常不会按照我们预想的路径进行运动,这时,要在封闭的曲线路径上擦出一个小豁口,使之成为不封闭的曲线,这样我们才能找到路径的两个端点。
实例:
月亮绕地球
四、应用遮罩层
遮罩层好象一个蒙版,遮罩层中的对象就象这个蒙版中的孔,通过这个孔可以看到下面图层(被遮罩层)的内容。
遮罩层中的对象可以是图形对象,也可以是文本对象,但不能是线条。
实例1:
变色字
制作步骤:
1)新建一个Flash文件,场景大小设为400×150,图层1命名为“矩形”;
2)选择矩形工具,将线条色设为无,填充色为预设的彩虹色,在图层“矩形”第1帧中绘制一矩形,并在属性面板中将矩形的宽设为400、高设为150,x、y的值设为0,得到一个与场景一样大小的矩形;
3)在第30帧和第60帧按F6插入关键帧,利用填充变形工具将第1帧、第60帧中矩形的填充色向左旋转,第30帧中矩形的填充色向右旋转;
4)将第1帧、第30帧的[补间]设为[形状];
5)在图层“矩形”上方新建图层“文字”,在图层“文字”中输入文字“动画制作”,并打散(为了使字体不发生改变);
6)右击图层“文字”,选择“遮罩层”,将图层“文字”设为遮罩层,图层“矩形”为被遮罩层;
7)将两个图层锁定,按Enter可观看遮罩效果。
实例2:
花赏
制作步骤:
1)新建一个Flash文件,场景大小设为400×200,背景设为黑色,图层1命名为“花图片”;
2)从其他文件的库中导入图片素材“flower1.jpg”,新建一个图形元件“花海”,在其场景中央放置由三幅图片素材“flower1.jpg”拼成的长长的图片;
3)返回主场景1,从库中将图形元件“花海”拖放到图层“花图片”第1帧中,并与舞台右对齐、垂直中齐;
4)在第20帧按F6插入关键帧,将第20帧的图形元件“花海”与舞台左对齐;
4)将第1帧的[补间]设为[动画];
5)在图层“花图片”上方新建图层“字”,在图层“字”中输入文字“花赏”,并打散;
6)将图层“字”设为遮罩层。
实例3:
照电筒
制作步骤:
1)新建一个Flash文件,背景设为黑色,图层1命名为“房间”;
2)将图片素材“room.jpg”导入到图层“房间”的第1帧;
3)在图层“房间”上方新建图层“移动的圆”;
4)在图层“移动的圆”中制作90帧的圆移动的动画效果;