ARTDM 170, Week 7: Scripting Interactivity

745 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
745
On SlideShare
0
From Embeds
0
Number of Embeds
43
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

































  • ARTDM 170, Week 7: Scripting Interactivity

    1. 1. ARTDM 170, Week 7: Scripting Interactivity Gilbert Guerrero gguerrero@dvc.edu gilbertguerrero.com/blog/artdm-170
    2. 2. 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
    3. 3. Open Flash • Create a new ActionScript 3.0 document: MyObject.fla • Create a new ActionScript file: MyObject.as
    4. 4. Final Projects
    5. 5. 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)
    6. 6. 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
    7. 7. Flash Buttons
    8. 8. Create a Button • Create a new symbol in the Library • Symbol type: Button
    9. 9. 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
    10. 10. Button Event Listeners • Add a button to the stage • Name the button Instance name: myButton
    11. 11. 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?
    12. 12. Dragging Objects
    13. 13. Dragging • Objects can be dragged by tying them to the dragging functions myObj.startDrag() myObj.stopDrag()
    14. 14. 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);
    15. 15. 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(); }
    16. 16. Stage Event Listeners • Event listeners are added to the stage to improve performance stage.addEventListener( MouseEvent.MOUSE_UP, stopDragging );
    17. 17. Throwing Objects
    18. 18. 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; }
    19. 19. Collision Detection
    20. 20. 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
    21. 21. hitTestObject sprite1 • Use an if() statement to do sprite2 something with the collision if( sprite1.hitTestObject(sprite2) ){ // collision happened }
    22. 22. 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
    23. 23. hitTestPoint sprite1 • Use an if() statement to do something with the collision if(sprite1.hitTestPoint(x1,y1,true)){ // collision happened }
    24. 24. Keyboard
    25. 25. Listen for Keyboard stage.addEventListener( KeyboardEvent.KEY_DOWN,keyDownFunction); stage.addEventListener( KeyboardEvent.KEY_UP,keyUpFunction);
    26. 26. 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; } }
    27. 27. Checking which key // key lifted up public function keyUpFunction( event:KeyboardEvent) { if(event.keyCode == 37) { leftArrow = false; } else if(event.keyCode == 39) { rightArrow = false; } }
    28. 28. 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
    29. 29. 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.
    30. 30. 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;
    31. 31. 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
    32. 32. Thank You

    ×