Macromedia Studio 8 Step-by-Step MACROMEDIA FLASH 8 Introduction

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


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)


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)


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


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?


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)


FIGURE 1: Bitmap and vector images


Running animation during file download

Improves site usability – Provides a steady flow of information– Maintains viewer interest

Streaming Content


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


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


FIGURE 2: Flash file types



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


FIGURE 3: Flash 8 Interface


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


FIGURE 4: Flash Timeline



The Tools Panel

Contains tools for various tasks – Draw shapes– Add text– Modify objects– Control color

Options panel: used to modify tools


FIGURE 5: Tools panel


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


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


FIGURE 6: Library panel


FIGURE 10: Magnification pop-up menu


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


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


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



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


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


Interactive Personalized Shopping Experiences

Enhances online shopping

Visitors build, personalize, buy products

Role of Macromedia Flash– Provides variety of colors and patterns


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


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

Documents

Macromedia Studio 8 Step-by-Step MACROMEDIA FLASH 8 Introduction