OOP: Classes, Objects and Packages. An introduction to Oriented Object Programming on AS3

The wonderful OOP world! Every little tiny thing organized on it’s place. Imagine classes, packages, interfaces, objects… everything at your hands. What?! This world isn’t a beauty for you?

Well, if you doesn’t know OOP, this world will look like to you more like a nightmare. But don’t worry, the primary objective of this text is show you how great this world is, and how is easy to live on it.

Language Structure

The first thing that will have to look, is the language structure, how it works, and what it have to offer.

The AS3 language has many classes, the Sound class for audio, the Loader class for loading external images, the XML class to read and write XML documents, among many others. This classes are organized in packages. These are the existent packages on Flash CS3:

  • adobe
  • fl
  • flash

Very cool, but… what are these packages? What are these for? And the classes? What are these classes? Let’s see what is a class, a package and an object.

Starring the OOP

Let’s try to understand how the OOP (Object Oriented Programming) works. We can say that the OOP is a way to organize our code. How? Imitating something that we are familiar: the real world.

To start, how do you see the world? Let’s pretend that you see it like a thing, and that thing is full of other things, and so on. A house is a thing, a car is a thing. A house has windows, that contains glasses, and all of this are things.

Objects

A thing, technically, is the same as an object. A house is an object, and even a person can be considered an object. Houses, cars, persons, all of this can be described based on two groups of characteristics: attributes and behaviors.

A attribute is an aspect of the object. A house has color, height, width, windows, rooms, etc.
A behavior is an action that a object can execute. A car can move forward, backward, turn, stop, etc.

Cool, but, how we do this in programming? My menu doesn’t have wheels, neither windows. Wait. Let’s see it again.

What your menu have? Items? Width and height? Color? Yes, a menu can have all of it. So, we can say that a menu contain the following attributes, also called properties:

  • Menu
    • items
    • color
    • width
    • height

And what will be this items? Consider a menu item, what it contains?

  • ItemMenu
    • width
    • height
    • color
    • link

There are the properties of two types of objects that we can use in programming. Menu and ItemMenu. Remember that you don’t need to create all methods and properties of an object, only those that you need.

Now, what is the behaviors (that we can call methods too) of a menu? Well, a menu can move? Can open and close? Show and hide? Sure, it can do all of it.

  • Menu
    • items
    • color
    • width
    • height
    • open
    • close

Structurally speaking, this will be our menu object. It will have the necessary items (ex. Home, Contact, Company), a color (ex. white), a width (ex. 500px), a height (ex. 200px) and the behaviors of open and close.

Classes

The objects part we already saw how it works, but, and the class thingy? What is it? How is it?
A class is like a template that define the methods and properties of an object. That’s exactly what we did before:

  • Menu (Class)
    • items
    • color
    • width
    • height
    • open
    • close

Our Menu class sets the items, the color, the width and the height properties, and the methods open and close. Our menu object is created based on this specifications.

  • Menu (Object)
    • itens: Home, Contact, Company
    • color: White
    • width: 500px
    • heigth: 200px

Of course, this is the theoretical part, just keep all of this in mind, soon we’ll enter on the practice part.

Packages

Back to AS3, how we saw, the language has the following packages:

  • adobe
  • fl
  • flash

Packages are a group of classes. In fact, It’s a folder, just it. So, a package is a folder, with a lot of classes inside it. But, why we have to group classes in a package? For one reason: organization.

Let’s take as an example the flash package. Inside it, we have a lot of sub-packages. One of this packages is the net package, that have a group of classes for send and receive data through a network. For example, to receive data from a URL, manage files, etc.

Packages are a better way to organize your classes, in order to find them easily when we need. Now you know that if you need to execute some task related to network, you’ll find at the flash.net package the class that meets your needs.

Take a look on the Flash classes whenever be possible, so you can learn what the language has to offer, and you will not be lost when you need something.
A good spot to take a look is the Help (F1), or the livedocs at: http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/

Starting to do something

Now that we see the theoretical part, let’s pratice a little bit. Create a folder, give the name you want to it. In that folder, we will create the exercises that we’ll do during this post.

Let’s start with an simple example. Open Flash and create a new ActionScript file.

Flash will create a blank file. In that file, we’ll create our class, but… where do we start? It’s a little bit complicated start from nothing. Let’s try to bring the theory into pratice. Do you remember the packages? We see that it’s just a folder that groups classes in one unique place, in order to organize them. Well, that’s is the first step, we have to declare wich package our class belongs. This statement is required.

1
2
3
4
package test
{

}

There is, we declared that our class belongs to the test package. Therefore, the directory structure has to be something like this:

  • Studies (a folder created in any place).
    • test (the package for our test classes).

Attention: You have to create the test folder inside the studies folder.

The second step is to give our class a name. Let’s do the most common example on the earth: the Hello World!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
package test
{
   
    /**
     * HelloWorld Class. Our first contact with OOP on AS3.
     *
     * @author Your Name
     */

    public class HelloWorld
    {
   
    }

}

Wow! It looks good.
The public key that you see there, is what we call “access control” of the class. For default, the class can only be used by other classes that is contained in the same package (internal type). We’ve set the public key so our class can be accessed from other packages.

After the public key, we have the class key, that indicates the creation of a class, and then the name of that class.
The next step is to declare the constructor method of our class.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
package test
{
   
    /**
     * HelloWorld Class. Our first contact with OOP on AS3.
     *
     * @author Your Name
     */

    public class HelloWorld
    {
       
        /**
         * Constructor method, creates a new HelloWorld object.
         */

        public function HelloWorld()
        {
            trace("Hello wonderful world!");
        }
       
    }
   
}

The purpose of the constructor method is, like it said, build the class. This method is called always when we create a new instance of the class.

Save your class file with the name HelloWorld.as in the package test. Next, create a new Flash File (ActionScript 3.0) and save it as hello.fla.

The structure of the files is:

  • Studies
    • test
      • HelloWorld.as
      • hello.fla

In the hello.fla file, click on the first frame and open the Actions panel (Window > Actions). Write the following code:

1
2
3
4
import test.HelloWorld;

// HelloWorld class instance.
var test:HelloWorld = new HelloWorld();

Test the movie (Control > Test Movie), and if everything is right, the message “Hello wonderful world” will be appear on the output panel.

What we made was import the class of the test package, and then create a instance of it. The new operator creates the class instance, that runs the constructor method, and that’s why the message is showed.
Therefore, every time that a class is instantiated, the constructor method is called. Through the constructor method we can define values that are important to the object initialization.

The HelloWorld example show us how a class works, just it. I hope that you have enjoyed, and see you next time!

1 Comments

  1. thank you for explaining this so well

Leave a Comment