Categories

A design blog powered by:

How to Save Bandwidth when Displaying Flash Video

by | Aug 17, 2007

save-bandwidth-fig1.jpg

save-bandwidth-fig1.jpg

In the last couple releases, Flash has made it very easy to put video online. From square one, there’s not much too it: with a new FLA document open, select File > Import > Import Video, click through the step-by-step Video Import wizard, and watch as your video content is effortlessly converted from a variety of file types—AVI, MOV, MPG, WMV, and more—to the format supported by Flash Player itself, which is FLV. If you use the default choices, Flash even puts a copy of the FLVPlayback component on the Stage for you, wiring it up automatically to load your new video content. The FLVPlayback component features a number of built-in skins, which provide a variety of VCR-like controls (pause/play, progress indicator/scrubber, volume slider, and the like) in numerous color schemes. Additional preferences may be configured in the Parameters tab, which becomes available when you click FLVPlayback on the Stage to select it.

As painless as the above is, there’s one snag that may cost you some unwanted bandwidth hassle. By default, the Video Import wizard sets your FLVPlayback component’s autoPlay parameter to true. This may be exactly what you want, and it does what its name implies: when the HTML page loads that has this SWF embedded, the video content plays automatically. If you’re putting together a video gallery with half a dozen Flash movies (SWF files) all embedded in the same HTML page, it’s definitely not what you’re going to want. All six videos will download at once, causing each to compete for bandwidth, and worse, will eventually play simultaneously. If these videos have audio tracks, your visitors will be in for a headache.

One solution suggests itself almost immediately. You could set the autoPlay parameter in each instance of your FLVPlayback component to false. Certainly, that would keep each video from playing automatically, but the problem is—and this is potentially bad even in pages with a single video SWF—nothing stops the FLV file from loading, even if it isn’t set to automatically begin. If a site visitor chooses not to play your video, why force that visitor to download the FLV file (and why put that strain on your server)?

Here’s another approach. Set the autoPlay parameter to false and, in addition, clear out the parameter that specifies which FLV to load. If you’re working with an ActionScript 2.0 document (see File > Publish Settings, Flash tab), the parameter will be called contentPath. If you’re working with an ActionScript 3.0 document, in Flash CS3, the parameter will be called source. In either case, find the contentPath/source row in the Parameters tab, double-click in the column that specifies the FLV file, and delete that file reference in the new window that pops up, then click the OK button.

Now it’s time to create an invisible button symbol, which you can lay overtop of the FLVPlayback component’s play button, if its skin has one, or overtop of the video area itself. You’re going to program this button to load and play the FLV file only when clicked.

1. Create a new layer in the timeline above the FLVPlayback component. Use the Rectangle tool to draw a rectangle over the video skin’s play button, or wherever else makes sense.

save-bandwidth-fig2.jpg

2. Click the rectangle to select it, and select Modify > Convert to Symbol. Choose Button from the Create New Symbol dialog box and give your symbol a name (“button” is fine), then click the OK button.

3. Select the rectangle (now a bona fide button symbol) and give it an instance name in the Property inspector. For this example, we’ll use btnStart.

save-bandwidth-fig3.jpg

4. The instance name is what puts ActionScript on speaking terms with this particular object. The FLVPlayback component will need an instance name as well, so select it and use the Property inspector to give it the instance name videoPlayer.

5. Create yet another layer, this time for your ActionScript, and click into frame 1 of that layer. Open the Actions panel (Window > Actions) and type the following code.

If your FLA document is configured for ActionScript 2.0, use this:

btnStart.onRelease = function():Void {
videoPlayer.contentPath = “nameOfVideoFile.flv”;
videoPlayer.play();
this.enabled = false;
this._visible = false;
}

If your document is configured for ActionScript 3.0, use this:

btnStart.addEventListener(
MouseEvent.MOUSE_UP,
function(evt:MouseEvent):void {
videoPlayer.source = “nameOfVideoFile.flv”;
videoPlayer.play();
btnStart.enabled = false;
btnStart.visible = false;
}
);

In either case, the ActionScript assigns a “mouse up” type event handler for the button symbol, based on its instance name. The function refers to the FLVPlayback component by way of its own instance name, telling it to load the desired FLV file and begin playing it. Finally, the same function disables the button and hides it, so as to avoid interfering with the actual play button beneath it.

But wait, why does the button need to be hidden? It’s invisible right? Well, not quite yet. Double-click the button symbol to enter its timeline. Drag the keyframe in the Up frame all the way over to the Hit frame. Doing so moves the rectangle from one of the visible frames (Up, Over, and Down) to the non-visible frame (Hit) that determines where the button is clickable.

save-bandwidth-fig4.jpg

Without any visuals in the Up, Over, or Down frames, the button becomes invisible at runtime. You still need the ActionScript as is, though, because without it even the invisible button may invisibly obstruct buttons beneath it.

From the NoD Sponsor:

Sessions Online Schools of Art and Design is an accredited online graphic and web design school offering:

Web design classes and web design Certificate Programs taught by renowned design instructors.


Share:
No items found