« MTASC reaches version 1.0 Know thy Class Library »

February 01, 2005

A Factory for Tweening

You've probably seen this example before - select a tween type from a list and click a button to watch an object move accordingly. I've seen the "how" question for this come up quite a bit and thought I'd share my solution, using the Factory design pattern.

The Factory design pattern is a creational pattern. You describe to the factory what you would like and it goes about it's business in creating it for you. This is particular useful if you don't really know what you want. In this example, you know you're going to need a tweening function, but you don't really know what tweening function you need until the program is actually running. You can defer the selection by using the Factory pattern. Enter EaseFactory.

I've created an EaseFactory class to wrap the the mx.transitions.easing package making dynamic tween selection a bit easier. Simply describe the type of tweening function you would like, and it will return the appropriate reference for you.

Here is the example in action.

Download the complete example and EaseFactory class here.

There is documentation in the class file itself, but essentially you can use EaseFactory in one of two ways:

import mx.transitions.Tween;
import com.darronschall.EaseFactory;

var factory:EaseFactory = new EaseFactory("Strong.easeInOut");
new Tween(box, "_x", factory.getEasingFunction(), 50, 300, 60);

or...

import mx.transitions.Tween;
import com.darronschall.EaseFactory;

var factory:EaseFactory = new EaseFactory("Strong");
new Tween(box, "_x", factory.getEaseInOut(), 50, 300, 60);
// or factory.getEaseIn, or factory.getEaseOut

As always, have fun!

Posted by darron at February 1, 2005 11:49 AM | TrackBack

Comments

  • Excellent stuff. I've created a similar package some time ago:

    http://stimpson.flashvacuum.net/mt/archives/2004/08/superease_1.html

    Makes for a great comparison, thanks :).

    Posted by: Bob at February 1, 2005 01:00 PM

  • The application of your tween is a bit long winded.

    I find this tween script to be the easiest to implement for actual projects, as with yours, its inspired by Penner: http://proto.layer51.com/d.aspx?f=804

    real tight.

    Posted by: Kael at February 1, 2005 02:01 PM

  • Is there any type of perfomance difference between using "import..." and "#import..."

    Why choose one over the other?

    Thanks
    Mathias

    Posted by: Mathias at February 1, 2005 02:19 PM

  • Mathias: well, #import doesn't actually exist. If you're refering to #include, yeah, there are so many differences that it's more related to your entire project than to chosing one above the other.

    '#include' is for code including -- you can add anything this way, anything you could copy&paste but want to save time and space by just meta linking them.

    'import' is for class importing; it's used for classes only and it's needed if you want to use classes on your as2 projects.

    Posted by: timb0b at February 1, 2005 02:32 PM

  • @Kael - I didn't write the Tween engine, that was provided by Macromedia in their class library that ships with Flash MX 2004. My contribution was applying the Factory pattern to select the appropriate easing function at runtime.

    @Mathias - #include is for ActionScript 1 / prototype style coding. The 'import' keyword is for ActionScript 2.

    Posted by: darron at February 1, 2005 03:02 PM

  • I am glad this subject has been brought up as I have been thinking about trying the built in Class.

    However, I tend to use Laco's MovieClip prototypes:
    http://laco.wz.cz/tween/

    Mainly because I can tween more than one property in one line, i.e.
    my_mc.tween(["_x","_y","_alpha"],[120,160,50],5,"easeOutExpo",0,{scope:this, func:myMethod, args:[a,b,c]});

    But unfortunately this instantiates a prototype on all movieclips.

    How could this kind of functionality be implemented with the MX Tween Class?

    Posted by: Steven at February 1, 2005 05:21 PM

  • Hi Every one,

    I have extended the built in mx.transitions.Tween class .
    I have and it is TweenExtended.

    You can use it to tween multiple properties in one call:

    import mx.transitions.TweenExtended;
    var _tween:TweenExtended = new TweenExtended(ball_mc, ["_x","_y","_alpha"], Regular.easeInOut, [ball_mc._x, ball_mc._y, ball_mc._alpha], [50, 350, 50], 5, true);
    //
    _tween.onMotionFinished = function(obj) {
    _tween.continueTo([150, 50, 90],5);
    }


    I have created a MXP
    The MXP include codehints and help with examples of use.
    download here:
    http://www.sqcircle.com/downloads/tweenextended.zip

    I hope this helps you guys.

    George

    Posted by: George at March 3, 2005 08:38 AM

Post a comment

Remember personal info?