With the release of a new version of Flash, Flash movies on Web sites are more popular than ever. While such movies succeed in adding interactivity, animation, and information to a site, some Flash movies can become prohibitively large. After all, not everyone on the Internet has DSL or cable access. Keep in mind that many of your site visitors are still plodding along with dialup access. Although Flash does a respectable job of cutting down the size of movies for Web sites, they can still be quite large. This is bad news for your site visitors viewing your site through the aforementioned slow connections.
If you create a Flash masterpiece, put it on your site, by all means! But be considerate of your bandwidth-challenged visitors. There are two simple favors you can do for them – first, don’t make them endure a very long movie to get into your site. Most designers are aware of the “skip” link – be sure to include this link. It’s easy to do. On the same HTML page where you embed your Flash movie, place a link to the home page of your site, or any page with a Flash introduction. Call it “Skip Movie,” or just plain “Skip.”
Consider the wisdom of Flash intros very carefully. Most people who use the Web are impatient, and, if you include the “skip” link, most people will click it and never see your intro. However most will go somewhere else if they have to wait too long for the intro to load. Your efforts may be better spent improving other areas of your site, or you could place elaborate movies where they are viewable by other designers who can appreciate your prowess.
The second thing you should do for your visitors when they are faced with potentially lengthy load times is to create a preloader. A preloader helps avoid choppiness during playback in long Flash movies. While Flash movies do stream, it’s impossible to guess about things like network traffic, bad connections, slow connections, etc. when determining how long it will take a movie to download to an end user. If you create a great cartoon, you don’t want it to stop at random points while the information streams to the user’s browser. Preloaders can prevent this from happening.
The theory behind a preloader is very simple. You create three keyframes on the same layer as your movie, before the movie begins – a start frame that tests for a condition, a frame that loops back to the beginning, and a play movie frame.
Decide how much of your movie should load before it begins to play. If it’s a short movie, like an animated card, you’ll probably want to load the whole movie first. If it’s a long movie, like a cartoon, then you’ll probably want at least half of it to load before it begins to play. Keep in mind that if your movie begins playing too soon, the remainder may not stream quickly enough to the end user, and playback might be choppy. When you’ve decided how much you wish to load, insert a keyframe at that point.
What will happen is this: the movie begins to play from the first keyframe. This first frame determines if enough of the movie has loaded to begin playback, by finding out if the appropriate frame has loaded yet. If the last frame (or other selected frame, designated a keyframe and labeled) has not yet loaded, the movie returns to the first frame. Testing continues until the last frame loads. When the last frame of the movie loads, the preloader determines that it is time for the movie to play and proceeds to the third keyframe of the movie. This frame starts to play the movie.
Read through the steps that follow and see how to create a preloader using Flash 5.
To put this into practice: insert three keyframes on the same layer as your movie. These must appear immediately before the movie itself. You can label them whatever you like, but for the purposes of this article they are labeled, sequentially, as follows: TestFrame, LoopFrame, PlayMovie. Place a fourth keyframe at the end of the movie and call it LoadFrame. This frame is placed at the point where you want the movie to start to play in the user’s browser. It can be the last frame or somewhere after the middle of the movie. You may consider placing it after loading a complex graphics. To label frames, double-click on a frame in the movie and select the Frame tab. Type the frame’s label into the Label field.
Next, you will need to add ActionScript to your frames. Select the first frame (called TestFrame) and go to the Actions tab. Place the following code in the Frame Actions window:
ifFrameLoaded (LoadFrame) {
gotoAndPlay (PlayMovie);
}
You can either paste this in using Expert mode or select the actions in Basic mode. Take a look at what this does – it checks to see if the frame called LoadFrame has been loaded. If it has, it goes to the PlayMovie frame and plays it.
Now you need to add some ActionScript to the frame called LoopFrame. This is what should appear in the actions panel for this frame:
gotoAndPlay (TestFrame);
If LoadFrame is loaded, then the movie won’t reach LoopFrame. It will skip over LoopFrame and go straight to PlayMovie. If LoadFrame isn’t loaded, the movie will proceed to LoopFrame, which returns it to TestFrame and begin testing for LoadFrame again. When LoadFrame is finally loaded, the movie proceeds.
You can dress this up a little by adding a lightweight movie graphic that plays while the user waits, letting the user know what’s going on. A small “loading” graphic is a helpful touch.
If you decide to add Flash to your site, it should encourage your site visitors want to explore further, not sit there in confusion. Follow the tips in this article and your site visitors will stick around to look at the rest of your site, instead of clicking away.
Jackie Rosenberger is an editor with Murdok, Inc.
