Flash MX中新增了7种内置组件（Flash UI Components），它们是PushButton、CheckBox、RadioButton、ListBox、ComboBox、ScrollPane、ScrollBar。要将这些组件添加到影片中，只需要在组件面板中双击相应的组件或在组件上按下鼠标将其拖动到场景中。
17.1 组件面板
选择“窗口”→“组件”命令或按快捷键Ctrl+F7即可打开Flash MX的组件面板，如图17-1所示。
在组件面板中双击组件或是按下鼠标左键拖动组件都可以将组件添加到场景中。添加内置组件后，Flash的库面板中会添加一个名为Flash UI Components的组件夹，如果添加了不止一种组件，它们都将自动保存在这个组件夹中，所以不会给你带来多大麻烦。如图17-2所示为添加到场景中的各种组件。
图17-1 组件面板 图17-2 添加到场景中的组件状态
17.2 PushButton
在场景中添加了PushButton后，选中PushButton，它的属性面板如图17-3所示。
图17-3 PushButton的属性面板
单击属性面板右下角的“属性”按钮，属性面板将变成如图17-4所示。再单击“参数”按钮，属性面板将切换回原来的状态。
图17-4 单击“属性”按钮后的效果
在属性面板中PushButton有两个参数，Label即是PushButton的标签，即显示在按钮上的文字，默认的文字是Push Button。在Label栏单击，Label后的文本框变成可改写的，在其中输入要显示在按钮上的文字。Click Handler参数表示单击PushButton时要执行的函数，该函数必须与PushButton在同一条时间轴中。即如果PushButton位于主场景中，则它的事件处理函数应该在主时间轴的关键帧中。
在<实例名称>文本框中可以为PushButton命名，它将作为PushButton的name属性。单击PushButton时，name属性将作为参数传递给Click Handler指定的单击事件处理函数。
与用户创建的按钮一样，PushButton也可以使用按钮的on事件处理函数。
PushButton的使用方法见PushButton.fla。其中的函数如下所示：
function PushButtonClick(xbutton) {
trace(xbutton._name);
}
在场景中添加了3个PushButton，将Label分别设为“是”、“否”和“取消”，将Click Handler都设为PushButtonClick，将实例名称分别设为yes、no和cancel。按Ctrl+Enter键测试影片，分别在3个按钮上单击，输出窗口中将相应地显示yes、no和cancel。
17.3 CheckBox
CheckBox就是我们平常所见的复选框，它有选中和未选中两种状态，属性面板如图17-5所示。
图17-5 CheckBox的属性面板
CheckBox的Label参数与PushButton类似，Initial Value参数是CheckBox的初始状态，false表示未选中，true表示选中，它们的区别如图17-6所示。
图17-6 Initial Value参数分别为false和true时的区别
Label Placement参数决定Check Box的标签（Label）位于复选框的左边还是右边，它有两个值right和left，默认为right，Label Placement参数分别为right和left时的状态如图17-7所示。
图17-7 Label Placement参数分别为right和left时的状态
Change Handler参数与PushButton的Click Handler属性类似，表示改变CheckBox的状态时要调用的事件处理函数，该函数也必须与CheckBox位于相同的时间轴中。
改变CheckBox的状态时，它的实例名称将作为参数传递给事件处理函数，在编写脚本时可以利用这个属性。
CheckBox的使用方法见CheckBox.fla，其中用于CheckBox的事件处理函数如下所示：
function CheckBoxChange(xCheckBox) {
if (xCheckBox.getValue() == true) {
trace("You like "+xCheckBox._name);
} else {
trace("You dislike "+xCheckBox._name);
}
}
getValue方法用来获取CheckBox的状态，CheckBox还有getLabel以及setValue、setLabel等方法，在此不再详述。
17.4 RadioButton
RadioButton即常说的单选按钮或单选项，它与CheckBox类似，但是在同一组RadioButton中只能有一个为选中状态，而一组CheckBox中的任意一个都可以为选中状态。RadioButton的属性面板如图17-8所示。
图17-8 RadioButton的属性面板
图17-8中的Label、Label Placement和Change Handler参数与前面的相似，Initial State参数与CheckBox的Initial Value参数类似，表示RadioButton的初始状态。Group Name参数表示RadioButton所在的组，在同一组中只能有一个RadioButton被选中，而不同的组不会互相影响。Data参数可选（不是必须的，可以为空），它可以为RadioButton附带一个数据，使用getData方法可以访问该参数的值。
RadioButton的使用方法见RadioButton.fla，其中的函数如下所示：
function RadioButtonChange(xRadioButton) {
trace("You like "+xRadioButton.getData());
}
17.5 ListBox
ListBox即列表框，使用ListBox可以将多个选项综合在一个列表框中，从而代替CheckBox和RadioButton行使它们的功能。空的和添加选项后的ListBox如图17-9所示。
图17-9 空的ListBox和添加选项后的ListBox
ListBox的属性面板如图17-10所示。
图17-10 ListBox的属性面板
选中Labels或Data栏再单击鼠标，将打开如图17-11所示的值面板，单击 和 按钮可以添加或删除项目，单击 和 按钮可以将项目向下或向下移动。编辑时的值面板如图17-12所示。
图17-11 值面板 图17-12 编辑时的值面板
在值面板中添加完项目后，单击“确定”按钮即可。
Select Multiple参数决定ListBox中的项目是否可以多选，为false时不能多选，相当于一组RadioButton；为true时可以多选，相当于一组CheckBox。
使用getValue方法返回有关列表框中当前选定项的信息。如果该项目没有指定的Data，则此方法返回该项目的Label；如果该项目有关联的Data，则此方法返回该Data。在单选列表框中使用getSelectedItem方法可以将选定的项目作为一个具有Label和Data属性的对象返回，在多选列表框中使用getSelectedItems方法可以将选定的项目作为一个具有Label和Data属性的数组返回。ListBox的使用方法见ListBox.fla。其中的函数如下所示：
function ListBoxChange(xListBox) {
trace(xListBox.getSelectedItem().Label+"："+xListBox.getSelectedItem().Data);
}
17.6 ComboBox
ComboBox即组合框，也即下拉列表框。既然称为组合框，ComboBox是由一个文本框和一个列表框组合起来的，平常只显示文本框，单击下拉箭头可以展开列表框，因此它比ListBox要节省许多空间。在ComboBox中选择一个项目的过程如图17-13所示，ComboBox的属性面板如图17-14所示。
图17-13 在ComboBox中选择一个项目的过程
图17-14 ComboBox的属性面板
它的第1个参数Editable，表示ComboBox是否可编辑。当Editable为false时ComboBox中的方框是不可编辑的；当Editable为true时ComboBox中的方框相当于一个输入文本框，你可以在其中输入字符，也可以在其下拉列表中进行选择。
ComboBox的Labels和Data参数与ListBox类似。Row Count参数表示ComboBox的下拉列表中可以直接显示的项数，超过这个项数就需要使用滚动条查看。默认的Row Count为8，你也可以根据需要进行修改。
ComboBox的使用方法见ComboBox.fla，其中的函数如下：
function ComboBoxChange(xComboBox) {
trace(xComboBox.getValue()+"："+xComboBox.getSelectedItem().Data);
}
17.7 ScrollPane
ScrollPane组件包含水平滚动条、垂直滚动条和视图区，它的属性面板如图17-15所示。
图17-15 ScrollPane的属性面板
ScrollPane最重要的参数是Scroll Content，它代表视图区中要显示的影片剪辑的链接名称，即在库面板中元件的链接字段中的链接标识符。运行影片时，Scroll Content参数指向的影片剪辑将加载到视图区中显示。
Horizontal Scroll和Vertical Scroll参数都具有3个可选值：auto、true和false。当值为auto（自动）时，将根据加载的影片剪辑的实际大小是否超出视图区的边界来决定水平和垂直滚动的条的显示与否；当值为true时永远显示对应的滚动条；当值为false时不显示滚动条。
Drag Content参数决定视图区中的内容是否可以使用鼠标进行拖动，它有两个值：true和false。
除了在Scroll Content参数中指定要加载的影片剪辑外，还可以使用loadScrollContent命令将外部的swf文件加载到ScrollPane的视图区中。ScrollPane的使用方法见ScrollPane.fla，其中有两个ScrollPane，一个使用Scroll Content参数加载库中的影片剪辑graphic，另一个使用loadScrollContent命令将外部的pic.swf文件加载到视图区中，其脚本如下所示：
myScrollPane.loadScrollContent("pic.swf");
该文件的运行效果如图17-16所示。
图17-16 ScrollPane.fla的运行效果
17.8 ScrollBar
ScrollBar即滚动条，它可以添加到动态文本或输入文本中。其属性面板如图17-17所示。
图17-17 ScrollBar的属性面板
Target TextField参数指定与ScrollBar相组合的动态文本或输入文本的实例名称，将ScrollBar拖动到文本框要添加滚条的边框一侧，Target TextField参数的值将自动改变成与文本实例的名称相一致。
Horizontal参数决定ScrollBar是水平还是垂直的，为false时是垂直滚动条，为true时是水平滚动条。
ScrollBar的使用见ScrollBar.fla。
[文章热度:]
上一页：AS菜鸟教程16 xml的操作
