Connect your animation to code

Sometimes you want to connect your animation to code.

In the engine now we only have very basic graphics and not really any animations. Lets say you want to have the players object be a space ship and when you press the right key the ships movieclip somehow reflect that it is moving to the right. Maybe the wings tilt or the engine exhaust point differently. How do we connect this in the movieclip to the code in the engine?

Well first you need to change your movieclip. I’ve added a flame coming out the rear of the ship. Inside the player movieclip I’ve added two new key frames. On the first key frame the flame points straight down. This frame I’ve named “forward”. On the second frame I’ve rotated the flame slightly so the bottom of the flame points to the left. This frame we name “right”. The last frame has the flame pointing to the right and this frame we name “left”.

So we now have our player movieclip with three different frames. When I press the right key we want the movieclip to show the frame named “right”. When I press the left key we want the movieclip to show the frame named “left”. And last we want the movieclip to go back to the frame “forward” whenever no key is pressed.

Before we go into the engine and connect your animation to code we need to stop the movieclip from animating through the three frames. On the first frame of the movieclip you need to add the code stop(); on the timeline. We don’t like code on the timeline but this time it’s necessary.

Next up we go into the engine. We first need to change the movePlayer function. The if statement checks which Boolean variable, or flag, is set telling us which key is pressed. Here we need to use gotoAndStop. Change the code like this:

if (rightArrow) {
player.x += speed;
player.gotoAndStop(“right”);
}

What it means to say player.gotoAndStop(“right”) is that we want the movieclip connected to player to go to the frame “right” and stop there. We need the same to happen when we press the left key.

if (leftArrow) {
player.x -= speed;
player.gotoAndStop(“left”);
}

If you run your game now you’ll notice that it works fine except for one thing. When you press the right key the animation changes but it doesn’t go back to normal when you release the right key. The same for the left key. So we need to change keyUpFunction to look like this:

if (event.keyCode == 37) {
leftArrow = false;
player.gotoAndStop(“forward”);
}

This way we go back to the first key frame of the animation when the key is released. Add the line player.gotoAndStop(“forward”); to the else if statement that checks if the keyCode is 39.

So now we have shown how to use gotoAndStop in order to change the frame of a movieclip. There is also a gotoAndPlay which we will look at another time.

And that is how you connect your animation to code. I hope it helps some and that you try it out! Post a comment if you have any questions or suggestions!