Flash Prototyping Tutorial

This tutorial will show you how to prototype an iPhone application using Flash. It has 5 sections:

  1. A brief introduction to Flash
  2. Working with the timeline
  3. Making buttons
  4. Creating effects
  5. Adding sound

Why Flash

  • The frames in Flash can represent states of a user interface.
  • Elements in a frame can handle events, e.g., a graphic can represent a button.
  • Interactivity can be done by simply transitioning between frames.

Getting Flash

  • This tutorial uses Flash CS3.
  • You can buy Flash CS3 (individually or part of the Studio Bundle).
  • You can download the 30-day trial (http://www.adobe.com/downloads/).

Resources

The Flash CS3 User Interface

1. Drawing Tools: Tools to draw objects
2. Timeline: For frames and layers
3. Stage: Where drawings are created

4. Library: Where reusable elements appear
5. Color/Swatches: Color-selection tool
6. Actions: Where ActionScript code is written

7. Projects: List of Flash projects
8. Properties: Where properties of objects are changed

Set up the stage

The Stage

  • Where drawings are created, modified, and deleted.
  • Contains objects, images, drawings, and buttons.
  • Things can go outside the stage, but they are clipped when the movie is played.

Modify the stage size

  1. Go to Modify > Document... to change the stage size, background color, frames per second, ruler units
  2. Change the dimension to 800px x 600px. Since most monitors have aspect ratios of 4 x 3, you can easily go full screen. The initial dimension of the stage is 550px x 400px.
  3. Change the frame rate to 10 fps (frames per second), so you can easily compute the number of frames necessary for a particular range of time (e.g. 5 seconds is 50 frames). The initial frame rate is 12 fps.

Show rulers

  1. Go to View > Rulers to show the rulers, which will help in positioning objects on the screen.
  2. Dragging from the rulers will create vertical or horizontal guides.

Go to Page 2 →

© 2009 Ian Li // All rights reserved.