Download presentation
Presentation is loading. Please wait.
Published byTracy Hoover Modified over 9 years ago
1
Macromedia Studio 8 Step-by-Step MACROMEDIA FLASH 8 Project 1: Animated Billboard
2
Project 1 2 Macromedia Studio Step-by-Step Create a new Flash document Use the Flash drawing tools Create text and basic shapes Work with symbol instances and the library Project Objectives
3
Project 1 3 Macromedia Studio Step-by-Step Animate shapes, symbols, and text Make a Flash document accessible Publish Flash content for the Web Project Objectives (continued)
4
Project 1 4 Macromedia Studio Step-by-Step 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
5
Project 1 5 Macromedia Studio Step-by-Step 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
6
Project 1 6 Macromedia Studio Step-by-Step FIGURE 1: SMV Web site example showing placement of the animated billboard
7
Project 1 7 Macromedia Studio Step-by-Step 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 browsersViewers: Flash Player and browsers –Provides key content elements Design document is a reference point Billboard Design
8
Project 1 8 Macromedia Studio Step-by-Step 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
9
Project 1 9 Macromedia Studio Step-by-Step 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
10
Project 1 10 Macromedia Studio Step-by-Step 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)
11
Project 1 11 Macromedia Studio Step-by-Step 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
12
Project 1 12 Macromedia Studio Step-by-Step 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
13
Project 1 13 Macromedia Studio Step-by-Step FIGURE 1-1: Storyboard summary information
14
Project 1 14 Macromedia Studio Step-by-Step Setting Document Properties First step to creating new document Overview of tasks –Open Document Properties dialog box –Set various properties Title: SMV Digital Impact TrailerTitle: SMV Digital Impact Trailer Description: Detroit Film FestivalDescription: Detroit Film Festival Page dimensions: 360 pixels x 360 pixelsPage 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)
15
Project 1 15 Macromedia Studio Step-by-Step Setting Duration by Extending the Timeline Add frames to match length of movie Formula: 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
16
Project 1 16 Macromedia Studio Step-by-Step FIGURE 1-5: Extending the Timeline to frame 61
17
Project 1 17 Macromedia Studio Step-by-Step 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
18
Project 1 18 Macromedia Studio Step-by-Step FIGURE 1-7: Named layers
19
Project 1 19 Macromedia Studio Step-by-Step 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)
20
Project 1 20 Macromedia Studio Step-by-Step 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
21
Project 1 21 Macromedia Studio Step-by-Step Lesson 2 Introduction Lesson tasks –Draw the border and background Use simple shapes and linesUse 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
22
Project 1 22 Macromedia Studio Step-by-Step 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
23
Project 1 23 Macromedia Studio Step-by-Step FIGURE 2-2: Drawing with ungrouped shapes
24
Project 1 24 Macromedia Studio Step-by-Step Drawing the Border Draw border using cutaway process Overview 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
25
Project 1 25 Macromedia Studio Step-by-Step FIGURE 2-11: The red and black shapes blend together to form a single object
26
Project 1 26 Macromedia Studio Step-by-Step FIGURE 2-12: Deleting the red interior cuts a hole and creates the outer border
27
Project 1 27 Macromedia Studio Step-by-Step 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
28
Project 1 28 Macromedia Studio Step-by-Step FIGURE 2-17: Draw a light blue rectangle that fills the interior of the border
29
Project 1 29 Macromedia Studio Step-by-Step Creating Custom Fills by Using 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
30
Project 1 30 Macromedia Studio Step-by-Step FIGURE 2-22: A sample of the gradient is shown at the bottom of the Color Mixer panel
31
Project 1 31 Macromedia Studio Step-by-Step FIGURE 2-23: Use the Gradient Transform Tool to rotate the gradient
32
Project 1 32 Macromedia Studio Step-by-Step Importing Vector Graphics Disc logo should be next to title Add disc logo by importing graphic Overview 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)
33
Project 1 33 Macromedia Studio Step-by-Step FIGURE 2-24: The disc graphic positioned over the border
34
Project 1 34 Macromedia Studio Step-by-Step 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
35
Project 1 35 Macromedia Studio Step-by-Step FIGURE 2-26: Text properties
36
Project 1 36 Macromedia Studio Step-by-Step FIGURE 2-29: Text positioned in the curve of the border
37
Project 1 37 Macromedia Studio Step-by-Step 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
38
Project 1 38 Macromedia Studio Step-by-Step Lesson 3 Introduction Symbol: generic graphic, button, or clip Instance: copy of a symbol on Stage Update to symbol affects all instances Update to instance is local Lesson tasks –Finish the background effect –Create illuminating film strips Place between backlight and gradient layersPlace between backlight and gradient layers –Use symbols to simplify implementation
39
Project 1 39 Macromedia Studio Step-by-Step 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
40
Project 1 40 Macromedia Studio Step-by-Step FIGURE 3-4: Adding instances of the film_cell symbol to the Stage
41
Project 1 41 Macromedia Studio Step-by-Step FIGURE 3-6: Draw a rectangle behind the film cells to create the strip of film
42
Project 1 42 Macromedia Studio Step-by-Step 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%
43
Project 1 43 Macromedia Studio Step-by-Step FIGURE 3-8: Four instances of the filmstrip symbol transformed and arranged on the Stage
44
Project 1 44 Macromedia Studio Step-by-Step 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
45
Project 1 45 Macromedia Studio Step-by-Step FIGURE 3-13: All symbol instances change automatically
46
Project 1 46 Macromedia Studio Step-by-Step 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
47
Project 1 47 Macromedia Studio Step-by-Step 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-frameFrame-by-frame TweeningTweening
48
Project 1 48 Macromedia Studio Step-by-Step 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
49
Project 1 49 Macromedia Studio Step-by-Step FIGURE 4-2: Instance of the countdown.swf graphic
50
Project 1 50 Macromedia Studio Step-by-Step FIGURE 4-3: Four instances of the countdown graphic appear at one-half second intervals along the Timeline
51
Project 1 51 Macromedia Studio Step-by-Step Animating Symbols with Motion Tweens Effect: filmstrips appear and brighten Use tweening to create effect Overview 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
52
Project 1 52 Macromedia Studio Step-by-Step FIGURE 4-9: Motion tweens are represented by light blue shading
53
Project 1 53 Macromedia Studio Step-by-Step Animating Text with Motion Tweens Text blocks: event and location/date Overview 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
54
Project 1 54 Macromedia Studio Step-by-Step FIGURE 4-12: Location and date text
55
Project 1 55 Macromedia Studio Step-by-Step Creating Shape Tweens Two types of shape tweening –Motion: based on moving shape –Morphing: based on altering shape Objective: convert curtains to borders Overview 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
56
Project 1 56 Macromedia Studio Step-by-Step FIGURE 4-24: Mid position of the orange curtain animation
57
Project 1 57 Macromedia Studio Step-by-Step FIGURE 4-27: Green and blue inner border
58
Project 1 58 Macromedia Studio Step-by-Step 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
59
Project 1 59 Macromedia Studio Step-by-Step Controlling the Timeline with ActionScript Actions panel: interface to ActionScript Objective: stop movie from looping Overview of tasks –Insert actions layer above border text Insert a keyframe in frame 61Insert a keyframe in frame 61 –Expand Actions panel –Click Global Functions –Expand the Timeline Control category –Double-click the stop action
60
Project 1 60 Macromedia Studio Step-by-Step FIGURE 4-30: Actions panel
61
Project 1 61 Macromedia Studio Step-by-Step Lesson 5 Objectives Define Accessibility Make a Flash document accessible
62
Project 1 62 Macromedia Studio Step-by-Step 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
63
Project 1 63 Macromedia Studio Step-by-Step 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
64
Project 1 64 Macromedia Studio Step-by-Step 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
65
Project 1 65 Macromedia Studio Step-by-Step FIGURE 5-1: Accessibility panel for the entire document
66
Project 1 66 Macromedia Studio Step-by-Step Lesson 6 Objectives Preview a Flash document before publishing Adjust publish settings for a Flash document Publish a Flash document for the Web
67
Project 1 67 Macromedia Studio Step-by-Step 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
68
Project 1 68 Macromedia Studio Step-by-Step 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)
69
Project 1 69 Macromedia Studio Step-by-Step 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
70
Project 1 70 Macromedia Studio Step-by-Step FIGURE 6-1: Formats tab on the Publish Settings dialog box
71
Project 1 71 Macromedia Studio Step-by-Step 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
Similar presentations
© 2025 SlidePlayer.com Inc.
All rights reserved.