How to create and animation effects in the flex Application No. 1

The flex behavior mechanism allows developers to easily add animation effects to applications, making the user interface more colorful. This chapter describes how to create and animation effects in a flex application.

9.1 what is behavior

Behavior in Flex is a combination of trigger and effect. When a user performs an operation on the interface, if a button is clicked, the trigger is activated to make certain visual or auditory changes to the target component, for example, playing an animation or making a sound. A trigger can be triggered by user operations or programs. A trigger can correspond to multiple effects.

9.1.1 triggers and Effects

Trigger usage is very simple. It can be used as an attribute in the mxml tag, called in the <mx: style> tag, or called using the setstyle () and getstyle () methods in ActionScript. Trigger name: triggerevent name + "effect" suffix. According to this naming convention, the trigger name of the mousedown event is mousedowneffect. The trigger names in flex include.

L addedeffect: triggered when a component is added to a container.

L creationcompleteeffect: triggered when the component is created.

L focusineffect: triggered when the component obtains the focus.

L focusouteffect: triggered when the component loses focus.

L hideeffect: triggered when the visible attribute of the component is changed to false.

L mousedowneffect: triggered when you press the mouse.

L mouseupeffect: triggered when the mouse is released.

L moveeffect: triggered when the component is moved.

L removedeffect: triggered when the component is removed.

L resizeeffect: triggered when the component changes.

L rollouteffect: triggered when the mouse is removed from the component.

L rolovereffect: triggered when you move the cursor over the component.

L showeffect: triggered when the visible attribute of the component is changed to true.

The animation effect of flex consists of a factory class and an instance class. The factory class is used to process events and control animations. Its name is the name of the effect, such as Zoom. Generally, we create a factory-class instance in the application, set necessary parameters, and associate the instance with the trigger. The instance class is used to achieve the animation effect. When the trigger is triggered or the play () method is called, the factory class creates an instance class instance to play the desired effect. After the execution, this instance will be destroyed. If one effect corresponds to multiple target objects, each target object will have its own instance. The instance class naming rule is "effect name + instance. For example, if the factory class name Is Zoom, the instance class name is zoominstance. This mechanism of effect is an application of the factory mode in the design mode. When the effect is executed, zoominstance is not run.

The following figure 9-1 shows the hierarchical relationship between the factory class and the instance class. The effect class is an abstract base class and is the basic factory class that defines all effects. The effectinstance class is the base class that defines all effect instance subclasses. In an application, instances of the effect class are not created. Instead, instances of a subclass, such as mask or tween, are created.

Figure 9-1 factory and instance types

9.1.2 simple effect component

Flex provides a wide range of performance components. Because the effect is a time gradient process, all effects have the Duration Attribute, which is used to set the playback time (in milliseconds ). You can also set the repeatcount attribute and repeatdelay attribute to control the number of playback times and the interval (in milliseconds) of the playback effect ). If you want to call the trigger after it is triggered for a period of time, you can use the startdelay attribute.

1) animation effect of animateproperty 

Animateproperty is used to set the animation effect for the attributes or styles of a component. We can use its property to set the animation effect attribute on the target object, and then set the fromvalue attribute and tovalue attribute to provide the starting and ending values of the attribute for the effect. For example, the following code uses the mousedowneffect trigger. When an image is clicked, The animateproperty effect is triggered. Within one second, the scalex attribute of the image object is changed from 1 to 2 and is horizontally stretched. The Code is as follows:

<Mx: animateproperty id = "animateproperty" property = "scalex" fromvalue = "1" tovalue = "2" Duration = "1000"/>

<Mx: imageid = "IMG" Source = "assets/plane.png" mousedowneffect = "{animateproperty}"/>

If you want to set the effect through the style, you can set the isstyle attribute to true, and then set the style of the target object through the setstyle () method to achieve the purpose of setting the effect.

2) blur the result of blur

Blur is a blur effect. This effect uses the Flash. Filters. blurfilter filter. If you apply the blur effect to a component, you cannot apply the blurfilter to the component or apply the blur effect again. The following code uses the mousedowneffect trigger of the image object to trigger the blur effect. In one second, the image object will gradually become blurred. The Code is as follows:

<Mx: blur id = "blurimage" Duration = "1000" blurxfrom = "0.0" blurxto = "10.0"

Bluryfrom = "0.0" bluryto = "10.0" type = "codeph" text = "/codeph"/>

<Mx: imageid = "IMG" Source = "assets/plane.png" mousedowneffect = "{blurimage}"/>