[[PlayerToc(flash)]]

= JW Player: Skinning in Flash CS3 =

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 [wiki:FlashVars#Layout one variable] in the embed code, one can assign a skin to the player. There's already [http://www.longtailvideo.com/addons/skins a string of them available]. This tutorial explains how to create your own custom skins.

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

(Note: Wes Coughlin from [http://www.vidlivery.com Vidlivery.com] has also created a [http://content.bitsontherun.com/preview/Dfy7XKsC-6949 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 [wiki:FlashSkinning can be found here].

You should design your skins in [http://www.adobe.com/products/flash/ 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  [browser:skins 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 [wiki:FlashSkinning 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:

[[Image(anchor.gif)]] 

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:

[[Image(stretching.gif)]]

== 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:

[[Image(9grid1.gif)]]

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:

[[Image(9grid2.gif)]]

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 [wiki:FlashVars#Colors 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 [browser:skins  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 [browser:tags 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, [http://www.longtailvideo.com/addons/submitregister.html submit your plugin] for the [http://www.longtailvideo.com/addons/ 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 [http://www.longtailvideo.com/support/forum/skins skins section of our forum].

----