Flex Common effects

Source: Internet
Author: User
Tags addchild
Common effect classes:

Animateproperty: Animated Properties
Blur: Fuzzy
Desolve: Dissolving
Fade: Withered
Glow: Glow
Iris: Pupil enlargement shrinks
Move: Moving
Pause: Freeze
Resize: Changing size
Rotate: Rotate
SoundEffect: Sound Effects
(Wipeleft, Wiperight, Wipeup, Wipedown): Wiping
Zoom: Zoom in and Zoom out

Sequence: Sequential playback combination

Parallel: Simultaneous playback combination

Common trigger animation Effect mode:

Addedeffect: Add container
Creationcompleteeffect: Create complete
Focusineffect: Get keyboard input
Focusouteffect: Lost keyboard input
The Hideeffect:visable property is set to False
Mousedowneffect: Mouse Down
Mouseupeffect: mouse button up
Moveeffect: Dragged
Resizeeffect: Reset Size
Removedeffect: Removed
Rollouteffect: Mouse moves outside the control
Rollovereffect: Move the mouse over the control
The Showeffect:visable property is set to True

Part of the example:

1:glow (Glow)

Code:

<mx:glow id= "Glow" duration= "1000"

alphafrom= "0.6" alphato= "0.2"

blurxfrom= "0.0" blurxto= "50.0"

bluryfrom= "0.0" bluryto= "50.0"

Color= "0xFFFFFF"/>

Duratuion is a special effects time of 1000 milliseconds.

Alphafrom is the transparency starting from 0.6

Alphato is transparent to 0.2

Blurxfrom is the fuzzy start position (relative to the control) where x is placed.

Blurxto is the fuzzy end position (relative to the control) where x is placed.

Bluryfrom is the fuzzy start position (relative to the control) where Y is placed.

Bluryto is the fuzzy end position (relative to the control) where Y is placed.

Color is the colour of light

2:sequence (sequential) Bounce (bounce)

Code:

Import mx.effects.easing.*;

<mx:sequence id= "Movepausemove" >

<mx:move yby= " -150" duration= "1000" easingfunction= "Bounce.easeout"/>

<mx:move yby= "duration=" "1000" easingfunction= "Bounce.easein"/>

</mx:Sequence>

Yby is the function in the y direction.

Duratuion is a special effects time of 1000 milliseconds.

Easingfunction is a loose motion.

Bounce.easeout is jumping out of action.

Bounce.easein is a bounce-back action

Action to control:

<mx:image source= ". /assets/zh_cn_ptn_090722.png "

Mousedowneffect= "{Movepausemove}"

Id= "Image4"/>

Custom effects:

Each effect is composed of two elements, namely effectinstance effect and effect class factory. So when customizing the effect, you also want to pair the subclass of these two classes and inherit from the Effectinstance class and the effect class respectively. Such as:

 

public class Testeffect extends Effect {public var alp:number;   
        public Var col:uint;   
            Public Function Testeffect (target:object=null) {super (target);   
        Instanceclass = testinstance; } Override protected function InitInstance (instance:ieffectinstance): void{Super.ini   
            Tinstance (instance);   
            Testinstance (instance). Col = This.col;   
        Testinstance (instance). ALP = This.alp; } public class Testinstance extends Effectinstance {public var ALP:   
        number;   
           
        public Var col:uint;   
        Public Function Testinstance (target:object) {super (target);   
            Override public Function Play (): void{super.play ();   
            (target as displayobject). Alpha = This.alp; var Shape:flexshapE = new Flexshape ();   
            Shape.graphics.beginFill (col,1.0);   
            Shape.graphics.drawRect (0,0, (target as Displayobject). Width, (target as Displayobject). height);   
            Shape.graphics.endFill ();   
            var uicomp:uicomponent = new UIComponent ();   
            Uicomp.addchild (Shape);   
        UIComponent (target). AddChild (Uicomp);   
 }   
    }


public class Testeffect extends Effect {public var alp:number;
                public Var col:uint;
                        Public Function Testeffect (target:object=null) {super (target);
                Instanceclass = testinstance;
                        } Override protected function InitInstance (instance:ieffectinstance): void{
                        Super.initinstance (instance);
                        Testinstance (instance). Col = This.col;
                Testinstance (instance). ALP = This.alp; } public class Testinstance extends Effectinstance {public var ALP:
                number;
                
                public Var col:uint;
                Public Function Testinstance (target:object) {super (target); } Override Public Function play(): void{super.play ();
                        (target as displayobject). Alpha = This.alp;
                        var shape:flexshape = new Flexshape ();
                        Shape.graphics.beginFill (col,1.0);
                        Shape.graphics.drawRect (0,0, (target as Displayobject). Width, (target as Displayobject). height);
                        Shape.graphics.endFill ();
                        var uicomp:uicomponent = new UIComponent ();
                        Uicomp.addchild (Shape);
                UIComponent (target). AddChild (Uicomp);
 }
        }

1 when you want to manually play an effect, call the effect of the playing method can be, in order to stabilize, generally call the play method before calling the end, to ensure that the previous effect has ended.

2 When the object is added to the trigger method: Uicompnent.setstyle ("Trigger mode", special effects object);

3 using the combination effect (sequence and parallel), the Addchild method of the effect can be invoked to add the child effect to the combined effect object. Such as:

Sequence.addchild (move);
Sequence.addchild (Glow);


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.