Animating Dynamic MovieClips in AS3 - Page 3
       by kirupa  |  28 May 2007

In the previous page, we started explaining what the code does. While doing that, you learned about how to add event handlers. In this page, we'll finish our code explanation and wrap up this tutorial.


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);
}
}
}

The ZoomCircle function fits the standard formula for being a function called by an event handler. It takes in one argument of type Event, and its return type is void. The rest of the code deals with causing our circle to zoom in, so there is nothing complicated that goes on.

What is worth nothing is stopping the animation by removing the event listener we added earlier:

// Stopping enter frame event after circle becomes (almost) invisible
if (circleMC.alpha < .1) {
circleMC.removeEventListener(Event.ENTER_FRAME, ZoomCircle);
}

To remove an event listener, you can use the removeEventListener function. The arguments you pass to removeEventListener must match the arguments you made earlier when adding the listener to you object. In other words, both the event and function called must be the same.


Knowing which object was the source of an event is very important. In our case, we need to know which movie clip held the event listener that fired the ZoomCircle function so that we can remove that event listener.

Determining the object that triggered the event can be determined by your event object's target method:

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

In the above line of code from the ZoomCircle function, I determine which movie clip called the event by checking our Event object e's target property.

e.target returns an object of type Object. Since I am interested in the movie clip version, I can cast the returned object into a movie clip by typing MovieClip(object) where object is the what you wish to typecast. In our case, the object returned by e.target is typecast into a MovieClip.


Conclusion
This tutorial covered a lot of ground! Hopefully you learned how to use event handlers to animate dynamic movie clips. Beyond that, knowing the details such as how to add/remove event handlers, determining the target of an event, etc. can come in quite handy.

The ENTER_FRAME event is what allows you to create smooth animations. Unlike a traditional loop, an enter frame action does not flood the internal message queuing mechanism. This means that your animation can do other things such as respond to mouse clicks, whereas a loop will freeze your application until it has run its course.

You have to use addEventListener to attach an object to an ENTER_FRAME event that will call a function. This step requires a slight reprogramming of how you may have learned to dynamically animate (see older tutorial) in ActionScript 2, but in the long run, you will find the new way to be more consistent with the syntax and style found in other programming languages.


Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!

Kirupa's signature!

 


1 | 2 | 3




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.