Animating with GreenSock Animation Platform

Lately, I was asked to produce a flash animation for which I was given free initiative. As usual, I started coding in old fashion AS2, using MX tweens for the first time. I was pleased with the result but it appeared slightly slow, and it sometimes lost synchronization with the music – not that it was really ment to be in rythm though.

Anyway, I ended up with the decision to use AS3 instead, supposedly faster, and most of all, I discovered the Greensock Animation Platform, also known as GSAP – currently in V12. This API not only manages animation tweens in the simplest way, it also deals with your timeline sequences with ease.

I’ll just show sample code used in various sequences – you can watch a demo of the whole animation here

For example, this is how I animate the clouds back and forth :

masterTimeline is the main holder where I’ll place all the sequences in the animation. It’s quite convenient as I can simply replay the whole animation calling masterTimeline.restart(), nice and easy, don’t you think ?

nuageTimeline is another timeline nested in the main timeline. It contains the tweens for each of the 3 clouds. You’ll notice they’re instances of TweenMax, which has greater options than TweenLite, like repeat and yoyo for example. I won’t detail all these parameters, GreenSock provides great documentation.

An other example is the first sequence, where the Barong head flies around before it hides behind the temple

The Api allows to define labels, as I did in the first 2 lines above, label “start” is 1 second in my main timeline, for instance.

The sequence starts with the scene zooming out from a close up on the character’s face. This Tween is inserted at label “start” in my timeline. I think good practice would be to define all the labels in the code just before setting the tweens in the animation, so you can have them all in one place if you need to adjust later on.

Afterwards, I set a sequence of 3 series of tweens, each nested in an individual timeline, nested in turn in a global timeline intended for the barong character, which is finally included to the main timeline. Notice how I can add multiple tweens at the same time with the appendMultiple() method. This sequence makes the character fly to the left, then back to the right and finally dive, as it shrinks to a tiny size at the same stime. The rotation tweens make it bend its head as it moves from one side to the other.

This sequence is placed at label “startbarong” which is 5 seconds in the animation, so it will run just after the scene zooms out during 4 seconds.

Here’s one last example of animation management :

There are 40 flowers to animate from the center of the screen like some kind of explosion or erruption. Final positions, rotations and scales are known, we just need to give the animation a slight chaotic feel by not synchronizing this set of tweens.

The array fleurs is initialized somewhere in the beginning of the code. As the flowers are all placed on the scene in their final position, we just need to store the attributes for x y scalex scaley & rotation.  The flower movieclips are named “fran1”, “fran2″… etc

A simple loop inserts the tweens in the mastertimeline at label “startexplode” with random durations ranging from 2 to 3 seconds :

As I’m writting this post, I learnt the TweenLite class was implemented with new methods in the current V12 of GSAP, such as to() and add() which are supposed to be replacing all the insert(), append(), insertMultiple(), appendMultiple() methods. I guess it will make coding even more intuitive as well as reduce code size, so I must give it a try in the future.

Well, I haven’t finished with the GreenSock API, as they also provide the awsome LoaderMax which I’ll also try and probably show you rather sooner than later.

But the most appealing and most promising, in my opinion, is their JavaScript Animation Platform, which I definitely need to try as soon as I can spare some time !