Flash also gives you the ability to export your movie in other formats, such as an animated GIF or a Quicktime video.

Transcription

1 LESSON 6: PUTTING IT ALL TOGETHER OBJECTIVES In this lesson, you ll learn to: preview your movie with the Test Movie command export your movie to a Web-ready Shockwave Flash file use Macromedia Aftershock to put your movie into a Web page CONTEXT Now that you ve completed your first animated masterpiece in Flash, it s time to share it with the world. The most common way to do this is to export your movie as a Shockwave Flash file. You can then place this file into a page on your Web site, so that visitors to your site will be able to view the movie. Shockwave Flash movies preserve all the animation and interactivity of your original movie file; yet their file size is quite small and quick to download. Once you ve saved your movie as a Shockwave Flash file, you ll need to incorporate it into an HTML movie. Macromedia makes this easy with its Aftershock program, bundled with version 3 of Flash. Aftershock will create HTML pages with all the code necessary for playing the movie. Alternatively, you can add Shockwave Flash movies to a Web page using any HTML editing program, but you ll probably need to know a little about the proper HTML code. Flash also gives you the ability to export your movie in other formats, such as an animated GIF or a Quicktime video. EXERCISES EXPORT YOUR MOVIE Before you export your movie, there are a few things you need to do to get it ready. You can use the Test Movie control to check your work before performing the actual export. Test Your Movie 1. If your movie ant.fla is not already open, go ahead and open it now. 2. Choose Control > Test Movie. 3. Flash will export the movie to a Shockwave Flash file and then open a preview window. The size of the preview may be different from your original movie. To view it at actual size, choose View > 100%. 4. You can control playback by choosing Window > Controller. Use the Controller as you normally would to stop and start playback. 3 1

2 5. Notice that all three scenes in your movie are playing: the first scene, which is a single still frame, the Animation scene, and the Marching Ants scene, which is also a single still frame. (If these singleframe scenes play too quickly for you to notice them, don t worry. You should be able to see them in step 7 below.) Flash assembles your scenes in order into a complete movie when it exports. 6. If the movie is still playing, select Control > Stop to stop it. 7. Try stepping through the movie frame by frame. Choose Control > Step Forward. To repeat, you can use the > key on your keyboard. 8. When you get to the last frame of the movie (the three small ants), choose Control > Rewind to go back to the beginning. 9. Close the Test Movie window by clicking the close box, or choose File > Close. Delete Extra Scenes The next step is to delete the first and last scenes of the movie, leaving only the Animation scene to export. 1. Click on the Scene 1 tab. 2. Select Insert > Remove Scene. Flash will ask you to confirm. Click OK. 3. Now click on the Marching Ants tab. Select Insert > Remove Scene, and confirm by clicking OK. 4. You may wish to save a copy of all the scenes you created. Select File > Save As. Name the file antmovie.fla and click Save. antmovie.fla will be your final movie file, containing only one scene. (The older file, ant.fla, still contains Scene 1 and the Marching Ant scene. You can go back to this file in the future if you wish.) 5. Select Control > Test Movie to make sure the movie is playing properly. You should no longer see Scene 1 or the Marching Ants. Close the Test Movie window when you re done. Export a Shockwave Flash File Now you re ready to export your final movie to a Web-ready interactive animation. 1. Select File > Export Movie. 2. Name the file antmovie.swf. The Format should be Shockwave Flash. Press Save to continue. 3. The Export Shockwave Flash dialog appears (Figure 6-1). The options control the image quality (JPEG Quality), sound quality (Audio Stream and Audio Event), and a few other settings. The default settings should work fine for this movie. See the Flash Help Topics for more information on customizing these options. 4. Click OK to finish. Flash will now export your movie. Figure 6-1 These settings control image and sound quality for your Web-ready movie. 3 2

3 Optimizing Your Movie for the Web If you ve ever surfed the World Wide Web, you know how important it is for Web pages to download and display quickly. The smaller the file size, the more quickly it will download to your users Web browser. Fortunately, Flash is designed to address exactly this issue. Its vector-based file format produces small file sizes, which should download quickly from your Web page. In addition, Flash is a streaming format, which means that your movie can start playing while the file is downloading. There are some strategies you can use to reduce the size of your movie file even further. These include: Wherever possible, use symbols for elements that appear more than once. Group elements where possible. Tweened animations; they are much more efficient than frame-by-frame animations. Use Optimize Curves to reduce the number of line segments and points making up your i m a g e s. Keep your graphics and colors simple. Bitmaps, gradients, custom colors, and special line types increase your file size. Less is more. Use a few short bits of sound, and keep the number of different fonts and styles to a minimum. You can experiment with different settings and strategies to speed up download times. Use the Test Movie controls to preview how your movie will look to users with slower modems. Also, check the final file size of the movies you export. PUBLISHING TO THE WEB The next step in publishing your movie to the Web is to embed it inside of an HTML document. When you do this, there are a number of special settings which control how your movie is displayed. These include whether it loops continuously, its size in the browser window, the image quality, and so on. While you can manually set these options in an HTML editing program, the Aftershock program included with Flash 3 makes the process much easier. It also adds a few nice touches to help Web users who may not have the necessary software to view your Flash movie. Using AfterShock 1. Open Aftershock. It should be installed on the same drive where you installed Macromedia Flash. 2. Choose File > Add > Shockwave. 3. Locate the file antmovie.swf and select it. Click Open. The ant movie will be added to the Files panel of the Aftershock window. 4. The Settings panel on the right offers a number of options for controlling how your movie will be displayed on the web page. Click on the S c r i p t i n g tab to begin. 5. The Scripting settings control what happens if a user wants to play your movie, but doesn t have the necessary software. In order to play a Shockwave Flash movie in a Web browser (such as Netscape Navigator or Microsoft Internet Explorer), users need to have installed the Shockwave Flash plug-in on their computers. This plug-in is available for free from the Macromedia Web site. The Scripting settings tell the browser what to do if this plug-in is not immediately available. 3 3

4 For now, leave the Scripting options on their default settings. The Static or Animated GIF option should be checked. This option will present a GIF image as an alternative to the Flash movie if necessary. (A GIF, by the way, is a standard graphic file which will display easily on most Web browsers.) 6. Next, click on the Page Layout tab. This panel controls where the Flash movie will be placed and how large it will be on the Web page. Notice that Aftershock has read in the Dimensions which you earlier set in the Movie Properties dialog in Flash. As an exercise, set your movie to play at half its original size. Type 275 into the W i d t h box and 200 into the H e i g h t box. Note that this will not change the size of the movie itself; it only changes the size which is displayed on this particular Web page. Leave the other options on their default settings. 7. Click on the Shockwave tab. These options give you more control over how the movie is played. Since you ve already arranged for your movie to loop with a frame action, deselect the Loop option. The Paused At Start option will wait for user input before playing the movie. Leave this deselected to make the movie start playing immediately. You can also change the background color of the HTML page and the movie if you wish. 8. Click on the Alternate Image tag. If you selected Static or Animated GIF in the Scripting settings earlier, you will need to decide what GIF image will be created for users who can t play your Shockwave Flash movie. You can choose either a single-frame Static GIF or an Animated GIF, which will display part or all of your movie as an animated image. The animated GIF will not have the interactivity or audio of your original movie. For this example, select Static GIF. On the left side of the Settings panel, use the F r a m e arrows to click through each frame of your movie and select a frame which will look good as a single still image. Frame 14 might work well. Change the dimensions of the GIF to match those which you set in the Page Layout options: 275 by 200 pixels. Select the I n t e r l a c e and S m o o t h options. 9. The J a v a tab contains some advanced features. You can skip this tab for now You are now ready to create the HTML page for your movie. Select File > Save Name the file antmovie.html. The file type should be HTML Click the Save button to finish. Aftershock will save the HTML file, export a GIF image, and then open your Web browser (if it finds one) to preview your new web page. You can open the file antmovie.html in any HTML editor and change it later. Figure 6-2 The Aftershock window, with settings for an alternative static GIF image. The movie frame shown here will be displayed for Web users who can t view your Flash movie. Congratulations! You have just completed the process of building an interactive animation and turning it into a Web page. See you on the Web. 3 4

5 MORE EXERCISES TO SHARPEN YOUR SKILLS Review the list of tips for optimizing movies for the Web. Which of these tips could you use on your movie? Hint: you could probably use several of these tips on the Sun layer. Go ahead and try some of them. Using Aftershock, save different versions of your movie page as antmovie1.html, antmovie2.html, and so on. Try different Aftershock settings to see how they affect the movie. If you have a Web page editing program such as Dreamweaver, HomeSite, or BBEdit, open the antmovie.html file you created with Aftershock. Review the HTML code to learn more about the proper tags for Shockwave Flash movies. For more information on exporting Flash movies to other formats, refer to the Flash Help topics. 3 5

6 NOTES: 3 6