Lesson 12.1 Optimizing Your Movie for the Web

There are a number of file formats in which you can export your Flash movie and images. We're going to focus on exporting both as a self-running executable file known as a Projector, and as a Flash Player .swf file embedded into an HTML document for the web. The Flash Player Format is the only format that retains all the interactive features of Flash. The standard Flash file format .swf means Shockwave for Flash. The Flash Player is the software that plays .swfs in the user's browsers. You can check Macromedia's page for statistics on which browsers ship with the Flash Player and what percentage of users have the Flash Player.

Before you publish your movie, it's essential to do a thorough check and be sure you've done all you can to get the file size as small as possible. This is called optimizing your movie. Use the following list to adjust your project to get the smallest file size with the best possible quality. Remember that the larger your Flash file, the longer the download time, and the less likely you'll have web surfers wait to see your site.

Back to Top

Tips for Optimization

• Use flat web safe color vector graphics whenever possible - gradients add to file size.
• Create symbols for objects that will be used more than once. Group other objects. Use the Effects Panel to color instances of symbols.
• Use motion tweening rather than frame-by-frame animation whenever possible.
• Use shape tweening sparingly. Shape tweening and shape hints require a lot of processing power.
• Use movie clips rather than animated graphic symbols.
• Use imported bitmaps judiciously. If possible don't animate bitmaps.
• Make the width and height of your movie as small as possible. - 18x18 is the smallest size.
• Use device fonts rather than embedded fonts for basic text information. Limit the font families you use for embedded fonts and select only the characters you need.
• Edit sounds to remove silent spaces. Use sound loops for background sounds or simple short sounds for button clicks and incidental sounds. Compress each sound individually in Sound Properties Window. Use mp3 if possible.
• Use solid lines rather than dotted, dashed or other special line styles. Pencil lines use less memory than brush strokes.
• Organize your work on layers to separate animated elements that change from static elements that don't change.
• Limit the use of Alpha in the Effects Panel for symbols. Try using Tint instead of Alpha.
• Optimize curves in the Modify Menu - Modify>Optimize

Once you've made the adjustments listed above, it's time to test your movie. Flash gives you several options for graphically viewing the download data for your movie in the Control Menu - Control>Test Movie. You can also press Control + Enter on your PC keyboard. When you go to the Test Movie environment, Flash opens your movie in the Flash Player and displays the movie with the swf extension. From the Flash Player Window, you can view the downloading status of your current movie through the Bandwidth Profiler.

Back to Top

Once opened, the Bandwidth Profiler displays a visual graph at the top of the Flash Player window which illustrates how much data is contained in each frame of the movie and where the movie will pause to download data based on the Internet Settings you select. The Bandwidth Profiler is only accessible from the Flash Player window. You'll notice that the title bar of the movie changes to moviename.swf and the icon to the left of the name is a pink diamond shape with the white Flash icon inside the shape. See the following illustration of the Bandwidth Profiler in the Flash 5 player. It's identical in the Flash MX Player.

Back to Top

Back to Top

The Bandwidth Profiler's top left pane reflects the properties, settings, and state of the movie based on the bandwidth settings I select.

This particular Movie's properties are:

• dimensions:400x200
• frame rate: 12/sec.
• movie size: 15KB
• total amount of frames: 35 (2.9 s)
• preload: 77 (6.4 s)

The Settings indicate that I'm currently testing for 28.8 connection which I set in the Debug Menu.

The State shows the frame that's currently displayed, the percentage of the total frames loaded, and the file size that's been loaded.

According to this display, my movie should take 6.4 seconds to download on a 28.8 modem. The movie is 15K and most of it loads in frame 1. Flash has to preload everything in frame 1 before it starts playing so the Preload time is 6.4 seconds. The top area of the upper right pane displays time with the playback head indicator currently captured at frame 26. Below the timeline is the graph which indicates how much of the movie data will be loaded in each frame at the bandwidth setting I've selected.

The red horizontal line is the Bandwidth Limit line. Anything above the red horizontal line will cause a delay in playback. The red line indicates the amount of data that will download fast enough to keep up with the movie's frame rate. Each bar represents one frame.

The bottom pane of the window is called the Test Window and displays the animated Flash movie.

The Bandwidth Profiler is actually a simulation of Flash's streaming technology. Using the Bandwidth Profiler, you can see which frames contain content that will cause a bottleneck for loading. It's a good idea to test for the lowest common denominator of your target audience. While you may think that all your users are on 56K or faster connections, there are many people in the world who still connect using 14.4. To change the download speed, go to the Debug Menu - Debug and select one of 6 settings illustrated below.

Back to Top

Flash offers simulation of 3 standard modem connections, 14.4, 28.8, 56k and allows you to specify 3 custom settings by selecting the Customize... option at the bottom of the menu. This opens the Custom Modem Settings box listing the name of the setting with the bit rate speed. The Modem Settings are set to simulate real-world data transfer rates not the theoretically possible rates. For instance most users on 56k connect somewhere closer to 48. Flash accommodates for this discrepancy.

If you return to the View Menu there are several other options which assist in the simulation of the download time. One is Show Streaming. I've selected Show Streaming in the diagram above and you'll notice a green horizontal bar in the timeline above the graph in the Bandwidth Profiler. As the animation displays in the test window the green bar grows to display the download progress so you can check the download stream to the current frame. Ideally, the green bar should be a few frames in front of the playback head frame indicator. In other words, the playback head indicator should be slower than the green download progress bar. You'll notice that the speed of the bar will change based on the connections speeds you select in the Debug Menu setting.

You'll notice in the diagram above that the Streaming Graph option is also checked. This option displays bars of alternating colors which represent the frames of the movie. The reason my frames 2 and 3 above are striped is that they represent different frames of the movie clip that is represented in those frames. Remember that movie clips operate on timelines that are independent of the main timeline.

You can click on any of the bars to display the associated frame's download information in the pane on the left. You can also click on any of the stripes in the bars to display the actual place of the movie and movie clip in the Test Window. When you click on a bar or stripe in a bar, the selected bar or stripe will turn dark red, the information about the frame will be displayed in the left pane of the window, the playback head frame indicator will jump to the proper location, and the display in the test window will illustrate that particular part of your movie.

Back to Top

This animation illustrates both the streaming graph and frame by frame graph options from the bandwidth profiler.

Clicking on a graph's frame bar highlights the frame in red for streaming view and green for frame by frame view and displays that frame's information in both the left properties pane, the timeline frame indicator, and the bottom test window.

You can switch views from Streaming Graph to Frame by Frame Graph by going to the View Menu.

Note that in this illustration to the left, I have not selected Show Streaming so there is no green progress bar in the timeline.

This is a short simple movie.

With the Bandwidth Profiler graphs, you can see where download pauses will occur for your selected connection setting. The above illustrations show a short simple movie. Most movies won't have all the elements appearing in frame 1, but often the bulk of artwork is present in frame 1 and this can cause some problems with download times. Often Flash designers will use a Preloader to entertain the viewer while the bulk of the movie is loading. A preloader is a quick-loading simple animation to distract the audience from the fact that they are basically on hold.

Before we learn more about Preloaders, explore your movie in the Test Environment by viewing all the menus and commands. Change the settings from 28.8 to 56k to 14.4 and add a few customized settings. Find out what your connection speed is at work/home/school and enter those into the customized fields.

Back to Top

Up » 12.1 Optimizing Your Movie » 12.2 Preloaders » 12.3 Publishing Your Movie