FLVPlayback component - coding custom skin buttons

[Mark Bragg]

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

[kglad]

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

[Mark Bragg]

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]

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);

        }

    }

}

[Mark Bragg]

Thanks again kglad

So I:

• take a pre-built skin
• add a button (does this have to be a button I make rather than repurposing an existing button in the skin?). Does this have to be a button? Can it be a MovieClip?
• name the instance
• use a for in loop (is this the right way in AS3?) to inspect each element and find button reference (not 100% sure how to do this - sorry)
• use something like videoPlayer.[ref].addEventListener...

Please excuse my lack of knowledge! Thanks again for your patience.

Mark

[kglad]

actually, the easiest thing would be to not use an flvplayback skin.  just create your own skin movieclip.  then you don't have to learn anything new.

[Mark Bragg]

Thank you for posting that code. I feel I'm close to getting this sorted!! I've implemented that function and get output like (the initial number is how deep the instance is in the display list):

1 instance1

2 videoPlayer

2 0

2 instance16

3 instance17

3 instance18

2 instance19

2 instance20

2 instance21

2 instance22

1 instance23

1 instance24

1 instance25

1 instance26

1 instance27

2 instance28

2 instance29

2 instance30

3 on_mc

4 instance32

5 button_mc

5 instance33

2 icon_mc

etc. etc. etc.

However, if I add a button to the skin and give it an instance name it doesn't seem to come through in the list. If I try to target any of these names (video.videoPlayer.instance17.visible = false;) I get 1119 error (Access of possibly undefined property instance17 through a reference with static type fl.video:FLVPlayback).

If i did go down the route of creating my own skin, would the code come across for the buttons and the functionality if I wanted say for example full screen. Would this be a case of just naming and setting instances correctly? Would I need to re-layout objects for full screen?

Sorry for all the questions; it just seems so complex when all I want to do is either override existing skin button code or add a new button.

Thanks for any input, Mark

[kglad]

if you want to custom encode a particular button, pick a skin that does not have that button. 

if you want to flash to supply the code to use with a particular button, pick a skin that has that button.

[Guest]

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

[Mark Bragg]

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

[Mark Bragg]

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!!!!

[Mark Bragg]

So...for anyone that's interested, my final solution was;

1. I chose a pre-built skin that included a button that I didn't want to implement.
2. I gave that button an alpha of 0 - making it invisible but keeping it in situ.
3. I exported the skin and used that skin as my FLVPlayback skin.
4. In my project I created a custom button in the same style as my skin.
5. At runtime, I instantiated this button, positioned it over my alphaed skin button ensuring it was in the correct place, then added a mouse event listener to it to run my custom button code.
6. I had to add videoPlayer.fullScreenTakeOver = false; so that my custom button would remain in place and accessible when the video was viewed full screen.

This last point unfortunately means the entire stage is scaled to full screen rather than just the video. In my specific case, because my video takes up a large proportion of the stage, this works fine.

Thanks to kglad and QlipMedia for their help. Would've given up without it 🙂