© 2010 Delmar, Cengage Learning Chapter 1: Getting Started with Flash

© 2010 Delmar Cengage Learning Chapter 1 Lessons 1.Understand the Adobe Flash workspace 2.Open a document and play a movie 3.Create and save a movie 4.Work with the Timeline 5.Distribute an Adobe Flash movie 6.Plan an application or a Web site

© 2010 Delmar Cengage Learning Using Adobe Flash What is Adobe Flash? –An animation and interactive authoring program –Has tools for complex animation, as well as excellent drawing tools –Popular because Flash is optimized for the web

© 2010 Delmar Cengage Learning Using Flash What can Flash be used for? –Web sites –Web-based applications –CD-Rom and interactive applications –Video

© 2010 Delmar Cengage Learning Optimized for the Web Flash uses vector images –Vectors are scalable –Reduces the size of graphic files Flash provides for streaming content over the Internet –Does not need to wait for entire contents of Web page to load to start playing

© 2010 Delmar Cengage Learning Understanding the Adobe Flash Workspace You can customize your workspace Flash works on a movie metaphor –Create scenes on a stage –Scenes run in frames on a timeline –Create a movie by arranging objects on the stage –Play the movie on the stage using movie controls (play, stop, rewind, etc.)

© 2010 Delmar Cengage Learning Understanding the Flash Workspace Three parts to the development workspace –Menu bar –Stage –Timeline One or more panels may be displayed

© 2010 Delmar Cengage Learning Fig. 1: Flash Workspace Object on the Stage Object in Library panel Playhead Selecting frame 1 displays the object (car) on the Stage Pasteboard Drawing, paint, editing and selection tools Tools panel Properties and Library panels grouped with Library panel displayed

© 2010 Delmar Cengage Learning The Stage Contains all objects that are seen by the viewer in the final movie You can draw objects on, or import objects to, the stage

© 2010 Delmar Cengage Learning The Timeline Used to organize and control the movie’s content by specifying when each object appears on the stage Contains images within frames –Units of the timeline Has separate layers Has playback head

© 2010 Delmar Cengage Learning The Tools Panel Panels are used to view, organize, and modify objects and features in a movie Most commonly used: –Tools –Properties –Libraries

© 2010 Delmar Cengage Learning The Tools Panel Tools, View, Colors, Options Arranging tools: –Dock panels together –Stand alone –Stacked above or below –Floating

© 2010 Delmar Cengage Learning Fig. 2: Arranging Panels Grouped panels Stand-alone panel Stacked panels Floating panel

© 2010 Delmar Cengage Learning The Blue Drop Zone The blue drop zone is the area to which the panel can move and is indicated by either a blue line or a rectangle with a blue border. –A single blue line indicates the position for stacking a panel above or below another panel. –A rectangle with a blue border indicates the position for grouping panels. –If you move a panel without using a drop zone, the panel becomes a floating panel and is neither grouped nor stacked with other panels.

© 2010 Delmar Cengage Learning Fig. 3: Grouping the Library Panel Rectangle with blue border

© 2010 Delmar Cengage Learning Fig. 4: Ungrouping Library Panel Toggle between Collapse to Icons and Expand Panel button Close button

© 2010 Delmar Cengage Learning Fig. 7: Changing the Size of the Timeline Panel Double-headed pointer

© 2010 Delmar Cengage Learning Opening a Movie in Flash The.fla extension is native, and can only be opened in Flash Flash exports Web-ready files as.swf.swf files should be tested before being published Always keep the original.fla file for modifications

© 2010 Delmar Cengage Learning Previewing a Movie Flash movies can be previewed in the workspace by directing the playhead to move through a timeline Use control menu commands –Play, rewind, step forward, step backward, loop playback Use the Controller –Toolbar command on the Window menu

© 2010 Delmar Cengage Learning Keyboard Shortcuts Play: [Enter] (Win) and [Return] (Mac) Rewind: ([Ctrl] [Alt] [R] (Win)) and ([Option] [R] (Mac)) Step Forward (.) moves the playhead forward progressively Step Backward (,) moves the playhead backward progressively

© 2010 Delmar Cengage Learning Testing a Movie When previewing a movie, some interactive functions do not work unless the movie is played using the Flash Player Use Control > Test Movie to test using the Flash player

© 2010 Delmar Cengage Learning Fig. 8: Control Menu Commands DVD-type commands

© 2010 Delmar Cengage Learning Documents, Movies, Applications Flash document and Flash movie are synonymous. Products such as games and educational software, as well as online advertisements and product demonstrations, are referred to as applications. Applications usually contain multiple Flash documents or movies that are linked.

© 2010 Delmar Cengage Learning Fig. 10: Playhead Moving across Timeline Playhead

© 2010 Delmar Cengage Learning Fig. 12: Document Properties This option may be selected Background color swatch

© 2010 Delmar Cengage Learning Fig. 13: Completed Changes to Document Properties Resized document (Stage) Gray background color This value might differ These sections may be open

© 2010 Delmar Cengage Learning Creating a Flash Movie Movies are created by: –placing objects on the stage –editing these objects –animating them –adding interactivity You can create graphics in Flash or import them from another program such as Photoshop

© 2010 Delmar Cengage Learning Creating an Animation A basic animation requires two keyframes –The first keyframe sets the starting position –The second keyframe sets the ending position The number of frames between two keyframes determines the length of the animation Once the two keyframes are set, Flash automatically fills in the frames between them, with a process called motion tweening

© 2010 Delmar Cengage Learning Fig. 14: Circle Object in Frame 1 Object on the Stage is on Layer 1 frame 1 on the Timeline

© 2010 Delmar Cengage Learning Fig. 15: Motion Animation Blue shading indicates a motion tween animation Dotted line indicates the path the object will follow during animation

© 2010 Delmar Cengage Learning Motion Tween Animation Process The process is to select an object on the Stage, then select the Motion Tween command from the Insert menu. –Timeline shows tween span –Motion path from beginning to ending frame

© 2010 Delmar Cengage Learning Motion Presets Flash provides several preconfigured motion tweens that you can apply to an object on the Stage. For example: –Bounce an object across the Stage –Fly-in an object from off the Stage –Cause an object to pulsate and to spiral in place

© 2010 Delmar Cengage Learning Fig. 17: Motion Presets Panel

© 2010 Delmar Cengage Learning Adding an Effect to an Object In addition to animating an object’s location, you can also animate an object’s appearance –Shape –Color –Brightness –Size –Transparency

© 2010 Delmar Cengage Learning Fig. 20: Creating a Marquee Selection Use the Selection tool to draw a marquee, which selects the entire object

© 2010 Delmar Cengage Learning Understanding the Timeline Organizes and controls a movie’s content over time Determine and modify what is happening in a movie frame by frame –Which objects are animated –What types of animation to use –Which objects will appear on top of others –How fast movie will play

© 2010 Delmar Cengage Learning Fig. 30: Elements of the Timeline Layers Playhead Current frame Frame rate Elapsed time Status bar Frames Frames view icon

© 2010 Delmar Cengage Learning Using Layers Layers are like transparent acetate sheets of content stacked on top of one another Each layer can contain one or more objects Adding a layer causes it to be placed on top of the other layers Can be re-ordered by dragging up or down

© 2010 Delmar Cengage Learning Fig. 31: Understanding Layers

© 2010 Delmar Cengage Learning Using Frames The timeline is made up of individual units called frames Content is displayed in frames as the playhead moves over them when the movie plays Frames are numbered in increments of five for easy reference The status bar indicates current frame the playhead is on

© 2010 Delmar Cengage Learning Using the Playhead The playhead indicates which frame is playing Can be dragged left or right Dragging back and forth allows you to check some animations in Flash without exporting to.swf

© 2010 Delmar Cengage Learning Understanding Scenes Are a way to organize long movies Each scene has its own timeline Give scenes descriptive names for faster editing Manage your flash movie production

© 2010 Delmar Cengage Learning Working with the Timeline By studying a timeline you can determine –If different objects are on different layers –If there is motion in any of the layers by looking for the motion arrow –The length of the animation –The frame rate –Where the animation is in its sequence

© 2010 Delmar Cengage Learning Fig. 32: Timeline of a Movie with a Second Object

© 2010 Delmar Cengage Learning Fig. 36: Changing the View of the Timeline

© 2010 Delmar Cengage Learning Fig. 37: Changing the Frame Rate Pointer changes to double- headed arrow

© 2010 Delmar Cengage Learning Distributing a Flash Movie Flash generates both the.swf and HTML files when you use the publish feature –.html (The HTML document) –.swf (The Flash Player file)

© 2010 Delmar Cengage Learning Other Publishing Options Stand-alone Projector Files Quicktime.mov files

© 2010 Delmar Cengage Learning Fig. 39: HTML Code

© 2010 Delmar Cengage Learning Fig. 40: The Three Layers Files after Publishing Your files may be listed in a different order

© 2010 Delmar Cengage Learning Plan an Application or Web Site Step 1: State the purpose or goals of your site –What do we want to accomplish? Step 2: Identify the target audience –Who will use this application or Web site?

© 2010 Delmar Cengage Learning Plan an Application or Web Site Step 3: Determine the Treatment –The look and feel –Tone –Approach –Emphasis

© 2010 Delmar Cengage Learning Plan an Application or Web Site Step 4: Develop the Specifications and Storyboard –Playback System –Elements to Include –Functionality –User Interface

© 2010 Delmar Cengage Learning Fig. 44: Sample Storyboard

© 2010 Delmar Cengage Learning Using Screen Design Guidelines Balance: distribution of optical weight in the layout Unity: how objects relate –Intra-screen –Inter-screen Movement: the way the viewer’s eyes move through the objects on the screen

© 2010 Delmar Cengage Learning Using Interactive Design Guidelines Make it simple, easy to understand, easy to use Build in consistency in the navigation scheme Provide feedback Give the user control

© 2010 Delmar Cengage Learning The Flash Workflow Process Step 1: Create and/or acquire the elements to be used in the application Step 2: Arrange the elements and create the animations Step 3: Apply special effects Step 4: Create the interactivity Step 5: Test and publish the application

© 2010 Delmar Cengage Learning Fig. 45: Flash Help Categories

© 2010 Delmar Cengage Learning Fig. 46: Flash Help Search Feature Search term

© 2010 Delmar Cengage Learning Chapter 1 Summary 1.Understand the Adobe Flash workspace 2.Open a document and play a movie 3.Create and save a movie 4.Work with the Timeline 5.Distribute an Adobe Flash movie 6.Plan an application or a website