Handling Basic Animation with State MovieClips

In Handling Basic Animation with a Divided Timeline we added animation states to a game’s characters by splitting each of their timelines up.

Now let’s take a look at the second method for handling animation in Flash games: using one MovieClip for each animation state.

If you didn’t follow the divided timeline tutorial, I recommend reading through it to get some idea of what that method involves. That goes double if you’re a little unclear on how to deal with animation in the first place; I’ll just skim over those basics in this post.

Just as in the last tutorial, I’ll start from a game that has no animation — so if you’ve already added animation using a divided timeline, you might want to revert to an earlier version of your FLA for this. The game I’m going to use is (as usual) the one from my AS3 avoider game tutorial, and you can download all the files I’ll be using from this link.

Here’s what it’ll look like when we’re done:

Click to play

What’s the Basic Idea?

In my game, the avatar is a MovieClip, and so are each of the enemies. These MovieClips are added directly to the play screen, so we can move them about just by changing their x and y values.

Due to inheritance, every MovieClip is also a DisplayObjectContainer, which means we could add another MovieClip to, say, our enemy MovieClip, just like how that MovieClip is added to the play screen. And because this new MovieClip is inside the enemy MovieClip, if we change the enemy’s x and y positions, the new MovieClip will move with the enemy!

OK, that’s a little confusing when written down, and doesn’t really explain why we would want to do this. It’s best if I show you.

First, edit the Enemy movie clip in the Library:

Select it all (if all the layers are unlocked, you can click Edit > Select All)…

…and select Modify > Convert to Symbol. This familiar-looking dialog box will appear:

Call it Enemy_DefaultState, and export it for ActionScript with the same class name. (You’ll probably get that message about no such class being in the classpath; don’t worry about it.) Hit OK.

Now our Enemy movie clip doesn’t contain the lines and fills that make up the enemy image, but another MovieClip that in turn contains those lines and fills. You can tell this just by clicking on it:

This means we could have just created a new movie clip as normal, called it Enemy_DefaultState, dragged it into the Enemy symbol, and deleted the old graphic — that’d give the same result.

If you run the game, you’ll find it works as normal:

That’s reassuring, but not very useful so far. Let’s get this animating so that there was a point to all that. Go into editing mode for the Enemy_DefaultState movie clip by double-clicking it in the library.

Now, add some new frames to the timeline, just as we did in the earlier tutorial. (In fact, I’m just going to copy and paste the frames from before!)

Don’t bother adding a label to the first frame or adding a blank keyframe. Just get the animation in there. Run the game again, and you’ll see that it’s all animating nicely:

Click to play

Great! Now let’s have a go at different animation states with the avatar.

One MovieClip Per State

You can probably guess what we need to do here. We’ve got to end up with five different movie clips, one for each state of the avatar’s animation. That is:

1. Avatar_StandingStillState
2. Avatar_MovingLeftState
3. Avatar_MovingRightState
4. Avatar_MovingUpState
5. Avatar_MovingDownState

Go ahead and make each of these. It’s probably easiest just to make five brand new movie clips in the library. Again, don’t bother with labelling frames or adding blank keyframes with a stop() action.

When you’re done, you need to end up with the Avatar_StandingStillState movie clip in the place of the original lines and fills inside the Avatar movie clip.

Run the game, just to make sure it’s working:

Click to play

OK, good. How do we switch between these states, though?

A Top Down Approach

First, let’s think about how we’d like to be able to switch states. In the divided timeline tutorial, we did it with this code in AvoiderGame.as:

if ( downKeyIsBeingPressed )
{
	if ( avatar.currentAnimationState != "MovingDown" )
	{
		avatar.gotoAndPlay("MovingDown");
		avatar.currentAnimationState = "MovingDown";
	}
	avatar.moveABit( 0, 1 );
}
else if ( upKeyIsBeingPressed )
{
	if ( avatar.currentAnimationState != "MovingUp" )
	{
		avatar.gotoAndPlay("MovingUp");
		avatar.currentAnimationState = "MovingUp";
	}
	avatar.moveABit( 0, -1 );
}
else if ( leftKeyIsBeingPressed )
{
	if ( avatar.currentAnimationState != "MovingLeft" )
	{
		avatar.gotoAndPlay("MovingLeft");
		avatar.currentAnimationState = "MovingLeft";
	}
	avatar.moveABit( -1, 0 );
}
else if ( rightKeyIsBeingPressed )
{
	if ( avatar.currentAnimationState != "MovingRight" )
	{
		avatar.gotoAndPlay("MovingRight");
		avatar.currentAnimationState = "MovingRight";
	}
	avatar.moveABit( 1, 0 );
}
else
{
	//player is not pressing any keys at all
	if ( avatar.currentAnimationState != "StandingStill" )
	{
		avatar.gotoAndPlay("StandingStill");
		avatar.currentAnimationState = "StandingStill";
	}
}

I think this is a pretty good layout, but we’ll have to change those gotoAndPlay() calls to something else. How about avatar.switchState( "StandingStill" ) instead?

if ( downKeyIsBeingPressed )
{
	if ( avatar.currentAnimationState != "MovingDown" )
	{
		avatar.switchState("MovingDown");
		avatar.currentAnimationState = "MovingDown";
	}
	avatar.moveABit( 0, 1 );
}
else if ( upKeyIsBeingPressed )
{
	if ( avatar.currentAnimationState != "MovingUp" )
	{
		avatar.switchState("MovingUp");
		avatar.currentAnimationState = "MovingUp";
	}
	avatar.moveABit( 0, -1 );
}
else if ( leftKeyIsBeingPressed )
{
	if ( avatar.currentAnimationState != "MovingLeft" )
	{
		avatar.switchState("MovingLeft");
		avatar.currentAnimationState = "MovingLeft";
	}
	avatar.moveABit( -1, 0 );
}
else if ( rightKeyIsBeingPressed )
{
	if ( avatar.currentAnimationState != "MovingRight" )
	{
		avatar.switchState("MovingRight");
		avatar.currentAnimationState = "MovingRight";
	}
	avatar.moveABit( 1, 0 );
}
else
{
	//player is not pressing any keys at all
	if ( avatar.currentAnimationState != "StandingStill" )
	{
		avatar.switchState("StandingStill");
		avatar.currentAnimationState = "StandingStill";
	}
}

Looks good to me. Add this code, but don’t bother running it — obviously we’ll get a whole load of errors since our Avatar class doesn’t have a currentAnimationState property or a switchState() function. Let’s add them now:

package 
{
	import flash.display.MovieClip;
	public class Avatar extends MovieClip 
	{
		public var currentAnimationState:String;
 
		public function Avatar() 
		{
			currentAnimationState = "StandingStill";
		}
 
		public function switchState( newState:String ):void
		{
			//we'll change the state here
		}
 
		public function moveABit( xDistance:Number, yDistance:Number ):void
		{
			var baseSpeed:Number = 3;
			x += ( xDistance * baseSpeed );
			y += ( yDistance * baseSpeed );
		}
	}
}

If you run this now, you shouldn’t get any errors.

Now for the tricky part: actually changing the state. Any ideas?

Switching States

We could try doing things in the same way the background image gets changed; that is, by simply adding a new movie clip on top of the old one:

public function switchState( newState:String ):void
{
	if ( newState == "MovingLeft" )
	{
		addChild( new Avatar_MovingLeftState() );
	}
	else if ( newState == "MovingRight" )
	{
		addChild( new Avatar_MovingRightState() );
	}
	else if ( newState == "MovingUp" )
	{
		addChild( new Avatar_MovingUpState() );
	}
	else if ( newState == "MovingDown" )
	{
		addChild( new Avatar_MovingDownState() );
	}
	else if ( newState == "StandingStill" )
	{
		addChild( new Avatar_StandingStillState() );
	}
}

Try it out:

Click to play

Hmm, not quite right is it? The avatars just pile up on top of each other, and it looks a mess.

Alright, so we need to remove the old avatar animation before adding a new one. This means we need some way of accessing the old one — let’s give it an instance name.

Just edit the Avatar symbol, click the Avatar_StandingStillState instance that’s sitting there, and in the Properties panel, set its instance name to currentAnimationMovieClip.

Now, if you’ve turned off Automatically declare stage instances, as I have, you’ll get this error when running the game:

ReferenceError: Error #1056: Cannot create property currentAnimationMovieClip on Avatar.

(If you haven’t turned it off, then do so now, because you’ll need to. Check out Part 12 of my avoider game tutorial for more.)

This error means we need to define currentAnimationMovieClip inside the Avatar class, which means adding a public var currentAnimationMovieClip to the class-level variables. We know that this animation has a class name of Avatar_StandingStillState, so we can use that:

package 
{
	import flash.display.MovieClip;
	public class Avatar extends MovieClip 
	{
		public var currentAnimationState:String;
		public var currentAnimationMovieClip:Avatar_StandingStillState;

Now we just need to remove the current animation, replace it with a new one, and add that new one to the Avatar, like so:

public function switchState( newState:String ):void
{
	removeChild( currentAnimationMovieClip );
 
	if ( newState == "MovingLeft" )
	{
		currentAnimationMovieClip = new Avatar_MovingLeftState();
	}
	else if ( newState == "MovingRight" )
	{
		currentAnimationMovieClip = new Avatar_MovingRightState();
	}
	else if ( newState == "MovingUp" )
	{
		currentAnimationMovieClip = new Avatar_MovingUpState();
	}
	else if ( newState == "MovingDown" )
	{
		currentAnimationMovieClip = new Avatar_MovingDownState();
	}
	else if ( newState == "StandingStill" )
	{
		currentAnimationMovieClip = new Avatar_StandingStillState();
	}
 
	addChild( currentAnimationMovieClip );
}

Does that make sense? Remember, the currentAnimationMovieClip value doesn’t contain any particular object, it just points to one.

Try it out. Hey, errors:

1067: Implicit coercion of a value of type Avatar_MovingLeftState to an unrelated type Avatar_StandingStillState.
1067: Implicit coercion of a value of type Avatar_MovingRightState to an unrelated type Avatar_StandingStillState.
1067: Implicit coercion of a value of type Avatar_MovingUpState to an unrelated type Avatar_StandingStillState.
1067: Implicit coercion of a value of type Avatar_MovingDownState to an unrelated type Avatar_StandingStillState.

What’s going on here? Well, “implicit coercion” means we’re trying to make a round peg fit in a square hole — in this case, we’re trying to get a variable of type Avatar_StandingStillState to point to an object of type Avatar_MovingLeftState (and then Avatar_MovingRightState, and so on).

Specifically, the first error’s occurring on this line:

currentAnimationMovieClip = new Avatar_MovingLeftState();

And that makes perfect sense, when you think about it; currentAnimationMovieClip is an Avatar_StandingStillState, and as far as Flash is aware, that’s nothing like an Avatar_MovingLeftState.

You and I, on the other hand, know that these two things have something in common: they both extend MovieClip, so they both are MovieClips. So let’s try to generalise a little bit. Go back up to the top of Avatar.as, where we defined that class-level variable, and change its type:

package 
{
	import flash.display.MovieClip;
	public class Avatar extends MovieClip 
	{
		public var currentAnimationState:String;
		public var currentAnimationMovieClip:MovieClip;

The idea is that now when we run this line:

currentAnimationMovieClip = new Avatar_MovingLeftState();

…we shouldn’t get an error, because we’re just saying “set this MovieClip variable to point to this Avatar_MovingLeftState (which is a MovieClip)”. Nothing wrong with that.

Test it out:

Click to play

Success!

Wrapping Up

The finished files I used in this tutorial are available in a zip file here.

I didn’t mention it above, but you should add all the state movie clips to the AssetHolder and uncheck Export in first frame if you want them to be preloaded.

Also, I mentioned the way the background image keeps getting a new movie clip added to it every time you change levels. This was the best solution at the time, but now you know how to improve it by removing the old ones. That’s definitely worth changing.

Anyway, now you know two main methods of animation in Flash and AS3. Which do you prefer?

You might have realised that we could use a movie clip with a divided timeline as a state movie clip, and be wondering whether we could simplify things in this way. The answer is yes, and I’d love to write more about it, but unfortunately we’ve reached the end of this tutorial. Look, the comments are right there, just a couple of inches below this line!

Tagged as: animation, AS3, Avoider Game Extras, beginner, divided timeline, flash, state movie clips, Tutorial