Animating Dynamic MovieClips - Page 3

In the previous page, you finished creating a working example of the animation you saw on the first page. Of course, re-creating what I wrote is only part of the learning experience. The bigger part is figuring out how all of the various pieces of our code fits together. We start that trip by taking a look at the code!

Code Explained
The following section provides a line-by-line explanation of what the code does. By the end, you should have a good understanding of not only how the code works but how all of the code works together to product the full animation.

var count:Number = 0;

I am declaring a variable of type Number called count. As you will see later, this value keeps an accurate tally of the number of circles that are displayed on the screen.

function attachOnMove():Void {

this.onMouseMove = function() {

var xPos:Number = _root._xmouse;

var yPos:Number = _root._ymouse;

var scale:Number = 50+Math.random()*100;

count++;

//

this.attachMovie("blueCircle", "blue"+count, 10000+count, {_x:xPos, _y:yPos, _alpha:10+Math.random()*40, _xscale:scale, _yscale:scale});

var newMC:MovieClip = eval("blue"+count);

newMC.onEnterFrame = function() {

fadeOut(this);

};

};

}

attachOnMove();

The attachOnMove function is responsible for taking the blue circle from the library, displaying it on the stage, and applying some special effects to it. The next few sub-sections delve deeper into attachOnMove's code.

this.onMouseMove = function() {

var xPos:Number = _root._xmouse;

var yPos:Number = _root._ymouse;

var scale:Number = 50+Math.random()*100;

count++;

//

this.attachMovie("blueCircle", "blue"+count, this.getNextHighestDepth(), {_x:xPos, _y:yPos, _alpha:10+Math.random()*40, _xscale:scale, _yscale:scale});

var newMC:MovieClip = eval("blue"+count);

newMC.onEnterFrame = function() {

fadeOut(this);

};

};

The onMouseMove event handler executes any code contained within it every time the mouse cursor moves. This event handler is similar to onEnterFrame, except, unlike onEnterFrame, nothing is executed when the user is not actively interacting with the animation.

var xPos:Number = _root._xmouse;

var yPos:Number = _root._ymouse;

The xPos and yPos variables store the x and y positions of the mouse cursor. Because these lines are stored inside the function that is tied to onMouseMove, the xPos and yPos values automatically change as the mouse is moved around the animation surface.

Onwards to the next page!

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8