第4章 Flash技巧

每种软件都有它独特的使用技巧,Flash也不例外。Flash是一个功能很多的软件,目前的Flash MX在Action Script方面又有大量改进。但动画制作功能方面,仍然沿用了前面的版本,没有太多的改进。这不能不说是一种遗憾。

Flash动画制作功能没有改进,其各种技巧也仍然沿用着。这些技巧几乎包含了动画制作的所有方面,贯穿动画制作的整个过程。

4.1 线框草稿

与以前使用传统动画工具(铅笔、纸、灯箱和定位钉)进行创作相比,Flash的最大好处就是可以很方便地实时检查动作。

在Flash中完成一个动作,就可以直接看到它的效果(在源文件中或生成的swf文件中)。而在以往的传统动画中,要做到这一点可没这么方便。因为传统动作都是画在一张张彼此分开的纸上的。要想将它们连贯起来,可以将这种简单的铅笔稿拍成胶片环(首尾相接循环放映,便于观看),通过实际放映来检测。

这毕竟是一种麻烦而增加成本的办法。更多的动画家采用翻看手稿的办法。那时,熟练地翻看画本来呈现动作几乎成为动画家必备的一种技能。这种技能被称为“铅笔检测(Pencil Test)”,如图4-1所示。

图4-1 铅笔检测

图4-1中显示了从前向后翻和从后向前翻两种方法。据说,有经验的动画家多采用后一种翻法。

在Flash中,或者说在几乎所有动画软件中,这一切都已成为历史。电脑生成的动画可以很方便地随时观看效果,为修改提供了最大的便利。

而且,软件提供了各种方便,让我们把正在绘制的当前页与前后页进行对照。在Flash中,可以灵活运用Onion Skin来达到这一目的。

正是基于这一点,制作画动的效率更高,制作起来更方便。也正是基于这种方便性,我们可以采取类似“线框草稿”这样的做法。

所谓线框草稿是指在制作某个动画时,如果对动作吃不准,把握不是很大时,可以先用线框(Wireframe)的方式画出很简略的草图,其目的是在时间轴上检查动作的正确性。当对动作感觉满意后,再将线框改成设计好的动作。

下面来看一个简单的例子,皮球精灵如图4-2所示。这个动作的主角是一只皮球精灵,它按照前面讲过的弹性和变形规律在不停地跳。

图4-2 皮球精灵

这里采用26帧的循环,每2帧重复,实际一共画了13帧。观察精灵的动作,应该可以回忆起前面讲到的一些动画原理。

在实际创作中,可以先用线框勾勒出这个动作的草稿。线框草稿如图4-3所示。

图4-3 线框草稿

用一个symbol来代表精灵的身体。需要注意草稿中的顺序号与图4-2中的差别。图4-3中还没有加上中间的延时帧。我们可以看到用很随意的线条刻画出的关键动作。可以将这个symbol拉到scene中检测。

调整好动作后,再回到symbol中,在原有的基础上加一新层,在新层上加上手,如图4-4所示。

图4-4 加上手

注意在图4-4中手随身体的变化而变化的规律,关键是把握其方向性。请对照图4-3来看。

在图4-4的基础上,画上眼睛等,增加脸部细节,如图4-5所示。在symbol中再增加新的层。可以增加任意多的层,对草稿进行必要的修饰。

图4-5 增加脸部细节

以上操作都是用线框草稿完成的,重点在于动作的正确性,描绘本身不一定很严格。线框草稿使用浅蓝色,以便于后面具体描绘。

在完成所有细节后,在symbol的最上面增加一层,以其下面各层的蓝色线框为蓝本,用工整的线条画出精确的形象。这时的工作重点就放在了形象的把握上,因为动作问题已经解决了。精确形象如图4-6所示。

图4-6 精确形象

勾勒出满意的形象之后,就可以将所有线框层删除了。

最后在所有帧之间加一延时帧,形成如图4-2所示的一个symbol。可以再加上一点阴影和速度线增强效果。

应该经常使用类似线框草稿这样的技法。有时甚至就是在Flash里随意地乱画,只是为了追求一种新奇的动作而先不必管造型的细节。用这种方法可以快速制造出一些动作来。如果觉得哪个满意,可以进一步按照上面介绍的方法最终完成它,或者将所有有价值的线框草稿都保留起来,待遇到实际问题时,打开这个“库”看看哪些可以用,再将其细化也不迟。

如图4-7所示是一个简陋的线框草稿。

图4-7 一个简陋的线框草稿

面对这样的草稿,修改是必须的。线框草稿也不一定要使用【铅笔】工具,使用【Brush】会感觉更舒适、更流畅一些。这和个人的习惯有关。

4.2 形象描绘

运用其本身提供的各种工具,Flash可以很方便地创作出形象。但有时候还需要引入(import)其他软件制作的图形。

4.2.1 矢量化图形

我们看看著名的Flash动画家Fernandez给我们总结的方法。

有许多种方法可以让你将手绘的作品引进到Flash中。这里介绍的只是其中一种。运用这种方法,可以将你的美术作品制作成精彩的、字节数很小的影片。

Flash的绘画工具比Photoshop、Illustrator和其他市场上常见的绘图软件更容易使用和掌握。

首先在纸上画好图形,然后通过扫描或video采集等方法,将它们放置在Flash的工作区内。引入的图形不一定是手工绘制的,也可以是一张照片甚至一个电视截屏,只要能够看清楚线条、能够描绘它就可以。如图4-8所示的是扫描手绘作品作为底图。

图4-8 扫描手绘作品作为底图

不必担心文件的大小和质量,按照这种方法,底图只是作为一个参考,当全部工作完成时将被删除。可以运用Transform工具将底图放大到最适合工作的大小,如图4-9所示。

图4-9 放大图形以便于描绘

现在Layer1包含了底图,我们先将它上锁,以免误操作改变了底图,然后在其上面加上新的一层Layer2,在这一层中对底图进行描绘。这时,需要选择一个对比强烈的颜色来描绘,以便很容易地与底图区别开来。这里选择红色,分层如图4-10所示。

图4-10 分层

用直线描绘图形。注意,描绘时尽量少用直线。一般的做法是从一点直接拉直线到另一点,如图4-11所示。

图4-11 用直线描绘

图4-11中的这些直线,可以很容易地将它们拖曳、调整,以适合底图的真实形状。调整直线很容易。选中Arrow工具(黑色箭头),当在一条直线上移动鼠标时,黑色箭头下面呈现一小段弧线,这样就可以拖动鼠标,改变直线的弧度;当鼠标移动到直线的端点时,黑色箭头下面呈现出一个直角,这时拖动鼠标就可以拖动这个点,改变直线的方向和角度。

采用这样的描绘、调整方法,在技术上的最大意义在于不增加结点,在不增加文件字节数的情况下,更好地适应了底图。

用这种方法描绘整个底图,如图4-12所示。如果需要做很细致的、局部的调整,可以用zoom工具放大。

图4-12 描绘整个底图

在描绘的过程中,应该经常开、关Layer1上的visible开关(即屏蔽底图、打开底图)来随时检测Layer2中描绘的效果,如图4-13所示。

图4-13 随时检查描绘效果

描绘完毕后,将底图所在的Layer1删除。完成的图形如图4-14所示。

图4-14 完成的图形

此时可以改变线条的颜色,一般改成黑色,还可以为图形上颜色。这个图形可以作为下一步Flash动画的基础。最终完成的图形如图4-15所示。

图4-15 最终完成的图形

4.2.2 Todd Gallina的系列片“Cooking with Bigfoot”

Todd Gallina是系列片“Cooking with Bigfoot”的动画制作者。迄今为止,这一系列已经超过了15集,每集的容量在1~1.5兆字节之间。现在让我们看看Gallina这一成功的Flash系列片在最开始时是如何启动的。

第1步,在纸上进行素描,构思Bigfoot(大脚怪)的形象。这时,在画家笔下会出现许多样子,第1步的创作形象如图4-16所示。

图4-16 第1步的创作形象

经过筛选、合并和组合等手段,形象逐渐定为图4-16中7的样子。重新将其定稿,画成一个完整的素描。定稿的形象如图4-17所示。

图4-17 定稿的形象

将这一形象扫描成jpeg图形,引入到Flash中。引入jpeg作为底图后,在其上面增加一层,如图4-18所示。

图4-18 增加一层

第2步,在新的一层上用Brush工具(带压感)描绘底图,如图4-19所示。

图4-19 描绘底图

Flash提供4种描绘工具,如图4-20所示。

图4-20 4种工具

其中

● Brush:模拟刷子。

● Brush with pressure:在有压感笔的条件下,更好地模拟刷子。

● Pencil:画粗细一致的线条。

● Pen:画贝济埃曲线。

可以根据需要和个人的不同习惯,用不同的工具描绘底图。

如图4-21 所示为使用不同工具描绘出的不同效果。其中,左侧是用压感Brush工具,右侧用Pencil工具(最外侧的轮廓线),线宽定为4。

图4-21 用不同工具描绘出的不同效果

在实际工作中,几种工具结合起来使用最常见。

第3步,为Bigfoot上颜色。在Web-256安全色中,选择一种最适合Bigfoot的颜色,如图4-22所示。

图4-22 上颜色

一旦选择好颜色后,用Paint Bucket和Brush两种工具上颜色,如图4-23所示。

图4-23 上颜色的工具

第4步,将上好颜色的Bigfoot分解。截下的身体部分转换成一个个单独的symbol,如图4-24所示。

图4-24 分解

图4-24只是一个示意图,为了让大家看清楚。实际上每个部位还都在原位置。

请注意,这里为Bigfoot增加了一条围巾。这条围巾不是个可有可无的道具,它对动作起着关键作用。后面还将继续讨论。

将截下的身体部分分配到各自的层里面去,如图4-25所示。

图4-25 分配到层

可以使用Flash MX中新增加的层文件夹使层的管理更方便,如图4-26所示。

图4-26 层文件夹的使用

在library(制作时的库)中,制作身体各个部位的symbol,每一种symbol代表一种姿势。当制作动作时,直接用一个symbol代替另一个。胳膊库如图4-27所示。

图4-27 胳膊库

图4-28中,用相同的方法制作嘴库,如图4-28所示。画好各种嘴型,起好名字,用于Bigfoot的说话。

图4-28 嘴库

为了使动作更生动,在Bigfoot嘴动的同时,使他的头也做相应的微小移动,如图4-29所示。

图4-29 头部移动

如果仔细将图4-29与图4-28比较可以发现,它的头部向前面稍稍突出了一点。

注意:这里应该可以体会,为什么给Bigfoot加上了一条围巾。这是一个很古老、却很行之有效的动画技巧,使得头动时身体可以保持独立(不动)。

此时Bigfoot的形象就做好了。按照同样的方法,再制作出片中其他的角色,如图4-30所示。

图4-30 一个另外的角色

现在,将各种角色安排到场景中。在做各种动作之前,先引入声音文件,如图4-31所示。

图4-31 引入声音

在时间轴上的声音文件可以使我们更容易安排角色的说话和动作。如图4-32所示是一个完整的对话场景。

图4-32 一个完整的对话场景

按照这种制作方法,可以很容易地在新的一集中增加新的角色,增加各种新的“身体库”。随着制作进程,这个库将一直增长、壮大,甚至越往后制作越简单,如图4-33所示。

图4-33 增加新角色并不是很困难的事

通过以上的描述,我们可以对国外如何高效、经济地制作Flash系列剧有个大概的了解。

4.3 形体分割

在Bigfoot的制作流程中提到了形体分割的方法,即先做好一个形象,再将这个形象按照身体的各个部位分割下来,做成一个个单独的symbol。在Flash制作中,这是一个普遍采用的技巧。这一节专门讨论这种技巧。

当然,这种组织造型的方法也有限制,它的形象只能在一个角度(方向)上做动作,与传统美术片中的“剪纸片”类似。因此,Flash动画家Fernandez将它称为“一维造型(1D Model)”也是有道理的。

采用形体分割方法之前最重要的一点是事先设计好动作。在画角色的时候要特别为这些未来的动作提供方便。角色如图4-34所示。

图4-34 角色

事先就决定好这个角色的动作:从画面的一侧走向另一侧。在画的过程中要时刻想到这一点,因此,他的头主要朝向侧面,他的身体由“可拆卸”的组件构成。但图中的角色不能提供完全的四肢信息,因而在画的时候应该采用一种“兼顾”的方法。

这种方法叫“让角色摆出一个概括性高的Pose”,如图4-35所示。他的左右手、左右脚都是不一样的。左右手的不同是为了互相区分开,右脚脚尖接触地面是考虑到了在做类似走路这样的动作时,脚应该具有的形态,左脚则是一种平常的状态。

图4-35 让角色摆出一个概括性高的Pose

因此,这样一个静态的造型基本具备了我们需要的所有身体部件的不同形态。这样的造型才适合下一步的“分割”。

将形体分割成一块块并不是一件很难的事情。仔细研究一下这个形体,考虑动作的幅度,研究一下哪些部位是活动的,哪些是不活动的,连接点在哪里。

将原始造型保留,复制一个原始造型,用复制的造型进行分割,原始造型作为未来修整的参考,如图4-36所示。

图4-36 用复制的造型分割

图4-36是按照矩形截取的,因此不可避免地留下不需要的部分和缺少的部分(比如身体的上半部分),根据原始造型进行修补。最终分割的结果如图4-37所示。

图4-37 最终分割的结果

注意,在图4-37 中有些省略的地方,这些地方主要是看不出左右的部分就用一个代替了。像胳膊和腿。但请注意,胳膊和腿都被分成了上下两个部分,其关节部分有一个原则:凡是上面压住下面的,比如,小腿在关节部分压住大腿,那么小腿关节处圆形部分的轮廓线就被处理掉了,同样,前臂关节处的轮廓线也被抹掉了。

下面将所有分割下来的部位都转化成symbol。转化时,根据部位给它们起好相应的名字,如图4-38所示。

图4-38 转化成symbol

现在可以用这些组件来构成角色,摆动作了。

记住Flash的特性,试着改变instance的属性来产生不同的效果。这些都不增加文件的容量,却可以创作出千变万化的效果。

看看你能不能做出各种动作来?分割组合的动作如图4-39所示。

图4-39 分割组合的动作

4.4 第四种symbol

Flash的中心思想是symbol的概念,甚至可以这样说,Flash就是在用symbol来构成动画。使用symbol的好处是能大大减少文件容量,修改起来十分方便。

symbol一旦被放置在场景中,就被称为一个instance,可以通过改变instance的属性来达到各种效果。symbol被引用为各式各样的instance,几乎不消耗任何字节资源。

而当我们对library中的原始symbol进行修改时,其在场景中其他symbol中的各个instance也随之自动改变。

这是Flash动画最特殊、最方便的地方。

在为作品上颜色时,时常会碰到这样的问题:一种颜色已经被许多地方使用,当我们对这个颜色不满意想用另外一种颜色代替它时,修改起来就很麻烦,只好一点点地将新选中的颜色填充到原来颜色的区域中去代替。

现在假设,如果有一种颜色symbol,我们用它填充许多地方之后想改变一下时,只需要修改这个symbol,则所有用它填充的部分都自动改变了,这会方便很多。

实际上,我们完全可以自己制作出这样的symbol。Flash提供了三种类型的symbol:Movie Clip、Button和Graphic。现在,我们为它新增加一种Color类型。

请看下面的例子。如图4-40所示是一个外星人。在Flash中用Brush工具绘制,现在想给它上颜色。

图4-40 外星人

先选择一种颜色作为衣服的颜色。这里选择99cccc(Hex值的颜色)的蓝绿色,如图4-41所示。

图4-41 选择衣服的颜色

再选择一种皮肤的颜色。这时,需要打开其他任意一种绘图软件。这里选择Fireworks 3.0。在Fireworks 3.0中,新建一个10×10的小文件,如图4-42所示。

图4-42 新建一个10×10的小文件

然后,任意选择一种颜色作为皮肤的颜色,这里选择#cccc66的黄绿色。用它来填充小方块,如图4-43所示。

图4-43 填充颜色

将这个文件另存为png类型,命名为“aa.png”,如图4-44所示。

图4-44 保存文件

这时注意,不要将这个文件关闭。返回Flash,依次选择File/import命令,引入刚才的aa.png文件,如图4-45所示。

图4-45 引入png文件

这时,在画面的左上角会出现aa.png的小方块。选中它,然后删除。

打开Color Mixer面板,在中间的下拉菜单中选择Bitmap选项,我们会发现,png的颜色已经在这里了。选择不同的颜色模式,如图4-46所示。

图4-46 选择不同的颜色模式

现在就用它来填充外星人的皮肤,皮肤颜色如图4-47所示。

图4-47 皮肤颜色

现在假设我们对这个颜色不满意,可以打开library,右键单击aa.png,选择“Edit with Fireworks”选项,改变symbol如图4-48所示。

图4-48 改变symbol

这时,自动切换到Fireworks,选择一种新的蓝色#99ffff,填充小方块,改变颜色如图4-49所示。

图4-49 改变颜色

此时打开File菜单,发现Save变成了Update,选择Update,如图4-50所示。

图4-50 选择Update

现在切换回Flash,颜色已经自动改变了,如图4-51所示。

图4-51 颜色自动改变了

这里可以把aa.png看成第四种symbol,同样起symbol的作用,只不过修改它需借助外部工具(Fireworks)而已。

4.5 位图的使用

Flash作为一个矢量动画软件,使用中也不排除位图的引入。最常见的是在影片中当做背景。一般概念中,矢量图形具有文件容量小的优点,但实际上,有些情况下使用位图比画同样复杂程度的矢量图形更“节省资源”。一般在图比较复杂的情况下,直接引入位图比使用描绘的矢量图播放速度更快。

4.5.1 光晕的表现方法

光晕用Flash本身不容易做出来,一般采用位图方法,如图4-52所示的片头。这是一个网站的片头,其中有一个明显的模糊效果在背景上移动,这个效果大大增加了速度感和视觉冲击力。

图4-52 片头

用其他软件进行分析,可以从影片中提取出如图4-53所示的纯位图符号。

图4-53 纯位图符号

可以清楚地看到,这是通过类似Photoshop中【高斯模糊】滤境达到的效果。引入此位图,转变成symbol,在影片中可以方便地调用。

具体制作过程参见4.5.2节。

4.5.2 焦距的变化

在一些影片中我们常常看到焦距变化。在一个景深比较大的镜头里,焦距时而对准比较靠近的一个物体,时而对准另一个比较远的物体。

在Flash中能否做出类似的效果呢?焦距变化1如图4-54所示。图中表现的是一个人和外星人对话的镜头。在这个镜头中焦距对准外星人,人变得模糊了。

图4-54 焦距变化1

焦距变化2如图4-55所示。图中焦距对准了人,外星人变得模糊了。

图4-55 焦距变化2

下面详细叙述这个效果的制作过程。

首先,在Flash中建立一个新文件。做一个抽象的背景,如图4-56所示。

图4-56 背景

然后,分别加上两层,在两层中分别绘制人和外星人的形象,如图4-57所示。

图4-57 增加两层分别绘制角色

分别将两层中的形象转化成两个symbol,如图4-58所示。

图4-58 将形象转化成symbol

这里,它们分别被命名为“alien”和“man”。增加一个场景,在这个场景中引入alien,如图4-59所示。

图4-59 在新增场景中引入alien

然后,依次选择File/Export Image,输出一个bmp文件。输出时选择Minimum Image Area,如图4-60所示。

图4-60 输出bmp

现在打开Photoshop刚刚生成的bmp文件。用Magic Wand选中所有alien的范围,如图4-61所示。

图4-61 选中alien

复制选中的区域,然后粘贴到Windows的剪贴板上。

打开一个新文件,注意将区域设置得比默认值稍微大一点。默认的大小是根据剪贴板上的图形来确定的。下一步要做模糊处理,做完后的图会比原始图稍微大一点。背景设置为透明,如图4-62所示。

图4-62 新建文件背景为透明

将剪贴板中的图形粘贴到新文件中。在菜单中选择滤镜中的高斯模糊(Filter/Blur/Gaussian Blur)对图形进行处理,如图4-63所示。高斯模糊的半径可以设置为2.5。

图4-63 应用模糊滤镜

现在,选择Magic Wand工具,选择透明部分,再将选区做Inverse(反选),将模糊后的图形选择好。Tolerance的值可以设置成30。选择模糊后的图形如图4-64所示。

图4-64 选择模糊后的图形

注意,这时必须将选区保存。将整个图形保存成一个png文件。

回到Flash,引入这个png文件。这样就可以看到模仿模糊的效果。

引入的png文件在亮度上会有变化。将引入的png转换成一个symbol,命名为“alien_b”。在引用它时,调整它的instance属性的brightness值,大致为30%左右,如图4-65所示。

图4-65 调整引用属性值

用同样的办法处理人的图形,也做成一个模糊效果的symbol在场景中引用。

这样就很容易完成图4-54和图4-55中的效果。当人说话时,焦点对准人,外星人模糊;外星人说话时则相反。

4.6 Flash减肥

虽然宽带正迅速普及,但考虑到网络的平均水平,在制作Flash影片时,还是应该注意把文件字节数做得尽量小。此外,简洁也是技术上的要求,使用symbol可以使文件容量有效地减小,而且修改起来也方便。

影片减肥可以从两个方面着手:一方面,对于绘制好的图形,应最大限度地减少结点数;另一方面,尽量使用symbol,symbol的思想应该贯穿一个Flash动画师创作活动的始终。

4.6.1 减少结点

矢量图形的特点是通过结点来控制形状。这些结点越多,文件就越大。试着用带压感的Brush工具来随便画一个形状,如图4-66所示。

图4-66 随意画的一个形状

按【Ctrl+Enter】组合键生成一个swf类型的文件,记住它有多大。

选择整个形状,将其复制到剪贴板。增加一个场景,在新的场景中粘贴整个形状。

选择Subselection工具(白箭头),单击这个形状的边缘出现一些结点,如图4-67所示。

图4-67 出现一些结点

在图4-67 中,形状的边缘出现一些带颜色的小方点,这些就是控制形状的结点。选中一个结点,拖动这个点的两个控制柄,可以改变形状,如图4-68所示。

图4-68 通过调整结点的柄来改变形状

现在按【Ctrl+Z】组合键恢复原来的形状。随便选择一个结点,按【Del】键就可以将它删除。在不损害基本形状的情况下,尽量多删除几个结点。在形状的尾部,冗余结点尤其多。最后可以将整个形状的结点减少到5个。

图4-69 将结点减少到最少

如果对形状不满意,可以通过Arrow工具(黑箭头)仔细调整各个结点之间的弧线。最后可以形成如图4-70所示的形状。

图4-70 调整好的形状

图4-70的形状和图4-66的形状比较,可以发现没有太多的改变。

此时再按【Ctrl+Enter】组合键生成另一个swf。这个是经过减肥后生成的swf,把它和刚才那个swf进行比较会发现,它减少了30多字节。

不要小看这30多字节,在一个复杂作品中,如果对每个形状都能采取这样的步骤精心“减肥”,最后形成的文件必将十分简洁。

使用【Modify/Curves/Optimize】命令可以自动减少结点数。

4.6.2 symbol的使用

symbol不但可以直接放置在场景中,也可以被其他symbol引用,symbol套用也是经常用到的技巧。看下面两个例子。

1.领带的例子

这个例子中要表现三个穿着都一样的人,只是领带的颜色不一样。

首先画一个人的身体,如图4-71所示。

图4-71 人的身体

为了看清楚,选择比较深的颜色作为底色。将它上好颜色,留下领带部分不上颜色。将这个身体转换成一个symbol,命名为“body_00”。

下面用它来做出三个系着不同颜色领带的人。

按【Ctrl+F8】组合键,新建立一个symbol,命名为“body_01-1”。进入body_01-1的编辑界面,这是一个空的symbol。将body_00拽入,在info面板上调整它的位置,使中心定位在(0,0)点上,如图4-72所示。

图4-72 定位

然后增加一层,将新的一层调整到body_01-1层的下面。在新一层中的领带位置用任意颜色画一个方块,起到填充领带颜色的作用,如图4-73所示。

图4-73 填充领带颜色

在图4-73中,为了看清楚画面,body_01-1所在的Layer 1采用Outlines方式显示。这个领带的颜色是蓝色的,实际效果如图4-74所示。

图4-74 实际效果

在library中,右键单击body_01-1,选择【Duplicate】命令,复制一个symbol,命名为“body_01-2”。

打开body_01-2,在下面一层中把方块的颜色改为黄色,如图4-75所示。

图4-75 改变方块的颜色

这样,就做好了另一个人的身体。依次类推,再复制一个“body_01-3”,改变方块的颜色为紫红色。这样就做好了3个形象。

最后再加上头的symbol,最终效果如图4-76所示。

图4-76 最终效果

这个例子完全采用了symbol套用的方法。

2.四色小人的例子

这个例子和领带的几乎相同,但symbol更讲究套用。

有这样一个动画:4个小人走路,姿势完全一样,只是颜色不同,如图4-77所示。

图4-77 四色小人

先建立一个17帧的symbol,命名为“walk_01”,属性为Movie Clip。17帧全部为keyframe,逐帧画出走路的形态,如图4-78所示。

图4-78 走路的形态

有人会很自然地选择这样的步骤:打开library,选择“walk_01”,右键单击选【Duplicate】命令,命名为“walk_02”,在“walk_02”中,单击洋葱皮功能中的【Edit Multuple Frames】按钮,然后选择所有帧,改变颜色,如图4-79所示。

图4-79 改变颜色

按照这种做法,再做出不同颜色的“walk_03”和“walk_04”两个symbol。

这是一种很自然的想法,操作起来也很容易,但我们如果从“减肥”的角度去考察会发现一些问题。很明显,这里面有重复的内容,按照“凡是重复出现的内容就把它做成symbol”的原则应该用symbol来解决问题。但这里没有用到symbol。

再来看效果。把这样形成的4个symbol引入场景,形成swf的大小是10字节。

下面用symbol的思路制作这个动画。新建一个Flash文件,首先建立一个Movie Clip属性的symbol,同样是17帧,全部设置为keyframe,逐帧画出小人走路的形态。小人的轮廓是用线宽1的【铅笔】工具画出的。现在选择【箭头】工具(Arrow Tool),选中第1帧中所有的线条,右键单击,然后选【Cut】命令。增加一层,新的一层也全部设为keyframe。在新的一层的第1帧中右键单击,选择【Paste in Place】命令。这样就把第1帧的颜色和线条分离了。用同样的方法,把所有17帧都做同样的处理,如图4-80所示。

图4-80 颜色和线条分离

然后在时间线上选择所有【线条】帧,右键单击,选择【Copy】命令。新建一个symbol,命名为“line”,右键单击选择【Paste in Place】命令,将17帧线条做成一个单独的symbol。用同样的方法,将17帧填充的颜色做成一个单独的symbol,命名为“color”。

返回到“walk_01”,清除掉原来的所有keyframe,将color引入下面一层,位置为x=0,y=0,将“line”引入上面一层,位置x=0,y=0,组合出symbol,如图4-81所示。

图4-81 组合出symbol

这样形成的symbol和刚才制作的画面从表面上来看没有什么区别,但它是用另外两个symbol组合出来的。

下面的操作将体现出这种做法的特点。在library中选中“walk_01”,右键单击,选择【Duplicate】命令,命名为“walk_02”。打开此文件,选中位于下层的【Color】的instance,通过属性面板改变它的【Color】参数,随便选一种颜色,Tint=100%。这样也达到了改变颜色、做出另一个symbol的目的,属性面板如图4-82所示。

图4-82 属性面板

用同样的方法另外做出不同颜色的“walk_03”和“walk_04”两个symbol。

把这样形成的4个symbol引入场景。

现在来检验swf的效果。生成swf类型的文件,它的大小是8字节。比第1种方法小了2字节。

也许你会说,有什么了不起,只小了2字节,实际上并不只是节约2字节的问题。我们继续做试验,如果按照第1种做法,复制出8个不同颜色的symbol,最终形成的swf为16字节,而用第2种方法复制出8个不同颜色的symbol,最终形成的swf依然是8字节!

对symbol调用instance是Flash的精髓,它几乎不占字节数。不管你是在场景中调用还是在另一个symbol中调用。

4.6.3 一般原则

这里列出的是制作一般Flash的原则。有些是针对源文件减肥的策略。

(1)Flash影片减肥的第一要素是尽量使用symbol。

(2)尽可能少使用一些特殊的线条类型,比如虚线、点画线等。实线较之上述特殊线条类型占用资源更少。而用铅笔绘制的线条比用刷子绘制的线条又要占用较少的资源。

(3)最好将动画中不动与变动的元素制作到不同的图层上。

(4)使用“Modify/Curves/Optimize”命令可以最大程度地减少用于描述图形轮廓的单个线条的数目。

(5)限制字体和字体样式的使用。在Flash中最好不要使用多种中文字体。

(6)尽可能多地将声音压缩,设置为MP3格式,因为在相同的质量下,MP3占用的空间更少。

(7)嵌入字体(embedded fonts)会增加文件的尺寸,能少用尽量少用。

(8)尽量避免对位图进行动画处理,而将其作为背景或者静态元素。

(9)限制每个关键帧中的变化区域,令动作的发生区域尽可能小。

(10)尽量将元素或组件群组化(Group)。

(11)利用instance属性的颜色特效菜单对单一符号制作出多个不同颜色的实体,然后加以应用。

(12)使用渐变色要慎重。使用渐变色填色大约需要50个字节,比用单色填充的文件量要大许多。

(13)最后别忘了把做好的Flash动画在不同性能的计算机上、不同操作系统的计算机上多测试几次。

4.7 习题

请用线框草稿的方法,用最快的速度完成下列两个动作:

(1)一个人跑步被一块石头绊倒;

(2)爬起来后天上掉下大石头将其砸扁。

可以参考下面的图来做。请务必注意动作要符合动画原理!

(3)引入一张你喜爱的照片做底图,任意选择工具进行描绘,不必用它来做什么动画,只是体会一下矢量化的方法。

(4)用制作Bigfoot的方法自己制作一小段影片,可以是很简单的两个角色的对话。但在最简单的场景中尽量使对话的动作丰富多彩一些。

(5)在4.3 节的讲解中,并没有实现开始时要做的“从画面的一侧走向另一侧”。现在,请读者实际来操作一下,看看怎样把这个动作做好。

(6)4.6.2节中的两个例子看起来很相似,但其最大的区别在哪里?请总结。