Interactivity Coding

9 Interactivity Coding Topic

Objectives of this topic: You can … write high-level AS code that: dynamically places the object on screen move and alters the object on screen

Overview • Introduction • Creating a Drag-and-Drop class • Detecting Collisions • Responding to Collisions • Detecting Win • Randomly Placing Objects

Introduction • Unlike basic scripting, programming with AS allows the designer to create highly interactive and entertaining applications that can be infinitely modified

Creating a Drag-and-Drop Class • Creating drag and drop functionality in Flash CS3 is quite different than older versions. • Drag-and-drop is simple application that involve dragging any board. Example of Drag-and-Drop interactivity

Display objects have methods call startDrag and stopDrag that make it easy to add this type of interactivity to any application. • startDrag method is called when the mouse is pressed down over the board • stopDrag methods is called when the mouse is let up over the board • Both are built-in methods of the Sprite class

board.addEventListener(MouseEvent.MOUSE_DOWN, dragMovie); private function dragMovie(event:MouseEvent):void { board.startDrag(); } board.addEventListener(MouseEvent.MOUSE_UP, dropMovie); private function dropMovie(event:MouseEvent):void { board.stopDrag(); }

More drag-and-drop in Flash CS3 http://www.flashandmath.com/basic/dragdroptour/dd_tour1.html

Detecting Collisions • Using AS code to detect whether the object is touching a target object when the objects are dragged into the target area • Create the target object on stage by giving an instance name to this object

Define a public variable with the data type asterisk (*), which this variable will accept multiple data types: Public var _targetPiece:*;

Define a function or event handler to detect whether the object is dropping in the target area (two objects are touching) private function checkTarget(event:MouseEvent):void { if(event.currentTarget.hitTestObject(event.currentTarget. _targetPiece)) { <body> } }

hitTestObject() is a method to determines whether an object is touching or hitting another object passed in through the parentheses that contain: • the object that user have just released event.currentTarget • the object related the target object event.currentTarget._targetPiece

Responding to Collisions • Determine the responds when a user successfully drops an object in the correct area and handle the occasions when they don’t. • Define a public variables that will hold the original X and Y positions

public var _origX:Number; public var _origY:Number; …. _origX = this.x; _origY = this.y;

Assign the target object to user’s object • Otherwise, set the X and Y values of the object back to their original X and Y values if there is not match

if(event.currentTarget.hitTestObject(event.currentTarget._targetPiece))if(event.currentTarget.hitTestObject(event.currentTarget._targetPiece)) { event.currentTarget.x = event.currentTarget._targetPiece.x; event.currentTarget.y = event.currentTarget._targetPiece.y; } else { event.currentTarget.x = event.currentTarget._origX event.currentTarget.y = event.currentTarget._origY; }

Fix the objects on their target places event.currentTarget.removeEventListener(MouseEvent.MOUSE_UP, checkTarget); public function disable():void { this.removeEventListener(MouseEvent.MOUSE_DOWN, dragMovie); this.removeEventListener(MouseEvent.MOUSE_UP, dropMovie); this.buttonMode = false; }

Detecting a Win • Set up the game to detect a win when the game successfully completed • Define two variables to hold • the total possible matches • The number of current matches the user has made • Write a conditional statement that runs if the possible matches are greater or equal to the total matches

private var _totalPieces:Number; private var _currentPieces:Number; … _totalPieces = 6; _currentPieces = 0; … _currentPieces ++; if(_currentPieces >= _totalPieces) { trace("You Win"); }

Randomly Placing Object • Create a function to randomize the placement of the object on screen randomPosition(<object>);

private function randomPosition(piece:*):void { piece.x = Math.round(Math.random() * (255 – piece.width)); piece.y = Math.round(Math.random() * (400 – piece.height)); piece._origX = piece.x; //back to random position piece._origY = piece.y; }

Interactivity Coding