进入Flash MX组件时代之二内置组件的使用（上） -pc6资讯

您的位置：首页 → 网页设计 → Flash → 进入Flash MX组件时代之二内置组件的使用（上）

进入Flash MX组件时代之二内置组件的使用（上） 时间：2004/11/7 2:20:00来源：本站整理作者：蓝点我要评论(0)

　　　　　　　　　　　　

　　　　　　　　　　　　2.1 CheckBox（复选框）

　　在许多软件中，复选框组件是经常会被用到的，如Visual C++的资源编辑器中我们就可以看见很多的复选框。复选框可以允许我们选择一个或者多个选项，当某选项被选中后，该复选框的小框里就会出现一个小勾。

　　我们把Components面板中的CheckBox（复选框）组件拖拽到场景中，然后打开它的参数设置面板，如图5所示。

图5 CheckBox组件的参数面板

　　同样的，你也可以选择Window菜单下的Component Parameters命令，或是按快捷键Alt+F7调出Component Parameters（组件参数）面板来设置组件的参数，如图6所示。

图6 UI组件参数设置面板

　　在CheckBox组件的参数面板中，各项参数的功能如下：

　　　　Label（组件名称）：命名复选框组件，如图7所示。

　　　　InitialValue（初始值）：初始化组件的状态为选中（true）或是未选中（false）。

图7 命名复选框组件

　　　　 Alignment（对齐方式）：设置复选框的可选方式。Left：勾选框在左面，right：勾选框在右边。如图7所示。

　　　　Change Handler（处理函数）：执行用户自己定义的函数，该设置选项的参数为用户定义函数的函数名。在函数被调用前，我们需要对它进行定义。

　　现在我们看一个简单的组件效果。该效果中，当我们选中组件“CheckBox1”时，组件“CheckBox2”也会同时被选中。当组件“CheckBox1”不被选中的时候，组件“CheckBox2”也不被选中，而且会变成灰色，即该组件不可用，但两个组件的名称都会改变，效果如图8所示。但选择组件“CheckBox2”却不会影响到组件“CheckBox1”，效果如图9所示。

图8 第一个组合框控制着第二个组合框

图9 第二个组合框独立运行

　　这个实例的具体做法如下：

　　首先按快捷键Ctrl+F7打开Components面板，然后用鼠标左键的按住

组件并把它拖拽到场景中，接着打开Component Parameters面板进行如图10所示的参数设置。

图10 设置第一个组合框的参数

　　在Label参数选项里我们重新命名这个复选框的名字为“Paris”。Change Handler参数选项里设置的“func”字符串就是我们自己定义的一个函数的函数名，也就是这个复选框被执行的时候，这个函数将会被调用。

　　再拖拽一个复选框组件到场景中，然后在Component Parameters面板进行如图10所示的参数设置。“func2”也是自定义的函数。

图10 设置第一个组合框的参数

　　现在右键单击场景中的第一帧，然后选择Actions命令，在打开的Actions面板中输入如下代码：

//为CheckBox1创建func函数

function func() {

//复选框被勾选后改变组件名称

CheckBox1.setLabel("巴黎");

//得到复选框的被选状态，复选框被勾选时，n_CheckBox1的值为true

n_CheckBox1 = CheckBox1.getValue();

//如果复选框未被勾选，则修改组件的名称为“Paris”

if (n_CheckBox1 != true){

CheckBox1.setLabel("Paris");

}

//改变CheckBox2的状态

CheckBox2.setValue(n_CheckBox1);

CheckBox2.setEnabled(n_CheckBox1);

}

//为CheckBox1创建func2函数，代码含义如上

function func2() {

CheckBox2.setLabel("伦敦");

n_CheckBox2 = CheckBox2.getValue();

if (n_CheckBox2 != true){

CheckBox2.setLabel("London");

}

}

　　以上代码中，我们先定义了一个func()函数，这个函数的主要功能是在控制组件CheckBox1的同时，对组件CheckBox2也进行着控制。当我们勾选CheckBox1后，复选框CheckBox2也会被勾选，并同时改变两个组件的名称。当CheckBox1不被勾选时，复选框CheckBox2是不可用的。代码中的getValue()方法是用来获取组件的可选状态的，其返回值为true或false；方法setEnabled()可以设置组件是否可用，如果组件不可用，则呈现灰色不可用状态；方法setLabel()可以改变组件的名称。

　　2.2 RadioBox（单选框）

　　选择不会永远都是多项的，有时我们不得不在多项内容中选取其一，于是与CheckBox相对应的便产生了RadioButton组件。该组件是单一选择项组件，我们可以将一些相关的内容列为一组，然后在该组内选择其中符合自己的一项作为正确结果。

　　我们把Components面板中的RadioButton（单选框）组件拖拽到场景中，然后打开它的参数设置面板(或Alt+F7调出Component Parameters面板)设置相应参数，如图11所示。

图11 RadioButton组件的参数面板

　　在RadioButton组件的参数面板中，各项参数的功能如下：

　　　　Label（组件名称）：命名单选框组件。

　　　　InitialValue（初始值）：初始化组件的状态为选中（true）或是未选中（false）。

　　　　GroupName（组别名称）：确定该单选框隶属于哪个组别，同一组内的单选框只能有一种单选框可被激活选中，如选中其一则其它单选框将处于无效状态。

　　　　Data（数据信息）：选择该单选框之后将产生的数据信息。

　　　　LabelPlacement（标签位置）：组件名称（Label）在单选框的位置方向。Left：

组件名称将显示在单选框的左边；Right：

组件名称将显示在单选框的右边。

　　　　Change Handler（处理函数）：与CheckBox的Change Handler一样，该设置选项的参数为用户定义函数的函数名，这里将执行用户自己定义的函数，当然在函数被调用前，我们需要对它进行定义。

　　接下来我们来学习一个简单组件效果，该实例中我们设置了一个radioGroup组别，在这个组里有两个RadioButton，一个为“男”一个为“女”用以判断我们的性别，然后我们还将放置一个动态文本框Sex来显示我们的选择信息。当我们选中组件“RadioMale”时，Sex文本框将显示“先生，您好！”，而当我们选中组件“RadioFemale”时，Sex文本框将显示“女士，您好！”。当然，只要我们选中了其中的一项，另一项单选框的焦点必然将失去，效果如图12所示：

图12 选择不同的性别时出样不同的结果

　　首先我们先拖拽两个RadioButton到场景中，分别将这两个RadioButton的Label设置为“男”、“女”；InitialValue则都设置为False；GroupName则都设置为radioGroup（注意：这里千万将两个RadioButton的GroupName设置为相同，而且拼写的大小写也应当注意）；Data则分别设置为“先生，您好！”与“女士，您好！”；LabelPlacement则都设置为Right；Change Handler则都设置为changeLabel（注意：changeLabel为自定义函数，我们在下面会列出它的代码）。

　　然后我们在场景中创建一个Dynamic Text（动态文本框），将它的Var设置为Sex。

　　接下来我们在场景中新建一层ActionScript层用以放置代码，在第一帧关键帧内我们编写了这样一个自定义函数：

//此处的changeLabel即是RadioButton的参数设置中Change Handler处设置的changeLabel

function changeLabel(whichRadio) {

sex= whichRadio.getValue();

}

　　由于RadioButton组件其自身加入了Group（组别）的判定，因而我们可以将RadioButton实例中的自定义函数与CheckBox实例中的自定义函数作以比较，我们将很容易的得出一个结果：RadioButton比起CheckBox省去了对同组选项中许多内容的控制，如Enabled等。

　　2.3 ComboBox（组合框）

　　使用组合框组件可以设计出大家常见的下拉菜单。我们可以创建静态文本框和可输入文本框两个组合框组件。静态的组合框只可以拖动滚动条来选择菜单中的项目，而可输入文本框与静态的组合框所不同的就是可以在顶端输入所需要的菜单项，如图13所示。

图13 设置可输入组合框组件

　　组合框组件的索引是从数字0开始的，也就是组合框显示的第一个菜单项目的索引值为0。可以使用小键盘的方向键来控制组合框组件里菜单选项的选择：

　　敲击一下方向键↑可以向上移动一个单位。

　　敲击一下方向键↓可以向下移动一个单位。

　　敲击PageUp键会向上滚动5个菜单选项。

　　敲击PageDown键会向下滚动5个菜单选项。

　　敲击Home键可以跳转到菜单的第一个选项。

　　敲击End键可以跳转到菜单的第一个选项。

　　现在我们从Components面板中拖拽一个ComboBox组件到场景中，然后打开它的参数设置面板，如图14所示。

图14 ComboBox组件的参数面板

图14中各项参数的设置功能如下：

　　Editable（可编辑）：设置组合框是否可以提供文本地输入功能。如果设置该项的参数为true，组合框就提供文本输入功能；如果设置该项的参数为false，就不能在组合框内输入文本，但可以拖动滚动条进行选择。

　　Labels（标签）：标签的功能是给组合框输入各菜单选项。双击该选项会弹出如图15所示的Values（参数）面板。图15中四个按钮的功能分别是增减菜单选项和上下移动菜单选项。

图15 Values（参数）输入面板

　　Data（数据）：同Labels参数选项一样，Data中的数据也是一个字符串数组。Data参数中的数组元素分别对应着Labels参数中的元素，其值也可以从Values面板中输入。

　　RowCount（行数）：该参数选项的功能是设置同时显示菜单的数目，默认值为8。如果该参数选项的参数值为5，打开下拉菜单时可以同时显示5个菜单项目。

　　ChangeHandler：执行用户自定义的函数。该参数选项的参数为用户定义函数的函数名。在函数被调用前，我们需要对它进行定义，而且函数需要和实体在同一时间轴列上。还有，该函数还可以使用组合框的实体名作为自己的参数。

　　下面我们来学习一个实例，让我们来制作一个常用的目录导航。

　　打开Components面板，然后把组件

拖拽到场景中，接着打开Component Parameters面板进行如图16所示的参数设置。

图16 设置第一个组合框的参数

　　双击Labels参数选项，在弹出的Values面板中输入菜单项目的名称，最终设置如图17所示。接着双击Data参数选项，在弹出的Values面板中输入和目录名相对应的连接地址，输入后的设置如图18所示。在Change Handler参数选项里输入“func”。当选择下来导航条中的菜单选项时，函数“func”将被执行。“ComboBox”是组合框的实体名。

图17 输入显示目录

图18 输入链接地址

　　右键单击场景中的第1帧，打开Actions面板，输入如下代码：

//ComboBox就是场景中组件的实体名，方法setSize用来改变组件的宽度

ComboBox.setSize(150);

//为ComboBox创建func函数

function func(obj) {

  //obj._name取得组件的实体名，如果实体名为ComboBox则往下执行

  if (obj._name == "ComboBox") {

//getURL()方法可以打开浏览器

  getURL(obj.getValue());

  }

}

　　在代码中使用参数obj是让函数能够判断到底是哪个组件在调用它。一般情况下我们也不会为每个组件都创建一个函数，而是让它们使用同一个函数进行处理。本例的测试结果如图19所示。

图19 实例效果

2.4 ListBox（列表框）

　　假若按继承的方式来比较ComboBox与ListBox，那么应该说它们继承于相同的父类，正因如此所以这两个组件之间在许多方面具有相似的点，包括我们要讲述的参数设置及其它的一些相关操作。当然，区别总是存在的，ComboBox在空间的利用上为我们节约了很大的开支，但倘若项目增多就会变得十分的累赘累人，而ListBox虽然增加了一些空间占用面积，可是里面项目内容增加以后却比ComboBox要来得方便的多。

　　现在我们从Components面板中拖拽一个ListBox组件到场景中，然后打开它的参数设置面板，如图20所示。

图20 ListBox组件的参数面板

　　比较Combox的组件参数面板，图20中各项参数的设置功能如下：

　　Labels（标签）：标签的功能是给列表框输入各菜单选项。双击该选项会弹出如图21所示的Values（参数）面板（与ComboBox一样）。

图21 Values（参数）输入面板

　　Data（数据）：也与同Labels参数选项一样，Data中的数据也是一个字符串数组。Data参数中的数组元素分别对应着Labels参数中的元素，其值也可以从Values面板中输入（与ComboBox的Data一致）。

　　Select Multiple（多选）：该项的功能是判断列表框是否具有多选功能。False：只能选择列表框中的一个数据项；True：可以同时选择列表框中的多个数据项（按下Ctrl或Shift进行多项数据选择）。

　　ChangeHandler：执行用户自定义的函数。该参数选项的参数为用户定义函数的函数名。在函数被调用前，我们需要对它进行定义，而且函数需要和实体在同一时间轴列上。还有，该函数还可以使用列表框的实体名作为自己的参数。

　　现在让我们参见前面的ComboBox的实例再利用ListBox进行进一步的改进，我们将利用ListBox罗列一些相关的网站，我们通过在列表框中选择不同的站点名称来定制窗口大小的打开一个新的站点。因而这里不仅可以让我们对ListBox的操作有所掌握，而且还可以让我们清楚如何利用一些其它的技术（如JavaScript）来结合ListBox实现一些实用的效果。

　　当我们设置完ListBox的Labels与Data的项目内容以后我们再确认一下Select Multiple是否设置为False（本实例中为否），然后我们在ChangeHandler中输入ListOpenWindow（此为自定义函数ListOpenWindow()的名称）。

　　接下来我们新建一层ActionScript层，并在此关键帧中输入如下的代码内容：

//构建一个自定义函数CenterPopupMX，利用getURL与JavaScript来实现弹出定制大小的居中窗口

MovieClip.prototype.CenterPopupMX = function(theurl, title, w, h, features) {

var sysW = System.capabilities.screenResolutionX;

var sysH = System.capabilities.screenResolutionY;

var centerx = Math.round((sysW/2)-(w/2));

var centery = Math.round((sysH/2)-(h/2));

getURL("javascript:void(window.open('"+theUrl+"','"+title+"','width="+w+", height="+h+", left="+centerx+", top="+centery+",screenX="+centerx+", screenY="+centery+","+features+"'));");

};

//构建一个自定义函数ListOpenWindow，利用getURL与前面的CenterPopupMX函数结合在取出ListBox相应名称的超链接以后打开一个宽为400高为500无工具栏等内容的定制浏览窗口

function ListOpenWindow() {

getURL(CenterPopupMX((listBox.getSelectedItem().data),"4Tstudio",400,500,"menubar=no"), "_blank");

}

　　在ListOpenWindow中我们利用了listBox.getSelectedItem().data取出该列表框当前取得焦点的项的数据。本例的测试结果如图22所示。