by
kirupa | 28 May 2007
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.
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.
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!
|