Flex tutorial-usage

This tutorial will learn:
1. Use MXML to create behaviors.
2. Call results between different components.
3. Create a merging effect.
1. Use MXML to create behaviors.
Next we will create an effect that will shine when the user clicks the button.
1. In Source mode, enter the following code after <mx: Application> to define a luminous effect. <Mx: Glow id = "buttonGlow" color = "0x99ff66" alphaFrom = "1.0" alphaTo = "0.3" duration = "1500"/>

2. In Design mode, drag a button from the Componsents panel to the application, and set the properties of the button as follows: ID: myButton
Label: View
X: 40
Y: 60

3. On the property panel, click View by Category View. And find out the properties of the Effects type.

4. Assign the value of mouseUpEffect to the luminous effect. As follows: mouseUpEffect: {buttonGlow}

In Source mode, the <mx: Button> tag code is as follows: <mx: button x = "40" y = "60" label = "View" id = "myButton" mouseUpEffect = "{buttonGlow}"/>

5. Save the file.
6. Click the Run button on the toolbar to compile the application.
The browser will run your Flex application. Click View. The View button executes the Glow effect of the <mx: Glow> label.

2. Calling results between different components
Next we will create a set of numbers from fuzzy to clear when the user clicks the button.
1. In Design mode, drag a Label component from the Components panel to the application, and set the Label attribute as follows: ID: myLabel
Text: 4 8 15 16 23 42
X: 40
Y: 100

2. convert to Source mode and define the blur effect. Enter the following code under the <mx: Glow> label: <mx: blur id = "numberBlur" blurXFrom = "10.0" blurXTo = "0.0" blurYFrom = "10.0" blurYTo = "0.0" duration = "2000"/>

3. specify the Label component as the target component in the <mx: Blur> Label: <mx: blur id = "numberBlur" target = "{myLabel}" blurXFrom = "10.0" blurXTo = "0.0" blurYFrom = "10.0" blurYTo = "0.0" duration = "2000"/>

4. in the <mx: Button> label, specify the click event as blur: <mx: button id = "myButton" label = "View" x = "40" y = "60" click = "numberBlur. play (); "mouseUpEffect =" {buttonGlow} "/>

5. in the <mx: label> Label, set the visible attribute to false to hide the label component: <mx: label id = "myLabel" text = "4 8 15 16 23 42" x = "40" y = "100" visible = "false"/>

6. when you click the View button, set the visible attribute of the Label component to true to display the Label component: <mx: button id = "myButton" label = "View" x = "40" y = "60" click = "numberBlur. play (); myLabel. visible = true "mouseUpEffect =" {buttonGlow} "/>

The complete code is as follows: <? Xml version = "1.0" encoding = "UTF-8"?>
<Mx: Application xmlns: mx = "http://www.macromedia.com/2005/mxml" xmlns = "*" layout = "absolute" click = "numberBlur. play ()">
<Mx: Glow id = "buttonGlow" color = "0x99ff66" alphaFrom = "1.0" alphaTo = "1.3" duration = "1500"/>
<Mx: blur id = "numberBlur" target = "{myLabel}" blurXFrom = "10.0" blurXTo = "0.0" blurYFrom = "10.0" blurYTo = "0.0" duration = "2000"/>
<Mx: Button id = "myButton" label = "View" x = "40" y = "60" click = "numberBlur. play (); myLabel. visible = true "mouseUpEffect =" {buttonGlow} "/>
<Mx: Label id = "myLabel" text = "4 8 15 16 16 23 42" x = "40" y = "100" visible = "false"/>
</Mx: Application>

7. Save the file.
8. Click the Run button on the toolbar to compile the application.
The browser will run your Flex application. After you click the View button, a set of numbers will change from fuzzy to clear.
3. Create a merging Effect
Next we will create a set of numbers from fuzzy to clear and the Label component moves 20 px from top to bottom when the user clicks the button.
1. In Source mode, enter the following code before the <mx: Blur> tag: <mx: Parallel id = "BlurMoveShow">
</Mx: Parallel>

2. Cut the <mx: Blur> label of the entire sentence before </mx: Parallel>. Replace <mx: Blur> with the sub-tag of <mx: Parallel>.
3. <mx: Blur> label, select target = "{myLabel}", and cut it to <mx: Parallel>, as follows: <mx: parallel id = "BlurMoveShow" target = "{myLabel}">

4. Define the moving effect. Enter the following code after the <mx: Blur> label: <mx: Move id = "numberMove" yBy = "20" duration = "2000"/>

The Label component moves 20 PX down in 2 seconds.
The complete <mx: Parallel> label is as follows: <mx: Parallel id = "BlurMoveShow" target = "{myLabel}">
<Mx: Blur id = "numberBlur" blurXFrom = "10.0" blurXTo = "0.0" blurYFrom = "10.0" blurYTo = "0.0" duration = "2000"/>
<Mx: Move id = "numberMove" yBy = "20" duration= "2000"/>
</Mx: Parallel>

5. in the <mx: Button> label, set the effect of the click event to BlurMoveShow. The Code is as follows: <mx: button id = "myButton" label = "View" x = "40" y = "60" click = "BlurMoveShow. play (); myLabel. visible = true "mouseUpEffect =" {buttonGlow} "/>

6. Save the file.
7. Click the Run button on the toolbar to compile the application.
The browser will run your Flex application. After you click the View button, a set of numbers are changed from fuzzy to clear and the numbers are moved down.