Email the Instructor

Upload a File

Flash 1 - Beginning

Class ends Sunday June 29, at 5pm


Drag your file here to upload it.

Lesson 5 – Publishing

Perhaps the most important aspect of using Flash is ensuring the files you author can be seen by your audience, and download quickly enough to avoid frustration.

Testing the Movie

The first step in completing your project is, of course, to test the movie to ensure functionality (CONTROL > Test Movie > Test). This displays how the completed file will look and act online (note that in test mode, you can see elements of your animation that are offstage. These won't show online; everything will be clipped to the dimensions of the stage). Also not evident while testing is how the movie will stream.

"Streaming" refers to how Flash starts displaying the animation as soon as the first few frames download, rather than waiting for the whole file to download, like older video playback software did. The problem inherent with any streaming media is that the actual rate at which files download over the web varies moment by moment, and the playback could stutter if not enough frames are buffered (downloaded ahead of where the actual playback is in progress). In Flash CS6 the Bandwidth Profiler (shown below) lets you see how the file is likely to stream (this too was inexplicably removed in CC).

*In actuality, a special server is required to stream Flash or any other media, accounting for the moment-by-moment fluctuation in data transfer rate, so the more technically accurate term is "progressively download."

The Bandwidth Profiler

The Bandwidth Profiler (in Flash CS6 test the movie, and then choose VIEW > Bandwidth Profiler) graphs the "bulk" of each frame in the animation, showing you where delays are likely for a given modem speed (choose the modem speed in VIEW > Download Settings...). Each bar represents the contents of a single frame of the animation (if you choose VIEW > Show Frame-by-frame). Wherever a bar rises above the red horizontal line, there will likely be a downloading delay (the first frame is almost always problematic, as that's where a lot of artwork is first introduced). You can click any bar of the frame-by-frame bar graph to see its total kilobyte bulk (in the illustration above, the contents of frame 15 total 215 bytes).

Techniques for keeping the bandwidth of frames low include:


To combat that initial delay in the first frame, you might try creating a preloader. This is usually a simple image or animation that loads quickly, and entertains (distracts) the viewer while giving the first few frames time to buffer. Examples of a preloaders include a progress bar, or a short phrase such as "Are you ready for the coolest animation you've ever seen?" (avoid phrases like "Please wait", "Loading", or "May as well go get coffee; this is going to take awhile." These only remind the viewer that they are already experiencing a delay!)

The concept of a preloader is to introduce the large graphics used in other scenes, so they can appear onstage instantly when needed (exactly like preloading JavaScript rollover images on a web page). One approach is to sequentially load these large graphics out of sight while a simpler animation distracts the viewer.

Another approach to a preloader is to use ActionScripting to detect when the whole movie has loaded before trying to play it. This will be covered in the Flash 2 class.

To create a preloader for your missile attack movie:

  1. Open the Missile attack movie you built in the previous lesson, and ensure the city artwork you drew is defined as a symbol, and the missile is also a symbol.
  2. Open the Scene panel (WINDOW > Other Panels > Scene).
  3. Press the "+" button at the bottom of the Scene panel to add a new scene:
  4. Rename the new scene "Preloader" by double-clicking it, and move it to the top of the list (scenes play in the order they appear on the Scene panel).
  5. In the Preloader scene, create a 60 frame animation, using only 1 or 2 very simple shapes (in the example above, a crosshair and a circular shape which masks the city are the only new pieces of artwork introduced).
  6. Add a new layer called "Preloaded art", and insert blank keyframes at frames 10, 20, 40 and 60.
  7. The largest elements in the file are the launch button, the missile, the city, and the two sound files. Place the Missile symbol in frame 10 of the Preloaded Art layer, beyond the edge of the stage (so it won't be visible in the finished .swf file.
  8. Place the city in frame 20 of the Preloaded Art layer, off to the side of the stage.
  9. Place the Button in frame 40 of the Preloaded Art layer, off to the side of the stage.
  10. Select frame 60 of the Preloaded Art layer, and on the Properties panel, set the sound to Explosion, and the Sync to "Stop" (this causes an instance of the Explosion to start downloading, but not to audibly play).
  11. Since the Jet sound spans relatively empty frames in Scene 1, and it is not critical to start exactly when the button is pressed (due to it's quiet beginning) it probably does not need to be preloaded if it is set to stream. In Scene 1, select the Keyframe in which the Jet sound starts, and on the Sound panel, set its Sync to "Stream."
  12. Save the movie, and Test it, viewing the Bandwidth Profiler.

A note about using Scenes: When the SWF is compiled, the scene divisions are removed, and merged into a single timeline. There is not really a difference between using Scenes and using different sections of the Timeline in a single scene. However, most Flash developers discourage the use of scenes. Instead, different Movie Clips and even different Flash files are used to store the various states of an application, making transitioning between these states a little easier (loading SWFs can be controlled and monitored with ActionScript, and Movie Clips can be moved in and out of view with ActionScript). Scenes are just a quick and easy way to divide your Timeline into sections in the authoring environment. To navigate from one scene to another, the gotoAndPlay() action would pass two parameters: gotoAndPlay("scene", frameNumber);