Animating Dynamic MovieClips in AS3 - Page 2

In the previous page you created the movie clip that we will load dynamically and animate. In this page, you will see the code that will allow you to do both of those tasks.

Adding the Code
Right click on a keyframe in your timeline and select Actions. Copy and paste the following code into the window that appears:

function Main() {

// Adding mouse event to our stage!

stage.addEventListener(MouseEvent.CLICK, AddCircle);

}

Main();

 

function AddCircle(e:MouseEvent):void {

// Adding a circle to the stage

var newCircle:BlueCircle = new BlueCircle();

this.addChild(newCircle);

 

// Setting the circle's X and Y position

newCircle.x = mouseX;

newCircle.y = mouseY;

 

// Setting the circle's scale and alpha

newCircle.scaleX = 0;

newCircle.scaleY = 0;

 

newCircle.alpha = 0;

 

// Adding ENTER_FRAME event listener

newCircle.addEventListener(Event.ENTER_FRAME, ZoomCircle);

}

 

function ZoomCircle(e:Event):void {

// Getting the clicked circle

var circleMC:MovieClip = MovieClip(e.target);

 

// Incrementing the scale

circleMC.scaleX += .05;

circleMC.scaleY += .05;

 

// Fading circle out after it reaches a certain size

if (circleMC.scaleX < 2) {

circleMC.alpha += .03;

} else {

circleMC.alpha -= .03;

 

// Stopping enter frame event after circle becomes (almost) invisible

if (circleMC.alpha < .1) {

circleMC.removeEventListener(Event.ENTER_FRAME, ZoomCircle);

}

}

}

Run your animation by pressing Ctrl + Enter. If you click anywhere in your movie, you will see circles appear that fade in and out just like in the animation on the first page.

Let's Look at the Code
Now that you have a working animation, let's look at the code in greater detail so that you have a better idea on how to animate dynamic movie clips.

Let's start with our Main function:

function Main() {

// Adding mouse event to our stage!

stage.addEventListener(MouseEvent.CLICK, AddCircle);

}

Main();

The Main function is what is called when your animation first runs. The most important (and only!) line of code in this function is where I add an event listener that listens for mouse clicks:

stage.addEventListener(MouseEvent.CLICK, AddCircle);

To listen for events, you first need to assign a target to act as a listener. In this case, we are assigning our movie's stage as the listener. To be an effective listener, you also need to know what to listen for, and in the above code, we listen for MouseEvent.CLICK events.

Once you find out what you are listening to, you probably want to do something. The easiest way would be to create a function that contains the code that "does something", and in our case, we call the AddCircle function to deal with the event you overheard.

To recap, we tell our stage to listen for mouse click events, and if it overhears a click (MouseEvent.CLICK) event, call the AddCircle function.

We ended our discussion of the event listener by saying it calls the AddCircle function. Let's take a look at the AddCircle function definition first:

function AddCircle(e:MouseEvent):void {

.

.

.

.

}

Unlike other function calls, a function called by an event handler has to fit certain specific characteristics. First, it must take one (and only one!) argument of a type based on Event. Second, it cannot return any value, so its return type must be void.

Our AddCircle function meets both of those criteria. It takes one argument of type MouseEvent, and MouseEvent is based on the Event class. The function also returns nothing, so its return type is set to void.

Now, let's look at the entire AddCircle function.

function AddCircle(e:MouseEvent):void {

// Adding a circle to the stage

var newCircle:BlueCircle = new BlueCircle();

this.addChild(newCircle);

 

// Setting the circle's X and Y position

newCircle.x = mouseX;

newCircle.y = mouseY;

 

// Setting the circle's scale and alpha

newCircle.scaleX = 0;

newCircle.scaleY = 0;

 

newCircle.alpha = 0;

 

// Adding ENTER_FRAME event listener

newCircle.addEventListener(Event.ENTER_FRAME, ZoomCircle);

}

The first part deals with adding our BlueCircle and displaying it on our stage. All of that is covered extensively in the Displaying Library Content in AS3.0 tutorial, so I will not be explaining them in this tutorial. Just note that our new circle is referenced by newCircle, and also note that the initial x-scale (scaleX), y-scale (scaleY), and alpha values are set to 0.

The line that is more interesting for this tutorial is where you attach an ENTER_FRAME event listener to the newCircle movie clip:

// Adding ENTER_FRAME event listener

newCircle.addEventListener(Event.ENTER_FRAME, ZoomCircle);

The format of adding an event listener should be familiar to you by now, and what used to be onEnterFrame/enterFrame in AS2 is now Event.ENTER_FRAME. This event listener repeatedly calls the ZoomCircle function as fast your frame rate allows.

On the next page, let's continue looking at the code by starting with the ZoomCircle function.

Onwards to the next page!

1 | 2 | 3