The Flash Connection Make mine Actionscript 3.0!

First of all, there is really no strict definition of what constitutes a "screen," but what I mean in this article when I refer to a "screen" is the layout as the user sees it. Screens, for example, might be web pages in a website, levels in a game, sections or modules of a program, etc, etc. Whenever you want to switch the display, you want to change screens. The whole concept is very informal and the definition flexible, and should be taken that way.

If you have ever written anything more than the simplest one screen flash program, you have probably been faced with the problem of how best to deal with multiple screens. Not only the screen switching, mind you, which is formidable, but also the idea of extensibility. That is, later you might want to add more screens to your application, or even take a screen from one application and bring it into another.

What I am going to show you is a structure that will allow you to do all of that, and more! The structure is not that hard to build, either! In fact, it's so simple you may wonder (like I did!) why you didn't see it before. It's completely modular, because unlike my former example of the timeline navigation, each part is definitely its own scope.

One last word about timelines and then I'll shut up about them: I'm not saying that you should never use timelines for anything, either. Use them for animation, and object "states" (for example, a deck of cards MovieClip with 52 frames with a different card on each frame, or as you'll see, the Tooltip MovieClip we are going to build), just don't use a timeline for your overall navigation. That said, let's get started!

We're going to create a simple drag-and-drop game, and it will have three screens: Intro, Learn, and Drag. Each screen will have a linked Class file with those same names: Intro.as, Learn.as, and Drag.as. Finally, there will be a document class named Main.as. I will show step by step how to build this structure into a finished application.

In Flash, create a new FLA file. Click the gray area around the stage, this will make sure the properties panel gives you the document properties. Change the frames per second to 30. Change the stage dimensions to 800 wide by 500 high. Then, let's save the file. Choose File, Save. In the process of saving the file, create a new folder somewhere in your file system (this part is up to you) and call it "structure." Save the file as "good_structure.fla."

Now we are going to make our first screen. From the Insert Menu, choose "New Symbol." Make sure the MovieClip symbol is selected, and name it "Intro" for a library name. Check the box that says "Export for Actionscript." The second box, "Export in frame 1" should already be selected also. Next, accept the default class name "Intro," which was named after the library name. Click OK.

Click OK on the following warning:

Now we are in the symbol's editing mode where we can design our first screen. The first thing to do is to scroll with the scroll bars until the little + sign is somewhere in the center of the screen. This is the registration point of the symbol. This will also be the center of the screen we are designing. Choose the rectangle tool. Draw a rectangle of any size and color, but with no stroke. Next, click it to select it. In the properties panel, give it a width of 800 and a height of 500. Next, use the align panel with the "to stage" button selected to center the rectangle horizontally and vertically. Double click the layer name, and type in "bg," then lock it. This layer will be the background, but will also make a handy visual representation of the stage. We're keeping the registration point in the center so that we can potentially center objects on the stage with the align panel (with the "to stage" button pressed in).

This will be an introduction screen for the application. We are going to make a very simple drag and drop game. On this introduction screen we are just going to have a couple of static textboxes for titles, some instructions on how to play the game and two buttons: "Instructions" and "Play the Game." I'm also jazzing up this screen with some graphics provided by my good friend, Jessamin Swearingen.

What I did to design this screen was just to start with the background layer. When the background was in place, I locked the layer and created a new one. Then I brought in the coach froggy graphics from another file, scaled them slightly, named that layer "coach froggy" and then locked it.

Then I created a new layer for the titles, and put some static textboxes out there with my title text. I named that layer "titles" and locked it. Next, I created a new layer for the buttons. I again just put some static text out there, "Instructions" and "Play the Game" and I selected and converted each of those into a button symbol. I game them instance names in the properties panel of "instructions_btn" and "playGame_btn" respectively. Finally, I locked that buttons layer and made a new layer for the instructions. I put some more static text out there with some (very!) basic game instructions, using two more static textboxes. I then selected both of these and converted them to a single MovieClip symbol, and I gave the instance on the stage the instance name "instructions_mc."

I don't expect you to follow along on this screen design part, this is just for your reading and understanding as I describe the process I went through. I will assume that designing screens is something that you already know how to do, and chances are you are better at it than I am anyway. The main thing to know about this screen is that there are three symbol instances with the instance names instructions_mc, instructions_btn, and playGame_btn, and we need to make note of that so we can program them.

Now that we have designed the screen, let's create a class file for it. In Flash, choose File, New, then "ActionScript File." This will open up a new file where we can write our class:

package {
	import flash.display.*;
	import flash.events.*;
	
	public class Intro extends MovieClip {
		
		public function Intro() {
			addEventListener(Event.ADDED_TO_STAGE, addedHandler);
			addEventListener(Event.REMOVED_FROM_STAGE, removedHandler);
		}
		private function addedHandler(event:Event):void {
			
		}
		private function removedHandler(event:Event):void {
			
		}
	}
}

This is the basic structure that we will use for all of our screens. Let's take it apart line by line, shall we? The package statement is required, as all classes must reside in a package, although in this case we are not using a named package. You may know that package names must correspond to folder names on your hard drive, and that the first folder named must reside in a classpath folder. However, since we aren't naming any folders, we need not worry about that, but you should know that consequently this Class file must itself reside in a classpath folder. Putting it in the same folder as the FLA file accomplishes this nicely. See my first tutorial, "Make your own reusable classes using Flash and AS3" if you want to know more about packages and the classpath.

Import statements are required for each and every "built-in" class that your class will use. Importing all the flash.display classes and all the flash.events classes with a "*" is not a bad idea, because you will almost always need those two packages and these two lines automatically take care of it. Next comes the class declaration. This class will be called Intro, and it extends MovieClip. That means that instances of this class will BE MovieClips. Next comes the constructor function (public function Intro). This is the function that will be called when outside code uses the keyword "new" to make a new instance of this class. Whenever that happens, event listeners will be added for the ADDED_TO_STAGE and REMOVED_FROM_STAGE events. Next, there are two functions, one for each of those listeners. Believe it or not, this part is crucial to our design. By setting this up like this, whenever outside code uses addChild() to add an instance of this class to the display, the addedHandler function will be called, and whenever outside code says removeChild() on an instance of this class, the removedHandler function will be called.

There will only be one instance of the Intro class, because our application will only need one Intro screen. But you should know that classes are like a stamp pad, so if you wanted to you could stamp out as many copies of this as you want. All you would have to do is keep using the keyword "new" to make more new copies.

Let's save this file to the same folder as the FLA file. It MUST be named "Intro.as". After you save it with that name, and since you are saving it to a folder that's in the classpath, it will automatically be linked to the library symbol in the FLA, because you'll recall that we gave that library symbol that same class name.

Right click the Intro symbol's listing in the library again, and choose "Properties." In the symbol properties dialog box, look to the right of the Class field. Click the button that looks like a check mark. You should get a dialog box that tells you "the definition for this class was found at..." and then the file path. Clicking on the pencil button next to the check mark button will open the class file in Flash for you to edit. So the symbol and the class are now linked: the symbol is the class and the class is the symbol! Later we will return to this class and edit it some more. For now, let's return to it and save it again. Without changing its contents, use File, Save As and save it as "Template.as." Even though that name doesn't match the name in the file, we won't be using "Template.as" as an actual class, but rather just as a device to save us some typing. We can open "Template.as," change the word "Intro" in two places, and then immediately save it under another name.