多媒体动态网页设计
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

4.2 动画制作软件Flash

Flash是美国Macromedia公司于1999年6月推出的优秀网页动画设计软件。它是一种交互式动画设计工具,用它可以将音乐、声效、动画及富有新意的界面融合在一起,以制作出高品质的网页动态效果。

Flash 的特点有:①使用矢量图形和流式播放技术。矢量图形可以任意缩放尺寸而不影响图形的质量;流式播放技术使得动画可以边播放边下载,从而缓解了网页浏览者焦急等待的情绪。②通过使用关键帧和图符所生成的动画文件非常小,几千字节的动画文件已经可以实现许多令人心动的动画效果,用在网页设计上不仅可以使网页更加生动,而且下载迅速,使得动画可以在打开网页很短的时间里就得以播放。③把音乐、动画、声效、交互方式融合在一起,这使得越来越多的人把Flash作为网页动画设计的首选工具,并且创作出了许多令人叹为观止的动画(电影)效果。④强大的动画编辑功能使得设计者可以随心所欲地设计出高品质的动画,通过ACTION和FS COMMAND可以实现交互性,使Flash具有更大的设计自由度。另外,它与当今最流行的网页设计工具Dreamweaver配合默契,可以直接嵌入网页的任意位置,非常方便。

Flash 技术发展到今天,已经成为网页动画和多媒体交互技术的标准,并在全世界范围内得到了广泛的应用和推广。使用Flash不仅可以快速地创建应用于网络的各种内容和交互程序,而且其创建的文件具有不可比拟的优点,能够以很小的数据量实现更多、更好的效果。这使得Flash成为网页设计的首选工具,并在网页动画、网络游戏、网络广告等多种领域获得了广泛的应用。

4.2.1 Flash的基本术语

制作Flash动画之前,了解Flash的基本术语,将有助于后续章节的理解。

1.时间轴和时间轴窗口

Flash 是通过时间轴来进行动画控制的。时间轴是Flash 用于管理不同动画元素、不同动画和动画元素播放次序的工具。时间轴窗口如图4-1所示。时间轴左侧是图层,图层就像堆叠在一起的多张幻灯胶片一样,在舞台上一层层地向上叠加。如果上面一个图层上没有内容,那么就可以透过它看到下面的图层。每一个图层上包括一些小方格,它们是Flash的“帧”,是制作Flash动画的一个关键元素。

图4-1 时间轴窗口

2.帧

Flash 的主要功能是制作动画,动画实际是由多个帧组成的,播放动画就是依次显示每一帧中的内容。Flash中,每一帧就是一个画面,在帧上可以绘制图形、创建元件和动画片断等,也可以把帧看成是Flash动画中在最短时间单位里出现的画面。帧越多,动画需要播放的画面也越多,播放时间就越长。

在Flash的时间轴窗口内有一个一个的小格子,由左至右编号。每帧都包含图像信息,在播放时,每帧内容会随时间轴一个一个地放映而改变,最后形成连续的动画效果。Flash 中的帧包含三种类型,分别是普通帧、空白关键帧和关键帧。通过不同的颜色可以区分出不同的帧,黑色实心小圆点表示关键帧,空心方块表示普通帧,空心圆表示空白关键帧。相应的箭头标志表示不同的动态形式,蓝色背景的箭头标志表示运动变化,绿色背景的箭头标志表示形状变化。帧在时间轴窗口中的显示如图4-2所示。

图4-2 Flash中的帧

关键帧主要用于定义动画的变化环节,是动画中呈现关键性内容或变化的帧。默认情况下,每一个图层的第1帧是关键帧,在时间轴上关键帧以黑点表示。在动画播放的过程中,关键帧会呈现出关键性的动作或内容上的变化。

时间轴上的空白关键帧以空心小圆表示。空白关键帧是特殊的关键帧,它没有内容,主要用于在画面与画面之间形成间隔,用户可以在其上绘制图像。如果在空白关键帧中添加内容,它会自动转化为关键帧。同样,如果将某关键帧中的内容删除,则此关键帧就会转化为空白关键帧。可以使用空白关键帧作为停止显示指定图层中已有内容的一种方法。

在时间轴上能显示实例对象,但不能对实例对象进行编辑操作的帧是普通帧,它在时间轴上显示为空心方格。在普通帧中不可以添加新的内容。有内容的帧呈灰色,空的帧显示为白色。普通帧一般起着过滤和延长关键帧内容显示的作用。

这三种帧的区别为:①同一层中,在前一个关键帧的后面任一帧处插入关键帧,是复制前一个关键帧上的对象,并可对其进行编辑操作;如果插入普通帧,是延续前一个关键帧上的内容,不可对其进行编辑操作;插入空白关键帧,可清除该帧后面的延续内容,可以在空白关键帧上添加新的实例对象。②关键帧和空白关键帧上都可以添加帧动作脚本,普通帧上则不能。

3.图层

在 Flash 动画中,可以将图层看成一叠透明纸,每一张纸上面都有不同的画面,将这些纸叠在一起就组成一幅比较复杂的画面。在上面一层添加内容,会遮住下面一层中相同位置的内容,但如果上面一层的某个区域没有内容,透过这个区域就可以看到下面一层相同位置的内容。

Flash 中的图层都是相互独立的,拥有独立的时间轴,包含独立的帧,可以在图层上绘制和编辑对象,且不会影响其他图层上的对象。当创建一个新的Flash文档后,时间轴上的图层区会自动创建一个图层。Flash中的图层如图4-3所示。

图4-3 Flash中的图层

在图层名称右方有图层的三种编辑模式:①显示/隐藏模式,可以使该图层的图形对象隐藏起来。②锁定/解锁模式,锁定图层,使之不能被编辑。③轮廓/轮廓与填充模式,只显示轮廓,便于修改。

图层的作用主要有以下两个方面:①对某一图层中的对象或动画进行编辑和修改,不会影响其他图层中的对象。②利用特殊的图层可以制作特殊的动画效果,如利用遮罩层可以制作遮罩动画,利用引导层可以制作引导动画。

在Flash中,图层根据使用功能的不同分为三种基本类型:①普通层,通常为制作动画、安排元素所使用的图层。②遮罩层,只用遮罩层的可显示区域来显示被遮罩层的内容。可以将多个层组合起来放在一个遮罩层下,以创建多样的效果。③引导层,不仅可以引导动作动画,还有参考层的作用。引导动作时,引导层内包含的是一条路径,运动引导线所引导的层的运动过渡动画,将会按照这条路径进行运动。作为参考层时,可以在其中增加一些说明性文字,而输出的时候层中所包含的内容将不被输出。

4.元件和库

Flash中的元件和库如图4-4所示。

图4-4 Flash中的元件和库

元件是动画中可以反复取出使用的小部件,它可以是图形、按钮或一个小动画,可以独立于主动画进行播放。元件可以反复使用,因而不必反复制作相同的动画或素材,大大提高了工作效率。常见的元件类型有以下几种:①影片剪辑元件,本身也是一段动画,可以独立播放。当播放主动画时,影片元件也在循环播放,它不会受到场景中帧的约束。②按钮元件,用于创建动画的控制按钮,以响应鼠标的按下、单击等事件。按钮元件包括“弹起”、“指针经过”、“按下”和“单击”4 种状态,在按钮元件的不同状态上创建不同的内容,可以使按钮对鼠标操作进行相应的响应。可见,按钮元件实际上是一个只有 4 帧的影片剪辑,但它在时间轴上不能播放,只是根据鼠标指针的动作做出简单的响应,并转到相应的帧,通过给舞台上的按钮实例添加动作语句可以实现Flash影片强大的交互性。③图形元件,用于创建可反复使用的图形,可以是静止图片,也可以是由多个帧组成的动画。它的特点是拥有相对独立的编辑区域,如果将其调用到场景中,会受到场景中帧的约束。

这三种元件的相同点是都可以重复使用,且当需要对重复使用的元素进行修改时,只需编辑元件,而不必对所有该元件的实例一一进行修改。区别及应用中需注意的问题有:①影片剪辑元件和按钮元件的实例上都可以加入动作语句,图形元件的实例则不能;影片剪辑里的关键帧上可以加入动作语句,按钮元件和图形元件则不能。②影片剪辑元件和按钮元件中都可以加入声音,图形元件则不能。③影片剪辑元件的播放不受场景时间线长度的制约,它有元件自身独立的时间线;按钮元件独特的4帧时间线并不自动播放,而只是响应鼠标事件;图形元件的播放完全受制于场景时间线。④影片剪辑中可以嵌套另一个影片剪辑,图形元件中也可以嵌套另一个图形元件,但是按钮元件中不能嵌套另一个按钮元件;三种元件可以相互嵌套。

库主要用于存放和管理动画中可重复使用的元件、位图、声音和视频文件等,利用库对这些资源进行管理,可有效提高工作效率。要使用元件,必须打开“库”面板,将元件拖放到场景中,这个过程就称为建立了该元件的一个实例,场景中的元件就称为一个实例。由于一个元件可以调用多次,且调用一次就产生一个实例,因此一个元件可以产生多个实例。除了对元件进行管理,还可以在库中对元件的属性进行更改。对实例的操作不会影响到元件本身,但改变元件的话所有的实例将随之发生同样的变化。

5.场景

场景是设计者直接绘制帧中的图像或者从外部导入图形之后进行编辑处理形成单独的帧,再将单独的帧合成为动画的场所。也就是说,场景是用来组装测试动画的场地空间。场景在Flash中是不可缺少的(至少要有一个场景)。Flash中的场景如图4-5所示。一个Flash动画可以由一个场景组成,也可以由几个场景组成。若一个动画由多个场景组成,则播放器会在播放完第一个场景后自动播放下一个场景的内容,直至最后一个场景播放完。可以通过场景面板来完成对场景的添加/删除操作,并可以通过拖拽其中各场景的排列顺序来改变播放的先后次序。

图4-5 Flash中的场景

执行菜单“窗口 | 其他面板 | 场景”可以打开场景窗口。场景窗口如图4-6所示。

图4-6 “场景”面板

6.Flash动画的分类

Flash动画是以时间线为基础的帧动画。简单的Flash动画可以由几帧连续的画面组成,复杂的Flash动画作品由多个场景和元件组成。Flash动画中常见的动画形式有5种:逐帧动画、形状补间动画、动作补间动画、引导线动画和遮罩动画。

(1)逐帧动画

逐帧动画也称为帧帧动画,是最基本的动画形式。与传统动画制作方式相同,逐帧动画通过向时间轴上的每一帧绘制不同的内容来创建简单的动画。由于逐帧动画的帧序列内容不一样,不仅增加了制作负担而且最终输出的文件量也很大。但它的优势也很明显:由于是一帧一帧的画,所以逐帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容,而它类似于电影的播放模式,很适合表演非常细腻的动画,如三维效果、人物或动物急剧转身等效果。

(2)形状补间动画

在Flash动画中,常常看到文字的变形、各种图形之间的变化等,这些都是简单的形状补间动画。形状补间动画,就是先分别定义不同属性的两个关键帧,如对象的外形、颜色变化等,然后在两个关键帧之间建立一种形状渐变关系,这也是制作形状补间动画的过程。

形状补间动画可以在两个关键帧之间制作出变形的效果,让一种形状随时间变化成另一种形状,还可以实现两个图形之间颜色、大小、位置的变化。使用的元素多为用鼠标或压感笔绘制出的形状,如果使用图形元件、按钮、文字,则必先将它们分离才能创建变形动画。

(3)动作补间动画

在一个关键帧上放置一个元件,在另一个关键帧改变这个元件的位置、大小、旋转角度、颜色、透明度等属性,Flash 根据二者之间的帧的值创建的动画称为动作补间动画。构成动作补间动画的元素是元件,包括影片剪辑、图形元件、按钮、文字、位图、组合等,但不能是形状,只有把形状转换成元件后才可以做动作补间动画。

(4)引导线动画

所谓引导线动画,就是能使对象按照设定的曲线路径运动的动画。从本质来说,引导线动画就是由路径约束其运动轨迹的动作补间动画。

(5)遮罩动画

遮罩动画是Flash中很实用且最具潜力的功能,它以补间动画为基础。Flash提供了一种特殊的图层,称为遮罩层,当一个图层被设置为遮罩层后,下面的一个或多个被遮罩层就会被遮盖住,而如果在遮罩层上绘制一些形状,这些形状的位置就变成空洞,透过空洞就可以看到被遮罩层上绘制的内容。也就是说,遮罩动画是利用不透明的区域和这个区域以外的部分来显示和隐藏元素的,这样增加了运动的复杂性。

遮罩动画至少应该具有两个图层,即遮罩层和被遮罩层。复杂一些的遮罩动画,一个遮罩层可以链接多个被遮罩层。

4.2.2 Flash CS3工作界面

1.开始页

运行 Flash CS3,首先出现的是开始页,它将常用的任务都集中放在一个页面中,包括“打开最近的项目”、“新建”、“从模板创建”、“扩展”及对官方资源的快速访问等,如图4-7所示。

图4-7 Flash CS3开始页

如果要隐藏开始页,可以单击选择“不再显示”选框,然后在弹出的对话框中单击“确定”按钮。如果要再次显示开始页,可以通过选择“编辑 | 首选参数”命令,打开“首选参数”对话框,然后在“常规”类别中设置“启动时”选项为“欢迎屏幕”即可。

2.工作窗口

在开始页,选择“新建”下的“Flash文件(ActionScript 3.0)”,就启动Flash CS3的工作窗口并新建一个影片文档,如图4-8所示。

图4-8 Flash CS3的工作窗口

Flash CS3的工作窗口主要由菜单栏、主工具栏、工具箱、时间轴、编辑栏、舞台、创作面板及右键快捷菜单组成。

(1)菜单栏

菜单栏由“文件”、“编辑”、“视图”、“插入”、“修改”、“文本”、“命令”、“控制”、“测试”、“窗口”和“帮助”等11个菜单项组成。单击每个菜单项,会显示出相应的下拉菜单,如图4-9所示。执行菜单上的命令,可以完成对文件及各种对象的操作。

图4-9 “文件”菜单

(2)主工具栏

主工具栏在默认工作界面中是不显示的,可以通过单击“窗口 | 工具栏 | 主工具栏”命令将其调出显示。主工具栏上是一些标准菜单中的命令按钮,将Flash中的常用功能以按钮的形式集中在一起,如图4-10所示。

图4-10 主工具栏

(3)工具箱

单击“窗口 | 工具”,可以打开或关闭如图4-11所示的工具箱。Flash CS3的工具箱中包含一套完整的绘图工具。工具箱分为绘图工具、查看工具、颜色选择工具和工具选项栏4个部分。单击工具箱中的目标工具图标,就可以激活该工具。工具箱选项栏会显示当前工具的具体可用设置项,例如选择箭头工具,与它相对应的属性选项就会出现在工具箱选项栏中。

图4-11 工具箱

工具箱中各工具的功能如下。

选择工具:用来选择目标、修改目标形状的轮廓,按住 Ctrl键可在轮廓线上添加节点并改变轮廓形状。

部分选取工具:通过调节节点的位置或曲柄改变线条的形状。

变形工具组:该工具组中包含了任意变形工具和渐变变形工具。任意变形工具可调整目标对象的大小,进行旋转等变形操作。渐变变形工具可调整渐变填充色的方向、渐变过渡的距离。

套索工具:套选目标形状。

钢笔工具:以节点方式建立复杂选区形状。

文本工具:用于输入文字。

线条工具:用于画出直线段。

矩形工具组:包括矩形工具、椭圆工具、基本矩形工具、基本椭圆工具和多角星形工具。矩形工具可以建立矩形,椭圆工具可以建立椭圆形,基本矩形工具可以建立圆角矩形,基本椭圆工具可以建立任意角度的扇形,多边形工具可以建立多边形和星形。

铅笔工具:使用线条绘制形状。

刷子工具:使用填充色绘制图形。

墨水瓶工具:用于填充轮廓线条的颜色。

颜料桶工具:用于填充封闭形状的内部颜色。

滴管工具:提取目标颜色作为填充颜色。

橡皮擦工具:用于擦除形状。

手形工具:用于移动工作区的视点。

缩放工具:用于放大和缩小视图。

笔触颜色:显示当前绘制线条所采用的颜色。

填充颜色:显示当前用来填充形状内部的颜色。

黑白按钮:可以将当前笔触色设为黑色,填充色设为白色。

交换颜色:将当前的笔触色与填充色交换。

没有颜色:绘制的封闭形状将不会自动以当前填充颜色填充,仅为线条形状。

选项:显示当前工具可以设置的选项。

(4)编辑栏

编辑栏位于舞台的顶部,其包含的控件和信息可用于编辑场景和元件,并更改舞台的缩放比率,如图4-12所示。通过使用编辑栏,可以方便地在场景和元件的编辑界面之间切换。

图4-12 编辑栏

(5)舞台

舞台是用户在创建Flash文档时放置动画内容的矩形区域,这些内容可以是矢量图形、文本、按钮、导入的位图或视频等,该区域中的内容即为当前帧的内容,如图4-13所示。在实际播放影片文件时,舞台矩形区域以内的图形对象是可见的,而区域外的图形对象是不可见的。在工作时,如果需要更改舞台的视图,可以使用放大和缩小功能。

图4-13 舞台

(6)创作面板

Flash 的创作面板包括“属性”面板、“库”面板、“动作”面板及其他集成了各种功能的面板等。使用“属性”面板可以设置并编辑舞台或时间轴上当前选中内容的最常用属性。“库”面板是存储和管理在Flash中创建的各种元件的地方,并用于存储和管理导入的文件,包括位图图形、声音文件和视频剪辑。使用“动作”面板可以创建并编辑对象或帧的ActionScript代码。除了“属性”面板、“库”面板和“动作”面板以外,Flash还将其他各种功能集合在相应的面板上,以方便使用这些功能。

(7)右键快捷菜单

右键快捷菜单包含与当前选择内容相关的命令。例如,将鼠标放在图形上单击右键,将弹出如图4-14所示的快捷菜单。

图4-14 快捷菜单

4.2.3 Flash动画制作流程

Flash动画制作的基本流程是:准备素材→新建Flash影片文档→设置文档属性→制作动画→测试和保存动画→导出和发布影片。

1.准备素材

根据动画内容准备一些动画素材,包括音频素材(声效、音乐等)、图像素材、视频素材等。一般情况下,需要对这些素材进行采集、编辑和整理,以满足动画制作的需求。

2.新建Flash影片文档

Flash影片文档有两种创建方法:一种是新建空白的影片文档,另一种是从模板创建影片文档。在Flash CS3中,新建空白影片文档有两种类型:一种是“Flash文件(ActionScript 3.0)”,另一种是“Flash文件(ActionScript 2.0)”。它们的不同之处在于前一个的动作脚本语言版本是ActionScript 3.0,后一个的动作脚本语言版本是ActionScript 2.0。

3.设置文档属性

在正式制作动画之前,要先设置好尺寸(舞台的尺寸)、背景颜色(舞台背景色)、帧频(每秒播放的帧数)等文档属性。这些操作要在“文档属性”对话框中进行,如图4-15所示。

图4-15 “文档属性”对话框

4.制作动画

这是完成动画效果制作的最主要的步骤。一般情况下,需要先创建动画角色(可以用绘图工具绘制或者导入外部的素材),然后在时间轴上组织和编辑动画效果。

5.测试和保存影片

动画制作完成后,可以选择“控制 | 测试影片”命令(快捷键 Ctrl + Enter)对影片效果进行测试,如果满意,可以选择“文件 | 保存”命令(或按Ctrl + S组合键)保存影片。为了安全,在动画制作过程中要经常保存文件。按Ctrl + S组合键,可以快速保存文件。保存的文件后缀为.fla,也就是编辑时的文件格式。该格式保存各个图层、符号的信息,是原始文件格式,并且可重复编辑。

6.导出和发布影片

如果对制作的动画效果比较满意,最后可以导出或者发布影片。选择“文件 | 导出 | 导出影片”命令,可以导出影片。选择“文件 | 发布”命令可以发布影片,通过发布影片可以得到更多类型的目标文件。保存的文件为合成后的影片播放文件,后缀为.swf,此文件不能再编辑。此外还有.exe格式,是可执行文件,能独立播放。

4.2.4 逐帧动画

逐帧动画的原理是将一个动画的连续动作分解成一张张的图片,把每一张图片用关键帧描绘出来,再连续播放这些关键帧形成动画。逐帧动画是Flash动画的基础,是一种传统的动画制作技术。

1.逐帧动画的概念和在时间轴上的表现形式

在时间轴上逐帧绘制帧内容而成的动画称为逐帧动画。由于是一帧一帧的画,所以逐帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容。逐帧动画在时间轴上表现为连续出现的关键帧,如图4-16所示。

图4-16 逐帧动画在时间轴上的表现

2.创建逐帧动画的几种方法

创建逐帧动画有如下几种方法:①用导入的静态图片建立逐帧动画,用.jpg、.png 等格式的静态图片连续导入Flash中,就会建立一段逐帧动画。②绘制矢量逐帧动画,用鼠标或压感笔在场景中一帧帧地画出帧内容。③文字逐帧动画,用文字做帧中的元件,实现文字跳跃、旋转等特效。④导入序列图像,可以导入.gif序列图像、.swf动画文件或利用第三方软件(如swish、swift 3D等)产生动画序列。下面用一个例子来具体说明逐帧动画的制作过程。

3.制作实例

(1)选择“文件 | 新建”命令(或按Ctrl + N组合键)新建一空白文档,选择“文件 | 导入 | 导入到舞台”命令(或按Ctrl + R组合键),将图像1.jpg导入到舞台,如图4-17所示。

图4-17 导入图像到舞台

(2)选择“修改 | 文档”命令(或按Ctrl + J组合键),调整舞台大小与图像吻合,如图4-18所示。

图4-18 调整舞台大小

(3)选择时间轴面板上的“插入图层”命令,新建一个“图层 2”,选择工具箱中的“文本”工具,在属性面板中将“字体”设置为黑体,“字体大小”设置为40,“文本(填充)颜色”设置为#FF9900,输入文字“城市,让生活更美好”,选中“让生活更美好”文本,将其填充色设置为#009900,如图4-19所示。

图4-19 输入文字

(4)选择时间轴面板上的“插入图层”命令,新建一个“图层 3”,选择工具箱中的“文本”工具,在属性面板中将“字体”设置为 Arial,“字体大小”设置为 30,“文本(填充)颜色”设置为#666666,输入文字“Better City, Better Life”,如图4-20所示。

图4-20 输入英文

新建图层

文本

(5)在时间轴面板中单击“图层2”,选中文字,选择“修改 | 分离”命令(或按Ctrl + B组合键),将汉字分离,如图4-21所示。

图4-21 分离文字

(6)在时间轴面板上,选中图层2的第2~9帧,分别按F6键插入关键帧。选中第1帧,将“城”字后面的文字删除;选中第2帧,将“城市”后面的文字删除;第3~8帧依次类推,每次保留3~8个文字;第9帧,保留全部文字。选中图层2的第10帧,按F6键插入一个关键帧,选中全部文字,将其设置为粗体。图4-22所示为第5帧时的设置情况。

图4-22 第5帧的设置结果

(7)分别在图层1和图层3的第10帧按F5键,插入空白关键帧。此动画制作完毕,选择“控制 | 播放”命令(或按回车键),查看动画效果。测试效果如图4-23所示。

图4-23 文字逐个出现动画效果

(8)选择“文件 | 保存”命令,保存制作好的动画为.fla格式;或选择“文件 | 导出 | 导出影片”命令,将制作好的动画保存为.swf格式的Flash影片,它可以通过浏览器或FlashPlayer播放。

本例制作的是文字逐个出现的动画效果,在制作过程中主要用到了文本工具。需要注意的是,制作逐帧动画时,关键帧的数量可以自行设定,各个关键帧的内容也可任意改变,只要两个相邻关键帧上的内容连续性合理即可。

4.2.5 形状补间动画

形状补间动画是Flash中非常重要的表现手法之一,运用它可以变幻出各种奇妙的、不可思议的变形效果。

1.形状补间动画的概念及属性

(1)形状补间动画的概念

在Flash的时间轴面板上,在一个时间点(关键帧)绘制一个形状,然后在另一个时间点(关键帧)更改该形状或绘制另一个形状,Flash 根据二者之间的帧的值或形状来创建的动画,称为形状补间动画。

(2)构成形状补间动画的元素

形状补间动画可以实现两个图形之间颜色、形状、大小、位置的相互变化,其变形的灵活性介于逐帧动画和动作补间动画二者之间。使用的元素多为用鼠标或压感笔绘制出的形状,对形状补间动画关键帧上元素的要求,一是必须为矢量图,二是必须为形状状态。选中关键帧上的物体时会显示“麻点”状态,在属性面板里会显示“形状”。如果使用图形元件、按钮、文字,则必须先将它们“拆散”再变形。

(3)形状补间动画在时间轴上的表现

形状补间动画建好后,时间轴面板的背景色变为淡绿色,在起始帧和结束帧之间有一个长长的箭头,如图4-24所示。

图4-24 形状补间动画在时间轴面板上的标记

(4)形状补间动画的特点

形状补间动画属于补间动画的一种,由两个关键帧和它们之间的普通帧组成。形状补间动画具有如下特点:①不需要手工创建每个帧的内容,只需要创建两个关键帧的内容,两个关键帧之间的所有动画都由Flash创建,制作更加简便。②如果整个动画都由手工控制,帧与帧之间的过渡可能不自然、连贯,而补间动画除两个关键帧由手工控制外,中间的帧都由Flash自动生成,因此渐变过程更为连贯。③文件小,是一种应用较多的动画制作方式。

(5)创建形状补间动画的方法

形状补间动画是指图形形状逐渐发生变化的动画。图形的变形不需要依次绘制,只需确定图形在变形前和变形后的两个关键帧中的画面,中间的变化过程由Flash自动完成。其具体操作如下:①在动画的起始帧插入关键帧,并编辑起始帧中的内容。②选择结束帧并插入关键帧,再编辑结束帧中的内容。③选择起始帧,在“属性”面板的“补间”下拉列表框中选择“形状”选项。

2.认识形状补间动画的属性面板

Flash的“属性”面板随鼠标选定的对象不同而发生相应的变化。创建形状补间动画后,其“属性”面板如图4-25所示。各选项的含义如下。

图4-25 形状补间动画的“属性”面板

帧:用于输入帧的标签名称。

缓动:用于设定对象在变化运动过程中是减速还是加速。单击右侧的按钮,从弹出的滚动条中拖动滑块可设置速度的快慢。在 1~100 的正值之间,动画运动的速度从快到慢,朝运动结束的方向减慢补间;在-1~-100的负值之间,动画运动的速度从慢到快,朝运动结束的方向加速度补间;默认值为0,表示对象做匀速运动。

“补间”下拉列表框:用于选择创建的补间动画的类型。其中,“动作”类型用于创建动作补间动画,“形状”类型用于创建形状补间动画,“无”表示不创建动画。

“混合”下拉列表框:用于设置中间帧形状变化过渡的模式,其中包括“分布式”和“角形”两项。分布式使中间帧的形状变化过渡得更加自然;角形使中间帧的形状变化保持关键帧上图形的棱角。此模式可用于有尖锐棱角的图形变换。如果图形没有尖角,Flash 会自动地将此模式设为分布式。

下面通过实例说明形状补间动画的制作过程。

3.制作实例——字母变形动画

在创建形状补间动画时,要控制复杂的形状变化,可以使用形状提示来使变形的过程更加细腻。形状提示会标志起始形状和结束形状中相对应的点。利用形状提示可以将一个图形上的某个点转换到另一个图形上的某个点,使物体间的变形过渡更有目的性,从而制作出更丰富有趣的变形效果。

本例中将采取加形状提示和不加形状提示两种方式制作从字母A到字母B的形状变化动画,看看二者有什么不同。

(1)选择“文件 | 新建”命令(或按Ctrl + N组合键),新建一个空白文档。

(2)双击时间轴面板上的“图层1”,将图层1改名为“文字”。选择工具箱中的“文本”工具,在属性面板中将“字体”设置为仿宋,“字体大小”设置为30,“文本(填充)颜色”设置为#000099,输入文字“无形状提示”。按照上述设置,再输入文字“有形状提示”。用选择工具将两段文字都选中。选择“窗口 | 对齐”命令(或按Ctrl + K组合键),弹出“对齐”窗口,选择“左对齐”,使两段文字左对齐,如图4-26所示。

图4-26 对齐文字

(3)新建图层“无形状提示”。选中该层第1帧,选择工具箱中的“文本”工具,在属性面板中将“字体”设置为Arial,“字体大小”设置为90,“文本(填充)颜色”设置为#FF0000,输入字母“A”。选中该层第15帧,按F6 键,创建一个关键帧。在该帧上,以同样的设置,输入字母“B”。分别选中“A”和“B”,执行“修改 | 分离”命令(或按Ctrl + B组合键),将两字母转化为图形。再选中第1帧,在属性面板选择“补间”为“形状”。此时,时间轴面板上,本次的第1帧到第15帧之间出现浅绿色背景并有从左至右的黑色箭头标识,说明该补间动画创建成功。如图4-27所示。

图4-27 创建无形状提示的形状补间动画

(4)新建图层“有形状提示”。用与上一步中同样的设置和操作,创建“A”到“B”之间的形状补间动画。选中该层第1帧,确认工具箱中的“对齐对象”按钮处于被按下状态,选择“修改 | 形状 | 添加形状提示”命令(或按Ctrl + Shift + H组合键),连续执行5次,添加a~e五个形状提示点,如图4-28所示。

图4-28 为“A”添加形状提示

(5)在“有形状提示”层的第15帧,将图形“B”上五个形状提示点放置在相应的位置上,如图4-29所示。

图4-29 为“B”设置形状提示

(6)选择“控制 | 测试影片”命令,测试动画效果,如图4-30所示。可以看出两种形状提示的区别。

图4-30 最终动画效果

(7)保存此动画或导出为Flash影片。

本案例制作了一个“A”变化为“B”的动画效果,在制作过程中主要练习输入文本、创建形状补间动画和创建形状提示的方法。通过形状提示可以控制“A”与“B”之间的变化过程,使得对象之间的变形更加自然、有规律。

本案例通过选择“修改 | 形状 | 添加形状提示”命令来添加形状提示,用户也可以在添加了第一个形状提示后,在场景中选中形状提示,单击右键,在弹出的快捷菜单中选择“添加提示”命令来添加其他的形状提示。

对于形状提示,有如下说明。

若要删除形状提示,有两种方法:①将形状提示拖到画面以外的任何地方。②在形状提示上单击右键,在弹出的快捷菜单中选择“删除提示”命令。

要获得最佳效果,应遵循三条准则:①确保形状提示是符合逻辑的。②按逆时针顺序从形状的左上角开始放置形状提示,工作效果最好。③在复杂的补间形状中,需要创建中间形状,然后再进行补间,而不要只定义起始和结束的形状。

制作形变动画时有如下注意事项。①形状补间动画只能应用于打散的图形,即其动画对象只能是矢量图形对象。群组对象、图符引例对象、符号和位图图像均不能作为变形动画的对象,除非把它们打散成矢量图形。如果不是图形,可执行“修改 | 分离”命令转换为图形。②判断是不是图形的方法:用鼠标在对象上单击,如果是图形,则对象会被斜的条状波纹覆盖。③形状补间动画在时间轴上的标识为,关键帧之间为浅绿色背景并有从左至右的黑色箭头标识。如果出现标识,即关键帧之间为浅绿色背景且关键帧之间以虚线连接,则表示创建的形状补间动画没有创建成功,或在创建时出现操作错误。

4.2.6 动作补间动画

动作补间动画也是Flash中非常重要的表现手段之一。在Flash动画的制作过程中,常需要制作图片的若隐若现、移动、缩放、旋转等效果,这主要通过动作补间动画来实现。与形状补间动画不同的是,动作补间动画的对象必须是元件或成组对象。

1.动作补间动画的概念及属性

(1)动作补间动画的概念

在一个关键帧上放置一个元件,然后在另一个关键帧改变这个元件的大小、颜色、位置、透明度等,Flash根据二者之间的帧的值创建的动画,为动作补间动画。

(2)动作补间动画的元素

构成动作补间动画的元素是元件,包括影片剪辑、图形元件、按钮、文字、位图、组合等,但不能是形状,只有把形状组合或者转换成元件后才可以用于动作补间动画。

(3)动作补间动画在时间轴上的表现

动作补间动画建立后,时间轴面板的背景色变为淡紫色,在起始帧和结束帧之间有一个长长的箭头。如图4-31所示。

图4-31 动作补间动画在时间轴上的表现

(4)形状补间动画和动作补间动画的区别

形状补间动画和动作补间动画都属于补间动画,前后都各有一个起始帧和结束帧,二者之间的区别如表4-1所示。

表4-1 形状补间动画和动作补间动画的区别

(5)动作补间动画制作方法

动作补间动画就是在两个关键帧之间建立了一种运动补间关系。该类型动画渐变过程很连贯,制作过程也比较简单,只需建立动画的第一个画面和最后一个画面,具体操作如下。①在动画的起始帧插入关键帧,并编辑起始帧中的内容。②选择起始帧,单击右键,在弹出的快捷菜单中选择“创建补间动画”命令,或在“属性”面板的“补间”下拉列表框中选择“动作”选项。③选择结束帧并插入关键帧,再编辑结束帧中的内容。

2.动作补间动画的属性面板

创建动作补间动画后,其“属性”面板如图4-32所示。各选项的含义如下。

图4-32 动作补间动画的“属性”面板

帧:用于输入帧的标签名称。

“调整到路径”复选框:选中该复选框使对象沿设定的路径运动,并随着路径的改变而相应地改变角度。

“同步”复选框:选中该复选框使动画在场景中首尾连续地循环播放。

“对齐”复选框:选中该复选框使对象沿路径运动时,自动捕捉路径。

“简易”下拉列表框:单击右边的向下箭头按钮,弹出拉动滑杆,拖动上面的滑块,可设置参数值,当然也可以直接在文本框中输入具体的数值。设置完后,补间动作动画效果会以下面的设置做出相应的变化:在-1~-100 的负值之间,动画运动的速度从慢到快,朝运动结束的方向加速补间;在1~100的正值之间,动画运动的速度从快到慢,朝运动结束的方向减慢补间;默认情况下,值为0,补间帧之间的变化速率不变。

“补间”下拉列表框:用于选择创建的补间动画的类型。其中,“动作”用于创建动作补间动画,“形状”用于创建形状补间动画,“无”表示不创建动画。

“旋转”下拉列表框:用于设定物体的旋转运动。其中,“无”表示对象不旋转;“自动”表示对象以最小的角度进行旋转,直到终点位置;“顺时针”表示可设定对象沿顺时针方向旋转到终点位置,在其后的“次”文本框中可输入旋转次数,输入 0 表示不旋转;“逆时针”表示可设定对象沿逆时针方向旋转到终点位置,在其后的“次”文本框中可输入旋转次数,输入0表示不旋转。

3.制作实例——热气球

(1)选择“文件 | 新建”命令,在弹出的面板中选择“新建Flash文件(ActionScript 3.0)”,创建一个空白的Flash文档。选择“修改 | 文档”命令,在弹出的面板中将尺寸大小改为600×400像素,背景色为白色,帧频为4,如图4-33所示。

图4-33 修改文档属性

(2)将素材中的图片4导入舞台,作为背景。调制图片大小以和舞台吻合。选择第50帧,按F5键,添加普通帧。

(3)选择“插入 | 新建元件”命令(或按 Ctrl + F8 组合键),新建一个图形元件,名称为“热气球”,类型为“图形”,如图4-34所示。进入新元件编辑场景,选择第1帧,执行“文件| 导入 | 导入到舞台”命令,将素材中的图片3导入场景。

图4-34 创建元件“热气球”

(4)用与上相同的步骤,创建“白云”元件,并在“白云”编辑场景中,将素材中的图片5导入场景。

(5)单击时间轴上的“场景1”按钮,转换到主场景中,把库里名为“热气球”的元件拖到场景的左下方。在“属性”面板上打开“颜色”旁边的小三角,设置Alpha值为80%,如图4-35所示。

图4-35 第1帧中热气球在场景中的位置和Alpha值

(6)热气球向上方飞去,应该越来越小,越来越模糊。选中“图层2”的第50帧,按F6键,添加一个关键帧,拖动热气球到场景的右上角,在“属性”面板中设置热气球的大小,宽为50,高为65,Alpha值为20%,如图4-36所示。

图4-36 第50帧中热气球在场景中的位置和Alpha值

(7)右键单击“图层2”的第1帧,在弹出的窗口中选择“创建补间动画”,如图4-37所示。

图4-37 创建补间动画

(8)创建白云飘过的效果。新建“图层 3”,从库中拖出名为“白云”的元件,放置在场景右侧的山峰处,设置Alpha值为80%。在第50帧处添加关键帧,把元件移到场景的左侧,设置Alpha值为40%。用右键单击图层的第1帧,选择“创建补间动画”。

(9)执行“控制 | 测试影片”命令,观察动画效果,如果满意,执行“文件 | 保存”命令,将文件保存成“热气球.fla”。如果要导出Flash的播放文件,执行“文件 | 导出 | 导出影片”命令,保存成“热气球.swf”文件。

制作动作补间动画时需要注意以下事项。①起始对象一定是元件(Symbol),而且必须是同一元件。如果不是元件,需执行菜单“插入 | 转换成元件”命令,把对象转换为元件。②判断对象是否为元件的方法:用工具箱中“箭头”工具单击舞台上的对象,如果是元件,会在对象中心出现一个加号,四周则会出现选区中的边框。③运用动作补间动画,可以设置元件的大小、位置、颜色、透明度、旋转等属性的变化。

4.2.7 引导路径动画

单纯依靠动作补间动画制作出来的一般是沿直线运动的效果,如果要实现弧线或不规则的运动,如月亮围绕地球旋转、鱼儿在大海里遨游等,则要用到引导路径动画的知识。

将一个或多个层链接到一个运动引导层,使一个或多个对象沿同一条路径运动的动画形式,称为引导路径动画。这种动画可以使一个或多个元件完成曲线或不规则运动。

1.创建引导路径动画的方法

(1)创建引导层和被引导层

一个最基本的引导路径动画由两个图层组成,上面一层是引导层,它的图层图标为,下面一层是被引导层,图标为,与普通图层相同。在普通图层上单击时间轴面板的“添加引导层”按钮,该层的上面就会添加一个引导层,同时该普通层缩进成为被引导层,如图4-38所示。

图4-38 引导层和被引导层

(2)引导层和被引导层中的对象

引导层是用来指示元件运行路径的,所以引导层中的内容可以是用钢笔、铅笔、线条、椭圆工具、矩形工具或画笔工具等绘制出的线段。

被引导层中的对象是跟着引导线运行的,可以使用影片剪辑、图形元件、按钮、文字等,但不能应用形状。由于引导线是一种运动轨迹,所以被引导层中最常用的动画形式是动作补间动画,当播放动画时,一个或数个元件将沿着运动路径移动。

(3)向被引导层添加元件

引导动画最基本的操作是使一个运动动画“附着”在引导线上,所以操作时应特别注意引导线的两端,被引导对象的起点和终点一定要对准引导线的两个端头,如图4-39所示。

图4-39 元件中心十字星对准引导线

在图4-39中,元件的透明度设为60%,可以透过元件看到下面的引导线,元件中心的十字星正好对着线段的端头,这一点非常重要,它是引导线动画顺利运行的前提。

2.应用引导路径动画的技巧

(1)被引导层中的对象在被引导运动时,还可做更细致的设置,比如运动方向。选中“属性”面板上的“调整到路径”,对象的基线就会调整到运动路径。而如果选中“贴紧”,元件的注册点就会与运动路径贴紧,如图4-40所示。

图4-40 路径调整和对齐

(2)引导层中的内容在播放时是看不见的,利用这一特点,可以单独定义一个不含被引导层的引导层,该引导层中可以放置一些文字说明、元件位置参考等,此时,引导层的图标为

(3)在做引导路径动画时,按下工具栏上的“对齐对象”功能按钮,可以使“对象附着于引导线”的操作更容易成功。

(4)过于陡峭的引导线可能使引导动画失败,而平滑圆润的线段有利于引导动画成功制作。

(5)利用被引导对象的中心对齐场景中的十字星,有助于引导动画的成功。

(6)向被引导层中放入元件时,在动画开始和结束的关键帧上,一定要让元件的注册点对准线段的开始和结束的端点,否则无法引导。如果元件为不规则形,可以按下工具栏上的任意变形工具,调整注册点。

(7)如果想解除引导,可以把被引导层拖离引导层,或在时间轴面板的引导层上单击右键,在弹出的菜单上选择“属性”,在对话框中选择“一般”作为图层类型,如图4-41所示。

图4-41 图层“属性”面板

(8)如果想让对象做圆周运动,可以在引导层画一个圆形线条,再用橡皮擦去一小段,使圆形线段出现两个端点,再把对象的起点、终点分别对准端点即可。

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

3.制作实例——沿曲线飞行的热气球

上一个实例里采用动作补间动画制作的热气球只能做直线飞行,本例在上例的基础上进行修改,让热气球沿着运动引导层上绘制的曲线飞行。

(1)在Flash CS3的起始页上选择“打开最近的项目”中的“热气球.fla”,如图4-42所示。

图4-42 打开“热气球.fla”文档

(2)在时间轴面板中选中“图层 2”,按下“添加运动引导层”按钮,为图层 2 添加一个运动引导层。在引导层用铅笔工具画出一条曲线。在图层2的第1帧把热气球的中心对准引导层的终端,再在引导层的第50帧插入关键帧,选择图层2的第50帧,把这一帧的热气球的中心对准引导层的终端,如图4-43所示。

图4-43 热气球的中心对准引导层的终端

(3)这样,一个沿着运动引导线飞行的热气球动画就做好了。可以执行“控制 | 测试影片”命令,观察动画效果,如果满意,执行“文件 | 保存”命令,将文件保存成“曲线飞行的热气球.fla”。如果要导出Flash的播放文件,执行“文件 | 导出 | 导出影片”命令,保存成“曲线飞行的热气球.swf”文件。

4.2.8 遮罩动画

遮罩动画是Flash中一个很重要的动画类型,很多效果丰富的动画都是通过遮罩动画完成的。遮罩动画的原理是:只有在遮罩层上编辑有图形的区域,才可以看到被遮罩层上的内容。在 Flash作品中,很多都是用最简单的遮罩完成的,如水波、万花筒、百页窗、探照灯、放大镜、望远镜……

1.遮罩动画的概念

(1)什么是遮罩

在Flash的图层中有一个遮罩图层类型,为了得到特殊的显示效果,可以在遮罩层上创建一个任意形状的视窗,遮罩层下方的对象可以通过该视窗显示出来,而视窗之外的对象将不会显示。

(2)遮罩的作用

在Flash动画中,遮罩主要有两种用途,一是用在整个场景或一个特定区域,使场景外的对象或特定区域外的对象不可见;另一个用途是用来遮罩住某一元件的一部分,从而实现一些特殊的效果。

(3)遮罩的原理

遮罩需要通过两层来实现,上一层称为遮罩层,下一层称为被遮罩层。遮罩结果显示的是两层的叠加部分,上一层决定看到的形状,下一层决定看到的内容。遮罩层通常也称为透通区,即透过上一层看下一层的内容。遮罩显示结果的色彩由被遮罩层的色彩决定,即可通过辨别色彩的来源来确定哪一层为被遮罩层。

2.创建遮罩的方法

(1)创建遮罩

在Flash中没有一个专门的按钮来创建遮罩层,遮罩层其实是由普通图层转化的。只要在某个图层上单击右键,在弹出菜单中选择“遮罩层”,使命令的左边出现一个小勾,该图层就会生成遮罩层,层图标就会从普通层图标变为遮罩层图标。系统会自动把遮罩层下面的一层关联为被遮罩层,在缩进的同时图标变为。如果想关联更多层被遮罩,只要把这些层拖到被遮罩层下面就行了,如图4-44所示。

图4-44 多层遮罩动画

(2)构成遮罩层和被遮罩层的元素

遮罩层中的图形对象在播放时是看不到的,遮罩层中的内容可以是按钮、影片剪辑、图形、位图、文字等,但不能使用线条,如果一定要用线条,可以将线条转化为“填充”。

被遮罩层中的对象只能透过遮罩层中的对象被看到。在被遮罩层,可以使用按钮、影片剪辑、图形、位图、文字、线条等。

(3)遮罩中可以使用的动画形式

可以在遮罩层、被遮罩层中分别或同时使用形状补间动画、动作补间动画、引导线动画等动画手段,从而使遮罩动画变成一个可以施展无限想象力的创作空间。

3.应用遮罩时的技巧

(1)遮罩层的基本原理是:能够透过该图层中的对象看到被遮罩层中的对象及其属性(包括它们的变形效果),但是遮罩层中的对象中的许多属性(如渐变色、透明度、颜色和线条样式等)是被忽略的。例如,不能通过遮罩层的渐变色来实现被遮罩层的渐变色变化。

(2)要在场景中显示遮罩效果,可以锁定遮罩层和被遮罩层。

(3)可以用Actions动作语句建立遮罩,但这种情况下只能有一个被遮罩层,同时,不能设置Alpha属性。

(4)不能用一个遮罩层遮蔽另一个遮罩层。

(5)遮罩可以应用在GIF动画上。

(6)在制作过程中,遮罩层经常挡住下层的元件,影响视线,无法编辑,可以按下遮罩层时间轴面板的显示图层轮廓按钮,使之变成,使遮罩层只显示边框形状,在这种情况下,还可以拖动边框调整遮罩图形的外形和位置。

(7)在被遮罩层中不能放置动态文本。

4.制作实例

第一个实例为设计探照灯效果,具体步骤如下。

(1)选择“文件 | 新建”命令(或按 Ctrl + N 组合键),新建一个空白文档。设置文档大小为500×200(单位为像素),背景色为#FFFFCC,帧频为4fps。

(2)新建一个图形元件mask。选择工具箱中的“文本”工具,在属性面板中将“字体”设置为黑体,“字体大小”设置为50,“文本(填充)颜色”设置为#FF9900,输入文字“城市,让生活更美好”,选中“让生活更美好”文本,将其填充色设置为#009900,如图4-45所示。

图4-45 设计图形元件mask

(3)新建一个图形元件meng,在第1帧处插入一个关键帧,选择椭圆工具,设置其填充色和轮廓颜色均为黑色。按住Shift键在工作区中绘制一个圆,如图4-46所示。

图4-46 设计图形元件meng

(4)单击时间轴面板上的“场景 1”,返回主场景。在第 1 帧处,选取矩形工具,设置其轮廓颜色为黑色,填充色为灰色直线渐变色,其中浅蓝色的RGB值为(40,52,140),深蓝色的RGB值为(15,15,60)。如图4-47所示。

图4-47 矩形属性设置

(5)运用填充色,在舞台上绘制一个矩形,通过渐变变形工具设置填充效果,给人以光线从右上角入射的效果,如图4-48所示。

图4-48 设计光线入射效果

(6)选择工具箱中的“文本”工具,在属性面板中将“字体”设置为黑体,“字体大小”设置为50,“文本(填充)颜色”设置为黑色,输入文字“城市,让生活更美好”,这就是文本的阴影,如图4-49所示。

图4-49 设计文本阴影

(7)再次选择工具箱中的“文本”工具,在属性面板中将“字体”设置为黑体,“字体大小”设置为 50,“文本(填充)颜色”设置为#24486C,输入文字“城市,让生活更美好”,调整其位置,效果如图4-50所示。

图4-50 制作有阴影的文本

(8)新建图层2,在第1帧处插入一关键帧,将制作好的图形元件mask拖放到工具区中。调整文本位置,效果如图4-51所示。

图4-51 设计图层2

(9)新建图层3,在图层3上单击右键,在弹出的快捷菜单中选择“遮罩层”,将图层3转化为遮罩层,同时图层2转化为被遮罩层,如图4-52所示。

图4-52 创建遮罩层

(10)在遮罩层的第 1 帧处插入一个关键帧,将制作好的图形元件 meng 拖放到工作区中文本的左边。选中第30帧插入一个关键帧,将meng实例拖放到文本的右边。再次选中第1关键帧,单击右键,从弹出的快捷菜单中选择“创建补间动画”菜单命令,如图4-53所示。

图4-53 添加遮罩层

(11)这样,整个“探照灯文字”就制作完成,按Ctrl + Enter组合键预览最终效果,见图4-54。

图4-54 探照灯最终效果

(12)观察动画效果,如果满意,执行“文件 | 保存”命令,将文件保存成“探照灯.fla”。如果要导出Flash的播放文件,执行“文件 | 导出 | 导出影片”命令,保存成“探照灯.swf”文件。

第二个实例为设计百叶窗效果,具体步骤如下。

(1)选择“文件 | 新建”命令(或按 Ctrl + N 组合键),新建一个空白文档。设置文档大小为400×300(单位为像素),背景色为白色,帧频为6fps。

(2)在图层1的第1帧,导入素材中的6.jpg文件,调整图片大小为400×300(单位为像素),如图4-55所示。

图4-55 导入第一张图片

(3)新建图层2,在图层2的第1帧,导入素材中的7.jpg文件,调整图片大小为400×300(单位为像素)。

(4)选择“插入 | 新建元件”命令(或按 Ctrl + F8 组合键),新建一个图形元件,名称为“叶片”,类型为“影片剪辑”。进入“叶片”编辑场景,选择第1帧,画一个无线框的长方形,长400 (同主场景的宽),高30(主场景的1/10大小),并让矩形和场景的中心对齐(通过设置长方形的x值为-200,y值为-15实现),如图4-56所示。

(5)在第30帧处插入关键帧,将长方形尺寸改为400×1,如图4-57所示。

图4-57 在第30帧编辑“叶片”元件

4-56 在第1帧编辑“叶片”元件

(6)在第1帧设置“补间”为“形状”,得到“叶片”的形状补间动画。

(7)选择“插入 | 新建元件”命令(或按Ctrl + F8组合键),新建一个图形元件,名称为“百叶窗”,类型为“影片剪辑”。进入“百叶窗”编辑场景,选择“窗口 | 库”命令(或按Ctrl +L组合键)打开库面板,拖出10个“叶片”元件(或拖出1个后再复制出9个),整齐排列,如图4-58所示。

图4-58 编辑“百叶窗”元件

(8)单击场景1,回到主场景中。新建图层mask,把“百叶窗”电影符号拖入进来,使其完全覆盖主场景。在图层mask上单击右键,在弹出的快捷菜单中选择“遮罩层”,将图层mask转换为遮罩层,如图4-59所示。

图4-59 编辑mask层

(9)执行“控制 | 测试影片”命令,观察动画效果,如果满意,执行“文件 | 保存”命令,将文件保存成“百叶窗.fla”。如果要导出Flash的播放文件,执行“文件 | 导出 | 导出影片”命令,保存成“百叶窗.swf”文件。

4.2.9 Flash动画制作应注意的问题

以上几节介绍了Flash五种基本动画的概念、特点、制作方法和技巧,总结下来,在制作上述Flash 动画时应注意的问题有如下几点。①应尽可能节约关键帧的使用,以减小动画文件的体积。②尽量避免在同一帧处过多使用关键帧,以减小动画运行的负担,使画面播放流畅。③在创建补间动画时,如果时间轴上出现虚线箭头,表示补间不成功,应检查两个端点的对象是否符合做形状补间或动作补间的对象。④可以利用变形提示点来控制形状渐变的效果,利用变形提示点,两端的形状越简单效果越好。⑤引导层不能用做被遮罩层,遮罩层也不能用做被引导层。⑥引导项目之间不能相互嵌套,遮罩项目之间也不能相互嵌套,引导项目和遮罩项目同样不能相互嵌套。⑦线条不能用作遮罩。⑧遮罩层显示形状,被遮罩层显示内容。