Question

I use Flex 4.5 to do program a simple user interface.

I want to add the popups easing animations, especially Elastic (spark.effects.easing.Elastic).

Is there a way to change the attribute of the Elastic animation? it bounces back and forth too much, is there a way to change that behavior or to mimic that behavior using some other easing animation that does provide the options I need ?

Example code can be found at:

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/effects/easing/Elastic.html

thanks

Answer 1

You can subclass the spark Elastic ease class to expose a couple more customization variables like this:

package
{
    import mx.effects.easing.Elastic;
    import spark.effects.easing.Elastic;

    /** Expose some properties on the spark Elastic easer */
    public class MyElastic extends spark.effects.easing.Elastic
    {
        /**
         *  (Copied from the ASDoc for mx.effects.easing.Elastic.easeout()):
         *  @param b Specifies the initial position of a component.
         *  @param c Specifies the total change in position of the component.
         *  @param d Specifies the duration of the effect, in milliseconds.
         *  @param a Specifies the amplitude of the sine wave.
         *  @param p Specifies the period of the sine wave.
         */
        public var b:Number = 0;
        public var c:Number = 1;
        public var d:Number = 1;
        public var a:Number = 0;
        public var p:Number = 0;

        override public function ease(fraction:Number):Number
        {
            return mx.effects.easing.Elastic.easeOut(fraction, b, c, d, a, p);

            // if these properties aren't enough control then you can copy and paste 
            // the code from mx.effects.easing.Ellastic.easeOut() directly into this 
            // overridden method and tweak the code for your needs from there.
        }
    }
}

If those variables don’t provide the control you are looking for then you could just copy and paste the code from mx.effects.easing.Ellastic.easeOut() into MyElastic.ease() and have complete control over the tweaks you need to make there.

Here is a simple sample application that demonstrates this subclass:

<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:local="*">

    <s:Button click="mover.play()" label="move" x="100" y="50" />

    <s:Button id="btn" y="100" x="50" />
    <s:Button id="btn2" y="150" x="50" />

    <fx:Declarations>
        <s:Parallel id="mover">
            <s:Move target="{btn}" xBy="100">
                <s:easer>
                    <s:Elastic />
                </s:easer>
            </s:Move>
            <s:Move target="{btn2}" xBy="100">
                <s:easer>
                    <local:MyElastic a="3" />
                </s:easer>
            </s:Move>
        </s:Parallel>
    </fx:Declarations>

</s:WindowedApplication>