ActionScript 3 External Classes

January 17, 2010

Actionscript 3.0 Tutorial

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”).

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.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

, , , ,

4 Responses to “ActionScript 3 External Classes”

  1. mahi Says:

    awesome!! thanx!! :)

Trackbacks/Pingbacks

  1. ActionScript 3 External Classes | Flash tutorial | Flash video … | Drakz Free Online Service - January 18, 2010

    [...] original here: ActionScript 3 External Classes | Flash tutorial | Flash video … Share and [...]

  2. How to Create 3D Boxes via ActionScript 3 – Part 1 | Flash tutorials | Flash video | Flash actionscript | flash animation |macromedia flash | flash menu | flashconf.com - January 23, 2010

    [...] clip to a class named “MyBox”. If you are unfamiliar with movie clip linkage, please see the “External Classes” [...]

  3. Can someone help me to understand how to dynamically add clips on the stage - SitePoint Forums - April 4, 2011

    [...] permalink Hope the following links will help you: The Display List, The Stage, and "addChild" in Flash CS3 ActionScript 3 External Classes | Flash tutorials | CS5 | Actionscript | flash animation | HowTo [...]

Leave a Reply