Disabling the FLVPlayback component’s controls (including seekbar!)

I’ve stumbled on another one of those “everyone wants to do it, but nobody knows how” issues in Flash: how to disable the controls on the FLVPlayback component.

After quite a bit of documentation-reading, web-searching, and forum-browsing, I’ve come up with a function for easy, on-the-fly toggling of controller-enable-ability.

with a FLVPlayback instance on the stage, add the following to your ActionScript:

 mx.video.FLVPlayback.prototype.enableButtons = function(bEnabled:Boolean){
this.skin_mc.seekBar_mc.handle_mc._visible = bEnabled;
if(bEnabled){
this.stopButton =this.skin_mc.stop_mc;
this.backButton = this.skin_mc.back_mc;
this.forwardButton = this.skin_mc.forward_mc;
this.seekBar = this.skin_mc.seekBar_mc;
}else{
this.onEnterFrame = function(){
this.stopButton = this.skin_mc.stop_mc.disabled_mc
this.backButton = this.skin_mc.back_mc.disabled_mc;
this.forwardButton = this.skin_mc.forward_mc.disabled_mc;
this.seekBar = null;
updateAfterEvent();
delete this.onEnterFrame;
}
}
}

Now, for a bit of explanation:

The first step is to simply toggle the visibility of the SeekBar handle. With it invisible, there is no way the user can use it, and this seems to be the simplest solution, rather than digging through the MC structure of a component skin and figuring out how that handle is, uh, handled. So, the bEnabled value can double as the visibility value for the handled: true (visible) for enabled buttons, or false (invisible) for disabled.

For the rest of the buttons, it’s not so simple. Users have come to expect a “ghosted” or “grayed-out” appearance for a disabled button, so simply removing them as we did with the scrollbar handle would be bad form. Luckily, the pre-made skin SWFs for the FLVplayback component include disabled states for everything, and we can use these.

Because the component skins use bitmap caching and 9-slice scaling to maximize their flexibility, simply setting the button properties to the disabled MC won’t work, and it requires a bit more of a brute-force approach to get those buttons to appear. Hence, the onEnterFrame and updateAfterEvent() commands. updateAfterEvent() forces an update of the stage, so it will make those disabled-states appear, but it only works as part of a clip event, such as onEnterFrame. So we wrap the whole thing in an onEnterFrame, and then delete the onEnterFrame function to save on processing and memory.

I should note that I developed this using the SteelExternalAll.swf skin. The documentation indicates that the skins are built using a universal structure, so it should work for any of them, but I’m not making any promises.

, , , ,

Advertisements
  1. #1 by William Haun on May 2, 2007 - 5:28 pm

    Your post was a great help but didn’t quite work. I had to add “layout_mc” to your paths. I also added the ability to disable the Volume and play buttons.

    mx.video.FLVPlayback.prototype.enableButtons = function(bEnabled:Boolean) {
    this.skin_mc.seekBar_mc.handle_mc._visible = bEnabled;
    this.skin_mc.seekBar_mc.volumeBarHandle_mc._visible = bEnabled;
    if (bEnabled) {
    this.playButton = this.skin_mc.layout_mc.play_mc;
    this.stopButton = this.skin_mc.layout_mc.stop_mc;
    this.backButton = this.skin_mc.layout_mc.back_mc;
    this.forwardButton = this.skin_mc.layout_mc.forward_mc;
    this.seekBar = this.skin_mc.seekBar_mc;
    this.muteButton = this.skin_mc.layout_mc.volumeMute_mc;
    } else {
    this.onEnterFrame = function() {
    this.playButton = this.skin_mc.layout_mc.play_mc.disabled_mc;
    this.stopButton = this.skin_mc.layout_mc.stop_mc.disabled_mc;
    this.backButton = this.skin_mc.layout_mc.back_mc.disabled_mc;
    this.forwardButton = this.skin_mc.layout_mc.forward_mc.disabled_mc;
    this.muteButton = this.skin_mc.layout_mc.volumeMute_mc.disabled_mc;
    this.seekBar = null;
    this.volumeBar = null;
    updateAfterEvent();
    delete this.onEnterFrame;
    };
    }
    };

  2. #2 by bentobenji on September 23, 2007 - 6:25 pm

    Hello,
    I was wondering if either one of you could tell me how to adapt this to work with simply removing the mute button? I’ve chosen a skin that doesn’t have the volume control so I’m not worried about that. I tried but don’t the correct instance names to insert in the paths. Where exactly did you find those names by the way? I’m not able to crack open any of the skins to see their parts.

    I’d really appreciate the advice!

    thanks,
    BentoBenji

  3. #3 by nerdabilly on September 24, 2007 - 2:09 pm

    BentoBenji – try “this.muteButton = null” or “delete this.muteButton”. Haven’t fired up Flash to actually try it, but it should work.

  4. #4 by brettemiller on February 12, 2008 - 2:52 pm

    Hi there,

    Trying to optionally disable the Closed Captioning button in a customized Captioned skin. I’ve taken your function and culled it down to my purposes:

    mx.video.FLVPlayback.prototype.disableCCButton = function()
    {
    this.onEnterFrame = function()
    {
    this.CCButton = this.skin_mc.layout_mc.fg1_mc.disabled_mc;
    updateAfterEvent();
    delete this.onEnterFrame;
    }
    }

    When I step through with the debugger, the function gets called fine and I can step into it, but the first statement, “this.onEnterFrame…” is skipped.

    Any ideas?

    Thanks,

    Brett

  5. #5 by brettemiller on February 12, 2008 - 3:15 pm

    Sorry for the previous post. Of course the debugger just skips over it — simply defining the function. Putting a breakpoint inside the function works. Now I just have to figure out why the CC button is not being disabled…

  6. #6 by badhika on March 11, 2008 - 3:28 am

    This is a very helpful post on FLVPlayback. Thanks. I have a question related to FLVPlayback buttons. I am using the seekbar component and during Ad play on the player, I need to be able to show the seek handle moving to indicate video progress, without the users being able to click or drag/seek using the seek bar handle. How do I deactivate the seekbar handle so users are not able to click on it but still see it progressing as the movie loads?

    Thanks so much.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

  • Least-Old Tweets

    Error: Twitter did not respond. Please wait a few minutes and refresh this page.

%d bloggers like this: