Five Hidden Wonders of TweenLite and TweenMax

by carl schooff on February 10, 2011 · View Comments

in GreenSock Tweening Platform Tips

I’ve crammed what I could easily have stretched into a month’s worth of posts into 1 handy list. I know for certain there is something in here that you had no idea about and will find extremely useful. This claim is backed by a 90 day money-back guarantee.

Video of Wonders 1 and 2: Smart Alpha / Visibility Toggling AND the Scale Plugin

Meet the AutoAlpha and Visible plugins

This movie requires Flash Player 9

autoAlpha will toggle the visibility of a Display Object after it is done fading in or fading out.
To fade out a Display Object and set its visible property to false when it is done do this:

import com.greensock.*;
import com.greensock.plugins.TweenPlugin;
import com.greensock.plugins.AutoAlphaPlugin;
TweenPlugin.activate([AutoAlphaPlugin]);

TweenLite.to(mc, 1, {autoAlpha:0});

the visible plugin will instantly set the visible property as soon as any property is done tweening

import com.greensock.*;
import com.greensock.plugins.TweenPlugin;
import com.greensock.plugins.VisiblePlugin;
TweenPlugin.activate([VisiblePlugin]);

TweenLite.to(mc, 1, {x:100, visible:false});

Scale plugin cuts your work in half

import com.greensock.*;
import com.greensock.plugins.TweenPlugin;
import com.greensock.plugins.ScalePlugin;
TweenPlugin.activate([ScalePlugin]);

TweenLite.to(mc, 1, {scale:2});
// much better than
TweenLite.to(mc, 1, {scaleX:2, scaleY:2});

Video of Wonder 3: The SteppedEase

Use a SteppedEase to simulate choppy 12fps keyframed animation from 10 years ago.

This movie requires Flash Player 9

SteppedEase is an ease, not a plugin, so the there is no activation required. With SteppedEase you can limit your ease to only render in a few key positions… or steps.

The following will reposition mc 10 times with 10 pixels of space inbetween steps:

TweenLite.to(mc, 1, {x:100, ease:SteppedEase.create(10)});

Video of Wonder 4: FrameForward Plugin

Use the FrameForward plugin to wrap timeline-based animations

This movie requires Flash Player 9

From the Greensock documentation (as I don’t think I can say it better):
Tweens a MovieClip forward to a particular frame number, wrapping it if/when it reaches the end of the timeline. For example, if your MovieClip has 20 frames total and it is currently at frame 10 and you want tween to frame 5, a normal frame tween would go backwards from 10 to 5, but a frameForward would go from 10 to 20 (the end) and wrap to the beginning and continue tweening from 1 to 5.

Video of Wonder 5: onComplete vs onCompleteAll with allTo

Use onCompleteAll with allTo to trigger events after all Tweens have finished

This movie requires Flash Player 9

TweenMax.allTo(mcs, 1, {y:175, ease:Back.easeOut, onComplete:completeSingle}, .5, completeAll);

Notes

In all code examples above I showed you how to import just the plugins that were being used. It is perfectly safe and acceptable to import all the plugins and just activate the ones you are using. So in the case of needing AutoAlpa I could just do this:

import com.greensock.*;
import com.greensock.plugins.* //imports all plugins
TweenPlugin.activate([AutoAlphaPlugin]);

Download Demo Files

SNORKLtv_FiveWonders
*autoAlpha and Visible demo is missing.

More Resources

Must Read Tweening Tips from GreenSock

Learn how to use the plugin explorer and activate plugins in TweenLite and TweenMax

Post to Twitter Post to Facebook

  • mj

    I could have used the “ScalePlugin” last week big time. Although now that you have force me to revisit the tweening tips page I'm wondering if I should use the transformMatrix for scaling. Which, as far as typing (if you don't copy and paste) puts you right back where you started.

    Wonder what other treasures I be finding on this site in the future.

    Thanks

  • http://www.snorkl.tv/ carl schooff

    as per jack's example, transformMatrix obviously outshines plain old scale. I haven't had to scale anything big enough to push the limits of what scale can handle though. its a good tip to keep in mind though for when you need it.

    thanks, I'll try to keep the tips flowing, I have a big list.

    c

  • http://profiles.google.com/bigtroble Дмитрий Васильев

    thanks carl!

    But how use to repeat that code?

    TweenMax.allTo(mvс, 1, {y:100, ease:Back.easeOut});

  • http://profiles.google.com/bigtroble Дмитрий Васильев

    thanks carl!

    But how use to repeat that code?

    var myTimeline:TimelineMax = new TimelineMax({repeat:2, repeatDelay:1.5});

    var mvc:Array = new Array(mv1, mv2, mv3, mv4);

    myTimeline.append(TweenMax.allTo(mvc, 1, {y:100, ease:Back.easeOut}, .9));

  • http://www.snorkl.tv/ carl schooff

    hello Дмитрий Васильев ,

    it seems your timeline should repeat especially since you put

    repeat:2, repeatDelay:1.5 in the constructor.

    the code looks good

    if you want to upload a file to http://ge.tt or similar I will look at it.

    best,

    Carl

  • http://www.soundcloud.com/filthstift Filthstift

    Thanks Carl. Especially the steppedEase plugin is very interesting.!

  • snorklFan

    Hi Carl great tutorials!, i have few questions about Video of Wonder 5 :

    1) Can you be so kind and upload the file like you do in your other tutorials?
    2) How can i make bo, luke, cooter, jesse appear randomly ?

  • http://www.snorkl.tv/ carl schooff

    i uploaded the files for you. see above.

    please clarify what you mean by “appear randomly” … at random times or in random positions?

    I don’t know if I will be able to answer right away but I will get back to you. Head feels like it is being crushed from allergies.

  • snorklFan

    Time and positions is ok , by “appear randomly” i mean random order of bo, luke, cooter, jesse each time the animation starts.

    Thanks for the file Carl.

  • http://www.snorkl.tv/ carl schooff

    the main thing you need to do is shuffle the array or randomize it. there
    are many different ways.
    for a small array the method below works fine. you can google “shuffle array
    as3″ to read more.

    replace the code in my allTo_Complete.fla with this:

    import com.greensock.*;
    import com.greensock.easing.*;

    var mcs:Array = new Array(bo, luke, cooter, jesse);
    var len:int = mcs.length;
    var shuffled:Array = new Array(len);
    for(var i:int = 0; i<len; i++)
    {
    shuffled[i] = mcs.splice(int(Math.random() * (len – i)), 1)[0];
    }

    var tl:TimelineLite = new TimelineLite({});

    tl.appendMultiple(TweenMax.allTo(shuffled, 1, {y:170, ease:Back.easeOut,
    onComplete:completeSingle}, 1.5, completeAll));

    function completeSingle(){
    trace("i'm done");
    message_txt.appendText("I'm done!n");
    }
    function completeAll(){
    trace("we're all done!");
    message_txt.appendText("nWe're ALL done!nSee ya!");
    TweenMax.allTo(mcs, .5, {y:250}, .2, playAgain);
    }
    function playAgain(){
    message_txt.text="";
    TweenLite.delayedCall(3, tl.restart);
    }

    //end of code

  • http://www.snorkl.tv/ carl schooff

    hmm, pasting the code put in some funny characters. so just get the file from here:
    http://ge.tt/3fH2PUy?c

  • Aquagorillabear

    THANK YOU!!!!!!!!

blog comments powered by Disqus

Previous post:

Next post: