Unlike the Flex inside random animation in Flash, and Flex applications tend to be more, rather than animation, so there is no concept of the timeline. The use of animation in Flex, you can use Flex comes Effect, or their own custom Effect, because a lot of people would like to take the same operation inside the Flash Flex, such as in Flash is easy to make a dynamic button when the mouse moves to the top there will be many luminous point ran out (firefly effect), this effect is very easy to implement in Flash, Flex inside but to achieve this effect is not so simple, here to talk about the Flex in the dynamic Service use effects and custom production.
First introduce effect comes inside Flex are the following:
Blur blur
Move moving effect
Fade fade effect
Glow luminescence effect
Resize Resize effect
Rotate rotation effect
zoom effect Zoom
the WipeLeft effect is achieved with retractable screen mask, the same below , respectively, in different directions
The WipeRight
The WipeUp
The WipeDown
Attribute set different desired effects are not the same, such as Blur effects of blurring pixels to set its X and Y axis
<mx: Blur id = "blur " blurXFrom = "0" blurXTo = "10" />
and the Move effect need to set the moved position information of
<mx: move id = "moveEffect " xFrom = "- 100" />
other settings can refer Flex language reference
here to talk about how to use these effects. To run these effects in two ways: one is the effect of calling play () method, the other is to use triggers to trigger the effect.
(1) using the play () method:
The following code:
In the code see the effect you want to use, first set a good effect, as in the above <mx: Blur ...> tag is the MXML tag blur, set a good effect and then the effect of some of the Panel's click event after setting, as a target assembly disposed be.target = event.currentTarget (component) to be applied to this effect, and then re-calling play () method, the effect will be applied in the above Panel playing!
(2) using triggers playback:
using triggers playback, you can not write ActionScript code, which specifies the use of a direct effect on the effect of the trigger assembly can, relatively simple, but it can not be more properties customization, and control playback with AS, it can be a lot of effect settings appropriate under the circumstances to play again, take a look at the code triggers play:
After watching the above code, first written by Blur effect and set properties, duration = "2000" this time is played in milliseconds.
In this way there is a tag Panel: creationCompleteEffect = "{be}" This is the trigger, the effect of the trigger assembly Panel, Panel assembly when loaded, the effect is invoked automatically by the system trigger, which trigger means the trigger be the Blur effect
: there are many triggers as the Flex inside
addedEffect effect is triggered when added to the container
removedEffect effect is triggered when the container is removed from the
trigger effect creationCompleteEffect is created successfully
triggered focusInEffect get the focus
when focusOutEffect loses focus triggered
when hideEffect is hidden (visible = false) trigger
when showEffect is displayed (visible = true) trigger
After rollOverEffect triggered when the mouse
is triggered when the mouse leaves rollOutEffect
triggered when the mouse is pressed mouseDownEffect
triggered when mouseUpEffect release the mouse
moveEffect be triggered when the movement
is triggered when resizeEffect be reformed size
Note: These are the effects triggers, and events do not trigger confusion . Event trigger is rollOver, event triggers and trigger similar effects, event trigger is triggered when the user performs relative to operational events, it will call a custom event handler is triggered, and the effect is to trigger the implementation of appropriate action to be triggered by the system automatically calls the effect of a given play () method.
Now talk about the effect of some other attribute:
Each effect has reverse (); method, which is played in reverse, originally from small to big change, and calls reverse (); then run the play (), the result It will be descending to play.
But the point to note is, reverse (); will not play automatically, that is, simply call the reverse (); if the effect does not play, he will record the effect is reversed, and again calling play () after reversal the effect starts playing. The call to pause () and resume () is pause and continue playback
startDelay this property is set to play the effect of the delay, in milliseconds, that is, how many milliseconds to wait after the effect began to play, such as:
<MX: Blur the above mentioned id = "bE" blurXTo = "50" startDelay = "3000" />
3 second after the blur effect will call the play () began playing
repeatCount this property is the number of repetitions set effect, the default is 1, set to 0, then that is continuously loop
<mx: Blur id = "be " blurXTo = "50" startDelay = "3000" repeatCount = "5" />
each effect has two events: effectStart with effectEnd
you can process the event effect which effect the function for the corresponding operations, such as:
The effect instance when the effect finishes playing, the system will automatically trigger effectEnd event, the handler inside, the effect Instance that is currently playing will be reversed and playback, when finished playing, will trigger effectEnd primary thing, this has been circulating!
Let us now talk about the effect of the combination:
usually apply only if you think the effect of a very monotonous, it can be applied in combination the effect that multiple effects while playing or order of play,
such as when the page is loaded, you want to blur to a certain Panel degree, and then moved to a position Panel, then returned to the original Panel Qingxi (i.e. Fuzzy regression). Thus analysis, a common effect of the three, a first application Blur (to clean the mold) effect, when Blur and then used in the Move effect, when the Move and then used in a further Blur (to clear the mold) effect. Such a combination of three effects that the order portfolio has run.
See above code, <mx: Sequence id = " sequenceEffect"> tag is the order of the combined effect of the label, when applied sequenceEffect effect, it will play the effect of the three sub-sequence tag inside.
While another is played,
This tag is the tag while playing effect, the effect on the child inside it will be played simultaneously, that is, while blurring while moving. This can be freely combined, <mx: Parallel> <mx : Sequence> tag can be freely combined, for example, press the play order of the first fuzzy, then the mobile playback simultaneously with or hidden. There is not much to say.
Use Flex comes with the basic usage of these effects, the next article will discuss the effect of the definition of self-produced, comes next will explain in detail the concept of the article above effectInstance that is, instances and factories.
First introduce effect comes inside Flex are the following:
Blur blur
Move moving effect
Fade fade effect
Glow luminescence effect
Resize Resize effect
Rotate rotation effect
zoom effect Zoom
the WipeLeft effect is achieved with retractable screen mask, the same below , respectively, in different directions
The WipeRight
The WipeUp
The WipeDown
Attribute set different desired effects are not the same, such as Blur effects of blurring pixels to set its X and Y axis
<mx: Blur id = "blur " blurXFrom = "0" blurXTo = "10" />
and the Move effect need to set the moved position information of
<mx: move id = "moveEffect " xFrom = "- 100" />
other settings can refer Flex language reference
here to talk about how to use these effects. To run these effects in two ways: one is the effect of calling play () method, the other is to use triggers to trigger the effect.
(1) using the play () method:
The following code:
1
<?
xml version="1.0" encoding="utf-8"
?>
2 < mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml" layout ="absolute" >
3 < mx:Script >
4 <![CDATA[
5 private function onClick(event:Event):void {
6 be.target = event.currentTarget;
7 be.play( );
8 }
9 ]]>
10 </ mx:Script >
11
12 < mx:Blur id ="be" blurXTo ="50" blurYTo ="50" duration ="1000" />
13
14 < mx:Panel id ="p" width ="200" height ="180" click ="onClick(event)" />
15 </ mx:Application >
2 < mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml" layout ="absolute" >
3 < mx:Script >
4 <![CDATA[
5 private function onClick(event:Event):void {
6 be.target = event.currentTarget;
7 be.play( );
8 }
9 ]]>
10 </ mx:Script >
11
12 < mx:Blur id ="be" blurXTo ="50" blurYTo ="50" duration ="1000" />
13
14 < mx:Panel id ="p" width ="200" height ="180" click ="onClick(event)" />
15 </ mx:Application >
In the code see the effect you want to use, first set a good effect, as in the above <mx: Blur ...> tag is the MXML tag blur, set a good effect and then the effect of some of the Panel's click event after setting, as a target assembly disposed be.target = event.currentTarget (component) to be applied to this effect, and then re-calling play () method, the effect will be applied in the above Panel playing!
(2) using triggers playback:
using triggers playback, you can not write ActionScript code, which specifies the use of a direct effect on the effect of the trigger assembly can, relatively simple, but it can not be more properties customization, and control playback with AS, it can be a lot of effect settings appropriate under the circumstances to play again, take a look at the code triggers play:
1
<?
xml version="1.0" encoding="utf-8"
?>
2 < mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml" layout ="absolute" >
3
4 < mx:Blur id ="be" blurXTo ="50" blurYTo ="50" duration ="2000" />
5
6 < mx:Panel id ="p" width ="200" height ="180" creationCompleteEffect ="{be}" />
7 </ mx:Application >
2 < mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml" layout ="absolute" >
3
4 < mx:Blur id ="be" blurXTo ="50" blurYTo ="50" duration ="2000" />
5
6 < mx:Panel id ="p" width ="200" height ="180" creationCompleteEffect ="{be}" />
7 </ mx:Application >
After watching the above code, first written by Blur effect and set properties, duration = "2000" this time is played in milliseconds.
In this way there is a tag Panel: creationCompleteEffect = "{be}" This is the trigger, the effect of the trigger assembly Panel, Panel assembly when loaded, the effect is invoked automatically by the system trigger, which trigger means the trigger be the Blur effect
: there are many triggers as the Flex inside
addedEffect effect is triggered when added to the container
removedEffect effect is triggered when the container is removed from the
trigger effect creationCompleteEffect is created successfully
triggered focusInEffect get the focus
when focusOutEffect loses focus triggered
when hideEffect is hidden (visible = false) trigger
when showEffect is displayed (visible = true) trigger
After rollOverEffect triggered when the mouse
is triggered when the mouse leaves rollOutEffect
triggered when the mouse is pressed mouseDownEffect
triggered when mouseUpEffect release the mouse
moveEffect be triggered when the movement
is triggered when resizeEffect be reformed size
Note: These are the effects triggers, and events do not trigger confusion . Event trigger is rollOver, event triggers and trigger similar effects, event trigger is triggered when the user performs relative to operational events, it will call a custom event handler is triggered, and the effect is to trigger the implementation of appropriate action to be triggered by the system automatically calls the effect of a given play () method.
Now talk about the effect of some other attribute:
Each effect has reverse (); method, which is played in reverse, originally from small to big change, and calls reverse (); then run the play (), the result It will be descending to play.
But the point to note is, reverse (); will not play automatically, that is, simply call the reverse (); if the effect does not play, he will record the effect is reversed, and again calling play () after reversal the effect starts playing. The call to pause () and resume () is pause and continue playback
startDelay this property is set to play the effect of the delay, in milliseconds, that is, how many milliseconds to wait after the effect began to play, such as:
<MX: Blur the above mentioned id = "bE" blurXTo = "50" startDelay = "3000" />
3 second after the blur effect will call the play () began playing
repeatCount this property is the number of repetitions set effect, the default is 1, set to 0, then that is continuously loop
<mx: Blur id = "be " blurXTo = "50" startDelay = "3000" repeatCount = "5" />
each effect has two events: effectStart with effectEnd
you can process the event effect which effect the function for the corresponding operations, such as:
1
<?
xml version="1.0" encoding="utf-8"
?>
2 < mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml" layout ="absolute" >
3 < mx:Script >
4 <![CDATA[
5 import mx.events.EffectEvent;
6 public function onEffEnd(e:EffectEvent):void{
7 e.effectInstance.reverse();
8 e.effectInstance.play();
9 }
10 ]]>
11 </ mx:Script >
12 < mx:Blur id ="be" blurXTo ="50" blurYTo ="50" duration ="2000" />
13
14 < mx:Panel id ="p" width ="200" height ="180" creationCompleteEffect ="{be}" effectEnd ="onEffEnd(event)" />
15 </ mx:Application >
2 < mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml" layout ="absolute" >
3 < mx:Script >
4 <![CDATA[
5 import mx.events.EffectEvent;
6 public function onEffEnd(e:EffectEvent):void{
7 e.effectInstance.reverse();
8 e.effectInstance.play();
9 }
10 ]]>
11 </ mx:Script >
12 < mx:Blur id ="be" blurXTo ="50" blurYTo ="50" duration ="2000" />
13
14 < mx:Panel id ="p" width ="200" height ="180" creationCompleteEffect ="{be}" effectEnd ="onEffEnd(event)" />
15 </ mx:Application >
The effect instance when the effect finishes playing, the system will automatically trigger effectEnd event, the handler inside, the effect Instance that is currently playing will be reversed and playback, when finished playing, will trigger effectEnd primary thing, this has been circulating!
Let us now talk about the effect of the combination:
usually apply only if you think the effect of a very monotonous, it can be applied in combination the effect that multiple effects while playing or order of play,
such as when the page is loaded, you want to blur to a certain Panel degree, and then moved to a position Panel, then returned to the original Panel Qingxi (i.e. Fuzzy regression). Thus analysis, a common effect of the three, a first application Blur (to clean the mold) effect, when Blur and then used in the Move effect, when the Move and then used in a further Blur (to clear the mold) effect. Such a combination of three effects that the order portfolio has run.
Let's look at the code:
1
<?
xml version="1.0" encoding="utf-8"
?>
2 < mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml" layout ="absolute" >
3
4 < mx:Sequence id ="sequenceEffect" >
5 < mx:Blur id ="beOut" blurXTo ="50" blurYTo ="50" duration ="500" />
6 < mx:Move id ="mv" xTo ="200" yTo ="150" duration ="500" />
7 < mx:Blur id ="beIn" blurXFrom ="50" blurYFrom ="50" blurXTo ="0" blurYTo ="0" duration ="500" />
8 </ mx:Sequence >
9
10 < mx:Panel id ="p" width ="200" height ="180" mouseDownEffect ="sequenceEffect" />
11 </ mx:Application >
2 < mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml" layout ="absolute" >
3
4 < mx:Sequence id ="sequenceEffect" >
5 < mx:Blur id ="beOut" blurXTo ="50" blurYTo ="50" duration ="500" />
6 < mx:Move id ="mv" xTo ="200" yTo ="150" duration ="500" />
7 < mx:Blur id ="beIn" blurXFrom ="50" blurYFrom ="50" blurXTo ="0" blurYTo ="0" duration ="500" />
8 </ mx:Sequence >
9
10 < mx:Panel id ="p" width ="200" height ="180" mouseDownEffect ="sequenceEffect" />
11 </ mx:Application >
See above code, <mx: Sequence id = " sequenceEffect"> tag is the order of the combined effect of the label, when applied sequenceEffect effect, it will play the effect of the three sub-sequence tag inside.
While another is played,
1
<
mx:Parallel
id
="parallelEffect"
>
2 < mx:Blur id ="beOut" blurXTo ="50" blurYTo ="50" duration ="500" />
3 < mx:Move id ="mv" xTo ="200" yTo ="150" duration ="500" />
4 </ mx:Parallel >
2 < mx:Blur id ="beOut" blurXTo ="50" blurYTo ="50" duration ="500" />
3 < mx:Move id ="mv" xTo ="200" yTo ="150" duration ="500" />
4 </ mx:Parallel >
This tag is the tag while playing effect, the effect on the child inside it will be played simultaneously, that is, while blurring while moving. This can be freely combined, <mx: Parallel> <mx : Sequence> tag can be freely combined, for example, press the play order of the first fuzzy, then the mobile playback simultaneously with or hidden. There is not much to say.
Use Flex comes with the basic usage of these effects, the next article will discuss the effect of the definition of self-produced, comes next will explain in detail the concept of the article above effectInstance that is, instances and factories.
Reproduced in: https: //my.oschina.net/lichen/blog/264878