Making Flash Intros 4 - Streaming and Preloading Efficiently

The biggest mistake of most first-time Flash intro makers is failure to use one of the most important features of Flash - STREAMING. This, combined with poor optimization of graphics and sounds, results in many viewers who automatically start looking for "Skip Intro" button (which in many cases isn't even there) or simply leave the page with no desire to come back.

When it is a Flash interface we are talking about, then a complete download might be necessary before the opening sequence is shown, - although loading the main interface framework first, with individual sections getting loaded on user demand later is a better option. But with intros or animated stories, there's really no reason for your viewers to have to wait until the whole thing downloads. Of course sometimes they might want to wait, if their connection is very bad and they want to make sure that the playback won't be interrupted - but it's their choice, and it's preferred that you give them that choice. And for that, you have to know how to stream.

1. What is streaming?
2. Flash movie download order
3. Optimizing individual frames - your main goals
4. Organizing the timeline of your movie
5. Size report
6. Bandwidth profiler
7. Frame by frame graph
8. Streaming graph
9. Preloading

What is Streaming?

First of all, you have to understand what streaming is and why it is so important in Flash design. "Streaming" is what happens when data is transferred from one computer system to another through a network connection of some kind in a continuous fashion. Here is a very simplistic description of how it happens: the data isn't transferred in one piece all at once, - instead, on the sending end, it's broken into chunks (packets) which are sent over the pipe one by one, and then re-assembled on the receiving end (hence the term "data stream"). Everything that you download off the Internet, for example, is streamed to your computer. "streaming file format" means that some playable file can begin playing as soon as first portion of its contents is delivered to the destination computer, before the whole file is downloaded in its entirety. Flash published movie file format, SWF, is a streaming file format, meaning that only a small part of it has to be downloaded initially for it to begin playing. While this small loaded part is being viewed, the rest of the file can be quietly downloadeded in the background. When the end of the first small part is reached, more data had already been downloaded and is now available for viewing. While this new part is being viewed, more data gets downloaded, and so on - until the file is downloaded completely.

Flash Movie Download Order

It is important that you also understand the way a Flash .SWF is being transferred onto the viewer's computer. The following things are being sent:

1. Timeline
   Timeline includes the frames with all the attached ActionScript code, and also anything that is not a symbol in the Library (such as text and shapes that were not converted into symbols). Timeline is transferred first.
2. Library contents
   Library contents include all the symbols, sounds, and bitmaps that are used in the movie (things in the Library that aren't actually used in the movie are not included in the published .SWF). Library contents are transferred second, after Timeline.

Contents of the Flash movie file are transferred in FRAME-BY-FRAME order. What that means is that any symbol, sound, or bitmap that is used in the 1st frame will go first. Then anything that is used in the 2nd frame wil be sent. Then the 3rd frame, and so on, until all the Library contents that are used in the movie are downloaded. The contents are transferred "in order of appearance", so to speak, - just like the cast of a movie is listed sometimes in the end credits.

You should also be aware of the way layers of the movie are transferred to a viewer's computer. Let's say that frame 1 is currently being transferred, and the movie has several different layers, all of which have something in frame 1. The important thing to know here is that the Flash player will show contents of frame 1 on every layer as soon as frame 1 for that layer is downloaded, without waiting for other layers. So what is the order in which the layers will be transferred to the viewer's computer? It is actually up to you to set it, and here's how you do it - go to File menu and click on Publish Settings (or press Ctrl+Shift+F12), open Flash tab. You will see the Load Order drop-down list, with 2 available settings, "Bottom Up"and "Top Down", with "Bottom Up" being default setting. These are pretty much self-explanatory - "Bottom Up" means that frame contents will be loaded and shown starting from the bottom layer and going up, and "Top Down" means that frame contents will be loaded and shown starting from the top layer and going down. Whatever element you want to appear soonest, make sure that it is placed on the layer whose frames are going to be downloaded first.

This is important, because you can control precisely the order in which your movie contents are going to appear on the screen in the very beginning of your movie. This is very useful when making preloaders.

Optimizing Individual Frames - Your Main Goals

According to the above, we can immediately make the following conclusion about the very first frames of the movie - in order for anything to show on the screen right away, the contents of the first frames should download as quickly as possible. To achieve that, you have to make the contents of your first frames very light size-wise. Your main goals for the beginning of your movie are these:

1. Optimize the content of the first frames of the movie for minimum size, so that they download almost immediately and playback can begin.
2. While keeping goal #1 true, make sure that the sequence of these "light" frames lasts long enough, so that when these frame finish playing, enough of the following content has already been downloaded to continue playback without pausing to wait for further download.
3. While keeping goals #1 and #2 true, keep the audience interested.

Yes, that's right, - what you need to do is to drag the beginning of your intro mercilessly so content that follows has time to download, while at the same time keeping your viewer's interest. True, it is pretty hard, - even harder, in fact, if your intro uses sounds from the very beginning. If you've already read sound synchronization guide, then you know how sounds set to "Stream" are stored inside a Flash movie file and downloaded on the viewer's machine. Because of the fact that sounds set to "Stream" don't need to be downloaded completely in order to begin playing, it's better to use sounds set to "Stream" in the very beginning of your movie. Your graphical elements also must be optimized - to see some helpful tips on that, check out file size optimization guide.

As for the rest of the movie, your pain and suffering aren't over yet and the same rule applies, - for the movie to stream successfully, the frames should download faster than they are played. Therefore, contents of every individual frame should be as small as possible. So optimize your graphics and remember the way your sound is stored in the movie file. And don't forget that your framerate is an important factor here - the higher it is, the faster the movie plays, and the faster frames should download.

Organizing the Timeline of Your Movie

Now, let's talk a bit about the way the intro timeline is organized. A Flash intro is usually one big timeline with a bunch of keyframes and tweens on it. Most people divide it into several scenes, usually according to the major events in the intro or viewpoint changes. Dividing a long Flash movie into scenes can be good for organizing content on many layers and keeping the timeline neat, - because when you have all of layers on the same timeline and your animation is complex, it can be pretty hard sometimes to find that specific symbol instance that you need. It's up to you whether you want to use scenes or not - contents of separate scenes are put together into one long timeline when you publish your movie, so there is no actual division into scenes inside of a published .SWF, and they don't affect the way your movie is played.

For the purposes of better streaming it is recommended that all of your tweening happens on the main timeline instead of placing tweens inside the participating symbols. Here is why - a single frame within a motion tween adds 12 bytes to the published movie size, or even more if scaling or skewing transformations are also applied. Consider what happens if you create the motion tween inside a graphic or a movie clip symbol and then put this symbol on the main timeline - the size of the tweened symbol, plus the size of all the frames in the tween, are added to the size of the single frame on main timeline where this movie clip occurs. This frame will not be drawn until all of its contents is downloaded. On the other hand, when you make your tween happen on the main timeline, the size is distributed in the frames over the range of the tween, allowing for smaller frame sizes and thus smoother streaming. Also, with all the tweening happening on the main timeline you can see what exactly is happening at any moment in the intro by moving the playhead and have much easier control over timing of events, without having to go into timelines of the graphics or movie clips to adjust the animation inside.

There's one exception to that, a case when it's more advantageous to use animation within movie clips or graphic symbols, - and that's when the same animation sequence has to be repeated several times. Let's say that you have the same tween that you need to repeat 20 times in a row. If you do these 20 cycles on the main timeline, arranging your keyframes and creating motion or shape tweens 20 times, the size this adds to the published movie will be about 20 times larger than a single graphic with one animation cycle inside. In this situation it is better for you to make a separate graphic symbol, make a single cycle of the animation inside it, put it on the main timeline, and give it enough frames to loop itself 20 times (unlike movie clips, graphics are dependent on the main timeline and will loop for only as many frames as you give them on the layer where you've placed them. If you want to control your animation regardless of what happens on main timeline, place it into a movie clip instead of a graphic and control it with ActionScript there). To calculate how many frames you'll need to give a graphic to repeat a certain number of times simply take the number of frames in the single animation cycle and multiply by the number of times you need it to repeat. In most other situations use static graphic symbols and tween them on the main timeline.

Size Report

To find out how much any one of your individual symbols, sounds, and fonts adds to the size of the movie, you can use size report. Size report is simply a text file with the same name as your movie FLA but with TXT extension, and it provides you with a lot of detailed information on your movie frames and your Library contents. Size report isn't made by Flash by default. To make Flash generate it every time your movie is published, go to File menu and click Publish Settings or press Ctrl+Shift+F12 while in Flash authoring environment. When Publish Settings window appears, click on Flash tab, and then check "Generate size report" checkbox. Now every time you publsih your movie or test it inside Flash, the size report will be generated inside the same directory where your project FLA is located. Now, let's take a look inside...

The first section of the size report shows you detailed information about frames of your movie:

The columns show the following info:

• Frame # - shows frame numbers as counted within the whole movie.
• Frame Bytes - shows the size of the frame contents
• Total Bytes - keeps the total of the movie size, increased with each frame by that frame's size.
• Page - shows you the name of the scene and frame numbers as counted within that scene (when you add a scene to a movie, the frame count in the new scene starts with 1).

After the frame-by-frame breakdown is finished, you are shown the scenes summary:

The columns show the following info:

• Page - shows the name of the scene
• Shape Bytes - shows the size of all vector graphics in a scene that were not converted to symbols
• Text Bytes - shows the size of all text in a scene that wasn't converted to symbols

Next, the size report shows detailed information about all the symbols used in the movie:

The columns show the following info:

• Symbol - shows the name of the symbol in the Library
• Shape Bytes - shows the size of any vector graphics that were used in the symbol
• Text Bytes - shows the size of any text that was used in the symbol

Note: you will see "0" ("zero") values for shape bytes and/or text bytes for some symbols. Do not be surprised. Values are given here only if graphics and text used in the symbols were not other symbols themselves. That means that if I make a new graphic symbol "duh" and type some text in it, and then make a new movie clip "blah" and put the graphic symbol "duh" in it, the size report will not show anything for text bytes for "blah" symbol - because that text is already made into a symbol itself.

After the symbols, we see the information on the bitmaps used in the movie:

The columns show the following info:

• Bitmap - shows the name of the bitmap in the Library
• Compressed - shows the size of the bitmap with compression applied
• Original - shows the size of the bitmap uncompressed
• Compression - shows type of compression and quality setting used

Next, we arrive to the global sound settings and individual sounds information:

First 2 lines are the global settings for the sounds set to Stream and sounds set to Event (as selected in Publish Settings, on Flash tab). These settings apply to any Event sounds that have their individual compression settings set to "Default", and to ALL Stream sounds. The columns after that show information on individual sounds set to Event. Sounds set to Stream are not listed here, because individual settings for sounds set to Stream don't matter - ALL of them are encoded using global settings. The columns are as follows:

• Sound Name - shows the name of the sound in the Library
• Bytes - shows the size of parts of the sound used in the movie, compressed
• Format - shows the compression method and settings used for that sound

And finally, you get details on the fonts you've used:

The columns show the following info:

• Font Name - shows the name of the font you've used
• Bytes - shows how much the font outlines for the characters from this font added to the movie size
• Characters - shows all the characters that you've used for that font whose outlines were included.

As you can see, the size report is a useful tool for finding out how much a specific symbol, sound, or font adds to the size of your movie - which is helpful when optimizing your movie. Size report is also useful when you suddenly get a large increase in file size while making your movie and want to find out just where exactly those "pleasant surprise" bytes are coming from. You can also use it for checking size of individual frames, however, you have a much better tool for that, and that tool is Bandwidth Profiler.

Bandwidth Profiler

To see how large your frames are and where potential pauses might occur during streaming, your best tool is Bandwidth Profiler. It also allows you to test how your movie streams on connections with different bandwidth.

Choose Test Movie from Control menu in Flash, or press Ctrl+Enter. Your movie will be published, and you will be shown a testing window. You will see a preview of your movie which will start playing right away. Go to View menu and make sure that "Bandwidth Profiler" is checked, or press Ctrl+B. On top of the screen you will see a bandwidth profiler, which would look something like this:

The left side of Bandwidth Profiler gives you information on:

Movie:
• Dim - pixel dimensions of the movie
• Fr Rate - your set framerate
• Size - file size of the movie
• Duration - duration of the movie, in frames and in seconds
• Preload - number of frames that should be preloaded before the movie can be started from the beginning and continue to play without pausing to download data (also given as amount of time that would elapse if that number of frames would play). Doesn't take the value of the sound buffer in consideration, as far as I'm aware. Very useful for making preloaders.

Settings for bandwidth you're currently testing:
• Bandwidth - bandwidth you are testing, shows "real world" figures for bytes per second that connection you've chosen can transfer, and also how many bytes are allocated to each frame (calculated according to your set framerate). To change this setting, go to Debug menu and select the connection speed you'd like to test. As you will see, default choices already set in Flash are 14.4, 28.8, and 56.6 modems, but you can change those or add your own - just click on "Customize" in the same menu, name a new item and set required bitrate.

Current state of the movie you're testing:
• Frame - frame currently being shown on the screen. Shows frame number and frame size in kilobytes and bytes.
• Loaded - shows how much of the movie would have been "downloaded" at this point of playback at the connection speed you're testing, in percents, frames, kilobytes, bytes, and small kittens.

The right side of Bandwidth Profiler shows you:

• Frame graph - shows all frames in your movie represented by vertical frame bars. The higher a frame bar is, the larger this frame's size is. Click on the frame bar and the movie will go and stop on that frame.
• Playhead, which moves along the frame numbers on top as your movie plays (you can drag it to go to a specific frame)
• A thin red streaming line that represents bandwidth for the connection that you've chosen to test. If any frame bar is higher than the streaming line, then that frame can cause a possible pause during playback, when the movie stops to download the contents of this frame. Such frames are the frames whose contents you should take a look at and attempt to optimize.

OK, so how you test how well your movie will stream using Bandwidth Profiler? Very simple. Press Ctrl+Enter, or go to View menu and click on "Show Streaming". Your movie streaming simulation will begin, it will start playing, and you will see a new thing show up on top of Bandwidth Profiler - a green streaming bar:

The streaming bar indicates how much of your movie has been downloaded, at any point during playback. The end of the streaming bar is always at the frame which is being downloaded. It's just like the playhead, only it shows the downloading process. As I've mentioned before, the playhead moves along the frame numbers, indicating which frame your movie is currently showing. As long as the streaming bar is ahead of the playhead, your movie is streaming well and enough data is being downloaded for the playback to continue without any interruptions (the image above shows a situation when the movie is streaming without interruptions... so far). However, if the playhead catches up with the end of the streaming bar at any frame, the movie will pause to download the contents of that frame. That is an indication that contents of that frame need some optimization. What you should try to achive is the playhead NEVER catching up with the streaming bar!

Another feature of Bandwidth Profiler that helps a lot during optimizing streaming of a Flash movie is a choice of different frame graph views. Click on View menu, and you will see that you have 2 choices - Frame By Frame Graph (shortcut is Ctrl+F) and Streaming Graph (shortcut is Ctrl+G). Let's see how they look like and how they can be useful...

Frame By Frame Graph

Frame By Frame graph is the default view of the frame graph in Bandwidth Profiler. It shows all the individual frames as vertical bars, located directly under their number on the timeline above.

In this view, you can check how big any of the frames really is. The higher a frame bar is, the bigger the size of the frame it represents. The exponential power of 2 scale in Kilobytes on the left gives you an idea about the size of the frame contents. To see the exact frame size, click on the frame bar. It will turn green, indicating that you've selected this frame, and the movie will go and stop at that frame. On the bottom of the left side of the Bandwidth Profiler, under "State", you will see the frame number and the exact size of that frame in kilobytes and bytes.

The red streaming line that represents the bandwidth of the connection you are testing helps you find potential "problem frames". If a frame bar is lower than the streaming line, then the frame it represents can stream real-time on that connection without pauses. If a frame bar is higher than the streaming line, then that frame is too large to stream real-time at that connection speed. It means that the movie might stop at that moment to finish downloading data it needs to draw that frame. This helps you see your potential pauses right away.

I say"potential" because in Frame By Frame view you can't be absolutely sure whether the movie is going to pause at a large frame. If there are some very small frames before the large frame, then the large frame's contents will start downloading long before the movie reaches it, so there might actually be no pause. To know for sure where the movie is going to pause for downloading, you need to use the Streaming Graph.

Streaming Graph

Just like Frame By Frame graph, Streaming graph also shows you the frame bars, the playhead, and the size of the frames. However it differs from the Frame By Frame graph in several important ways.

First of all, Streaming graph shows you how much time it will take for each frame to be downloaded. As you can see in the image above, the frames bars are not located under their corresponding frame numbers, but instead stacked upon one another in accordance with the time it takes for these frames' contents to download. This time is measured in frames played, at the framerate you set for the movie. When you see several frame bars stacked upon one another under a single frame number, it means that the frames these bars represent are very small and will download while this single frame is being played back. On the other hand, when you see a frame bar drawn over several frame numbers, that means that the frame this bar represents is large and will download while those several frames are played back. For example, as the graph above shows, the contents of frame 99 are downloaded while frames 27 to frame 38 are played back.To find out more about the frame a bar represents, click on that bar. It will turn red, and information about the frame (number and size) will be shown on the bottom of the left side of Bandwidth Profiler.

Often you might see some black bars among the usual dark- and light-gray ones. Those aren't special frames, they are multiple frame bars for really small frames, stacked very close together. If you resize Bandwidth Profiler by pulling its edge far down, you can see them. These frames are so tiny that their frame bars simply blend together into black.

Second major difference from Frame By Frame is that Streaming Graph shows you EXACTLY where your movie will pause to download frame contents and which frames are the problem. Take a look at the picture again. You can see that frame 20 is currently selected. From the graph you can find out that contents of frame 20 start downloading when frame 9 is being played. However there isn't enough time for it to finish downloading - hence you can see that the end of frame 20 is shown sticking out above the streaming line under the frame number 20. That means that there's going to be a pause at that connection speed when the movie reaches frame 20 - GUARANTEED, and Streaming Graph showed you exactly where it's going to happen.

Besides just telling you exactly where the problems will occur, Streaming Graph also helps you find out what needs to be done to fix the problems. For example, to remove the pause at frame 20, you would need to either:
- optimize the contents of frame 20, or
- preload certain amount of data before you start playback, or
- insert a certain amount of low-sized frames before frame 20, so it would have enough time to download.

I've already talked about frame contents optimization, and I'm going to talk about preloaders a bit later in this guide, so let's concentrate on the 3rd solution. Here's how you can find out exactly how many frames you should insert before frame 20:

First of all, notice that the size of frame 20, shown on the bottom left side of Bandwidth Profiler, is 19408 bytes, or approximately 18 Kbytes. However, when you look at the frame size scale in the middle (the numbers that go 300 B, 1 KB, 2 KB, 4 KB, etc.), you will see that the frame bar for frame 20 is only reaching about 16 Kbytes. The part of the frame bar above the red streaming line, roughly 16 Kbytes, is the portion of the frame contents data that doesn't get enough time to download before the frame needs to be shown.

Another, a bit more precise, way to calculate how much of the frame data sticks over the streaming line is by first counting the number of frames on the graph during which the problem frame contents are being loaded before the pause occurs (11 in our case), then multiplying it by the amount of data allocated to each frame to get the amount of data loaded before the pause(300 Bytes * 11 = 3300 Bytes), then subtracting that from the problem frame size shown in the left side of the Bandwidth Profiler (19408 - 3300 = 16108 Bytes). As you can see, the results achieved are very close. Let's just stick to the 16 KB as the number we're going to use.

Now that we know that 16 KB of extra frame data causes the pause, we need to provide enough time for it to be downloaded before frame 20 is played. We know that with our current framerate and our current bandwidth each of our 24 frames per second is allocated 300 Bytes, as shown in the Bandwidth Profiler. 16 Kbytes is 16384 bytes. When we divide 16384 by 300, we get approximately 55 frames. This is the number of low-sized frames that we have to insert before frame 20 to make sure that all of its data downloads completely before the frame is shown. Just to illustrate, here's what it looks like when I inserted 55 frames before frame 20 (now frame 75). The large black bar that you see is 55 tiny-sized frames with nothing happening in them:

As you can see, there is no pause happening anymore at frame 20, the calculations were more or less precise. This particular problem is solved.

Of course, simply inserting frames like this with nothing happening in them isn't something that will help you keep the tempo of your animation or your synchronization to sound perfect. So if you are adding frames to help the movie stream well, you better add them before any major animation action starts - in the very beginning of the intro. Remember when I said that beginning has to be dragged sometimes? Well, here you go, this is the reason for it. Sometimes a good way out is to make the intro playback depending on the viewer - for example, you can put some text on the stage for the viewer to read in the beginning of the intro, put a Stop() action at that frame, and put a button on stage with a Play() action assigned to it so the viewer has to click it to continue. That way you get your necessary loading time, in a sneaky way, and the viewers will not notice because they will be occupied. Well, hopefully.

Preloading

At this point, you already know what needs to be done in order for the movie to stream efficiently. You know how to optimize your frames contents, how to use sounds SYNC mode, and how to optimize your graphics. You have learned how to detect problems using Streaming Graph, and you have learned how to give your movie enough frames in the beginning to allow more time for downloading frames that follow. However, sometimes nothing helps, and your movie simply can't be optimized enough to begin playing right away. This is the situation when you have to use that wonderful thing that everybody loves so much, called preloader.

Preloading a Flash movie means downloading the whole movie or some part of it before starting the playback. You have to understand - preloading the whole animation is NOT a necessity in most cases. Preloading the whole thing is simply not fair for your viewers, because in most cases you CAN do better than that. It just shows how lazy you are.

Set a goal - average connection speed of your audience that you want to optimize your preloading and streaming for. Then find out, using bandwidth profiler, the amount of data you need to preload before playback can start and continue without any pauses. There are 2 ways to do it:

1. the difficult, masochistic, way:
   check where your streaming graph shows pauses, take all the data that goes above the streaming line, and calculate the sum in bytes. If you want to get that amount measured in frames, divide it by the data allocated to each frame at this particular framerate and connection settings.
2. the easy, proper, way - the one you should use:
   simply take a look at the left side of the bandwidth profiler, and see what it says after the word "Preload". You are given the number of frames that should be preloaded before the movie can start and play without any interruptions. As far as I know, this number is the result of adding up all data above the streaming line and dividing it by the data allocated to a single frame - the same thing as described in the previous paragraph, except that the calculations are actually precise and are done by Flash itlself. To calculate the amount of bytes that should be preloaded, simply multiply the shown number of frames by the amount of data allocated to each frame with this particular connection (see what it says after "Bandwidth" - it should be something like "300 B/fr". Use that number.)

After you've calculated the amount of data that needs to be preloaded in order for the movie not to have any pauses during playback, set up your preloader so it only preloads that much.

Preloaders of any type always work according to the same principle - they check whether enough of the movie has been downloaded, and then do one of two things depending on the answer - direct the timeline to go and play some previous frame (and thus keep looping), or let the movie finally play further.

Here's a picture of how the simplest preloader would look on a timeline:

Our preloader is looping through frames 3 and 4 on "preloader actions" level. Frame 3 is labeled "update" and frame 4 is labeled "check". In the frame labeled "check" we have an If...Then statement which checks whether a certain condition is true and decides whether we continue looping by going back to the frame "update" or we let the movie play. Here are some examples of the properties that are checked in different situations:

• check whether the whole movie has downloaded - if number of bytes already downloaded is less than number of bytes in the whole movie, then the timeline is sent back to some previous frame and the preloader keeps looping - otherwise the statement has no effect and playback starts:
  
  if (_root.getBytesLoaded() < _root.getBytesTotal()) {
   gotoAndPlay("update");
  }
  
  
• check whether a certain amount of data of the whole movie has been preloaded - if then number of bytes already downloaded is less than the number of bytes we need to preload before we let the movie play, then the timeline is sent back to some previous frame and the preloader keeps looping - otherwise the statement has no effect and playback starts:
  
  if (_root.getBytesLoaded() < bytes_to_preload {
   gotoAndPlay("update");
  }
  
  
• check whether the movie has been preloaded up to a certain frame - if number of frames already downloaded is less than number of frames we need to preload before we let the movie play, then the timeline is sent back to some previous frame and the preloader keeps looping - otherwise the statement has no effect and playback starts:
  
  if (_root._framesloaded() < frames_to_preload {
   gotoAndPlay("update");
  }

A preloader should indicate how much of the required amount has been downloaded. It can be done in many different ways, the most commonly used ones are showing a colored bar that grows in length as the movie downloads and showing a percentage in a dynamic text field. The "update" frame in the preloader example shown in the image above is responsible for doing just that. This frame contains the actions that calculate current downloaded percentage of the whole movie and show it in a dynamic text field on the stage named "percentageDTF" (note that you have to use ".text" property of the text field instance when you write code for Flash MX and up, while in Flash 5 you would use the variable associated with the text field). Here's the ActionScript code that does the job:

percentageDTF.text = "Loaded " + Math.ceil(_root.getBytesLoaded() / _root.getBytesTotal() * 100) + " %...";

Another important task for a preloader is to provide the viewer with some entertainment while enough of the movie downloads, to keep the viewer interested. Once again, the ways it can be achieved are widely varied. You can give the viewers something to do, to read, or to play around with while they are waiting. A type of content that is supposed to keep the viewer's interest depends entirely on the audience that will be watching your movie. For example, a preloader could contain things like:

• text for the audience to read - it can be a prelogue for the story that happens in the animation, a disclaimer in case you need one, some information related to the intro or to the audience, a quote, a joke, etc.. You can make it appear letter after letter as if it was typed, fade it in, maybe even make it depend on the amount of data loaded. Just make sure that it's something that your audience will read without getting bored and that it's optimized size-wise.
  
  
• fun ActionScript experiments for the viewer to play around with - Actionscript experiments usually are very small in size and download very quickly, which is just what you need.
  
  
• basic animation that changes according to the amount of data preloaded - keep in mind that all the participating graphic elements and sounds must be very highly optimized, in order to download very quickly. If you want to use some background music, use a short music clip set to Event and loop it.
  
  
• a game of Pong - because the list can't be complete without Pong.
  

No matter which way you choose to design your preloader, remember to remove all its elements from the stage when the actual movie starts playing (unless your preloader elements are somehow incorporated into the main movie content itself) - fade them out or simply put blank keyframes on their layers . As you can see in the last image above, the "percentageDTF" dynamic field is removed from the stage by placing a blank keyframe on its level in the frame where main movie content starts.

This concludes the guide. Now you know everything you need to know to start preloading and streaming your Flash movies efficiently. Now go forth and stream, and stream well - your visitors will thank you for it.