Sunday, May 9, 2010

Classes in ActionScript 2

Actionscript 2.0 Basics

In order to learn Actionscript 2.0, you must first learn some vocabulary. We will examine each of these in further detail. This is just a short list that we will add to as our discussion continues.

Class — encapsulates data (variables, attributes, etc.) and methods (functions, methods, etc).
Instance — the actual implementation of a class.
Method — a function inside of a class that performs a specific operation.
Classes in Actionscript 2.0

When learning, I like to have solid examples of code to work from. So here is your first code from the Product.as file:

class Product {

}
There are some important things to understand about this code:

The name of the file Product.as is the same as the name of the class Product.
You will want to put this code into a package to make it more user-friendly and easier to distribute.
Packages in Actionscript 2.0

A package is nothing more than a folder that contains one or more Actionscript 2.0 classes. Most packages are placed in multiple folders from generic to specific. For example, my package is com.ahfx.Product. I have a folder named com. In that folder I have another folder called ahfx. In that folder I have a class file, Product.as. When I distribute my Actionscript 2.0 classes, I will merely send the folder com to the organization that needs to use my classes. (If you notice you just invert your domain name ahfx.com to get your package name, com.ahfx. Packages also help distinquish between classes with the same name. For example if you wrote a class called Product, we could use the package to tell which Product we really wanted to use). To reflect the package change I will add that to my Actionscript 2.0 class code, Product.as.

class com.ahfx.Product {

}
Build It

We are now going to help you set up your very first Actionscript 2.0 class. We will first create the package, then start Flash MX 2004 and write our first actionscript.

Browse on your computer to your Flash MX 2004 installation folder (for example: C:\Program Files\Macromedia\Flash MX 2004\en
Go to the <—Macromedia install folder—>First Run\Classes\ folder
In this folder (Classes) create a new folder named com
Open the com folder you just created and create a new folder named ahfx
I would now add a shortcut to this ahfx folder on you desktop.(Just for ease of access).
Open Flash MX 2004
Choose "Create New: Actionscript File"
Copy the code from Product.as above into the new window
Choose File|Save As and save it in the ahfx folder you created above.(If you added a shortcut to your desktop, click desktop, click the shortcut and it will take you to the correct folder).
After saving, press Ctrl-t to check your syntax (Hopefully everything will be fine). If you get errors, make sure your file is named the same as the class name, and that you placed the file in the correct folder.
Actionscript 2.0 Constructor

This actionscript class won't do much as of yet. We can't even create an instance of our class yet. We must create a constructor. A constructor is a special method that creates an instance of an Actionscript 2.0 class. A constructor has the same name as the class. The code now reads like this for Product.as.

class com.ahfx.Product {

function Product() {

}

}
Now that we have created a constructor. We could create an actual Product in a Flash application from our Actionscript 2.0 class Product.as (We will examine the Flash side in a while).

Actionscript 2.0 Attributes

However, even though we could create an instance, this also wouldn't do much. Lets add some data (the first half of an Actionscript 2.0 class) to our actionscript class. This class will describe Products that will go in a Shopping Cart (Creating the shopping cart is found in the Intermediate lesson). Our basic product with have a description, a price, and a quantity. Although this is a very simple example, you could add more attrinbutes later.

class com.ahfx.Product {

//Instance Variables
private var price:Number;
private var desc:String;
private var quantity:Number;

function Product() {

}

}
private — Tells the class that only this actionscript class and its subclasses can access this variable.
var — Tells the Actionscript 2.0 class that this is a variable.
:Datatype — Anything after the : is the datatype of the variable. (For example Number above).
These variables are instance variables. This means that every time we create an instance of a Product, it will have its own desc, price, and quantity.For example, we could create a Product with a desc="Teddy Bear", price=14.99, and quantity=3. We could then create another Product with a desc="Soyo Motherboard", price=68.99, and quantity=1. Each of these Products is an instance. They have their own variables.

Get and Set Actionscript 2.0 Variables

Now that we have the first part of an actionscript class done(the data part), we will begin on the second part(the methods). Because we have declared the variables to be private, we must create get and set methods for the variables. This allows our Flash application to read and write to the variables.

class com.ahfx.Product {

//Instance Variables
private var price:Number;
private var desc:String;
private var quantity:Number;

function Product() {

}

function getPrice():Number {
return price;
}

function setPrice(price:Number):Void {
this.price = price;
}

}
Lets examine the getPrice() function first. getPrice() is the name of the function. :Number is the return type. This means that you could write the following code in your Flash application, var myPrice:Number = myProduct.getPrice();, because getPrice() returns a Number. return price; takes the instance variable "price" and returns it to the program that called it.

Next lets examine the setPrice() function in our Actionscript 2.0 class. setPrice() is the name of the function. This function passes (or sends) one variable which is a Number. We will use the name "price" for this local variable. This class doesn't return anything and so the return type is :Void. this.price is a reference to the instance variable price while = price is a reference to the local variable price.

We could have written the code like this also.

class com.ahfx.Product {

//Instance Variables
private var price:Number;
private var desc:String;
private var quantity:Number;

function Product() {

}

function getPrice():Number {
return price;
}

function setPrice(myVar:Number):Void {
price = myVar;
}

}
The local variable is myVar this time instead of price. Because we don't have a local variable with the same name as an instance variable we don't need to clarify which price we were talking about and we don't need to add this. in front of price.

Actionscript 2.0 Methods

I´ve added the other getters and setters. (You use getters and setters to control the values that may be placed into that variable. For example, you couldn't have a negative cost of a product. So you could create some code that checks to see if the value passed to the set method it negative. If it was negative, don't assign the number. You could also check for not number values being passed.

class com.ahfx.Product {

//Instance Variables
private var price:Number;
private var desc:String;
private var quantity:Number;

function Product() {

}

function getPrice():Number {
return price;
}

function setPrice(myVar:Number):Void {
price = myVar;
}

function getQuantity():Number {
return quantity;
}

function setQuantity(quantity:Number):Void {
this.quantity = quantity;
}

function getDesc():String {
return desc;
}

function setDesc(myVar:String):Void {
desc = myVar;
}

}

Now we will add one other method, getTotal. This method will return a number that will tell us the total cost of this product (price times quantity)

class com.ahfx.Product {

//Instance Variables
private var price:Number;
private var desc:String;
private var quantity:Number;

function Product() {

}

function getPrice():Number {
return price;
}

function setPrice(myVar:Number):Void {
price = myVar;
}

function getQuantity():Number {
return quantity;
}

function setQuantity(quantity:Number):Void {
this.quantity = quantity;
}

function getDesc():String {
return desc;
}

function setDesc(myVar:String):Void {
desc = myVar;
}

function getTotal():Number {
return price*quantity;
}

}

This method takes no parameters and returns a Number. You see that it will return price*quantity. Next we will examine the Flash to use this class.

Actionscript 2.0 Flash Implementation

Now we are going to take our new Actionscript 2.0 class and use it in a Flash application. Make sure that you have saved the final version of your actionscript and close down Flash. Open it back up and this time start a new Flash Document. Create a keyframe and enter the following code:

import com.ahfx.Product;
var myProduct = new Product();
myProduct.setQuantity(3);
myProduct.setPrice(2.99);
myProduct.setDesc("Teddy Bear");

trace(myProduct.getDesc());
trace(myProduct.getPrice());
trace(myProduct.getQuantity());
trace(myProduct.getTotal());

This will output the following:

Teddy Bear
2.99
3
8.97

The first line tells the compiler to import the Product class we had just created. The next line creates an instance of the Product class. Now we start assigning values into the product. This product is a Teddy Bear that costs 2.99, and the person wants 3 of them. The trace statements just print out the values of this product. That was easy wasn´t it. Let´s make another product.

import com.ahfx.Product;
var myProduct = new Product();
myProduct.setQuantity(3);
myProduct.setPrice(2.99);
myProduct.setDesc("Teddy Bear");

trace(myProduct.getDesc());
trace(myProduct.getPrice());
trace(myProduct.getQuantity());
trace(myProduct.getTotal());

var myOtherProduct = new Product();
myOtherProduct.setQuantity(1);
myOtherProduct.setPrice(12.99);
myOtherProduct.setDesc("Cool Sunglasses");
trace(myOtherProduct.getDesc());
trace(myOtherProduct.getTotal());
myOtherProduct.setQuantity(2);
trace(myOtherProduct.getTotal());

Notice that we don´t need another import statement. All we do is create another instance of our Actionscript 2.0 class. This instance is named myOtherProduct. It is a pair of cool sunglasses that cost 12.99. The customer decides to get an extra pair (because they are so cool) so we call the setQuantity method and pass it the parameter of 2. You can see that the total automatically updates itself in the new output:

Teddy Bear
2.99
3
8.97
Cool Sunglasses
12.99
25.98

This ends the basic Actionscript 2.0 lesson. Although this has been a simple walkthrough, this is a solid base that we wish to build upon. If you continue to the intermediate page, you will learn how to take the product you have created and place it in a shopping cart class.

Continue to intermediate page.

We would love to hear your feedback. Please email us as info AT ahfx DOT com.

No comments:

Post a Comment