When we first created our software we had this great idea. Wouldn’t it be cool if we could let our users change their skins out. We looked everywhere for an example, the closest thing we found was Youtube’s custom color control, nothing on the order of being able to create their own buttons and background. So then we started looking deeper into the FLVPlayback component and saw that there was already a way to swap out skins. So, stupidly, we started coding, wondering why in the world anyone else hadn’t tried this technique before. Lo and behold, we found our answer. If the skin had more buttons and graphics than what was provided by Adobe, you couldn’t easily swap it out because of how the object got named. Most of you have probably seen this problem: You create an object (either via actionscript or dropping it on the stage) and when you trace the object name you get something useless like “instance129”. When this happens, you are not able to easily swap out the clips (or buttons) dynamically because you dont always know what the objects name is going to be. We tried everything, needless to say, nothing worked, so we started from scratch.
We figured, if Adobe wasnt going to give us the control we were going to have to create a new Skin class and FLVPlayback Class, and that’s exactly what we did.
BetterFLV extends the FLVPlayback component and has a companion class called Skin that controls the skin for the BetterFLV object. This allows you to create sites that allow your users to create their own skin buttons and backgrounds.
We didnt stop there. You would think that a video player class would come with a built-in timer object, as most of you already know it doesnt, but BetterFLV does. It also contains the code for an “Embed Code” button so that you can share the video and it has a “Click-To-Seek” buffer so that you dont have to drag the handle to seek thru the video.
Best of all: It’s free.
We are releasing BetterFLV as open source (GPL)
How to use
We tried to make it as easy as possible.
- Download the code and copy Skin.as and BetterFLV.as to you project directory.
- import the classes into your flash app via
- Create an object from BetterFLV:
main_player = new BetterFLV()
- Tell the player what skin to use:
- Tell the player the source for the video:
main_player.source = "http://www.somedomain.com/some_flv.flv"
Check out the sample folder for a sample app and sample skin.
- Add Volume Slider
- Anything else we can think of
Code now move to github
Check out the code and let us know what you think.