On devices use TweenLite. There's been almost absolutely no reason II could ever find to go beyond it. Greensock is your friend. Use it. Appreciate it. I used it in hundreds of projects.

Ask a more specific question and I can easily tell you how to do it with my favorite, TweenLite.

Here's the thing about Flash and your end users system. When you try to set up animation sequences by a certain duration of time, the clients computer may not be fast enough to be ready when that duration comes around. I always daisy chain my animations based on events.

Here's a quick TweenLite example of an animation happening and then triggering another function once it is complete (handling your need for differences in page animation durations):

import com.greensock.TweenLite;

import com.greensock.easing.Quad;

 

// create a rectangle shape

var c:Sprite = new Sprite();

c.graphics.beginFill(0xFF0000,1);

c.graphics.drawRect(0,0,100,100);

c.graphics.endFill();

addChild(c);

 

// animate the box from position 0,0 to 100,0 (to the right, 100 pixels, over 1 second)

// the easing is just for fun....

TweenLite.to(c,1,{x:100,easing:Quad.easeInOut,onComplete:nextAnimation });

 

function nextAnimation():void

{

     // this fires off after the box is at 100,0..

     // now move it down to 100,100 (just move it down)

     TweenLite.to(c,1,{y:100,easing:Quad.easeInOut});

}

What happened there is I made a red square, added it to the stage and then animated it from 0,0 to 100,0.. then by using the onComplete property and specifying a function name it will call that function as soon as the animation was over. Once it is, that function is called and then I move the box from 100,0 to 100,100...

Point of all of this is you can "daisy chain" your animations on their completedness rather than a specific "time". Being your clients machine may be slower than you suspect, things can take longer to render. So let TweenLite use the onComplete event to trigger the next part of the animation. Then you're guaranteed the animation will happen only after the clients machine has completed the current animation, no matter its speed.

That's how I'd approach it.

Yep ease is the property.

Daisy chaining is one way to do it but it does make you continuously need to supply the method name. Not really a bad thing but you can also utilize a TweenEvent which will fire off when your animations do various things.

I use it more to make adjustments as a tween is updating (TweenEvent.UPDATE). It has a COMPLETE handler as well. You can keep track of where you are in your animation in many ways and use a single function that gets called any time a tween completes. Then that function is reused over and over and does the proper thing based on what you're doing. Then you centralize all the events into that one function rather than making a bunch of functions to daisy chain. It's just another strategy that can be cleaner for much more complex tween situations.

If you need to be able to pause things you can make a public or global variable that you can continually set the current animation to. For example in a frame script:

var currentAnimation:TweenLite;

Then when creating an animation using TweenLite.to() just assign it, e.g.:

currentAnimation = TweenLite.to(c,1,{x:100});

That will assign the TweenLite reference to currentAnimation. Then at any time you can use the methods pause(), play(), resume(), restart().

e.g. when you want to pause:

currentAnimation.pause();

Then whatever is assigned to that TweenLite will pause. When you want to resume just run:

currentAnimation.resume();

Then at the end whatever onComplete function you listed will still fire off.