第二节 组件(2)

2．用动作脚本控制组件

用Action对组件进一步编程控制的方法主要有两种：使用on（）处理函数、使用一个调度程序/侦听器事件模型。前一种方法是Flash传统的编程思路，很容易理解和掌握，适合初学者使用。后一种方法是Flash提倡使用的编程思路，这种方法更符合面向对象的编程特性，程序更安全，功能更强大。

Flash MX 2004提供的UI组件大部分都具有click事件，下面就以复选框组件（CheckBox）为例，讨论一下利用click事件进一步编程控制复选框组件实例的两种方法。

（1）创建复选框组件实例

打开【组件】面板，将其中的复选框组件（CheckBox）拖放一个到场景上，保持这个实例处于被选中状态，在【属性】面板中，定义该实例的名称为“复选框实例1”。

（2）设置复选框实例参数

在【属性】面板中，单击【参数】按钮。更改【Label】参数为“复选框”，其他参数默认，【属性】面板如图8-3-7所示。

图8-3-7 设置复选框实例属性和参数

（3）使用on（）处理函数编程

对于复选框组件的click事件，使用on（）处理函数编程控制的一般形式为：

on(click){

    ...

}

这里必须提醒你注意的是，这段代码必须直接附加到一个CheckBox组件实例上。因此，我们选择前面创建的复选框实例，然后在【动作】面板中输入如下的程序代码：

on(click){

 track("复选框组件实例被单击了一下");

}

现在我们测试一下影片，在测试窗口中单击复选框，则马上弹出一个【输出】面板，如图8-3-8所示。

图8-3-8 运行结果

（4）使用一个调度程序/侦听器事件模型编程

如果不用on（）函数，而用第二种方法，编程的一般形式为：

listenerObject = new Object();//先定义一个侦听器对象

listenerObject.click = function(eventObject){ //为侦听器对象上的 click 事件定义一个函数

    ...//函数内部可以通过eventObject对象的各种属性和方法来响应click事件

}

Instance.addEventListener("click", listenerObject)// 将侦听器对象注册到实例。当该实例调度该事件时，就会调用该侦听器对象。

用第二种方法实现前面第（3）步同样的结果，具体方法是（以下操作紧接着第（2）步进行）：

选择时间轴第1帧，在【动作】面板中定义如下的程序代码：

form=new Object();//定义一个名字为form的侦听器对象

form.click=function(){//为侦听器对象定义一个函数

    trace("复选框组件实例被单击了一下");

}

复选框实例1.addEventListener("click",form);// 将侦听器对象form注册到复选框实例1。当复选框实例1被单击时，就会调用侦听器对象form。

3．UI组件详解

Flash MX 2004包括14个UI组件，下面将分别讨论这些组件的功能以及这些组件常用的参数。

（1）按钮（Button）组件

按钮是任何表单或Web应用程序的一个基础部分。每当你需要让用户启动一个事件时，都可以使用按钮。例如，大多数表单都有“提交”按钮，你也可以给演示文稿添加“前一个”和“后一个”按钮。

Button组件是一个可调整大小的矩形用户界面按钮。可以给按钮添加一个自定义图标（这个由参数中的icon确定的）。也可以将按钮的行为从按下改为切换。在单击切换按钮后，它将保持按下状态，直到再次单击时才会返回到弹起状态（这由参数中的toggle确定）。

在【属性】面板中可以设置Button组件的参数有：

u       label：设置按钮上文本的值，默认值是“Button”。

u       Icon：给按钮添加自定义图标。该值是库中影片剪辑或图形元件的链接标识符，没有默认值。

u       Toggle：将按钮转变为切换开关。如果值为true，则按钮在按下后保持按下状态，直到再次按下时才返回到弹起状态。如果值为false，则按钮的行为就像一个普通按钮；默认值为false。

u       Selected：如果切换参数的值是true，则该参数指定是按下(true)还是释放(false)按钮。默认值为 false。

u       LabelPlacement：确定按钮上的标签文本相对于图标的方向。该参数可以是下列四个值之一：left、right、top或bottom，默认值是right。

利用Icon参数可以给按钮添加一个图标，具体步骤如下：

步骤1 你需要选择或创建一个影片剪辑或图形元件以用作图标。元件坐标应创建在（0，0）以在按钮上获得适当的布局。

步骤2 在【库】面板中，用鼠标右键单击图标元件，在弹出的快捷菜单中选择【链接】命令，打开【链接】对话框，输入一个链接标识符，如图8-3-9所示。

图8-3-9 定义链接标识符

步骤3 在【属性】面板中，定义【icon】参数值为“tubiao1”，这个值就是前面步骤定义的链接标识符。

说明：如果图标比按钮大，那么当你测试影片时，会发现它将会延伸到按钮的边框外。

（2）复选框（CheckBox）组件

复选框是任何表单或 Web 应用程序中的一个基础部分。每当需要收集一组非相互排斥的true或false值时，都可以使用复选框。例如，一个收集客户个人信息的表单可能有一个爱好列表供客户选择，每个爱好的旁边都有一个复选框。

复选框组件是一个可以选中或取消选中的方框。当它被选中后，框中会出现一个复选标记。你可以为复选框添加一个文本标签，并可以将它放在左侧、右侧、顶部或底部。

可以在应用程序中启用或者禁用复选框。如果复选框已启用，并且用户单击它或者它的标签，复选框会接收输入焦点并显示为按下状态。如果用户在按下鼠标按钮时将指针移到复选框或其标签的边界区域之外，则组件的外观会返回到其最初状态，并保持输入焦点。在组件上释放鼠标之前，复选框的状态不会发生变化。另外，复选框有两种禁用状态：选中和取消选中，这两种状态不允许鼠标或键盘的交互操作。

如果复选框被禁用，它会显示其禁用状态，而不管用户的交互操作。在禁用状态下，按钮不接收鼠标或键盘输入。

在【属性】面板中可以设置CheckBox组件的参数有：

u       label：设置复选框上文本的值，默认值为CheckBox。

u       Selected：将复选框的初始值设为选中 (true) 或取消选中 (false)。

u       LabelPlacement：确定复选框上标签文本的方向，该参数可以是下列四个值之一：left、right、top 或 bottom，默认值是right。

（3）组合框（ComboBox）组件

在任何需要从列表中选择一项的表单或应用程序中，你都可以使用 ComboBox 组件。例如，你可以在客户地址表单中提供一个省/市的下拉列表，如图8-3-10所示。对于比较复杂的情况，你可以使用可编辑的组合框。例如，在一个驾驶方向应用程序中，你可以使用一个可编辑的组合框来让用户输入出发地址和目标地址。下拉列表可以包含用户以前输入过的地址。

图8-3-10 下拉列表