JW Player for Flash

  1. Overview
  2. All Flashvars
  3. Supported Formats
  4. Crossdomain Security
     
  5. API Calls
  6. Events Overview
     
  7. Skinning in Flash CS3
  8. All Skin Elements
     
  9. Building Plugins
  10. Compiling Plugins

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 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 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 Adobe Flash, so you need proficiency with this program. An overview tutorial on how to create skins for the player 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 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 backcolor flashvar.
  • playButton (MC): when clicked, the mediafile will start playback.
    • icon (MC): when a lightcolor is set, this clip will change color on rollover.
  • pauseButton (MC): when clicked, the mediafile will pause playback.
    • icon (MC): when a 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 lightcolor is set, this clip will change color on rollover.
  • nextButton (MC): when clicked, the next mediafile will start playing.
    • icon (MC): when a lightcolor is set, this clip will change color on rollover.
  • prevButton (MC): when clicked, the previous mediafile will start playing.
    • icon (MC): when a lightcolor is set, this clip will change color on rollover.
  • linkButton (MC): when clicked, the browser will navigate to the 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 lightcolor is set, this clip will change color on rollover.
  • fullscreenButton (MC): when clicked, the player will enter fullscreen mode.
    • icon (MC): when a lightcolor is set, this clip will change color on rollover.
  • normalscreenButton (MC): when clicked, the player will leave fullscreen mode.
    • icon (MC): when a lightcolor is set, this clip will change color on rollover.
  • muteButton (MC): when clicked, the player will mute all audio.
    • icon (MC): when a lightcolor is set, this clip will change color on rollover.
  • unmuteButton (MC): when clicked, the player will unmute all audio.
    • icon (MC): when a 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 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 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 lightcolor flashvar.
    • icon (MC): placed at the currently set volume. When a 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 playlist flashvar:

  • back (MC): background graphic of the playlist; usually a solid color. It will be set to the value of the 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 lightcolor on rollover and the backcolor on rollout.
      • image (MC): if there is an image for this mediafile, it will be loaded here.
      • author (TF): prints author information. It is set to the lightcolor when this file is currently playing.
      • date (TF): prints the date of a mediafile. It is set to the lightcolor when this file is currently playing.
      • description (TF): a short description of a mediafile. It is set to the lightcolor when this file is currently playing.
      • duration (TF): the duration of a mediafile in MM:SS. It is set to the lightcolor when this file is currently playing.
      • tags (TF): prints the tags of a mediafile. It is set to the lightcolor when this file is currently playing.
      • title (TF): prints the title of a mediafile. It is set to the 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 backcolor.
    • icon (MC): shows the currently visible portion of the playlist. It is set to the lightcolor on rollover and the 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 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 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 skinning tutorial