Creating a simple ActionScript 3 class

I always wanted to create my own ActionScript 3 class, but it was difficult for me to understand the structure of an ActionScript 3 class at first. That was because I was willing to learn everything about a class in a single day. I was making it hard myself to understand a class and it took me real long time. This is why, here in this tutorial I am trying to keep it compact and minimum in this first step of learning “creating a simple ActionScript 3 class”.

1- Understanding MovieClip class

actionscript 3 class
If you just started working with AS3, you should be using classes – that are built-in classes and makes you as well as Flash quick at designing, animation and development. For example, whenever you create a Movie clip symbol on Flash stage, you are using MovieClip class unknowingly. You haven’t created a MovieClip class but Flash had it already. You just need to save a Movie clip symbol in Flash library and use its instance on stage. If you are also implementing AS3 code, chances are that you require an instance name for referencing. Then you can access and modify its properties – rotation, scaleX, height, x, y etc. This picture is showing two instances of same Movie clip with Tint and Rotation properties applied differently.

2- ActionScript 3 class or A Flash Tool!

We create an ActionScript 3 class to simplify our coding by grouping somehow related properties and methods

The reference of MovieClip given here is just a small example. There are many built-in classes (Graphics class, Event class, Loader class and more) that are designed to deal with easily recognized cases in Flash programming. These classes are amazingly helpful but they are not enough or I would say Flash makers can not design classes for each case that you can recognize. There are situations when you need to define your own ActionScript 3 class in your project. Such classes are called custom classes. We create an ActionScript 3 class to simplify our coding by grouping somehow related properties and methods. This makes our coding organized and reusable.

3- Variables in ActionScript

user profile signup
This example is a simplified version of filling a form to create an online profile. So this program asks you to enter your name first, then your age and your country as basic pieces of information. The program processes this data and creates a profile for you. Let’s start with very basic coding –

var userName: String;
var age: Number;
var country: String;

I have defined three different variables to store three types of user information. If you submit the information, my small program would use the stored data to generate a user profile.

4- Defining a function

How to generate a user profile! Let’s write a function to perform the action –

function fullProfile(){
	trace(userName+", "+age+", "+country);
}

5- Using ActionScript without a class

Open new Flash file and copy the code below in Actions Panel to test the above function –

var userName: String;
var age: Number;
var country: String;

function fullProfile(){
	trace("My Profile: "+userName+", "+age+", "+country);
}

//Submit information
userName = "Erik";
age = 29;
country = "Philippines";

//Calling the function
fullProfile()

I defined variables and a function first in ActionScript 3. Then I submitted values to the variables and called the function. Test the file to see the result in Output Panel. It displays your full profile.

output panel flash

6- Creating a class with AS3

Think of your flash application and pre-design custom AS3 class in your mind

Now, I would construct an ActionScript 3 class inspired by the above coding. Create an ActionScript file (a text file with .as extension) and save as “Profile.as” inside “flash–>example–>code–>” folder structure. The file name is taken from the class name.
package statement flash
We should start writing a class with package statement and it (its pair of curly braces) should enclose class statement. The class statement should also enclose functions and statements.

package example.code {			//package statement
   public class Profile {		//class statement
      // methods and properties
   }					//end of class statement
}					//end of package statement

Package statement defines the folder structure for ActionScript 3 class file in respect of FLA file (we will create) and class statement defines a class name. Note that whatever you are doing with your ActionScript 3 class, the name of your class should match the file name with .as extension. The class statement also uses public modifier which makes your class available for ActionScript. It enables you to create an instance of your ActionScript 3 class.

7- Define properties for your class

A variable declaration syntax along with public modifier defines a property in your class. We have defined three properties here.

public var userName:String;
public var age:Number;
public var country:String;

Full Code –

package example.code {
	public class Profile {
		public var userName:String;
		public var age:Number;
		public var country:String;
	}
}

8- Add method to your class

public function fullProfile():void {
	trace(userName+", "+age+", "+country);
}

You can also define a method the same way you define a function. Public modifier, function name and data type specification (value returned by the function) are important parts of method definition.

Full Code –

package example.code {
	public class Profile {

		public var userName:String;
		public var age:Number;
		public var country:String;

		public function fullProfile():void {
			trace("My Profile: "+userName+", "+age+", "+country);
		}
	}
}

Please note that void is a special type which specifies that a method cannot return a value.

I am done with creating an ActionScript 3 class file. Most of you would be surprised- “that’s it” or is it so simple! Well technically yes, but this is not all. We need to create an FLA file in order to use ActionScript 3 class. Also, there are other aspects of an ActionScript 3 class. For now, I am going to tell you how to use this class in Flash.

9- Using a custom class in Flash

Create an FLA file and save as “getProfile.fla” inside /flash/ folder. This makes /flash/ a root folder for your application.
import statement flash
Select frame 1 of default Layer 1 and open Actions Panel to copy the code below.

import example.code.Profile;
var someProfile:Profile = new Profile ();

Import statement comes in first line to import “Profile” class using the relevant path structure. The next line defines the syntax of creating an instance of “Profile” class. A class needs to be instantiated first and should be given a name (instance name = someProfile) in order to access its properties and methods.

import example.code.Profile;
var someProfile:Profile = new Profile ();

//accessing Properties
someProfile.userName = "Erik";
someProfile.age = 29;
someProfile.country = "Philippines";

I accessed the properties (above) and defined a value to each property separately. Now I can call a method of my class to perform the desired action.

import example.code.Profile;
var someProfile:Profile = new Profile ();

//accessing Properties
someProfile.userName = "Erik";
someProfile.age = 29;
someProfile.country = "Philippines";

//calling a Method
someProfile.fullProfile();

The method simply displays full profile in Output Panel of Flash program.

10- Reviewing the structure of a class

You should always start with some thinking on your program and its purpose. It will guide you to imagine the structure of your application and the organization of your coding. This way, you can pre-design your ActionScript 3 class and get an idea, how to use data and what actions are important.

Package statement simply tells the path where ActionScript file is staying, also encloses class statement. Class statement defines its name and encloses its elements. Use public modifier and var keyword to define properties. Or use private modifier to define a private property. Private properties are essentially variables that can be accessed by any of the code within the class definition, but are not available outside the class definition.

Add methods by writing functions with the addition of an access modifier – public or private. You can also define a constructor method which is required to instantiate a class. That means, a class can’t be used if constructor method is not there. And if not defined (as in this tutorial), the compiler creates it automatically.

ActionScript 3 Class: working example »

Download FLA-CS3 source files

External Links » Read more on this topic

Your first ActionScript 3 class
Classes in ActionScript 3

Ad

2 comments
joey
joey

was this supposed to make anyone understand classes better ? didnt work.

Manoj Chauhan
Manoj Chauhan

Hi joey! I am somehow agree with you. The post is about "CREATING" classes in AS3. And I will post an article about "Understanding AS3 Class" soon. Thanks for your comments.