Introduction to flash mx ui Components

After we open FLASHMX, the first thing we can note is the newly added component panel named Components (for example), which has seven built-in UI Components. In fact, macromedia has already created them in Flash 5, but they are hidden and not used by users (in Windows> Common Libraries> SmartClips ). This time, macromedia officially launched a Component panel that is more user-friendly to users only by redefining and significantly modifying and expanding the Flash MX release, with the release of Macromedia Extension Manager version 1.4.

Next, let's take a few examples to learn how to use flash mx ui Components.

Example 1:

Scroll Bar

Step 1: Draw a text box in the home scene, define it as input text on the property panel, name it test (custom), and select multiple lines (Multline) display and text border display.

Step 2: drag the scroll bar to display the Component dialog box on the property panel. You only need to set the Target file (Target TextField) below, note that the file name must be consistent with the file name in step 1. test is used here.

Note:

1. If the text box is large and the Scroll Bar dragged into is short, you can use a deformation tool to adjust the Scroll Bar to make it consistent.

2. By default, the scroll bar (ScrollBar) is not set horizontally (Horizontal-false). If the value of false in the Component dialog box is changed to true, It is set horizontally.

3. The text content can be written or loaded outside the as statement. The attribute can also be set to dynamic text. as long as the text exceeds your text box, the scroll bar is displayed immediately.

It's done. It's not bad to test the effect. It's a very simple application, but it basically shows how to use this Component.

Example 2:

Basic usage of Check Box and Radio Button

These two components can be regarded as check boxes and single-choice button components. Because of their different nature, they are also different in definition, let's take an example to understand their usage:

Step 1: Drag three CheckBox components into the scene, discharge them up and down, align them, and select one with the mouse, the property panel is as follows (and the labels of the three components are set to X, Y, and Z respectively ):

 

The list is explained as follows:

Name and variable	Parameters	Explanation
Label	Check Box	Component label. The parameter item can be changed to the text displayed as the Tag Name of the component. In this example, the three components are set to X, Y, and Z respectively.
Initial Value	False	Original value. The default value "false" indicates that the original value is not selected, and the true parameter indicates that the "check" option is selected"
LabelPlacement	Right	The position where the component labels are displayed. The default value is right on the right side of the component, and left on the left side.
ChangeHandler		The parameter should be named as the variable name (optional)

Step 2: Drag three RadioButton components into the scene, discharge and align them, and select one with the mouse, the property panel is as follows (and the labels of the three components are set to X, Y, and Z respectively ):

The list is explained as follows:

Name and variable	Parameters	Explanation
Label	Radio Button	Explanation of the label of the Check Box component
Initial State	False	Original status. The default value is "false", and "true" indicates "yes ".
Group Name	RodioGroup	Name of the Radio Button component group, which must be uniformly named
Data		Custom data, such as: 1, 2, and 3
LabelPlacement	Right	The position where the component labels are displayed. The default value is right on the right side of the component, and left on the left side.
ChangeHandler		The parameter should be named as the variable name (optional)

The effects we make in the scene. Of course we want to see the Check Box and Radio Button special effects. Please export the video or press Ctrl + EnterI to test it.

Example 3:

ComboBox and ListBox)

These are two drop-down menu components, which are pulled into the scenario. When you select the drop-down menu component with the mouse, the following attribute panel appears:

1. ComboBox

 

The list is explained as follows:

Name and variable	Parameters	Explanation
Editable	False	The default value "false" indicates that the original status is not selected, and "true" indicates that the original status is selected.
Labels	[]	Write drop-down menu content
Data	[]	Write drop-down menu Value
Row Count	8	Number of items in the drop-down menu list
ChangeHandler		The parameter should be named as the variable name (optional)

 

 

 

2. ListBox

 

The list is explained as follows:

Name and variable	Parameters	Explanation
Labels	[]	Write drop-down menu content
Data	[]	Write drop-down menu Value
Select Multiple	False	The default value of multiple selections is false, not allowed; true is allowed.
ChangeHandler		The parameter should be named as the variable name (optional)

 

 

 

 

The preceding two components have two parameters: [], meaning: Waiting for writing. Double-click the "[]" symbol in the attribute box, click "+" in the displayed value input box, and click "defaultValue, you can enter the content you want to enter and the specified value.

Please enter any text in the two components to see the effect first.

Example 4:

Scroll window (ScrollPane)

Drag the scroll window component into the scene and display the content in the attribute box.

 

The list is explained as follows:

Name and variable	Parameters	Explanation
Scroll Content		Name of the controlled MC
Horizontal Scroll	Auto	The vertical scroll is auto by default, and fals is not allowed; ture is allowed
Vertical Scroll	Auto	The vertical scroll is auto by default, and fals is not allowed; ture is allowed
Drag Content	False	The default value of drag is fals.

 

 

 

 

In this example, the first step is to prepare a MovieClip in the Library and write the following text: we are using the learning Component. The MovieClip is named test. It looks like it in the Library:

 

Step 2: Right-click the MovieClip "test", select "Linkage", and enter "test" as the name of the Linkage.

Step 3: drag the first Scroll Content component of the Scroll Content component into the scenario, write it to est, and the test will show the effect.

If the size of the Scroll Content component window is inappropriate in the scenario, use the Zoom tool to change it.

Fifth example:

Buttons (PushButton) and Instances

Drag the button PushButton to the attribute box that appears in the scenario.

There are only two attribute items. I don't need to explain them in the list. One is the button tag, and the other is the controlled variable.

Well, let's see how this button is used, just like the button we used before. Write the AS file and you will find that the syntax structure of the onClipEvent video clip is different. In this example, we do not write the button AS, but only write the name of the controlled variable: qq in its Click Handler attribute item. Then, in the scenario, draw a small input text box and name the variable "Y, select single display, draw a large dynamic text box in the scenario, select multiple display, and name the dynamic text box LL (Note: not the variable name !); Finally, write the following simple AS syntax on the frame:

Function qq (component ){

_ Root. LL. text = Y;

}

I don't need to explain more about the syntax, for example. Enter text in the box and click the button to see the effect in the box.

Now, the use of the Flash MX Component (Component UI) is over. If you have any questions, please contact us.