Flash视觉效果之魔幻世界

效果简介：

　　视觉效果总是给人一种视觉上的享受。实际上，学习制作视觉效果，是Flash编程入门和提高编程能力较好的方法之一。因为简单的视觉效果只要两个属性，两行代码就可以实现，譬如我设计过的地震效果和老电影效果。本文所要介绍的视觉效果属于提高编程能力的范畴，其设计效果见最后一页。



设计方法：

　　打开Flash，在“属性”面板里设置场景大小为550 px×450 px，黑色背景，帧频为30fps。也可以按快捷键Ctrl+J进行设置。

一、元件的设计

　　1．按快捷键Ctrl+F8新建一个名为“magic”的影片剪辑元件。点选“椭圆”工具（快捷键o），禁用填充色，然后按住Shift键，用鼠标左键在元件“magic”的场景中绘制一个6px×6px的圆形。线条的样式为“虚点线”（一般不建议使用虚线）。如图1所示。注意：此时的场景大小为800%，因为6px的图形很小，放大场景后才容易操作，这是一个需要掌握的操作技巧。

图1

　　在这里，我们只要改变线条的样式以及宽度，那效果就会随之改变，有兴趣的朋友可以在效果完成后试试。你也可以使用其它图形，使效果更加多样性。

图2

　　2．按快捷键Ctrl+F8新建一个名为“clip”的影片剪辑元件。“clip”元件里层与帧的组成结构如图2所示。按快捷键Ctrl+L打开“库”面板，把“库”中的元件“magic”拖拽到“元件”层中。注意，元件要放置在场景的中央。选中场景中的元件，在“属性”面板为其起个实例名“magic”，如图3所示。实例名是为在代码中使用，这和“库”中的元件名没有关系。

图3

　　3．如图2所示，分别点选“程序”层的第1、2、3、7帧，按F7键插入空白关键帧，并按F9键输入代码。第1帧中的代码如下：

if (this.depth>80) {
 // 删除影片实例
 this.removeMovieClip();
 stop();
}

// 产生一个随机颜色
c = new Color(this.magic);
mctransform = new Object();
mctransform.ra = 100;
mctransform.rb = Math.random()*100;
mctransform.ga = 100;
mctransform.gb = Math.random()*100;
mctransform.ba = 100;
mctransform.bb = Math.random()*100;
mctransform.aa = 100;
mctransform.ab = 0;
c.setTransform(mctransform);

[1] [2] [3] 下一页  

第2帧中的代码如下：

// 创建新的实例
// Math.round()是取整
newclip="clip"+String(Math.round(Math.random()*100));
// 附加元件“clip”到场景定的影片中
this.attachMovie("clip",newclip,1);

// 使实例旋转
this[newclip]._rotation=100;

// 确定新实例的位置
this[newclip]._x=0;
this[newclip]._y=30;

// 使实例略微变大，102就是原来的1.02倍大小
this[newclip]._xscale=102;
this[newclip]._yscale=102;
this[newclip].depth = this.depth + 1;

第3帧中的代码如下：

this._rotation += .5;

第7帧中的代码如下：

gotoAndPlay(3);

　　注意：如果我们把第7帧移动到第5帧，或者是第50帧，效果都会发生很大的变化，这是因为影片运行时，时间发生了变化。有兴趣的朋友可以自行测试。

二、场景的设计

　　1．首先打开“库”面板，右键点击元件“clip”，并如图4所示进行设置。这样设置后，就可以在代码中直接调用这个影片剪辑了。

图4

　　2．分别点选场景“图层 1”中的第1、2、3帧按F7键插入空白关键帧，并按F9键打开“动作”面板，输入如下代码：

第1帧中的代码如下：

// 定义影片的中心
var cx=300;
var cy=200;

第2帧中的代码如下：

// 放大整个实例
newclip = "motherclip";
this.attachMovie("clip",newclip,1);

// 确定实例的运动中心
this[newclip]._x = cx;
this[newclip]._y = cy;
this[newclip]._xscale = 200;
this[newclip]._yscale = 200;
this[newclip].depth = 1;

第3帧中的代码如下：

stop();

　　好了，整个效果到这里就完成了。其实，改动视觉效果中的某一个设计环节或某个参数的值，就会产生一个新的效果。所以，学会一个视觉效果的制作方法后，再根据很容易的要再加以改变，就可以做出其它更加眩目的效果来。

　　点击最后一页预览效果

上一页  [1] [2] [3] 下一页  

上一页  [1] [2] [3]