[[PlayerToc(flash)]]

= JW Player: Skin Elements =

The 4.0 player introduces the concept of skinning. A ''skin'' is a separate SWF file that contains all graphical elements of the player (buttons, backgrounds, icons etc). With one simple variable (the [wiki:FlashVars skin flashvar]), you can assign a skin to your copy of the 4.0 player, giving it a completely distinct look. A list of skins (SWF and FLA) can be found [browser:skins in the repository]. 

Not a single line of code is needed to design your own skin. All logic is attached to the skin automatically, based upon naming conventions (the play button graphic should be called playButton etc.). A skin must be designed in [http://www.adobe.com/products/flash Adobe Flash], so you need proficiency with this program. An overview tutorial on how to create skins for the player [wiki:SkinningThePlayer can be found here]. 

All resizing is automatically performed by the player. Items that are placed on the right-side of the controlbar/playlist/display will be docked to the right; items that are placed left will remain left. Items that are above a certain size (>1/3 of the total width of the controlbar, display or playlist) will automatically be stretched to fit the new width. Think about backgrounds, the descriptions in the playlist or the timeslider in the controlbar. 

== Display elements ==

Here is a full list of all elements and their nesting for inside the '''display''' Movieclip of the player (MC  = Movieclip, TF = Textfield). The '''display''' is the part of the player that displays the media files:


 * '''back''' (''MC''): background graphic of the display; usually solid white/black. The color of this is set to the  [wiki:FlashVars#Colors screencolor flashvar]. 
 * '''media''' (''MC''): the clip all videos & images will be loaded into.
 * '''logo''' (''MC''): if one sets a ''logo'' flashvar, it will be loaded into this clip. Position this anywhere you want. You can also already put a logo here in your skin.
 * '''bufferIcon''' (''MC''): this icon is shown when a mediafile is buffering. 
   * '''txt''' (''TF''): this textfield shows the buffer percentage - 0 to 100.
 * '''errorIcon''' (''MC''): this icon is shown when a playback error has occured - e.g. file not found.
   * '''txt''' (''TF''): this textfield shows the error message.
 * '''playIcon''' (''MC''): this icon is shown when a mediafile is paused and ''displayclick'' is set to ''play''.
 * '''linkIcon''' (''MC''): this icon is shown when a mediafile is paused and ''displayclick'' is set to ''link''. 
 * '''muteIcon''' (''MC''): this icon is shown when a mediafile is paused and ''displayclick'' is set to ''mute''.
 * '''nextIcon''' (''MC''): this icon is shown when a mediafile is paused and ''displayclick'' is set to ''next''.
 * '''fullscreenIcon''' (''MC''): this icon is shown when a mediafile is paused and ''displayclick'' is set to ''fullscreen''.

== Controlbar elements ==

Here is a full list of all graphics and their nesting for inside the '''controlbar''' Movieclip of the player (MC  = Movieclip, TF = Textfield). The '''controlbar''' is the part of the player that displays all buttons and sliders:

 * '''back''' (''MC''): background graphic of the controlbar. Usuall a solid color. It will be set to the value of the [wiki:FlashVars#Colors backcolor flashvar].
 * '''playButton''' (''MC''): when clicked, the mediafile will start playback.
   * '''icon''' (''MC''): when a [wiki:FlashVars#Colors lightcolor] is set, this clip will change color on rollover.
 * '''pauseButton''' (''MC''): when clicked, the mediafile will pause playback.
   * '''icon''' (''MC''): when a [wiki:FlashVars#Colors lightcolor] is set, this clip will change color on rollover.
 * '''stopButton''' (MC): when clicked, the mediafile will stop playing and loading.
   * '''icon''' (''MC''): when a [wiki:FlashVars#Colors lightcolor] is set, this clip will change color on rollover.
 * '''nextButton''' (''MC''): when clicked, the next mediafile will start playing.
   * '''icon''' (''MC''): when a [wiki:FlashVars#Colors lightcolor] is set, this clip will change color on rollover.
 * '''prevButton''' (''MC''): when clicked, the previous mediafile will start playing.
   * '''icon''' (''MC''): when a [wiki:FlashVars#Colors lightcolor] is set, this clip will change color on rollover.
 * '''linkButton''' (''MC''): when clicked, the browser will navigate to the [wiki:FlashVars#Fileproperties link] associated with the mediafile. When [FlashAPI:Plugins custom buttons] are added, this button is copied.
   * '''back''' (''MC''): when [FlashAPI:Plugins custom buttons] are added, this clip is resized to accomodate large icons.
   * '''icon''' (''MC''): when a [wiki:FlashVars#Colors lightcolor] is set, this clip will change color on rollover.
 * '''fullscreenButton''' (''MC''): when clicked, the player will enter fullscreen mode. 
   * '''icon''' (''MC''): when a [wiki:FlashVars#Colors lightcolor] is set, this clip will change color on rollover.
 * '''normalscreenButton''' (''MC''): when clicked, the player will leave fullscreen mode. 
   * '''icon''' (''MC''): when a [wiki:FlashVars#Colors lightcolor] is set, this clip will change color on rollover.
 * '''muteButton''' (''MC''): when clicked, the player will mute all audio. 
   * '''icon''' (''MC''): when a [wiki:FlashVars#Colors lightcolor] is set, this clip will change color on rollover.
 * '''unmuteButton''' (''MC''): when clicked, the player will unmute all audio. 
   * '''icon''' (''MC''): when a [wiki:FlashVars#Colors lightcolor] is set, this clip will change color on rollover.
 * '''elapsedText''' (''TF''): the elapsed time is displayed here in a MM:SS format.
 * '''totalText''' (''TF''): the duration of a mediafile is displayed here in a MM:SS format. 
 * '''timeSlider''' (''MC''): when pressed, a user can scrub through the mediafile timeline.
    * '''rail''' (''MC''): provides the boundaries for the slider.
    * '''mark''' (''MC''): marks the currently downloaded portion of a mediafile.
    * '''icon''' (''MC''): runs at the current playback position in a mediafile. When a [wiki:FlashVars#Colors lightcolor] is set, this clip will change color on rollover.
    * '''done''' (''MC''): marks the played portion of a mediafile. This clip is colored to the [wiki:FlashVars#Colors lightcolor] flashvar.
 * '''volumeSlider''' (''MC''): when pressed, a user changes the volume.
    * '''rail''' (''MC''): provides the boundaries for the icon.
    * '''mark''' (''MC''): hightlists the left portion of the slider. This clip is colored to the [wiki:FlashVars#Colors lightcolor] flashvar.
    * '''icon''' (''MC''): placed at the currently set volume. When a [wiki:FlashVars#Colors lightcolor] is set, this clip will change color on rollover.

== Playlist elements ==

Here is a full list of all graphics and their nesting for inside the '''playlist''' Movieclip of the player (MC  = Movieclip, TF = Textfield). The '''playlist''' is the part of the player that displays the list of videos (assuming you have set the [wiki:FlashVars#Layout playlist flashvar]:

 * '''back''' (''MC''): background graphic of the playlist; usually a solid color. It will be set to the value of the [wiki:FlashVars#Colors backcolor flashvar].
 * '''list''' (''MC''): contains the actual list of buttons at runtime. This extra nesting is used for scrolling.
    * '''button''' (''MC''): contains all elements for a single playlist button. This clip is copied by the actonscripting for every entry in the playlist.
       * '''back''' (''MC''): background graphics of a playlist button. It is set to the [wiki:FlashVars#Colors lightcolor] on rollover and the [wiki:FlashVars#Colors backcolor] on rollout.
       * '''image''' (''MC''): if there is an [wiki:FlashVars#Fileproperties image] for this mediafile, it will be loaded here.
       * '''author''' (''TF''): prints [wiki:FlashVars#Fileproperties author] information. It is set to the [wiki:FlashVars#Colors lightcolor] when this file is currently playing.
       * '''date''' (''TF''): prints the [wiki:FlashVars#Fileproperties date] of a mediafile. It is set to the [wiki:FlashVars#Colors lightcolor] when this file is currently playing.
       * '''description''' (''TF''): a short [wiki:FlashVars#Fileproperties description] of a mediafile. It is set to the [wiki:FlashVars#Colors lightcolor] when this file is currently playing.
       * '''duration''' (''TF''): the [wiki:FlashVars#Fileproperties duration] of a mediafile in MM:SS. It is set to the [wiki:FlashVars#Colors lightcolor] when this file is currently playing.
       * '''tags''' (''TF''): prints the [wiki:FlashVars#Fileproperties tags] of a mediafile. It is set to the [wiki:FlashVars#Colors lightcolor] when this file is currently playing.
       * '''title''' (''TF''): prints the [wiki:FlashVars#Fileproperties title] of a mediafile. It is set to the [wiki:FlashVars#Colors lightcolor] when this file is currently playing.
 * '''slider''' (''MC''): shows a scrollbar when the buttons don't fit in the playlist.
   * '''back''' (''MC''): background graphic of the slider. Defines the rollover area.
   * '''rail''' (''MC''): provides the boundaries for the scrollbar.  It is set to the [wiki:FlashVars#Colors backcolor].
   * '''icon''' (''MC''): shows the currently visible portion of the playlist.  It is set to the  [wiki:FlashVars#Colors lightcolor] on rollover and the [wiki:FlashVars#Colors backcolor] on rollout.

== Coloring ==

There's two ways to set rollover colors for the buttons in the playlist and controlbar. First, one can set the [wiki:FlashVars#Colors backcolor, frontcolor, lightcolor and  screencolor flashvars]. When done:

 * The '''back''' of the display will be the ''screencolor''.
 * The '''back''' of the controlbar, the playlist ánd of each playlistbutton will be the ''backcolor''.
 * The '''icon''' of each button/slider in the '''controlbar''' and all elements in each playlistbutton will be ''frontcolor''.
 * The '''done''' of the '''timeSlider''' and the '''mark''' of the '''volumeSlider''' will be ''lightcolor''.
 * When rolling over a button in the '''controlbar''', its '''icon''' will change color to the ''lightcolor''.
 * When rolling over a button in the '''playlist''', its '''back''' will become ''lightcolor''.
 * When selected, all items of the active '''button''' in the playlist will become ''lightcolor''.

The second way is to simply set all colors you want directly inside the skin instead of setting any [wiki:FlashVars#Colors color flashvars]. You can then rollovers by using labelled frames in the timeline of your controlbar buttons and playlist buttons:

 * When rolling over a '''controlbar''' button or slider, the player attempts to jump to the frame labelled ''over''. When rolling out, the player attempts to move to  ''out''.
 * When rolling over a '''button''' in the '''playlist''', the player also attempts to jump to the frame labelled ''over''. On rollout, a ''out'' frame is expected again. There's a third frame, labelled ''active'', that is set for the currently active '''button'''.

Note that the buttons are now actually small animations, so you'll have to add ''stop()'' commands in the timeline for each button. More info in the [wiki:SkinningThePlayer#Rollovers skinning tutorial]