by Rick Parris

Foundation Flash Boot Camp: Episode 1 – The object oriented nature of Flash

So, you’re thinking that you’d like to learn how to create games and cool interactive stuff in Flash. You’ve heard all the arguments but you still think Flash has a few years in her and you’ve decided to pick up a few books on Actionscript 3.0 and dig in. Good for you! Flash is still the best way to deliver your product to any platform and any browser out there. And it’s a fantastic gateway drug to other programming languages. Even though the folks at Apple have said some disparaging things about Flash vis-a-vis the mobile experience (things we largely agree with BTW), we think that Flash AS3 is actually one of the best scripting languages to learn as a precursor to moving on to Objective-C, Apple’s own language of choice.

Madness you say? Maybe so but consider this… Apple inherited Objective-C when it acquired Next back in the late 90s. It was the basis of the NextStep operating system that became the basis for Apple’s OSX. In fact when you learn Objective-C and you type NSObject, the NS stands for NextStep. But why did Apple want to grab up Objective-C in the first place? The clue is in it’s name. Objective-C. Objective-C is an object oriented language. It’s built that way from the ground up. Why is that special or important? We’ll get back to that question. Keep that in the back of your heads as we explore what it means to be object oriented. Since you’re looking to learn Flash Actionscript 3.0, you’ll be learning an object oriented system right from square one anyway… so let’s get started and look at how Flash uses objects.

First… What Is an Object?

This sounds like a philosophical conversation, but it is the basis of modern programming. What is an object? in the real world an object has mass, density, weight, volume. It has other properties too… color, texture, transparency or opacity. Does it make noise or muffle noises (acoustics)? Does it transmit electrons well or badly (conductivity)? It exists in four dimensions as well… x, y, z, and time. We could go on all day further refining what an object is through its properties. The game 20 questions is based on this very aspect of objects. Objects have properties. Objects can be defined by their properties.

In Actionscript 3.0 and many other scripting and programming languages there is a simple way to define an object’s properties. It’s called Dot Syntax and it couldn’t be easier. Here is how we would describe a beer glass in dot syntax:

beerGlass.height = 350;
beerGlass.width = beerGlass.depth = 120;
beerGlass.alpha = .001;

So let’s look at these statements. They appear to be quite different from English sentences, but they’re very similar. Each line is a new statement. Each statement ends with a punctuation mark. In English we end sentences with a period. In Actionscript 3.0 we end each statement with a semicolon. It’s just a convention to let you the programmer and, more importantly, the computer know that you’ve completed a statement. But we wanted to look at the object here. In our statements we’re describing the object beerGlass. Using dot syntax we’ve defined a few properties of that beerGlass. We’ve set the height to 350. We might not know yet what the units of measurement are but we know it’s 350 of them high. So, in AS3, beerGlass DOT height means “the height of beerGlass.” Then when we put the equals sign, followed by a value we’re completing the thought. “The height of beerGlass is 350 units.” That is a complete sentence and one the computer can understand. If you left it at just:

beerGlass.height;

The computer would read it as an incomplete statement and not understand your intentions. It would then throw an error. Your life as a programmer is to try to write complete statements and avoid confusing the computer. So let’s look at the next statement…

beerGlass.width = beerGlass.depth = 120;

Did I throw you a curve? This statement is also defining the beerGlass object but it’s saving a little typing in the process. Since a beer glass is radially symmetrical, its width and depth are the same value. Knowing that, we can combine the definition of both properties into one statement. Essentially we’re saying, “The width and depth of beerGlass is 120 units.”

Moving on to the next statement we seem to be defining something unusual. Most objects in our world don’t have an alpha property, do they? Alpha is Actionscript for transparency. Alpha values can be between 1 (full opacity) and 0 (full transparency). So, an alpha value of .5 would be 50% transparent (or 50% opaque depending on your mindset).

Now that we have an idea of objects and their properties let’s dive in to Flash and write some code that makes use of our new understanding.

Getting and setting properties in Flash

Let’s start by opening Flash. I’m going to assume that you’ve worked with Flash enough to know how to set up a new Actionscript 3.0 Flash file, that you know how to use the drawing tools and that you know how to identify the various windows. Begin by creating a new Flash file with the default file settings (15 frames per second, 550 x 400 pixels, stage white). Go to the toolbar, select the Rectangle Tool, and draw a square in your scene window. You can hold the shift key as you draw to constrain it to a square. In this rare case, size doesn’t matter… neither does position or color. Once you’ve got your square, select it and right click on it.Flash will show you a pop-up menu. Way at the bottom, select Convert to Symbol. Name your new symbol mySquare and click OK.

Figure 1 - Step one is to make a simple drawing object square. any size or color.

You have just created an object in Flash.

Figure 2 - The proof that you've made an object lies in the Properties window.

How can we verify that? Select the square and take a look at the properties box. Notice that it shows the square’s position and size. The first row is an X value and a Y value. Below that are values for Width and Height. A little lower in the properties box is a Color Effect box. The drop down selector there says None. Click that and set it to Alpha. Set the slider that appears to 50% (you can enter it in the field on the right to be exact). So you object has x and y position, it has width and height, and it has an alpha value. All of those are properties and that is what we’ve decided is the criteria for object-hood. Okay, so we’ve created an object. So how do we do something with it?

Well, let’s give it one more property before we start bossing it around with Actionscript. Let’s give it a name. In the property box, with the square selected, you’ll see in the field at the top. You may ask “what’s an instance?” And I’ll answer, “we’ll come back to that.” For now type slave_mc into that field and hit return. Now the square has a name. Now Actionscript can order it around.

Take a look at the timeline of your scene. You should see that you’ve added the square to the first frame of Layer 1. Click on the New Layer icon and name that layer Actions. Click on frame 1 of the actions layer and move to the Actions window. Type the following:

slave_mc.x=slave_mc.y=0;
slave_mc.width=120;
stop();

That’s it. Our first commands to our object. What does your understanding of dot syntax tell you will happen to your square? What properties are we changing with these commands? Hold the command key down and press return to preview the file. You should see something like this…

Figure 3 - When you run your preview Actionscript alters the slave_mc object's properties.

The square’s x and y position were moved to 0. Which, in Flash, is the upper left corner of the scene. The width of the square was changed to 120 pixels and the height wasn’t changed. You’ve successfully changed your object’s properties with Actionscript. Feel powerful yet?

So with the statements above we’ve set the properties of our square. But we could also get the properties as well? Setting changes the values of a property, getting just reports the current settings. A status report. Let’s explore that capability.

Figure 4 - There's mySquare in the Library Window waiting for you to make a new instance of it.

Look at the Library window. When you made your square, mySquare, you created a movieclip in the library and an instance in your scene (remember that ?). This is where Flash is interesting. Remember, to create your mySquare object you chose the menu item Convert to Symbol. The library in Flash is where those symbols reside. When you place a symbol into a scene you create an instance. When you name that instance it becomes an object. Working backward then, Actionscript can get or set the properties of an object. An object is an instance of a symbol that has been named. You can create a new instance of a symbol by adding it to a scene from the library. Got it? Let’s try that out. We already have the object slave_mc in our scene. It’s a named instance of the symbol mySquare that you can see in the library. We can add another instance of the mySquare symbol by dragging it into our scene. Go ahead and do that right now. Now we have two instances of the mySquare symbol in our scene, one named (slave_mc) and one unnamed. We can’t get or set the properties of the unnamed instance with Actionscript until we give it a name, so let’s do that now. Name this second instance master_mc.

Figure 5 - Two instances of the mySquare symbol.

So let’s get down to using Actionscript to get properties as well as set them. Go back to your actions layer and click in the first frame. Go ahead and delete all of that script and replace it with:

var borderWidth:Number = 4;
 
slave_mc.width = slave_mc.height = master_mc.width + (borderWidth*2);
slave_mc.x = master_mc.x - borderWidth;
slave_mc.y = master_mc.y - borderWidth;
slave_mc.alpha = .5;
stop();

And pencils down. Let’s take a look at the code and try to imagine what it will do. That first line is something new, right? What we’re doing there is declaring a variable named borderwidth, we’re telling the computer that the variable will be a number (as opposed to a string of text or a list or a sound), and then we’re setting the variable’s value to 4. With a name like borderWidth it might be pretty easy to assume what that variable will represent… but let’s keep going. The next line is left blank. Most computer languages ignore white space in code and AS3 is no different. The next line is more familiar. It’s setting the width and height of our square to a new value. That new value is the current width of the master_mc object plus the borderWidth value multiplied by 2. Since we set borderWidth to equal 4, this line will mean we’re setting the width and height of the slave_mc object to the master_mc object’s width plus 8. So far, so good. The next two lines set the slave_mc object’s x and y positions to those of the master_mc minus the borderWidth value. And finally we set the alpha value of the slave_mc square to .5, or 50%.

Hit command-return to see the result. You should see something similar to this…

The slave_mc has been positioned behind the image, up and to the left the width of the borderWidth variable and resized to the size of the master_mc object plus the borderWidth times 2. You set the alpha of slave_mc to 50%. The result? a nice border around the master_mc.

So, what have we done?

You’ve written a bit of code that gets the width, and the x and y positions of the master_mc and sets the slave_mc to create a border around it. That’s all pretty easy, right? And that’s why object oriented programming is so valuable. Using dot syntax you can quickly get and set the values of a huge range of object properties and, more importantly, you can write it and read it in a way that isn’t obscure or arcane. Take a look at the files available in the zip file in the links to the left. Also take a look at the link to Adobe’s Flash help section. You’ll want to explore the Actionscript syntax library to find out about all of the properties you can control using similar dot syntax commands.

Next time we’ll look at making things a bit more interactive and focus on Events and Event Handlers. Till then, let me know if you have any questions in the comments section below.