
  1. Code
  2. Workflow

Thinking in Commands: Part 2 of 2


During this tutorial we'll further extend the command framework from the first part. We'll create a scene management framework, with easily understandable and maintainable code.

Final Result Preview

Let's take a look at the final result we'll be working towards:

Scene Management

One reasonable approach to break a complete Flash application into smaller pieces is to manage it as separate scenes. The Flash IDE allows you to perform scene management without writing any code, but we're going to approach things completely differently. We will create our own scene management framework.

In our scene management framework, we regard scenes as the smallest building blocks for a complete Flash application. Each scene is comprised of an intro command and an outro command. An intro command initializes everything you need for a scene, such as adding a logo to the display list of your container sprite. An outro command does just the opposite, such as removing the logo from the container sprite. You may view transition from one scene to another as the outro command of the first scene followed by the intro command of the second. In this way, we can put scenes together and manage their transitions very easily.

Take a look at this figure. One scene is just like a piece of a puzzle; the left end representing the intro command, and the right end being the outro command.

Performing a transition from scene A to scene B is just like connecting the two pieces together. The outro command of scene A is executed first, the intro command of scene B is executed next, then the scene transition is complete.

It is basically the exact same concept to perform a transition from scene A to scene C. We just have to put puzzle pieces A and C together, instead of A and B.

Creating Some More Commands

Before we begin building the scene management framework, let's first create some more command classes that will be later used in this tutorial. You can just focus on the overridden execute() methods of the following command classes, which is the most important part of these classes.

GreenSock Tweening Commands

Without a doubt, GreenSock Tweening Platform is one of the best open-source tweening frameworks out there. Scene transitions usually involve lots of tweenings, and GreenSock Tweening Platform has always been my first choice when it comes to creating tweens. We are going to encapsulate this framework into command classes to integrate it with our command framework. Download the TweenMax library, and install it.

We'll be using the to() and from() methods from the TweenMax class. The TweenMax class provides a way to handle the completion of a tween by invoking a function referenced by the optional "onComplete" property in the "vars" parameter. We'll assign the command's complete() method to this property, so the complete() method is invoked when the tween is done. Below is the code for the commands encapsulating these two methods. Create a new directory called "greensock" inside the "commands" directory you created in the first part of this tutorial, and save these classes as TweenMaxTo.as and TweenMaxFrom.as respectively.

(Be sure to re-read my introduction to commands if you need to refresh your memory.)

TweenMaxTo will tween the target object from its current position (or blur, or alpha, or ...) to the new position (etc) that you specify with the vars object. TweenMaxFrom does the opposite.

If you're familiar enough with the GreenSock Tweening Platform, you might also want to encapsulate the TweenLite and TweenNano classes to fit your needs.

Display Object Container Commands

As previously mentioned, the intro and outro of a scene may very likely involve adding display objects to a display object container and removing the objects from the container. So here let's encapsulate the addChild() and removeChild() methods into commands.

Event Listener Commands

We'll also be using commands to handle the adding and removing of event listeners, so let's encapsulate the addEventListener() and removeEventListener() methods.

Utility Commands

Finally, we'll need some utility commands to make things easier. The SetProperties command sets an object's properties from another object's property values:

We can use it like this:

...and it will set the x and y properties of the target object to the values specified.

The Dummy command simply does nothing and completes the command execution. The purpose of this command is to serve as a "placeholder" and shall become clear later on:

The Wait command waits for a specified amount of delay time and then completes the command execution without doing anything:

You might wonder why we would need a command that simply occupies time if we already have a "delay" constructor parameter in the base Command class. Sometimes we'd like to design constructors to only have parameters that really have something to do with the command's specific functionality, and including the "delay" time as one parameter amongst them is kind of interrupting the "uniformity" in terms of parameter purposes. So instead of writing the code below:

We could write something like this:

The "delay" parameters no longer unnecessarily catch your eyes in the SomeFancyCommand constructors. They have now been moved to the Wait commands to make things cleaner.

The Scene Management Framework

Here's our Scene class, representing a single "puzzle piece". What each method does is explained in the comments. This class is pretty much a "skeleton" class, since every method either creates a dummy command or does nothing. To get things juicier, these methods have to be overridden. Create a new "scenes" directory in your project's source folder to store these new classes:

And here's the SceneManager class that handles scene transitions, details also explained in the comments. Note that I've added a "dummy-proof variable" to protect transitions from being broken by untimely invocation to the setScene() method.

Okay. Everything's set and we're ready to go. It's time to create an actual application with the framework we've built.

Step 1: Create a Flash Document

Open the Flash IDE and create a new Flash document. Name it "SceneTransitions" and create a document class of the same name. Also, you can place a background on the stage if you like.

Step 2: Create Intro Text

Create 4 symbols with text and name them according to the following image. Throughout this example, export every symbol for ActionScript with a class name that's the same as its symbol name.

Step 3: Create Scene 1

Create symbols and name them as shown in the following image. Also, layout their instances and name them as shown. Select all the instances and convert them, as a group, to another symbol, named "Scene1Sprite." You can then delete the Scene1Sprite from the stage (but not from the library).

Step 4: Create Scene 2

Do exactly the same as the previous step, but this time select all of the instances and convert them to a symbol named "Scene2Sprite."

Step 5: The Document Class

The document class is surprisingly simple. Just create a scene manager and tell the manager to set the current scene to an intro scene.

Step 6: Create the Intro Scene

The initial scene we set for the scene manager is an intro scene. As its name suggests, this scene is simply an intro to our main scene (rather than being the intro portion of our main scene's "puzzle piece"). The intro command (created from the override createIntroCommand() method) of this intro scene moves instances of symbols to the center of the stage (by the SetProperties command), adds them to the container, tweens them from zero scale to 100% scale, and blurs them out to zero alpha, one-after-another. This is achieved by linking all the separate commands together with a single serial command (as you should remember from Part One).

When the intro command is complete, the onSceneSet() method is invoked, and at this point the sceneManager property is available, and its setScene() method can be invoked to switch scene. In the onSceneSet() method, the scene manager's setScene() method is invoked to change to Scene1 (a class we will create in the next step). As we didn't override the createOutroCommand(), the outro command of the intro scene is a dummy command, which does nothing.

You can adjust the value of the consts to alter the tweening effects.

Step 7: Create Scene1

Now let's look at the Scene1 class. The text fields are tweened into position one-by-one; the "intro_btn" and "scene2_btn" buttons are registered with mouse-click event listeners after being tweened into position, achieved by chaining together the commands for tweening and adding listeners with a serial command.

Another thing worth mentioning is the AddChild command that adds the Scene1Sprite to the container. It is concatenated in series after a Wait command that waits for one frame. Because the TweenMax class updates all display objects in the next frame after the call to the TweenMax.from() method, sometimes you may see a quick "glimpse" of objects in their final places, before the tweening starts. The purpose of the Wait command here is to give TweenMax enough time to move objects into their proper starting places.

Step 8: Create Scene2

The Scene2 class looks pretty much like Scene1; though some text is changed:

Test the Movie

That's right, we're finally finished! Press CTRL+ENTER in the Flash IDE to test the movie and see the smooth and seamless transitions between scenes.


In this tutorial we've built our own command and scene management frameworks. We've gone through a whole lot of code, but it's totally worth it. Now that we have these frameworks at hand, scene management is done with easily understandable and maintainable code. Each Flash application can be broken down into scenes, and each scene consists of intro and outro commands. Instructions are encapsulated into commands, resulting in uniform "code appearance", which allows us to manage scene intro and outro in a very high-level way.

I hope you enjoyed it, thanks for reading!

Looking for something to help kick start your next project?