Dynamic Mouse Trail in Flash - Page 3
       by kirupa  |  3 August 2009

In the previous page, you copied and pasted all of the code needed to make your mouse trail to work. In this page, let's start to look at why the code works the way it does.

ActionScript Explained
Let's start by looking at the code we pasted first into the first frame of our Flash file:

function duplicateCircle(e:MouseEvent) {

 

var xPosition:Number=stage.mouseX;

var yPosition:Number=stage.mouseY;

var scaleFactor:Number=.1;

 

var circle:ColorfulCircle = new ColorfulCircle();

circle.x=xPosition;

circle.y=yPosition;

 

circle.scaleX=scaleFactor;

circle.scaleY=scaleFactor;

 

this.addChild(circle);

}

 

function startListening() {

 

stage.addEventListener(MouseEvent.MOUSE_MOVE, duplicateCircle);

}

startListening();

Going from what gets called first:

function startListening() {

 

stage.addEventListener(MouseEvent.MOUSE_MOVE, duplicateCircle);

}

startListening();

The first line of code that gets called is startListening. This function contains only one line of code that registers an event listener on our stage. This event listener associates the MouseEvent's MOUSE_MOVE event with an event handler (function) called duplicateCircle. This means that each time your mouse moves over your stage, the duplicateCircle function gets called.

Let's look at duplicateCircle next:

function duplicateCircle(e:MouseEvent) {

 

var xPosition:Number=stage.mouseX;

var yPosition:Number=stage.mouseY;

var scaleFactor:Number=.1;

 

var circle:ColorfulCircle = new ColorfulCircle();

circle.x=xPosition;

circle.y=yPosition;

 

circle.scaleX=scaleFactor;

circle.scaleY=scaleFactor;

 

this.addChild(circle);

}

Because duplicateCircle is a function designated as an event handler, it takes one argument whose type is MouseEvent. If you recall from a few seconds ago, it is the MouseEvent.MOUSE_MOVE event you are listening for, so it all makes sense that duplicateCircle takes an argument that is of type MouseEvent as well.

var xPosition:Number=stage.mouseX;

var yPosition:Number=stage.mouseY;

var scaleFactor:Number=.5;

These three lines are pretty straighforward. I am declaring three variables of type Number. xPosition and yPosition store the current X and Y position of the mouse, and scaleFactor simply stores a number that you define.

var circle:ColorfulCircle = new ColorfulCircle();

circle.x=xPosition;

circle.y=yPosition;

 

circle.scaleX=scaleFactor;

circle.scaleY=scaleFactor;

The next set of lines deal with initializing your ColorfulCircle object called circle and setting default properties on it. The ColorfulCircle object is based on the circle you converted into a movie clip on the first page. When this line gets called, it is that circle that you drew that is being talked about because you set its class name to ColorfulCircle. Small world, isn't it?

Notice that the three variables you saw a few moments ago are being put to good use:

var circle:ColorfulCircle = new ColorfulCircle();

circle.x=xPosition;

circle.y=yPosition;

 

circle.scaleX=scaleFactor;

circle.scaleY=scaleFactor;

The initial X and Y position of your circle object are based on the X and Y positions of your mouse as stored in the xPosition and yPosition variables. The horizontal and vertical scale are set by the scaleFactor variable you saw earlier as well.

this.addChild(circle);

At the end of previous section of code, you have in-memory a representation of a single instance of your ColorfulCircle movie clip with the X, Y, and Scale values set. To actually visualize that movie clip on the screen, you need to add it to your visual tree. That is done by calling the addChild method with the object you want to add passed in as an argument.

Ok, we just finished up looking at the code that causes your circle to appear where your mouse cursor is. Let's next look at the code that lives inside the ColorfulCircle class file that is responsible for creating the cool transition that you see....on the next page!

Onwards to the next page.

1 | 2 | 3 | 4