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

2 Macromedia Studio Step-by-Step 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 Objectives

Introduction 3 Macromedia Studio Step-by-Step 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 Objectives (continued)

Introduction 4 Macromedia Studio Step-by-Step 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)

Introduction 5 Macromedia Studio Step-by-Step 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

Introduction 6 Macromedia Studio Step-by-Step 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?

Introduction 7 Macromedia Studio Step-by-Step 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)

Introduction 8 Macromedia Studio Step-by-Step FIGURE 1: Bitmap and vector images

Introduction 9 Macromedia Studio Step-by-Step Running animation during file download Improves site usability –Provides a steady flow of information –Maintains viewer interest Streaming Content

Introduction 10 Macromedia Studio Step-by-Step 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

Introduction 11 Macromedia Studio Step-by-Step 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

Introduction 12 Macromedia Studio Step-by-Step FIGURE 2: Flash file types

Introduction 13 Macromedia Studio Step-by-Step

Introduction 14 Macromedia Studio Step-by-Step 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

Introduction 15 Macromedia Studio Step-by-Step FIGURE 3: Flash 8 Interface

Introduction 16 Macromedia Studio Step-by-Step 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

Introduction 17 Macromedia Studio Step-by-Step FIGURE 4: Flash Timeline

Introduction 18 Macromedia Studio Step-by-Step

Introduction 19 Macromedia Studio Step-by-Step The Tools Panel Contains tools for various tasks –Draw shapes –Add text –Modify objects –Control color Options panel: used to modify tools

Introduction 20 Macromedia Studio Step-by-Step FIGURE 5: Tools panel

Introduction 21 Macromedia Studio Step-by-Step 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

Introduction 22 Macromedia Studio Step-by-Step 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

Introduction 23 Macromedia Studio Step-by-Step FIGURE 6: Library panel

Introduction 24 Macromedia Studio Step-by-Step FIGURE 10: Magnification pop-up menu

Introduction 25 Macromedia Studio Step-by-Step 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

Introduction 26 Macromedia Studio Step-by-Step 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

Introduction 27 Macromedia Studio Step-by-Step 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

Introduction 28 Macromedia Studio Step-by-Step

Introduction 29 Macromedia Studio Step-by-Step 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

Introduction 30 Macromedia Studio Step-by-Step 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

Introduction 31 Macromedia Studio Step-by-Step Interactive Personalized Shopping Experiences Enhances online shopping Visitors build, personalize, buy products Role of Macromedia Flash –Provides variety of colors and patterns

Introduction 32 Macromedia Studio Step-by-Step 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

Introduction 33 Macromedia Studio Step-by-Step 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

Introduction 34 Macromedia Studio Step-by-Step 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