CIS 205—Web Design &
Development
Flash
Chapter 1
Getting Started with Adobe Flash CS3
Chapter 1: Getting Started with Adobe Flash CS3
• Introduction
– Flash is a development tools that allows you to create
compelling animations, games, and simulations
delivered via the Web, DVD, or even cell phones
– Flash is now extremely common and popular because it
is optimized for the Web
– Flash uses vector images which have much smaller file
sizes and are scalable (can be resized and reshaped
without distortion)
– Flash allows for streaming so that a Flash movie can
start playing when a Web site is opened instead of
waiting until the entire file is downloaded.
Lesson 1: Understand the Flash Workspace
• Organizing the Flash Workspace
– The Flash workspace is the set of tools and panels on
the screen
– Flash operates much like a movie
• You create scenes on a stage
• The scenes run in frames on a Timeline
– You arrange objects (graphics and text) on the stage
– Then you animate the objects using the Timeline
– Playing the movie (Flash document) is done with
controls (start, stop, rewind, etc.)
– The workspace has a menu bar, a stage, and a Timeline
Lesson 1: Understand the Flash Workspace (2)
• Stage
– The stage contains all objects in the movie
– The stage has a size and a background color
– The Pasteboard is the gray area surrounding the stage
– Objects on the stage will appear when the movie is
played in a browser or the Flash Player
• Timeline
– The timeline controls when objects appear on the stage
– A movie is a series of still images that appear over time
– Images are contained within frames which are
segments of the Timeline
– Objects can appear in separate overlapping layers
Lesson 1: Understand the Flash Workspace (3)
• Panels
– Panels are used to view, organize, and modify objects
and features in a movie (Flash document)
• Tools panel
• Property inspector (e.g., document properties)
• Library panel
• Tools panel
– The Tools panel contains a set of tools for drawing
•
•
•
•
Tools (draw, paint, text, selection)
View (Zoom, Hand)
Colors (for changing the stroke and fill colors)
Options (brush size, etc.)
– Panels can be moved using drag/drop within blue zones
Lesson 1: Understand the Flash Workspace (4)
• Start Adobe Flash and work with Panels
1. Start the Adobe Flash program (the Open/Create
screen appears)
2. Under Create New, click Flash File (ActionScript 3.0)
3. Click Window on the menu bar, point to Workspace,
then click Default
4. Click Window on the menu bar, observe the panels
with check marks (these are displayed), then click
Hide Panels
5. Click Window on the menu bar, click Color
6. Click Window on the menu bar, click Library
Lesson 1: Understand the Flash Workspace (5)
• Start Adobe Flash and work with Panels (cont’d)
7. Click Window on the menu bar, point to Properties,
click Properties
8. Point to the far left of the workspace until the Tools
panel is displayed, then point to the right
9. Click the Library tab and drag to the stage to make it a
floating panel
10. Click the Library tab and drag to the Color tab until a
blue rectangle appears and drop (it is then grouped
with the Color panel)
11. Click the Collapse to Icons button (two right arrows in
the upper right corner of the grouped panels)
Lesson 1: Understand the Flash Workspace (6)
• Start Adobe Flash and work with Panels (cont’d)
12. Click the Color panel icon to display the Color panel,
click it again to hide the Color panel
13. Click the Expand Dock button (two left arrows in the
panel group) to expand the panel group
14. Click the Library tab and drag to the bottom of the
Color panel until a blue line appears and release (the
Library panel is docked below the Color panel)
Lesson 1: Understand the Flash Workspace (7)
• Start Adobe Flash and work with Panels (cont’d)
14. Click the Properties panel Collapse button (short line
in upper right corner of the panel) to collapse the
panel
15. Click the Properties panel Expand button in the
upper right corner of the panel to expand the panel
16. Click the Properties panel Close button (the X)
17. Click Window in the menu bar, point to Properties,
click Properties
18. Click Window on the menu bar, point to Workspace,
click Default
Lesson 1: Understand the Flash Workspace (8)
• Change the Document Properties
1. Click the Size button in the Property inspector (PI) to
display the Document Properties dialog box
2. Click inside the Title text box, type My workspace
3. Click inside the Description text box, type This is a
typical workspace setup
4. Double-click the number in the width text box, type
400, double-click the number in the height text box,
type 300
5. Click the Background color swatch, click the blue
color swatch in the far-left column, click OK
6. Drag the scroll bars to center the stage
Lesson 1: Understand the Flash Workspace (9)
• Change the Document Properties (continued)
7. Click View on the menu bar, point to Magnification,
click Fit to Window
8. Click File on the menu bar, click Save
9. Navigate to the drive and folder where your data files
are stored, type workspace for the file name, click
Save
10. Click File on the menu bar, click Close