Macromedia
Studio 8 Step-by-Step
MACROMEDIA FLASH 8
Introduction
Objectives
Follow a design document and
storyboard to define the properties of an
animated billboard
Draw and animate simple shapes and
text to create an animated billboard for a
Web site
Follow a design document and
storyboard to produce an online
documentary
Macromedia Studio Step-by-Step
Introduction
2
Objectives (continued)
Use Flash to simulate film-style
techniques and effects to tell a story
Create user-friendly navigation and
features that provide ongoing feedback
and put the audience in control of their
online experience
Follow a design document and
storyboard to produce an online gallery
of video clips
Macromedia Studio Step-by-Step
Introduction
3
Objectives (continued)
Create Flash Video (FLV) files and
prepare video for display on the Web
Learn methods for improving Flash
performance by storing and accessing
content outside the main FLA document
Ensure that your Flash documents are
readable, usable, and accessible for the
entire target audience
Macromedia Studio Step-by-Step
Introduction
4
Getting to Know Macromedia
Flash
Content produced with Flash
– Animation
– Synchronized sound
– Engaging interactivity
– Film-style transitions
– High-quality Web video
Rich media is efficiently compressed
– Provides for fast downloads
Macromedia Studio Step-by-Step
Introduction
5
What are Vectors and
Bitmaps?
Bitmap (raster) images
– Represents image as a matrix of pixels
– Common Web graphics; e.g, GIF and JPG
Three major disadvantages with bitmaps
– Stretching may cause pixilation (distortion)
– As image size grows, file size grows
– Web image reproduced pixel by pixel
Bitmaps preferred for high resolution
– Example: photographs
Macromedia Studio Step-by-Step
Introduction
6
What are Vectors and
Bitmaps? (continued)
Vector graphic
– Format used to create new images
– Encodes image properties and instructions
Advantages of vectors
– Small size
– Scalability
– Allows for advanced editing
Compare bitmaps and vector graphics
– Look for pixilation at image boundaries
Macromedia Studio Step-by-Step
Introduction
7
FIGURE 1: Bitmap and vector images
Macromedia Studio Step-by-Step
Introduction
8
Streaming Content
Running animation during file download
Improves site usability
– Provides a steady flow of information
– Maintains viewer interest
Macromedia Studio Step-by-Step
Introduction
9
Macromedia Flash Player
Required to view Flash content on Web
Flash has a stand alone version
Special circumstances
– No Internet connection
– No Web browser
– No Flash Player
Use projector in special circumstances
– Projector: stand alone executable version
Macromedia Studio Step-by-Step
Introduction
10
Flash File Types
The term “Flash” has two connotations:
– Authoring environment
– Rich media file produced in environment
Two main file types
– FLA: editable source document
– SWF (Small Web file): for Web viewing
• SWF files cannot be edited
Macromedia Studio Step-by-Step
Introduction
11
FIGURE 2: Flash file types
Macromedia Studio Step-by-Step
Introduction
12
Macromedia Studio Step-by-Step
Introduction
13
Finding Your Way Around the
Flash Interface
Environment based on movie metaphor
Main components of Flash interface
– Stage: place to create scenes
– Timeline: plays out scenes frame-by-frame
– Workspace: gray area surrounding stage
– Panels: view, organize, modify elements
– Tools panel: for manipulating graphics
– Property inspector: shows object properties
Macromedia Studio Step-by-Step
Introduction
14
FIGURE 3: Flash 8 Interface
Macromedia Studio Step-by-Step
Introduction
15
The Timeline
Organizes and controls a movie
Following a Flash movie on Timeline
– Playhead moves from frame to frame
– Frames appear on Stage in sequence
Stack objects on separate layers
– Creates the illusion of depth
– Provides more control over Stage objects
Macromedia Studio Step-by-Step
Introduction
16
FIGURE 4: Flash Timeline
Macromedia Studio Step-by-Step
Introduction
17
Macromedia Studio Step-by-Step
Introduction
18
The Tools Panel
Contains tools for various tasks
– Draw shapes
– Add text
– Modify objects
– Control color
Options panel: used to modify tools
Macromedia Studio Step-by-Step
Introduction
19
FIGURE 5: Tools panel
Macromedia Studio Step-by-Step
Introduction
20
Opening a New Document
and Selecting a Layout
First steps for creating Flash content
Appearance of new Flash document
– One empty layer on the Timeline
– One blank keyframe for adding content
Document window can be modified
– Quickly access most needed tools
– Add additional layers
– Set document properties
Macromedia Studio Step-by-Step
Introduction
21
Arranging the Flash Window
A variety of ways to vary window
To collapse (or restore) a panel
– Click title of the panel; e.g., Library
To show (or hide) docked panels
– Click the Show/Hide button
Open panels by clicking Window item
Adjust window magnification
– Use Magnification pop-up menu
Macromedia Studio Step-by-Step
Introduction
22
FIGURE 6: Library panel
Macromedia Studio Step-by-Step
Introduction
23
FIGURE 10: Magnification pop-up menu
Macromedia Studio Step-by-Step
Introduction
24
Viewing a Completed Flash
Document
Note the Timeline, Layers, and Stage
– See how features produce a finished movie
Overview of tasks
– Click File and Open
– Locate and select Animated_billboard.fla
– Click Control on the menu bar
– Click Play
– Move playhead to another frame
Macromedia Studio Step-by-Step
Introduction
25
Identifying Rich Media Content
on the Web
Critical decision for a Flash developer
– Whether to use Flash or static text/images
Rich media content
– Animation, sound, or video on a Web page
– Web content modified by visitor interaction
Macromedia Studio Step-by-Step
Introduction
26
Deciding When to Use Rich
Media Content
Questions relating to need for rich media
– Does the content change over time?
– Is there a need for motion, sound, or video?
– Is synchronized audio necessary?
– Should the content attract attention?
– Is the content intended to entertain?
– Are there cross-platform browser issues?
– Are unique fonts required?
Use Flash with any affirmative responses
Macromedia Studio Step-by-Step
Introduction
27
Macromedia Studio Step-by-Step
Introduction
28
Examples of Rich Media
Content on the Web
Purpose for evaluating Web sites
– Build and maintain good practices
– Prevent common mistakes
– Get inspiration for future designs
Examples of rich media content to follow
Macromedia Studio Step-by-Step
Introduction
29
Virtual Tours
Create virtual experiences of real places
– View a location
– See the people from a particular place
– Listen to the history of a place
Use Flash to create virtual tours
– Provide a more immersive experience
– Download movies at high speed
Macromedia Studio Step-by-Step
Introduction
30
Interactive Personalized
Shopping Experiences
Enhances online shopping
Visitors build, personalize, buy products
Role of Macromedia Flash
– Provides variety of colors and patterns
Macromedia Studio Step-by-Step
Introduction
31
Hybrid HTML Sites Enriched
with Flash Elements
E-commerce sites built mainly with HTML
Rich media content added to static sites
– Flash animation
– Flash video
Visitors attracted by two features
– Immersive rich media content
– Ability to browse and purchase products
Macromedia Studio Step-by-Step
Introduction
32
Macromedia Flash 8 Projects
Project 1: Animated Billboard
– Produce an animated billboard
– Follow design document and storyboard
Project 2: Digital Documentary
– Provide brief history of amusement park
– Use rich graphics, photographs, text, sound
Project 3: Video Gallery
– Produce gallery for Blue Mountain Riders
– Feature three surfing video clips
Macromedia Studio Step-by-Step
Introduction
33
Summarizing Introduction to
Unit 3
Use Flash to create rich media content
Two image types: bitmaps and vectors
Flash file types: FLA, SWF, HTML,
Projectors
Flash Interface: Stage, workspace,
Timeline, panels, Property inspector
Three projects hone development skills
Macromedia Studio Step-by-Step
Introduction
34