Tweening with Actionscript

May 1st, 2007 · 5 Comments

Sometimes, it is just easier to tween with code. Sometimes there is no option. Tweening with the tween class is most effective for repetitive animations, and animations of movieclips created or attached with code.

Tween is a word that comes from between. The reasoning for this is that either through code, or timeline based tweens, you give it the start and finish settings, and then the parts in between get filled in automatically.

With this in mind, the idea of the tween class is very simple. You tell it what to tween, how to tween it, the start and end of the tween and how long to tween it.

Code (actionscript)
  1. //      At the start of your code, you need to import the tween and easing classes.
  2.  
  3. import mx.transitions.Tween;
  4. import mx.transitions.easing.*;
  5.  
  6. /*
  7. Without the import the code will not work.
  8.  
  9. Next step is to create a variable for the tween to be associated with.
  10. The ‘:Tween’ is added after the variable name so Flash knows what type of
  11. variable it is.
  12. */
  13.  
  14. var myTween:Tween = new Tween(target_mc, "_alpha", Strong.easeOut, 0, 100, 1, true);

Code Breakdown:

target_mc — Name of the movieClip or symbol to animate
“_alpha” — Name of the property of the target movieClip to animate
Strong.easeOut — Type of easing applied to the animation. Details on this below
0 — Starting value of the “_alpha” property
100 — Ending value of the “_alpha” property
1 — Number of seconds or frames to animate for
true — Can be true or false. True tells the tween to use seconds, false will use frames.

Another way to look at is is:

var myTween:Tween = new Tween(tweenTarget_mc, “propertyToTween”, easingStyle.easeInOut, startingValue, endingValue, duration, useSeconds);

You have a few options for the type of easing you can use. Each style will change the look and feel of your tween. Some work well in some cases, and others don’t. It’s a good idea to get to know the general look of each easing type so you’ll know what to try when the time comes.

The different easing types you have are:

Back – Exceeds the end value, and “floats” back the set end value.
Bounce – Like back, it exceeds the final value, but then dips below the set end value again and then animates back to the end value.
Elastic – Like when you twang a rubber band…
Regular – Normal easing, no fancy bounces applied to it.
Strong – Like regular but a bit more noticeable (applies some emphasis to your tween).
None – Plain tween, like you get with the default timeline tweens.

With each of these easing types, you also have three methods you can assign.

easeIn – Will make the start of the animation slower, and the end a little quicker.
easeOut – Will slow the animation down at the end and speed up the start.
easeInOut – Slows both the beginning and the end of the tween, and really speed up the middle.

Trying different combinations will provide different results. Strong.easeOut is nice for alphas because it really shows off the transition.

Bookmark this with: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Technorati
  • Slashdot
  • Furl
  • Ma.gnolia
  • NewsVine
  • Spurl
  • StumbleUpon
  • Reddit
  • Netscape
  • YahooMyWeb

Tags: Flash Tutorials · Actionscript 2.0 · Tutorials

5 responses so far Comments

  • 1 wyatt // Sep 5, 2007 at 2:57 pm

    thanks for the informative and detailed tutorials.
    if you would be so kind as to submit a tutorial that allows a user to do what i am at the moment doing, it would be greatly appreciated. (response box). i’m presently working on my first site and would like to have such as you have.
    peace & blessings

  • 2 Alex // Sep 7, 2007 at 3:02 pm

    Sorry Wyatt, what exactly would you like a tutorial for? If you like this site, have a look at WordPress, which is what this site runs on.

  • 3 Entries Tagged as ‘Flash Tutorials’ « kaZetku // Feb 2, 2008 at 5:57 pm

    […] 1st, 2007 ยท 2 Comments Sometimes, it is just easier to tween with code. Sometimes there is no option. Tweening with the […]

  • 4 tyler // Apr 30, 2008 at 8:42 pm

    i’m trying to set up MC that goes to 0% alpha on rollover and FADES to 100% on roll out. this is was i have so far but its not working

    import fl.transitions.*;
    import fl.transitions.easing.*;

    thumb2_mc.addEventListener(MouseEvent.ROLL_OVER,changeAlpha);
    thumb2_mc.addEventListener(MouseEvent.ROLL_OUT,fadeOut);

    var outTween:Tween

    function changeAlpha(event:MouseEvent):void {
    event.target.alpha = 0

    }

    function fadeOut(event:MouseEvent):void {
    outTween:Tween = new Tween(thumb2_mc, “alpha”, None.easeNone, 0, 1, 1, true);

    }

    CAN YOU PLEASE HELP ME

  • 5 Newbie // Jul 11, 2008 at 5:24 am

    Hey,
    I figured out how to tween a movie clip to another location on the stage when I scroll over a different mc. Could you tell me how to motion tween with actionscript 2.0 so that instead of just giving the mc a definite set of coordinates, I can tell it to move a certain distance away from its location.

    For example, if i have an mc at 40, 40 and I want to get it to motion tween to 50, 50, how do I tell it to move 10 and 10 from where it is, rather than telling it to go directly to 40, 40. I want to do this so that when it is at 50, 50, it’s next move will be to 60, 60, rather than jumping back to 40, 40 and going to 50, 50 again.

    I appreciate any help, and I really appreciate the help you’ve already given this aspiring flash developer. Thanks!

Leave a Comment