掌握ComboBox、CheckBox和Button的使用

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

【摘要】：将添加一个CheckBox，一个ComboBox，在表单第一页和第二页分别添加一个Button。在“组件”面板中把ComboBox组件拖到舞台上，放到文本“Select your favorite color:”下面，如图9-15所示。图9-14 添加CheckBox图9-15 添加ComboBox接下来将使用Button组件创建两个按钮，一个放在第一页，用来提交表单的信息。选择UI层的第1帧，然后选择舞台上的CheckBox。表示Label中的内容将和CheckBox右边界对齐。图9-18 CheckBox的参数图9-19 ComboBox的参数在实例名称文本框里输入color_box，确保editable属性没有被选中。图9-22 配置好的ComboBox参数配置Button。

这个例子比较简单，适合刚开始接触用户接口组件的人。这是一个填写表单的程序，读者在图9-12所示的第一页里填写某些信息，然后单击Submit按钮就可以到图9-13所示的第二页显示读者提交的结果，第二页有一个Return按钮，单击它可以返回到第一页。

图9-12 表单第一页

图9-13 表单第二页

第一步就是把组件添加到舞台上。将添加一个CheckBox，一个ComboBox，在表单第一页和第二页分别添加一个Button。

把一个组件添加到Flash文档里有两种方法：第一种是从“组件”面板里拖动一个组件到舞台上；第二种是双击组件面板中的某个组件，这个组件将出现在舞台中央。将组件添加到舞台上之后，Flash将自动把它添加到“库”面板中。

新建一个ActionScript 2.0 Flash文件，大小为640×280像素，颜色为#666666,然后创建影片的背景。

把不同类的内容放到不同的层，是一个很好的习惯。

新建一个图层，起名为UI，将把组件放到这个UI层。单击UI层的第6帧，按下F7键插入一个空白关键帧。

选中UI图层的第1帧，在“组件”面板中把CheckBox拖放到舞台上，把它放在如图9-14所示的位置。

接下来添加ComboBox。使用ComboBox组件可以创建一个简单的下拉菜单，允许用户选择菜单项。也可以使用它做一个更复杂的下拉菜单，允许用户输入一个或者几个字母，然后自动跳到以输入串开始的菜单项。

在“组件”面板中把ComboBox组件拖到舞台上，放到文本“Select your favorite color:”下面，如图9-15所示。

图9-14 添加CheckBox

图9-15 添加ComboBox

接下来将使用Button组件创建两个按钮，一个放在第一页，用来提交表单的信息。第二个放在第二页，用来返回到第一页，而且用刚刚提交的信息填充各个表单项。

在“组件”面板中把Button组件拖到舞台上，把它放在表单右下角，与name，email文本框平行，如图9-16所示。

图9-16 添加PushButton

单击UI层的第6帧，将“组件”面板中的Button组件拖放到舞台上，放在右下角，如图9-17所示。

图9-17 添加第二页的PushButton

下面要做的就是配置组件，这样它们才能显示想要的内容。使用属性面板的参数页来配置组件的参数。

配置CheckBox。选择UI层的第1帧，然后选择舞台上的CheckBox。它的参数显示在了属性面板中的“组件参数”区域，如图9-18所示。

在实例名称文本框里输入sweepstakes_box。

在Label文本框里输入Absolutely!

Label Placement参数保持默认的right(右对齐)。表示Label中的内容将和CheckBox右边界对齐。

勾选Selected参数右侧的选框。这个选项表示CheckBox组件最初状态是被选中的还是没被选中。

配置ComboBox。选中舞台上的ComboBox组件，在属性面板中的“组件参数”区域可以设置参数，如图9-19所示。

图9-18 CheckBox的参数

图9-19 ComboBox的参数

在实例名称文本框里输入color_box，确保editable属性没有被选中。这表示将不允许用户输入其他文本。

data参数显示一个用户可选值的列表。单击data参数右侧的铅笔图标，在弹出的“值”对话框中单击左上角的按钮，添加一个新的值，如图9-20所示。

输入Lightning作为第一个值。同样的方法再添加两个值，分别为Cobalt和Emerald。此时，值弹出式窗口的内容如图9-21所示。单击“确定”按钮关闭对话框。

(www.chuimin.cn)

图9-20 值窗口

图9-21 输入值的值窗口

单击labels参数右侧的铅笔图标，在弹出的“值”对话框中单击左上角的按钮，为上一步中添加的列表值设置标签名称。

rowCount(行数)参数指定窗口中要显示的行数，所以把这个值改成3。此时，属性面板中的ComboBox参数如图9-22所示。

图9-22 配置好的ComboBox参数

配置Button。选中第1帧中的Button组件。Button的参数显示在属性面板中。

在实例名称文本框中输入submit_btn；在Label文本框中输入Submit。

选中第6帧的Button；在实例名称文本框中输入return_btn；在Label文本框中输入Return。

接下来，就要添加动作脚本了。在写具体的动作脚本之前，先对要用到的实例做一个总的了解，见表9-2。

表9-2 实例列表

添加一个新层，命名为Actions。这个层将放置在整个影片运行期间一直运行的动作脚本。

执行“窗口”/“动作”菜单命令，打开“动作”面板。

现在要写的是getResults函数。这个函数将从checkbox和combobox中取得用户选择的结果。把下面的代码输入动作面板：

写一个函数，initValue()。这个函数将根据用户输入的信息初始化第一页的各个文本框和组件。当用户单击了Return按钮之后，将调用这个函数。

最后，在所有ActionScript最前面加上一行对initValue()函数的调用，完成之后，第1帧的代码清单如下：

接下来为两个Button组件编写函数，响应鼠标的单击事件。

选中Actions图层的第1帧，打开“动作”面板，在脚本窗格中输入以下代码以响应Submit按钮的鼠标单击事件：

选中Actions图层的第6帧，单击鼠标右键，在弹出的快捷菜单中选择“转换为空白关键帧”命令，然后打开“动作”面板，在脚本窗格中输入以下代码以响应Return按钮的鼠标单击事件：

已经完成了整个影片需要的脚本。接下来要添加的就是第一页和第二页所在的那两帧的脚本。

添加一个新层，命名为Frame Action。选中第一帧，并插入一个空白关键帧，在属性面板中将帧命名为pg1。

选中第六帧，插入一个空白关键帧，并且在属性面板的帧文本框中输入pg2。

选中Frame Action层的第1帧，然后在“动作”面板中输入：

前面说过，根据用户是否选择了checkbox，将在一个文本框中显示不同的内容。

选中Frame Action层第6帧，然后在“动作”面板中添加如下的代码：

选择菜单“控制”/“测试影片”预览动画。

掌握ComboBox、CheckBox和Button的使用

相关推荐