FLASH MX UI Components 的使用方法简介

　　在我们打开FLASHMX后，最先能引起我们注意的是新增加的一个名为Components的组件面板（如上图），它内置了7个UI组件。其实macromedia公司在 FLASH5里就已经创造了它们，只是它们深藏不露而未能被广大用户所认识使用（具体位置在：Windows>Common Libraries>SmartClips）。这次macromedia公司利用在FLASHMX发布之际，对此作了重新定义和重大修改和扩充，才正式向广大用户推出对用户使用界面更为友好的组件(Component)面板，并配合发布了组件扩展管理器（Macromedia Extension Manager）版本1.4 。

下面，我们就几个实例来一步一步学习FLASH MX UI Components的使用方法。

第一个例子：

滚动条（Scroll Bar）的应用

第一步：在主场景中画上一个文本框，在属性面板上定义为输入文本框（input　text）,取名为test（自定义）； 并选择多行（Multline）显示和文本边框显示。

第二步：拖入滚动条（ScrollBar），在属性面板上显示的是组件(Component)对话框，下面只要对目标文件（Target TextField）设置一下，注意要和第一步中的文件名一致，这里当然是test。

说明：

1、如果你文本框大，而拖入的滚动条（Scroll Bar）短小，可用变形工具调整滚动条使其一致。

2、滚动条（ScrollBar）默认为非水平设置（Horizontal—false），如果将组件（Component）对话框中的false改写为true，则就变为水平设置了。

3、文本内容可写入，或用as语句外文本载入，属性上也可设为动态文本，只要文字超出了你的文本框，滚动条立即显示。

　　完工了，测试一下效果喽，不坏吧，很简单的一个应用吧，但它也基本上说明了这个组件（Component）的使用方法了。

第二个例子：

复选框（Check Box）和单选按钮（Radio Button）的基本用法

这两个组件基本上可分别视作复选框和单选按钮组件，由于其本身性质不一样，给它们定义时也会有所不同，下面我们还是通过做一个实例来认识它们的用法：

第一步：在场景中拖入CheckBox组件三个，将它们上下排放、对齐后用鼠标选中其中一个，见到的属性面板如下（并将三个组件Label分别设为X、Y、Z）：

 

列表解释如下：

名称、变量	参数	解释
Label	Check Box	组件标签，参数项可更改为需要的显示的文字为该组件的标签名，本实例将三个组件分别设为：X、Y、Z
Initial Value	false	原始值，默认false为原始不作选择，ture为选择“勾”
labelPlacement	right	组件标签显示位置，默认为right在组件右侧，left为左侧
changeHandler		参数应命名为被控变量名（可选项）

第二步：在场景中拖入RadioButton组件三个，将它们排放、对齐后用鼠标选中其中一个，见到的属性面板如下（并将三个组件Label分别设为X、Y、Z）：

 

列表解释如下：

名称、变量	参数	解释
Label	Radio Button	同Check Box组件标签的解释
Initial State	false	原始状态，默认false为无选择，ture为有选择
Group Name	RodioGroup	Radio Button组件群组名，同一组件群要统一命名
Data		自定义数据，如：1、2、3等
labelPlacement	right	组件标签显示位置，默认为right在组件右侧，left为左侧
changeHandler		参数应命名为被控变量名（可选项）

我们在场景中制作的效果如图所示，当然要见到Check Box和Radio Button特效，请导出影片或按Ctrl+EnterI测试吧。

第三个例子：

下拉菜单（ComboBox）和列表下拉菜单（ListBox）

这是两个下拉菜单组件，将它们拉入场景中，用鼠标选中下拉菜单组件就会出现如下属性面板：

1、 ComboBox

 

列表解释如下：

名称、变量	参数	解释
Editable	false	原始状态默认false为无选择，ture为选择
Labels	[ ]	写入下拉菜单内容
Data	[ ]	写入下拉菜单指定值
Row Count	8	下拉菜单列表项数
changeHandler		参数应命名为被控变量名（可选项）

 

 

 

2、 ListBox

 

列表解释如下：

名称、变量	参数	解释
Labels	[ ]	写入下拉菜单内容
Data	[ ]	写入下拉菜单指定值
Select Multiple	false	多项选取默认为false，不允许；ture为允许
changeHandler		参数应命名为被控变量名（可选项）

 

 

 

 

　　在上面的两个组件中，都有两项参数为“[　]”，意为：等待写入。方法是双击属性框中的“[　]”符号，在弹出的如图所示的数值输入框中点击“+”号，在出现的英文“defaultValue”用鼠标点入，就可输入你想要输入的内容和指定值了。

请在两个组件里随意输入文字先看看效果吧。

第四个例子：

卷轴窗口（ScrollPane）

在场景中拖入卷轴窗口组件，在属性框中显示的内容如图：

 

列表解释如下：

名称、变量	参数	解释
Scroll Content		被控MC名
Horizontal Scroll	auto	垂直卷轴默认为自动auto，fals不允许；ture为允许
Vertical Scroll	auto	垂直卷轴默认为自动auto，fals不允许；ture为允许
Drag Content	false	拖拉满足默认为fals

 

 

 

 

本例制作第一步：我们先要在Library里面准备好一个MovieClip，写入下面一段文字：我们在学习组件（Component）的使用。该MovieClip我们给它取名叫test好了，做好的在Library里面样子如图所示：

 

第二步：右键点击test这个 MovieClip，然后选择Linkage，填写上 Linkage 的名称：test 。

第三步：将已拖入场景中Scroll Content组件的第一项Scroll Content，写上est，测试就可以看到效果了。

　　如果觉得Scroll Content组件窗口在场景中的大小不合适，请用缩放工具改变之。

第五个例子：

按钮（PushButton）及实例

将按钮PushButton拖入场景中，出现的属性框如图：

     

只有两个属性项，不用我列表解释了吧。一项是按钮标签，一项是被控变量。

　　好了，下面让我们来看看这个按钮是怎么用的，跟我们以前用的按钮一样吗。写入AS就能发现是onClipEvent 影片片段的语法结构就知道其不同了。本例我们不对按钮写入AS，只在其Click　Handler属性项上写入被控变量名：qq；然后在场景中画出一个较小的输入文本框并命名其变量名为Y，选择单项显示；再在场景中画一个较大的动态文本框，选择多项显示，并将动态文本框取名LL（特别注意：不是变量名！）；最后是在帧上写下下列简单的AS语法：

function qq(component) {

_root.LL.text = Y;

}

语法不用我多解释了吧，实例的效果图如图所示。请在小框中输入文字，然后点击按钮，看大框中的效果喽。

好了，关于Flash MX组件（Component UI）的使用到这里就结束了，有问题来信交流吧。