Extending the MovieClip object was something that was done all the time in Flash 5 by attaching new properties and methods to the MovieClip.prototype property. However, this gave all instances of movieclips this added information, including instances that did not need or use this added information. With Flash MX, by using Flash's form of inheritance, we can easily extend the default objects (including the MovieClip) to create new custom objects with new functionality without bloating the original object. In this tutorial, we will look at the steps needed to create this effect.

1. Open a new movie and name the default layer "code".
2. Insert a new symbol (F8) and name it "followerSymbol". Make sure that the "Export for Actionscript" option is selected and that the identifier name is "followerSymbol" as well (I love that you can do this all in the same dialogue box now!). Once you enter symbol editing mode, draw a small circle graphic in the center of the stage. Exit symbol editing mode.
3. Back on the main timeline, select frame one and open your Actionscript editor. Type the following:
   
   
   
   

   FollowerClass = function() {

   this.init();

   }

   FollowerClass.prototype = new MovieClip();

   
   

   Not a lot of typing there, but these few lines do a WHOLE LOT for us. First, we have what looks like a normal function declaration. This is also the way to create a new Class in Flash. FollowerClass will be the name of our new Class (like MovieClip, Array, Color, etc.). You can see that the only thing we actually do in this function is invoke the init() method, which we will write in a moment. This means that whenever we create a new instance of FollowerClass, the first thing that will occur is that it will run its init() method.

   The next line, where we set the FollowerClass's prototype to equal a new MovieClip instance, is what establishes our inheritance. The prototype property of an object is a special property that holds all of its other properties and methods. By setting this property of FollowerClass to equal a new MovieClip, we are saying that FollowerClip should include all of the properties and methods of a MovieClip instance. Now if we add additional properties and methods to FollowerClass, it will have all the MovieClip properties and methods PLUS our new properties and methods. This is what is meant by extending the MovieClip (without affecting the MovieClip object itself).

4. Add this additional code to our code window:
   
   
   
   

   FollowerClass.prototype.init = function() {

   this._x = Math.random()*Stage.width;

   this._y = Math.random()*Stage.height;

   this.followRate_x = Math.random()*50 + 10;

   this.followRate_y = Math.random()*50 + 10;

   
   

   And here's the start of the init() method that we called in the constructor function. All it does it set up some random values for four properties. First, it's important to note that this is used to refer to the instance of FollowerClass that was just created. In the function, we set the _x and _y properties to be random positions within the width and height of the stage (which will be returned by the Stage object). followRate_x and followRate_y will be the rate of movement on each axis at which this instance will move. I set it to be between 10 and 60. You'll see how we use this shortly.

5. Finish up the init() with the following:
   
   
   
   

   this.onMouseDown = this.gotoMouse;

   }

   
   

   Pretty easy finish, right? With Flash MX, we can dynamically assign handlers to events, and this is what we're doing in this step. This instance, since it is an extension of the MovieClip, will receive mouseDown events. When this occurs, we tell it to run its gotoMouse method, which we will write next.

6. Add this method right after the init() method:
   
   
   
   

   FollowerClass.prototype.gotoMouse = function() {

   this.onEnterFrame = function() {

   this._x -= (this._x - _root._xmouse)/this.followRate_x;

   this._y -= (this._y - _root._ymouse)/this.followRate_y;

   };

   }

   
   

   What's this function within a function?? Well, this is another great new use of the new event model in Flash MX. In Flash 5, if you wanted code to loop on a movieclip at certain points of your movie, most of time you resorted to an onClipEvent(enterFrame) which would run throughout your movie, whether you needed the loop to be constant or not. Here, what we have done instead is create the looping enterFrame function ONLY once the mouse is pressed. Now, what exactly does this enterFrame function do? This is merely the old Zeno's paradox method of easing animation where each frame we move the instance a fraction of the remaining distance to the mouse location (based on, of course, the followRate properties we assigned in the init() method).

7. What we need now is a way to remove our looping action when the mouse is no longer down. That's easy enough to to. Add the following code after the gotoMouse() method:
   
   
   
   

   FollowerClass.prototype.stopFollowing = function() {

   delete this.onEnterFrame;

   }

   
   

   Two guesses what this code does.

   OK, I'll tell you (I'll assume you guessed correctly). When this method is called, the function we assigned to our onEnterFrame handler is deleted, ending the looping action. In such a way you can create looping code ONLY WHEN YOU NEED IT, saving the processor from needless loops. Isn't that fantastic?

8. In order to delete the loop, though, we need to call the method we just wrote, so let's add a line to our init() method to take care of that (addition in bold):
   
   
   
   

   this.onMouseDown = this.gotoMouse;

   this.onMouseUp = this.stopFollowing;

   }

   
   

   That's all we need to handle it. We're almost done now. In fact, there's only one thing left to finish our new Class of movieclips!

9. Add the following line of code at the end of all of our previous code:
   
   
   
   Object.registerClass("followerSymbol", FollowerClass);
   
   

   One simple line ties it all up nicely. What we are doing is associating a symbol in our library (followerSymbol, which we exported earlier) with a Class definition (FolowerClass) using the built-in registerClass method of the Object object. Now whenever we place an instance of followerSymbol on the stage, it will automatically be an instance of FolowerClass, our customized extension of a movieclip.

10. Now, to attach some followers to the stage when the movie begins, add the following code to the Actionscript window, after all the previous code:
    
    
    
    

    for (i = 0; i < 20; i++) {

    this.attachMovie("followerSymbol", "f" + i, i);

    }

    
    

    With a simple for loop, we attach 20 instances of followerSymbol to the stage. Each one will house all of the methods of our FollowerClass without containing duplicate code. Test your movie to see the result!

Not too bad, huh? It's fairly easy to extend the MovieClip object to take on new functionality. Consider using such a method in your own projects instead of adding new methods to the MovieClip itself (unless, of course, you need all movieclip instances to have the added functionality). By containing all of your new methods and properties inside new Classes, you're one step closer to writing more modular, more useful code. Explore and enjoy!