This is a message.

Custom Skins

We have two different controlbar versions that are included in the controlbar distribution zip package: The one with the default skin and the one with the ‘tube’ skin. Both of these can be controlled via the configuration options and via scripting.

This document describes how you can create completely customized skins. You will need the Adobe Flash CS4 Professional to implement the skin.

The skin is a Flash file and all the skinnable elements are in the Library of this file. The controlbar will look up the buttons, icons, and other graphical elements from the Library. All these widgets are looked up using class names and the naming convetion used is described below.

You can also implement your skin by simply modifying either one of the default skins. Find the package labeled ‘source code’ here. Unzip the source package and you will find the default skin .fla files in the subfolders of src/flash. You can open these files in the Flash tool. Open up the Library and you will find all the classes in the ‘Skin classes’ folder - we’ll come back to this in a while.

Scaling

All buttons and other elements will be automatically scaled when the size of the controlbar changes. All the widgets are divided into regions with different scaling characteristics:

TopEdge
LeftEdge
 
RightEdge
BottomEdge


These are the rules:

  • The top and bottom edges are stretched horizontally and their height is never changed. They always occupy the whole width of the button.

  • The left and right edges are stretched vertically and their width is never changes. They take the space that is left between the top and bottom eges.

Class names

You can specify the class name by selecting a symbol from the Library and choosing "Properties" from the right-click menu. The Class name goes to the "Class" field that can be activated by clicking the "Export for ActionScript" checkbox.

Buttons

The Library of a skin Flash file


Classes used for buttons are listed below:

class nameDescription

fp.FullScreenOffButton

The fullscreen off button.

fp.FullScreenOnButton

The fullscreen on button.

fp.MuteButton

The volume muting button. Turns off the sound volume.

fp.UnMuteButton

The volume un-muting button. Turns the volume back on.

fp.NextButton

The button used when forwarding in the playlist.

fp.PrevButton

The button used when moving back in the playlist.

fp.PauseButton

The pause button.

fp.SlowMotionBwdButton

The slow motion backward button.

fp.SlowMotionFBwdButton

The fast motion backward button.

fp.SlowMotionFwdButton

The slow motion forward button.

fp.SlowMotionFFwdButton

The fast motion forward button.

fp.PlayButton

The play button.

fp.ButtonLeftEdge, fp.ButtonRightEdge, fp.ButtonTopEdge, fp.ButtonBottomEdge

The graphics used in left, right, top and bottom edges of all buttons. Please see the scaling section above.

The default Flowplayer controlbar does not have any graphics in the edges of the buttons, or in the edges of the scrubber, volume slider or time display. There is no graphical content inside these classes. The 'Tube' skin uses thin lines on the left, right and bottom edges.

The slow motion buttons are not compiled by default into the controlbars, except for the modern one. If you create a new controlbar and want to activate the slow motion buttons, you need to set flag -define=CONFIG::hasSlowMotion,'true' in the build-yourskin.xml file, under the compiler-define property.

Scrubber

class nameDescription

fp.Dragger

The scrubber handle. This is same graphic also used for the volume slider.

fp.ScrubberLeftEdge, fp.ScrubberRightEdge, fp.ScrubberTopEdge, fp.ScrubberBottomEdge

The graphics used in left, right, top and bottom edges of the scrubber. Please see the scaling section above.

Volume slider

class nameDescription

fp.Dragger

The volume slider handle. This same graphic is also used for the srrubber handle.

fp.VolumeLeftEdge, fp.VolumeRightEdge, fp.VolumeTopEdge, fp.VolumeBottomEdge

The graphics used in left, right, top and bottom edges of the volume slider. Please see the scaling section above.

Time display

class nameDescription

fp.TimeLeftEdge, fp.TimeRightEdge, fp.TimeTopEdge, fp.TimeBottomEdge

The graphics used in left, right, top and bottom edges of the time/duration display area. Please see the scaling section above.

Defaults for configurable properties

In addition to the graphical classes you can control some aspects of the skin using simple properties inside an ActionScript file. These properties supply default values for the configuration variables that can be used to tweak the looks of the skin when the player is embedded. The sample file below shows all these variables with values from the 'Tube' skin.

package {
public class SkinDefaults {
public static function get values():Object {
return {
bottom: 0, left: 0, height: 30, width: "100%", zIndex: 2,
backgroundColor: "#929292",
backgroundGradient: "high",
border: "0px", borderRadius: "0px",
timeColor: "#B1E0FC",
durationColor: "#ffffff",
sliderColor: "#C9C9C9",
sliderGradient: "none",
volumeSliderColor: '#D00000',
volumeColor: '#D00000',
volumeSliderGradient: "none",
buttonColor: "#000000",
buttonOverColor: "#FF0000",
progressColor: "#D00000",
progressGradient: "none",
bufferColor: "#C78F8E",
bufferGradient: "none",
tooltipColor: "#C9C9C9",
tooltipTextColor: "#D00000",
timeBorderRadius: 0,
timeBgColor: '#262626',
/timeFontSize: 12,/ //force the font size
timeSeparator: '/',
scrubberBorderRadius: 0,
volumeBorderRadius: 0,
scrubberHeightRatio: 0.7,
scrubberBarHeightRatio: 0.4,
volumeSliderHeightRatio: 0.4,
volumeBarHeightRatio: 1.1,
timeBgHeightRatio: 0.6
}
}
 
/
* Use this to tweak how much space there is after a
* widget. The space is left between widgets when thay are
* stacked horizontally to the controlbar. You wan use
* widget.name to identify what widget is in question. The
* names of the different widgets are: "play", "stop", "next",
* "prev", "scrubber", "volume", "mute", and "fullscreen".
*/
public static function getSpaceAfterWidget(
widget:DisplayObject,
widgetIsOnRightEdge:Boolean
):Number {
// add some space after the time display
// if (widget.name == "time") return 4;
return widgetIsOnRightEdge ? 0 : 1;
}
 
/

* Additional margins to be left around the whole
* controlbar. [top, right, bottom, left]
*/
public static function get margins():Array {
return [0, 0, 0, 0];
}
}
}

ActionScript 3

You should have this file in the classpath when you publish the skin. If you place it next to the .fla file Flash will pick it up correctly, assuming that you haven't removed the working directory from its classpath. You should also have a reference to it in the skin .fla, for example in Frame 1 of the main timeline:

var defaults:SkinDefaults;

ActionScript 3

Rollover states

You can make your buttons to change color when the mouse pointer is rolled over them. This is done by including a MovieClip with name mOver into the buttons. This MovieClip then changes color in rollover and the color can be configured using the buttonOverColor configuration variable.

Rollover animations

Your buttons can have timeline animations - they can contain one or more frames and 'tweens' that animate them. The default skin and the 'Tube' skin contain shape tween animations in the fullscreen buttons. The controlbar plugin calls play() on the button when the mouse goes over it causing the animation to start playing. When the mouse moves out of the button, it calls gotoAndStop(1) causing the animation to stop on the 1st frame. If you want your animation to stop in the last frame, add a stop() call into the last frame's script.

You can also specify an animation of the over state itself. In the mOver MovieClip, the controlbar plugin will look for a label called over and call gotoAndPlay("over");. You can thus create an animation very easily. When the mouse moves out of the button, the controlbar plugin will call gotoAndStop(1), reseting the state.

You can see an example of this in the 'Modern' skin.

Mousedown animations

The same behavior is used for the mouse down effect. In the mOver MovieClip, you can specify a down label that will be played when the button is hit. If you want your animation to stop in the last frame, add a stop() call into the last frame's script.

You can see an example of this in the 'Modern' skin.

Roll over and mouse down animations

Testing your skin

You can attach your custom skin to the controlbar like this:

flowplayer("player", "flowplayer-3.2.18.swf", {
plugins: {
controls: {
url: 'flowplayer.controls.skinless.swf', skin: 'customskin'
},
customskin: {
url: "mycustomskin.swf", type: "classLibrary"
}
}
};

JavaScript

The skin variable refers to the custom skin plugins that should have a type with value classLibrary. Note that the controls plugin uses flowplayer.controls.skinless.swf that is a skinless controlbar whose size is about 3 kilobytes less than the standard controlbar's size, because it does not contain any graphics. The graphics are loaded from the custom skin that is inserted to the controlbar using the skin variable. This skinless controlbar is included in the dontrolbar distribution package.

By using this configuration you can develop and test your skin inside the player until you are satisfied with it. You can also use this configuration in production environments just fine. Alternatively you can compile your skin into the controlbar plugin so that it's inside the same SWF file. The benefits of this additional step are a slightly cleaner configuration and one less SWF that needs to be downloaded.

Compiling the skin into the controlbar

First you need to download the source package of the controlbar plugin. Find the package labeled 'source code' here. After you have unzipped it look at following:

  • src/flash folder contains the folders for skins, you should create a new folder for your skin here

  • at the root of the package you will find build-tube.xml that is a Ant build file used to build the 'Tube' skinned controlbar

You also need to download the flowplayer.devkit package and unzip it next to the controlbar folder. See here for documentation about the development environment. See also this forum post about compiling Flash plugins.

Let's assume that you are building a skin called 'sugar'. To compile your skin do following:

  1. In the Flash tool, publish the skin SWF and SWC to your skin folder src/flash/sugar.

  2. Create a build file for your skin called build-sugar.xml by creating a copy of build-tube.xml.

  3. Edit the build file build-tube.xml and change following properties in the file: basename, version, and library-path. The value of basename would be sugar, the version could be 1.0, and library-path points to the skin folder src/flash/sugar. If you want plan to use the slow motion buttons, you also have to change the compiler-define flag to CONFIG::skin,'true' -define=CONFIG::hasSlowMotion,'true'

  4. Build the skin by running ant -f build-sugar.xml. The resulting custom- skinned controlbar will be built into build/flowplayer.controls-sugar-1.0.swf.

You will need Apache Ant build tool installed on your system.