Flex animation effects

Flex animation effects

1. Using the self-bring effect

In Flex, unlike animating in Flash, flex tends to be more application-oriented than animated, so there's no timeline concept. Using the animated effect in Flex, you can use Flex's own effect, or custom effect, because a lot of people want to operate flex in the same way as in Flash, like making a dynamic button in Flash is easy, when the mouse moves to the top, There will be a lot of glowing dots running out (glowstone effect), this effect in Flash is very easy to achieve, but in the flex to achieve this effect is not so simple, the following is said in the flex in the use of dynamic effects and custom production.

The following are some of the effects of the self-contained flex:
Blur Blur Effect
Move Motion Effect
Fade fade in and fade out effect
Glow Luminous Effect
Resize resizing effect
Rotate Rotation effect
Zoom scale Effect
Wipeleft with mask to achieve the effect of the picture, the same, respectively, for different directions
Wiperight
Wipeup
Wipedown

Different effects need to set the same properties, such as blur effects need to set its x and Y axis of the fuzzy pixels
<mx:blur id= "Blur" blurxfrom= "0" blurxto= "/>"
And the move effect needs to set the location information
<mx:move id= "Moveeffect" xfrom= " -100"/>
Other settings can refer to the Flex language reference

Let's talk about how to use these effects. There are two ways to run these effects: one is to invoke the effect's play () method, and the other is to use a trigger to trigger the effect.
(1) Use the Play () method:

The following code:

1<?xml version= "1.0" encoding= "Utf-8"?>
2<mx:applicationxmlns:mx= "Http://www.adobe.com/2006/mxml" layout= "Absolute" >
3<mx:script>
4<! [cdata[
5private function OnClick (event:event): void{
6be.target = Event.currenttarget;
7be.play ();
8}
9]]>
10</mx:script>
11
12<mx:blurid= "Be" blurxto= "bluryto=" "duration=" "/>"
13
14<mx:panelid= "P" width= "height=" "click=" OnClick (event)/>
15</mx:application>

See in the code, to use the effect, first set an effect, such as the above <mx:blur ...> the tag is the blur effect of the mxml tag, set the effect in the Panel's Click event and then set some of the effect, such as Be.target = Event.currenttarget Sets the target component (Component) to which the effect will be applied, and after the play () method is called, the effect is played on the panel.

(2) Use the trigger to play the effect:
Use the trigger to play the effect, you can not write ActionScript code, directly on the component's effect trigger to indicate which effect to use, relatively simple and clear, but can not do more property customization, and as control play, you can do a lot of the effect of the settings to play according to the situation , first look at the code that the trigger plays:

1<?xml version= "1.0" encoding= "Utf-8"?>
2<mx:applicationxmlns:mx= "Http://www.adobe.com/2006/mxml" layout= "Absolute" >
3
4<mx:blurid= "Be" blurxto= "bluryto=" "duration=" "/>"
5
6<mx:panelid= "P" width= "$" height= "creationcompleteeffect=" {be} "/>
7</mx:application>

Look at the above code, first write the Blur effect and set the good properties, duration= "2000" This is the time to play in milliseconds.
In the panel label there is a sentence: creationcompleteeffect= "{be}" This is the trigger, is the panel component's effect trigger, when the panel component is loaded, the effect trigger will be automatically called by the system, the trigger refers to the trigger is This blur effect
There are also many triggers in flex such as:
Addedeffect trigger effect when added to container
Trigger effect when Removedeffect is removed from the container
Creationcompleteeffect triggered when a success is created
Trigger when Focusineffect gets focus
Trigger when Focusouteffect loses focus
Triggered when Hideeffect is hidden (visible=false)
Showeffect is displayed (visible=true) triggered
Rollovereffect triggered when the mouse passes over
Rollouteffect triggers when the mouse leaves
Mousedowneffect triggered when the mouse is pressed
Mouseupeffect trigger when Mouse is released
Triggered when Moveeffect is moved
Triggered when the resizeeffect is re-sized

Note: These are effect triggers and do not clutter up with event triggers. Event triggers are rollover, and event triggers are similar to effect triggers, which trigger events when a user executes a phase action, which invokes a custom event-triggering handler, which is the play () method that is triggered when a corresponding action is taken and the effect is automatically called by the system.

Now let's talk about some of the other properties of the effect:
Each effect has a reverse () method, the method is reverse playback, originally from small to large changes, and call reverse (), and then run Play (), the effect will be played from large to small.
However, it is important to note that reverse () does not play automatically, that is, it is only called reverse (), the effect does not play, he will only record that the effect is inverted, and the reverse effect will only start when the play () is called again. The call to pause () and resume () is the pause and resume effect

Startdelay This property is the playback delay for setting the effect, in milliseconds, that is, how many milliseconds to wait before the effect starts to play, such as:
<mx:blur id= "Be" blurxto= "startdelay="/>
The blur effect will not start playing until 3 seconds after calling play ()

RepeatCount This property is to set the number of repetitions of the effect, the default is 1, set to 0 is to keep looping play
<mx:blur id= "Be" blurxto= "startdelay=" repeatcount= "5"/>

Each effect has two events: Effectstart and Effectend
You can manipulate the effect in the processing function of the effect event, such as:

1<?xml version= "1.0" encoding= "Utf-8"?>
2<mx:applicationxmlns:mx= "Http://www.adobe.com/2006/mxml" layout= "Absolute" >
3<mx:script>
4<! [cdata[
5import mx.events.EffectEvent;
6public functiononeffend (e:effectevent): void{
7e.effectinstance.reverse ();
8e.effectinstance.play ();
9}
10]]>
11</mx:script>
12<mx:blurid= "Be" blurxto= "bluryto=" "duration=" "/>"
13
14<mx:panelid= "P" width= "$" height= "creationcompleteeffect=" {be} "effectend=" Oneffend (event) "/>
15</mx:application>

When the effect is finished, the system will automatically trigger the Effectend event, in the processing function, the effect instance that is currently playing the effect of the instance to reverse and play, when played, will trigger the effectend, so the cycle.

Now let's talk about the combination of effects:
Usually if you feel that applying only one effect is monotonous, you can apply the effect combination, that is, multiple effects play simultaneously or sequentially,
For example, when loading a page, you want the panel to blur to a certain extent, then move the panel to a location, and then restore the panel to its original clarity (i.e. fade blur). This analysis, a total of three effects, one, the first application of blur (from clear to mold) effect, when the blur completed, then apply the move effect, when the move is complete, then apply another blur (from the mold to the Qing) effect. So three combinations of effects are sequentially combined and run successively.

Look at the code:

1<?xml version= "1.0" encoding= "Utf-8"?>
2<mx:applicationxmlns:mx= "Http://www.adobe.com/2006/mxml" layout= "Absolute" >
3
4<mx:sequenceid= "Sequenceeffect" >
5<mx:blurid= "Beout" blurxto= "bluryto=", "duration="/>
6<mx:moveid= "mv" xto= "yto=" duration= "/>"
7<mx:blurid= "BeIn" blurxfrom= "bluryfrom=" "blurxto=" 0 "bluryto=" 0 "duration="/> "
8</mx:sequence>
9
10<mx:panelid= "P" width= "height=" mousedowneffect= "Sequenceeffect"/>
11</mx:application>

Look at the above code, <mx:sequence id= "Sequenceeffect" > tag is the sequential combination effect label, when the Sequenceeffect effect is applied, it will play in order the three sub-effects in the label.

The other thing is to play at the same time,

1<mx:parallelid= "Paralleleffect" >
2<mx:blurid= "Beout" blurxto= "bluryto=", "duration="/>
3<mx:moveid= "mv" xto= "yto=" duration= "/>"
4</mx:parallel>

This tag is the effect tag that is played simultaneously, and the sub-effects placed in it are played simultaneously, that is, the blur side moves. This can be freely combined,<mx:parallel> and <mx:Sequence> tags can be freely combined, such as first in order to play the blur first, and then play the move and hide. There's not much to say here.

The basic usage of the effect with flex comes with this, the next article will discuss the production of custom effects, and the next article will detail the effectinstance described in this article is the concept of examples and factories.

2. Make your own flex animations

It says the use of some of the dynamic effects that come with the flex system, but many developers are not satisfied with the simple gradient size, transparency, movement, masking, and so on in flex, if it's the developer of Flash, let alone, in Flash, Most people are randomly making some animation effects and so on, and the shape is changeable. But not in flex can it be achieved. Certainly not, in the flex can also customize the animation effect, just is no flash inside so simple and casual. However, after familiar with, will also feel in the Flex animation is not difficult, not much to say, to the point.

Here I first introduce the animation effect mechanism in Flex, in Fle