Supported skinning 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, thereby giving it a completely distinct look.

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 can be designed in Adobe Flash. An overview tutorial on how to create skins for the 4.0 player can be found here. A full list of the graphics nesting and their desired names can be found below (MC = Movieclip, TF = Textfield).

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 (MC: contains all elements from the display)
    • back (MC: background graphic of the display; usually solid black)
    • media (MC: this is the clip all videos / images / animations will be loaded into)
    • logo (MC: if one sets a logo flashvar, it will be loaded into this clip. Position this anywhere you want).
    • bufferIcon (MC: this icon is shown when a mediafile is buffering).
      • txt (TF: this textfield shows the buffer percentage).
    • 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 (MC: contains all buttons from the controlbar).
    • back (MC: background graphic of the controlbar).
    • playButton (MC: when clicked, the mediafile will start playback).
    • pauseButton (MC: when clicked, the mediafile will pause playback).
    • stopButton (MC: when clicked, the mediafile will stop playing and loading).
    • nextButton (MC: when clicked, the next mediafile will start playing).
    • prevButton (MC: when clicked, the previous mediafile will start playing).
    • linkButton (MC: when clicked, the browser will navigate to the url associated with the mediafile).
    • fullscreenButton (MC: when clicked, the player will enter fullscreen mode).
    • normalscreenButton (MC: when clicked, the player will leave fullscreen mode).
    • muteButton (MC: when clicked, the player will mute all audio).
    • unmuteButton (MC: when clicked, the player will unmute all audio).
    • 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's timeline).
      • rail (MC: provides the boundaries for the icon).
      • mark (MC: marks the currently downloaded portion of a mediafile).
      • icon (MC: shows the current playback position in a mediafile).
    • volumeSlider (MC: when pressed, a user can change the volume).
      • rail (MC: provides the boundaries for the icon).
      • mark (MC: hightlists the left portion of the slider).
      • icon (MC: shows the currently set volume).
  • playlist (MC: contains the scrollbar and one button of the playlist)
    • back (MC: background graphic of the playlist; usually a solid color).
    • list (MC: contains the actual list of buttons at runtime and is used for scrolling).
      • button (MC: contains all elements for a single playlist button).
        • back (MC: background graphics of a playlist button).
        • image (MC: if there is a thumbnail for this mediafile, it will be loaded here).
        • author (TF: prints author information).
        • description (TF: a short description of a mediafile).
        • duration (TF: prints the duration of a mediafile in MM:SS).
        • title (TF: prints the title of a mediafile).
    • slider (MC: shows a scrollbar when the number of buttons don't show the playlist).
      • back (MC: background graphic of the slider).
      • rail (MC: provides the boundaries for the icon).
      • icon (MC: shows what portion of the complete playlist is currently visible).