Flash Essential

In Part 2 of our Classes tutorial series we are going to take everything we wrote in Part 1 of our Class tutorial and add to it. We'll create a reusable class that will scale objects when you rollover it with your mouse.

Part 1 of this tutorial

You can view the finished class Here

Step 1 – Extending Our Class

After FirstClass remember that’s the name of our file and also our class name we type Extends MovieClip. What this does is FirstClass takes everything from the MovieClip Class and adds to it.

Step 2 – Adding Our Import Statement

Inside our first package bracket we have added an import statement. This import statement brings in all the information about movie clips, if we didn’t have this line we couldn’t extend the MovieClip Class as flash wouldn’t know what we are doing. So whenever you extend any class in an external file make sure you import that information using an import statement.

import flash.display.MovieClip;

class FirstClass extends MovieClip{
function FirstClass() {
trace("This is my First Class")
}
}
}

Step 3 – Adding Methods

A Method is a Function that is attached to an object. We write our Method after our Constructor Function. We start by typing function, then we give it a name, and finally we type void at the end because we aren’t returning any values. We then type what we want our function to do inside open and closed curly braces just like we’d do with our Constructor Function.

So essentially a Method is just a Function inside a class, for example in the code below only FirstClass can run myFunction.

import flash.display.MovieClip;

class FirstClass extends MovieClip{
function FirstClass(){
trace("This is my First Class")
}
function myFunction():void{
trace(“My Method Works!!!”)
}
}
}

Step 4 – Public and Private

When defining Classes, Methods, Variables inside of a class file you need to specify if it’s known to the class or of its something that you can call or modify outside of the class.

We do this by using Public and Private (explained above). Before our class definition and our constructor function type “public” this now means properties are accessible within the class as well as from instances of the class. Before our Method type private, this now means the properties are private when they're accessible only within the class.

So To Clarify;

private

Properties are private when they're accessible only within the class.

public

Properties are public when they're accessible within the class as well as from instances of the class (or directly from the class reference when declared as static.

Your code should now look like this;

public class FirstClass extends MovieClip{
public function FirstClass(){
trace("This is my First Class")
}
private function myFunction():void{
trace(“My Method Works!!!”)
}
}
}

Step 5 – Lets Make Something Useful

Now we are going to build this class into something we can use, we are going to create a simple class that scales an object when you roll over with your mouse. So we'll first add some Variables in the next step to get us started.

Step 6 - Adding Some Variables

Inside our Constructor Function we are going to add some Private Variables inside our class definition before our Constructor Function. We'll name our variables Xscale and Yscale and set the data type to number, these variables will represent the original x and y scale of our Movie Clip.

Your code should now look like this;

import flash.display.MovieClip;
public class FirstClass extends MovieClip{
private var Xscale:Number;
private var Yscale:Number;
public function FirstClass(){
trace("This is my First Class")
}
private function myFunction():void{
trace(“My Method Works!!!”)
}
}
}

Step 7 - Inside Our Constructor Function

Inside our Constructor Function we'll add some event listeners but first take note of what the this keyword is below. We set our Xscale and Yscale variables equal to the scaleX and scaleY properties. We then add some mouse events and give them the names bigger and smaller.

The this keyword is a references to a method's containing object. When a script executes, the this keyword references the object that contains the script. Inside a method body, the this keyword references the class instance that contains the called method.

Your code should now look like this;

Step 8 - Mouse Event Functions

Now we give our mouse events some functions. So first get rid of that myFunction and it's trace statement and we'll create some new functions called bigger and smaller. We'll give our bigger function some properties first, inside our curly braces we are multiplying our scaleX and scaleY values by 1.5. and Inside our smaller function we have are returning the object to its original size.

public class FirstClass extends MovieClip {
private var Xscale:Number;
private var Yscale:Number;

public function FirstClass() {
Xscale=this.scaleX;
Yscale=this.scaleY;
this.addEventListener(MouseEvent.ROLL_OVER,bigger);
this.addEventListener(MouseEvent.ROLL_OUT,smaller);
}
private function bigger(event:MouseEvent):void {
this.scaleX*= 1.5;
this.scaleY*= 1.5;
}
private function smaller(event:MouseEvent):void {
this.scaleX=Yscale;
this.scaleY=Xscale;
}
}
}

Step 9 - Lets Test It Out

Click File New and create a new Flash File and Save it. Once you have done that Select the Text Tool and type out Home onto the stage and convert it to a Movie Clip, call it mcHome. Open up your Library Panel, right click the mcHome Movie Clip and select Linkage. In the dialog box check Export For Actionscript and type in the details below.

We have our Actionscript File as our base class and our Movie Clip as our Class. You can create more Movie Clips on the stage and link them to the same AS file using the method above. Press Ctrl Enter to test the movie.

Conclusion

Congratulations you have created a useful class that you can reuse whenever you want! I hope this tutorial has helped you get a better understanding of how useful classes can be and how they can be a great time saver.

This post is tagged Actionscript 3, classes

Share This Post