Freebies

March 11, 2009

Using Tweener in AS3 to Move Objects

More articles by »
Written by: Par
Tags: , , , , , , , ,
tweener_tn

Share on TwitterShare on TumblrSubmit to StumbleUponSave on DeliciousDigg ThisSubmit to reddit

If Flash’s regular Tween class isn’t cutting it, Tweener is definitely a great option. Actually, just forget Flash’s default Tween class and use Tweener instead.  Why? Well my biggest beef with Flash’s Tween class is that you have to create your Tweens Globally or Garbage Collection will scoop them up in the middle of a tween and your in a lot of trouble.  In some cases you just have a frozen tween, but if functionality is dependent on a Tween completing, you have a real issue on your hands. In that case, it’s definitely time to use Tweener, or start declaring your Tweens globally (which isn’t a bad thing, just sometimes annoying) .

Maybe you’re entirely new to this Tweener thing. Wondering what it is or why in the world you would ever want to use it. Let me give you a list of things you can use Tweener for.

  • fading in and out any Display Object (MovieClip, TextField, Graphic).
  • scaling an object up and down or in and out over time.
  • moving an object across the screen with easing over time.
  • creating a timer.
  • rotating an object with easing over time.

Pretty plain and simple stuff but very effective.  What makes it so special is you just tell Tweener to work and it goes and does everything without you needing to keep up with it. For example, I say Tweener move this box across the screen fade it out and rotation it 90 degrees… Oh and make it bounce when it gets to the end. Guess what? Tweener does it. No problem. First of all you’re going to need to download Tweener.

Download Tweener: http://code.google.com/p/tweener/
Tweener Documentation: http://hosted.zeh.com.br/tweener/docs/en-us/

And I have to give credit to the guys who created this wonderful script: Zeh Fernando (Project Owner), Nate Chatellier (Project Member), and Arthur Debert (Project Member).

Now, Here’s how Tweener works:

Tweener is static so no need to make an object of the class to use it, it’s already ready to go. Just make sure you import it. It will be caurina.transitions.Tweener. So a simple import caurina.transitions.Tweener will do the trick.

Next just add a tween. Here’s the setup:

Tweener.addTween(DisplayObject, {parameter1:value, parameter2:value, time:seconds});

Very simple… let me explain. Whatever object you want to tween is put as the DisplayObject.  The parameters include all the parameters of the object with number values like x, y, scaleX, scaleY, alpha, and rotation. There is also the time parameter which you assign seconds to in order to setup how long you want the Tween to last.   Here’s four examples:

Alright :) I went ahead and included the code that made the tween occur above the example. This should make it easier to understand. Here’s a breakdown of all the things we did above.

  • Tweener.addTween – Tell Tweener to add our tween to the tween list and start tweening.
  • s1, s2, s3, s4 – this is all the instance names of our squares that are getting the tweens applied to them.
  • useable parameters: x, y, scaleX, scaleY, rotation, alpha – or any other numeric value. Tweener will move any numeric value over time to the number it is set to be in the parameters.
  • time parameter – takes a Number in seconds that represents how long you want the tween to take
  • delay parameter – takes a Number in seconds that when used, the Tween will wait those seconds before it starts.
  • transition parameter – takes a String of what type of transition you want to use. The list of transitions and their names can be found here, http://hosted.zeh.com.br/tweener/docs/en-us/.

Alright that’s the basics of using Tweener to easily move an object.  Here’s the FLA for the example above. You will need to download Tweener and set it up so it can be imported from caurina.transitions for the FLA to compile and work.

Tweener Example FLA Source Code

Similar Posts:


Share on TwitterShare on TumblrSubmit to StumbleUponSave on DeliciousDigg ThisSubmit to reddit


About the Author

Par
Hey! Don't be surprised, I'm a flash developer. While Flash is definitely one of my favorite languages to develop in, most of all I just like making games. If you want to see the games I've developed so far head over to my website, DigitallyBold, in the link below. If you want to know more about what I'm working on now and in the future be sure to follow me on twitter.




12 Comments


  1. Tweener is great, no doubt. However I just switched from Tweener to using TweenLite in the past week – the syntax is almost identical, and TweenLite is a lot faster that Tweener. Plus it has a few features Tweener is missing. I suggest taking a look.


  2. Par

    Agreed TweenLite is great. Thanks for the information.


  3. I have download your example code and run it in Flash CS4 :( But I can’t to edit … what something wrong?

    Thank you.


  4. Neruson

    OK. So I get the entire methodology of Tweener, and i think its great! but how do i get a tween to operate when a button is pushed. I’m looking to create a slideshow that can move both ways. (linear on the x-axis)


  5. Jan Fredrik

    I really like using tweener but can i cut down on the time the Elastic uses on bouncing or is that impossible?? tnx for the help by the way :D


  6. Par

    Jan, I don’t think so. If you can I’d love to know how to myself.


  7. Shlomi

    Hi,
    i have caurina’s package and it’s working fine, now, my problem is that I need to make the object tween and also jumping, mean, in regular tween I can change the time and easing function and more but the object will move on linear line only, if I want to make something that make jumps (on parabola form – crossbow) this tween don’t support it, do anyone know how to make this kind of move with caurina’s component?
    Thanks.

    Shlomi.


  8. TweenerRules

    i dont’ think TweenLite is much faster than Tweener. in fact, i’ve had the oposite experience. besides, TweenLite has a pretty heavy licensing fee for a tweening engine that is obviously based on the open source and freely available Tweener.



Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">


Advertisement