ARTDM 170, Week 10: Encapsulation + Paper Prototypes

743 views
686 views

Published on

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide















  • ARTDM 170, Week 10: Encapsulation + Paper Prototypes

    1. 1. ARTDM 170, Week 10: Encapsulation and Paper Prototypes Gilbert Guerrero gguerrero@dvc.edu gilbertguerrero.com/blog/artdm-170
    2. 2. Game Descriptions Please turn yours in as soon as possible.
    3. 3. Open Flash • Create a new ActionScript 3.0 document: MyEncap.fla
    4. 4. Encapsulation
    5. 5. Intro and Ending Screens • To encapsulate a movie, use 3 frames ‣ 1st frame holds the intro screen and a button ‣ 2nd frame holds the game or movie ‣ 3rd frame holds a game over screen and a restart button
    6. 6. Flash Buttons To create a button: • Create a new symbol in the Library • Symbol type: Button • In a button, 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
    7. 7. Encapsulation: Frame 1 In the first frame: • Add a button to the stage • Name the instance of the button “play_btn” • Select the first frame and add this script: play_btn.addEventListener(MouseEvent.CLICK,startGame); function startGame(event:MouseEvent) { gotoAndStop("playgame"); } stop();
    8. 8. Encapsulation: Frame 2 • Create a second frame • In the Properties panel, label the frame “playgame” • Create a MovieClip symbol in the Library • Right click on the symbol to open Properties... ‣ Click Export for Animation ‣ Enter your movieʼs class name in the class field, e.g. MyAnimation • Drop an instance of the symbol onto the stage and place it at (0,0) in the upper left corner of the stage
    9. 9. Encapsulation: Frame 3 In the third frame: • Add a button to the stage • Name the instance of the button “replay_btn” • Select the first frame and add this script: replay_btn.addEventListener(MouseEvent.CLICK,playAgain); function playAgain(event:MouseEvent) { gotoAndStop("playgame"); } In a game, the final frame of the encapsulation would be your Game Over screen.
    10. 10. Getting to the third frame Your encapsulated movie needs to provide a way to load the third frame. • Create a variable in your ActionScript class public var bounceCount:Number = 0; • Add 1 to the variable each time an event occurs bounceCount++; • When the variable reaches its limit, send the movie to the “gameover” frame (you must refer to the root movie) if (bounceCount >= 10000) { MovieClip(root).gotoAndStop("gameover"); }
    11. 11. Paper Prototypes
    12. 12. Building Paper Prototypes • Cheap, easy, and effective • Paper Prototyping on A List Apart
    13. 13. Books • Paper Prototyping • Sketching User by Carolyn Snyder Experiences by Bill Buxton
    14. 14. Homework, due April 13 • Create a paper prototype for your game • Design your game: use Photoshop to create the background, characters, and other game elements • Read p95-102, on keyboard interaction and logic in Chapter 3: Basic Game Framework: A Matching Game in AS 3.0 Game Programming University
    15. 15. Thank You

    ×