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 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