JW Player: Skinning in Flash CS4

The JW Player now includes skinning, through a separate SWF file that contains all graphical elements and layout. Custom skins are easy to publish: with just one variable in the embed code, one can assign a skin to the player. There's already a string of them available. This tutorial explains how to create your own custom skins.

Note: Skins are no longer able to be compiled in Adobe Flash CS3. Please use CS4 instead.

(Note: Wes Coughlin from Vidlivery.com has also created a screencast on skinning the player.)

Workflow

Not a single line of code is needed to design your own skin. All the player's functions are attached to the skin automatically through name conventions. The play button, for example, should be called playButton (case-sensitive). Naming it Playbutton or playButtonRed will break the convention and the button will not work. A complete list of al these names and their nesting structure can be found here.

You should design your skins in Adobe Flash (there is a free one-month trial). If Flash seems a bit overwhelming, or if this is your first skinning attempt, just download an example skin and edit each button individually to your liking. As long as you don't change any of the instance names or break up the symbols, your end product will work just fine!

Many of the elements in the example skin are optional (e.g. the elapsed/remaining time or even the entire playlist). If you leave them out of the skin, it will not affect the general use of the player. However, issues can arise when you leave out functionally-necessary pieces, such as a display (for the video to be shown) or a play button. The list with skinning elements shows which items are required and which are not.

Also note that, for switches, there are usually two buttons. Including only one will break the skin. For instance, having only a button named muteButton isn't enough - you must also have a second button labeled unmuteButton. The player code will automatically hide whichever is appropriate, but both must be present in your skin. Same goes for fullscreenButton and normalscreenButton or playButton and pauseButton.

When you export a skin SWF from Flash, you must export it as Flash 9 / Actionscript 3. If you export it for earlier flash or actionscript versions, the skin will not work.

Stretching

The JW 4.0 Player is designed to easily stretch out to any size necessary. The timeSlider automatically fills the space left-to-right as the player stretches. Additionally, the timeSlider will also fill space left by missing buttons (example: the prevButton and nextButton when no playlist is present). To ensure that the skin stretches correctly, the player requires two things:

First, all of your button symbols must be anchored in the top left (see the image). The anchor is visualized by the target mark ( + ), which must be in the upper left of all the elements within the player:

Second, your buttons and sliders should not overlap one another in the controlbar. Any overlap will stop the stretching functionality. Also, all of your elements must be horizontally laid out, since the player scans and aligns all items from left to right, regardless of whether they are in a horizontal line or spread out on a vertical axis. In the image below, the stretching functionality of both setups will be exactly the same:

9-Grid Scaling

When scaling your skin, you might find that your design is effected in unintended ways. For instance, at larger sizes subtly rounded ends of a timeSlider can become elongated and awkwardly distorted (as the whole bar is stretched, including the rounded ends). Thankfully, Flash includes a fix to this annoying issue. If you right-click (or Option click) on a symbol in your library (example: the back symbol -- which is the background for your conrolbar) and choose Properties from the context menu, you'll get a Symbol Properties pop over. Click Advanced in that window, and you'll see something like this:

Down at the bottom, note the phrase "'Enable guides for 9-slice scaling. Click the check box to enable that, and press OK. Now, double-click the playbar's Back symbol (or choose to edit it from the Library palette), and you'll see the 9grid scaling guides:

Those dashed lines provide you with the ability to tell Flash what part of the symbol to stretch. Anything inside the rectangle created by those four lines is what Flash will stretch when necessary. Anything outside the rectangle will not stretch (and will just sit, unaltered, on the ends of the stretched section) - it's a safe zone for rounded edges and the like.

Rollovers

Adding rollover states to liven up your buttons is easy for anyone with the slightest knowledge of Flash. All playbar buttons, the timeSlider and volumeSlider in the controlbar, and the playlist scroller and button can contain rollover frames.

Rollovers are easy to implement: instead of using a 1-frame movie clip for each button (or other) symbol, use a multi-frame movie clip for the buttons you want to add rollovers to. Within each movie clip, label your "'original"' (non-rollover) button state frame as "out" (in the Properties box), and your rollover state frame as "over." These two frames are played back when rolling over / out of buttons (they start PLAYING, so make sure to issue a stop() command either on the frame, or on a second frame right after your over / out frames too).

Similarly, a playlist has three states: out, over and active (when it contains the currently playing item). You can edit these in the exact same way as buttons.

Alternatively, you can also allow your users to set rollover colors through the color flashvars. The only prerequisite is that each button in turn should contain an icon Movieclip. This icon will be colored to the lightcolor on rollover and back to the frontcolor on rollout. All example skins have these icon instances already set up.

If you define your colors in your skin, do NOT define any of the color flashvars in your embed code, since these will overwrite the colors you selected yourself'''

Pre-compiling a skin

If you have a basic understanding of Actionscript, you can compile a skin into the JW Player. This method is extremely useful if you want to upgrade a whole website at once, as you don't have to edit the embed code. Here's how to do it:

• First, download the latest source code from the repository.
• Second, open both the player.fla from the source code and your skin FLA with Flash.
• Third, delete the player Movieclip from the player.fla and copy paste the player Movieclip from your skin to the player.fla. If Flash questions you on a library conflict, choose Replace existing items.
• Last, publish the player with your skin by choosing file » publish (or by pressing SHIFT-F12). That's it!

The player now uses your skinning by default. Overwrite the player.swf on your website with the new one and you're set.

Submit your skin

When you’re done testing your skin and would like to get people start using it, submit your plugin for the LongTailVideo Addons section. Once approved, your skin will be listed and available for download on our site. Since we have about 100.000 visits a day, your skin will instantly reach an audience of millions!

If you have any questions about building skin, please visit the skins section of our forum.

---