Tuesday, September 13, 2011

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 300×300.
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”).
Linkage star
Linkage properties
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.
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.as” 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!

No comments:

Post a Comment