打造逼真的Flash打火机
网络与通信
编者按：当我拿到这个仅仅30KB的Flash作品时，立即被它逼真的效果所震撼，感觉像在使用真实的打火机那样(各位可以在http://www.wubin.net/cenliang/cl/usr/1/1_61.swf看看效果先)。不得不再次感叹Flash确实是一个极具魅力的东东！限于文章篇幅，在此只能把精简版本的制作方法献给大家，希望对大家有所启迪。
一、效果预览
本例实现的是一次性打火机的仿真效果（图1）。在该效果的制作中用到了很多实用的技巧与方法，如帧的跳转技巧，火焰、火花的制作方法；效果中还用到了一些常用的控制语句，以及如何利用对象来控制影片的运动。
二、设计元件
打开Flash MX。按快捷键“Ctrl+J”，然后把场景设置成450px×280px，背景为黑色，12fps。
1.制作机身
按快捷键“Ctrl+F8”新建一个名为“image”的Graphic符号。然后在“image”的场景里画出一个打火机，或按快捷键“Ctrl+R”，导入一个打火机的素材。
2.制作火焰
按快捷键“Ctrl+F8”新建一个名为“Fire”的Movie Clip符号。在制作之前我们先看一下火焰(Fire)影片剪辑里层的结构（图2）。
根据（图2），我们要新建两个层，接着分别把它们命名为“光圈”层、“外焰”层和“内焰”层。然后在每层的前面空出4帧来，作用是让它在火花闪后出现，以求效果真实。选中第1帧，按快捷键F9打开Actions面板，然后写下影片剪辑停止播放的命令stop();。第16帧的代码是gotoAndPlay(5);。
1)设计内焰。内焰其实就是一片蓝色色块做大小变化的Shape运动。首先，按快捷键“Shift+F9”打开Color Mixer面板，并进行如（图3）所示的设置。
（图3）中显示的是右边滑块的设置，左面滑块为黑色，Alpha值为0%。
点选“内焰”层的第5帧，按F7键插入一个空白帧，然后画上一个形状如左下图的内焰，大小为8px×13.5px，X轴的值为0，Y轴的值为-7。然后用油漆桶工具浇灌颜色，并用颜色转变按钮点选火苗后调节颜色，最终效果如（图4）所示。
接下来，分别选中第9、13、16帧按F6插入关键帧，再点选第5、9、13帧，然后在Properties面板里的Tween下拉菜单中选择Shape命令。接着按快捷键“Ctrl+I”打开Info面板，把第9帧火苗的大小设置为8.5px×25px，X轴的值不变，Y轴的值为-10.5px，把第13帧火苗的大小设置为8.5px×15px，X轴的仍为0px，Y轴的值为-9px。
2)设计外焰。打开Color Mixer面板进行如（图5）所示的设置，设计出的外焰效果见（图6）。
外焰的设计方法同内焰。这里要讲一下的是滑块的设置，第1个滑块：白色，0%，第2个滑块：白色，30%，第3个滑块：黄色(#FFFF99)，100%，第4个滑块：见图5，第5个滑块：白色，80%。这样设计是为了让外焰更有层次感，效果更加逼真。
外焰大小、位置的设置同内焰。只是Info面板里的设置有所不同。第5帧和第16帧的大小一样，为9px×45px，X轴的值为0px，Y轴的值为-20px。把第9帧外焰的大小设置为9px×55px，X轴的值不变，仍为0px，Y轴的值为-20px，把第13帧外焰的大小设置为8px×40px，X轴的值不变，Y轴的值为-20px。
3)设计光圈。打开Color Mixer面板进行如（图7）所示的设置，然后用画圆工具画出一个椭圆来，使其正好覆盖外焰（图8）。
光圈在第5帧和第16帧里的大小一样，为60px×90px，X轴的值为0px，Y轴的值为-25px。同样，我们只要把第9帧里的光圈大小设置为65px×110px，X轴的值不变，仍为0px，Y轴的值为-27px；把第13帧的光圈大小设置为60px×100px，X轴的值不变，Y轴的值为-25px就可以了。
光圈的设计是为了实现火焰周围的热气流动效果，使火焰的跳动更有真实感。
3.制作火花
按“Ctrl+F8”键，新建一个名为“Spark”的Movie Clip符号。Movie Clip符号“Spark”的场景中只有1层4帧，第1帧中火花的大小为1px×1px。也就是说这时的火花可以是任意形状。第1帧中的代码是：stop();。第2帧、第3帧中的火花位置与大小如（图9）所示。图中白色的光标，第4帧为空白帧，帧里的代码是gotoAndStop(1);。
其实，第2帧和第3帧中的火花设置也很简单，是由一些白色和黄色的小线段组成的。所以，我们可以先用线条工具画出一个个小线段，然后用油漆桶工具上色。当然，你也可以用一点青色和红色来点缀一下。
在Flash中，播放1帧需要的时间是0.1秒，那么，这段火星动画只需要0.3秒就播放完了，这样，利用人的视觉停留原理就可以轻松实现火星的迸溅效果了。
4.制作齿轮
按“Ctrl+F8”键，新建一个名为“Gear”的Movie Clip符号。在“Gear”的场景里先画出一个灰色的圆环，然后在圆环上画一些交错的黑白色小线条（图10）0。齿轮的大小为16px×16px。
选中做好的齿轮，按快捷键“Ctrl+G”把它变成组图，接着点选第3帧，按F6键插入一个关键帧。右键单击第1帧，选择“Create Motion Tween”命令。按“Ctrl+T”键打开Transform面板，把第3帧中齿轮的角度改为20度，即向右旋转20度。
最后，点选第3帧，按F9键，然后输入代码stop :。这样，播放一次，齿轮也就在旋转20度后便停止了，不会不停地旋转。
5.制作液气
新建一个名为“Fluid”的Movie Clip符号。点选“Fluid”场景中的第1帧，输入代码stop :。接着点选第5帧，按F7键插入一个空白帧，然后画一个图片。图片的颜色为“#ECFFF3”，Alpha值为20%，图片的大小为36px×70px，形状如（图11）1。
点选这个图片，按快捷键“Ctrl+G”把它变成组图，接着点第200帧，按F6键插入一个关键帧。右键单击第5帧，选择“Create Motion Tween”命令。接着，点选第200帧中的图片，打开Info面板，把图片的大小设置为36px×1px。
点选第201帧，按F9键，然后输入代码：
setProperty"_root.fire", visible, 0 :
//设置Movie Clip符号Fire的visible属性为0，即Fire影片剪辑不可见
gotoAndStop1 :
这段代码的主要作用是为了在液气用完以后，让打火机的火焰可以自动地熄灭。
6.导入声音
红花还需绿叶配，去找一个齿轮和火石摩擦的声音导入到动画中吧！
7.制作按钮
设计这个按钮是为了以后把它拖曳到场景中，再给这个按钮加上一段代码，用它来实现对以上所有影片的控制。这个按钮本身的效果是实现打火机的按钮被按动事件与齿轮转动事件同时发生。下面我们就来看看这个按钮的制作方法。
按“Ctrl+F8”键新建一个名为“Lighter Button”的Button符号。双击Layer 1层，把它改名为“Button”层，然后新建一层并命名为“Gear”层。
在“Graphic符号“image”里把打火机的按钮截取下来，然后粘贴在Button符号“Lighter Button”场景的Up帧里，接着在Down帧里按下F6键插入关键帧，按“Ctrl+T”键打开Transform面板把打火机按钮向右旋转10度，使按钮有被按下的效果。点选Down帧，按快捷键“Ctrl+L”打开库，把刚才导入的声音拖曳到Down帧里。点选Hit帧，用矩形工具画一个矩形(不要边线)。这个矩形正好覆盖打火机的按钮与齿轮。
在库中把Movie Clip符号“Gear”拖曳到“Gear”层的Up帧里，接着点选Down帧，并按F6键插入关键帧，然后点选Up帧场景里的齿轮，按“Ctrl+B”把它打散。Up帧场景里的齿轮影片被打散后就变成了图片，这样，鼠标移到按钮上，齿轮就不会转动了，要等到鼠标在按钮上按下时，Down帧里的“Gear”影片剪辑才会被调用，齿轮才会转动。
三、设计场景
1.建立各层
先如（图12）2所示那样建立各层，层的上下次序不可颠倒，然后把对应的电影剪辑拖曳到层第1帧的场景里。如把影片剪辑“Fire”拖入到“Fire”层中。这样做主要是为了设计方便，因为我们在以上很多影片剪辑的第1帧都用了空白帧，所以当这些影片剪辑被拖到场景中的时候将会是一个白色的小圈，选取和编辑很麻烦，把它们放在各自的层里，那么就可以通过隐藏其他层来选取编辑它。
2.设计Lighter层
Lighter层放置的是打火机的机身，我们要做的就是把原来打火机图片中的按钮和齿轮部分去除。
3.设计Fluid层
把影片剪辑“Fluid”拖曳到该层的场景中后即锁定其他的层。选取这个影片剪辑(场景为白色小圆圈)，然后进行如（图13）3的设置。
这个层的设计有两个要点，一是给影片剪辑“Fluid”起个实体名“fluid”，二是把影片剪辑的Alpha值设为44%，增加其透明度，借以实现液气的透明状态。
4.设计Fire、Spark层
给Fire层和Spark层里的影片剪辑加上实体名fire和spark。至于它们相对打火机机身的位置不用我说大家都应该知道吧。
5.设计Button层
Lighter Button按钮的用处我们前面已经提过。现在我们把这个按钮拖曳到场景中，然后点选它，按F9键打开Actions面板，输入如下代码：
on press {
//当鼠标左键被按下时，执行以下代码
tellTarget "fluid" {
//调用影片实体fluid
gotoAndPlay"5" :
//跳转到影片实体的第5帧，并开始播放
}
tellTarget "spark" {
gotoAndPlay"1" :
}
setProperty"fire", _visible, 1 :
//使火焰影片可见
tellTarget "fire" {
gotoAndPlay"5" :
}
}
onrelease, rollOut {
//当鼠标左键被松开时，执行以下代码
setProperty"fire", _visible, 0 :
//使火焰影片不可见
fluid.stop :
//停止火焰影片的播放
}
OK！到这里，整个设计完工了，欣赏一下吧！
如果需要源代码文件，可以到http://skyleaf.5dmedia.com/lighter.fla下载。