Flash 泡泡文字效果

【 tulaoshi.com - 效果 】

　　本例实现的效果是大小不断变化的文字和泡泡。因为涉及到了大小上的变化，所以在制作过程中，要涉及到影片剪辑的高宽（_x,_y）或缩放比例(_xscale,_yscale)等属性。舞台上将要出现的元件只有文字元件和泡泡元件两大类，因此只需制作两个元件即可。然后，使用动态文本，让一样的文字元件显示不一样的文字。并让各个文字和泡泡以不同的速率自动变化大小。因为每个文字或泡泡的缩放过程除了最终的程度不同和缩放的速率不同，其他的步骤都是一样的，在制作过程中主要使用自定义函数来简化程序代码。最后，在舞台上的每个文字和泡泡的onClipEvent事件中写上相应的程序代码，就完成了所有的制作。发泡文字的最终播放效果如图1所示，要实现这一效果，其操作步骤如下：

　　图1 最终效果

　　一.制作泡泡元件

　　1.新建一个电影，在属性面板中设置其尺寸为550pxX400px,选择一种颜色（本例为#336699）作为背景色。

　　2．选择插入/新建元件菜单命令或直接按Ctrl+F8，打开创建新元件对话框。创建一电影剪辑，并为其命名为 mBuble。 按Shift+F9打开混色器面板，将填充方式改为放射渐变并在下面的渐变色条上加上3个白色的渐变指针。把位于两头的2个渐变指针的Alpha值设为0，混色器面板如图1所示。

　　图2 设定泡泡的填充色

　　3．从工具箱中选取椭圆工具。将边框色设定为无，填充色定为上一步设好的圆形放射渐变后，按着Shift键，在舞台中央画一个正圆，如图3所示。

　　图3 泡泡

　　4．返回到主场景，按F11打开库面板。然后，从中拖几个mBuble到舞台上创建泡泡的多个实例。从工具箱中选取自由变形工具。使用这个工具调整舞台上的泡泡大小。然后，再将泡泡们摆摆好，图4所示：

　　图4 摆好的泡泡

　　二.制作文字元件

　　1．选择插入/新建元件菜单命令，打开创建新元件对话框。创建一电影剪辑并为其命名为mText，从工具箱中选取文本工具，在舞台上拉出一个长条形文本框，并在里面写上X， 图5所示。

　　图5 文本框

　　2．按Ctrl+F3打开属性面板，将文本类型改为动态文本，字体设为Times New Roman，字体大小18，变量名也就是这个动态文本框的名字设为txt，属性面板如图图6所示：

　　图6 设定动态文本

　　3．回到主场景，打开Library（库）面板，然后，需要写几个字，就从库中拖几个影片剪辑mText到舞台上。比如，我们要在舞台上显示Buble，那么就要拖5个mText到舞台上，以分别对应Buble中的5个字母，可以根据需要自由设置。从工具箱中选择任意变形工具。使用这个工具调整舞台上的文字大小。然后，再将文字们摆摆好，效果如图7所示。

　　图7 摆放文字

　　4．下面开始设置具体文字。选中最左边的X，然后选择窗口/动作或直接按F9，打开动作面板。在面板中输入以下ActionScript脚本：

onClipEvent (load){this.txt = "B";//设置要显示的文字}onClipEvent (enterFrame) {_root.Resizing(this, 3);//调用自定义函数}onClipEvent (load) {this.iDirection = 1;//初始化iDirection的值}

　　程序详解：

　　第1行指明了下面花括号中的代码要在影片剪辑的load事件发生时才执行。那么，load事件在什么时候发生呢？回答是当影片剪辑被读入内存，但是还没显示出来之前。第2行代码表示将当前影片剪辑中的txt变量的值设为等号右边的字符（串）。this对象指代的就是当前的影片剪辑，而txt就是我们在前几部中设定的那个动态文本框的名字。所以这第2行的意义对于目前这个影片剪辑来说就是，将当前影片剪辑中的动态文本框txt的值设为字符B。

　　5．参照以上步骤，给另外几个mText元件的实例也添加上面的那段代码。不过，要记得把第2行等号右边的东西改成相应的字符，分另为u、b、l和e。现在可以按Ctrl+Enter，预览一下没有动画时的样子即可看见相应的字母出现。如图8所示：

　　图8 预览动画

　　三.添加程序代码

　　1．将层图层1的名字改为main，并插入一新图层，为其改名为action，如图9所示。选中层action的第1帧，然后按F9打开Action面板，并在面板中输入以下代码。

function Resizing(obj, iStep) {obj._xscale += iStep*obj.iDirection;//设定对象obj在x轴上的缩放比例obj._yscale = obj._xscale;//设定对象obj在y轴上的缩放比例obj.iDirection = (obj._xscaleiStep*85 || obj._xscale45) ？ (obj.iDirection*-1) : obj.iDirection;//设定用来确定缩放状态的变量obj.iDirection}

　　程序详解：

　　第1行使用function关键字，声明了一个名为Resizing的自定义函数。而这个函数就是用以改变文字或泡泡大小的。我们看到，函数名后面跟有两个参数，一个是用来传递目前要进行缩放操作的对象的obj参数,另一个就是用来控制缩放速率的数值形参数iStep。第2行其实就等于obj._xscale = obj._xscale + iStep * obj.iDirection;其意思是，将obj对象_xscale属性的值加上缩放速率iStep和缩放状态obj.iDirection的乘积后，再重新赋值给这个obj对象的_xscale属性。这obj.iDirection的值只有两种，一个是1，另一个是-1，分别表示放大和缩小两种状态（当等于1时，加号后面的值为正，对象开始变大；而当等于-1时，情况刚好相反）。因为我们想让某个文字或泡泡变大到一定程度时，开始变小，而当其小到一定程度时又重新变大。所以，这里才会想到给每个对象obj设置这么一个变量Direction，来确定是否到了该重新变大或变小的时候。第4行就是使obj对象在y轴上的缩放比例设为与x轴上的缩放比例相同（通过把obj对象的_xscale赋值给_yscale属性）。最后来看看第6行，这一行看起来似乎很复杂，其实不然。等号右边用？:操作符书写的代码，事实上是一个简化了的if判断语句。问号前面的内容是判断的条件，中间部分是当判断条件为真时将要返回的值，最后的部分则是当判断条件不成立时将要返回的值。这第6行所实现的功能，说实际并简单点儿，就是根据条件切换对象开始变大还是变小的状态。说得再具体点，就是当obj对象的_xscale属性（也就是x轴上的缩放比例）大于缩放速率iStep的85倍、或小于45的时候，通过给obj.iDirection变量乘上个-1来达到改变iDirection值符号的作用。

　　2．写完了自定义函数，下面该给舞台上的每个文字和泡泡对象添加程序代码了。选中一个文字或泡泡对象，然后在打开的Action面板中输入以下程序代码：

onClipEvent (enterFrame) {_root.Resizing(this, 2);//调用自定义函数}onClipEvent (load) {this.iDirection = 1;//初始化iDirection的值}

　　程序详解：

　　第1行表明了下面花括号中的代码要在影片剪辑的enterFrame事件发生时才执行。前面我们已经看过一个load事件，那现在的这个enterFrame事件又作何解呢？我们知道，Flash影片的放映其实就是一格接一格地播放时间线上的帧，而这个enterFrame事件就发生在某个对象进入某个帧的时候。所以，放在这个enterFrame事件中的程序代码，将会在这一帧的任何其他程序代码之前被执行。这个事件的触发频率与当前影片的播放速率相当。也就是说，如果当前影片的播放速率是每秒12帧，那么在1秒钟之内将发生12次enterFrame事件。接下来看第2行，这一行就是调用上面写的用来对某个对象进行缩放操作的自定义函数。因为，我们把函数Resizing写在了主场景的时间线上，所以这里在函数名前面加了个_root，表示函数是属于主场景里的。函数的两个参数，this和4分别表示要进行缩放的对象和缩放的速率。this指代当前这段代码所在的对象。例如，你选择了最左边的泡泡，那么这里的this就代表这个泡泡对象。

　　3．重复以上步骤，将上面这段代码附加给舞台上的每一个对象。修改enterFrame事件中Resizing函数的第2个用来表示缩放速率的参数，这样才能让每个对象以不同的速度变化大小。例如，我们给一个对象设定代码_root.Resizing(this, 4); ，其速率为4；而给另一个对象设定代码为_root.Resizing(this, 2); 其速率为2。

　　4. 整个效果到此全部完成，保存作品，按Ctrl+Enter预览最终效果，就可以看见漂亮的泡泡文字效果。