The Runner class

The Runner class

Normally, you might want to develop an object that walks before it runs, but since you have your base classes built, you can always go back and add a Walker class. Like the Wanderer class, the Runner class will extend the Bounded- Mover class created earlier.

1. Create a new ActionScript 3.0 document and save it as RunnerExample.fla in the examples folder.

2. Open the walk cycle that you created in Chapter 2. Copy the symbol from the Library that contains your

character and paste it into the RunnerExample docu- ment Library. Ctrl-click/right-click and ensure that the new symbol in your RunnerExample document is set to have a Type value of “Movie Clip” in the Symbol Properties.

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

3. Drag an instance of your character onto the Stage and position the instance near the bottom-left corner of the

Stage (Figure 3.43).

Figure 3.43 The symbol containing the walk cycle positioned near the bottom-left corner of the Stage.

4. Create a new ActionScript class named Runner.

5. Save the ActionScript file as Runner.as in the examples/com/anim/character folder.

6. Add the following highlighted code to make Runner a subclass of BoundedMover:

public class Runner extends BoundedMover {

7. Update the package statement with the following highlighted code to match the saved location of the

Runner.as file: package com.anim.character {

8. Add the following properties just after the package declaration:

protected var runSpeedRatio:uint = 2; protected var frameSkipRatio:uint = 2; protected var shiftIsDown:Boolean = false;

Chapter 3 Introduction to ActionScript Classes

The first property, runSpeedRatio , determines how fast the character moves compared to the character’s nor- mal walk speed. The second property, frameSkipRatio , determines how fast the character’s walk cycle will ani- mate. To simulate running, you will skip frames in the character’s walk cycle. This will provide the illusion that the character’s legs are moving faster. The last property,

shiftIsDown , stores the status of the Shift key. If the Shift key is down (pressed), it causes your character to run rather than walk.

9. Add the updatePosition method just below the con- structor method:

override protected function ➥ updatePosition(e:Event):void {

checkEdges(); var velocity:int = vx; if(shiftIsDown) velocity *= runSpeedRatio; if(velocity == 0){

this.stop(); } else if (shiftIsDown){ var newFrame:uint = this.currentFrame + ➥ Math.round(runSpeedRatio/frameSkipRatio); var loopGap:int = newFrame - this. ➥ totalFrames; if(loopGap > 0) { this.gotoAndPlay(loopGap); } else { this.gotoAndPlay(newFrame); } } else { this.play(); } this.x += velocity;

} This is the most complicated updatePosition method

that you’ve written thus far, so let’s go through each line. There’s first a call to the checkEdges method to

The checkEdges make sure the character is within the boundaries. Since method is an inherited part of the Runner

you haven’t overwritten the checkEdges method in this class, even though you haven’t class, there’s no need to use the super keyword.

rewritten it.

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

Next, you create a local variable to store the x velocity. This variable can be manipulated without changing the value of the original vx property.

In the third line, if shiftIsDown is true, the velocity will

be increased by the runSpeedRatio . So, if the user is pressing the Shift key, the character will run.

The next block, all the way down to before the last line ( this.x += velocity; ), is just a slightly more complex version of the if - else statement that appeared in the Wanderer class. In the if block, you’re checking to see

if the velocity is 0; if so, then you stop the walk-cycle animation. Now, examine the else block: Here you play the character’s walk cycle (in the case that the veloc- ity is not 0). Now look at the larger else - if block. This block runs only if the first if statement is false and if the

shiftIsDown property is set to true. So, the condition- als in these blocks serve the following purposes: The if statement corresponds to when the character is not moving, the else - if for when the character is running, and the else for when the character is walking.

Let’s look at the else - if block in detail. The first line defines a local variable named newFrame . The newFrame

variable determines the next frame of the walk cycle that should be shown. Using the current property set- tings, runSpeedRatio divided by frameSkipRatio reduces to 2/2, or 1. You must round this number in case these values are changed later, because they could reduce to

a number with a decimal and a frame must be a whole number. The 1 (from above) is then added to the current frame number (a property inherited from the MovieClip class).

The next variable, loopGap , stores the difference between the newFrame and the totalFrames available inside your walk cycle. This variable will be used to determine if you have gone beyond the last frame and must go back to the beginning of the cycle.

Lastly, inside the else - if block is a nested if - else statement. If the loopGap value is greater than 0, the

Chapter 3 Introduction to ActionScript Classes

newFrame value is beyond the total number of frames and you have to start playing your cycle from the beginning. Since the loopGap variable stores the num- ber beyond the total number of frames, the loopGap becomes the starting frame. If you have not gone beyond the total number of frames, the else block will start playing at the newFrame value.

10. Add the keyboard listener methods below the updatePosition method:

override protected function ➥ keyDown(e:KeyboardEvent):void {

if (e.keyCode == Keyboard.SHIFT) { shiftIsDown = true; } else if (e.keyCode == Keyboard.LEFT) { vx = -currentSpeed; this.scaleX = -currentScaleX;

} else if (e.keyCode == Keyboard.RIGHT) { vx = currentSpeed; this.scaleX = currentScaleX;

override protected function ➥ keyUp(e:KeyboardEvent):void {

if (e.keyCode == Keyboard.LEFT || e.keyCode == ➥ Keyboard.RIGHT) {

vx = 0; } else if (e.keyCode == Keyboard.SHIFT) { shiftIsDown = false; } }

The UP and DOWN conditionals (used in the superclasses) have been removed, since your character is in profile and will only move left and right. Additionally, there’s

no need for the rotation used in the Wanderer class. You may want to extend the Run- ner class in the future and reinstate Only the vx and the scaleX properties must be set. A

the UP and DOWN conditions to condition has been added for SHIFT that simply toggles

apply behaviors like jumping and on (true) in the keyDown method and toggles off (false)

crouching.

in the KeyUp method for the shiftIsDown property.

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

11. Ensure that the following import statements are included just inside the package declaration:

import com.anim.character.BoundedMover; import flash.events.KeyboardEvent; import flash.ui.Keyboard; import flash.events.Event;

The completed Runner class should now read: package com.anim.character {

import com.anim.character.BoundedMover; import flash.events.KeyboardEvent; import flash.ui.Keyboard; import flash.events.Event;

public class Runner extends BoundedMover{

protected var runSpeedRatio:uint = 2; protected var frameSkipRatio:uint = 2; protected var shiftIsDown:Boolean = false;

public function Runner() {

override protected function ➥ updatePosition(e:Event):void {

checkEdges();

var velocity:int = vx; if(shiftIsDown) velocity *=

➥ runSpeedRatio;

if(velocity == 0){ this.stop();

} else if (shiftIsDown){ var newFrame:uint = this. ➥ currentFrame + Math.round(runSpeedRatio/ ➥ frameSkipRatio);

var loopGap:int = newFrame -

➥ this.totalFrames;

Chapter 3 Introduction to ActionScript Classes

if(loopGap > 0) { this.gotoAndPlay(loopGap); } else { this.gotoAndPlay(newFrame); } } else { this.play(); } this.x += velocity;

override protected function ➥ keyDown(e:KeyboardEvent):void {

if (e.keyCode == Keyboard.SHIFT) { shiftIsDown = true; } else if (e.keyCode == Keyboard.LEFT) { vx = -currentSpeed; this.scaleX = -currentScaleX;

} else if (e.keyCode == Keyboard. ➥ RIGHT) {

vx = currentSpeed; this.scaleX = currentScaleX;

override protected function ➥ keyUp(e:KeyboardEvent):void {

if (e.keyCode == Keyboard.LEFT || ➥ e.keyCode == Keyboard.RIGHT) {

vx = 0; } else if (e.keyCode == Keyboard. ➥ SHIFT) { shiftIsDown = false; } }

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

12. Save your Runner class.

13. Return to the RunnerExample.fla document and open the symbol properties for your character. Select Export

for ActionScript and input com.anim.character.Runner as the Class name.

14. Save your document and test the movie. Move your character around using the left and right arrow keys.

Hold down the Shift key when you want your character If you want to add functionality so

your character can collect gold coins to burn some rubber (Figure 3.44).

and run into enemies, do a web search for as3 collision detection.