© 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 PanelsGrouped 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. 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
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. 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
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
LayersPlayhead
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
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. 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. 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
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
Top Related