Skip to main content
M
Mark Bragg
Participating Frequently
May 10, 2013
Question

FLVPlayback component - coding custom skin buttons

  • May 10, 2013
  • 2 replies
  • 2488 views

Hi

I have an AS3 FLVPlayback component (2.5.0.26) with a custom skin. I have in fact just taken one of the pre-built skins and changed the artwork on one of the buttons (the 'backButton' in this case) to suit. I can trigger a function in my code when this button is pressed using:

videoPlayer.backButton.addEventListener(MouseEvent.CLICK, back30SecondsButtonClicked);

where videoPlayer is my instance f the FLVPlayback component, backButton is the button in the skin I'm targeting and back30SecondsButtonClicked the function which runs on clicking the button.

This works fine and the video seeks back 30 seconds.

However...the built in code for, in this case, the backButton executes before my custom code, so the video jumps back to the start of the video, then seeks to the correct place. This therefore flashes up the first few frames every time this button is pressed.

Is there any way of either:

  • stopping the pre-built skin button code from running? I just can't seem to find where this code is hiding and am not convinced it'll be editable, or
  • creating a new button in the skin and targeting it in my code. I've tried but only seem to recognise the pre-built controls and names, such as backButton, pauseButton, muteButton etc. Want to create a back30Button instance and trigger function from here.

The second option is preferable as may add other buttons and don't really want to mess with core functionality code if I can help it.

Any help or nudge in the right direction would be greatly appreciated.

Thank you, Mark

This topic has been closed for replies.

2 replies

A
Anonymous
May 15, 2013

Hi Mark,

I have created something like this a while ago. You can try this:

  • You can use the skins provided by flash without any code changes
  • Create a button/movie clip in library of the flash file where you are loading a video and skin
  • You can then create a child of the button in library and overlap if on the back button, code will be something like this:

          var rewind_mc:rewind_mc = new rewind_mc(); //library movie clip

          flvPlayBackComponent.backButton.parent.addChild(rewind_mc);

          rewind_mc.x = flvPlayBackComponent.backButton.x;

          rewind_mc.y = flvPlayBackComponent.backButton.y;

          rewind_mc.addEventListener(MouseEvent.MOUSE_DOWN,OnMouseDown);

          rewind_mc.addEventListener(MouseEvent.MOUSE_UP,OnMouseUp);

This is a quick fix and you don't have to create custom player for this. HTH

M
Mark BraggAuthor
Participating Frequently
May 21, 2013

Thank you for th reply QlipMedia.

Unfortunately when I try this I get a 1009 error; null object reference on backButton. I have got a back button in the pre-built skin I'm using and the code does turn blue !!

EDIT: My fault! This does move a custom button over the skin back button. I tried to reference the backButton before the video READY event had triggered.

Struggling to understand how this all fits together. Is the 'skin' attached to the plvplayback component? Is there any way to get a reference to get into this skin?

Thanks again

M
Mark BraggAuthor
Participating Frequently
May 22, 2013

Another point to note is how this translates when video is played full screen. Unfortunately, this creating and positioning of custom buttons doesn't seem to work when video is played full screen.

Massively frustrating how difficult this seemingly simple task is. May have to create complete custom skin to get round this. Have spent more time on the video playback component than the rest of the project put together!!!!

kglad
Community Expert
kgladCommunity Expert
Community Expert
May 10, 2013

create a custom skin that contains no button that you want to custom encode.

M
Mark BraggAuthor
Participating Frequently
May 10, 2013

Thank you for your reply.

I have created a custom skin. When you say "that contains no button", what do you mean? If I add a new button, how do I name this instance and then communicate with it via my main code?

kglad
Community Expert
kgladCommunity Expert
Community Expert
May 10, 2013

i mean start with a skin that has no buttons for which you want to add custom code.

name the button the same way you use for every other object instance named in flash.

then introspect your component instance to find the reference to your custom button.  for example:

var loader:Loader = new Loader();

loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadcompleteF);

loader.load(new URLRequest(yourflvplaybackcomponentreference.skin));

function loadcompleteF(e:Event):void{

    traceF(MovieClip(loader.content));

}

function traceF(dobjC:DisplayObjectContainer):void {

    trace(dobjC.name);

    for (var i:int=0; i<dobjC.numChildren; i++) {

        if(dobjC.getChildAt(i) is DisplayObjectContainer){

            traceF(DisplayObjectContainer(dobjC.getChildAt(i)));

        } else {

            trace(dobjC.getChildAt(i).name);

        }

    }

}

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices