Flex animation effects and transformations

In Flex, unlike making animations in flash, flex tends to be used in applications instead of animations, so there is no timeline concept. When using animation effects in flex, you can use the effect that comes with Flex, or customize the effect. because many people want to use the same operations in flash, for example, it is easy to create a dynamic button in flash. When you move the mouse over it, there will be a lot of glowing points to run out. This effect is very easy to implement in flash, however, it is not that simple to implement this effect in flex. The following describes how to use and customize the dynamic effect in flex.

First, we will introduce the following built-in flex effects:
Blur blur effect
Move Effect
Fade-in and fade-out effect of fade
Glow luminous effect
Resize
Rotate rotation effect
Zoom Effect
Wipeleft uses a mask to achieve the screen receiving and playback effect, which is the same as the following, which is in different directions.
Wiperight
Wipeup
Wipedown

Different effects require different attributes. For example, you need to set the Blur pixels of X and Y axes for The Blur effect.
<Mx: blur id = "Blur" blurxfrom = "0" blurxto = "10"/>
The moving effect requires setting the Moving position information.
<Mx: Move id = "moveeffect" xfrom = "-100"/>
For other settings, refer to the flex language reference.

The following describes how to use these effects. There are two ways to run these effects: one is to call the play () method of the effect, and the other is to use a trigger to trigger the effect.
(1) Use the play () method:
<? XML version = "1.0" encoding = "UTF-8"?>
<Mx: Application xmlns: MX = "http://www.adobe.com/2006/mxml" layout = "absolute">
<Mx: SCRIPT>
<! [CDATA [
Private function onclick (Event: Event): void {
Be.tar get = event. currenttarget;
Be. Play ();
}
]>
</MX: SCRIPT>

<Mx: blur id = "be" blurxto = "50" bluryto = "50" Duration = "1000"/>

<Mx: Panel id = "p" width = "200" Height = "180" Click = "onclick (event)"/>
</MX: Application>

As you can see in the Code, to use the effect, set the effect first, as shown in <mx: blur...> except get = event. currenttarget sets the target component (Component) to which the effect will be applied. after calling the play () method, the effect will be applied to the Panel for playing!

(2) trigger playback effect:
If you use a trigger to play a video, you do not need to write the ActionScript code. You can directly specify the effect on the trigger of the component, which is relatively simple and clear, however, you cannot customize more attributes. If you use as to control the playback, you can set a lot of settings for the effect and then play the video as needed. First, let's look at the trigger playback code:
<? XML version = "1.0" encoding = "UTF-8"?>
<Mx: Application xmlns: MX = "http://www.adobe.com/2006/mxml" layout = "absolute">

<Mx: blur id = "be" blurxto = "50" bluryto = "50" Duration = "2000"/>

<Mx: Panel id = "p" width = "200" Height = "180" creationcompleteeffect = "{be}"/>
</MX: Application>

After reading the above Code, first write the blur effect and set the attribute, duration = "2000" indicates the playback time in milliseconds.
The Panel tag contains the following: creationcompleteeffect = "{be}", which is the result trigger of the Panel component. When the Panel component is loaded, the system automatically calls the result trigger, which indicates the result of triggering the "be" blur.
There are also many triggers in flex, such:
Triggered when addeffect is added to the container
Triggered when removedeffect is removed from the container
Triggered when creationcompleteeffect is created successfully
Triggered when focusineffect gets the focus
Triggered when focusouteffect loses focus
Triggered when hideeffect is hidden (visible = false)
Triggered when showeffect is displayed (visible = true)
Triggered when the rolovereffect mouse passes
Triggered when rollouteffect leaves the mouse
Mousedowneffect triggered when the mouse is pressed
Triggered when mouseupeffect is released
Triggered when moveeffect is moved
Resizeeffect triggered by reorganization hour

Note: These are all results triggers. Do not confuse them with event triggers. The event trigger is a rolover, and the event trigger is similar to the effect trigger. The event trigger triggers an event when the user executes an operation and will call a Custom Event trigger processing function, the results trigger is the play () method that is triggered when a corresponding operation is executed and automatically called by the system.

Let's talk about some other properties of the effect:
Each effect has a reverse (); method, which is reverse playback. If the original changes from small to large, and call reverse (); and then run Play, the effect will be played from large to small.
Note that reverse (); will not play automatically, that is, if you call reverse ();, the effect will not be played, and he will only record that the effect is reversed, however, you need to call play () and then reverse the effect to start playing. Pause () and resume () are called to pause and Resume playback.

The startdelay attribute sets the playback latency of the effect, in milliseconds, that is, the playback starts after the number of milliseconds, for example:
<Mx: blur id = "be" blurxto = "50" startdelay= "3000"/>
The Blur effect will be played 3 seconds after play () is called.

The repeatcount attribute sets the number of repeattimes for the effect. The default value is 1. If it is set to 0, the playback will not stop.
<Mx: blur id = "be" blurxto = "50" startdelay= "3000" repeatcount = "5"/>

Each effect has two events: effectstart and effectend.
You can perform operations on the effect in the processing function of the effect event, such:

<? XML version = "1.0" encoding = "UTF-8"?>
<Mx: Application xmlns: MX = "http://www.adobe.com/2006/mxml" layout = "absolute">
<Mx: SCRIPT>
<! [CDATA [
Import MX. Events. deletevent;
Public Function oneffend (E: deletevent): void {
E. effectinstance. Reverse ();
E. Using tinstance. Play ();
}
]>
</MX: SCRIPT>
<Mx: blur id = "be" blurxto = "50" bluryto = "50" Duration = "2000"/>

<Mx: Panel id = "p" width = "200" Height = "180" creationcompleteeffect = "{be}" Your tend = "oneffend (event)"/>
</MX: Application>

When the effect is played, the system will automatically trigger the tend event. In the processing function, the system will reverse and play the effect instance, that is, the current playback effect instance. When the playback is complete, it will trigger tend event again, so it will keep repeating!

Now let's talk about the combination of effects:
Generally, if you think that only one effect is monotonous, you can apply a combination of effects, that is, multiple effects can be played simultaneously or sequentially,
For example, when loading a page, you want to blur the Panel to a certain extent, move the Panel to a certain position, and then restore the panel to the original opacity (that is, deprecated the Blur ). In this analysis, three effects are used. One is to apply the blur effect (from clear to model) first, and then apply the move effect when the Blur completes. When the move is complete, then apply another blur (from model to clear) effect. In this way, the three effect combinations are sequentially combined and run successively. Let's take a look at the effect: Let's take a look at the Code:

<? XML version = "1.0" encoding = "UTF-8"?>
<Mx: Application xmlns: MX = "http://www.adobe.com/2006/mxml" layout = "absolute">

<Mx: sequence id = "sequenceeffect">
<Mx: blur id = "beout" blurxto = "50" bluryto = "50" Duration = "500"/>
<Mx: Move id = "mv" xto = "200" yto = "150" Duration = "500"/>
<Mx: blur id = "bein" blurxfrom = "50" bluryfrom = "50" blurxto = "0" bluryto = "0" Duration = "500"/>
</MX: sequence>

<Mx: Panel id = "p" width = "200" Height = "180" mousedowneffect = "sequenceeffect"/>
</MX: Application>

Based on the above Code, <mx: sequence id = "sequenceeffect"> A tag is a sequential combination of Results labels. When the sequenceeffect effect is applied, it plays the three sub-effects in the tag in sequence.

In addition, the video is played at the same time,
<Mx: Parallel id = "paralleleffect">
<Mx: blur id = "beout" blurxto = "50" bluryto = "50" Duration = "500"/>
<Mx: Move id = "mv" xto = "200" yto = "150" Duration = "500"/>
</MX: Parallel>

This label is the effect tag for simultaneous playback. All the sub-effects in it will be played simultaneously, that is, one side is blurred and one side is moved. This can be freely combined. The <mx: Parallel> and <mx: sequence> tags can all be freely combined. For example, you can play fuzzy playback first in order, and then play mobile and hidden playback at the same time. I will not talk about it here.

These are the basic usage of the results that come with Flex. The next article will discuss how to create custom results. The next article will detail the concept of instance and factory mentioned above.