Adding Internal Animation to the Invader Game

Click in the window above to set focus. Invaders blow up and fade away when hit, using an internal animation within invader_mc.

Now that Lab 2 is in the bag, it's time to discuss one strategy for adding internal animation, so the invaders suffer a more dramatic fate than simply disappearing from the screen.

The strategy we've used here is fairly simple: add two more keyframes and a tweened animation to invader_mc, the Movie Clip that represents our invaders from space. Here's how the Movie Clip's timeline looks in this revised version:


Screenshot of invader_mc timeline


Remember, this is the timeline for the Movie Clip, not the main movie.

As you can see, keyframes 1 and 13 have scripts attached. The script in frame 1 contains a single statement: stop(), which causes playback to stop at this frame, so we can wait until the invader is hit by the bullet (if that happens) before running its exit animation.

Frame 13 also contains only a single statement: reSet(), which calls the custom method that repositions the invader offscreen top after it is either hit, or allowed to pass safely offscreen bottom.

Now, a word about this statement. That reSet() method is defined within invaderClass.as, the external ActionScript class file that is linked to invader_mc. How can we call that method from a frame script?

Answer: the timeline frames within a Movie Clip are part of the object, and are exposed to ActionScript statements in a linked class. In other words, everything scripted on internal timeline frames, and everything within a linked class file, may all be thought of as encompassed under the keyword this, or the current object.

So we could have written this.stop() in frame 1, and this.reSet() in frame 13, though the keyword is implicit in both cases.

So, we've explained how the animation works, and hands off to reSet(); but how do we trigger the animation? As you might suspect, we do this by changing the result clause of the hit test:

  if(hitTestObject(MovieClip(root).theBullet)) gotoAndPlay(10);

Again, gotoAndPlay(10) is equivalent to this.gotoAndPlay(10), and remember, this instruction goes to an instance of invader_mc, not to the main movie (which doesn't have a tenth frame). So this command tells the Flash Player to skip out of frame 1 of invader_mc, where it's run up against that stop() instruction, and play the rest of the internal timeline, beginning at frame 10.

At this point, perhaps you wonder what happens when we get to the end of the internal animation; or specifically, why there is no stop() statement in the frame 13 script. Doesn't this mean that the Flash Player continues on after frame 13?

Indeed it does, and it goes straight to frame 1, since all Flash movies and Movie Clips loop from their last frames to their first. Since frame 1 has a script containing the stop() instruction, we end up right where we want to be, back in the unexploded state, where we stay until the invader encounters another bullet.



University of Baltimore Logo

Last updated: 03/23/08 16:25:52
Copyright © 2008 School of Information Arts and Technologies