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