macromedia studio 8 step-by-step macromedia flash 8 project 1: animated billboard

Macromedia Studio 8 Step-by-Step

MACROMEDIA FLASH 8 Project 1: Animated Billboard

2Macromedia Studio Step-by-Step Project 1

Create a new Flash document

Use the Flash drawing tools

Create text and basic shapes

Work with symbol instances and the library

Project Objectives


Animate shapes, symbols, and text

Make a Flash document accessible

Publish Flash content for the Web

Project Objectives (continued)


Animated billboards – Static and dynamic images and text– Achieve a particular goal of a Web site

Some uses for animated billboards – Explain a concept– Define a process or flow– Attract attention or entertain viewers– Introduce new or updated information– Cause an emotional response

Overview


Produce a brief animated billboard – Promotes film festival sponsored by SMV – Added to home page of SMV site

Use design document/storyboards to:– Set the properties for your billboard– Create the necessary graphics and text– Generate graphical objects to reuse– Animate graphics and text

The Assignment


FIGURE 1: SMV Web site example showing placement of the animated billboard


Purpose of design document– Provides site goals, purpose, and audience– Describes design requirements

• Examples: dimensions, colors, fonts, and logosExamples: dimensions, colors, fonts, and logos

– Details delivery requirements • Viewers: Flash Player and browsers Viewers: Flash Player and browsers

– Provides key content elements

Design document is a reference point

Billboard Design


Project Storyboards

Storyboard: series of narrative panels

Uses for a Storyboard– Source of specifications for Flash producer– Reference point for tester of Flash movie

Storyboard for animated billboard project – Includes a series of images – Provides descriptions of movie sections – Images created in Macromedia Fireworks


Lesson 1: Creating a New Flash Document

Lesson 2: Adding Shapes and Text to the Timeline

Lesson 3: Working with Symbols, Instances, and the Library

Project 1 Lessons


Lesson 4: Animating Shapes, Symbols, and Text

Lesson 5: Making the Animated Billboard Accessible

Lesson 6: Publishing Flash Elements for the Web

Project 1 Lessons (continued)


Lesson 1 Objectives

Set document properties

Set the duration of a document by extending the Timeline

Add and name layers on the Timeline

Save and name a document


Lesson 1 Introduction

Lesson tasks– Identify requirements for Flash document

• Examples: size, background color, and frame rateExamples: size, background color, and frame rate

– Implement properties of Flash document– Add layers as necessary– Save and name new Flash documents


FIGURE 1-1: Storyboard summary information


Setting Document Properties

First step to creating new document Overview of tasks– Open Document Properties dialog box– Set various properties

• Title: SMV Digital Impact Trailer Title: SMV Digital Impact Trailer • Description: Detroit Film FestivalDescription: Detroit Film Festival• Page dimensions: 360 pixels x 360 pixels Page dimensions: 360 pixels x 360 pixels • Background color: gray (#666666) Background color: gray (#666666) • Frame rate: 12 frames per second (default)Frame rate: 12 frames per second (default)


Setting Duration by Extending the Timeline

Add frames to match length of movieFormula: movie duration x frames/sec– Movie duration: 5 seconds– Frame rate: 12 frames/sec– Frame no. = 5 s X 12 fps = 60 frames

Overview of tasks– Point to Timeline– Insert frame in slot 61

• Not 60 because playhead starts at frame 1Not 60 because playhead starts at frame 1


FIGURE 1-5: Extending the Timeline to frame 61


Adding and Naming Layers on the Timeline

Layers: plane divisions of Stage – Represent stacking order of objects– Enable you to better control objects– Add depth and realism to scene

Overview of tasks– Add eight layers with Insert layer function– Name nine new layers in new document


FIGURE 1-7: Named layers


Saving and Naming a Document

Save your work on a regular basis

Overview of tasks– Click Save on File menu

• Save As dialog box opens for new documentSave As dialog box opens for new document

– Key in name: FL_Project1_YourName– Navigate to project folder– Click Save (Windows) or Save As (Mac)


Lesson 2 Objectives

Draw and modify shapes

Create custom fills and gradients by using the Color Mixer

Enter and format static text

Import vector graphics



Lesson tasks– Draw the border and background

• Use simple shapes and lines Use simple shapes and lines

– Add descriptive text • Provides information about Digital Impact Film FestivalProvides information about Digital Impact Film Festival

– Import the disc logo to create the title

Use design document for look and feel


Drawing Shapes

Shapes: objects drawn on Stage Impact of covering a shape – Portion of shape covered is replaced– Paint of the same color merges– Paint of different colors remains distinct

How to avoid unintentional altering– Group the shapes– Draw shapes on separate layers


FIGURE 2-2: Drawing with ungrouped shapes


Drawing the Border

Draw border using cutaway processOverview of tasks – Draw black rectangle 360 x 344 on border – Draw red rectangle 322 x 268 on disc layer– Align rectangles horizontally and vertically– Cut red rectangle from disc layer– Paste red rectangle onto border layer– Cut red rectangle again to create hole


FIGURE 2-11: The red and black shapes blend together to form a single object


FIGURE 2-12: Deleting the red interior cuts a hole and creates the outer border


Creating a Backlight for Background Effect

Background is initially dark

In time, illuminating film strips appear

Effect requires three layers

Overview of tasks– Draw light blue rectangle (backlight layer)

• Align corners with points of interior rectangleAlign corners with points of interior rectangle

– Copy the light blue rectangle – Paste rectangle on the gradient layer


FIGURE 2-17: Draw a light blue rectangle that fills the interior of the border


Creating Custom Fills byUsing the Color Mixer

The Web-safe (or Netscape) palette – 216 colors that are browser friendly– Use Color Mixer to access broader palette

Overview of tasks– Select rectangle in gradient layer (frame 1) – Add Linear gradient using Color Mixer– Use three markers to go from black to blue– Rotate gradient 90 degrees


FIGURE 2-22: A sample of the gradient is shown at the bottom of the Color Mixer panel


FIGURE 2-23: Use the Gradient Transform Tool to rotate the gradient


Importing Vector Graphics

Disc logo should be next to titleAdd disc logo by importing graphicOverview of tasks– Open the File menu– Point to Import->Import to Stage– Navigate to the project data files – Double-click disc.png to load– Set object position (X, Y) to (1, 1)


FIGURE 2-24: The disc graphic positioned over the border


Entering and Formatting Text for the Border

General specifications for text– Multiple blocks of text used– Text blocks have different sizes – Text blocks are in different positions

Overview of tasks– Key DIGITAL IMPACT next to logo– Key FILM FESTIVAL below title– KEY TICKETS 313.123.4567 at bottom


FIGURE 2-26: Text properties


FIGURE 2-29: Text positioned in the curve of the border


Lesson 3 Objectives

Define symbol, instance, and library

Create graphic symbols

Add instances of symbols to the Stage

Edit symbols

Change the properties of a symbol instance


Lesson 3 IntroductionSymbol: generic graphic, button, or clip Instance: copy of a symbol on StageUpdate to symbol affects all instancesUpdate to instance is localLesson tasks – Finish the background effect – Create illuminating film strips

• Place between backlight and gradient layers Place between backlight and gradient layers

– Use symbols to simplify implementation


Creating Graphic Symbols

Create film strip using two symbols

Overview of tasks– Create new graphic symbol, “filmstrip” – Draw white rectangle 50 x 54– Convert to graphic symbol, “film_cell”– Drag four instances of film_cell to stage– Align and space all five instances – Draw black rectangle behind film cells


FIGURE 3-4: Adding instances of the film_cell symbol to the Stage


FIGURE 3-6: Draw a rectangle behind the film cells to create the strip of film


Adding Symbol Instances to the Main Timeline

Modify filmstrips as per storyboard

Overview of tasks– Hide gradient panel– Click on frame 1 of film layer– Drag four instances of filmstrip to Stage– Use Free Transform Tool to modify– Change Alpha transparency to 80%


FIGURE 3-8: Four instances of the filmstrip symbol transformed and arranged on the Stage


Editing Symbols

Impact of changing fill of film_cell – All instances on Stage are updated

Overview of tasks– Go to film_cell symbol in Library panel– Create liner gradient: violet to green– Rotate the fill diagonally– Return to Scene 1– Restore gradient layer to visibility


FIGURE 3-13: All symbol instances change automatically


Lesson 4 Objectives

Explain keyframe animation and tweening

Animate shapes by using shape tweens

Animate symbols and text by using motion tweens

Prevent the Timeline from looping by using ActionScript



Where motion effects will be applied– Countdown graphic– Strips of film showing and illuminating– Theater location text entering

Lesson tasks– Animate shapes, text, and symbols – Use two types of Flash animation

• Frame-by-frame Frame-by-frame • TweeningTweening


Creating Frame-by-Frame Animation

Keyframe in Timeline indicates change

Modified object implements change

Overview of tasks– Add keyframes at frames 7, 13, 19, 25 – Import countdown.swf graphic– Break apart instance on stage– Change quadrant colors

• Sequence: orange, red, green, and blueSequence: orange, red, green, and blue


FIGURE 4-2: Instance of the countdown.swf graphic


FIGURE 4-3: Four instances of the countdown graphic appear at one-half second intervals along the Timeline


Animating Symbols withMotion Tweens

Effect: filmstrips appear and brightenUse tweening to create effectOverview of tasks– Select frame 1 on gradient layer– Add keyframes at frames 7 and 25– Select frame 25, change Alpha to 85%– Click between frames 7 and 25 – Select Motion from Tween menu


FIGURE 4-9: Motion tweens are represented by light blue shading


Animating Text with Motion Tweens

Text blocks: event and location/dateOverview of tasks– Insert keyframe at frame 37 (event layer) – Add event text– Go to location and date layer– Insert keyframes at frames 49 and 55– Click frame 49, add text, drag downward– Create motion tween between 49 and 55


FIGURE 4-12: Location and date text


Creating Shape TweensTwo types of shape tweening– Motion: based on moving shape– Morphing: based on altering shape

Objective: convert curtains to bordersOverview of tasks– Add red and orange curtains (new layers)– Vary size and position to create tweens

• Range of two shape tweens: frames 31-37, 37-43Range of two shape tweens: frames 31-37, 37-43

– Add green and blue inner borders


FIGURE 4-24: Mid position of the orange curtain animation


FIGURE 4-27: Green and blue inner border


Testing a Flash Document

Check for positioning and timing errors

Test SWF file in Flash Player

Overview of tasks– Open the Control menu– Click Test Movie


Controlling the Timeline with ActionScript

Actions panel: interface to ActionScriptObjective: stop movie from loopingOverview of tasks– Insert actions layer above border text

• Insert a keyframe in frame 61 Insert a keyframe in frame 61

– Expand Actions panel– Click Global Functions – Expand the Timeline Control category– Double-click the stop action


FIGURE 4-30: Actions panel


Lesson 5 Objectives

Define Accessibility

Make a Flash document accessible



Broad audience for animated billboard– Includes people with disabilities

Animated billboard not yet accessible– It should be usable by the visually impaired

Lesson tasks– Get acquainted with Accessibility panel– Expose movie to screen reader

• Screen reader converts text to spoken wordScreen reader converts text to spoken word


Understanding Accessibility

Accessibility: broad notion of usability– Includes people with disabilities

Importance of providing accessibility – The right thing to do– An information channel to the disabled– The law and/or organization policy – Increased usability for all site visitors


Making a Flash Document Accessible

Add descriptive text for a screen reader

Entire billboard should be accessible

Overview of tasks– Open the Accessibility panel – Check Make movie accessible – Uncheck Make child objects accessible– Key festival information in Description


FIGURE 5-1: Accessibility panel for the entire document


Lesson 6 Objectives

Preview a Flash document before publishing

Adjust publish settings for a Flash document

Publish a Flash document for the Web



Preview your movie in a browser

Publish Settings: specifies file type

Lesson tasks– Preview animated billboard in a browser– Adjust the publish settings– Publish the document for Web viewing


Previewing a Flash Document

Actions behind a preview– New HTML file is generated– SWF file plays in browser of choice

Overview of tasks– Open the File menu– Point to Publish Preview– Click Default - (HTML)


Publishing a Flash Document

Viewing Flash content on the Web– Output the SWF file – Add SWF file to an HTML page

Overview of tasks– Click Publish Settings on File menu– Click the Formats tab– Deselect HTML option (page exists)– Click Publish


FIGURE 6-1: Formats tab on the Publish Settings dialog box


Summarizing Project 1

Animated billboard created for festival

Guides: design document and storyboard

Components: drawings, text, imported graphics, library symbols, and animation

Animation types: frame-by-frame, tweens

Billboard accessibility broadens reach

macromedia studio 8 step-by-step macromedia flash 8 project 1: animated billboard

Documents