FlashCS6中文版标准实例教程：9组件概述

2023-10-30 理论教育版权反馈

【摘要】：Flash CS6中的组件是对Smart影片剪辑的扩展，它的功能更强大。组件的使用方法很简单。效果如图9-1所示。图9-1 滑动条组件控制正方形旋转和透明度新建一个ActionScript2.0Flash文档。这个函数写在comslider的第1帧，定义如下：由于要创建的组件需要某些可以让用户选择的参数，所以把第1帧对min，max和percent的赋值去掉，取而代之，在“组件定义”对话框中把它们设置成组件的参数。选择comslider，单击右键，在弹出的快捷菜单中选择“组件定义”命令。

Flash 5中有一个Smart影片剪辑，它允许对影片剪辑定义参数。Flash CS6中的组件是对Smart影片剪辑的扩展，它的功能更强大。它不仅允许在影片剪辑的基础上定义参数，把一个影片剪辑变成组件，更提供了一个系统组件库供使用。

用户可以对组件的每一个实例指定不同的参数值，根据参数值的不同，组件的实例性质也不同。这些可以指定的参数用来描述某些自定义的属性，就像影片剪辑的预定义属性一样，可以在“参数”面板中对它们进行修改。

使用组件时，使用者不必知道某个影片剪辑到底是如何实现的，只需要通过“参数”面板对一个组件实例的参数进行初始化。可以这么说，组件的使用提高了影片剪辑的通用性。

组件的使用方法很简单。选择“窗口”/“组件”命令打开组件库面板，从“库”面板拖一个组件的实例到舞台上，然后在参数面板中设置参数的参数值。下面以一个简单实例演示组件的使用方法。

滑动条组件实例：

本实例使用两个滑动条组件来控制一个正方形影片剪辑的旋转和透明度。上方的滑动条控制正方形的透明度，滑动条里显示50，表示当前正方形的Alpha值是50，向右拖动这个滑动条，正方形Alpha值增加，直到100，这时候滑动条也不能再往右边拖动了。同样滑动条往左拖也有一个界限，代表正方形的Alpha值为0。下面的滑动条控制正方形的旋转角度，滑动条上的文本框计数值从0～100，对应正方形的角度从0～360。效果如图9-1所示。

图9-1 滑动条组件控制正方形旋转和透明度

新建一个ActionScript2.0Flash文档。按Ctrl＋F8键创建一个名为button的按钮元件。

在元件编辑模式下，选择绘图工具栏的矩形工具，在属性面板上设置无笔触颜色，填充颜色任意，因为稍后要使用“颜色”面板来设置填充色。

在属性面板中设置矩形边角半径为45，这样画出来的矩形就都是圆角的。

在button的“弹起”帧绘制一个圆角矩形。

单击矩形内部填充，打开“颜色”面板。使用线性渐变调制一个渐变色，作为矩形的填充色,如图9-2所示。

图9-2 在button中画一个圆角矩形

返回主场景。按Ctrl＋F8键创建一个影片剪辑，名为simpleslider。在元件编辑模式下，在库面板中把button实例拖到simpleslider的舞台上。

之所以在影片剪辑里嵌套一个按钮，是为了响应鼠标消息。单纯的影片剪辑是没有办法响应鼠标消息的。

选中舞台上的按钮，打开“动作”面板，添加下面的代码：

drag是一个标志，drag为1表示当前的鼠标处于按下的状态。

返回主场景。在库面板中拖入一个simpleslider实例到舞台上，选择绘图工具栏的文本工具，在属性面板的文本引擎下拉列表中选择“传统文本”，在文本类型下拉列表中选择“动态文本”，字体为宋体，字号为12，颜色为紫色，并选中“在文本周围显示边框”按钮，然后绘制一个文本框，如图9-3所示。

在属性面板上设置文本框的变量为percent，其余的属性按照图9-4进行设置。

选中舞台上的simpleslider实例，打开“动作”面板，添加下面的代码：

现在可以测试一下影片了。但是它还有些问题，滑动条移动的时候不连贯。下面就对它进行改进，让它的移动变得平滑。

修改上一步添加的代码，在_x=_root._xmouse;这一行后面加入下面这行：

这样将对每一个鼠标移动事件都进行响应，看起来比较平滑。如果不加这一句，当cpu比较繁忙的时候，它会把好几个鼠标移动事件放在一起响应。

滑动条总是有一个范围的，接下来的步骤设置滑动条的范围。

图9-3 添加文本框

图9-4 文本框属性

选中舞台上的simpleslider实例，然后打开“动作”面板，添加另一部分代码：

修改鼠标移动的代码，把鼠标限制在限定的范围之内。将OnClipEvent(mouseMove)处理函数修改成下面的代码：

还没有为simpleslider里的动态文本框percent赋值，现在来做这件事情。有了最小和最大的范围，再加上当前的鼠标坐标，比例percent很好算，就是：

把上行代码添加到OnClipEvent(mouseMove)处理函数里的updateAfterEvent();这行前面。

现在再测试一下影片，比刚才的要好多了。不过还有改进的地方。不直接把滑动条移到鼠标所在的地方，而是逐步地移动，换句话说，先得到当前滑动条和当前鼠标的坐标差，然后再对当前滑动条做坐标的修正。(www.chuimin.cn)

在库面板中双击元件simpleslider打开元件编辑窗口，选中编辑窗口中的实例，打开“动作”面板，在drag=1;前面加上一句：

退出simpleslider的元件编辑窗口，将第步中的代码_x=_root._xmouse;改成_x=_root._xmouse+Xoffset;

当这个影片刚刚加载进来的时候，文本框里显示的并不是当前滑动条所在位置的比例，所以需要手动来设置。把_root.percent=Math.floor((_x-min)/(max-min)*100);放在onClipEvent(load)的最后一行。

现在再测试一下影片，按下鼠标拖动滑动条，文本框里的数字跟着改变。

选中舞台上的所有对象，选择“修改”/“转换为元件”命令，将舞台上的对象转换为名为comslider的影片剪辑。进入comslider元件编辑窗口，注意一些代码的改动。把第步处理鼠标移动事件的代码写成了一个函数，moveSlider()，这个函数保持滑动条跟踪鼠标并设置文本框相应的值。这些语句和前面所写的是完全一样的，只不过现在包装在一个函数里。这个函数写在comslider的第1帧，定义如下：