Upload
tracy-hoover
View
220
Download
3
Embed Size (px)
Citation preview
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
3Macromedia Studio Step-by-Step Project 1
Animate shapes, symbols, and text
Make a Flash document accessible
Publish Flash content for the Web
Project Objectives (continued)
4Macromedia Studio Step-by-Step Project 1
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
5Macromedia Studio Step-by-Step Project 1
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
6Macromedia Studio Step-by-Step Project 1
FIGURE 1: SMV Web site example showing placement of the animated billboard
7Macromedia Studio Step-by-Step Project 1
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
8Macromedia Studio Step-by-Step Project 1
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
9Macromedia Studio Step-by-Step Project 1
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
10Macromedia Studio Step-by-Step Project 1
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)
11Macromedia Studio Step-by-Step Project 1
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
12Macromedia Studio Step-by-Step Project 1
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
13Macromedia Studio Step-by-Step Project 1
FIGURE 1-1: Storyboard summary information
14Macromedia Studio Step-by-Step Project 1
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)
15Macromedia Studio Step-by-Step Project 1
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
16Macromedia Studio Step-by-Step Project 1
FIGURE 1-5: Extending the Timeline to frame 61
17Macromedia Studio Step-by-Step Project 1
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
18Macromedia Studio Step-by-Step Project 1
FIGURE 1-7: Named layers
19Macromedia Studio Step-by-Step Project 1
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)
20Macromedia Studio Step-by-Step Project 1
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
21Macromedia Studio Step-by-Step Project 1
Lesson 2 Introduction
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
22Macromedia Studio Step-by-Step Project 1
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
23Macromedia Studio Step-by-Step Project 1
FIGURE 2-2: Drawing with ungrouped shapes
24Macromedia Studio Step-by-Step Project 1
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
25Macromedia Studio Step-by-Step Project 1
FIGURE 2-11: The red and black shapes blend together to form a single object
26Macromedia Studio Step-by-Step Project 1
FIGURE 2-12: Deleting the red interior cuts a hole and creates the outer border
27Macromedia Studio Step-by-Step Project 1
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
28Macromedia Studio Step-by-Step Project 1
FIGURE 2-17: Draw a light blue rectangle that fills the interior of the border
29Macromedia Studio Step-by-Step Project 1
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
30Macromedia Studio Step-by-Step Project 1
FIGURE 2-22: A sample of the gradient is shown at the bottom of the Color Mixer panel
31Macromedia Studio Step-by-Step Project 1
FIGURE 2-23: Use the Gradient Transform Tool to rotate the gradient
32Macromedia Studio Step-by-Step Project 1
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)
33Macromedia Studio Step-by-Step Project 1
FIGURE 2-24: The disc graphic positioned over the border
34Macromedia Studio Step-by-Step Project 1
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
35Macromedia Studio Step-by-Step Project 1
FIGURE 2-26: Text properties
36Macromedia Studio Step-by-Step Project 1
FIGURE 2-29: Text positioned in the curve of the border
37Macromedia Studio Step-by-Step Project 1
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
38Macromedia Studio Step-by-Step Project 1
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
39Macromedia Studio Step-by-Step Project 1
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
40Macromedia Studio Step-by-Step Project 1
FIGURE 3-4: Adding instances of the film_cell symbol to the Stage
41Macromedia Studio Step-by-Step Project 1
FIGURE 3-6: Draw a rectangle behind the film cells to create the strip of film
42Macromedia Studio Step-by-Step Project 1
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%
43Macromedia Studio Step-by-Step Project 1
FIGURE 3-8: Four instances of the filmstrip symbol transformed and arranged on the Stage
44Macromedia Studio Step-by-Step Project 1
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
45Macromedia Studio Step-by-Step Project 1
FIGURE 3-13: All symbol instances change automatically
46Macromedia Studio Step-by-Step Project 1
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
47Macromedia Studio Step-by-Step Project 1
Lesson 4 Introduction
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
48Macromedia Studio Step-by-Step Project 1
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
49Macromedia Studio Step-by-Step Project 1
FIGURE 4-2: Instance of the countdown.swf graphic
50Macromedia Studio Step-by-Step Project 1
FIGURE 4-3: Four instances of the countdown graphic appear at one-half second intervals along the Timeline
51Macromedia Studio Step-by-Step Project 1
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
52Macromedia Studio Step-by-Step Project 1
FIGURE 4-9: Motion tweens are represented by light blue shading
53Macromedia Studio Step-by-Step Project 1
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
54Macromedia Studio Step-by-Step Project 1
FIGURE 4-12: Location and date text
55Macromedia Studio Step-by-Step Project 1
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
56Macromedia Studio Step-by-Step Project 1
FIGURE 4-24: Mid position of the orange curtain animation
57Macromedia Studio Step-by-Step Project 1
FIGURE 4-27: Green and blue inner border
58Macromedia Studio Step-by-Step Project 1
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
59Macromedia Studio Step-by-Step Project 1
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
60Macromedia Studio Step-by-Step Project 1
FIGURE 4-30: Actions panel
61Macromedia Studio Step-by-Step Project 1
Lesson 5 Objectives
Define Accessibility
Make a Flash document accessible
62Macromedia Studio Step-by-Step Project 1
Lesson 5 Introduction
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
63Macromedia Studio Step-by-Step Project 1
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
64Macromedia Studio Step-by-Step Project 1
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
65Macromedia Studio Step-by-Step Project 1
FIGURE 5-1: Accessibility panel for the entire document
66Macromedia Studio Step-by-Step Project 1
Lesson 6 Objectives
Preview a Flash document before publishing
Adjust publish settings for a Flash document
Publish a Flash document for the Web
67Macromedia Studio Step-by-Step Project 1
Lesson 6 Introduction
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
68Macromedia Studio Step-by-Step Project 1
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)
69Macromedia Studio Step-by-Step Project 1
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
70Macromedia Studio Step-by-Step Project 1
FIGURE 6-1: Formats tab on the Publish Settings dialog box
71Macromedia Studio Step-by-Step Project 1
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