Flex Chinese help Chapter 5 flex usage

Chapter 5 flex usage

Adobe Flex behavior allows you to add animations and motion to an application to respond to users and programming activities. Action is a combination of a trigger and an effect. A trigger is an activity, such as clicking on a component, the component gets the focus, or the component is visible. The effect is a change in visibility or audiability of the target component, measured in milliseconds. Examples of effects include fading out, changing the size, or moving the component.

This section describes how to add behavior in the flex user interface. The specific content includes how to use mxml to create behaviors, how to call an effect from different components, and how to combine multiple effects to produce a compositing effect.

Create an action

You want to create an action. When a button is clicked by a user, it turns green. After one and a half seconds, the button turns green when it leaves, indicating that it has been clicked.

1. Select the lessons project in the navigation view, select File> New> mxml application, and create a file named behaviors. mxml.
2. Set behaviors. mxml to the compiled default file, and select set as default application from the association menu.
3. in the mxml editor source code mode, after the <mx: Application> label, define the green effect: <mx: glow id = "buttonglow" color = "0x99ff66" alphafrom = "1.0" alphato = "0.3" Duration = "1500"/>
The green effect is very full at the beginning, and then gradually becomes transparent, but not completely transparent. Turns pale green to indicate that the button has been clicked.

4. In design mode, drag a panel container from the component View to the layout, and set its corresponding attributes:

Width: 200 Height: 300

X: 10

Y: 10

5. Drag a button control from the component View to the Panel and set its corresponding properties:

ID: mybutton label: View

X: 40

Y: 60

6. In the attribute view, click category view/Category view in the toolbar to view the attributes, and then find the effect category/Effects category.

The list of trigger categories corresponding to the button control.

7. type the effect ID in the wave brackets as the trigger value, and assign the green gradient effect to the mouseupeffect trigger, as shown in the following figure:

Mouseupeffect: {buttonglow}

Curly braces ({}) are required because the effects are the triggers assigned to them using data binding. In source code mode, the <mx: button> tag looks like this: <mx: button x = "40" Y = "60" label = "View" id = "mybutton" mouseupeffect = "{buttonglow}"/>

8. Save the file and run it after compilation. The result is as follows: one effect is called from different components.

Instead of component triggers, you can also use flex events to call results. In this way, the same effect can be called by different components. For example, you can use the Click Event of the button control to notify the textarea control of the effect of fade in and out.

When you click the View button of the application, you want to gradually blur the text of the label component.

1. In design mode, insert a label control under the view/View button and set the corresponding properties:

ID: mylabel text: 4 8 15 16 23 42

X: 40

Y: 100

2. Switch to the source code mode and define the green gradient effect in <mx: blur> after the <mx: glow> label:

<Mx: blur id = "numbersblur" bluryfrom = "10.0" bluryto = "0.0" blurxfrom = "10.0" blurxto = "0.0" Duration = "2000"/>

 

3. In the <mx: blur> label, specify the control named mylabel as the target control for the effect:

<Mx: blur id = "numbersblur" target = "{mylabel}" bluryfrom = "10.0" bluryto = "0.0" blurxfrom = "10.0" blurxto = "0.0" Duration = "2000"/>

In this way, the mylabel component has the setting effect.

4. In the <mx: button> tab, specify the numbersblur effect as the effect to be played by the click event:

<Mx: button id = "mybutton" x = "40" Y = "60" label = "View" mouseupeffect = "{buttonglow }"

Click = "numbersblur. Play ();"/>

When you click the button control, the application calls the play () method of the effect. Because the objective of numbersblur effect is the mylabel control, the application applies the effect to the label instead

Button.

5. In the <mx: Label> label, set the visible attribute to false to hide the label control:

<Mx: Label id = "mylabel" x = "40" Y = "100" text = "4 8 15 16 23 42" visible = "false"/>

These numbers are not displayed until the user clicks the View button.

6. When you click the "View" button, use the statement to set the "visible" attribute of the button to true to make the label control visible:

<Mx: button id = "mybutton" x = "40" Y = "60" label = "View" mouseupeffect = "{buttonglow}" Click = "numbersblur. play (); mylabel. visible = true; "/>

When you click the button, the green gradient effect starts to play and the label control becomes visible.

Enter the following code in the behaviors. mxml file:

<? XML version = "1.0" encoding = "UTF-8"?>

<Mx: Application xmlns: MX = "http://www.adobe.com/2006/mxml" layout = "absolute"> <mx: glow id = "buttonglow" color = "0x99ff66" alphafrom = "1.0" alphato = "0.3" Duration = "1500"/> <mx: blur id = "numbersblur" target = "{mylabel}" bluryfrom = "10.0" bluryto = "0.0" blurxfrom = "10.0" blurxto = "0.0" Duration = "2000"/> <mx: panel x = "10" Y = "10" width = "200" Height = "300" layout = "absolute"> <mx: button x = "40" Y = "60" label = "View" id = "mybutton" mouseupeffect = "{buttonglow}" Click = "numbersblur. play (); mylabel. visible = true; "/>

<Mx: Label x = "40" Y = "100" text = "4 8 15 16 23 42" id = "mylabel" visible = "false"/> </MX: panel> </MX: Application>

7. Save the file and run it after compilation.

To create a combination effect, you can also move the label component 20 pixels down while gaining focus. That is to say, you can combine the green gradient effect with the moving effect.

Flex provides the ability to combine more than one effect. You can use the <mx: Parallel> label or <mx: sequence> label to define a combination effect, depending on the effect you want to combine to play in parallel or in sequence. In this example, the green gradient effect and the moving effect must be performed simultaneously.

1. in source code mode, enter <mx: Parallel> In the <mx: blur> label before the <mx: Parallel> label: <mx: Parallel id = "blurmoveshow"> </MX: Parallel>
The name of a parallel combination is blurmoveshow.
2. Select the entire <mx: blur> label in the Code and paste it to the <mx: parallel> label pair to make it a sub-tag of the <mx: Parallel> label.
3. in the <mx: blur> label, select the target = "{mylabel}" attribute and move it to the <mx: Parallel> label to <mx: parallel> label attributes: <mx: Parallel id = "blurmoveshow" target = "{mylabel}">
You want the combination effect to work on the component named mylabel.

4. Define the moving effect in the <mx: blur> label after the <mx: Move> label:

You want the label control to move 20 pixels down within two seconds. The completed <mx: Parallel> tag looks like this:

 

 

<Mx: Parallel id = "blurmoveshow" target = "{mylabel}">

<Mx: blur id = "numbersblur" bluryfrom = "10.0" bluryto = "0.0" blurxfrom = "10.0" blurxto = "0.0" Duration = "2000"/>

<Mx: Move id = "numbersmove" yby = "20" Duration = "2000"/> </MX: Parallel>

5. In the <mx: button> label, replace the numbersblur effect with the blurmoveshow combination to respond to the click event:

<Mx: button id = "mybutton" x = "40" Y = "60" label = "View" mouseupeffect = "{buttonglow}" Click = "blurmoveshow. play (); mylabel. visible = true; "/>

6. Save the file and run it after compilation.

In this section, you learned how to create behaviors, call the same effect from different components, and combine multiple effects to generate the combined effect.