Interactivity Coding
21
Interactivity Coding 9 Topic
description
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 - PowerPoint PPT Presentation
Transcript of Interactivity Coding
Interactivity Coding
9Topic
Objectives of this Objectives of this topic:topic:
write high-level AS code that:
You can …
dynamically places the object on screen
move and alters the object on screen
OverviewOverviewIntroductionCreating a Drag-and-Drop classDetecting CollisionsResponding to CollisionsDetecting WinRandomly Placing Objects
IntroductionIntroductionUnlike 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 Creating a Drag-and-Drop ClassClass 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 boardBoth 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 CollisionsDetecting CollisionsUsing 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 CollisionsResponding to CollisionsDetermine 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))
{event.currentTarget.x = event.currentTarget._targetPiece.x;event.currentTarget.y = event.currentTarget._targetPiece.y;
} else {
event.currentTarget.x = event.currentTarget._origXevent.currentTarget.y = event.currentTarget._origY;
}
Fix the objects on their target placesevent.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 WinDetecting a WinSet 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 ObjectRandomly Placing ObjectCreate 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 positionpiece._origY = piece.y;
}
