The BoundedMover class

Depending on the type of experience you are designing, you’ll need to decide what will happen when your character reaches the edge of the screen. For the examples in this

You could create a class with a different edge behavior, like one

chapter, you’ll create a class that will prevent the Mover that will wrap your character to

from leaving the screen.

the opposite edge of the screen, or you could create a class with an 1. Save a copy of your current document as

edge behavior that can be altered BoundedMoverExample.fla in the examples folder. on the fly.

2. Create a new class named BoundedMover.

3. Save the ActionScript ﬁle as BoundedMover.as in the examples/com/anim/character folder.

4. Add the following highlighted code to have BoundedMover subclass Mover:

public class BoundedMover extends Mover {

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

BoundedMover.as ﬁle: package com.anim.character {

6. Add the following variable declaration immediately following the class declaration:

protected var boundaries:Rectangle; The boundaries property will store the rectangle that

deﬁnes the edges of the area within which your character is allowed to travel.

7. Add the familiar onAddedToStage method below the constructor method:

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

var topCorner:Point = root.localToGlobal(new ➥ Point(0,0)); var w:Number; var h:Number;

Chapter 3 Introduction to ActionScript Classes

if(root.loaderInfo.loader == null){ w = stage.stageWidth; h = stage.stageHeight; } else { w = root.loaderInfo.loader.parent.width; h = root.loaderInfo.loader.parent.height; } setBoundaries(new Rectangle(topCorner.x,

➥ topCorner.y, w, h)); super.onAddedToStage(e);

The onAddedToStage method is a little complicated, because you’re writing it in a manner that will also work in your web portfolio (for Chapter 5) without needing any updates. So, your boundaries will be different if your SWF ﬁle is being loaded into another ﬁle (as it will in the web portfolio).

You ﬁrst create a local variable, topCorner , to locate the top-left corner of the SWF that houses your BoundedMover instance. The root keyword will ensure that your topCorner point reﬂects the SWF containing the BoundedMover instance, not an outside movie that has loaded the SWF containing your BoundedMover (this will make more sense in Chapter 5). You then cre-

ate two variables ( w and h ) to store the width and height

of the container movie. To determine if your SWF has been loaded into another movie, you check the loader property of the loaderInfo object. If this property is null (not set), then your SWF has not been loaded into another movie, and you can use stage.stageWidth and stage.stageHeight for your default boundaries. If the loader property has been set, then the else block

determines the w and h values based on the parent

object of the loader . The code then invokes a new method, setBoundaries ,

and passes a Rectangle object based on the corner The boundaries can be updated point, width, and height determined above. Finally, at any time by calling the

the last line calls the onAddToStage of the superclass setBoundaries method. (Mover).

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

8. Add the following method after the method in the pre- vious step.

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

checkEdges(); super.updatePosition(e);

The new updatePosition method will check to see if your character is at or beyond the edges of the boundaries before calling the updatePosition from the superclass. You’ll write the checkEdges method in a moment.

9. Add the setBoundaries method after the updatePosition method:

public function setBoundaries(rect:Rectangle): ➥ void {

boundaries = rect; }

The setBoundaries method simply updates the boundaries property value. This value will be utilized in the checkEdges method that you are about to write.

10. Add the checkEdges method after the setBoundaries method:

protected function checkEdges():void { var characterEdges:Rectangle = this. ➥ getBounds(this.stage);

if(characterEdges.left <= boundaries.left && ➥ vx < 0) { vx = 0; } else if(characterEdges.right >= boundaries. ➥ right && vx > 0) { vx = 0; } if(characterEdges.top <= boundaries.top &&

➥ vy < 0) { vy = 0;

Chapter 3 Introduction to ActionScript Classes

} else if(characterEdges.bottom >= boundaries. ➥ bottom && vy > 0){

vy = 0; } }

The ﬁrst line inside the checkEdges method creates

a new variable to store the rectangle containing the bounds around the character symbol. The conditional statements that follow check the left, right, top, and bottom edges, respectively.

Since your character can’t be at the left edge and the right edge at the same time (as long as your Stage is wider than your character), it’s best to use if - else blocks (rather than two if blocks). If the character is at or past the left edge, there’s no reason to check the right edge. The same logic applies to the top and bottom. The code in the checkEdges method uses the less than or equal to (<=) and greater than or equal to (>=) operators to compare the edge of the character to the edge of the boundary rectangle.

In addition to checking the character’s location, you should also conﬁrm that the character is attempting to move beyond the boundary. If the character is headed away from the boundary, there’s no reason to stop the character from moving. You can check the character’s direction by determining if its x and y coordinates are positive or negative (if the velocity is 0, no action is needed).

For simplicity, the checkEdges method in this chapter does not

If the x velocity is greater than 0, the character is reset the character’s position (just moving to the right. If the x velocity is less than 0, the

inside the boundary crossed) character is moving to the left. To check two conditions

because it is not necessary for the (the character’s position relative to the boundary and examples shown. You may want to add this functionality to the class the character’s direction) in a single if statement, you

later, especially if you plan to call need to use the conditional and operator (&&). To stop

the setBounds method again (in the character from moving, the relevant velocity is then

case your character is then outside set to 0. of the boundaries just set).

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.Mover; import flash.events.Event; import flash.geom.Rectangle; import flash.geom.Point;

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

import com.anim.character.Mover; import flash.events.Event; import flash.geom.Rectangle; import flash.geom.Point;

public class BoundedMover extends Mover {

protected var boundaries:Rectangle;

public function BoundedMover(){

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

var topCorner:Point = root.

➥ localToGlobal(new Point(0,0)); var w:Number; var h:Number;

if(root.loaderInfo.loader == null){ w = stage.stageWidth; h = stage.stageHeight; } else { w = root.loaderInfo.loader.parent. ➥ width;

h = root.loaderInfo.loader.parent.

➥ height; } setBoundaries(new Rectangle(topCorner.x, ➥ topCorner.y, w, h));

Chapter 3 Introduction to ActionScript Classes

super.onAddedToStage(e); }

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

checkEdges(); super.updatePosition(e);

public function setBoundaries ➥ (rect:Rectangle):void {

boundaries = rect; }

protected function checkEdges():void { var characterEdges:Rectangle = this. ➥ getBounds(this.stage); if(characterEdges.left <= boundaries. ➥ left && vx < 0) { vx = 0; } else if(characterEdges.right >= ➥ boundaries.right && vx > 0) { vx = 0; } if(characterEdges.top <=

➥ boundaries.top && vy < 0) { vy = 0;

} else if(characterEdges.bottom >= ➥ boundaries.bottom && vy > 0) {

vy = 0; } }

12. Save your class, return to your BoundedMoverExample.ﬂa document, and update the character symbol properties to

have a Class value of com.anim.character.BoundedMover.

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

13. Save your document and test the movie. Move your character around and note that it will not leave the

screen (Figure 3.29).

Figure 3.29 The BoundedMover class prevents the character from traveling beyond the edges of the Stage.

Now that you have a handle on controlling a character, let’s start adding a bit more complexity to the character.

The BoundedMover class