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

© 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


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


Using Flash

• What can Flash be used for?– Web sites– Web-based applications– CD-Rom and interactive applications– Video


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


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


Understanding the Flash Workspace

• Three parts to the development workspace– Menu bar– Stage– Timeline

• One or more panels may be displayed


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


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


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


The Tools Panel

• Panels are used to view, organize, and modify objects and features in a movie

• Most commonly used:– Tools– Properties– Libraries


The Tools Panel

• Tools, View, Colors, Options• Arranging tools:

– Dock panels together– Stand alone– Stacked above or below– Floating


Fig. 2: Arranging PanelsGrouped panels

Stand-alone panel

Stacked panels

Floating panel


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.


Fig. 3: Grouping the Library Panel

Rectangle with blue border


Fig. 4: Ungrouping Library Panel

Toggle between Collapse to Icons and Expand Panel button

Close button


Fig. 7: Changing the Size of the Timeline Panel

Double-headed pointer


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


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


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


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


Fig. 8: Control Menu Commands

DVD-type commands


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.


Fig. 10: Playhead Moving across Timeline

Playhead


Fig. 12: Document Properties

This option may be selected

Background color swatch


Fig. 13: Completed Changes to Document Properties

Resized document (Stage)

Gray background

color

This value might differ

These sections may be open


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


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


Fig. 14: Circle Object in Frame 1

Object on the Stage is on Layer 1 frame 1 on the Timeline


Fig. 15: Motion Animation

Blue shading indicates a motion tween animation

Dotted line indicates the

path the object will follow during

animation


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


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


Fig. 17: Motion Presets Panel


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


Fig. 20: Creating a Marquee Selection

Use the Selection tool to draw a marquee, which selects the entire object


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


Fig. 30: Elements of the Timeline

LayersPlayhead

Current frame

Frame rate Elapsed time

Status bar

Frames

Frames view icon


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


Fig. 31: Understanding Layers


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


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


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


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


Fig. 32: Timeline of a Movie with a Second Object


Fig. 36: Changing the View of the Timeline


Fig. 37: Changing the Frame Rate

Pointer changes to double-headed arrow


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)


Other Publishing Options

• Stand-alone Projector Files• Quicktime .mov files


Fig. 39: HTML Code


Fig. 40: The Three Layers Files after Publishing

Your files may be listed in a different order


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?



• Step 3: Determine the Treatment– The look and feel– Tone– Approach– Emphasis



• Step 4: Develop the Specifications and Storyboard– Playback System– Elements to Include– Functionality– User Interface


Fig. 44: Sample Storyboard


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


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


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


Fig. 45: Flash Help Categories


Fig. 46: Flash Help Search Feature

Search term


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

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

Documents

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