ActionScript 3.0 Design Patterns

This post is one that I can easily reference for beginners in OOP and Design Patterns when writing the posts for the Beginners Series. For many, including beginners, it may be too basic, but just in case a developer interested in taking the OOP route is unfamiliar with programming ActionScript 3.0 off the Timeline in Flash Professional or away from a Flex Project in Flash Builder, this will be a quick starting point to take the road less traveled in OOP and Design Patterns. (The instructions for getting started with Flash Builder are a bit long. However, you’ll find the instructions for getting started with Flash Pro following them.)

Starting An ActionScript 3.0 Project in Flash Builder

As far as this series is concerned, the focus will be on creating objects and design patterns in ActionScript 3.0 using an ActionScript Project in Flash Builder and adding ActionScript classes and interfaces. At some point, we may introduce some Flex features, but you’re better off getting a good Flex book and working with it.

Step 1: Open an ActionScript Project

Select File > New > ActionScript Project from the menu bar. Figure 1 shows what you will see:

Step 2: Name Your Project

As soon as you select ActionScript Project, a New ActionScript Project window appears. In the Project name: box type in the name of your project. Figure 2 shows that the name “BeginOOP” is used.

Step 3: Click Next (see Figure 2) and add a Client name

When you click the Next button, you’ll see the second step in creating an ActionScript project. Here is where you provide a name for the main class in the project. Since we’ll be working with design patterns, you’ll soon learn that the requesting class is named Client; so you’re likely to see “Client” used as the main project class. (See this Simple Explanation as to why the name Client is preferred.) The default name for the class is the project name; so you’ll have to change it as shown in Figure 3.

Once you’re done, click the Finish button and you’re all set to program. Figure 4 shows what you will see as the starting page.

When you open a new project in this manner, Flash Builder prepares the class as a child class of Sprite and provides a constructor class. While that may not be the way you want the project to start, it usually is with a Client class.

When you want to add new classes in Flash Builder, you create a New ActionScript Class. (Be careful here and don’t create a new ActionScript Project by mistake.) Figure 5 shows how to create a new ActionScript class in the same project.

You have to think of a project involving OOP and Design Patterns as having several classes but a single project. So you’re likely to create a project once and then add many different classes. Once you open a new ActionScript Class, you will be shown the New ActionScript Class window as shown in Figure 6:

When you name the class you can add the “.as” for the file name, but you don’t have to—Flash Builder does it for you if none is added. Click Finish and you’ll see the class definition and constructor function.

Adding an Interface is similar to adding a new class in Flash Builder. The main difference is that you select File > New > ActionScript Interface (instead of ActionScript Class). Figure 7 shows what appears when you open an Interface file:

All you need to so is to add the name as shown in Figure 7. Note that the Source folder is still the same project (BeginOOP). Click Finish and the Interface is set up without a constructor function, but the framework of an interface as shown in Figure 8.

That’s about it for getting started with OOP and Flash Builder. References back to the Start in the beginner’s series refers to this post.

Starting An ActionScript 3.0 Project in Flash Professional

The main new ActionScript practice about getting started in OOP and Design Patterns in Flash Professional is to forget about putting code on the Timeline or in the Actions Panel. (See this explanation. )

The first step is to open a new ActionScript 3.0 thingy (the one at the top of the file types—it’s the kind that’s saved as an FLA file.) I call it a “thingy” because what Adobe named “ActionScript File” is different. So just select ActionScript 3.0 under where it says “Create New” in the opening window. If you see the Timeline, you’ve got the right kind of file. Close the Timeline so that you’re not tempted… to…code…on…the Timeline. (Shudder…) Open the Properties panel, and where you see “Class” (or Class Document on older versions of Flash Pro), type in the name of your ActionScript class that you want to launch first. Usually in these posts, it’s going to be “Client” as shown in Figure 9:

After you save the Client.fla file, you will want to create an ActionScript class file where you will put the code. Select File > New > ActionScript 3.0 Class. Provide the name “Client” for class in Figure 10:

Once you have added a class name, click OK. As soon as you click OK, you should see the class declaration and the constructor function. You’re all set to program using OOP and design patterns.

In some cases you’ll need an ActionScript 3.0 Interface instead of a class. Just choose ActionScript 3.0 Interface, and follow the same procedure and you’re can add an interface instead of a class.

If you have an older version of Flash that does not have ActionScript 3.0 classes and interfaces as file types; just load up a plain vanilla ActionScript 3.0 file (not the FLA version) and type in the code. The only difference is that you don’t get a head start like you do in newer versions of Flash Pro.

Related posts:

1. Beginners OOP & Design Patterns in ActionScript 3.0 Post 1 : Rolls-Royces in the Junk Yard
2. No Time for OOP and Design Patterns