• Save
ARTDM 170, Week 7: Scripting Interactivity
Upcoming SlideShare
Loading in...5
×
 

ARTDM 170, Week 7: Scripting Interactivity

on

  • 781 views

 

Statistics

Views

Total Views
781
Views on SlideShare
738
Embed Views
43

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 43

http://www.gilbertguerrero.com 43

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

ARTDM 170, Week 7: Scripting Interactivity ARTDM 170, Week 7: Scripting Interactivity Presentation Transcript

  • ARTDM 170, Week 7: Scripting Interactivity Gilbert Guerrero gguerrero@dvc.edu gilbertguerrero.com/blog/artdm-170
  • Homework • Please put your .swf file in a folder with your last name and first initial • Put the folder in my dropbox • Example: smith-h myAnimation.swf
  • Open Flash • Create a new ActionScript 3.0 document: MyObject.fla • Create a new ActionScript file: MyObject.as
  • Final Projects
  • Requirements Your final project is to create a game in Flash.  Your game must meet these requirements: • Start screen • Interactivity, which could be: ‣ Key press ‣ Space bar ‣ Mouse click ‣ Mouse drag • Score • Game over screen, shown when the game ends • Way to replay the game • Sound (optional)
  • Timeline March April May Last day of class 9 16 23 30 6* 13 20 27 4 11 18 25 Create a project title and description Present final projects Paper prototypes (two days) Design background, characters, and other game elements Embed game elements in game symbol Add movement and keyboard interaction Add Start and Game Over screens Add scoring and game over trigger
  • Flash Buttons
  • Create a Button • Create a new symbol in the Library • Symbol type: Button
  • Button Frames • Buttons only have four frames • Each frame is a button state: ‣ Up - no user interaction ‣ Over - user mouse hovers over ‣ Down - user clicks the button ‣ Hit - invisible shape defines whatʼs clickable
  • Button Event Listeners • Add a button to the stage • Name the button Instance name: myButton
  • Event Listeners • Add an event listener to the button myButton.addEventListener( MouseEvent.CLICK, stopOnEveryFrame); function stopOnEveryFrame( e:MouseEvent):void{ removeEventListener( Event.ENTER_FRAME, onEveryFrame); } How would we restore movement?
  • Dragging Objects
  • Dragging • Objects can be dragged by tying them to the dragging functions myObj.startDrag() myObj.stopDrag()
  • Dragging • An event listener is added to the start of the script that is tied to the object that must be dragged myObj.addEventListener( MouseEvent.MOUSE_DOWN, startDragging);
  • Dragging • Drag functions are placed in the event handlers as well as a new event listener to listen for stop dragging function startDragging(e:MouseEvent) { stage.addEventListener( MouseEvent.MOUSE_UP, stopDragging); myObj.startDrag(); } function stopDragging(e:MouseEvent) { stage.removeEventListener( MouseEvent.MOUSE_UP, stopDragging); myObj.stopDrag(); }
  • Stage Event Listeners • Event listeners are added to the stage to improve performance stage.addEventListener( MouseEvent.MOUSE_UP, stopDragging );
  • Throwing Objects
  • Throwing Velocity To throw an object, the values for velocity (moveX and moveY) are updated according to the where the user has moved the object and its change in location over time function trackVelocity(e:Event):void { moveX = myCircle.x - oldX; moveY = myCircle.y - oldY; oldX = myCircle.x; oldY = myCircle.y; }
  • Collision Detection
  • hitTestObject sprite1 sprite1.hitTestObject(sprite2) sprite2 • When the bounding box of one object overlaps with the bounding box of another object, a collision is detected
  • hitTestObject sprite1 • Use an if() statement to do sprite2 something with the collision if( sprite1.hitTestObject(sprite2) ){ // collision happened }
  • hitTestPoint sprite1 sprite1.hitTestPoint(x1, y1, true) • Check if the edge of a shape is near a point (x1, y1) • Cannot be used with two shapes, only a shape and a point • Can be used with the mouse, using mouseX and mouseY
  • hitTestPoint sprite1 • Use an if() statement to do something with the collision if(sprite1.hitTestPoint(x1,y1,true)){ // collision happened }
  • Keyboard
  • Listen for Keyboard stage.addEventListener( KeyboardEvent.KEY_DOWN,keyDownFunction); stage.addEventListener( KeyboardEvent.KEY_UP,keyUpFunction);
  • Checking which key // key pressed down public function keyDownFunction( e:KeyboardEvent) { if(event.keyCode == 37) { leftArrow = true; } else if(event.keyCode == 39) { rightArrow = true; } else if(event.keyCode == 32) { jumpUp = true; } }
  • Checking which key // key lifted up public function keyUpFunction( event:KeyboardEvent) { if(event.keyCode == 37) { leftArrow = false; } else if(event.keyCode == 39) { rightArrow = false; } }
  • Key codes • Spacebar 32 • Left arrow 37 • Up arrow 38 • Right arrow 39 • Down arrow 40 More key codes and constants on Adobeʼs site
  • Moving an object // move to the left if (leftArrow) { myBrick.x -= speed; } • This would allow the user to move the object to the left at a certain speed every frame.
  • Stage Focus • Keyboard input like using the arrow keys or the space bar arenʼt detected until you clicked the screen • Add this line of code before your keyboard event listeners: stage.focus = stage;
  • Homework, due March 23 • Create a Title and Description for your final project • Read p83-94, Chapter 3: Basic Game Framework: A Matching Game in AS 3.0 Game Programming University • Next week: youʼll have a subsitute
  • Thank You