Actionscript 3 External Classes
This tutorial is all about external Actionscript 3 classes. I will teach you how to linkage movie clips to an actionscript class and then we'll create an external class. The end product in seen above. The movie uses one external class and only a few lines of code is written in the main timeline. So why do we use external classes? To put it simple, external classes help you to stay more organized. External classes are part of a programming paradigm called "object oriented programming". The subject is very broad, so I will not go into that. In this tutorial, you don't need a great knowledge of OOP anyways. SO start your Flash IDE and let's get started!
Setting up the environment
1. Create a new document of size 300x300.
2. Draw a star on the stage. The polystar will help you in that.
3. Convert the star into a movie clip. Give it a name "Star" and set the registration point to the center.
4. Linkage the movie clip to a class named "Star" (right click the movie clip in the library and select "Linkage").
Don't worry about the Actionscript Class Warning. It warns you, because Flash can't find a class named "Star". That's normal since we haven't created that class yet!
5. Remove the star from the stage.
Moving into Actionscript 3
6. Create a new Actionscript file.
7. Type the following in the class
package {
import flash.display.MovieClip;
import flash.geom.ColorTransform;
import flash.events.*;
/*
This class represents the Star movie clip we drew on the stage.
We extend this class to a movie clip, thus allowing us to use movie
clip's functions and properties.
*/
public class Star extends MovieClip {
private var starColor:uint;
private var starRotation:Number;
/*
This is called the constructer of the class.
It is called every time we create a new Star instance.
In the constructor, we assign a random color to the star and set some
of it's properties.
*/
public function Star () {
//Calculate a random color
this.starColor = Math.random() * 0xffffff;
// Get access to the ColorTransform instance associated with star.
var colorInfo:ColorTransform = this.transform.colorTransform;
// Set the color of the ColorTransform object.
colorInfo.color = this.starColor;
// apply the color to the star
this.transform.colorTransform = colorInfo;
//Assign a random alpha for the star
this.alpha = Math.random();
//Assign a random rotation speed
this.starRotation = Math.random() * 10 - 5;
//Assign a random scale
this.scaleX = Math.random();
this.scaleY = this.scaleX;
//Add ENTER_FRAME where we do the animation
addEventListener(Event.ENTER_FRAME, rotateStar);
}
//This function is responsible for the rotation of the star
private function rotateStar(e:Event):void {
this.rotation += this.starRotation;
}
}
}
8. Save the file as "Star" in the same directory where your main movie is (this is very important!). The movie won't work without the correct file name and location. File names must always be the same as the class name.
9. You can close the actionscript class now. Go to your main movie and type the following code in the first frame.
/*
Create 100 stars on the stage.
Assign a random position to each.
All the star animation etc. are done in the "Star" class.
*/
for (var i = 0; i < 100; i++) {
var star:Star = new Star();
star.x = stage.stageWidth * Math.random();
star.y = stage.stageHeight * Math.random();
addChild (star);
}
10. You are done, test your movie! I hope you enjoyed this tutorial and learned something from it. If you have any questions concerning this tutorial, please visit the forum. Have a nice day!
