Transcript Chapter 1 - CarlPetersheim.us

Adobe Flash CS3 Revealed
Chapter 1 - GETTING STARTED WITH FLASH
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
Chapter 1
Using Adobe Flash
 What is Adobe Flash?


An animation and interactive authoring program
Has tools for complex animation, as well as
excellent drawing tools
Chapter 1
Using Flash
 What can Flash be used for?

Web sites

Web-based applications

CD-Rom and interactive applications

Video
Chapter 1
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
Chapter 1
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 VCRlike controls
Chapter 1
Understanding the Flash Workspace
 Three parts to the development workspace

Menu bar

Stage

Timeline
 One or more panels may be displayed
Chapter 1
Fig. 1: Flash Workspace
Chapter 1
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
Chapter 1
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 a playback head
Chapter 1
The Tools Panel
 Panels are used to view, organize, and modify
objects and features in a movie
 Most commonly used:

Tools

Properties

Libraries
Chapter 1
The Tools Panel
 Tools, View, Colors, Options
 Arranging tools:

Dock panels together

Stand alone

Stacked above or below

Floating
Chapter 1
Fig. 2: Arranging Panels
Grouped
Stand alone
Floating
Stacked
Chapter 1
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.
Chapter 1
Fig. 3: Grouping Library Panel
Rectangle with
blue border
Chapter 1
Fig. 4: Ungrouping Library Panel
Collapse to
icons button
Collapse
button
Close button
Blue line
indicating
drop zone
Chapter 1
Fig. 7: Document Properties
Chapter 1
Fig. 8: Completed Changes to Document
Properties
Chapter 1
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
Chapter 1
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
 Use the Controller

Toolbar command on the Window menu
Chapter 1
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
Chapter 1
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
Chapter 1
Fig. 9: Control Menu Commands
DVD-type
commands
Chapter 1
Fig. 10: Playhead Moving across Timeline
Playhead
Chapter 1
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
Chapter 1
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
Chapter 1
Fig. 12: Oval Object in Frame 1
Object on the stage
is in Frame 1 on the
timeline
Chapter 1
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

Transparency
Chapter 1
Fig. 13: Motion Animation
Chapter 1
Fig. 14: Object Drawing Option
Object drawing option
is not selected
Chapter 1
Fig. 16: Creating a Marquee Selection
Chapter 1
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
Chapter 1
Fig. 18: Elements of the Timeline
Chapter 1
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
Chapter 1
Fig. 19: Understanding Layers
Chapter 1
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
Chapter 1
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
Chapter 1
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
Chapter 1
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
Chapter 1
Fig. 20: Timeline of a Movie with a Second
Object
Chapter 1
Fig. 23: Changing the View of the Timeline
Frame view icon
Bar used to change
the length of the
timeline
Chapter 1
Fig. 24: Changing the Frame Rate
New frame rate
Chapter 1
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)
Chapter 1
Other Publishing Options
 Stand-alone Projector Files
 Quicktime .mov files
Chapter 1
Fig. 25: HTML Code
.swf file
extension
indicates a Flash
player
Code specifies
color and size
Chapter 1
Fig. 26: The Three Layers Files after
Publishing
Chapter 1
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?
Chapter 1
Plan an Application or Web Site
 Step 3: Determine the Treatment

What is the look and feel?

Tone

Approach

Emphasis
Chapter 1
Plan an Application or Web Site
 Step 4: Develop the Specifications and Storyboard

Playback System

Elements to Include

Functionality

User Interface
Chapter 1
Fig. 30: Sample Storyboard
Chapter 1
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
Chapter 1
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
Chapter 1
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
Chapter 1
Chapter 1 Tasks
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
Chapter 1