Sequence is a tween animation engine for ActionScript 3. It has been designed by programmers for programmers, with robustness and understandability in mind.
Unlike most of the alternative AS3 tween engines, Sequence doesn’t contain convenience functions. Every sequence of tweens — no matter how complex — is created by repeatedly calling one of two methods (add() and addDelay()) which add individual tweens and delays into the sequence. After a sequence has been built, it can be started. Because we wanted to maximize the control for the programmers using this library, and wanted to avoid building in magic, you also need to explicitly stop each sequence if you want an animation to stop before its intended finish.
Sequences can be reused, so if you want to have a fade in and a fade out for the mouse over of a custom button, for example, the tween sequences for fade in and fade out can be created once when instantiating the button, and then reused every time the user mouses over the button. If you intend to use a lot of tweens, this approach of reusing sequence objects helps to avoid the lag posed by garbage collection kicking in when a tween engine releases lots of objects during each tween. Just remember to stop a sequence before starting it again.
Download
- Download Sequence — updated May 29, 2009
Usage examples
Tween alpha from 0 to 1 with a selected easing and make a function call when done:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // Create a new Sequence object
var sequence:Sequence = new Sequence();
// Set alpha starting value to 0 by adding a tween with zero length
sequence.add({target:this, alpha:0});
// Add fade in by tweening alpha to 1 with a duration of 1 second
sequence.add({target:this, duration:1, alpha:1, easing:Regular.easeIn});
// Call myFunction after the alpha tween is done
sequence.add({call:myFunction});
// Start the tween
sequence.start(); |
Sequentially fade out and remove every child object:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | // Create a new Sequence object
var sequence:Sequence = new Sequence();
// Loop through children of 'this' to create the tween sequence
for (var i:uint = 0; i < this.numChildren; i++)
{
var child:DisplayObject = this.getChildAt(i);
// Add a fade out tween over 1 second
sequence.add({target:child, duration:1, alpha:0});
// Add a callback function to remove the child after the tween
sequence.add({call:removeChild, parameters:[child]});
}
// After the tween sequence has been created, start the sequence
sequence.start(); |
Overlapping tweens with a callback function:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | // Create a new Sequence object
var sequence:Sequence = new Sequence();
for (var i:uint = 0; i < numChildren; i++)
{
var child:DisplayObject = getChildAt(i);
// Add a fade out tween over 1 second, but set the step
// duration to 0. Setting stepDuration to 0 starts the
// next sequence step immediately instead of waiting for
// the current sequence step to finish.
sequence.add({target:child, alpha:0, duration:1, stepDuration:0});
// Add a callback function to remove the child after
// the tween. Because stepDuration is 0 in the previous
// sequence step, this sequence step will start immediately.
// The callback function will be called only after a delay
// of 1 second. The next sequence step (fade out of the
// next child) will start 0.1 seconds after this step,
// creating the effect of overlapping tweens.
sequence.add({call:removeChild, parameters:[child], delay:1, stepDuration:0.1});
}
// After the tween sequence has been created, start the sequence
sequence.start(); |
You can also listen to sequence player updates while tweening:
1 2 3 4 5 | // Add listener to get notified that the sequences have been updated Sequence.addEventListener(Sequence.SEQUENCES_UPDATED, updateView); // Remove listener (for example in your final callback function) Sequence.removeEventListener(Sequence.SEQUENCES_UPDATED, updateView); |
2 Comments
This is so useful, thank you for sharing.
Thanks! Share the word. :)