In this small document I will give some explanation on using Tweens to animate the flash elements in your UI! Animating transitions will greatly increase the quality and look of your UI, and best of all, it's really easy to do! First I feel I have to clarify that a 'Tween' is the term for an animation in flash, so I might alternate between the words animation/tween/transition in this article. There are many different 'Tweening' libraries, including one inside scaleform which you can use without getting any files. You are free to use whatever library you like, just make sure you are allowed to freely use it for commercial purposes if you plan on releasing your addon to the workshop.
For this tutorial I will be using a popular library called TweenLite. There are several reasons I prefer this library over standard flash/scaleform tweening classes. First of all TweenLite allows you to use the library completely free of charge for commercial or non-commercial projects, as long as the end user does not have to pay any kind of fee to gain access to the finished product. Furthermore TweenLite provides some useful extras like allowing you to specify callbacks on all kind of events, can tween colours, allows you to update the destination halfway through and provides several extra easing possibilities. Lastly it is worth noting that the syntax for doing all this is extremely easy, making it very nice to work with.
First of all download TweenLite here. Once you have downloaded the files put them in the directory with your .fla and
.as files.
In your actionscript go to the class where you would like to animate something and add the following imports:
//this is required import com.greensock.TweenLite; //this is only needed if you want some kind of easing (which I do recommend!) import com.greensock.easing.*;Once you've added these imports you're basically already halfway done tweening an element. The TweenLite syntax is the following:
TweenLite.to(tween_this_object:MovieClip, duration:Numer, parameters:Object);As you can see this is pretty straightforward except for the parameters object. The parameters object is basically just an object with some properties you set, which TweenLite then checks and acts upon. You define the object like { property1:value, property2:value2} where the properties are the properties of your movieclip that you want to tween. You can add as many properties to tween as you like. Once you executed the TweenLite.to(... line, Tweenlite will start tweening the properties of the movieclip you specified from their current value to the value you specified. It is imporant you keep this in mind.
//make sure our movieclip is at the right starting position tweening_mc.y = 600; //make it invisible at the start tweening_mc.alpha = 0; //tween tweening_mc to y:200 and alpha:1 in 0.9 seconds TweenLite.to(tweening_mc, 0.9, {y:200, alpha:1});So this is the absolute basis of TweenLite, it's really not too bad. Below I will discuss some other useful functions TweenLite has.
You now know how to make something fly from one point to the other in one linear motion, pretty boring stuff. To tweak the way your animation looks you can add
an ease, which is basically a function that controls the way a property is set from one frame to the other. You can make a transition overshoot it's goal and then
snap back for example, or make it 'bounce', or just do simple speeding up and then speeding down again towards the target. Trust me when I say this makes a big
difference in the look of your animations.
TweenLite provides the following easing functions:
TweenLite provides the possibility to add callbacks on certain events in the tween. The most commonly used one is the onComplete but there are multiple possibilities. You can add a callback in the tween parameters by doing something like onComplete:someHandlerFunction. Here is a list of all possible events:
Here is an example of your a TweenLite call with easing and a callback added:
TweenLite.to( tweening_mc, //movieclip to be tweened 0.9, //duration { //start of parameter object y:200, //target Y alpha:1, //target alpha ease:Bounce.easeOut, //easing function onComplete:function(){ //onComplete callback trace('tweening done!'); //you could even add a new tween here! } } );
In this article I've discussed the things I find relevant or useful, TweenLite has a lot of other nice features though, be sure to also have a look at the original documentation at the TweenLite website.