Flash实用技巧之地室中的幽灵火焰 -pc6资讯

您的位置：首页 → 网页设计 → Flash → Flash实用技巧之地室中的幽灵火焰

Flash实用技巧之地室中的幽灵火焰 时间：2004/11/7 2:25:00来源：本站整理作者：蓝点我要评论(0)

效果简介：

　　漆黑的地下室里，只有呼吸声，幽幽的火光跳动着——这就是本例的效果。本例是通过地下室的火光效果来给大家讲述Flash中的一些实用方法和技巧：如用AS轻松实现火焰效果；颜色的使用技巧以及光效的实现技巧等。

效果预览：

效果预览图

设计步骤：

　　打开FlashMX。按快捷键Ctrl+J，设置场景为300px×300px，黑色，帧速率30fps。

　　一、设计元件

　　1．制作光球

　　这个光球的作用是以后通过程序的设计来实现火焰效果。它的制作方法如下：

　　? 按快捷键Ctrl+F8新建一个名为“光球”的Graphic符号。

　　? 按快捷键Shift+F9打开Color Mixer面板并如图1所示设置。Color Mixer面板中左边滑块的颜色为黄色（#F8F896），颜色透明值为50%；右边滑块的颜色为白色，颜色透明值为0%。

　　? 用圆形工具在“光球”的场景里拉出一个大小为16px * 16px的圆球来（不要边线），效果如图2所示。你可以选中光球，然后在Properties面板（快捷键Ctrl+F3）设置大小；也可以按快捷键Ctrl+I打开Info面板来设计光球的大小。

　　2．制作灯座

　　为了让读者有个感性的认识，在制作灯座之前我们先来看看灯座的最终效果，如图3所示（为了使大家看得更清楚，故设置此图底色为灰色）。灯座的制作方法如下：

　　? 按快捷键Ctrl+F8新建一个名为“灯座”的Graphic符号。

　　? 先在“灯座”符号的场景中画出一个灯座，接着打开Color Mixer面板并进行如图4所示地设计。其中左边滑块的颜色为棕红色（#933131），颜色透明值为100%；右边滑块的颜色为黑色，颜色透明值也为100%。

图1 设计光球的(渐变)颜色

图2 光球的效果

图3 灯座的效果

　　? 选中油漆桶工具给灯座填充上颜色，然后选中颜色渐变工具对颜色进行一下微调，尽量使光线从中央到两边由明至暗发生渐变，见图5。

图4 设计灯座的颜色

图5 光晕的位置与效果

　　技巧提示：如果你选取一个被打散的物体，在Color Mixer面板里是不会看到颜色设置状况的。但是你只要在该物体被选中时，单击Properties面板里油漆桶工具右边的颜色选取方框，在等颜色选取面板弹出来后按Esc键取消后，你就能在Color Mixer面板里看到该物体颜色的组成了。

　　3．制作光圈动画

　　光圈的设计是使地室中的光线有明暗层次的感觉以及火焰跳动时产生的光的波动效果。光圈动画的制作方法如下：

　　? 按Ctrl+F8键，新建一个名为“光圈”的Movie Clip符号，接着打开ColorMixer面板进行如图6的设置。其中，左边滑块的颜色为棕色（#541501），颜色透明值为100%；第2个滑块的颜色为黑色，颜色透明值为30%；第3个滑块的颜色也是黑色，颜色透明值为0%。

　　? 接着用圆形工具在Graphic符号“光圈”的场景里用画一个圆，圆的大小为350 px * 300 px，在场景中的位置如图7（为了让大家看得清楚，故设置此图底色为白色）。

图6 Color Mixer面板的设置

图7 光圈的设置

图8 “光圈”影片中层与帧的结构

　　? 如图8所示在，选择第5、9帧并按F6键插入关键帧，接着分别点选第1、5帧并在Properties面板（快捷键Ctrl+F3）里的Tween下拉菜单中选择Shape运动模式。

　　? 选中第5帧中的光圈图像，把它放大，方法是：按快捷键Ctrl+T打开Transform面板并进行如图9所示设置。这样做就是为了让火焰跳动时光线的波动显得更真实。不过，你可能还要根据你自己的实际情况来稍微移动一下光圈的位置。

图9 Transform面板的设置

图10 墙的效果

　　4．制作地室的墙

　　给效果加上墙的图像是为了使效果更具有感染力，让人看了会产生有一种冷飕飕的风滑过皮肤的感觉。墙的制作方法如下：

　　? 按Ctrl+F8键，新建一个名为“墙”的Graphic符号。选择直线工具后，如此图标设置Properties面板。

　　? 用直线工具在“墙”的场景里画出一堵墙来，效果如图10所示。制作墙时要用点巧劲，其实也很简单，就是Ctrl+C和Ctrl+V啦。

　　5．制作火焰动画

　　火焰动画是本文效果实现的关键之一。制作这个火焰动画我们可以学到Flash中颜色运用的一个非常实用的技巧。其制作方法如下：

　　? 按快捷键Ctrl+F8新建一个名为“火焰动画”的Movie Clip符号。制作之前我们先看一下“火焰动画”层与帧的组成结构图，如图11所示。图11中的Transform面板为第5帧中光球的设置，即放大1.1倍。

图11 “火焰动画”符号的层与帧结构图

图13 第5帧光圈的变形

　　? 由图11可知，“火焰动画”符号中只有一层，20帧，每隔5帧为一个关键帧。按快捷键Ctrl+L打开库，把库中的Graphic符号“光球”拖拽到“火焰动画”层的第1帧的场景的中心（0 px，0 px）。然后右键单击层的第1帧，选择Create Motion Tween命令，建立渐变运动。现在就建立渐变运动可以减少操作，这以后就不用再做此步骤了，可谓“一劳永逸”啊。

　　? 分别单击第5、10、15、20帧，按快捷键F6插入关键帧。选中第5帧中光圈图像，接着按快捷键Ctrl+F3打开Properties面板并如图12所示设置。“Color”下拉菜单选项中的Tint为颜色的对比度。接着打开Transform面板并把光圈放大到110%，见图11。最后把这个光圈图像向上移动30px。

　　? 选中第10帧，用同上方法把光圈图像的Tint颜色设为红色并放大放大120%，然后把它向上移动80px

　　? 选中第15帧，把光圈图像设为黑色并放大放大200%，然后再把它向上移动120px。

　　? 选中第20帧，把光圈图像设为黑色并放大放大120%，然后再把它向上移动120px。

图12 第5帧光圈颜色的对比度

图14 火焰动画设置效果

图16 给“火焰动画”起个实体名

　　火焰动画的设置效果如图14所示，图片的显示用了洋葱皮命令。

　　二、设计场景

　　1．设计主场景中的层

　　单击按钮，如图15建立各层，层的次序不要变化。图15中显示了库中所有的符号以及各符号在场景中的相对位置。现在，你只要把已经设计好的电影剪辑从库中拖拽到相应的层里就可以了。如把影片剪辑“光圈动画”拖入到“光圈动画”层中。把符号放在各自的层里，然后通过隐藏和锁定它们我们就可以实现便捷、高效地工作了。

图15 主场景中的各层结构

　　技巧提示：如果你发现符号还需要编辑，可以双击元件后进入编辑状态编辑，编辑时锁定其它层或隐藏其它层，这样调整起来就比较省力省时。而且，在编辑状态下调整符号的位置也是很方便的。

　　2．设计火焰动画层

　　把设计好的“火焰动画”影片从库中拖拽到“火焰动画”层中，接着选中“火焰动画”并在Properties面板里给影片起个实体名fire，如图16所示。然后右键点击场景中的“火焰动画”影片，选择Actions命令打开Actions面板，输入如下代码：

// load事件为载入命令，当影片播放时就执行下面的代码

　　onClipEvent(load) {

// 语句的作用是让火焰动画在X轴的方向上左右移动，Math.random()产生随机数

　　_x += Math.random()*10 -5;

// 语句的作用是在Y轴的方向上改变火焰的大小，_yscale就是影片在Y轴的方向上的缩放属性

　　_yscale = Math.random()*60 + 40;

　　}

　　这段代码的作用是让光球左右跳动，并时时改变自身的高度。这段代码和下面的代码结合就会产生火焰效果。

　　3．设计Actions层

　　用新建层按钮新建一个“Actions”层，然后点选层中的第2帧并按F7键插入空白关键帧。按F9键打开Actions面板，在两帧中各输入以下代码。

　　第1帧中的代码如下：

// 变量i控制着影片的深度(层次)

　　i = 1;

//影片最多复制个数的控制变量

　　max = 60;

　　第2帧中的代码如下：

　　if (i <= max) {

// 复制“火焰动画”影片

　　duplicateMovieClip("fire", "fire" add i, i);

　　i++;

　　}

　　第3帧中的代码如下：

// 跳转到第2帧运行

　　gotoAndPlay(2);