1. 6-1 OBJ Copyright 2003, Paradigm Publishing Inc. Animating Using Symbols and Masks and Publishing Flash Movies Macromedia Flash Design & Application

2. 6-2 OBJ Copyright 2003, Paradigm Publishing Inc.  Create and use an animation in a movie clip symbol. Create and use an animation in a movie clip symbol.  Edit instances of a movie clip symbol. Edit instances of a movie clip symbol.  Create and use an animation in a graphic symbol. Create and use an animation in a graphic symbol.  Describe the differences between animating using movie clip symbols and animating using graphic symbols. Describe the differences between animating using movie clip symbols and animating using graphic symbols.  Duplicate and edit a symbol to reuse existing objects. Duplicate and edit a symbol to reuse existing objects.  Assign a name to an instance of a symbol. Assign a name to an instance of a symbol.  Stop a movie clip playback using ActionScript. Stop a movie clip playback using ActionScript.  Convert an existing animation to a movie clip symbol. Convert an existing animation to a movie clip symbol.  Create an animation using a mask layer. Create an animation using a mask layer.  Understand the test environment within Flash. Understand the test environment within Flash.  Simulate download performance for various bandwidths. Simulate download performance for various bandwidths. Performance Objectives

3. 6-3 OBJ Copyright 2003, Paradigm Publishing Inc.  Optimize a movie before publishing. Optimize a movie before publishing.  Choose appropriate Flash Player options in which to publish a movie. Choose appropriate Flash Player options in which to publish a movie.  Choose appropriate HTML options in which to publish a movie. Choose appropriate HTML options in which to publish a movie.  Use Publish Preview to view the published movie within a browser window. Use Publish Preview to view the published movie within a browser window.  Publish a movie. Publish a movie.  Describe the HTML tags that instruct the browser to display a Flash movie. Describe the HTML tags that instruct the browser to display a Flash movie.  Publish and export a movie in formats other than Flash Player format. Publish and export a movie in formats other than Flash Player format.  Publish a document as a self-running standalone movie. Publish a document as a self-running standalone movie.  COMMANDS REVIEW COMMANDS REVIEW Performance Objectives

4. 6-4 OBJ Copyright 2003, Paradigm Publishing Inc. Creating Animations Using Symbols  Advantages:  The main movie Timeline is less cluttered with layers and frames.  Movie clips provide continuous movement during the main movie and can continue after the main movie has completely played back.  Movies clips can be reused within the same movie or reused in other movies.  Reused symbols within a movie minimize file size. Animations that include movie clip symbols must be previewed in the Flash Player.

5. 6-5 OBJ Copyright 2003, Paradigm Publishing Inc. Creating Animations Using Symbols…/2 Insert, New Symbol or Ctrl + F8 select Movie Clip Behavior key a name Creating a movie clip symbol animation involves the same process as creating animations on the main movie Timeline with the exception that you are doing so in symbol editing mode.

6. 6-6 OBJ Copyright 2003, Paradigm Publishing Inc. Editing Instances of a Movie Clip Symbol drag instances of the symbol to the stage scale, rotate, position, and change color or symbols as desired

7. 6-7 OBJ Copyright 2003, Paradigm Publishing Inc. Animating Using a Graphic Symbol  The main difference between animating using a graphic symbol and animating using a movie clip symbol resides in the way in which Flash treats the symbol's Timeline during movie playback  a movie clip's Timeline is independent of the main movie and uses only one frame  a graphic symbol's Timeline must be synchronized with the main movie Timeline with respect to the number of frames that must be inserted  Graphic symbol animations cannot include sound or interactivity

8. 6-8 OBJ Copyright 2003, Paradigm Publishing Inc. Animating Using a Graphic Symbol…/2 Insert, New Symbol or Ctrl + F8 select Graphic Behavior key a name After you have completed creating the symbol, exit symbol editing mode, and insert an instance in the document.

9. 6-9 OBJ Copyright 2003, Paradigm Publishing Inc. Animating Using a Graphic Symbol…/3 insert the frames required for the graphic symbol animation

10. 6-10 OBJ Copyright 2003, Paradigm Publishing Inc. Duplicating Symbols A new symbol can be created by duplicating an existing symbol and then editing the duplicated symbol's content in symbol editing mode. right-click existing symbol and click Duplicate key a new name and change behavior if necessary

11. 6-11 OBJ Copyright 2003, Paradigm Publishing Inc. Duplicating Symbols…/2 you can also right-click an instance of the symbol on the stage and then click Duplicate Symbol assign a name

12. 6-12 OBJ Copyright 2003, Paradigm Publishing Inc. Stopping Playback of a Movie Clip Symbol Animation  Stop a movie clip playback by inserting in the same layer as the movie clip symbol either  a blank keyframe  a keyframe with new content  a keyframe with ActionScript statements that stop the movie clip

13. 6-13 OBJ Copyright 2003, Paradigm Publishing Inc. Stopping Playback of a Movie Clip Symbol Animation…/2 Assign a name to each instance of a movie clip symbol to allow you to create actions directed at a specific target object.

14. 6-14 OBJ Copyright 2003, Paradigm Publishing Inc. Stopping Playback of a Movie Clip Symbol Animation…/3 Window, Actions or F9 Follow the sequence: - Objects - Movie - MovieClip - Methods - Stop click the Insert Target button to choose the instance name for the movie clip that you want stopped

15. 6-15 OBJ Copyright 2003, Paradigm Publishing Inc. Stopping Playback of a Movie Clip Symbol Animation…/4 The event handler onClipEvent (load) { is required at the beginning of the ActionScript to stop a movie clip. Two movie clips are the target objects for the stop action.

16. 6-16 OBJ Copyright 2003, Paradigm Publishing Inc. Converting an Existing Animation to a Movie Clip Symbol An existing animation in the main movie Timeline can be converted to a movie clip symbol by selecting and cutting or copying the frames and then pasting them in symbol editing mode. Edit, Copy Frames or Ctrl + Alt + C OR Edit, Cut Frames or Ctrl + Alt + X select the frames you want to convert Edit, Select All Frames or Ctrl + Alt + A OR Edit, Paste Frames or Ctrl + Alt + V

17. 6-17 OBJ Copyright 2003, Paradigm Publishing Inc. Animating Using a Mask Layer Animating the objects on the mask layer can simulate effects during a move. create a tween or frame-by-frame animation unlock the mask layer to edit

18. 6-18 OBJ Copyright 2003, Paradigm Publishing Inc. Using the Test Environment Before Publishing a Movie  Testing is a critical component of Flash development  should be performed on a regular basis  Testing within the authoring environment is limited  cannot view movie clips  cannot test many ActionScript commands

19. 6-19 OBJ Copyright 2003, Paradigm Publishing Inc. Viewing the Movie in the Testing Environment Control, Test Movie or Ctrl + Enter OR Control, Test Scene or Ctrl + Alt + Enter -exports the current movie or scene using the default options in the Publish Settings dialog box swf file is created additional menu options

20. 6-20 OBJ Copyright 2003, Paradigm Publishing Inc. Controller Toolbar Window, Toolbars, Controller -for easy access to playback controls while conducting frequent tests

21. 6-21 OBJ Copyright 2003, Paradigm Publishing Inc. Using the Bandwidth Profiler  Bandwidth  the amount of data that can be transmitted from a server to a user's computer within a fixed time interval  usually expressed in terms of bits per second (bps)  also called the transmission rate  Broadband  connection that is capable of transmitting a large amount of data within a short period  Narrowband  connection transmits a smaller amount of data at a slower speed

22. 6-22 OBJ Copyright 2003, Paradigm Publishing Inc. Using the Bandwidth Profiler…/2 Allows you to view statistics about the movie's download performance at a specific speed. View, Bandwidth Profiler or Ctrl + B Movie statistics Frames above safety line will cause time lags. Safety line You can also choose to view the bar graph frame by frame by clicking View, Frame by Frame. indicates how long the user will have to wait after downloading starts and before the movie begins playing

23. 6-23 OBJ Copyright 2003, Paradigm Publishing Inc. Testing Using Download Speed Statistics  Flash tests download speed using estimates based on a typical Internet connection  actual download time will vary depending on the volume of Internet traffic at the time the user requests movie playback  Present research indicates 80 percent of American households are connected to the Internet using a dial up connection  means testing a movie using the 56K and 28.8 options is a minimum testing standard

24. 6-24 OBJ Copyright 2003, Paradigm Publishing Inc. Testing Using Download Speed Statistics…/2 Debug, click desired speed you can add up to three of your own customized download speed settings for testing

25. 6-25 OBJ Copyright 2003, Paradigm Publishing Inc. Optimizing the Movie  Bitmap Graphics  avoid animating bitmaps  compress to reduce file size  consider alternatives  Vector Graphics  Pencil tool lines require less space  minimize use of line types other than solid  group drawn objects  optimize curves  Gradients and Transparency  use gradient fills sparingly  an object with an alpha effect plays back at a slower rate

26. 6-26 OBJ Copyright 2003, Paradigm Publishing Inc. Optimizing the Movie…/2  Symbols  convert an object to a symbol and then place symbol instances where it needs to be duplicated  Animated Symbols  create whenever possible instead of graphic symbols  Sounds  compress to reduce file size  delete unnecessary sound effects and files  Keyframes  remove unnecessary keyframes  motion tweened frames use less space than frame-by-frame animations

27. 6-27 OBJ Copyright 2003, Paradigm Publishing Inc. Optimizing the Movie…/3  If an optimized movie file is still experiencing a time lag, consider adding a simple animation before the problem frame to provide a time buffer in which the content can be downloaded in the background.  A preloader is an animation at the beginning of a movie that keeps a user amused while content is downloaded.

28. 6-28 OBJ Copyright 2003, Paradigm Publishing Inc. Simulating the Internet Connection Speed View, Show Streaming or Ctrl + Enter -simulates a Web connection download at the specified modem speed -the streaming progress statistics are displayed in the Loaded section in the left pane of the Bandwidth Profiler

29. 6-29 OBJ Copyright 2003, Paradigm Publishing Inc. Publishing a Movie  Exporting the file makes a copy of the movie in the default drive and folder in Flash Player file format (swf) and any other formats that you specify  Exported files are then copied to a Web server and linked to a Web page  Two-step process: 1.Select the file formats and options in the Publish Settings dialog box. 2.Use the Publish command to create the files.

30. 6-30 OBJ Copyright 2003, Paradigm Publishing Inc. Choosing Publish Settings for a Flash Player File File, Publish Settings or Ctrl + Shift + F12 options

31. 6-31 OBJ Copyright 2003, Paradigm Publishing Inc. Flash Player Publish Settings Options  Version  to publish using an earlier version of the Flash Player  Load Order  set the order in which layers within the first frame are loaded as the data is streamed to the user's computer  Generate size report  to have Flash generate a text file with information about the movie  Protect from import  to make sure other people cannot import the swf file back into Flash  Omit Trace actions  to prevent Flash displaying the information from trace actions in an Output window  Debugging Permitted  to allow remote debugging of a movie while it plays over the Web

32. 6-32 OBJ Copyright 2003, Paradigm Publishing Inc. Flash Player Publish Settings Options…/2  Compress Movie  selected by default when Flash Player 6 is the version option  Password  only active if Protect from import or Debugging Permitted is turned on  JPEG Quality  drag the slider or key a value between 0 and 100 to set the default value for compressing bitmaps upon export  Audio Stream  to change the default compression options for streamed sounds  Audio Event  to change the default compression options for event sounds  Override sound settings  causes Flash to override any individual compression options

33. 6-33 OBJ Copyright 2003, Paradigm Publishing Inc. Choosing HTML Settings for a Flash Player File File, Publish Settings or Ctrl + Shift + F12 options Flash automatically generates the HTML page with the necessary tags and codes.

34. 6-34 OBJ Copyright 2003, Paradigm Publishing Inc. HTML Publish Settings Options  Template  to choose a template upon which to base the HTML code  Dimensions  to specify the values for the width and height of the movie  Paused At Start  click if you do not want the movie to begin playing until the user clicks a button  Loop  deselect if you want the movie to stop after the last frame is played  Display Menu  deselect to have the shortcut menu display only two options: Settings and About Macromedia Flash Player 6  Device Font  fonts will be substituted in text that is not animated  Quality  settings that determine the movie's playback speed and quality of images

35. 6-35 OBJ Copyright 2003, Paradigm Publishing Inc. HTML Publish Settings Options…/2  Window Mode  Window: movie plays within its own window  Opaque Windowless: other elements on the Web page move behind the Flash movie and do not show through  Transparent Windowless: other elements on the Web page move behind the Flash movie with those objects showing through any transparent areas within the movie  HTML Alignment  how to position the movie within the browser window  Scale  determines how the movie is displayed within the boundaries of the browser window  Flash Alignment  options for positioning the movie  Show Warning Messages  if you choose settings that conflict, a warning message displays that provides you with the opportunity to correct the problem

36. 6-36 OBJ Copyright 2003, Paradigm Publishing Inc. Previewing the Movie in the Browser Window File, Publish Preview click the format in which you wish to preview the movie

37. 6-37 OBJ Copyright 2003, Paradigm Publishing Inc. Publishing the Movie File, Publish or Shift + F12 progress bar indicates status of publishing process When publishing is complete, copy the swf and html files to the Web server and create a link to the HTML page to make the movie accessible from the Web.

38. 6-38 OBJ Copyright 2003, Paradigm Publishing Inc. Viewing the HTML Code  The HTML generated code created by Flash includes the commands necessary for the browser to open the Flash Player and launch the movie.  Tags are identified between angle brackets ( ).  Internet Explorer uses the tags and Netscape Navigator uses the tags.  You can open the HTML page in any text editor program such as Notepad.

39. 6-39 OBJ Copyright 2003, Paradigm Publishing Inc. Using HTML Templates Flash provides several HTML templates with the necessary code to display movies using a variety of options including detecting an earlier version of the Flash Player and providing alternative images if the Flash Player is not found.

40. 6-40 OBJ Copyright 2003, Paradigm Publishing Inc. Publishing in Other Formats File, Publish Settings or Ctrl + Shift + F12 formats -to accommodate users on the Web who might not have the Flash Player installed

41. 6-41 OBJ Copyright 2003, Paradigm Publishing Inc. Formats for Publishing Flash Movies  Flash (.swf)  to create the file that opens in the Flash Player  HTML (.html)  to generate the code that the browser will use to load and launch the movie  GIF Image (.gif)  to use as an alternative for the user who does not have the Flash Player installed  JPEG Image (.jpg)  to produce the movie as a compressed bitmap without animation or interactive frames  PNG Image (.png)  to create a cross-platform bitmap  Windows Projector (.exe)  to create a standalone copy  Macintosh Projector  to create a standalone copy  QuickTime (.mov)  to view with the QuickTime player Flash adds tabs to the Publish Settings dialog box for each format with which you have the ability to set options.

42. 6-42 OBJ Copyright 2003, Paradigm Publishing Inc. Exporting in Other Formats File, Export Movie or Ctrl + Alt + Shift + S -to export a movie to another file format without creating the HTML page

43. 6-43 OBJ Copyright 2003, Paradigm Publishing Inc. Exporting the Current Frame as an Image File, Export Image -to create an image file in another format for the current frame

44. 6-44 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you display the Actions panel? Window, Actions or F9

45. 6-45 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you display the Bandwidth profiler? View, Bandwidth Profiler or Ctrl + B

46. 6-46 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you display the Controller? Window, Toolbars, Controller

47. 6-47 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you copy frames? Edit, Copy Frames or Ctrl + Alt + C

48. 6-48 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you cut frames? Edit, Cut Frames or Ctrl + Alt + X

49. 6-49 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you create a movie clip or graphic symbol? Insert, New Symbol or Ctrl + F8

50. 6-50 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you export the current frame as an image? File, Export Image -to create an image file in another format for the current frame

51. 6-51 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you export a movie in another format? File, Export Movie or Ctrl + Alt + Shift + S -to export a movie to another file format without creating the HTML page

52. 6-52 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you paste frames? Edit, Paste Frames or Ctrl + Alt + V

53. 6-53 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you preview a published movie? File, Publish Preview

54. 6-54 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you publish a movie? File, Publish or Shift + F12 progress bar indicates status of publishing process

55. 6-55 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you open the Publish Settings dialog box? File, Publish Settings or Ctrl + Shift + F12

56. 6-56 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you select all frames? Edit, Select All Frames or Ctrl + Alt + A

57. 6-57 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you simulate download speed? View, Show Streaming or Ctrl + Enter

58. 6-58 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you test download speed? Debug, click desired speed

59. 6-59 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you test a movie? Control, Test Movie or Ctrl + Enter

60. 6-60 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you test a scene? Control, Test Scene or Ctrl + Alt + Enter

61. 6-61 OBJ Copyright 2003, Paradigm Publishing Inc. Using ActionScript and Creating Templates Coming Next