Welcome!

Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Categories
Tags
Team Think Labs | Sequencing Actions in AS3 or JavaScript
636
single,single-post,postid-636,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive

Sequencing Actions in AS3 or JavaScript

The Problem With Programming Looooong Sequences

Sometimes you need to script a series of events to happen after each other. You see this all the time in game tutorials where you need to program voiceovers, tweens, pauses, and setting different properties.

For any of us that have done this in the past know that without a good structure, this will become totally unwieldy and confusing. Typically to pull this off you need to create a whole mess of functions to trigger at the end of each action that triggers the next action. Chaining events like this together can quickly become difficult to manage. (e.g. ‘onButtonInComplete’, ‘onVoiceIntroComplete’, ‘onJumpComplete’, etc, etc).

Another problem also exists if you want to abort in the middle of a script. To quit running the sequence, you have to keep track of exactly where in the sequence you are. Usually this is a function that just goes down a list of all possible parts and quits out of them. It’s time consuming, and makes it easy to break things on accident depending on how complicated your script is.

Don’t worry, there is a way to keep your sanity.

Introducing ActionChain

The ActionChain class is a simple utility built using the Command Pattern which helps to keep these sequences organized. You just create an action, and then add the action to ActionChain. The interface is very easy to work with as well.

(Note: below is the AS3 example, though included in the examples is a javascript port).

var introScript:ActionChain = new ActionChain();
introScript.push(new PlaySoundAction("hello","voiceover") ); // Plays the 'hello' voiceover
introScript.push(new PauseAction(1000) ); // Pauses 1 second.
introScript.push(new FrameLabelAction(mcCharacter, "jump") ); // Plays the frame label 'jump' in the mcCharacter clip
introScript.push(new PauseAction(500) ); // Pauses half a second
introScript.push(new TweenAction( TweenMax.to(mcButton, 1, {y:100}) ) ); // Tweens the button clip
introScript.push(new PlaySoundAction("goodbye","voiceover") ); // Plays the 'goodbye' voiceover once the button is done animating.

Then when you want to play the script, it’s as easy as writing:

introScript.play();

Also, if you have a skip button or just want to be able to abort your script, that’s easy too:

introScript.stop();

I’ve included a number of different helpful actions to get you started, but making your own custom ones only takes a few minutes. Some additional actions that are helpful include:

MultiAction:

A group of regular actions that you want to happen simultaneously. The next action in your script won’t go off until all of the actions in your MultiAction finish running.

var multi:MultiAction = new MultiAction();
multi.add(new PlaySoundAction("voiceover","hello") ); // Plays the 'hello' voiceover
multi.add(new TweenAction( TweenMax.to(mcButton, 1, {y:100}) ) ); // Tweens the button clip

introScript.push(multi); // The sound will play and the button will tween up at the same time. The next action will not trigger until both of these are done.

SetPropertyAction:

Sets a property of an object. For instance, if you want a button to be visible before one of the other actions trigger, you can write:

introScript.push( new SetPropertyAction(mcButton, "visible", true) );
SetPropertyAction will also allow you to pass in a function to get your value.

// This give you the opposite of whatever the visibility currently is.
function toggleVisibleValue($mcClip:MovieClip):Boolean {
return !$mcClip.visible;
}

// Notice the third parameter is our function name, and the fourth is an array of parameters to pass through.
introScript.push( new SetPropertyAction(mcButton, "visible", toggleVisibleValue, [mcButton]) );

FunctionAction:

This will simply call a function.

introScript.push( new FunctionAction(someFunction, [param1,param2]) );

 

How To Make Your Own Actions

Making new actions types is very easy. All you need to do is extend the AbstractAction class, and override the start(), stop(), and destroy() methods. You’ll also need to call this.completed.dispatch() when your action is completed.

start() will start your action in motion, and monitor when the action is done.

stop() will abort the action if it is still running.

destroy() will make sure that stop() is called and also free up memory for garbage collection.

this.completed.dispatch() will let ActionChain know when your custom event is done.

I’ve included ExampleAction.as in the AS3 version of the download for a better picture of how to make your own action.

Quit Your Yappin’ and Get to the Goods!

Ok, for examples of how to work with this thing (both in javascript and actionscript) and the code, download the files here:

ActionChain (ActionScript)
ActionChain (Javascript)

For background on the Command Design Pattern which ActionChain was based on check out these other articles:

Command Pattern on ActiveTuts
Command Pattern on Wikipedia

Hopefully you will put this code to good use!