This document provides instructions for encapsulating an animation within a Flash document using three frames: an intro frame with a start button, a gameplay frame, and an ending frame with a restart button. It also discusses using paper prototyping to design games, including using Photoshop to create game elements and a chapter on basic game logic. The homework is to create a paper prototype for a designed game.

1. ARTDM 170, Week 10:
Encapsulation and
Paper Prototypes
Gilbert Guerrero
gguerrero@dvc.edu
gilbertguerrero.com/blog/artdm-170

2. Game Descriptions
Please turn yours in as soon as
possible.

3. Open Flash
• Create a new ActionScript 3.0
document:
MyEncap.fla

4. Encapsulation

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. 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. 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. 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. 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. 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. Paper Prototypes

12. Building Paper Prototypes
• Cheap, easy, and effective
• Paper Prototyping on A List Apart

13. Books
• Paper Prototyping • Sketching User
by Carolyn Snyder Experiences by
Bill Buxton

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. Thank You