macromedia studio 8 step-by-step macromedia flash 8 introduction
TRANSCRIPT
Macromedia Studio 8 Step-by-Step
MACROMEDIA FLASH 8Introduction
2Macromedia Studio Step-by-Step Introduction
Follow a design document and storyboard to define the properties of an animated billboardDraw and animate simple shapes and text to create an animated billboard for a Web siteFollow a design document and storyboard to produce an online documentary
Objectives
3Macromedia Studio Step-by-Step Introduction
Use Flash to simulate film-style techniques and effects to tell a storyCreate user-friendly navigation and features that provide ongoing feedback and put the audience in control of their online experienceFollow a design document and storyboard to produce an online gallery of video clips
Objectives (continued)
4Macromedia Studio Step-by-Step Introduction
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
Objectives (continued)
5Macromedia Studio Step-by-Step Introduction
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
Getting to Know Macromedia Flash
6Macromedia Studio Step-by-Step Introduction
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
What are Vectors and Bitmaps?
7Macromedia Studio Step-by-Step Introduction
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
What are Vectors and Bitmaps? (continued)
8Macromedia Studio Step-by-Step Introduction
FIGURE 1: Bitmap and vector images
9Macromedia Studio Step-by-Step Introduction
Running animation during file download
Improves site usability – Provides a steady flow of information– Maintains viewer interest
Streaming Content
10Macromedia Studio Step-by-Step Introduction
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
11Macromedia Studio Step-by-Step Introduction
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 editedSWF files cannot be edited
Flash File Types
12Macromedia Studio Step-by-Step Introduction
FIGURE 2: Flash file types
13Macromedia Studio Step-by-Step Introduction
14Macromedia Studio Step-by-Step Introduction
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
Finding Your Way Around the Flash Interface
15Macromedia Studio Step-by-Step Introduction
FIGURE 3: Flash 8 Interface
16Macromedia Studio Step-by-Step Introduction
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
17Macromedia Studio Step-by-Step Introduction
FIGURE 4: Flash Timeline
18Macromedia Studio Step-by-Step Introduction
19Macromedia Studio Step-by-Step Introduction
The Tools Panel
Contains tools for various tasks – Draw shapes– Add text– Modify objects– Control color
Options panel: used to modify tools
20Macromedia Studio Step-by-Step Introduction
FIGURE 5: Tools panel
21Macromedia Studio Step-by-Step Introduction
Opening a New Document and Selecting a Layout
First steps for creating Flash contentAppearance 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
22Macromedia Studio Step-by-Step Introduction
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
23Macromedia Studio Step-by-Step Introduction
FIGURE 6: Library panel
24Macromedia Studio Step-by-Step Introduction
FIGURE 10: Magnification pop-up menu
25Macromedia Studio Step-by-Step Introduction
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
26Macromedia Studio Step-by-Step Introduction
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
27Macromedia Studio Step-by-Step Introduction
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
28Macromedia Studio Step-by-Step Introduction
29Macromedia Studio Step-by-Step Introduction
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
30Macromedia Studio Step-by-Step Introduction
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
31Macromedia Studio Step-by-Step Introduction
Interactive Personalized Shopping Experiences
Enhances online shopping
Visitors build, personalize, buy products
Role of Macromedia Flash– Provides variety of colors and patterns
32Macromedia Studio Step-by-Step Introduction
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
33Macromedia Studio Step-by-Step Introduction
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
34Macromedia Studio Step-by-Step Introduction
Summarizing Introduction to Unit 3
Use Flash to create rich media contentTwo image types: bitmaps and vectorsFlash file types: FLA, SWF, HTML, ProjectorsFlash Interface: Stage, workspace, Timeline, panels, Property inspectorThree projects hone development skills