ActionScript 3 External Classes

February 6, 2009 by: smonte

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!

  • Digg
  • Sphinn
  • del.icio.us
  • Mixx

Related tutorials:

  1. ActionScript 3 Color Picker
  2. Random Boxes Text Effect with ActionScript 3
  3. Creating Fireworks with ActionScript 3
  4. Flash Mouse Trailer with Stars
  5. Rotating Mouse Trail with ActionScript 3

Comments

20 Responses to “ActionScript 3 External Classes”
  1. JJ says:

    hi mansur,

    i had the same problem like you.

    on step 3. you convert the star to a movieclip and in this window you’ll find on the bottom-right corner a button called extension(erweitert). klick on this button and you’ll get a list with the linkage settings. ;)

    bye bye

    Log in to Reply
  2. mansur says:

    why i right on movie as step 4:

    4. Linkage the movie clip to a class named “Star” (right click the movie clip in the library and select “Linkage”).

    I cannot see the linkage option in menu… I cannot continue this tutorial…

    I’m using Adobe Flash CS4,, TQ hope anybody help me…tq..

    Log in to Reply
  3. mike says:

    nice and simple! It was my first tutorial that worked out!!
    I have a question: Is a better way to make your animations through the code than to edit them in the timeline?

    Log in to Reply
  4. Chai says:

    i have following this tutorial but i have got the problem when test movie
    result —–> 5008: The name of definition ‘Star’ does not reflect the location of this file. Please change the definition’s name inside this file, or rename the file. /Users/chai/Desktop/AS/star.as

    Log in to Reply
  5. John says:

    Doesn’t work.

    MovieClips are the same color and they do not rotate. I even tried your exact script. I checked to see if it was the filename, but it wasn’t. The filename was fine, even with the case sensitive problem.

    Log in to Reply
    • John says:

      Figured it out. I accidently had the fuction Star() labeled as star(). Works now.

      Good tutorial.

      Log in to Reply
  6. Krille says:

    Hi!
    Very nice tutorial, but I can’t get it to work :S
    Can someone mail me the finished .fla file?

    Thanks!
    //Christian

    Email:
    christian.p92[at]hotmail.com

    [at] = @

    Log in to Reply
  7. AK47 says:

    Hi Smonte..

    This is a great tutorial, and it works perfect.
    The rotation speed and the colors of the stars are different, so thank you very much :)

    Log in to Reply
  8. Jason says:

    Nm I figured out why all my stars were the same color and NOT rotating.

    Filename is case sensitive. Star.as works, star.as does NOT. Funny that it throws no errors tho… Should at least say “Star.as not found”

    Log in to Reply
    • Jason says:

      Oh and one more ‘gotcha’…

      Save your .as file before running / testing, or your changes wont take effect. (and no matter what rate you tell them to rotate at theyll look the same and youll be left scratching your head…)

      This is a great learning tutorial, Id like to see more in a similar vein.

      Log in to Reply
  9. imperialx says:

    Hi smonte,

    What do you mean by “5. Remove the star from the stage. “? Does it mean delete the star?

    Log in to Reply
    • Jason says:

      Yes he means delete the star from the stage. The stage is populated by the stars via code, we just needed to make a movie clip instance of one star.

      Anyone run into the problem where the stars dont rotate?

      Log in to Reply
  10. Student says:

    Great job. Keep on!

    Log in to Reply
  11. mike says:

    it was the ‘great one’.
    i’ve wide bases on ansi c programming and no time for learning new stuff like as3. but i have to…
    this tutorial helped me a lot. thank you.
    mike

    Log in to Reply
  12. string says:

    Hi
    This is a nice, unfussy example of what I would like to do – thank you.
    But, I see that you call rotateStar fom within the Star class.
    How would you call it from within the main movie?
    string

    Log in to Reply

Leave a Reply

You must be logged in to post a comment.