Thursday, April 21, 2011

AS3 101: OOP – Introducing Design Patterns

After many months of learning how to program from the ground up, you’re ready to put it all to use: we’re going to build a simple drawing application. We will focus on Object-Oriented Programming techniques, specifically the use of interfaces. By setting up a few rules for our programming, we will make expanding the feature-set and debugging the project much easier.


Final Result Preview

You’ll see that our little drawing app will be rather simplistic. Rest assured, though, that the internal logic just might make your brain explode. Don’t worry; we’ll take it one step at a time, as we always do. Here’s a peak at what we’re working towards in this tutorial:

While the result is simple, the underlying code is complex, and one of the things you’ll hopefully learn along the way is that Object-Oriented Programming can keep you organized and keep your project maintainable.


Step 1: Create the Project

First things first: we need a home for our project. Start by creating a main folder for the entire project. Use the approach that works best for you. It could be as simple as creating a folder on your computer, using the OS, or using Flash Builder to create a new project for you.

It doesn’t matter where this folder is created, so long as you can get to it when we need to save or open files.

I’ll be calling this app “Drawr,” so I’ll be naming my folder accordingly. The name is of little consequence to the rest of the tutorial, so if you’re feeling imaginative come up with your own name.

My project folder

Step 2: Create the Flash File

Open up Flash CS3 or higher, and choose File > New and then select the ActionScript 3.0 option. This will be our Flash file for the project.

The New Document Window

Save it to your project folder as “Drawr.fla” (or whatever name you feel is better).

Our Flash File

Step 3: Create a Classes Folder and the Source Path

We will organize our class files into packages, but for further organization, let’s create a source path.

Create a folder in your project folder named “classes“. All of our classes (and package folders) will go in here [...]

Read more: AS3 101: OOP – Introducing Design Patterns

No comments:

Post a Comment