The Math Is Easy

Customizing FLVPlayback

// March 3rd, 2009 // Actionscript 3, Flash

Here’s a quick tutorial showing you how to beef up FLVPlayback’s SeekBar, adding in a play progress bar and a full-bar hit area to make scrubbing quite a lot easier than finding that little tiny arrow Adobe seems to think is enough.

A long time ago, I had another blog under the monicker Daniel Does Dallas. Like this blog, I didn’t do much with it and eventually a fiasco with 1&1 caused me to lose the domain altogether. Because 1&1 is a terrible, terrible company. But I digress. The only post that generated any interest was this one, so I’m reposting it here.

My job lately has been a whole lot of dealing with FLVPlayback, reskinning it, adding functionality, etc. It has been something very short of a nightmare, not counting those two nights where there really were nightmares.

I could easily spend ages writing about the things I’ve learned, but for now I’m going to restrict myself to just one component: the SeekBar. In Flash CS3, open the components dialog and drag a SeekBar component onto the stage. If you also drag an FLVPlayback component on the stage and give it a source and set its “skin” parameter to “none,” you should have a working SeekBar complete with a load progress bar (which happens too fast if you’re testing locally) and a little moving handle icon that lets you scrub through the video by dragging it.

Well, it’s not quite complete then, is it? What video player doesn’t have a play progress bar? And when scrubbing, why not allow a user to press anywhere on the entire bar as opposed to just that tiny little handle icon? It’s insane, I tell you! My only guess is that, while these things are extremely common these days, the AS3 FLVPlayback component is little more than a straightforward port from the old old AS2 version. You know, the old days when Flash players were more rugged and it was a wild and uncharted land.

Anyway, let’s add these features in.

First, we’ll add the play progress bar. Double click the SeekBar instance on the stage. You’re going to see four layers: script, assets, progress, and outline. Create a layer in between assets and progress and call it something like play progress. In here, create a movieclip symbol similar to the progress bar, but maybe a different color. The documentation is kind of vague here, but there’s something called Fullness for FLVPlayback controls. It’s intended to be used for the Volume control, and what it does is sort of has a bar follow the location of the control’s handle. So for volume Fullness is filled to the player’s volume. Simple enough, right? Well it can do the same sort of thing inside SeekBar, too, and since the handle’s job here is to indicate current play progress, Fullness becomes a play progress bar. To hook your new movieclip instance into FLVPlayback, just give your new symbol the instance name “fullness_mc” and that’s it! The one thing you’ll want to be careful of here when implementing this solution is that no matter what, you need that SeekBarHandle instance in frame 2 of the assets layer. Fullness depends on that being there, and without it everything breaks.

Next is the full-bar hit area. This is also something that isn’t very well documented, but also really easy to implement. Above your new play progress layer, create a new layer called hit area. Place a new movieclip instance that covers the entire area of the SeekBar component and give it the instance name “hit_mc”. Easy as that.

So there you have it, a super-simple solution to expanding the stock SeekBar component’s capabilities. Things will inevitably get trickier when you start connecting Flash’s video components to custom classes, but with these tricks in mind, things’ll probably go a lot smoother. I have no idea why all this information wasn’t laid out clearly somewhere before (and maybe it is and I was just never able to find it), but there you have it. Go knock yourself out.

I’ve uploaded a couple example files. One with an included FLV (990kb) for testing, and one without (328kb).