Skinning the JW Player

Workflow

You don’t need to write a single line of code to design your own skin; all the player's functions are activated through a standard naming convention. For example, the play button is always called playButton (case-sensitive). Naming it Playbutton or playButtonRed will break the convention and the button will not work. A complete list of all these names and their nesting structure can be found in the Wiki.

You can design your skins in Adobe Flash (there is a free one-month trial). If Flash is too overwhelming for you, or if this is your first skinning attempt, check out this example skin ("Stylish Skin") and simply 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 should 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. This list with skinning element shows which items are required and which are not.

Also note that for switches there are usually a pair of buttons; including only one of the two will break the skin. For instance, having only a single 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. The same goes for fullscreenButton and normalscreenButton.

And remember: when exporting a skin SWF from Flash, you must export it as Flash 9 / ActionScript 3. If you export it in ActionScript 2 (or attempt to optimize it for an earlier version of the Flash player), the skin won’t work.

Stretching

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

1. All your button symbols must be anchored in the top left. If you are unsure of what that means, open the Inverted Template skin. Double-click the player, then the playBar, and finally the playButton (to open the play button for editing). Notice the target mark ( + ) is located to the upper left of all the elements within the playButton movie clip itself – this is your anchor (each button or icon within Flash has one). When creating your own buttons, anchor them in a similar way.

2. Your buttons and elements cannot overlap one another in the playBar. Any overlap will break the stretching functionality. Also, all your buttons / elements must be horizontally laid out. The player looks for all player buttons / elements from left to right, regardless of whether they are in a horizontal line or a vertical axis. In the image below, the stretching functionality of both setups will be exactly the same:

Notice how the timeSlider fails to fill the space in the second setup? That’s because it's recognizing the Next button, even though the button is apparently well out of its way. This is known as one-dimensional stretching, and is a part of the player. As the JW Player evolves, two-dimensional spanning for skins will be implemented.

9-Grid Scaling

When scaling your skin, you might find that your design presents itself in unintended ways. For instance, at larger sizes subtly-rounded ends of a timeSlider may become elongated and distorted. 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 whole playBar) 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 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 9-grid 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 enlarging an image. 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.

Button Rollover States

Adding rollover states to liven up your buttons is easy for anyone with even limited knowledge of Flash. All playbar buttons, the timeSlider & volumeSlider icons in the controlBar, and the playlist scroller icon and buttons can contain rollover frames.

Rollovers are easy to implement: instead of using a 1-frame movie clip for each button / symbol, use a multi-frame movie clip for the buttons you wish to add rollovers. 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 / off of buttons (they start playing, so be sure to issue an ActionScript 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 allow users of your skin to set rollover colors (through the colors 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. The example skin has these icon instances already set up.

Pre-compiling a Skin

If you have a basic understanding of ActionScript, you can compile a skin into the JW Player. This is extremely useful if you want to upgrade a number of videos all at once, as you won't have to edit the embed code. Here's how to do it:

1. Download the source code from the JW Player Wiki.
2. Open both the player.fla from the source code and your skin FLA with Flash.
3. Delete the player MovieClip from the player.fla and paste the player MovieClip from your skin to the player.fla. If Flash questions you on a library conflict, choose Replace existing items
4. Publish the player with your skin by choosing file » publish (or by pressing SHIFT-F12).

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