第1章 Flash绘图
Flash是由Macromedia公司开发的交互性动画制作的工具软件,从1996年至今,已经发展到现在的Flash8版本。Flash制作出来的动画是矢量格式的动画,具有体积小、兼容性好、直观动感、互动性强大、支持MP3音乐等诸多优点,因此与Macromedia的另外两个产品Dreamweaver、Fireworks并称为“梦幻组合”(Dream Team)。它以其诱人的动画效果、丰富的交互功能和完美的声音输出,在很短的时间内就风靡全球,越来越多的网站上使用了Flash动画,越来越多的多媒体课件利用Flash动画增强演示效果,越来越多的用户对它爱不释手,并出现了很多叱咤风云的“闪客”。
1.1 Flash的工作环境
Flash以便捷、完美、舒适的动画编辑环境,深受广大动画制作爱好者的喜爱。启动Flash软件进入新文档的编辑窗口,首先了解软件的工作环境,见图1-1。
图1-1 工作环境
Flash 8的工作窗口由标题栏、菜单栏、主工具栏、文档选项卡、编辑栏、时间轴、工作区和舞台、工具箱以及各种面板组成。
1
1、工具栏
在工作窗口上方显示的工具栏是“主工具栏”和“控制器”,在初始进入Flash环境时默认是不显示的,可以通过调用菜单“窗口/工具栏/„”设置其显示与隐藏。
图1--2 工具栏
2、绘图工具箱
在工作窗口的左侧是绘图工具箱,可以调用菜单“窗口/工具”来控制工具箱的显示与隐藏,工具箱是浮动的,在工作窗口中可以改变其显示的位置。绘图工具箱是Flash中最常用到的一个面板,由“工具”、“查看”、“颜色”和“选项”四个部分组成。
图1-3 绘图工具箱
3、属性面板
“属性”面板位于工作窗口的下方,可以调用“窗口/属性”菜单设置其显示或隐藏。 “属性”面板又是关联的,不同的对象其属性面板中的选项是不同的。通过“属性”面板,可以很容易地设置舞台或时间轴上当前选定对象的最常用的属性选项,从而加快了Flash文档的创建过程。
图1-4 属性面板
2
另外,“滤镜”面板是Flash8新增的功能,从而大大增强了其设计方面的能力。这项新特性对制作Flash动画产生了便利和巨大影响。默认情况下,“滤镜”面板和“属性”面板、“参数”面板组成一个面板组。
图1-5 滤镜面板
4、“动作”面板
通过“动作”面板可以创建Flash的行为动画,编辑ActionScript代码。 5、其它各类面板
在工作窗口中除上述的面板外,在“窗口”菜单中还提供了大量面板的调用,这些面板打开后主要位于工作窗口的右侧。其中,比较常用的面板有“颜色”面板组中的“混色器”面板,“对齐&信息&变形”面板组中的“对齐”面板和“变形”面板,用于存放元件的“库”面板等。
图1-6 各类面板：混色器面板、对齐面板、变形面板、库面板
同时,Flash面板存在以下常见的操作。利用“窗口”菜单可以调用各类面板,在面板标题栏上右击后的快捷菜单中有“关闭面板组”命令,单击标题栏或者标题栏上的折叠按钮可以将面板“展开和折叠”,利用鼠标拖动标题栏左侧的控点可以移动面板到新的位置,调用“窗口/工作区布局/默认”菜单项,可以恢复Flash的窗口默认布局。
6、时间轴
时间轴位于工具栏的正下方,可以调“窗口/时间轴”菜单设置其显示或隐藏。时间轴左侧是图层,图层就像堆叠在一起的多张幻灯胶片一样,在舞台上一层层地向上叠加。如果上面一个图层上没有内容,那么就可以透过它看到下面的图层。 7、舞台和工作区
舞台是创作影片中各个帧内容的一个矩形区域,默认情况下是以白色作为背景,所有在屏幕上播放的动画都不能超出舞台这个范围。工作区是一个更大的范围,默认的情况下是由舞台和四周的灰色区域组成,虽然在动画播放时不能显示灰色区域内的内容,但在动画设计过程中,对象是可以从灰色区域移动到舞台上。
3
1.2 绘图工具箱和辅助绘图项目
在动画设计过程中,可以通过功能强大绘图软件CorelDRAW、FreeHand和Illustrator等绘制精美的矢量图,或是通过photoshop、fireworks等软件绘制和处理位图,再利用Flash的外部文件导入功能,插入各种位图和矢量图对象。但有的时候利用Flash软件提供的绘图工具绘制一些简单图形将会更方便、更快捷。
图形是动画的基础,只有好的图形才能产生好的动画,因此,在Flash MX中图形的绘制就显得格外重要了。 1、绘图工具箱
Flash MX的工具箱为用户提供了各种各样的绘图工具,同时在“查看”菜单下还提供了标尺、网格、辅助线等辅助绘图项目,只有这样,才能利用绘图工具绘制出大小精确、丰富多彩的图形。下面将着重介绍Flash MX中绘图工具的基本功能、使用方法以及绘图技巧。 Flash的绘图工具箱放置在窗口的左侧,由4个部分组成,包括：“绘图工具、查看工具、颜色工具、选项工具”。
图1-7 绘图工具箱和相关绘图工具的选项面板
(1) 绘图工具：一共提供了16种绘图工具,用于绘制各种几何形状、自由线条、精确路径,并能够对可填充的图形对象进行涂色。在工具箱中提供的各种工具除了可以绘制图形外,还可以进行选择对象、改变形状、调整路径以及编排文字等操作。
(2) 查看工具：提供了放大和缩小的查看方式,同时,当在工作区中无法完整显示整个图形时,还提供了可以快速移动显示区域的工具。
(3) 颜色工具：提供了绘制图形时用于选择线条颜色的“笔触颜色”和用于选择填充区域颜色的“填充色”,在颜色选取时还提供了“无色”的选项。
(4) 选项工具：当在绘图工具栏中选择某一工具后,工具箱下端的选项工具栏会发生相
4
应的变化,出现附属于该工具的选项工具。图中给出了各种绘图工具对应的选项工具栏。另外,部分绘图工具的选项工具栏中是没有任何内容的。 2、视图的调整
有时为了观察画面的整体效果,可以缩小比例进行显示;有时为了便于编辑较小的对象,可以在放大显示比例的情况下修改对象。因此,可以通过改变视图的显示比例达到查看舞台上对象和编辑修改对象的需要。当视图的显示比例被放大后,可能无法完整的观察整个画面,这就需要快速移动工作区中的画面内容。
3、辅助绘图项目
利用工具箱中的绘图工具并通过鼠标的拖放操作,可以在舞台上直接绘制图形,但很难在绘图时进行精确的控制和编辑。为此,在Flash中的“查看”菜单下提供了诸如标尺、网格、辅助线等项目,帮助用户对图形进行精确的坐标定位和编辑调整。
(1) 网格：利用网格可以有效地进行对象的坐标定位,也可以让对象与网格对齐。 (2) 标尺：标尺显示在文档工作区的上边和左边。
(3) 辅助线：从标尺位置处拖曳可以在编辑区产生辅助线,辅助线既可以移动、锁定、隐藏和删除,也可以将对象与辅助线对齐。 4、贴紧
绘图环境下一共提供了五种贴紧绘图的方式,即“贴紧至对象、贴紧至辅助线、贴紧对齐、贴紧至网格、贴紧至像素”。如果设置了贴紧的选项,绘图时会受到贴紧项目的影响。例如,当选取工具的“贴紧”功能键是打开的,则在拖动对象时指针下面会出现一个黑色的小环。当对象处于另一个对象的对齐距离内时,该小环会变大。
1.3 矢量绘图的特点
Flash是基于矢量图形的动画制作软件,在绘制图形时有其独到之处。Flash的绘图工具既简单易用,又不失灵活性,在大多数情况下都可以满足用户绘制图形的要求,为了更好地掌握矢量绘图的特点,我们在绘图前首先了解一些关于位图和矢量图的基本常识。 1、位图和矢量图
计算机是以矢量格式或位图格式显示图形和图像的,了解这两种格式的差别有助于用户更有效地进行工作。使用Flash可以创建压缩矢量图形,并将它们制作成为动画的图形对象,Flash也可以导入和处理在其他应用程序中创建的矢量图形和位图图像。
(1) 位图
我们平常见到的相片都是位图,位图是使用“像素”来描述图像的,记录的是在网格上各个点的颜色和位置。利用位图可以描述精美的图片,但由于记录的是固定位置上点的信息,因此,位图不适合于缩放,且文件存储所占容量比较大。
位图的图像质量和分辨率有关,因为描述图像的数据是固定到特定尺寸的网格上的,网格的稀疏代表了组成图像时点的多少,它将直接决定位图的清晰度。分辨率高代表了组成图像点也就越多,这样的图像就越清晰,反之,当组成图像的分辨率低时,画面也就模糊了。在屏幕上显示位图图像时,由于受到屏幕分辨率的限制,最高采用72像素/英寸的分辨率来描述位图图像。
5
位图图像不适合于缩放显示。在分辨率固定时,如果对位图图像进行缩放显示,特别是放大比例显示图像时,我们所看到的图像会出现马赛克的效果。出现这种情况的原因是在放大显示时,组成图像的像素点并没有变化,只是原来的小点被放大显示而已。 (2) 矢量图
经常在Office软件中见到的剪贴画都是矢量图,矢量图形是使用矢量(例如直线和曲线)来记录图像的,矢量的属性包括颜色和位置。利用矢量可以描述具有一定轮廓的图片,但不适合表现精美的图片,由于是采用矢量方式描述图片,这种图片在缩放时采用了重绘技术,因此图像不会失真,且文件存储时所占容量非常小。
当编辑矢量图形时,实际上就是在修改描述图形的线条起始位置和颜色的属性。当我们重新调整图像的大小和形状以及改变颜色时,丝毫不会影响到矢量图的外观质量,因为矢量图中所记录的信息与分辨率没有任何关系,图片不会因为被放大而变得模糊不清,这就意味着一个针头大小的矢量图形在放大到整个屏幕时,也会保持相同的文件大小,并且不会影响显示的质量,图片依旧很清晰。下面是位图和矢量图圆的一角放大8倍后的显示效果。
图1-8 位图和矢量图放大后的显示效果
2、矢量绘图的特点
对图像处理知识有一定了解的用户都知道,Adobe公司推出的Photoshop是用于处理位图图像的软件。在Photoshop中绘图是通过图层的控制进行操作的,图层不仅可以帮助用户绘制独立的对象,还可以让用户调整对象间的位置关系等。而Flash采用的是矢量绘图方式,和位图绘图不一样,矢量绘图有其自身的特点。在矢量绘图时,我们必须要了解矢量图形的组成和矢量绘图的特点,特别是在矢量图形对象相交时的处理。 (1) 矢量图形的组成与绘制
对于在Flash中绘制的一个可填充的图形而言,它包括是由线条组成的轮廓线和轮廓线内被颜色涂色的区域组成,我们分别把这两部分称为“线条”和“填充区域”。
图1-9 矢量图形的组成“线条+填充区域”
在绘制可填充的图形时,如果只需要绘制线条,可以采用两种方式操作：一是先将绘图工具箱颜色面板中的填充色设置为“无色”后,再绘制图形;另一种方法是在绘制图形后再删除填充区域,只保留其线条部分。同样,也可以利用这种方法来单独绘制填充。
绘制线条和填充区域可以使用多种不同的绘图工具和运用不同的方法产生。可能某些工具只能绘制线条或只能绘制填充区域,但也允许同时绘制线条和填充区域。
绘制线条和填充：利用“椭圆、矩形、多角星形”等工具可以同时绘制线条和填充。 绘制线条：利用铅笔、线条、钢笔等工具可以直接绘制线条,也可以利用“墨水瓶”
6
对填充区域进行着色产生线条。
绘制填充：利用刷子,或是在绘制“椭圆、矩形、多角星形”时将线条色设为“无色”时,可以直接绘制填充,也可以利用“颜色桶”涂色后产生填充区域。
线条转换为填充区域：为了绘制象线条一样流畅的曲线填充区域,可以先用铅笔和钢笔等工具绘制线条后,再调用“修改/形状/将线条转换为填充”菜单项将其转换为填充区域。此外,在“修改/形状”菜单下还提供了扩散填充、柔化填充边缘的功能。
(2) 图形对象相交产生的现象
绘图过程中,经常遇到图形对象相交的现象。在PhotoShop等位图处理软件中,是将相交的图形对象分别置于不同的图层中单独编辑,相互之间不受影响。而在Flash中,图层被赋于控制动画的功能,因此绘图时经常需要在同一图层中进行,由位图处理知识可以知道,在同一图层中绘制的图形会覆盖先前绘制的画面,那么Flash是如何处理这些相交的图形对象呢? 线条与线条相交
如果两条直线呈十字交叉状,则线条从交叉点处被分隔成了四个部分,即使线条颜色相同,也产生分隔现象。下图所示是两条十字状的交叉线产生的分隔现象。
图1-10 线条相交
线条与填充相交
若填充放置在线条上,如左图所示填充图形会覆盖掉在其下方的线段,但填充区域仍保持整体性。若线条放置在填充区域上,如右图所示线条和填充都被分隔开来。
图1-11 线条与填充相交
填充与填充相交
相同颜色的填充区域重叠时,会产生拼合的现象;而不同颜色的填充区域重叠时,上方的填充区域会覆盖掉下方填充区域的重叠部分。
图1-12 填充与填充相交
7
3、绘图中的“组合、取消组合、分离”
矢量绘图有其自身的特点,与绘制位图有着明显的不同,因此,在Flash中可以采用多种技巧进行图形的绘制和控制。同时也应该知道Flash并不是一个专业的绘图软件,如果有特殊效果的要求,还是需要使用其他专门的绘图软件进行处理。 (1) 组合与取消组合
当同一图层中的多个对象重叠在一起时,上方图形与下方图形产生拼合或覆盖的现象。为了避免在同一图层中绘制图形时,重叠后的线条和填充区域不被意外地改变,可以利用组合图形的方式。在图形被组合后,就会变成一个独立的对象,此时再与其他对象重叠时,除了挡住下方对象的显示外,不会与重叠对象产生分隔、拼合、覆盖等现象,而且,每一个组合后的对象都允许单独编辑。
下面图中所示是直接绘制的两个矢量图形对象,将这两个矢量图形对象重叠后再重新分开,对象显示出“挖洞”的效果。而将矢量图形对象组合处理,可以发现即使两个对象重叠,相互之间并不发生任何影响。
图1-13 挖洞效果
图1-14 组合效果
组合对象是以整体形式存在的,利用箭头工具直接双击组合对象可以对组对象中的元素进行编辑,此时,舞台上的其他对象将会变暗,而组合对象的元素则处于可编辑状态。下面左图所示为正常状态下的图示效果,双击圆形物体后,可以在右图中发现,其他对象变暗,通过工作区上方的标题条左端,可以发现Flash自动转入到组合对象的编辑环境下。组合对象编辑结束后,可以单击工作区上方标题条中的上一级标签返回到原来的工作环境下。
图1-15
(2) 分离
分离操作主要用于将组合对象、文本对象、实例对象以及位图对象分割成可编辑的元素,因此在绘图的过程中,可以通过分离操作将群组后的对象重新拆分为可编辑的元素,同时,利
8
用分离操作还可以显著地减小导入图形的文件大小。
但要注意不能将“取消组合”和“分离”操作混为一谈,取消组合的拆分操作,只能将组合操作中的各个对象重新拆分成为组合前的现象,但对于参与组合的各种元素并不会修改,也就是说,组合和拆分操作是可逆的。而分离操作不是一个完全可逆的操作,如果将一个对象进行分解然后再重新组合,最终生成的对象同原先的对象不一定完全一样。
1.4 绘图工具
在Flash的工具箱中提供了16种工具,其中,大多数工具与绘图有着直接的关系,利用这些工具可以在工作区中拖放产生图形。在绘制图形的过程中,绘图工具的使用还与工具箱下端的选项工具栏的设置有关,当在选项工具栏中选择不同的设置时,同一绘图工具就产生了多种绘图模式。此外,在绘图工具的属性面板中还可以进行相关的绘图设置。
1、线条、椭圆、矩形和多角星形
可以使用“线条、椭圆、矩形和多角星形”工具轻松地创建基本的几何形状。线条工具可以产生直线,该直线只包含矢量图形中的“线条”部分,而“椭圆、矩形和多角星形”工具创建的几何形状是由“线条”和“填充区域”两部分组成的。 【要点】
在工具的“选项面板”中可以设置2种绘图方式：组合方式、矢量方式;
按下shift键再绘制图形时,可以产生特定的图形,如正圆。
属性面板中可以设置“笔触颜色”和“填充色”,并选择线条的“粗细”和“样式”; 矩形的“选项面板”中可以设置“边角半径设置”选项产生“圆角矩形”。当输入的
角半径值为零时,则创建直角矩形,不为零时,产生圆角矩形。 矩形工具按钮中可以通过选择切换到“多角星形”工具,用于绘制多边形和星形。
图1-16 多角星形的属性面板和工具设置
利用属性面板和信息面板上的操作,可以精确绘图。
图1-17 属性面板和信息面板
在绘制几何形状的过程中,Flash允许先选择颜色和线型,然后绘制图形;同时也可以在
9
绘制图形后,再选取对象,重新设置颜色和线型。
对于线条样式的设置,同样也适用于其他绘图工具,以后不再赘述了。 2、铅笔和刷子
绘图时,“铅笔”工具用于绘制矢量图形中的“线条”,而“刷子”工具用于绘制“填充区域”,并且可以通过工具的选项面板进行绘图的设置。 【铅笔要点】
铅笔用于绘制矢量图形的“线条”轮廓;
铅笔的选项面板中有“伸直、平滑、墨水”3种绘制线条的选项;
图1-18 铅笔和刷子的选项面板
【刷子要点】
刷子用于绘制矢量图形的“填充区域”,主要对图形进行涂色操作; 刷子的选项面板中可以设置刷子的形状和大小;
选项面板中还可以设置5种不同的涂色模式,其含义如下： 标准绘画：可以在同一层的线条和填充上涂色。
颜料填充：可以对填充区域和空白区域涂色,不影响线条。
后面绘画：可以在同层舞台的空白区域涂色,不影响线条和填充。 颜料选择：在选择填充时会将新的填充应用到选择区中。
内部绘画：可以对画笔笔触开始的填充进行涂色,但从不对线条涂色。如果在空白区
域开始涂色,该填充不会影响任何现有填充区域。
“锁定填充”用于对渐变色进行锁定控制。非锁定方式下涂出的填充无论长短都是从
线条的一端到另一端产生渐变的效果,而锁定方式下是用所选渐进色绘制出的固定大小的图形。
下图所示是画笔依次为选择“标准绘画、颜料填充、后面绘图、选取中心圆后的颜料选择、选取中心圆和外侧圆环后的颜料选择、内部绘画”的绘图模式后,从圆环的中心向右下角涂色所产生的效果。
图1-19 多种涂色模式
10
3、钢笔和部分选取
钢笔工具既可以绘制直线,也可以绘制平滑、流动的曲线,它是Flash创建图形的重要工具之一。在钢笔绘制精确路径的过程中,直接单击可以产生节点,并在节点间的连线上建立直线段,拖曳操作可以在节点间产生圆滑的曲线。
利用部分选取工具可以通过对路径上节点控制,调整直线端点的位置、角度、长度,同时,在节点处的控制柄是用于调整曲线段的圆滑程度。
图1-20 钢笔绘制线条时产生的节点
(1) 用钢笔工具绘制图形
钢笔在绘制图形时与绘制几何形状、自由线条在操作上有很大差异,它是Flash工具箱中使用方法较为复杂的一个绘图工具,同时也是最重要的工具之一。只有经过大量的实践,才能熟练控制和运用钢笔进行绘图操作。单击工具箱上的钢笔工具后,就可以在舞台上开始绘制图形了。
【钢笔画线的要点】
画直线：单击操作可以产生节点,并在节点之间创建直线段。
画曲线：拖放操作产生的节点具有控制柄,可以在节点间产生圆滑的曲线段。 若要完成一条开放路径,双击最后一个点或按住Ctrl键单击路径外任意一点。
若完成一条闭合路径时,应将钢笔工具定位于终点节点处,当钢笔右下角会出现小圆
圈,单击或拖动即可闭合路径。
图1-21 钢笔绘制的线条
在钢笔工具绘图的过程中,为了达到精确绘制路径的目的,可以调菜单“查看/标尺”和“查看/网格”进行辅助定位,还可以在菜单“编辑/首选参数”的“编辑”选项卡中设置钢笔的显示方式。当设置钢笔按“精确光标”显示时,钢笔工具指针就变化成十字准线指针的形式,而不是以默认钢笔工具图标的形式出现,这样可以提高线条的定位精度。另外,在操作过程中可以通过按下CapsLock键在十字准线指针和默认的钢笔工具指针间进行切换。 (2) 路径中节点的控制与部分选取工具
利用钢笔绘制路径时,经常需要对路径上的节点进行控制,这些控制包括节点的添加、删除、改变节点类型,以及通过节点处的控制柄来调整曲线的圆滑程度等。为了区分在路径上的一系列操作,Flash可以通过观察鼠标指针的形状来指示操作类型,同时,在工具箱中提供了部分选取工具用于调整路径中的节点。
11
【钢笔对路径控制的要点】
：钢笔形状,通过单击和拖放操作,可以产生一个新的节点。
：右下角为十字状,通过在路径上单击,可以在路径中增加一个节点。
：右下角为短横线,对准路径中的转角点单击,可以在路径中删除该节点。 ：右下角为箭头状,对准将路径中曲线点单击,可以把该节点转化为转角点。 ：右下角为圆形,对准终点节点单击,用于创建闭合路径。
：右下角为叉形,在路径外单击或拖放,可以开始一个新路径的绘制。 【部分选取工具对路径调整的要点】
：右下角为空心框,对准节点拖曳,可以移动节点的位置。
：右下角为实心点,在节点附近拖曳,可以移动整个路径。
Alt+：按住Alt键对准路径中的节点拖曳,可以将转角点变成曲线点。
：指向节点处控制柄上的控制点拖曳,可以调整曲线圆滑程度。
下图所示的例子是利用钢笔工具在不同的位置处单击和拖放绘制的图形,并结合部分选取工具对其进行了调整。
图1-22 典型的钢笔绘图
钢笔绘制的线条是由路径上的节点和节点间的线段组成的,实际上,无论是钢笔,还是铅笔、画笔、线条、椭圆、矩形和多角星形工具,它们所产生的形状轮廓都是由节点和节点间的线段组成的,因此,都可以利用箭头工具和部分选取工具对其调整,改变线条和形状轮廓或优化曲线。
4、箭头工具
钢笔和部分选取工具是通过路径的控制来调整图形的,这种控制可以利用改变路径上的节点和节点处的控制柄做到对图形的精确控制,但对于操作不熟练的用户,Flash还在绘图工具箱中还提供了箭头工具,利用鼠标的拖放操作快速调整图形。 (1) 调整图形
在使用箭头工具改变线条或形状轮廓时,可以让箭头工具靠近线条上的任意点,此时指针会发生变化,不同的指针形状表明在该线条或填充区域上可以执行不同的调整方式,当转角出现在指针附近时,可以更改端点的位置,当曲线出现在指针附近时,可以调整曲线的圆滑程度。
【调整图形的要点】
当箭头工具靠近图形的转角点时,指针变为形状时拖动可以改变转角点的位置; 当箭头工具在图形非转角点位置时,指针会变为形状时拖动可以圆滑曲线; 按住Ctrl键,在曲线段上拖动线条时可以创建一个新的转角点;
12
按住Ctrl键,拖动转角点时可以将它圆滑成曲线点。
图1-23 箭头工具对图形的调整
图形的调整还包括线条的平滑和伸直,在工具的选项面板和主工具栏上有这2个按钮。 “平滑”操作使曲线变柔和并减少曲线整体方向上的突起或其他变化。同时还会减少曲线中的线段数。不过,平滑只是相对的,它并不影响直线段。如果在改变大量非常短的曲线段的形状时遇上困难,该操作尤其有用。而“伸直”是让图形边界更加尖锐,变得平直。伸直操作可以稍稍弄直已经绘制的线条和曲线,但它不影响已经伸直的线段。
(2) 选取和移动
箭头工具除了具有调整图形的功能外,还有选择对象的功能。既可以通过鼠标拖放框选对象,也可以配合键盘按钮通过点击方式选取对象。 【选取的要点】
选取一个对象：利用鼠标拖放操作划出一个虚框区域包含所选对象的整体,或是直接用鼠标单击待选取的对象;
选取多个对象：利用鼠标拖放操作划出一个虚框区域框住所有被选对象,或者单击选取某一对象后按住键盘上的Shift键继续选取其他对象;
框选时应包含整个待选取的对象,而不能只框选对象的一部分。
箭头工具除了可以选取对象外,还可以在工作区中移动所选的对象。当在工作区中选取了一个对象后,将鼠标移至该对象的区域后,指针的右下角会出现相对十字箭头状,此时按住鼠标拖放即可移动对象。 (3) 对齐
“对齐对象”的作用是在绘图或移动对象时,一旦接近工作区中对象的边缘或定点时,就会像磁铁一样产生自动吸咐的现象。如下图所示,当移动一个椭圆并靠向直线的端点时,鼠标的移动会自动向端点吸咐。圆圈为自动对齐时的提示点。
图1-24 对齐现象
5、橡皮擦
就像日常生活中使用的橡皮一样,使用“橡皮擦”工具可以擦除舞台上的线条和填充区域。为了便于在不同情况下进行擦除对象,允许选择橡皮擦的形状,改变橡皮擦的大小;还可以通过自定义橡皮擦工具,只擦除线条或是只擦除数个填充区域或单个填充区域;甚至是直接双击双击橡皮擦工具,可以快速删除舞台上的所有内容。
13
在橡皮擦工具的选项面板中有擦除模式的设置,便于在绘图时采用不同的方式擦除矢量图形对象。 【要点】
标准擦除：可以擦除同一层上的线条和填充。 擦除填色：只擦除填充,不影响线条。 擦除线条：只擦除线条,不影响填充。
擦除所选填充：模式只擦除当前选定的填充,并不影响线条。
内部擦除：只擦除橡皮擦开始处的填充。如果从空白点开始擦除,就不会擦除任何东
西。以这种模式使用橡皮擦并不影响线条。 如下图所示,最左端是未进行擦除的原始图形,在依次选择了“标准擦除、擦除填色、擦除线条、擦除所选填充、内部擦除”的擦除模式后,利用橡皮擦从圆形的中心位置向下擦除时所形成的的不同擦除效果。
图1-25 不同模式下擦除对象
选项面板中的“水龙头”,可以实现整体擦除的功能。当按下水龙头时,鼠标形状变成“”,此时用鼠标单击任何对象,此对象都会被完全删除。水龙头工具既可以擦除填充,也可以擦除线条。
图1-26 水龙头选项设置下的擦除
橡皮擦工具只能直接擦除矢量图形对象,不能直接擦除位图、文字、以及由图库中元件产生的实例。只有通过调菜单“修改/分离”将这些对象转换为矢量对象,或是进入到元件的编辑状态后,才能进行擦除操作。 6、任意变形工具
利用工具箱中的任意变形工具可以使对象变形,这种变形是指在保持对象的基本形状的前提下而进行的缩放、旋转、倾斜、扭曲和封套的操作。在对象的形状控制上,前面所学的箭头工具、钢笔工具和部分选取工具是用于调整对象的轮廓形状的,即改变了对象的基本形态,但变形操作并不改变对象的基本形态。
在工具箱中提供了任意变形工具,利用该工具,可以完成缩放、旋转、倾斜、扭曲和封套五种操作现象。同时,Flash还在工具栏的按钮中、变形面板,以及菜单“修改/变形”中都提供了相同的功能。上述四种不同的变形操作方法各有其操作时的特点,利用工具箱中的工具操作比较直观,利用工具栏中的按钮操作比较方便快捷,利用变形面板操作可以利用数字控
14
制做到精确变形,而利用菜单控制变形操作的功能最为全面。
【要点】
旋转、缩放和倾斜三种变形适用于对所有对象进行操作,而扭曲和封套只能对图形物
体起有效,并不适用于群组物体、文字物体、位图和实例;
对象的任意变形操作过程中,可以改变对象的形变中心;
图1-27 任意变形
在Flash中对图形对象的翻转是通过调菜单“修改/变形”实现的,在该菜单项的子菜
单中有垂直翻转和水平翻转两种现象;
利用变形面板中的“拷贝并应用变形”可以很轻松地绘制对称图形。
图1-28 变形面板
7、排列和对齐
在Flash中,除了基本的绘图工具可以绘制各种图形外,有时还需要对已绘制的图形调整相互间的位置,这就需要利用到Flash中的排列菜单和对齐面板。 (1) 排列
在同一图层中,当多个图形对象重叠在一起时,上方的图形会覆盖下方的重叠区域,它们之间不存在前后关系。但组对象、文本对象、实例间有着层次关系。可以通过调“修改/排
15
列”菜单来改变对象的叠放层次关系。排列菜单下用于改变对象间的层次关系,共有“移至顶层、上移一层、下移一层、移至底层”四个选项。 (2) 对齐
当工作区中有了多个对象后,为了获得更加理想的视觉效果,有的时候需要对这些图形进行相对位置的调整。打开对齐面板后,可以看到该面板中主要由四类项目组成,即“对齐、分布、匹配大小、间隔”。
图1-29 对齐面板
另外,在面板中还有“相对于舞台”的按钮,当按下此按钮后运用面板中的对齐、分布、匹配大小、间隔时,都将舞台做为一个对象,参与到对齐的各项操作中。因此,如果要将某一个对象放置在舞台的中心位置,可以在按下“相对于舞台”按钮后,再点“水平中齐”和“垂直中齐”按钮。
1.5 颜色
颜色无疑是图像的重要组成部分,Flash动画中的对象在其绘制的过程中少不了颜色的调配。借助于千变万化的颜色与完美和谐的色彩搭配,能够在很大程度上吸引观众的注意力。Flash中提供了多种应用、创建和修改颜色的方法。为了更好地调配颜色,首先来了解一些颜色的基本知识。 1、颜色的组成
颜色模式决定用于显示和打印图像的颜色模型。常见的颜色模型有HSB(色相、饱和度、亮度),RGB(红色、绿色、蓝色),CMYK(青色、洋红、黄色、黑色)。如图所示,在混色器的面板菜单中提供了选择HSB和RGB两种颜色系统的菜单项,但在颜色的调配过程中,更多场合下还是采用RGB颜色模型。 (1) HSB模型
HSB模型是以人类对颜色的感觉为基础,描述了颜色的三种基本特性“色相、饱和度、亮度”。其中,“色相”是从物体反射或透过物体传播的颜色。在通常的使用中,色相由颜色名称标识,如红色、橙色或绿色。“饱和度”有时称为彩度,是指颜色的强度或纯度。饱和度表示色相中灰色分量所占的比例。“亮度”是颜色的相对明暗程度。 (2) RGB模型
绝大多数可视光谱可用红色(Red)、绿色(Green)和蓝色(Blue)三色光的不同比例和强度的混合来表示。在RGB颜色中,当三色中的两种颜色的重叠处分别产生青色、洋红、黄色,当三种颜色重叠在一起时为白色。
16
当所有颜色叠加在一起可产生白色,即所有光都被反射回眼睛,因此,RGB也称它们为加色。加色用于光照、视频和显示器。例如,显示器通过红色、绿色和蓝色荧光粉发射光产生颜色。
图1-30 混色器面板、RGB模型
(3) RGB颜色在计算机中的表示
在计算机中可以利用数值来表示颜色,这种数值的表示方法有两种,一种是利用十进制数据表示,另一种方法则是利用十六进制数据表示。
在十进制数据表示颜色的方式中,RGB模型为彩色图像中每个像素的RGB分量指定一个介于0(黑色)到255(白色)之间的强度值,当这三个分量混在一起表示颜色时,理论上最多可以产生256*256*256种颜色,即16777216种颜色。
在计算机中进行颜色调配时,纯红色的RGB取值为255-0-0,纯绿色的取值为0-255-0,纯蓝色的取值为0-0-255。另外,当所有分量的取值为255-255-255时颜色为纯白色,取值为0-0-0时表示纯黑色,而当RGB三个分量的值都相等时,则颜色的结果为中性灰色。
(4) 色调和Alpha
在Flash的动画创建过程中,有时还需要调用与颜色有关的“色调”和“Alpha”选项。色调指的是在画面所有对象的色彩所构成的总的色彩倾向。从明度上划分有亮色调、暗色调,从色性上划分有冷色调、暖色调和中性色调,从色相上划分有褐调子、紫调子、黄灰调子等。而Alpha所指的就是透明程度。
2、颜色的选取和设置
由于矢量图形是由线条和填充区域组成的,因此,在Flash中选取的颜色可以使用到这两种不同的对象上。在“笔触颜色”的色块选取工具中选取的颜色,只能应用到即将创建线条上,或是改变已有线条的颜色;同样,在“填充颜色”的色块选取工具中选取的颜色,也只能够应用到新绘制的填充区域上,或是改变已有填充区域的颜色。 【选取颜色的要点】
使用工具箱中颜色工具栏上的“笔触颜色”和“填充色”工具按钮选取颜色; 使用属性面板中的“笔触颜色”和“填充色”工具按钮选取颜色; 使用混色器面板中的“笔触颜色”和“填充色”工具按钮选取颜色;
利用滴管工具选取颜色。
颜色既可以选取默认的黑白色,也可以通过颜色色块右下角的箭头在样本块中的选择。在设置颜色时,“笔触颜色”只能选择纯色,而“填充色”能够选择纯色和渐变色。在Flash
17
中还允许选择“没有颜色”,即无色。
3、设置渐变色和透明色
渐变色是Flash的又一特色。通过渐变颜色的设置,可以使用有过渡变化的颜色来填充绘图区域,这显然要比单一的纯色填充要好看得多。使用渐变填充可以创建出很多特殊效果。通过混色器面板可以选取两种不同方式的渐变效果,即“线性渐变”和“放射状渐变”。 【渐变色的要点】
放射状渐变是从起始点到终点按照环形向四周逐渐变化。
线性渐变是从起始点到终点沿直线逐渐变化。
设置渐变色可以通过混色器面板中渐变色定义条下的颜色控制点进行操作。
图1-31 混色器面板
设定好一种渐变填充色后,可以通过颜色颜料桶工具对图形进行渐变填充。如果对填充的效果不满意,还可以通过工具箱中的填充变形工具调整渐变的中心、大小、形状和角度等。 此外,透明色在颜色的设置中也非常重要。当Alpha选项值为100%时,颜色为不透明;当Alpha选项值为0%时,颜色为完全透明色;当Alpha选项值在0%到100%之间时,颜色为有一定程度的透明。由于有了透明,可以在图形重叠时产生一种朦胧透视的效果。 4、滴管工具
在工具箱面板中,滴管工具是用于探测颜色信息的,它既可以探测线条的颜色,也可以探测填充区域的颜色。使用滴管工作时,默认情况下鼠标指针的形状为“”,当滴管在工作区中移入到填充图形的上方时,鼠标指针的形状变为“”,单击取色后可以发现工具箱中颜色工具栏内的“填充颜色”发生了变化。当滴管处于线条的上方时,鼠标指针的形状为“”,单击取色后发现工具箱中颜色工具栏内还是“填充颜色”发生了变化。因此我们知道,滴管取色是用于改变填充颜色的设置。为了便于下一步操作,在取色完毕后系统自动进入到颜料桶的工具使用中,此时鼠标指针的形状为“吸取的填充色进行着色。
5、颜料桶、墨水瓶、填充变形
”,可以利用对工作区中的可填充图形用当前
(1) 颜料桶工具用于对可填充区域进行着色,这个可填充区域一般情况下为线条组成的封闭图形,同时也允许对有一定缺口的区域进行填充颜色。对于缺口过大的图形,在着色前可以利用线条先将缺口闭合,等填充完颜色后再将线条删除。
在对图形进行着色时,既可以使用单一的纯色,也允许使用渐变色和位图填充图形的内部区域。利用渐变色通过鼠标的拖放操作对图形进行填充时,其好处在于可以在拖放的过程
18
中同时控制渐变色的调整。如拖动路径的中心决定了填充色的中心位置,如拖动路径的长短决定的渐变色的大小,拖放路径的角度决定了填充色的方向。
(2) 墨水瓶工具可以在矢量图形填充区域的四周产生线条,也可以通过属性面板中的选项设置更改线条的颜色、线宽和样式等。墨水瓶工具在产生和修改线条时,只能采用单一的纯色进行着色,不可以使用渐变色或位图对线条进行着色操作。
墨水瓶和颜料桶都是用于着色的工具,但两者之间是有明显差异的。墨水瓶是用于对矢量图形中的线条操作,而颜料桶是用于对矢图图形中的填充进行操作。
(3) 填充变形工具用于对已有的渐变色进行调整,这种调整主要包括对渐变色的中心、大小、形状和角度的改变。
图1-32 填充变形的调整
1.6 文本操作
Flash是矢量动画制作的软件,系统中提供了绘制矢量图形的一些简单功能和进行文字输入的能力。但Flash并不是专业的绘图软件,因此,对于更加的精美图形图像,只能在专业绘图软件和图像处理软件中描绘、加工、处理,然后导入到Flash中;同时,Flash也不是专业的字处理软件,它在文字的编辑和格式设置上远远逊色于专业字处理软件,但在对文本对象进行处理时,又存在与专业字处理软件不同的地方,有其独特的一面,Flash提供了“动态文本”和“输入文本”的概念,使得Flash具有交互处理的功能。 1、文本对象的特点
利用工具箱中的文本工具建立的文本对象具有以下特点： 【文本的要点】
文本对象以单一的字符方式进行输入,但以完整的文本块形式存在; 文本块允许进行缩放、旋转、倾斜、翻转等操作;
文本块不是矢量图形,即它不是由线条和填充区域组成,因此,无法对其进行具有矢量
图形特点的一些操作,如调整形状、填充;
通过“分离”操作可以将文本块转化为矢量对象,然后就可以像处理矢量图形一样对其进行调整和修饰,而这对于普通文本是无法实现的;
未分离的文本块允许对文本块中的字符内容进行编辑修改,但分离后的文本块就转化为由线条和填充区域组成的矢量对象,不再允许改变字符中的内容。
2、文本对象的分类
在Flash中输入的文本对象可以划分为三种类型,即：
⑴ 静态文本：一种普通文本对象,在执行动画时不允许对其进行编辑修改。
19
⑵ 动态文本：在执行动画的过程中,允许利用脚本语言对其进行编辑修改。 ⑶ 输入文本：允许在执行动画的过程中向文本框内进行输入、编辑等操作。
图1-33 文本的属性面板
3、设置文本的格式
利用文本工具的属性面板可以对文本对象进行格式设置。其中,字体格式主要包括字体、字体大小、文本颜色、粗体、斜体、字符间距、字符位置等格式项目,段落属性包括对齐、边距、缩进和行距等。选定文本对象后可以调用属性面板中的相关按钮进行格式设置。
1.7 位图
纵然是Flash有着强大的功能,依然有很多任务无法直接实现。例如在动画中需要创建三维对象,或是需要一个复杂的场景画面图像,这时,利用工具箱中的绘图工具进行处理就显得相当困难,甚至无能为力。和其他的软件一样,Flash不可能做到面面俱到、尽善尽美,这就要求在软件提供从外部文件导入数据的功能,并能够对导入后的数据进行加工、处理。
Flash的“文件”菜单下提供了导入外部文件的菜单项,允许从外部导入多种格式的矢图图形和位图,导入后的图片出现在舞台或库中。此外,还允许导入声音文件和视频文件。 1、位图的转换
调“修改/位图/转换位图为矢量图”,可以将位图转换为具有可编辑的离散颜色区域的矢量图形。位图转换为矢量图形后,矢量图形不再链接到“库”中的位图元件。
位图转换功能只能对没有分离的位图进行转换。对于色彩少、没有色彩层次感的位图应用转换功能,会收到最好的效果。但对于包含复杂的形状、色彩丰富,层次感强的位图应用转换功能时,反而转换后的矢量图形的文件大小会比原来的位图还要大,得不偿失。因此,不能盲目的进行位图转换。
2、套索
以前学过的箭头工具可以在选取一个规则的矩形区域内的对象,如果要选取一些具有特殊形状的区域,箭头工具就显得无能为力了。Flash中提供了套索工具,用于选取不规则形状的区域,甚至可以按颜色的差异来选取对象。
20
第2章 动画基础
动画,就是将一系列相关的画面快速地逐帧显示出来。现在的电影就是将无数个存储在胶片上的连续静态画面,以每秒24帧的速度播放出来,由于人眼在观察物体时的视觉暂留特点,因此在观看这组高速显示的静态画面时,我们的感觉就像是物体运动起来了。
与电影胶片一样,Flash也是在时间长度单位中将动画分解为由固定数量的帧组成,通过修改帧中的画面内容,可以在Flash的文档中创建出对象的“移动、缩放、旋转、颜色变化、淡入或淡出、变速”等多种动画效果,还可以使对象的形状发生改变。如果能够将这些动画效果巧妙地结合在一起使用时,就可以创建出赏心悦目的动画。
2.1 动画中的基本概念
动画的设计和电影的制作过程一样,它是由多种对象在时间轴上编制的帧画面,利用帧与帧之间的关系形成动画过程。因此,在制作动画之前有必要事先了解一些Flash动画中的基本概念和简单操作。
1、影片和场景
影片即文档,可以保存一个完整的Flash动画。文档中可以调“修改/文档”菜单项进行属性设置,通过设置改变文档的大小,即动画显示区域的大小,也可以设置动画播放时的帧频,即设置播放动画的速度,还可以设置文档的背景等其他属性。
图2-1 文档属性对话框 图2-2 场景面板
场景是在具有一定长度的影片中,通常会出现一些角色和环境不同,且相对独立的情境来共同表达影片的主题思想,Flash利用了“场景”将动画具有不同情境的片段合成在一起。场景应用于动画的创建,好处还在于可以将动画分开进行编辑,至少不会使时间轴面板中的
21
帧过长。如果不对场景的顺序做特别的安排,新增的场景就会放在原来的场景后面播放。 2、时间轴面板：图层和时间线
时间轴面板是Flash动画制作中最核心的部分。与胶片一样,Flash也是根据时间长度将动画分解为一幅幅静止的帧画面,而时间轴面板上的时间线就象是影帧画面间的纽带,串起一幅幅静止的、而从内容上来说又是连续的画面。同时,在动画播放时会沿着时间线向后快速播放每一幅画面,让这些静止的画面动起来。时间轴面板是由位于左侧的“图层”区域和右侧的“时间线”区域组成,每一部分都可以进行单独的管理。
(1) 图层
图层就像透明的胶片一样,可以一层层地向上叠加,在图层上绘制和编辑对象时,不会影响其他图层上的对象。对于图层上没有内容的区域,可以透过它看到下面图层中的画面。和许多图形软件一样,在Flash中也使用图层来处理复杂图形的绘制,同时还利用图层处理不同对象的动画过程。利用图层可以将对象分离开来,独立进行编辑和动画设计,而且Flash中图层的设计别具特色。
图2-3 时间轴面板
Flash中图层有多种类别,它们的作用如下。
普通图层：图层的基本形式,用于分离动画中的对象,或分离不同对象的动画过程。 图层文件夹：用于管理图层,它可以展开和拆叠,不影响图层的正常显示。
引导层：图层中运动引导线可以控制其他图层中对象的运动轨迹。
遮罩层：特殊图层。该图层中图形的填充区域部分被设置成透明,可以通过填充区域显示下方图层中的图形,而遮罩层中没有图形对象的部分则成为不透明的区域,无法
通过它看到下方图层中的图形。
Flash允许对图层和图层文件夹进行“选择、重命名、插入、删除、复制、移动、属性设置、显示控制”等操作。同时,在图层上方右侧的3个按钮可以对图层进行显示控制。工作过程中,若图层或图层文件夹名称旁边的“眼睛”列显示,则表示处于隐藏状态,该图层或图层文件夹中所包含图层中的画面不再显示在屏幕上;若“锁”列显示的是,则表示处于锁定图层的状态,不允许编辑该图层中的画面;若“框”列中显示的“或图层文件夹中所包含图层中的画面将按轮廓方式显示。
”,则表示当前图层
(2) 时间线
位于时间轴面板右侧的是“时间线”,在时间线上可以创建Flash动画中的各种“帧”,而帧是构成Flash动画的关键。如果把一串连续的画面存放在一串连续的帧中然后播放,这
22
些连续的画面就构成了动画。时间线可以任意长,在面板中利用滚动条进行查看,当然,太长了的时间线在窗口中控制就比较困难,可以通过帧视图的设置改变时间轴上的显示。在时间线上,还可以完成对帧的相关操作,如帧的插入与删除等,在时间线下方显示了动画的基本信息,如运行时间、帧频、当前帧指示器等。 3、帧操作
电影是以每秒24帧播放的,也就是说在1秒内连续播放了胶片上的24个影格内的画面,这些画面在胶片上都是静态的画面,由于视觉暂留的特点,在快速播放时就产生了动画的感觉。在Flash中,电影胶片上每一影格都可以称为一帧画面,帧是组成动画的基本单位。 (1) 帧的分类
没有被使用的帧称为空帧。为了方便计数,每隔5帧会用灰色标明一次,有内容的帧称为实帧,呈灰色显示。Flash中的帧大体可以分为3类：
帧：即普通帧,不包含任何内容,可以用来延续前面关键帧中的画面。 关键帧：是Flash创建动画的基础,该帧中有创建动画时用的具体内容。
空白关键帧：该帧中不包含任何内容,当在该帧中输入内容后自动转换为关键帧。
图2-4 时间线上的帧
(2) 帧的操作
Flash提供了强大的帧编辑功能,在时间轴中可以处理各种类型的帧,对帧进行的操作主要有：插入帧、删除帧、清除关键帧、转换帧、翻转帧,以及帧的复制和移动。为了快速的进行帧的编辑操作,可以在时间轴面板中的帧上右击,会弹出快捷菜单,里面包含了对帧进行操作的常用菜单项。
图2-5 帧操作的快捷菜单
(3)多帧编辑
一般情况下,工作区中显示的是播放指针所指位置上的一帧画面。如果要对一帧以上的
23
画面进行编辑或是调整画面中对象的相对显示位置时,总是希望在工作区中能够同时看到多帧中的画面。利用时间轴面板底部一组按钮,可以实现多帧编辑,这组按钮就是平常俗称的“洋葱皮”按钮。
当开启洋葱皮按钮后,会在时间轴的编号条上出现左右括弧状的开始标记和结束标记,调整开始标记和结束标记的范围,可以在舞台上分别以实模式、透明轮廓模式同时显示多帧中的画面。当按下“编辑多个帧”的按钮时,则允许同时对当前帧及其所选范围内帧的画面进行编辑。
图2-6 多帧编辑
下图所示是在多帧编辑状态下,按下时间轴面板上的“绘图纸外观”和“绘图纸外观轮廓”按钮时,分别以实模式和轮廓方式显示多帧中的画面。
图2-7 多帧编辑的绘图纸外观显示 图2-8 多帧编辑的绘图纸外观轮廓显示
在时间轴面板的底行还显示了当前动画的一些基本信息,包括当前播放指针所处的帧位置、播放动画时的帧频率,以及从动画的开始位置运行到当前帧所需要的运行时间。 4、动画对象
Flash在创建动画的过程中运用了许多对象,主要包括物体和实例,其中实例是由库中的元件产生的。为了更好地了解动画的构成,首先必须能够正确区分“物体、外部导入的对象、元件和实例”的含义,以及了解各种对象的分类。 (1) 物体
物体是指在舞台上直接绘制的图形和输入的文字,一般在动画中用于静态画面的描绘。Flash中物体可以分为“图形物体、文字物体、组物体”等类型。
图形物体：利用工具箱中的绘图工具在舞台上直接绘制的各种图形对象。 组合物体：是由若干对象组合而形成的一个新对象。
文字物体：利用工具箱中的文本工具在舞台上产生的文本块。
文字物体是一个特殊的对象,在Flash中,包括多个字符的文本块可以理解是是由若干个文字组成的组合物体。
24
(2) 外部导入的对象
利用菜单“文件/导入”可以从外部文件中导入多种对象,这些对象主要包括“位图、声音、视频”等。和物体不同的是,这些外部数据导入后,一般首先会出现在库中,同时“位图和视频”还会在舞台上产生对应的对象。 (3) 元件和实例
元件是Flash实现资源共享,并有效减小文件体积的一种方法,在动画制作过程中,可以根据库中的元件在舞台上产生多个实例,而文件中只存储一个元件和相关实例的位置、形状等信息。实例是元件在舞台中的具体化。
元件：是指为实现资源共享而存储在库中的对象。
实例：是指由库中元件在舞台上的具体化。
如何区分各类对象呢？对于从外部导入的对象“位图、声音、视频”都可以很直观地在舞台上区分这类对象。而元件都是位于库中,因此,也非常容易了解。特别是对舞台中物体、实例,区分它们的一个简单方法就是,当选中这个对象后,会发现图形物体会显示象素点,组物体和文字物体被一个方框包围,而实例除了被方框包围外,还会在中心位置出现一个中心控制点。
图2-9 对象的区分
2.2 元件和实例
元件是Flash中最重要的概念之一,几乎所有的Flash动画都会或多或少地用到元件。元件可以看成是Flash中的一个特殊的对象,存放于库,可以是图形、影片剪辑或按钮等对象,还可以包含从外部导入的位图、声音、视频剪辑,元件只需创建一次,就可以在动画中反复使用由它生成的实例。
实例是与元件相对应的概念。实例是元件在工作区中的具体体现,或者说是对元件的一个引用。如果将库中的一个元件拖入到工作区中,那么工作区中的这个元件的分身就被称为实例。我们可以在工作区中对实体进行修改,但这些修改只限于“旋转、倾斜、缩放、颜色”等变化,但实例的基本形状无法改变。如果要改变实例的基本形状,必须对库中的元件进行编辑,只有库中元件的形状发生了变化,在工作区中所有由元件产生的实例才会发生相应的形状改变。
1、元件的类型
Flash中的元件可以分为三种类型,即影片剪辑元件、图形元件和按钮元件。在创建元件的过程中,只有考虑到元件的用途,才能正确选择元件所属的类型。
25
(1) 影片剪辑元件
影片剪辑元件一般是一个动画片段,动画片段中可以包含交互式控件、声音甚至其他影片剪辑实例。影片剪辑元件拥有独立的时间轴面板,可以创建独立于时间轴而播放的动画片段,与动态图形元件不同的是,影片剪辑元件产生的实例在一帧中就可以播放了。 (2) 图形元件
图形元件一般是一个静态的图形,不支持交互功能,也无法添加声音。
图形元件也可以是由多帧的动画片段组成,它的执行是和Flash动画的时间轴同步的,也就是说使用时图形元件的实例时,必须在时间轴上有与图形元件等长的帧延续,才能完整地播放图形元件中的动画片段。
(3) 按钮元件
按钮元件可以响应动画中鼠标的动作,具有很强的交互性能。通过Flash的脚本语言,可以让按钮执行各种动作。
新建后的元件是存放在库中的,打开库窗口后,可以看到各种类型的元件,并采用不同的图标加以表示。
图2-10 库面板
2、创建元件
创建元件的常用方法是新建法和转换法,元件具有多种类型,元件的内容既可以是单帧画面,也可以保存一个动画片段。在创建元件的过程中,可以灵活地使用各种不同方法的组合产生元件。
【创建元件的要点】
“新建法”创建元件时,要求首先调“插入/新建元件”菜单,然后再元件编辑窗口中
编辑新的元件,最后再通过工作区上方标题条上的标签返回上一环境即可;
图2-11 创建元件时的编辑窗口
“转换法”创建元件时,可以先编辑元件的内容,选择后再调“修改/转换为元件”菜
26
单项将所选内容转换为元件;
“拖放法”创建元件时,可以直接将元件的内容拖放到库面板中即可; 创建按钮元件时,应给出按帧的四帧状态“弹起、指针经过、按下、点击”。
图2-12 按钮元件的四帧
复杂元件的创建过程可以组合使用元件的“新建法”和“转换法”。此外,按钮是由四帧组成的交互影片剪辑,其中,前三帧显示按钮的三种可能状态,第四帧定义了按钮的活动区域,在时间轴实际上并不播放,它只是对指针运动和动作做出反应。按钮元件的时间轴上的每一帧都有一个特定的功能：
弹起：一般情况下按钮所呈现的样子,即当鼠标未放在按钮上时按钮的外观。 指针经过：当鼠标指针停留在按钮上,但又未按下时按钮的外观。 按下：表示单击按钮时按钮的外观。
点击：定义按钮响应鼠标点击的区域,这个区域中的画面在播放时是不显示的。 3、影片剪辑元件和图形元件的差异
影片剪辑元件和图形元件有许多相似的地方,例如,它们都可以保存单帧的静态画面,也可以保存多帧动态的动画片段。在创建时,其基本操作过程完成类似。但两种不同类型的元件与实例之间还是有很大差异的。 【要点】
组成上的差异：影片剪辑元件通常是一个动画片段,可以包含交互式控件、声音,甚至
其他影片剪辑实例。图形元件一般是静态的图形,不支持交互功能,也无法添加声音。
播放时的差异：影片剪辑元件拥有独立的时间轴面板,可以创建独立于时间轴而播放
的动画片段,与动态图形元件不同的是,影片剪辑元件产生的实例在一帧中就可以播放。图形元件建立的是与Flash动画时间轴同步的元件,由它产生的实例的播放必须在时间轴上有与图形元件等长的帧延续,才能完整地播放图形元件中的动画片段。
实例引用时的差异：通过属性面板可以为影片剪辑的实例进行命名,这样便于在
Flash的脚本语言中对实例进行操纵。图形实例没有对象名。
图2-13 影片剪辑实例的属性面板
4、创建实例
元件创建后被保存在Flash的库中,如果需要由该元件生成实例创建动画,可以打开库窗口,在动画的任何位置都可以直接调用库窗口中的元件生成实例,甚至包括在其他元件的内
27
部。Flash允许对同一元件多次调用,产生不同的多个实例,但库中的元件被修改时,所有由该元件产生的实例都会发生相应的变化。 5、修改元件
在动画的制作过程中随时都需要对元件进行修改,元件改变后,所有由该元件产生的实例都会自动被更新,以反映元件编辑的结果。Flash对元件的修改提供了三种方式,分别为“在元件编辑窗口中编辑、在当前位置编辑、在新窗口中编辑”。 采用“在元件编辑窗口中编辑”的方式直接修改元件,能够将舞台上的实例和元件编辑窗口中的元件区分开来,并在不同的窗口画面下进行编辑操作。
采用“在当前位置编辑”时,可以直接双击实例进入元件编辑窗口,此时该元件和其他对象一起显示在窗口中,但除该元件外,其它对象均变淡了一些。编辑元件时,可以通过工作区上方的标题区分当前编辑的对象是实例还是元件,同时还了解当前窗口所处的状态。
图2-14 元件的编辑窗口
采用“在新窗口中编辑”时,元件的修改会在一个单独的新窗口中进行。 6、实例操作
每个元件的实例都有独立于该元件的属性。在实例的属性面板中可以设置实例的颜色属性,如“亮度、色调、透明度”,也可以重新定义元件所属的类型,如“图形、影片剪辑、按钮”等类型,还可以对实例进行旋转、倾斜或缩放。这些操作都不会影响元件的基本轮廓形状。此外,还可以通过属性面板对影片剪辑和按钮的实例进行命名,这样就可以使用动作脚本更改它们的属性。
实例的属性面板或右击快捷菜单中还提供了交换元件的操作,通过这种操作方式可以改变创建实例所基于的元件。
在Flash中,实例和元件之间将始终保持联系,当修改了元件时,实例会发生相应的变化。如果在某些特殊场合下,需要将实例还原成矢量图,不再和元件保持联系,这时就可以利用菜单“修改/分离”的功能。
7、库的管理
Flash的库中存放了大量的资源,这些资源包括各种类型的元件、位图、音频、视频等,还包括其他类型的库项目。元件是Flash中最常见的对象,动画中的多数元素都是元件的形式出现的,当前文档中的所有元件均以列表的形式出现在库窗口中,元件的管理在Flash中是通过库窗口来实现的。在库窗口中可以对元件进行名称修改、复制元件、删除元件等操作,同时,在库窗口中还提供了文件夹对元件进行组织和管理。
28
第3章 动画
动画是由一系列的帧组成,当以一定速率连续呈现这些帧的内容时,由于我们视觉的暂留现象便形了连续变化的画面,这便是逐帧动画,也是传统动画的创作方法。Flash不仅能通过关键帧制作逐帧动画,而且还提供了补间动画。我们所要作的工作只需要定义动画的始末状态,其余的由Flash计算完成。Flash根据始末状态,将两帧的变化信息生成连续过程,大大缩短了动画的制作时间,而生成的动画体积小、效果优。
同时,在Flash还提供了各种特效的制作方法,例如运动引导和遮罩,还有色彩渐变和脚本语言实现的动画,如果能够将多种动画的制作方法和这些特效制作巧妙地结合在一起,就可以创建出令人赏心悦目的动画。
3.1 动画的分类
利用Flash可以制作出非常精美的动画效果,但其基本动画制作方法只有两类,即“逐帧动画”和“补间动画”,还可以将各种特效运动于动画。此外,Flash中还提供了脚本语言的方式创建行为动画。 1、逐帧动画
逐帧动画被广泛地应用于卡通动画的设计中,它要求在创建动画的过程中绘制出每一帧中的画面图像,虽然这种动画具有丰富准确的动态表现效果,但制作动画的效率是非常低的。在利用逐帧动画时,虽然可以直接控制每一帧画面中的对象,但还会增加动画文件所占的外存容量,使动画的播放速度减缓,除非万不得已,建议尽量少使用这种方法创建动画。 2、补间动画
补间动画是利用关键帧定义动画在起始帧和结束帧中的画面对象,然后通过Flash系统计算完成中间的变化过程,我们把这种现象称为“补间”。由于在补间动画中只存储首尾关键帧中的画面对象,以及帧之间的变化过程,因此可以最大程度地减小动画文件所占的外存容量,加快动画的播放速度。补间动画又被划分为两类,即“补间动作动画”和“补间形状动画”。 (1) 补间动作动画
补间动作动画是通过更改同一对象在起始帧和结束帧中的位置、大小、旋转、颜色和其他属性来创建运动对象的动作效果。这种动画制作方法在Flash中被广泛地采用,是运用得最多的一种动画制作方式。
(2) 补间形状动画
补间形状动画是通过更改起始帧和结束帧中的对象,达到由一个对象通过形状的改变,变化成另一个对象的效果。和对象的移动不同的是,在形状变化过程中具有多种不同的变化效果,因此,Flash还可以通过添加形状提示控制对象的变化。
29
3、行为动画
简单动画都是按顺序播放影片中的场景和帧,使用脚本语言可以利用编程的方式创建动画,在交互式影片中可以用键盘和鼠标跳到影片中的不同部分、移动对象、在表单中输入信息以及执行许多其他交互操作。 4、图层在动画中的应用
对于一个复杂的动画过程,Flash可以利用图层,将多个对象分散在独立的层中来简化动画的创建过程,这样也有利于各个动态对象的单独修改。
除了上述三种创建动画的方式外,Flash中还引入了具有一定功能的图层。
引导层：图层中运动引导线可以控制其他图层中对象的运动轨迹。
遮罩层：它是一个特殊的图层,该层中图形对象的填充区域部分被设置成透明,可以通过填充区域看到下面图层中的画面。而遮罩层中没有图形对象的部分则成为不透明的区域,无法通过它看到下面图层中的画面。
3.2 逐帧动画
Flash动画的原理和电影胶片一样,包括许多独立的画面,每一个画面称为一帧,每一帧中的画面都与前一帧略有不同。在播放F1ash动画时,这些帧中的画面被连续的在屏幕上显示出来,通过人眼观察就象是连续流畅的动画。如果每一帧都由制作者亲自绘制,当然这样制作出来的作品就会很精细,能很忠实地反应制作者的意愿,达到最好的动画效果。
逐帧动画是Flash动画技法的根本。逐帧动画是指舞台上每一帧的内容都发生变化,它会将所有的动画过程以更多的关键帧来展现。例如,一个20个影帧的动画,若以逐帧动画的方式来制作,则必须产生20个关键帧,每一个关键帧中都要绘制所需要的画面。
需要指出的是,创建逐帧动画非常消耗创作者大量的时间和精力,并且逐帧动画产生的文件体积往往非常大。因此,在实际的工作中,通常只是在某些对变化过程要求极为严格,无法通过别的方式来实现的片段,才会通过逐帧动画的方式来制作。而在一般的动画中,只需要合理使用关键帧,定义了动画的始未状态,设置好动画类型及有关参数,Flash就会根据这些关键帧的内容根据一定的规则计算出整个动画的过程,并在动画播放时显示出来。
逐帧动画的制作原理很简单,就是在每一个关键帧中绘制出所有画面。在逐帧动画的首帧后,为了继续创建后续帧中的动画对象,可以按下面的方法操作：
插入普通帧后,可以使前面关键帧中的画面延续一定的时间; 插入关键帧后,可以在新创建的帧中改变原来的动画对象;
插入空白关键帧后,可以继续绘制下一幅动画对象,或是从外部文件中继续导入新的动画对象。
图3-1跨跃过程的逐帧动画
30
3.3 补间动作动画
从逐帧动画的制作过程中可以看出动画的基本原理,在Flash中更多的是采用补间动画。补间动画包括“补间动作动画”和“补间形状动画”两类,将它们加以组合和创意,然后在适当的地方少量使用一些逐帧动画,所有这些合起来就组成了一件件动人的作品。 1、创建补间动作动画
从某种意义上来讲,补间动画是有些傻瓜式操作的动画：用户只要设置好首尾两个关键帧中的画面,生成动画时,就由Flash根据首尾两帧中画面和状态,自动地计算中间各帧的变化效果,将补间实例产生在首尾关键帧之间,并在输出时显示在屏幕上。但补间动画有时并不能完全按我们的想象计算出中间的过渡画面,因此,合理地设置首尾关键帧显得尤为重要。 【创建补间动作动画的步骤】
第(1)步：在首关键帧中创建动画对象的实例,并设置实例的开始状态;
第(2)步：在尾关键帧位置处插入关键帧,并设置实例的结束状态; 第(3)步：在时间线首尾关键帧之间调用右击快捷菜单,或在帧的属性面板中创建补间
动作动画。
图3-2 创建补间动作动画
【补间动作动画设置的要点】 创建动画的对象必须是“实例”,且首尾关键帧中是同一实例(即由库中同一元件产生
的实例);
31
动画的效果可以是“移动、缩放、旋转与倾斜、缓动、颜色(亮度/色调/alpha)”等方面的改变,但不支持形状的变化(指外形轮廓)。
虽然“组合物体”和“文本”可以不用先转换为实例而直接创建补间动作动画,但打开库观察可以发现,实际上Flash系统自动将“组合物体”和“文本”转换为实例,且这种转换并不基于同一元件,因此不建议直接使用“组合物体”和“文本”对象创建动画。 2、动作动画的属性面板
在创建动作动画的属性面板中,提供了对动作动画进行设置的各种选项,主要有：
图3-3 补间动作动画的属性面板
缩放：确定是否允许动画在补间过程中产生缩放效果;
旋转：可以通过选择确定运动对象的旋转方向和旋转角度;
调整到路径：可以在运动引导线控制的动作动画中,使运动对象的基线在整个运动过程中保持与路径的相对角度不变;
同步：可以使图形元件实例的动画和主时间轴同步;
对齐：在动动引导控制的动作动画中,“对齐”可以根据运动对象的中心控制点将补间元素附加到运动路径。
缓动：在默认情况下补间帧以固定帧速播放,改变缓动值可以创建“加速/减速”的插放动画。Flash还允许自定义缓入/缓出,如下图所示,对话框中显示了一个表示运动程度随时间而变化的坐标图,水平轴表示帧,垂直轴表示变化的百分比。
图3-4 自定义缓入/缓出对话框
3、补间动作动画案例
为了更好的理解补间动作动画制作过程,掌握补间动作动画支持的动画效果,下面将制作一些具体的案例。
32
(1) 移动动画
【案例1：小球的直线移动】
选择首关键帧(如第1帧),在舞台左侧绘制动画对象小球,再转换为实例; 选择尾关键帧(如第30帧),在时间线上右击调“插入关键帧”菜单项; 调整尾关键帧中小球实例的位置到舞台的右侧;
在时间线首尾关键帧之间右击调“创建补间动画”菜单项,或利用属性面板创建补间
动作动画。
首尾关键帧之间的小球实例只能在两点间进行直线移动,如果要改变小球直线移动的方向,让其先从舞台的左侧移动到右侧,最后向下移动,其动画制作的原理是一致的,只需要将上一次动画尾帧中的实例当成本次动画首帧的实例即可,下图所示为能够改变方向移动的时间线。
图3-5 能够改变方向的小球移动
(2) 缩放动画
所谓缩放,就是指运动对象在动画的过程中发生了大小的变化,利用工具箱中的“任意变形”工具可以对运动对象进行大小的调整,包括缩小和放大两种变化。 【案例2：心的缩放】
首关键帧(如第1帧)中绘制“心”并转换为实例; 插入尾关键帧(如第60帧),保持实例不变;
选择首尾之间的中间关键帧(如第30帧),并按住shift键对“心”进行中心缩放; 在首帧与中间帧,以及中间帧与尾帧之间分别创建补间动作动画。动画创建后,时间线
类似于案例1中的时间线。
(3) 旋转动画
在补间动作动画中可以让运动对象旋转起来,旋转设置主要方法是在帧的属性面板中选择旋转的方向,在其后面的文本框中设置整数倍的旋转圈数,如果需要设置非整数圈数的旋转角度,可直接利用“任意变形”工具操作对象进行0°- 360°范围内的旋转。
图3-6 属性面板中的旋转设置
【案例3：转动的螺旋桨】
首关键帧(如第1帧)中绘制“螺旋桨”图形,并转换为实例; 插入尾关键帧(如第60帧),保持实例不变; 在首尾关键帧之间创建补间动作动画;
33
选择首关键帧,在帧的属性面板中设置旋转的方向和圈数。
螺旋桨是按几何中心进行旋转的,但单摆的旋转中心并不在其几何中心位置上,而是在摆线的上端,因此在创建单摆的圆周运动时,应先在首帧将实例的中心调整到摆线的上端后,再插入尾关键帧,这样做可以避免首尾帧中经常出现旋转中心不一致的错误,从而无法完成所需要动画效果的创建。
图3-7 改变中心点的旋转动画
不同于单摆的圆周运动,单摆的摆动在运动过程中发生了方向的改变,可以通过增加中间关键帧的方法进行动画设置。
(4) 缓动动画
一个向上抛起的小球,其运动不再是匀速的变化过程,当小球由下向上运动时的这一段过程是减速运动,小球由上向下坠落的过程是加速运动,Flash补间动作动画中提供了“缓动”的选项专门处理加速和减速运动。当“缓动”选项取正值时,动画是一个不断减速的过程,取负值时动画是一个不断加速的过程。
【案例4：向上抛起的小球】
首关键帧(如第1帧)中绘制“小球”图形,并转换为实例; 插入关键帧(如第30帧),并将小球实例移动到舞台上方;
继续插入关键帧(如第60帧),将小球实例移动到舞台的下方; 在两个关键帧中选择创建补间动作动画;
选择首关键帧(第1帧),在帧的属性面板中设置缓动选项为正数,使小球实例产生减
速运动变化; 再选择中间关键帧(第30帧)设置缓动选项为负数,使小球实例产生加速运动变化。 (5) 颜色动画
在补间动作动画中,可以为实例对象设置颜色效果,这里的颜色设置主要指“亮度、色调、alpha(透明度)”等信息。动画中最常见的颜色效果是alpha,通过改变alpha可以实现阴影动画和淡入淡出的效果。
淡入淡出是Flash动画中经常使用的技术,淡入指对象从完全透明看不到的状态逐步变化成不透明的图片,而淡出指对象从不透明状态变化到完全透明的状态。
【案例5：淡入淡出】
在首帧(如第1帧)创建动画对象,并转换为实例,在属性面板中设置该实例的alpha
值为0%;
34
插入关键帧(如第30帧),并将该帧中实例的alpha值设置为100%; 继续插入尾关键帧(如第60帧),并将该帧中实例的alpha值设置为0%; 在关键帧之间创建补间动作动画。
下图所示是文字实例由左侧到中间效果为淡入,由中间到右侧的效果为淡出。
图3-8 淡入淡出效果
(6) 图层在动画中的运用
在一个图层中可以实现不同实例先后发生的运动变化,但却无法实现同时发生的且变化不同的动画,如两个小球的相对移动。这时,Flash可以通过图层的控制,将多个运动对象分布到不同的图层中独立设计动画过程,但在播放时,这些动画会显示在同一画面中。 【案例6：两个小球的相对运动】
在“图层1”中创建第1个小球的补间动作动画;
添加“图层2”后,在该图层中创建第2个小球的补间动作动画。
整个动画制作完成后,在时间线上显示下图所示结果。打开多帧编辑观察可以发现两个小球同时发生相对运动的动画。
图3-9 “多帧编辑”下显示两个小球的相对运动
3.4 运动引导
生活中存在着许多不同类型的运动现象,不仅有直线运动、圆周运动,还有出现更为频繁的沿任意路径进行的运动。在Flash动画中,两个关键帧的补间动作动画一般均采用直线运动,通过实例的旋转设置还可以形成圆周运动,但要建立一个沿任意路径的运动,就需要利用运动引导层来控制。
运动引导层是专门用于绘制运动引导路径的,这个路径必须是由线条组成,不可以是填充区域形成的引导线。运动引导层是一个特殊的图层,该层中的路径只起到运动引导的作用,文件发布后是不可见的。
【建立运动引导】
首先在“图层1”中建立补间动作动画,并命名该图层为“动画层”;
35
然后通过图层面板上的“添加运动引导层”按钮为“动画层”添加“运动引导层”; 在“引导层”中绘制运动引导线;
在“动画层”中,将动画首尾关键帧中的实例与运动引导线对齐。
图3-10 被引导的小球运动及其时间线
Flash的运动引导层使运动对象可以沿特定的路径运动,丰富了动画的变化,灵活的组合这些运动现象,可以产生更加复杂的运动效果。在帧的属性面板中,还提供了“调整到路径”的选项,可以在运动引导线控制的动作动画中,使运动对象的基线在整个运动过程中保持与路径的相对角度不变。下面左图所示是没有调整到路径时的运动效果,右图是设置了调整到路径后的运动效果。
图3-11 运动引导的“调整到路径”选项
如图所示,在闭合路径的引导中小球由A点运动引导到B点时,系统总是选择路径较短的一边做为运动引导的路径,如果要让小球沿较长的一边运动,可以采用两种方法解决：一是在动画层中添加中间关键帧,使得中间关键帧处于较长一边,从而减短运动路径的长度;二是将运动路径直接分断。其中,方法二更加简洁一些。
图3-12 闭合路径的引导
在运动引导过程中,还有一些需要注意的要点。 【运动引导要点】
引导线只能是线条,由填充勾勒出的线不能做为引导线;
引导线图层在编辑时可以显示在编辑和预览窗口中,但文件发布后不显示; 多个动画层可以共享引导图层,共享引导线;
运动引导在制作过程中具有多种应用技巧,用户可以根据需要适当调整对运动引导的控制,并结合其他动画制作方法,以完成一些特殊动画效果的设计。
36
3.5 补间形状动画
补间形状动画是F1ash动画的另一个重要组成部分,它描述的是将一个对象变形为另一个对象的过程。形变动画不仅能改变对象的轮廓形状,还能改变对象的颜色、大小、位置等。 【创建补间动作动画的步骤】
第(1)步：在首关键帧中创建动画对象的矢量图;
第(2)步：在尾关键帧处插入空白关键帧,创建新的矢量图;
第(3)步：在时间线首尾关键帧之间利用帧的属性面板中创建补间形状动画。
图3-13 创建补间形状动画
【补间形状动画设置的要点】
创建动画的对象必须是“矢量图形”,不可以是“实例”; 动画效果是产生形状的改变(指外形轮廓)。
必须调用帧的属性面板设置形状动画,时间线上的右击菜单创建的是补间动作动画; 动画中允许通过添加形状提示控制形变;
一般只适用于简单几何形状的改变,复杂形状的变化还是要使用“逐帧动画”。 在帧的属性面板中,补间形状动画中的“混合”选项中有两个选项值“分布式”和“角形”,如果选取了“分布式”选项,则创建动画中的补间形状比较平滑和不规则;如果选择了“角形”选项,则创建动画中的补间形状会保留有明显的角和直线。需要注意的是“角形”只适合于具有锐化转角和直线的混合形状。
37
补间形状动画通常会以最有逻辑的方式在两个形状之间进行过渡,但还是会产生一些附加的输出,有时这种输出会令形状的改变显得没有规律性,达不到令人满意的变化效果。因此,在补间形状动画的制作过程中,经常需要对形变动画进行一些额外的控制,才能使F1ash按照用户想要的方式来进行这次形变。通过添加形状提示可以在一定程度上使形状的改变按用户要求进行。形状提示最多26个,按从a到z的顺序进行编号,可以调“修改/形状/添加形状提示”菜单进行形状提示点的设置,形状提示初始状态呈红色,在首尾关键帧中对形状提示点进行关联后分别显示为黄色和绿色。下面左图是无形变提示时的形变动画,右图是添加形状提示后的形变动画。
图3-14 有“形状提示”的补间形状动画
3.6 遮罩
在Flash作品中,我们常常看到很多眩目神奇的效果,而其中不少就是用遮罩完成的,如水波、万花筒、百页窗、放大镜等等。
遮罩的原理其实很简单,构造遮罩时至少需要上下两个图层,上面的图层叫做遮罩图层,下面的图层是被遮罩的图层,也可以称其为显示图层。在形成遮罩后,通过上方遮罩图层中的对象显示下方被遮罩图层中的图像,而遮罩图层中没有图形的区域则挡住了下面被遮罩层中的图像。因此,可以把上方遮罩层中的对象所处区域看成是一个“洞”,通过这个“洞”可以看到下方被遮罩图层中的图像。而没有“洞”的地方,则挡住了下方的图像。
图3-15 遮罩效果
创建遮罩层非常简单,只需要在其图层上右击调快捷菜单中的“遮罩层”即可,遮罩的效果只能在图层锁定的状态下观察。 【遮罩的要点】
遮罩层中的内容可以是填充、文字、实例等对象,但不可以使用线条;
遮罩层对象的属性被忽略,如遮罩层不区分渐变色、透明度、颜色,均被视为有色; 遮罩层中的图形对象在播放时是不显示的;
遮罩层可以共享,允许将多个图层组织在一个遮罩层之下; 遮罩并不影响其他图层的正常显示。
遮罩本身并不是动画效果,但如果能和动画巧妙地结合在一起时,会产生令人赏心悦目的动画效果。在遮罩效果中,既允许在遮罩层中设置动画,也允许在显示层中设置动画。
38
第4章 行为动画
Flash是矢量动画制作软件,同时也拥有自己的脚本语言ActionScript,利用它可以创作出具有交互性的动画,丰富了Flash动画的形式,而且还能开发出许多精彩的游戏,以及与服务器脚本一起共同创建复杂的Client/Server应用、各种实时交互系统。
ActionScript脚本语言是面向对象的编程语言,在Flash中面向对象的概念被很巧妙地运用在动画中,通过在按钮、关键帧、影片剪辑实例上添加行为,并引入键盘和鼠标的操作,使得用户能控制动画的播放。从简单的动态鼠标、下拉菜单,到令人兴奋的Flash游戏,这些都体现了ActionScript的无穷魅力。
4.1 ActionScript的编程环境
ActionScript的代码是在“动作”面板中进行编辑和调试的,调“窗口/动作”菜单可以打开动作面板。动作面板是Flash的编程环境,除了可以直接编辑代码,还提供了“脚本助手”的编辑模式。
“脚本助手”模式下编辑ActionScript脚本时,会在动作面板的上端显示用于编程的对象名称,同时面板被分成左右两个区域,左边显示的是分类列表项,在ActionScript1.0&2.0中提供了“全局函数、全局属性、运算符、语句”等11项分类项信息,用户可以象Windows资源管理器中的文件夹一样展开或折叠列表中的项目,也可以在列表中的选择或拖放产生动作脚本。动作面板右边是脚本的编辑窗口,分别显示了当前动作的名称、参数输入区、代码编辑区域。
图4-1 动作面板
ActionScript采用面向对象的编程方式,不同于其它高级语言,ActionScript是一个有待不断完善的编程语言。
39
4.2 ActionScript编程基础
在Flash中利用ActionScript脚本语言进行代码编辑前,首先应了解一些程序设计的基础知识。
1、数据类型 数据分为“常量”和“变量”两种。所谓常量就是不变的、具体的数值,如：123、\"tsinghua\"等;变量就是以名称描述的一个可变化的量,如：x、y等。根据数据的性质Flash将数据划分为“数值型、字符串、逻辑型”等。
数值型Number：Flash的数值类型是双精度的浮点数;
字符串String：是由若干字符组成的序列,其中字符串常量引用时必须用双撇号括起来,如：\"tsinghua\"、\"0551\"等。
逻辑型Boolean：只有真(True)和假(False)两个值,有时会转换成1和0参与运算。 2、运算符
Flash中运算符包括算术运算符、关系运算符、逻辑运算符、赋值运算符等类别,用户可以动作面板中的“运算符”列表项下了解各类运算符。此外,还专门提供了一类用于字符串操作的运算符。
算术运算符：+(加) -(减) *(乘) /(除) %(取模)
关系运算符：= =(等于) ! =(不等于)
<(小于) >(大于) <=(小于等于) >=(大于等于)
逻辑运算符：!(非) &&(与) ||(或) 赋值运算符：=(赋值) 3、函数
ActionScript中提供了大量的函数供用户调用,限于篇幅,下面仅介绍类型转换函数。 名称 描述 实例 结果 Number 转换为数字 Number(\"123\") 123 String 转换为字符串 String(123) \"123\" Boolean 转换为逻辑值 Boolean(1) True
此外,ActionScript采用的是面向对象的编辑语言,有些函数被封装到预定义的对象内,可以通过对象的方法进行调用。
4、表达式
利用常量、变量、运算符、函数和方法能够按照一定的运算规则,可以形成丰富的表达式。在脚本语言中,既可以形成独立的表达式用于计算,也可以将表达式的结果作为参数进行调用,它是编程语句中的一个重要组成部分。按照运算符和运算结果的不同,可将Flash的表达式分为赋值表达式、算术表达式、字符串表达式、关系表达式和逻辑表达式等多种类型。 举例说明
赋值表达式：x=1
算术表达式：s=a*b*math.sin(c*pi/180)/2 关系表达式：x+y>3
逻辑表达式：x>1 && x<3
40
字符串表达式：s2=\"2008\"+s1.substr(0,2) 5、对象、属性、方法、事件
在面向对象的编程语言中,如果要通过对象完成一个特定的任务时,首先要创建对象,然后就是通过对象属性和方法以及其他编程语句进行操作,最后,这些操作必须要通过一定的事件才能触发执行。
创建对象可以采用ActionScript中的new操作符;属性和设置和方法的调用则是通过对象完成,其基本语法格式为“对象名.属性”或“对象名.方法”,必要时,方法的调用中还要给出适当的参数。而整个操作过程必须要通过事件才能触发。 (1) 预定义对象
为了编程方便,Flash预先定义了一些对象,主要包括：数学对象Math、字符串对象String、逻辑对象Boolean、数组对象Array、日期对象Date、颜色对象Color、按键对象Key、影片剪辑对象MovieClip、数值对象Number等。在编写脚本时可以直接使用这些对象,或利用这些对象创建新的对象。 (2) 预定义对象的方法
大多数预定义对象都拥有方法,通过调用这些方法,使预定义对象可以进行特定的基本操作。下图所示是预定义对象math、string和date的方法。
图4-2 预定义对象math、string、date的方法
(3) 属性
通过属性设置可以改变对象的初始状态,同时也可以从对象中取出当前属性值进行状态的判断。下面是ActionScript中常见的属性：
41
_x/_y：设置对象的x/y坐标值。
_xscale/_yscale：获取或者设置对象在x/y方向的缩放比例。 _width/_height：设置或取得影片剪辑实例的宽度/高度。 _alpha：设置或取得影片剪辑实例的alpha透明度。 _rotation：设置影片剪辑实例的旋转角度。
_visible：输入一个逻辑值,决定对象是否可见。 (4) 事件
但对于每一个对象的操作都要求由外部事件的触发才能调用。在Flash中,事件经常附属于“按钮、关键帧、影片剪辑实例”上,如图所示,按钮上常见的事件有：按Press、释放Release、RollOver鼠标滑过、鼠标拖过DragOver、按键KeyPress等。
图4-3 事件
6、基本语法规则
F1ash提供的ActionScript并不是一门严格意义上完整的编程语言,而只是一种程序脚本。但它也有自己的一套语法和标点,对用户编写的脚本进行规范,用以决定哪些字符和代码是在编译中起作用的,以及编写的语序是什么。
下面介绍适用于所有ActionScript的一般语法规则。大部分ActionScript代码语句还有其自己的一些要求,具体可参考ActionScript字典。
注释：“//”来表明其后的语句是注释语句,在脚本执行时将忽略注释语句。 分号：ActionScript语句都是使用分号“;”作为语句的结束符。
大括号：“{ }”用于将ActionScript中的程序语句编组分块。 点：“.”可以用于指出与一个对象相关联的属性或方法,也可以被用于标识指向一个电影剪辑或变量的目标路径。
7、控制结构
和其他程序设计语言一样,ActionScript的编辑语言中也存在“顺序结构、选择结构、循环结构”,并提供了结构化的流程控制语句。
顺序结构：不需要专门的流程控制语句,它是顺序向下执行所有的语句的一种流程。
选择结构：根据条件选择执行某一分支。其控制结构如下： if (条件) { 分支; }
if (条件) { 分支1; } else { 分支2; }
42
循环结构：根据条件重复性的执行某一程序段,一直到条件为假结束循环。 while (条件) { 循环体语句; } do { 循环体语句; } while (条件);
for (表达式1;表达式2;表达式3) { 循环体语句; }
4.3 全局函数
ActionScript中提供了一些全局函数,这些函数在编制行为动画的脚本时经常使用,下面简单介绍这些全局函数的基本功能。 1、时间轴控制
Play：用于播放影片或影片剪辑,动作中没有参数。
Stop：中止正在播放的影片或影片剪辑,动作中没有参数。
Goto：从当前帧跳转到指定帧。有GotoAndPlay和GotoAndStop两种形式。 StopAllSounds：停止影片中正在播放的声音,动作中没有参数。 2、浏览器/网络
GetURL：打开特定的网页或执行网络上特定的程序,给出一个URL网址指向。 LoadMovie：加载swf等外部文件到影片剪辑中。 UnloadMovie：卸载由LoadMovie动作载入的影片剪辑。
fscommand：控制Flash Player的播放环境。 参数：FullScreen是以全屏方式播放影片。
AllowScale动画会随播放器窗口的大小而调整。
ShowMenu右击播放的动画影片会弹出播放菜单或不弹出播放菜单。 Trapallkeys锁定除影片设置外的其他按钮。 Exec可以打开可执行文件。
Quit结束播放并关闭Flash Player窗口。 3、影片剪辑控制
getProperty：返回影片剪辑的属性。 setProperty：设置影片剪辑的属性。
DuplicateMovieClip：复制指定的影片剪辑实例。
RemoveMovieClip：从影片中删除指定的影片剪辑实例。 StartDrag：用于拖曳动画中的影片剪辑实例。 StopDrag：停止拖曳动画中的影片剪辑实例。
43
第5章 动画的发布和导出
动画制作完成后,需要将可编辑的源文档发布成适于播放的目标文件。源文档的扩展名为Fla,在Flash中默认发布后的文件扩展名为swf,这种文件可以利用FlashPlayer播放器直接播放。同时,在Flash中也允许将源文档发布成多种格式的动画文件。发布Flash文档主要经过发布前的优化、测试,发布时的设置和具体发布等过程。
1、优化与测试
Flash动画之所以流行,在于能从网络上快速的下载和流畅的播放。Flash动画不一定非要追求华丽的画面,即便是简单的线条、朴素的图形,同样也可以作出充满视觉冲击力的精彩动画。因此,在动画的制作过程中应随时注意对动画的优化,保持较小的文件体积,并经常对它测试,以确保动画能够尽可能地平滑播放。
随着动画的制作,文件的大小也在不断的增加,作为发布前的一个必要步骤,应该对动画文件进行优化处理,优化是为了减小文件的大小,加快文件的下载和播放的速度。
Flash在发布动画时可以自动地对动画执行一些优化操作,如在导出时检测重复的形状使得它在文档中只存储一次,还可以将嵌套组合的对象转换成单个组合。但用户可以更多的策略来减少文件的大小,从而对动画进一步优化。
优化的总体原则是避免一段时间内设置过多的动画;尽量多采用补间动画,少用逐帧动画,因为补间动画比逐帧动画占用的空间更小;将动画中多次重复出现的对象处理为由元件生成的实例;避免使用动画位图元素,使用位图图像时尽量作为背景或者静态元素,或是转换为矢量图;声音尽可能处理成MP3的压缩格式。 2、发布前的测试
在制作动画的过程中,经常对它测试,以确保动画能够尽可能地平滑播放。特别是在动画发布之前,测试动画的整体运行情况是非常重要的,这样就可以找到动画运行过程的问题,并加以修改,最终达到按照期望的情况进行播放。
Flash编辑环境下的“控制”菜单可以控制动画播放和影片测试,调菜单“控制/测试影片”时,Flash将由编辑环境转入到影片的测试窗口,并可以观察影片播放的实际效果。在影片的测试过程中,可以模拟网络下载速度,体验影片下载时所经历的过程。
3、发布与导出
Flash的源文档是扩展名为Fla的可编辑文件,也可以将源文档发布成Flash、HTML、GIF、JPEG、PNG、Windows放映文件、Macintosh放映文件、QuickTime影片,各类格式的文件发布前都应进行必要的设置。
1) 发布swf动画
swf动画格式是Flash默认采用的动画格式,它和导出影片的设置是完全相同的。在发布影片时,可以设置图像和声音压缩选项和防止对影片进行导入操作等选项。
44
2) 发布HTML网页
若要在Web浏览器中播放Flash影片,需要一个能激活此影片并指定浏览器设置的HTML文档。该文档会由“发布”命令通过模板文档中的HTML参数自动生成的,生成HTML文档时必须同时生成swf文件,因为在HTML文档中包含了对swf文件的调用。
图5-1 发布设置对话框
在Flash的发布设置中,一共可以设置包括“Flash、HTML”格式在内的八种格式文件,其他几种格式文件还有“GIF图像、JPEG图像、PNG图像、Windows放映文件、Macintosh放映文件、QuickTime”。其中,发布后生成Windows放映文件是产生独立于播放器的可直接放映的Exe文件。 4、影片的导出
通过影片的发布可以创建各种格式的播放文件,但要在可编辑的源文档的基础上创建播放文件,发布并不是唯一的途径。利用Flash的“文件/导出”菜单项也可完成导出影片、生成多种格式的播放文件的功能,但是,若要在其他的应用程序中使用Flash创建的动画文件还需对它进行一定的调整。
5、在PowerPoint中嵌入Flash动画
PowerPoint是Microsoft公司的Office系列软件之一,利用PowerPoint可以很方便、快捷地制作电子演示文稿。近年来,PowerPoint软件非常流行,利用PowerPoint制作的多媒体教学课件和产品演示系统如雨后春笋般涌出,但是,PowerPoint在交互操作能力上的缺撼也突显出来。如果能够在PowerPoint中使用Flash 动画,就会使演示文稿具有丰富的表现力,同时还可以添加互动的效果,扩展PowerPoint,使其具有一定的交互操作功能。
【在PowerPoint中嵌入Flash动画】
在Flash中制作好一个动画,并将其导出为Swf格式的文件; 进入PowerPoint软件,并建立演示文稿,并调菜单“视图/工具栏/控件工具箱”,会打
45
开“控件工具箱”工具栏;
单击“控件工具箱”工具栏上的“其他控件”按钮,可以打开系统上已安装的ActiveX
控件清单;
在控件清单中选择“Shockwave Flash Object”后在编辑区绘制一个动画区域; 利用鼠标在文档中拖曳产生一个区域,并右击这个区域,调“属性”菜单项; 在“属性”对话框中设置“movie”选项为swf动画文件的URL或路径。
图5-2 其他控件 图5-3 属性面板
这样,一个Flash动画就嵌入到了PowerPoint中。在播放PowerPoint演示文稿时,可以看到其中的Flash动画。但是要注意,在PowerPoint中使用Flash动画,要求系统事先安装Flash ActiveX控件,如果没有安装,那么就无法在PowerPoint的演示文稿中观看动画了。
46
第6章 实验指导
6.1 矢量绘图
实验1 绘制立体形状
[操作提示]
(1) 绘图前设置“贴紧至对象”选项,这样画线时才能精确地对齐到对象; (2) 在工具的选项面板中设置“矢量方式”绘图方式;
(3) 虚线可以在属性面板中设置“笔触样式”选项;
(4) 立方体可以先绘制两个错位的正方形,再用线条连接各端点;
(5) 棱台绘制时可以先显示网格并设置“贴紧至网格”选项,利用网格便于绘制对称棱台。
实验2 绘制图标
说明：
· 圆的半径为90;
· 上方每段实心图高度为20,空白间隔高度为10。
[操作提示]
(1) 按住Shift键可以绘制正圆,通过属性面板可以设置圆的高度和宽度,以及X/Y坐标; (2) 绘制一个高度为10的矩形,组合后利用属性面板调整矩形到圆上的特定位置,最后取消
组合,利用矢量图的绘图特点删除重叠的填充区域; (3) 编辑网格间距为10,打开网格显示并设置“贴紧至网格”选项后,可以利用“选择”工具
调整圆弧的高度为10; (4) 最后选择“颜料桶”或“刷子”工具对图形填充颜色即可。
47
实验3 利用线条调整方式绘制抽象眼睛
[操作提示]
(1) 选择“线条”工具绘制三角形,再利用“选择”工具将其调整为眼睛上半部分的形状,注
意在调整时线条不能交叉或重叠;
(2) 再选择“椭圆”工具绘制眼珠,并调整到合适的位置; (3) 最后通过复制、旋转或翻转,可以产生眼睛的下半部分。 (*) 提高：利用钢笔工具也可以绘制抽象眼睛
实验4 利用“旋转和对齐”绘制对称图形
[操作提示]
(1) “十字”图形
利用“矩形”工具绘制矩形填充,再对其进行组合操作; 复制产生另一个矩形填充,并对其旋转90度;
选取2个矩形后,打开“对齐”面板,设置“水平中齐”和“垂直中齐”即可。 根据需要,可对“十字”图形进行“取消组合”操作使其成为一个整体。 (2) “六角环”图形
先绘制一个水平方向的椭圆,然后将其组合; 将椭圆复制2次;
利用对齐面板将3个椭圆对齐到一起;
最后利用旋转菜单项分别将其中两个椭圆旋转60°和120°。
48
实验5 利用“复制并应用变形”按钮绘制窗花
[操作提示]
(1) 先绘制一个曲线条,调整好形状后再利用“任意变形”工具将中心点调整偏向一端; (2) 打开“变形”面板,设置“旋转”角度为20度,反复点击“复制并应用变形”按钮即可
产生窗花。
(*) 提高：若在复制并应用变形前,将曲线条转换为由元件产生的实例,则通过变形面板复制
实例所产生的对称图形,在改变元件形状后,整个对称图形的形状会根据元件的形状发
生相应的变化。
实验6 绘制五角星
[操作提示]
(1) 打开网格绘制五角星的一角,并通过“任意变形”工具将中心点调整到正下方; (2) 打开“变形”面板,设置旋转角度为72度,反复点击“复制并应用变形”按钮; (3) 产生五角星后删除多余的线条;
(4) 利用“线条”工具连接五角星的凹角与中心点;
49
(5) 在“混色器”面板中选择线性渐变,并设置渐变颜色填充到五角星的一角中; (6) 再利用“填充变形”工具对渐变色进行调整;
(7) 五角星其它各角的颜色填充类似;
(8) 最后删除所有的线条即可。
(*) 其它方法：利用“多角星形”工具可以直接绘制五角星的轮廓。
实验7 玫瑰花
[操作提示]
(1) 选择“铅笔”工具,在其选项面板中设置“墨水”化,绘制花的外围轮廓; (2) 打开混色器面板,设置由粉红到白的放射状渐变;
(3) 利用“颜料桶”工具对轮廓进行填充,再删除线条对填充进行组合; (4) 同样方式绘制较小的轮廓图形并填充;
(5) 利用变形面板对图形进行缩小、旋转的复制; (6) 进入组合的编辑窗口,调整轮廓观察效果。
50
实验8 灯笼
[操作提示]
(1) 先绘制一个矩形,并填充放射状“从黄到红”的渐变;
(2) 复制矩形的一边若干次,并利用对齐面板中的“水平平均间隔”和“上对齐”按钮将这
些复制的边均匀地分布到矩形内,如图1效果;
(3) 再利用“任意变形”工具的“封套”选项,将左右两侧的方形控制柄向两侧调整,会出现
图2的效果;
图1 图2
(4) 然后调整四角的方向线至水平位置,即出现图3的效果; (5) 画上灯笼上下两端的矩形并填充颜色;
图3 图4
(6) 绘制一个线条,并复制若干次,再利用对齐面板中的“水平平均间隔”和“上对齐”按钮将这些复制的线条均匀分布;
(7) 利用“任意变形”工具的“封套”选项进行调整,会出现图5的效果;
图5
(8) 最后为灯笼加上“穗”和挂灯笼的“吊线”即可。
51
实验9 树
[操作提示]
(1) 首先利用“线条、选取”工具画出树叶,再用颜料桶填充绿色; (2) 将树叶转换为元件;
(3) 利用库中树叶元件绘制三片树叶,并通过“任意变形”工具对三片树叶进行调整,最后转
换为三片树叶元件;
(4) 利用刷子工具绘制树枝;
(5) 调用库中三片树叶元件,并利用“任意变形”工具创建树枝上的树叶。 (*) 注意：为了产生多种形态的树叶可适当增加“树叶”元件。
实验10 电风扇
建议：为了便于编辑电风扇中的各种对象,可通过“图层操作”将各种对象分别绘制在不同的图层中,或者另一种方法是利用组合操作从而使对象的编辑相对独立。下面以分层法介绍电风扇的绘制。
52
[操作提示]
(1) 添加新图层,并根据绘制的对象命名,再在该图层中绘制相关对象;
(2) 在不断添加新图层并绘制新对象时,可以先锁定已绘制对象的对象,这样有利于在编辑
新对象时不影响原有图层中的对象;
(3) 电风扇中大多数对象为对称图形,对称图形可以利用变形面板中的“复制并应用变形”
按钮产生(具体操作略); (4) 对称图形的相对位置可以通过“对齐”面板进行调整;
(5) 底座可以采用圆角矩形,再通过“任意变形”工具进行调整即可。
(*) 提高：将扇叶设置成旋转动画并形成影片剪辑实例,可以创建电风扇的转动效果。
实验11 文字效果
[操作提示]
(1) 阴影字：在文字的下方复制一个错位的灰色文字即可;
(*) 其它方法：利用“滤镜”面板可以直接为文字添加“投影”效果。 (2) 圆环字：改变文字的旋转中心后,在“任意变形”面板中设置文字的旋转角度,并利用“复
制并应变形”按钮可以产生文字相同的圆环字,最后修改文字即可。 (3) 渐变字：将文字分离成矢量图形后,利用“颜料桶”工具对齐填充渐变色即可。
(4) 倒影字：产生渐变的方式类似于“渐变字”,只需要再复制一个对称的倒影文字即可。 (5) 变形字：将文字分离为矢量图形后,即可调整其形状,产生形变效果。
(6) 空心字：文字分离为矢量图形后,用“墨水瓶”工具产生轮廓线条,再删除填充即可。 (*) 提高：利用扩散填充制作空心字。先在上方图层中输入与背景具有相同颜色的文字,然后在下方图层输入相同的有色文字,将下方图层中的文字分离为矢量字,再利用“扩散填充”向外扩充2像素。
(7) 图片字：先制作“空心字”效果,再导入图片将其分离为矢量图,最后将将空心字放在矢
量图上,删除多余的图片即可。 (*) 提高：运用遮罩制作图片字。先在下方图层中导入图片,再在上方图层中输入文字,最后
将上方文字的图层设置为“遮罩层”即可。
53
实验12 钢笔与路径调整
(1) 了解“钢笔工具”和“路径调整工具”的用法,并记下操作要点。 A) 工具的切换 B) 开始新路径 C) 结束当前路径 D) 继续添加路径 E) 闭合路径 F) 添加新节点 G) 删除节点 H) 曲线节点变折线节点 I) 折线节点变曲线节点
J) 调节曲线控制柄：双柄调节、单柄调节
K) 移动节点、移动路径
(2) 利用钢笔采用4种方式绘制“波浪线”。
(3) 利用“钢笔”工具绘制简单图形
实验13 描绘轮廓图
[操作提示]
(1) 导入位图后,将图层命名为“鲨鱼”,并锁定该图层;
(2) 添加新图层命名为“描图”,在“铅笔”工具的“墨水”选项下描图;
(3) 利用“选择”工具选取部分轮廓线条后,可利用“平滑”按钮对其进行平滑处理; (4) 最后利用“选择”工具的调整线条形状的功能对轮廓进行调整。
54
实验14 利用填充方式绘制蝴蝶
[操作提示]
(1) 利用“铅笔”工具绘制蝴蝶翅膀的上半部分轮廓;
(2) 调菜单“修改/形状/将线条转换为填充”,线条会转换为填充图形; (3) 再利用“选择”工具调整填充的形状;
(4) 同样的方法可以绘制蝴蝶翅膀的下半部分;
(5) 当产生一侧翅膀图形后,可以通过复制方法产生对侧的翅膀; (6) 最后再利用线条转换为填充的方式继续绘制蝴蝶的身体部位。
实验15 鼠绘小兔
[操作提示] (*) 技巧：绘图过程中可以执行“组合”操作,这样做便于图形的调整与修改,当图形确定后,
可以执行“取消组合”操作将矢量图合成一个整体。 (1) 首先绘制小兔的脸形,可以按下面的步骤操作： 先利用“椭圆”工具绘制一个圆形; 再利用“箭头”工具弯曲圆形的下端。
(2) 绘制小兔的耳朵,可以按下面的步骤操作： 继续利用“椭圆”工具绘制一个长条形椭圆;
然后利用“箭头”工具按图所示的方法弯曲四周的线条; 再在椭圆的内部绘制一个小的椭圆,并调整形状;
最后利用“任意变形”工具将整个圆形旋转一定的角度。
55
(3) 将脸和耳朵拼合在一起,可以按下面的步骤操作： 利用“箭头”工具选取耳朵后,将其移动到脸上放开;
利用“箭头”工具选取不需要的线条,按下“Del”键删除;
采用同样的方法可以绘制另一个耳朵,当然也可以“复制、粘贴”,并“水平翻转”产生
另一个耳朵。
(4) 绘制小兔的裙子,可以按下面的步骤操作： 利用“矩形”工具绘制一个矩形;
然后利用“箭头”工具移动矩形下方的端点; 再利用“箭头”工具将矩形的下边线弯曲。
再用“箭头”工具弯曲三个直线。
利用“线条”工具在裙子上画三条直线,并用“箭头”工具删除多余的线条;
(5) 绘制小兔其他部分的图形,可以按下面的步骤操作： 首先将裙子和小兔的头拼合起来,并删除多余的线条。 利用椭圆工具绘制小兔的脚;
再用“铅笔”工具可以绘制小兔的手;
56
(6) 为小兔着色时可以打开“混色器”面板,设置渐变色,并利用颜色桶工具对填充区域进行
色彩填充,利用“填充变形工具”调整填充的中心、大小、形状和角度。如小兔裙子的颜色为“蓝白蓝白„”的线性渐变填充色。
(7) 最后为小兔画上“眼睛、嘴、胡须、蝴蝶结”,并为小兔的其他部分填色,这样一个可爱
的小兔就诞生了。
(*) 试一试：绘制以下图形
实验16 绘画技法——人物
57
[操作提示]
(1) 利用“铅笔”工具勾画出如下脸形轮廓,并删除多余的线条,继续建立新图层绘制眼睛;
(2) 继续建立新图层绘制鼻子和嘴巴,并用铅笔工具勾画额前的头发、脖子、部分身体和后
面的头发;
(3) 用与众不同颜色的线条颜色将你需要填色的部分封闭,就可以填色了。填完色后继续绘
制眼睛,填好眼睛的基色,并勾画眼珠,再着色。
后面的头发有些深度。
(4) 脸部着色：勾出暗部,交填好颜色。最后是头发,因为光源被定义为正面光源,所以只有
58
6.2 逐帧动画
实验17 脸部器官动画
参考下图的图形,在多个关键帧中绘制脸部器官左右移动的动画。其中,图中的虚线为绘图的参考线。
[操作提示]
(1) 在时间轴的首关键帧中绘制左图;
(2) 分别在时间轴的第5、10、15帧位置处插入关键帧,并将关键帧中的图形调整为“中图、
右图、中图”; (3) 在时间轴的第19帧插入帧延续一段时间。
实验18 绘图写字
[操作提示]
(1) 在时间轴的首关键帧利用“刷子”工具写出文字起笔的一部分;
(2) 在时间轴面板中插入新的关键帧,在该关键帧中继续写出文字的后续部分;
(3) 不断重复执行上一步的操作,直到文字书写结束,最后在后面插入帧延续文字显示时间。 (*) 提高：如果各笔画间能有一定的帧间隔就后符合写字的动画效果。
(*) 注意：采用“刷子”利用绘画的方式写出的字不适于产生印刷体文字。
实验19 擦除挡板方式写字
[操作提示]
(1) 将“图层1”命名为“字”,并在该图层中输入文字,设置文字的字体和字号; (2) 在“字”图层中插入帧向后延续一定的长度;
(3) 添加新图层命名为“挡板”,并在“挡板”图层中绘制与背景一致的矩形块挡住文字;
59
(4) 在时间轴面板中边添加关键帧,并用“橡皮擦”工具擦除“档板”图层中遮住文字的部分。反复操作,直至整个文字显露出来。
(*) 技巧：进行擦除操作时,可将“字”图层锁定,同时将“挡板”图层调整至文字的下方,
再将文档背景设置为其它颜色,这样操作会更方便一些,待动画制作完成后,再复原图层和文档背景颜色。
实验20 描红(直接擦除文字后翻转帧)
[操作提示]
(1) 将“图层1”命名为“空心字”,并在该图层中输入文字,设置文字的字体和字号,并将其转换为空心字,最后锁定该图层;
(2) 添加新图层并命名为“描红”,在该图层中输入同样大小的文字,并将其转换为矢量图; (3) 在“描红”图层中不断的添加新关键帧,同时利用“橡皮擦”工具反向擦除黑色文字,直至将文字全部擦除;
(4) 在“描红”图层的时间轴上选取所有帧进行翻转帧操作。
实验21 绘制爱心
[操作提示]
(1) 建立“爱心”图层,并在此图层中绘制爱心;
(2) 添加新图层“毛笔”,并在此图层中绘制“毛笔”,再将其转换为实例; (3) 利用“任意变形”工具将其中心点调整到笔尖; (4) 在第1帧位置处,将毛笔调整到爱心的结束位置处;
(5) 在第2帧位置处,将毛笔前移并擦除毛笔后的爱心线条;
(6) 在第3帧位置处,继续将毛笔前移并擦除毛笔后的爱心线条; (7) 前3帧状态如图所示,反复操作直到整爱心擦除完毕;
60
(8) 在时间轴上选择所有帧并翻转,毛笔绘制爱心的过程即可完成;
(*) 提高：若要使爱心闪烁,其原理是先让对象显示一段时间,再使其消失一段时间,反复几
次即可。
(*) 闪烁效果的制作技巧：先间隔插入若干关键帧,再在关键帧之间插入空白关键帧即可,其
中最后一个关键帧之后要插入帧,让画面延续一段时间。见前面的帧图。
[试一试：泼墨挥毫]
实验22 翻转的长方形
[操作提示]
(1) 在时间轴面板中边插入关键帧,边对图形进行绘制和调整。 左侧为1-6帧中的长方形形状; 右侧为8-13帧中的长方形形状;
15-20帧和22-26帧中的长方形形状类似。
为了使翻转效果明显,建议左侧图形和右侧图形设置不同的颜色。 (2) 动画制作过程中的可以利用“帧的复制和翻转”等操作。
实验23 利用绘图方式绘制人侧面行走的逐帧动画
(1) 左图是人行走的分解图,右图为人的模型;
(2) 利用人行走的参考分解图,制作模型走路的逐帧动画。
61
6.3 补间动作动画
实验24 创建场景中的实例 [操作提示]
(1) 转换法
在场景中绘制对象后,并在该对象上调用“转换为元件”菜单项,此时元件库中自动添加该对象的元件,场景中的对象变成“实例”。
另一种类似的方法是在绘制对象后,直接将对象拖至库中,其操作和调用“转换为元件”
的功能是一致的。 (2) 新建元件法
先调用“新建元件”菜单项进入元件编辑画面;
绘制对象后返回场景,元件库中会自动产生新元件;
最后将库中元件拖至场景,这样会创建与之对应的实例。
实验25 小球的移动
[操作提示]
(1) 在首帧绘制小球,并利用转换法创建小球实例; (2) 在时间轴插入尾关键帧,并调整小球到新的位置; (3) 在时间轴上首尾关键帧之间创建补间动作动画。
实验26 一箭穿心
[操作提示]
(1) 绘制一个爱心,并将其一分为二,分别置于两个不同的图层中,并有一定的帧延续; (2) 在两个图层之间添加“箭”图层;
(3) 编辑网格间距并打开网格显示,设置“贴紧至网格”,在“箭”图层首帧帧中绘制箭; (4) 利用转换法创建首帧中箭的实例,并在尾帧处插入关键帧;
62
(5) 在“箭”图层的首尾关键帧之间创建补间动作动画。
实验27 升旗
[操作提示]
(1) 在“旗杆”图层中绘制旗杆,然后在时间轴上“插入帧”延续画面;
(2) 在“旗帜”图层中绘制旗帜,转换法创建实例后,将图层中的实例移动到旗杆的底部; (3) 继续在“旗帜”图层的时间轴上插入尾关键帧,将旗帜移动到旗杆的顶端;
(4) 在“旗帜”图层的首尾关键帧之间创建补间动作动画。
(*) 提高：若“旗帜”为影片剪辑元件的实例,按下图所示编辑该元件并创建逐帧动画,则可
以建立红旗飘动的动画效果。
实验28 缩放的爱心
[操作提示]
(1) 在首帧中绘制爱心,并利用转换法创建实例;
(2) 在时间轴面板上先插入尾关键帧(第40帧),然后在中间插入关键帧(第20帧); (3) 利用“任意变形”工具将中间帧(第20帧)的爱心实例进行中心缩放(shift键); (4) 在时间轴各关键帧之间创建补间动作动画。
(*) 提高：当首尾关键帧中的实例一样时,可先插尾关键帧,再插入中间关键帧。
(*) 提高：动画首尾帧一样时,可在尾关键帧增加代码gotoAndPlay(2)解决画面重复问题。
63
实验29 两小球相对碰撞后反弹
[操作提示]
(1) 在“小球1”图层中绘制小球,移到屏幕左端,利用转换法创建“小球1”实例;
(2) 在“小球1”图层的时间轴后续位置插入中间关键帧(第20帧),并在中间关键帧中调整
小球的位置到屏幕中间;继续在“小球1”图层的时间轴后续位置插入尾关键帧(第40帧),并将尾关键帧中的小球移动到屏幕左端;
(3) 在“小球1”图层的关键帧之间创建补间动作动画;
(4) 在“小球2”图层中类似方法可完成小球2由屏幕右端向中间移动再返回右端的动画。
[试一试] 试建立打台球的动画
实验30 飞去来器
飞去来器先按顺时针旋转3圈飞出,再顺序时针旋转2圈飞回原位置。 [操作提示]
(1) 在图层中绘制飞去来器,利用转换法创建实例;
(2) 继续插入中间关键帧和尾关键帧,并在关键帧之间创建补间动作动画;
(3) 分别选择首关键帧和中间关键帧,在属性面板中旋转的方向和旋转的圈数。
(*) 提高：Flash可以设置任意角度的旋转动画。在属性面板中可以设置整数圈数的旋转,
“任意变形”工具可以设置360度以内的旋转,二者结合能产生任意角度的旋转动画。
64
实验31 单摆
[操作提示]
(1) 在“房顶”图层中绘制房顶,并在时间轴上后续位置插入帧延续画面; (2) 在“摆动”图层中绘制单摆,并利用转换法创建单摆实例;
(3) 利用“任意变形”工具将旋转中心改变到单摆的上端,再通过旋转操作改变单摆的摆动
角度为“左倾30度”; (4) 分别在第15、30、45、60帧的位置插入关键帧,并分别设置各关键帧中单摆的位置为“正
下端、右倾30度、正下端、左倾30度”;
(5) 在各关键帧之间创建补间动作动画;
(6) 利用“属性”面板为各关键帧设置“缓动”选项,产生加速和减速的动画效果; (7) 在尾关键帧增加代码：gotoAndPlay(2);
实验32 三角形围绕正方形旋转(改变旋转的中心)
[操作提示]
(1) 在“正方形”图层中绘制正方形线条,并在后续位置插入帧延续画面,最后锁定该图层; (2) 添加“三角形”图层,并在该图层中绘制三角形线条;
(3) 在“三角形”图层中将三角形线条转换为元件,并利用“任意变形”工具将旋转中心点
移动到三角形的一端(如下面的左图);
65
(4) 在时间轴的1-15帧中创建三角形由上方移动到左方的动画;
(5) 在时间轴的第16帧添加关键帧,并调整三角形旋转的中心点到左下角(如下面的中图); (6) 在时间轴的16-30帧中创建三角形由左方移动到下方的动画(如下面的右图);
(7) 动画制作的后续步骤类似。
实验33 滑块的翻转
[操作提示]
(1) 在“斜坡”图层中绘制斜坡,并在后续位置插入帧延续画面,最后锁定该图层; (2) 添加“滑块”图层,并在该层中绘制滑块,利用转换法创建滑块实例;
(3) 在首帧位置处利用“任意变形”工具将滑块的中心点调整到右下角(如下面左图); (4) 在后续第20帧位置处插入关键帧,并在1-20关键帧之间创建补间动作动画,让滑块完成
下滑的动画;
(5) 继续在后续第30帧位置插入关键帧,利用“任意变形”工具将此关键帧中的滑块旋转到竖立位置,并在20-30帧之间创建补间动作动画; (6) 在第31帧位置处插入关键帧,利用“任意变形”工具将滑块的旋转中心调整到另一端(如
下面右图);
(7) 在第40帧插入关键帧, 利用“任意变形”工具将此关键帧中的滑块旋转到水平位置,并在31-40帧之间创建补间动作动画;
(8) 最后在时间轴的后续位置插入帧,延续画面的显示。
66
实验34 阴影
[操作提示]
(1) 将图层命名为“100%-100%”,并在该图层建立文字“welcome”实例,并创建补间动作动
画,利用属性面板设置旋转效果; (2) 添加新图层命名为“50%-50%”,并复制“100%-100%”图层中的旋转动画到该层中,使其
向后移动1帧,再通过属性面板设置该层首尾关键帧中文字实例的alpha度为50%; (3) 同理,创建新图层“15%-15%”中的文字旋转动画,继续向后移动1帧,并设置该图层首尾
关键帧实例的alpha度为50%。
实验35 逐字旋转淡入
[操作方法]
(1) 利用新建元件法,在库中建立“春夏秋冬”每个字的元件;
(2) 建立图层“春”,并在图层中创建“春”字的动画,使其具有如下效果：
文字实例自舞台外由大变小,旋转至舞台的中心;
设置文字在首尾关键帧中实例的alpha由0%变化到100%;
(3) 复制“春”图层中的所有帧到“夏”图层中,并使复制后的帧向后移动10帧,交换该图层首尾关键帧中的文字为“夏”;
(4) 同样的方法通过复制和交换元件操作完成“秋、冬”图层中的动画; (5) 调整好每个字的位置,要求文字起点位置相同,终点位置处于一条水平线上。 (6) 在所有图层中插入帧延续画面。
[试一试：风吹字(逐字旋转淡出)]
67
实验36 过渡效果
[操作提示]
(1) 利用图像处理软件裁剪“春夏秋冬”4幅大小相同的位图,导入到Flash中; (2) 将4幅位图转换转换为元件,并删除场景中的所有实例;
(3) 在“春”图层中的第1帧中引用库中“春”元件产生的实例,并在时间轴的第40帧插入帧,使画面延续到该帧位置;
(4) 在“夏”图层中的第20-40帧利用库中“夏”元件产生的实例创建补间实例动作动画,
动画中的实例没有位置和大小的变化,但要设置第20帧的图片实例alpha度为0%,第40帧的图片实例alpha为100%,并在第80帧位置插入帧,使得画面向后延续; (5) 在“秋”和“冬”图层中的动画其设置方法和“夏”图层中的动画类似;
(6) 在“冬-春”图层中,可以在第140-160帧中创建“春”图片实例的动画,并设置图片实
例的alpha度为“0%100%”的动画; (7) 需要注意的是各图层中的图片位置是重叠的,可以利用属性面板中的坐标对图片位置进
行调整。
(*) 提高：若能将位图转换为矢量图后再创建元件,则可以使转换后的矢量图与位图无关,明
显压缩文件的存储量。
实验37 吊扇(元件的嵌套编辑)
[操作提示]
(1) 利用新建元件法,在元件编辑窗口中绘制一片扇叶;
(2) 继续新建三片扇叶的元件。在元件编辑窗口中,利用一片扇叶通过变形面板中的“复制
68
并应用变形”按钮创建三片扇叶;
(3) 继续新建旋转扇叶的元件。在该元件的编辑窗口中,利用三片扇叶创建补间动画(见下面
帧图),并利用属性面板设置旋转1次的效果,并在尾关键帧添加代码：gotoAndPlay(2); (4) 最后新建吊扇元件。在元件编辑窗口中利用旋转扇叶,再绘制吊杆即可。
记忆旋转中心。
实验38 滚动的篮球
(*) 注意：三片扇叶的元件中心并不是扇叶的旋转中心,在操作过程中应利用元件编辑中心
[操作提示]
(1) 利用新建元件法,建立名称为“旋转篮球”元件。具体操作方法为：
调“插入/元件”菜单项,建立名称为“旋转篮球”的影片剪辑元件; 在元件编辑窗口绘制一个篮球,并将此篮球转换为元件的实例;
若篮球实例每20帧旋转1次,则在第21帧插入关键帧,并在首尾帧之间创建补间动作动
画,利用帧的属性面板中设置旋转1次,在第21帧调用动作面板输入：GotoAndPlay(2)
返回场影。
(2) 打开库面板,利用“旋转篮球”元件在场影的首帧创建实例; (3) 在后续帧上插入关键帧,并改变该帧中篮球的位置; (4) 在首尾关键帧之间创建补间动作动画。
(*) 提高：主场景中若篮球平移过程中发生n周的旋转,则主场景中平移动画的帧长度是旋
转篮球帧长度的n倍。
69
6.4 运动引导动画
实验39 抛出去的小球
[操作提示]
(1) 在“地面”图层的首帧绘制一条线,并在后续位置插入帧延续画面,锁定该图层; (2) 在“小球”图层中创建小球的补间动作动画;
(3) 在图层面板中为“小球”图层添加运动引导层,并在该图层中任意绘制一条曲线;
(4) 选择“小球”图层,在首帧中将小球实例对齐引导线的一端,在尾帧将小球实例对齐引导
线的另一端。
实验40 打乒乓球
[操作提示]
(1) 在名称为“球台”的图层中绘制一张球台,完成后可以锁定该图层,避免在编辑其它对象
的过程中影响该图层中的对象; (2) 添加新图层命名为“球拍”,在该图层中绘制一个球拍,并将其转换为元件,利用球拍实
例创建补间实例动作动画; (3) 为“球拍”层添加运动引导层,在引导层中绘制一个缺口的椭圆表示球拍的运动轨迹,并
将球拍动画中首尾关键帧的实例与引导线对齐; (4) 乒乓球的运动引导制作方法类似于球拍的运动引导,参照(2)、(3)的操作即可完成。
70
实验41 鸟的飞行
[操作提示]
(1) 导入一幅飞鸟的图形,并将其转换为元件; (2) 利用飞鸟的实例制作动画：
在第1-10帧中,制作飞鸟的动画,运动方向是“从左向右”,并调整第1、10帧中飞鸟的倾斜角度;
在第21帧中,先水平翻转飞鸟实例,再在第21-40帧中制作动画,飞鸟的运动方向是“从
右向左”,也需要调整飞鸟的倾斜角度;
(3) 添加运动引导层,在该层中绘制椭圆后将其一端断开;
(4) 在飞鸟动画的各关键帧中,将飞鸟实例分别对齐引导线的相关位置。
实验42 帆船的“8”字运动
[操作提示]
(1) 将图层命名为“船”,并在该图层中绘制船,将其转换为元件;
(2) 在“船”图层中利用船的实例制作两段动画：
第1-25帧为船从左向右运动的动画,并调整第1、25帧中船的倾斜角度; 第26帧位置处将船水平翻转;
在第26-50帧设置船从右向左运动的动画,也需要调整26、50帧中船的倾斜角度。 (3) 添加运动引导图层,并在引导层中绘制8字形状的2个波浪线;
(4) 在“船”图层的各个关键帧中,将船对齐到引导线的相关位置即可。
71
实验43 追逐
[操作提示]
(1) 在“路径”图层的首帧绘制椭圆,并在后续位置插入帧延续画面,锁定该图层;
(2) 在“矩形”图层的首帧创建一个矩形实例,分别在第15、30、60帧处插入关键帧,并创
建补间动作动画; (3) 在“圆形”图层的首帧创建一个矩形实例,分别在第30、45、60帧处插入关键帧,并创
建补间动作动画; (4) 为“矩形、圆形”两个图层添加引导层,并在引导层中复制“路径”图层中的椭圆; (5) 分别在“矩形、圆形”两个图层的各关键帧处按下图所示位置位置将实例对齐引导线; “矩形”图层的第1、15、30、60帧中的实例对齐“A、B、C、A”; “圆形”图层的第1、30、45、60帧中的实例对齐“X、Y、Z、X”。
(6) 在第60帧调用动作面板输入：GotoAndPlay(2)
实验44 铅笔画AHTV台标
要求：铅笔先由左上角向下画出AHTV台标的左边曲线,再由左下角按直线方向返回左上角,
在此过程中不画任何线条,最后由左上角向右向下画出AHTV台标的右边曲线。
[操作提示]
(1) 在“台标”图层的首帧绘制AHTV台标,并在后续位置插入帧延续画面;
72
(2) 在“笔”图层中绘制铅笔图形,并将其转换为实例,调整其中心为笔尖;
(3) 在“笔”图层上方建立运动引导层,并复制“台标”中的AHTV轮廓线条作为引导线; (4) 引导线的设计：先在“引导线”图层的第22帧插入关键帧后;再在第12帧插入空白关
键帧;最后在第48帧位置插入关键帧。如此设置引导线的原因是： 第1-11帧中的引导线引导铅笔画出AHTV台标的左边曲线;
第12-21帧不再对铅笔动画进行引导,从而使铅笔能够沿直线由AHTV台标左下端移动到
左上端;
第22-48帧中的引导线引导铅笔画出AHTV台标的右边曲线。 (5) 在“笔”图层中建立补间实例动作动画：
在第1-11帧中建立铅笔沿AHTV台标左边曲线进行移动的动画; 再在第12-21帧中建立铅笔返回左上角的直线移动的动画;
最后在第22-48帧中建立铅笔沿AHTV台标右边曲线进行移动的动画;(由于是闭合路径,
且右边曲线长度比左边长,因此铅笔不会沿右边曲线运动。处理的办法是在沿右边曲线的运动过程中添加中间关键帧,使运动路径长度小于左边曲线即可。) (6) 在“台标”图层的第48帧位置处插入关键帧,AHTV台标将复制到该帧中;
(7) 在“台标”图层中,将第48帧复制到第47帧,并在场景中擦除第47帧中铅笔后面的线
条;
(8) 按步骤(7)反复操作,直到擦除所有铅笔后的所有线条。
[试一试：云彩图]
参考上面的实验,试按下图所示的引导线,让飞机在延引导线运动时,在飞机的尾部拖出一个烟雾状的爱心形状;
实验45 太阳、地球、月亮
[操作提示]
(1) 首先利用新建法创建“月亮”元件;
73
(2) 然后利用新建法创建“月亮轨迹”元件,并在元件编辑窗口中完成以下操作：
在“月亮轨迹”图层绘制椭圆,并在后续位置插入帧延续画面; 在“月亮”图层中利用库中的“月亮”元件创建补间动作动画;
在为“月亮”动画添加引导图层,并复制月亮轨迹到该图层中,擦断引导线;
在“月亮”图层的首尾关键帧中将月亮实例对齐引导线,完成所有编辑后返回场景。 (3) 继续利用新建法创建“地球系”元件,并在元件编辑窗口中完成以下操作：
在“地球自转”图层首帧、尾关键帧中绘制地球,填充从白到蓝的线性渐变,在中间关键
帧绘制的地球填充从蓝到白的线性渐变; 利用属性面板,在“地球自转”图层的各关键帧间创建补间形状动画;
将库中“月亮轨迹”元件拖到“月亮”图层,并插入帧延续到第60帧,完成所有编辑后返
回场景。
(4) 最后在场景中完成“太阳、地球、月亮”的公转与自转：
在“太阳”图层中绘制太阳图形,此图层可分为两部分,分别置于引导线的前后,使其产生
环绕现象,并在后续位置插入帧;
在“地球轨道”图层中绘制椭圆,并在后续位置插入帧;
在“地球系”图层中利用库中的地球系元件创建补间动作动画;
为“地球系”动画添加引导层,并将地球轨道复制到引导层,擦断引导线; 在“地球系”图层的首尾关键帧中将实例对齐引导线。
74
6.5 补间形状动画
实验46 圆形变成矩形
[操作提示]
(1) 在开始帧中绘制一个圆形;
(2) 在动画结束的位置插入空白关键帧,并绘制一个矩形;
(3) 选取开始帧,在帧的属性面板中设置“补间”选项为“形状”。
(*) 提高：默认情况下,形变动画中的圆经过顺时针旋转90°变成矩形。若要求圆按逆时针
方向旋转变成矩形,只需要按下图设置形状提示即可。
实验47 翻书
[操作提示]
(1) 在“书”图层中绘制下面左图所示图形,并在后续位置插入帧延续画面,锁定该图层; (2) 分别在“页”图层的第1、20、40、60帧处分别按下面中图所示绘制图形：
(3) 利用属性面板在“页”图层的各关键帧之间创建补间形状动画,但此时效果不是翻页,而是飘页;
(4) 在第20帧按下面右图所示添加形状提示,并在第20、40帧对齐形状提示。
75
实验48 射箭
[操作提示]
(1) 打开网格显示;
(2) 在“弓”图层第1、30帧分别绘制下图所示的A、B两条弧,且第40、45帧中的图形是B、
A,按帧图所示利用属性面板创建补间形状动画; (3) 在“弦”图层第1、30帧分别绘制下图所示的C、D两条折线,且第40、45帧中的图形
是D、C,按帧图所示利用属性面板创建补间形状动画;
(4) “箭”图层中是一条直线的运动动画。其中,第1-30帧是拉弓时箭的动画,第40-60帧
是放箭时的动画。
(*) 技巧：在帧图上,第40-45帧实际上是第1-30帧的翻转帧。
实验49 三角形绕立方体旋转
[操作提示]
(1) 在“立方体”图层中绘制立方体图形,并在后续位置插入帧延续画面,锁定该图层;
(2) 按下图所示,在“三角形”图层的第1、20帧中绘制三角形,利用属性面板创建补间形状
动画,并添加“形状提示”;
76
(3) 继续按下图所示,在“三角形”图层的第21、40、41、60帧中绘制三角形,利用属性面
板创建补间形状动画,并添加“形状提示”。
实验50 三角形绕立方体旋转
[操作提示]
(1) 在首关键帧绘制下面左图,并填充从灰到白的线性渐变;在下一个关键帧位置(第39帧)
绘制下面中图,并填充渐变;在尾关键帧(第40帧)中绘制下面右图,并填充渐变;
(2) 利用属性面板在第1-39帧之间创建补间形状动画;
(3) 在首关键帧中添加6个形状提示点,分别设置在4个顶点和两条边上,并在第39帧中对
齐这些形状提示点。
77
6.6 遮罩
实验51 图片字
[操作提示]
(1) 在“图片”图层中导入图片;
(2) 在“文字”图层中输入文字并设置字体与字号;
(3) 将“文字”层设置为遮罩层。
(*) 提高：用新建元件法将图片字做成元件便于引用。
实验52 在背景上展开文字
[操作提示]
(1) 在“背景”图层中导入一幅背景图片,并在后续位置插入帧;
(2) 添加“文字”图层,在该图层中输入文字“点燃激情 超越梦想”,设置字体字号; (3) 添加“矩形”图层,在该图层中绘制矩形块并转换为实例,创建矩形实例的补间动作动画,
在动画首尾关键帧中矩形块的相对位置如下图：
(4) 将“矩形”图层设置为“遮罩层”。
78
实验53 探照灯
[操作提示]
(1) 在“暗图”图层中导入位图,并将其转换为元件,再通过属性面板调整该图层中位图实例
的明暗度使其偏暗; (2) 建立“亮图”图层,打开库后,从库中元件生成场景中的位图实例; (3) 在2个图层中调整位图实例,使其在位置上重叠;
(4) 建立“灯遮罩”层,在该层中建立“圆形实例”从左向右运动的动画; (5) 将“灯遮罩”图层设置为“遮罩”。
实验54 放大镜
[操作提示]
(1) 在“正常图”图层中导入位图,并将其转换为元件,设置位图实例为正常大小; (2) 建立“大图”图层,并从库中元件生成场景中的位图实例,并调整大小使其偏大; (3) 再建立“遮罩”图层,在该图层中绘制圆形填充;
(4) 将“遮罩”图层设置为遮罩后即可;
(5) 最后建立“放大镜边框”图层,在该图层中绘制放大镜边框,使其与圆形填充相匹配。 (*) 注意：放大效果只适用于大图与正常图对齐的中心点,其它位置上的放大效果会出现严
重的错位。
实验55 灯光交汇
[操作提示]
(1) 在库中分别建立“红圆、黄圆、绿圆”3种颜色的小球元件;
(*) 技巧：可以先建立“红圆”元件,再通过复制元件产生“黄圆、绿圆”元件,最后修改元
件重新填充颜色。
79
(2) 在“红光”图层中利用红球实例建立从左向右平移的动画;
(3) 将“红光”图层复制到新图层中,并重新命名为“绿光”图层;
(4) 在“绿光”图层中利用帧翻转操作将小球修改成从右向左的运动动画,并通过交换元件
的操作将首尾关键帧中的红球实例交换为绿球;
(5) 将“红光、绿光”图层复制后,并将复制后的图层命名为“遮罩、黄光”图层; (6) 将复制后产生的“黄光”图层中的红球实例交换为黄球; (7) 最后在图层面板中将“遮罩”图层设置为遮罩即可。
实验56 变色旋转的十字
[操作提示]
(1) 在库中分别建立“黄十字、绿十字”2种元件;
(2) 在“背景”图层中绘制圆形填充作为背景,并在后续位置插入帧延续画面,锁定该图层; (3) 添加“黄图层”,并在该图层中利用“黄十字”元件建立旋转动画; (4) 再添加“左挡”图层,在该层中绘制矩形填充挡住黄十字的左半部;
(5) 将“左挡”图层设置为“遮罩”后,即可观察到黄十字的旋转变色效果;
(6) 复制“黄图层、左挡”2个图层到后,重新命名为“绿图层、右挡”,并将复制后绿图层
首尾帧中的“黄十字”元件交换为“绿十字”,将左挡调整位置到右侧挡住绿十字的右半部,最后设置“右挡”图层为“遮罩”后即可。
(*) 提高：实际上“黄十字”图层不用添加置遮层也可以形成上述的动画效果。
[试一试：旋转的花字]
80
实验57 百叶窗
[操作提示]
(1) 在“图片1”和“图片2”图层中分别导入2幅大小相同的图片,并调整位置使其重叠; (2) 利用“新建元件法”建立一个长条矩形缩放的动画,元件类型为“影片剪辑”,并将该元
件命名为“矩形缩放”,元件建立的具体方法如下：
在第1帧绘制一个矩形条填充,并转换为元件,并利用对齐面板将其对齐到元件中心; 在第20帧插入关键帧,并利用“属性”面板设置其高度为1; 在第1-20帧之间创建补间实例动作动画; 在第21帧处插入空白关键帧;
在第30帧处复制插入关键帧后复制第20帧中的实例; 在第49帧处插入空白关键帧后复制第1帧中的实例; 再在第30-49帧之间创建补间实例动作动画; 最后在第60帧处插入帧延续画面。
(3) “矩形缩放”元件建立后,返回场景再次利用“新建元件法”建立名称为“百叶窗”的影片剪辑类型元件,具体方法如下：
打开库面板,将库中“矩形缩放”元件拖放至元件编辑区,重复几次,编辑区即有多个“矩形缩放”实例;
选取多个实例后打开“对齐”面板,使实例均匀分布后,对将其对齐到元件编辑中心; 最后返回场景即可。
(4) 在场景中添加新图层命名为“百叶窗”,将库中的“百叶窗”元件拖放至场景中覆盖图
片,并设置该图层为遮罩层,最后测试影片即可观察动画效果。
实验58 光芒
[操作提示]
(1) 新建“线条”元件：
81
利用新建元件法创建名称为“线条”的图形元件;
在元件编辑区绘制一个较细的矩形,并利用混色器面板和颜料桶工具进行渐变填充; 再利用对齐面板将元件对齐到中心位置,完成后返回场景; (2) 新建“光芒”元件：
继续利用新建元件法创建名称为“光芒”的影片剪辑元件; 打开库将“线条”元件放置在元件编辑区;
利用“任意变形”工具调整线条的中心点偏向一端的外侧下方,且调整后的中心点与元件编辑中心对齐;
利用“变形”面板,设置旋转角度为15度,通过“复制并应用变形”产生放射状向外的对
称线条,完成后返回场景;
(3) 创建放射状动态光芒效果：
在场景中建立名称为“转动的光芒”图层,利用库中“光芒”元件产生实例,并创建补间
实例动作动画,通过属性面板设置该动画为逆时针旋转1周; 添加新图层命名为“反转的光芒”,在该图层中再次从库中引入“光芒”元件产生的实例,
并将该实例水平翻转; 在图层面板中设置“反转换光芒”图层为“遮罩”层即可。 (*) 提高：利用光芒的基本原理,可以制作“万花筒”的效果。
实验59 水中倒影
[操作提示]
(1) 导入一张图片,并将该图片转换为元件,删除场景中的实例;
(2) 利用库中的“图片”元件,在“上下图”图层中创建上下相对的图片实例;
(3) 继续在“下图”图层中导入下方图片,注意此图片与另一图层中的图片有错位;
(4) 在“水波”图层中绘制线条,将线条转换为填充并调整填充形状,通过复制操作产生大量
82
水波条纹;
(5) 在“水波”图层的后续位置插入关键帧,并将水波条纹向下移动,利用属性面板在首尾关
键帧之间创建补间形状动画; (6) 将“水波”图层设置成遮罩层。
(*) 提高：若水波倒影整体做成一个影片剪辑元件,则可以进一步利用遮罩对水波倒影的实
例进行裁剪。
实验60 循环滚动的波浪
[操作提示]
(1) 利用新建法创建“单波纹”元件,在元件窗口编辑一个水的波纹,完成后返回场景; (2) 继续利用新建法创建“多波纹”元件,在元件窗口利用库中的“单波纹”元件产生若干
干个波纹,首尾相接对齐后,通过“单波纹”元件的编辑,使水波连接变得圆滑,完成后返
回场景;
(3) 新建“水波滚动”的元件,在元件编辑窗口完成以下操作：
在“水波”图层中利用库中的“多波纹”元件创建补间动作动画,在动画中利用多帧编辑
技术设置尾关键帧的水波与首关键帧中的水波错位重叠;
83
在该动画的尾关键帧添加代码：gotoAndPlay(2);
在“矩形”图层中绘制矩形填充,设置需要截取的水波纹区域,并将该图层设置为遮罩层; 元件编辑完成后返回场景。
(4) 利用库中的“水波滚动”元件可以产生实例。 (*) 提高：循环滚动的图片也可以利用此法完成。
实验61 转动的地球
[操作提示]
(1) 在“地球”图层中绘制一个蓝色的圆形,并在后续位置插入帧;
(2) 在“世界地图”图层中创建一个多图实例,为利用此实例创建补间动作动画,动画中要求
首尾关键帧中的世界地图错位对齐,并在尾关键帧中添加代码：gotoAndPlay(2); (3) 在“遮罩”图层中绘制一个和地球同样大小的圆形填充,并将该图层设置为遮罩层。 (*) 提高：也可以按下面所示的帧图创建动画。
(*) 提高：利用双层遮罩可制作3D的旋转地球。
84
6.7 行为动画
实验62 按钮打开网页 [操作提示]
(1) 打开公用库,在当前图层中放置一个按钮; (2) 打开动作面板,为按钮实例设置动作：
on (release)
{ getURL(\"http://www.sina.com.cn\"); }
(*) 说明：也可以在脚本助手模式下输入getURL命令的参数来设置动作。
实验63 控制小球的运动
[操作提示]
(1) 在“动画”图层中创建小球运动的动画;
(2) 在“动画”图层的第1、40帧处打开动作面板,添加关键帧代码：stop(); (3) 添加“play”图层,利用公用库创建一个播放按钮实例; 在第1帧中按钮的代码为：on (release) { play(); } 第40帧中按钮的代码为空;
(4) 继续添加“pause”图层,利用公用库创建一个暂停按钮实例,该按钮的代码为： on (release) { stop(); }
(4) 最后添加“goback”图层,利用公用库创建一个回退按钮实例,该按钮的代码为：
on (release) { gotoAndStop(1); }
(*) 思考：小球运动为一次性动画,如果动画为循环动画(如单摆的圆周运动),代码的控制中
将进行哪些改变？
实验64 控制属性
[操作提示]
(1) 在“页”图层中插入关键帧,并输入每个关键帧中的内容; (2) 打开动作面板,在“页”图层的首帧位置动作：stop();
85
(3) 打开公用库,在“按钮”图层中添加两个按钮“下一页、上一页”,并在属性面板中对按钮分别命名为“prebtn、nextbtn”,并在首帧位置设置动作： if (_root._currentframe == 1)
{ prebtn._alpha = 50; prebtn.enabled = false; } if (_root._currentframe==_root._totalframes)
{ nextbtn._alpha = 50; nextbtn.enabled = false; } (4) 对“下一页”按钮设置动作：
on(press)
{ var newframe=_root._currentframe+1; gotoAndStop(newframe);
if (_root._currentframe >1)
{ prebtn._alpha = 100; prebtn.enabled = true; } if (_root._currentframe==_root._totalframes)
{ nextbtn._alpha=50; nextbtn.enabled=false; } }
(5) 对“上一页”按钮设置动作： on(press)
{ var newframe=_root._currentframe-1; gotoAndStop(newframe);
if (_root._currentframe <_root._totalframes)
{ nextbtn._alpha = 100; nextbtn.enabled = true; } if (_root._currentframe==1)
{ prebtn._alpha=50; prebtn.enabled=false; } }
(*) 提高：若页的内容比较多,可先将其做成影片剪辑元件,再插入到页图层的关键帧中。
实验65 小学数学加法运算
[操作提示]
(1) 利用文本工具,创建第1个和第2个操作数文本块,在属性面板中设置为“动态文本”,
变量分别为x和y;
86
(2) 输入静态文本“+”和“=”;
(3) 继续创建结果文本块,在属性面板中设置为“输入文本”,实例名为s;
(4) 继续创建提示串文本块,在属性面板中设置为“动态文本”,变量为t; (6) 调整各文本块的大小和相对位置;
(7) 继续在舞台上放置两个按钮“出题”和“结果”; (8) 打开动作面板,输入“出题”按钮的代码： on (release)
{ x=Math.floor(Math.random()*100);
y=Math.floor(Math.random()*(100-x)); z=\"\"; t=\"\"; }
(8) 打开动作面板,输入“结果”按钮的代码： “结果”按钮 on (release)
{ if (Number(s.text)==Number(x)+Number(y)) t=\"OK\"; else
t=\"NO\"; }
实验66 控制属性
[操作提示]
(1) 在图层中导入“螵虫”图片,转换为库中元件后,通过属性面板对实例命名为“s”; (2) 打开公用库,调用“变向、移动”按钮; (3) 打开动作面板,对“变向”按钮设置动作： on(press)
{ s._rotation=s._rotation+90; } (4) 对“移动”按钮设置动作： on (press) {
if (s._rotation==0) s._y=s._y+10;
87
else if (s._rotation==90)s._x=s._x-10; else if (s._rotation==180) s._y=s._y-10; else if (s._rotation==-90) s._x=s._x+10; }
实验67 复制和删除实例
[操作提示]
(1) 创建包含一个圆形和一个文本块的元件,在元件中设置文本块为“动态文本”和变量为
n,利用此元件在场景中创建一个名称为“box”的实例; (2) 打开公用库,在场景中放置“复制、删除”按钮; (3) 打开动作面板,在关键帧上添加代码：n=\"0\"; (4) 为“复制”按钮添加代码： on (press)
{ n = Number(n)+1;
bn = \"box\" + n; //下一个新复制的实例名称 duplicateMovieClip(\"box\由box实例复制新实例bn sx=getproperty(\"box\为box实例的x坐标 sw=getproperty(\"box\为box实例的宽度
setProperty(bn, _x,sx+n*sw); //设置新实例bn的坐标位置 set(bn + \":n\设置实例bn中文本块显示的数字 (5) 为“删除”按钮添加代码： on (press)
{ if (Number(n)>0)
{ bn = \"box\" + n;
removeMovieClip(bn); n=n-1; } }
实验68 飘雪
(1) 在“背景”中导入一张图片,并延续到第2帧; (2) 利用新建法创建名称为“雪花”的元件;
88
(3) 继续创建名称为“雪花飘落”的影片剪辑元件,创建从上向下落的补间动作动画,并在第
1帧和第30帧设置“雪花”实例的alpha为0%,第15帧实例的alpha为100%;
(4) 返回主场景后,将“雪花飘落”放到“雪”图层中,并在属性面板对实例命名“snow”; (5) 在“雪”图层的第1帧添加如下代码,并在时间轴上插入帧延续到第2帧。 a = random(100); while (Number(a)<=100) { a = Number(a)+1;
setProperty (\"/snow\ setProperty (\"/snow\
setProperty (\"/snow\ setProperty (\"/snow\ setProperty (\"/snow\ duplicateMovieClip (\"/snow\
实验69 放大镜
[操作提示]
(1) 导入200*200大小的位图,将转换为矢量图后建立元件,使矢量图位于元件窗口中坐标
(0,0)的位置; (2) 利用新建法创建放大镜元件,使得绘制的圆形位于元件窗口中坐标(0,0)的位置; (3) 返回场景后,利用库中的元件在“原图”图层坐标(0,0)中放入矢量图的实例;
(4) 在“大图”图层中坐标(0,0)的位置放入2倍大小的矢量图实例(400*400),并利用属性面板命名实例为large;
(5) 在“放大镜”图层中坐标(0,0)的位置放入圆形放大镜实例,并命名实例为m,并对该图层
设置为遮罩层;
(6) 打开动作面板,在“action”图层中添加关键帧的代码： m._x=_xmouse-50; //m._x=_xmouse-(m圆的半径) m._y=_ymouse-50; //m._y=_ymouse-(m圆的半径)
large._x=-_xmouse; //large._x=(1-放大倍数)*_xmouse
89
large._y=-_ymouse; //large._y=(1-放大倍数)*_ymouse
实验70 时针
[操作提示]
(1) 在“钟面”图层中绘制钟的表面,并将其转换为实例;
(2) 分别在“时、分、秒”图层中创建时针、分针、秒针的元件和实例,将旋转中心对齐到钟的中心位置,分别对实例命名为“h、m、s”; (3) 打开动作面板,为钟面实例添加代码： onClipEvent (enterFrame) { t = new Date();
Hours = t.getHours();
if (12 90 目 录 第1章 Flash绘图 ............................................................. 1 1.1 Flash的工作环境 ...................................................... 1 1.2 绘图工具箱和辅助绘图项目 .............................................. 4 1.3 矢量绘图的特点 ........................................................ 5 1.4 绘图工具 .............................................................. 9 1.5 颜色 ................................................................. 16 1.6 文本操作 ............................................................. 19 1.7 位图 ................................................................. 20 第2章 动画基础 .............................................................. 21 2.1 动画中的基本概念 ..................................................... 21 2.2 元件和实例 ........................................................... 25 第3章 动画 .................................................................. 29 3.1 动画的分类 ........................................................... 29 3.2 逐帧动画 ............................................................. 30 3.3 补间动作动画 ......................................................... 31 3.4 运动引导 ............................................................. 35 3.5 补间形状动画 ......................................................... 37 3.6 遮罩 ................................................................. 38 第4章 行为动画 .............................................................. 39 4.1 ActionScript的编程环境 .............................................. 39 4.2 ActionScript编程基础 ................................................ 40 4.3 全局函数 ............................................................. 43 第5章 动画的发布和导出 ...................................................... 44 第6章 实验指导 .............................................................. 47 6.1 矢量绘图 ............................................................. 47 6.2 逐帧动画 ............................................................. 59 6.3 补间动作动画 ......................................................... 62 6.4 运动引导动画 ......................................................... 70 6.5 补间形状动画 ......................................................... 75 6.6 遮罩 ................................................................. 78 6.7 行为动画 ............................................................. 85 因篇幅问题不能全部显示，请点此查看更多更全内容