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

Tags: ActionScript, animation, as3, controls, Design, Game Development, movement, Timers, Tutorial

This entry was posted on Wednesday, March 11th, 2009 at 9:50 am and is filed under Freebies. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.