ActionScript 3 Classes: Part 1

ActionScript 3 is an object oriented programming language. I’m going to explain what that means in a minute, but there is also a good definition at Wikipedia. So far there are two things that we’ve talked about that are used in objects. The first is variables and the second is functions.

Objects contain both of these things. To think of an object in programming I’m going to use a real world example:a ball. Here is a list of the properties of a ball:

Color
Diameter
Weight
Texture

And here are some of the things that a ball might do:

Bounce
Pop
Inflate

So, this ball is our object. Now let’s convert this over to code:

//Ball.as
package
{
    public class Ball
    {
        public var color:String;
        public var diameter:Number;
        public var weight:Number;
        public var texture:String;

        public function Ball() {
        }

        public function bounce()
        {
            //Bounce code
        }

        public function pop()
        {
            //Pop code
        }

        public function inflate()
        {
            //Inflate code
        }
    }
}

Unfortunately, the source code here comes out unformated in WordPress, but imagine it will indentations an so forth. Okay, so now that we have created our Ball class, what do we do with it? From our class comes an object like so:

var myBall:Ball = new Ball();
myBall.color = "red";
myBall.diameter = 10;
myBall.inflate();
trace(myBall.color);

There are some examples of creating a new ball and setting some of its properties and calling some of its methods. A method is what we call the function that is part of the object.

Okay, let’s look at the code line by line:

First we have the package block which tells us where the class file is located. the Ball.as file should be in the same directory so we just use package. If we would have created another directory where the BallTutorial.fla file is located called classes then we would have used this:

package classes

You can even nest files further. We could have created the following directory structure:

\classes\other\something\Ball.as

In this case we would use:

package classes.other.something

The reason we do this is because we could have two classes with exactly the same name, but put them in different packages. Remember, the package has to reflect the file location or it won’t work.

Next we have the public class Ball block. This declares our class as being public. I’ll explain what this means in Part 2. The class is called Ball. It’s important to note that the file name need to be the same as the class name, which is why we called this file Ball.as.

The next few lines is where we define the properties of the class which are variables. The are defined in a similar fashion as we’ve defined variables before, but this time we use the public keyword.

Next we have the method definitions. The methods are just function declarations that we have done before, but we’ve also declared these as being public.

One thing to note is that we have a function called Ball. This is called the constructor. The constructor is a function that is automatically called when we instantiate the object. Instantiating the object is just the act of declaring a new Ball variable. You can see how this works by putting a trace statement in the constructor before you test the code. You’ll see that the trace statement is executed automatically without having to call the Ball function. The constructor is case sensitive, so make sure you get it right.

And that’s our class definition. As you can see in the second block we access the properties and methods with the dot operator: myBall.color or myBall.inflate() are examples.

In order to get to work you’ll want to create a new Flash file and call it BallTutorial.fla. Then you’ll want to paste the second block of code into the first action pane. Then create a new file called Ball.as and make sure you save it in the same directory as the BallTutorial.fla file. When that is done you should be able to run the BallTutorial.fla file and see the trace output.

The source code for this tutorial can be found here: BallTutorial.zip

Event Listeners

Event listeners are an important part of Flash. What they allow you to do is to “listen” for an event that occurs on a specific object. For example, one event that often occurs in Flash is a button getting clicked. When a button is clicked the button object dispatches an event telling flash that is was clicked. Often times we want to respond to a click and function. Say we have a window that pops up and on the window there is a cancel button. We want the window to close when the cancel button is clicked. Here is the code:

cancelButton.addEventListener(MouseEvent.CLICK, handleClick);
function handleClick(event:MouseEvent):void
{
//Write the code here that closes the window
}

In this example I have added a button to the window and given it the instance name cancelButton. This allows me to listen to that button and respond to the events.

Building a Flash Video Player: Part One

This is part 1 in a multiple part series about building a Flash video player. In this tutorial we start building the player control bar.

Click here to get the source code for this tutorial

Note: You can watch the videos in full screen by clicking the full screen button on the tutorial’s control bar.

Basic ActionScript 3

This tutorial is probably only for those who don’t have much programming experience. I show you how to open the Actions panel that we use to input ActionScript. I also show how to use String variables and how to set the text of a Text Field dynamically. I also show how to create a simple function.

Note: You can watch the videos in full screen by clicking the full screen button on the tutorial’s control bar.

What is Adobe Flash CS3?

Adobe Flash CS3 is a Flash development toolkit that allows you to add animation and interactivity to web pages. Flash technology is commonly used to create animations, advertisements, interactive web components, integrated media players, and rich internet applications.

As of this post, Flash CS3 is the current version of the Flash development tool created by Adobe. It has various improvements over it’s predecessor Flash 8, most notably the upgrade from ActionScript 2 to ActionScript 3.

Most website currently employ some Flash technology. If you’ve ever been to a video sharing website, e.g. Youtube, you’ve seen Flash in action. YouTube’s embedded video player was built using Flash.

I hope you enjoy my series of posts and remember that if you ever have questions, feel free to ask them in the comments section of each post.