Imagine: MovieClip A is supposed to play for 87 frames, then stop. MovieClip B then slides in and when it reaches its stopping point, MovieClip C fades up. When all that’s done, we’ll load the user’s Facebook profile if they’re logged in and if not, MovieClips D and E will then sequentially animate in respectively. The code isn’t hard to write… there are just so many events and handlers that you wind up with a hundred lines of code just to handle the order of animations. Sound familiar?

We got a little tired of this problem years ago, and our solution is the SimpleSequencer. Originally released November 2008, the SimpleSequencer is basically an orchestra conductor. It takes a sequence of animations or functions and tells them to execute in a specified order. Since we’ve released our code library on GitHub, this basic functionality hasn’t changed, but we have made some improvements. In addition to adding sequenced steps, you can now add any function call to any step as well as pause the sequence before it is finished. We think it’s really easy and pretty handy.

To start a sequence, initialize a SimpleSequencer instance:

var sequence:SimpleSequencer = new SimpleSequencer();

There are two methods to add steps to your sequence:

sequence.addStep($stepId:Number, $target:EventDispatcher, $functionToCallToStart:Function, eventToListen:String, $args:Object=null);

$stepId is an arbitrary number that represents when you want the target function to fire in your sequence. The order in which you add your steps doesn’t matter, they’ll automatically get sorted so the lower the number you declare, the earlier the function will fire in the sequence. If you add multiple steps with the same $stepId they fire all at once. The sequence initializes the next step after all tasks within one $stepId are completed. $target is the class instance that throws the $eventToListen-Event once the task is completed. $functionToCallToStart is a reference to the function that starts the task.

Example:

call myStandardInOut.animateIn() and when myStandardInOut fires AnimationEvent.IN, call anotherStandardInOut.animateIn() and aThirdStandardInOut.animateIn() at the same time. Once both of them fire AnimationEvent.IN, the sequence is complete.

sequence.addStep(1, myStandardInOut, myStandardInOut.animateIn, AnimationEvent.IN);
sequence.addStep(500, anotherStandardInOut, anotherStandardInOut.animateIn, AnimationEvent.IN);
sequence.addStep(500, aThirdStandardInOut, aThirdStandardInOut.animateIn, AnimationEvent.IN);

sequence.addAsynchStep($stepId:Number, $functionToCall:Function, $args:Object=null);

This method is similar to addStep(), with the sole difference being that the sequence does not wait for the called functionality to be finished. In other words, it’s part of the sequence but we don’t care if it has some sort of event to move to the next step.

Example:

sequence.addAsynchStep(1, myStandardInOut.animateIn);

Additional arguments that you can pass into both previous methods are:

• delay – a number that is time in miliseconds

• functionToCallParams – an array of values that get passed into the $functionToCall – method

Example:

sequence.addAsynchStep(1, trace, {delay:1000, functionToCallParams:[‘test message.’]});

Start the sequence using sequence.start($restart:Boolean=false);

The start method starts the sequence if it’s not active already. The Boolean variable $restart determines if the sequence starts from the beginning or resumes where it left off after being paused. If $restart is set to true, the next step will be the first step in the sequence no matter what the current step is and if the sequencer is currently active or not.

To pause the sequence call sequence.pause();

The pause method sets a flag that deactivates the sequence after the current running step is complete. Call sequence.start() to unset the flag and/or to resume the sequence where it was left of. To restart the sequence call sequence.start(true).

SimpleSequencer dispatches two Events:

• Event.COMPLETE – fires as soon as all steps within a sequence are complete.

• Event.DEACTIVATE – dispatches after the current active step in process is complete, the sequence pauses but is not completed yet.

Note: The sequence will technically complete if sequence.pause() gets called while the last step is in process. In that case Event.COMPLETE will fire and not Event.DEACTIVATE.

There are two read only public properties that you can use to check active and pause states:

• isActive – a Boolean that is true while steps are currently in progress and not yet complete.

• isPaused – a Boolean that determines if sequence is currently paused. isPaused is true immediately after sequence.paused() is called and false immediately after sequence.start() is called.

Please note that isActive and isPaused can be true at the same time. This happens when sequence.pause() gets called and the currently running step is not complete yet. Both properties are false if the sequence is in its initial state (before it starts and after completed).

To visualize some of SimpleSequencer’s functionality we built an example. On stage are six StandardInOut animations. (Read more about our display and standard animation package here.) First we animate the first three in. Then animate all out. After that we animate four, five and six in. After that, all disappear again. All of them animate first in and then out again. The last step in the sequence is to reinitialize the same sequence again to create a loop.

You can download the fla right here. Don’t forget download and add the Big Spaceship as3 package when you test it. For a better understanding, here is the code that i used on the main timeline:

var people:Array = [	new StandardInOut(shannon),
			new StandardInOut(matt),
			new StandardInOut(jarrod),
			new StandardInOut(daniel),
			new StandardInOut(dan),
			new StandardInOut(ayaka)];
 
function animateCharactersIn($startIndex:int = 0, $endIndex:int = 5):void{
	//Sequence to animate all or a subset of the characters in.
	//StandardInOut is configured to dispatch AnimationEvent.IN if its current state is AnimationState.IN already
	//which triggers the Sequence to jump immediately to the next step.
	var s1:SimpleSequencer = new SimpleSequencer('IN');
	s1.addEventListener(Event.COMPLETE, dispatchEvent);
	for(var i:int=$startIndex; i< $endIndex+1; i++){
		var person:StandardInOut = StandardInOut(people[i]);
		s1.addStep(i, person, person.animateIn, AnimationEvent.IN );
	}
	s1.start();
}
function animateCharactersOut():void{
	//ds: Sequence to animate all characters out.
	//StandardInOut is configured to dispatch AnimationEvent.OUT if its current state is AnimationState.Out already
	//which triggers the Sequence to jump immediately to the next step.
	var s2:SimpleSequencer = new SimpleSequencer('OUT');
	s2.addEventListener(Event.COMPLETE, dispatchEvent);
	for(var i:int=0; i

A time saving tip: The sequencer will get stuck if a target object doesn’t fire the appropriate event ($eventToListen). A good practice is to code the $functionToCallToStart in a way that it immediately dispatches its corresponding complete event in case the task is already complete. If you’re writing custom classes, be really careful to insure those events get fired. For example, we added a Boolean to StandardInOut named dispatchCompleteOnUnchangedState. If set to true, that instance will dispatch AnimationEvent.IN immediately after calling animateIn() if it’s already animated in. Thus, the sequence is more robust and is less error-prone.

Besides that, the class is very easy to use and you can really sequence almost anything. Here are some more ideas:

Use it to sequence loading:

sequence.addStep(1, loader.contentLoaderInfo, loader.load, Event.COMPLETE, {functionToCallParams:[new URLRequest('myFile.swf')]});

You can also nest SimpleSequencers:

sequence.addStep(1, otherSequence, otherSequence.start, Event.COMPLETE);

Enjoy, and we hope you all find this as useful as we do.