CIS 205—Web Design & Development

FlashChapter 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 Panels1. 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 Default4. 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 Color6. 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 Properties8. Point to the far left of the workspace until the Tools

panel is displayed, then point to the right9. Click the Library tab and drag to the stage to make it

a floating panel10. 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 panel13. Click the Expand Dock button (two left arrows in the

panel group) to expand the panel group14. 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 Properties18. Click Window on the menu bar, point to Workspace,

click Default

Lesson 1: Understand the Flash Workspace (8)

• Change the Document Properties1. Click the Size button in the Property inspector (PI) to

display the Document Properties dialog box2. Click inside the Title text box, type My workspace3. Click inside the Description text box, type This is a

typical workspace setup4. 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 Window8. Click File on the menu bar, click Save9. 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