Motion Myth
For some reason lots of people seem to think that ActionScript animation creates smoother animation than the Flash timeline. This is simply not true. The timeline is just as capable of creating “smooth” animations as ActionScript is.
On the timeline, if you want a smoother animation, use a framerate around 30fps and put more space between your keyframes.
ActionScript vs. Timeline
Students sometimes ask me when to use coded animation and when to use timeline animation. The answer is more complicated than you might expect. Here’s a basic set of rules:
TIMELINE ANIMATION IS FOR:
- animation that is always the same (static animation)
ACTIONSCRIPT ANIMATION IS FOR:
- interactive animation
- random animation
- animation driven from an outside source like an rss feed
- complex, static physics simulations that would be hard to animate on the timeline
- complex interactive physics simulation
- time-based animation—that is, animation that always runs at the same speed independent of framerate
When I first started using Flash, I programmed all my animation and avoided the timeline completely. This approach had an upside and a downside. The upside was that I learned a whole lot about making things move on the screen with code. The downside was that coding static animation is generally more time consuming then doing it on the timeline. Since coding static animations can be a good learning experience, I always tell my students to abide by the above list, but that the real choice of using ActionScript or timeline animation is up to them.
First Encounter With TweenLite
Until recently I had steered clear of all tweening engines for no reason in particular other than that I understood all the inner workings of them and would usually just write out motion math from memory when needed. A few months ago I was working as a consultant on a project with a few designers and a programmer. I knew that the designers liked to use tweening engines like Fuse, Tweener and TweenLite. I figured since they were using them, I should become familiar with them. I had also recently seen a graph about the speed of different tweening engines and made a note to myself to check out TweenLite. After a 5-minute explanation from a designer, I was up and running with TweenLite. I thought it was cool, but didn’t think I’d find myself using it regularly.
When I got home that night I felt like playing with it a little more and I created this.
Download TweenLite Play (12.8 KB, 1,965 hits)
The source for this is a bit advanced, I recommend reading through this post before playing with this file.
I had a class the following day and I decided to add a short TweenLite demo into the lesson plan. It was about this point that I started to realize the potential power of TweenLite. The library is so elegantly designed that my students picked it up almost immediately.
What is Time Based Animation?
TweenLite creates time-based animation. This means that if you tell a tween to last 2 seconds. It will always last 2 seconds no matter what framerate the SWF happens to be playing at. When a SWF runs on a slow computer it might not be able to run at the framerate you intended. If your SWF has timeline animation, the animation will look like its playing in slow motion. If your animation is time-based (like TweenLite), it will appear more choppy, but will still run at the same speed:
Move the fps slider to see the difference between a TweenLite frame-based tween and a normal Flash timeline tween. Note that the frame-based tween continues to take approximately 2 seconds to complete at any framerate. Whereas the Flash timeline tween is entirely dependent on the framerate of the SWF.
Getting Started
The first thing you need to do to start working with TweenLite is to download it. Extract the zip and grab the “gs” folder. You can put it in your classpath or you can just place it next to your FLA. Once you’ve done either of those two things you’ll be ready to go.
In order to use TweenLite we need to import it. TweenLite uses the same static easing functions that Flash’s internal tweening engine uses, so when using TweenLite we generally have two import statements:
import gs.TweenLite; import fl.motion.easing.*;
Add that code to your timeline, draw a box on your stage and convert it to a movie clip. Give it an instance name of box and add one more line of code to your timeline:
TweenLite.to(box,2,{x:400});
Make sure your box is somewhere on the left hand side of the stage and then test your movie. If you’ve done everything correctly, your box should move to 400 on the x axis. The TweenLite.to() method is really handy and very easy to understand. It takes three arguments. The first is the display object to tween. The second is how long the tween should take, and the third is an object that tells TweenLite which properties to tween.
Let’s change our call to TweenLite.to() a little bit:
TweenLite.to(box,3 ,{x:400, rotation:180, scaleX:2, scaleY:2});
This time, we tell our tween to last three seconds and we start playing with more than one property at a time. We move to 400 on the x, rotate to 180 and scale the movie clip up to 200%. Test your movie and have a look.
By default TweenLite uses a quadratic ease out equation. All the different types of tweens we can use are defined in the fl.motion.easing package:
The third argument of the TweenLite.to() method has a few special properties that give us more control over the tween. The first one is ease, this is where we use the functions from the fl.motion.easing package. Try a couple different values to get a feel for the different types of easing:
// note that most tweens have an easeOut, easeIn and easeInOut constant.
// easeOut
TweenLite.to(box,3 ,{x:400, rotation:180, scaleX:2, scaleY:2, ease:Bounce.easeOut});
// easeIn
TweenLite.to(box,3 ,{x:400, rotation:180, scaleX:2, scaleY:2, ease:Bounce.easeIn});
// easeInOut
TweenLite.to(box,3 ,{x:400, rotation:180, scaleX:2, scaleY:2, ease:Bounce.easeInOut});
Just understanding the way these few aspects of TweenLite work is enough to start using it for basic applications. At this point you might want to take a break and play around with the TweenLite.to() method.
Continuing…
After playing around a bit, I wondered how to use one type of tween on the x axis and another type of tween on the y. This is easily accomplished with the overwrite property. Try this code in your timeline:
TweenLite.to(box, 2,{y: 300, ease:Bounce.easeOut, overwrite:false});
The above creates a gravity effect by combining the default quadratic tween with the Bounce.easeOut function. Because the overwrite property is false, the second tween doesn’t overwrite the first tween. Instead, it tweens independently.
After playing with the overwrite property for awhile, I wanted to run another function after the tween was complete. This is done by setting the onComplete property. Try running this code in your timeline:
}
After doing this I assumed there must be an easy way to pass parameters to your onComplete function. For this task, there’s another property called onCompleteParams which takes an array of arguments to pass to the onComplete function. This means that you can have a bunch of objects that all use the same onComplete function. So, if we didn’t want to specifically reference box in our onJump function, we could replace lines 9-16 of the previous script with the following:
TweenLite.to(box, 2,{y: 300,
ease: Bounce.easeOut,
overwrite: false,
onComplete: onJump,
onCompleteParams: [box]});
function onJump(mc:MovieClip):void {
TweenLite.to(mc, 1,{y: 100, rotation:180, ease:Back.easeOut});
}
Relative Positioning
There are three more extremely useful parts of TweenLite worth mentioning. The first one is really simple. If you pass a string to a property rather than a numeric value, that tells TweenLite to use relative positioning. So if you write:
TweenLite.to(box, 1,{y: 100});
Your telling TweenLite to set the y position of box to 100. But if you write:
TweenLite.to(box, 1,{y: "100"});
Your telling TweenLite to add 100 pixels to the current y position of box. Try this code out:
}
Every time we click the stage, the box eases 40 pixels to the right.
Delay
The delay property simply adds a delay before your tween starts. Consider the following code:
TweenLite.to(box, 1, {x:300});
TweenLite.to(box, 1, {y:300, overwrite:false, delay:.5})
TweenLite.to(box, .5, {scaleX:.5, overwrite:false, delay:.9})
We combine three tweens but start them at different times. The result is that the box moves right, then left and then towards the end of the tween, the box scales to 50% width. The delay property is really nice for creating short sequences of events.
From Method
The TweenLite.from() method works just like the TweenLite.to() method except that it tweens from the specified values in your third argument rather than to them. I’ve found this very useful for intro animations. You can just lay all your movie clips on the stage where you want them to end up – then add some TweenLite code to tween them into position. Take a look at this example:
click on this SWF to replay the animation
Download Fake Banner (11.9 KB, 1,219 hits)
You might want to download the FLA above and take a look at it. All the movie clips have just been placed on the stage exactly where I want them to end up. I then use TweenLite.from() to animate them:
}
It’s this type of easily scripted animation that sold me on TweenLite. I really like the Flash timeline and use it for static animation 90% of the time – there are some types of animation that are just better done by hand. However, for simple things like the above example TweenLite is absolutely perfect.
It’s important to note that you’ll need to go to this link : http://blog.greensock.com/tweenliteas3/ and download TweenLite in order for any of the code in the post to work. It’s also worth taking a look at the excellent documentation that you’ll find at that same link.
You might also like
 |
 |
 |
 |
Brilliant introduction – thanks. I’ve used tweenlite for basic animation for a few months, but this has really helped me grab some other principles.
Much appreciated – thanks!
You’re welcome
Be successful.