Flex Tutorial-Use behavior

Tutorial This tutorial will learn:
First, use Mxml to create behavior.
Second, the effect is invoked between different components.
Third, create a synthetic effect.
First, use Mxml to create behavior.
Below we will create an effect that will glow when the user clicks on the button.
1. In source mode, enter the following code after <mx:Application> to define a glow 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 button's properties as follows:
Id:mybutton
Label:view
X:40
y:603. In the Properties panel, click the View by Category button. And find the properties of the effects type.

4. Assign the Mouseupeffect to a luminous effect. As follows:
Mouseupeffect:{buttonglow} in Source mode,<mx:button> the label code as follows:
<mx:button x= "y=" 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 the View button. The View button will perform a luminous effect on the <mx:Glow> label.

Second, invoke effects between different components
Here we will make a number that will appear from Blur to clear when the user clicks on the button and the label component appears.
1. In design mode, drag a label component from the components panel into the application and set the Label property as follows:
Id:mylabel
Text:4 8 15 16 23 42
X:40
y:1002. Convert to source mode, define the blur effect, and 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= ""/> 3. The target component of the <mx:Blur> label that specifies the fuzzy effect of the label component:
<mx:blur id= "Numberblur" target= "{MyLabel}" blurxfrom= "10.0" blurxto= "0.0" bluryfrom= "10.0" bluryto= "0.0" duration = "/>" 4. Specify the Click event as a blur effect in the <mx:Button> tab:
<mx:button id= "MyButton" label= "View" x= "y=" "click=" Numberblur.play (); "mouseupeffect=" {buttonglow} "/> 5. In the <mx:label> tab, set the Visible property to False to hide the label component:
<mx:label id= "MyLabel" text= "4 8" x= "" y= "", visible= "false"/> 6. When the user clicks the View button, the Visible property of the label component is set to True to display the label component:
<mx:button id= "MyButton" label= "View" x= "y=" "click=" Numberblur.play (); Mylabel.visible=true "mouseupeffect=" The complete code for the "{Buttonglow}"/> 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 = "/>"
<mx:button id= "MyButton" label= "View" x= "y=" "click=" Numberblur.play (); Mylabel.visible=true "mouseupeffect=" ' {buttonglow} '/>
<mx:label id= "MyLabel" text= "4 8" x= "" y= "," 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. When you click the View button, a set of numbers changes from Blur to clear.
Third, create a synthetic effect
Below we will make a label component will appear a set of numbers from blur to clear when the user clicks the button, and the label component moves from top to bottom 20px position.
1. In source mode, enter the following code before the <mx:Blur> label:
<mx:parallel id= "Blurmoveshow" >
</mx:Parallel> 2. Cut the whole sentence <mx:Blur> label to the </mx:Parallel> front. Make <mx:Blur> a child label for <mx:Parallel>.
3.<mx:blur> tab, select Target= "{MyLabel}" and cut to <mx:Parallel> as follows:
<mx:parallel id= "Blurmoveshow" target= "{MyLabel}" > 4. Define the move effect. After the <mx:Blur> label, enter the following code:
<mx:move id= "Numbermove" yby= "duration="/> The label component will move down 20px in 2 seconds.
The complete <mx:Parallel> tags are 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= "a"/>
<mx:move id= "Numbermove" yby= "duration=" "/>"
</mx:Parallel> 5. In <mx:Button> tab, the effect of changing the Click event is set to Blurmoveshow and the code is as follows:
<mx:button id= "MyButton" label= "View" x= "y=" "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. When you click the View button, a set of numbers changes from Blur to clear and the group of numbers moves down.