Web Design: Project 5 - Interactive Games

Project Overview

In this project, students, working in teams, begin using Adobe Flash Professional CS6 to create a simple interactive game with basic ActionScript 3.0.  When the games are complete, the class will hold a game fair, with each team presenting a game.  Students discover ways to use rich media and animation created
with Flash for gaming.  They develop skills evaluating effective uses of Flash on the web and in gaming, learn about game design, and design and build an interactive game.  The focus of this project is building Flash skills, understanding how professionals use those skills to strengthen communication with interaction and animation, and using Flash to create an interactive experience.

Student Project:  Interactive Game

Example Game

Example Game by Elijah Codorniz

Project Goals

• Introduce Flash animation principles
• Analyze uses of Flash
• Analyze existing games and introduce game design principles
• Design a simple Flash-based game
• Create and test a Flash-based game
• Publish and present a game in a game fair

Project Objectives

At the completion of the project, students will have developed the following skills:

Project Management Skills

 • Determining game purpose, audience, and goal
• Determining available resources and skill level for game development
• Writing a proposal for the game, with attention to scenarios and audience characterization

Design Skills

 • Designing a custom experience
• Making screen sketches for interactive experiences

Research and Communication Skills

• Researching, evaluating and analyzing the use of Flash in online gaming
• Evaluating and analyzing various game types
• Researching audience and overall gaming landscape
• Researching currently available games
• Researching appropriate uses of multimedia in gaming
• Assessing team’s technological developer skill level
• Connecting goals of the game with user interaction and experience
• Communicating and presenting design decisions
• Critiquing designs
• Communicating purpose and goals
• Writing scripts for a game narrative

Technical Skills


• Understanding the Flash workspace
• Using drawing tools
• Working with layers
• Organizing layers and libraries
• Using animation methods
• Creating interactive buttons
• Working with bitmaps
• Using basic ActionScript
• Using animation methods
• Creating and modifying text
• Creating Timeline effects
• Creating transparent buttons
• Saving and using motion presets
• Publishing Flash documents

Student Guides


  • Beginning ActionScript
    • Setting Up and Drawing Images
    • Syntax and Variables
    • Movement and Events
    • Arrays and Loops
    • Backgrounds and Sounds
    • Collisions
    • Dynamic Text and Buttons
    • Starting and Stopping
    • Planning, Hints, and Errors
    • Project Booklet

    What is Responsive Web Design [6:36]

Project Steps

  • Analyzing Flash
    View websites that use Flash elements - discuss how designers use Flash to enhance the user experience
    Some elements to discuss include:
    • Navigation systems
    • Integrated user interface
    • Animated screen elements
    • Rich media
    • Interactive games
    Note:  Rich media consists of a combination of graphics with video, audio, or animation

    Discuss the purposes for implementing content as rich media1.2, 2.1
    Include the following:
    • Incorporating audio and video
    • Providing transitions
    • Providing consistency
    • Illustrating change over time
    • Getting multiple layers of information from one part of the display
    • Enriching graphics representations
    • Visualizing three-dimensional structures
    • Attracting attention

    Review the interface, terminology, and basic panels in Flash
    Make sure you understand the following elements:  [Use the sample_animated_face.fla file to review]
    • Flash document:  Where you create your Flash content; you save a Flash document as a file with a .fla extension; when you open Flash, the Welcome screen gives you a choice of Flash file formats:
    ActionScript 3.0, ActionScript 2.0, AIR, AIR for Android, AIR for iOS, and Flash Lite 4. The format you choose depends on the platform on which you plan to publish your Flash movie
    Discuss document properties and settings (and how to change the document properties within the Properties panel and Document Settings dialog box)3.7
    • Workspaces:
       Use preset and custom workspaces; review how to access a preset workspace and how to create, modify, and delete custom workspaces3.1
    • Tools panel:
       Tools for drawing, painting, writing, selecting, moving, modifying, viewing, and coloring
    • Panels:
       Additional tools for modifying and creating objects. Demonstrate various ways to open, close, expand, and collapse panels
    • Properties panel:
       Set or change the most commonly used attributes of objects in a Flash document in the Properties panel
    • Stage:
       Compose the content of a Flash document on the Stage - discuss the Stage size and its relationship to screen resolution
    • Timeline:
       Organize and control the content of a Flash document over time, using layers and frames - discuss how the Timeline is used in animation and how to preview a document3.3
    • Edit bar:
       Indicates the current scene; on the right side, you can select the scene to open on the Stage or change the magnification for viewing the Stage
    • Library:
       Store and organize symbols in the Library4.7
    • Movie:
       A published Flash document - explain the difference between FLA files and SWF files3.7
    • XFL file:
       XFL is an XML representation of a FLA document - it is a declarative file format; in Flash Professional CS6, a document uses the .fla extension but functions more like a container of compressed files (much like a ZIP file); it contains all of the individual files that make up the project, offering improved cross-product integration and workflow productivity3.7
    • Extensible Metadata Platform (XMP):
       You can include XMP data such as title, author, description, copyright, and more in your FLA files - XMP is a metadata format that certain other Adobe applications can understand; embedding XMP data in your Flash document improves the ability of web-based search engines to return meaningful search results for Flash content3.7

Flash guide:  Overview of the Adobe Flash Professional CS6 workspace3.1, 3.2, 3.3, 3.4, 4.2
Electronic file:  sample_animated_face.fla
Electronic file:  sample_animated_face.swf

Using the presentation, review the principles of Flash animation
You may want to use the sample_animated_face.fla file to reviewthe following elements:
• Frame:
   A single picture in a series that form the content of a Flash document. Discuss the frame rate and timing and the effect of frame rate on file size. The default frame rate in Flash is 24 frames per second. You may want to change the frame rate to show students its effect on an animation.3.3
• Keyframe:
   A frame where a new symbol instance appears in the Timeline. A keyframe can also be a frame in which you define a change to an object’s properties for a classic tween animation. Keyframes can also include ActionScript code to control some aspect of your document.
• Property keyframe:
   A frame in which you define a change to an object’s properties for an animation. Discuss the differences between keyframes, property keyframes, and regular frames.
• Layers:
   Where you organize the various content elements in a Flash document. Discuss and demonstrate how non-symbol shapes merge when you place one over the other in the same layer. Review how to add, delete, rename, and organize layers and how to lock and unlock layers to protect objects.3.3
• Scene:
   Each document can contain multiple scenes, each with its own Timeline and Stage. Scenes can be placed within other scenes.
• Symbol:
   An element stored in a library for reuse in a Flash document. Discuss the editing modes, such as editing an object on the Stage versus editing a symbol.
• Instance:
   A copy of a symbol when it is on the Stage. Each instance references the complete information stored in the corresponding library symbol, without duplicating that information.
   Using instances minimizes the file size of a Flash movie.3.8
• Tweens:
   An animation created by specifying a value for an object property in one frame and another value for that same property in another frame.
• Motion tweening:
   An automated way to create smooth movement and changes over time.
• Motion guide:
   A way to move an object along an editable and defined path.
• Classic tweening:
   A more complex form of creating smooth movement and changes over time.
   Classic tweening provides certain capabilities that motion tweening does not.
• Shape tweening:
   An automated way to create shape changes over time.
• Inverse kinematics:
   A method for animating an object or set of objects in relation to each other by using an articulated structure of bones.
• Sounds:
   Music loops or sound effects that play during the movie or are triggered by an action.
• Actions:
   ActionScript statements that control an object or the Timeline when a movie is played.

Presentation:  Introduction to Flash animation2.1, 4.7, 4.10, 4.11

Open one or more websites, or other Flash content, to illustrate a variety of Flash techniques - identify the following Flash techniques on the websites:
• Motion tweens
• Shape tweens
• Movie clips
• Buttons
• Sound (number of sounds used, number of times a sound is looped)
• Stop actions
• Go to and play actions
• Combinations of symbols (such as buttons that contain animated movie clips)

Guide and worksheet:  How to analyze Flash content1.1, 1.2

Game Design

Discuss game design - realize that game design determines every detail of how the game will function, what win or loss criteria the game may include, how the user will be able to control the game, what information the game will communicate, and how hard the game will be
Some things to discuss include:
• Input:  How the user controls the game (keyboard, mouse, gestures on mobile devices)
• Game elements:  The visual elements on the screen, such as a spaceship in a flying game
• Sounds:  How sounds can be used to enhance the game-playing experience
• Game play (also called game mechanics):  The interactivity of the game and the choices a player (or players) are able to make and what happens when they make each choice

Presentation:  Introduction to game design
Guide:  Introduction to game design

View both simple and complex games built with Flash - discuss the type of game (for example, action or puzzle), the overall game design, the game rules, and the types or combinations of techniques that might be involved to create some of the more complicated effects they see2.1
• Newgrounds games:  www.newgrounds.com/games
• Addicting games:  www.AddictingGames.com/
• Jumpman:  www.maximized.co.uk/tutorials/games/jumpman/
• Escape the Room:  www.ictlic.eq.edu.au/begintheadventure/etrgame1.html

A typical game design workflow1.5 and how it is similar to the phases of website production:
• Plan and design:  Brainstorm an idea for your game with game-design planning documents, wireframes, design comps, storyboards, and so on
• Develop:  Combine your visual and audio assets in desired programming language (in this case, ActionScript 3.0)
• Test and optimize:  Test your game to be sure it’s bug-free and fun to play - improve the performance through optimization
• Monetize and distribute:  Determine how to get your game to your audience by offering free games or games that cost money to play.  For
Flash-based games, deploy via Flash Player and/or Adobe AIR.  Games can be distributed through app stores, on the Internet, or through retail stores.
• Use analytics and update:  Study the results of usability tests, user feedback, and such metrics as game plays, duration of game play, and more to improve on the game’s weaknesses. Continually try to polish your game and provide a better experience for the game players.

For this project you will be starting with very simple games with a small number of game plays, similar to the Jumpman and Escape the Room games reviewed.  You can choose between a drag-and-drop or simple character-movement game and will use the included technical guides to customize your characters, game settings, and parameters.

Divide into teams of two or three and brainstorm your game ideas, remember the parameters.  When you are happy with their ideas, complete your
game design documents. Each team will submit your planning documents to you for approval.

Worksheet:  Game design planning document1.5, 2.4


Creating a Game

After your team’s game-design planning documents have been approved, students will now learn about graphics in Flash, which will become the component assets for the game you will build.
Review the kinds of graphics files available in Flash. Discuss the following:
• The difference between bitmap images and vector images in Flash
• The definition of shape in Flash
• Drawing tools, such as shapes, lines, and brushes
• Selection tools, such as marquee, lasso, and magic wand

Flash guide:  Understanding Flash graphic file types4.2, 4.3
Flash guide:  How to draw and create shapes4.2

Review the following skills to help refine your graphics - you can use the mask_sample.fla file to review these skills:
• How to work with colors and gradients 4.2
• How to break graphics apart 3.8, 4.3
• How to trace and swap bitmaps 4.3
• How to use adaptive scaling
• How to create a masking effect 4.9

Flash guide: How to apply colors and gradients 4.2
Flash guide: How to create masks 4.9
Electronic file: mask_sample.fla
Electronic file: mask_sample.swf

Develop the necessary graphics for their games, including characters

Introduce symbols, instances, and the Library to help organize your projects.
Review how to organize content with the Library, layers, and labeling - add assets to your library and demonstrate how to move assets between the Stage and the Library

Flash guide:  How to organize content2.5, 3.3, 4.7, 4.10
Flash guide:  Symbols, instances, and the Library4.6, 4.7

Review how to turn graphics into buttons, symbols, instances, and movie clips.  Remember to create new layers and labels for each graphics symbol and instance

Flash guide:  How to create a button symbol4.6, 4.7, 4.8
Flash guide:  How to use transparent or invisible buttons4.6

17 -


Tutorials [You Tube]: