Dota 2 Tweens/Animations

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.

TweenLite

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.

Getting Started

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.

So how about an example? Let's say I want to let a movieclip called tweening_mc to fly from y=600 to y=200 while fading in, in 0.9 seconds. In this case the resulting code would be:
//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.

Easing

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:

Now to use these easing functions just add them to your parameters object like ease:Bounce.easeInOut and you're done. You can use three different easing functions for each type: .easeIn, which applies the ease at the start of the animation; .easeOut, which applies the ease at the end of the animation and .easeInOut, which applies it to both the start and finish. See the example at the end for an example of how a tween with easing looks in code.

Callbacks

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:

You can also pass extra arguments to the handler functions of these events, for documentation on that visit the TweenLite website.

Full Example

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!
        }
    }
);

Additional Documentation

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.