1 / 61

Animating Using Symbols and Masks and Publishing Flash Movies

Macromedia Flash Design & Application. Chapter 6. Animating Using Symbols and Masks and Publishing Flash Movies. Performance Objectives. Create and use an animation in a movie clip symbol. Edit instances of a movie clip symbol. Create and use an animation in a graphic symbol.

issac
Download Presentation

Animating Using Symbols and Masks and Publishing Flash Movies

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Macromedia FlashDesign & Application Chapter 6 Animating Using Symbols and Masks and Publishing Flash Movies

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

  3. Performance Objectives • Optimize a movie before publishing. • Choose appropriate Flash Player 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. • Publish a 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 a document as a self-running standalone movie. • COMMANDS REVIEW

  4. 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. Creating Animations Using Symbols…/2 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. Insert, New Symbol or Ctrl + F8 select Movie Clip Behavior key a name

  6. 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. 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. 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. Animating Using a Graphic Symbol…/3 insert the frames required for the graphic symbol animation

  10. 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. 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. 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. 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. 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. 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. 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. select the frames you want to convert OR Edit, Select All Frames or Ctrl + Alt + A Edit, Copy Frames or Ctrl + Alt + C OR Edit, Cut Frames or Ctrl + Alt + X Edit, Paste Frames or Ctrl + Alt + V

  17. create a tween or frame-by-frame animation Animating Using a Mask Layer Animating the objects on the mask layer can simulate effects during a move. unlock the mask layer to edit

  18. 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. Viewing the Movie in the Testing Environment OR Control, Test Movie or Ctrl + Enter 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. Controller Toolbar -for easy access to playback controls while conducting frequent tests Window, Toolbars, Controller

  21. 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. 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 indicates how long the user will have to wait after downloading starts and before the movie begins playing 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.

  23. 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. 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. 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. 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. 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. 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. 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: • Select the file formats and options in the Publish Settings dialog box. • Use the Publish command to create the files.

  30. Choosing Publish Settings for a Flash Player File File, Publish Settings or Ctrl + Shift + F12 options

  31. 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. 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. Choosing HTML Settings for a Flash Player File Flash automatically generates the HTML page with the necessary tags and codes. File, Publish Settings or Ctrl + Shift + F12 options

  34. 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. 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. Previewing the Movie in the Browser Window File, Publish Preview click the format in which you wish to preview the movie

  37. 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. 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 <OBJECT> tags and Netscape Navigator uses the <EMBED> tags. • You can open the HTML page in any text editor program such as Notepad.

  39. 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. Publishing in Other Formats -to accommodate users on the Web who might not have the Flash Player installed File, Publish Settings or Ctrl + Shift + F12 formats

  41. 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. 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. Exporting the Current Frame as an Image File, Export Image -to create an image file in another format for the current frame

  44. Commands Review How do you display the Actions panel? Window, Actions or F9

  45. Commands Review How do you display the Bandwidth profiler? View, Bandwidth Profiler or Ctrl + B

  46. Commands Review How do you display the Controller? Window, Toolbars, Controller

  47. Commands Review How do you copy frames? Edit, Copy Frames or Ctrl + Alt + C

  48. Commands Review How do you cut frames? Edit, Cut Frames or Ctrl + Alt + X

  49. Commands Review How do you create a movie clip or graphic symbol? Insert, New Symbol or Ctrl + F8

  50. 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

More Related