Creating your own Clipstream™ Video button set (Panel Images)

The Leader in Secure Video Delivery Software

Clipstream™ Help

Clipstream™ Video
Help Pages

Quick Start guides

Encoding

Hosting/Presenting

Knowledge Base

Contact Help

This 3k panelimages.jpg picture is the actual image file used by the Clipstream™ Video applet as its default interface.

The Clipstream™ Video "buttonset" is actually one single picture called the Panel Images made up of all the separate button elements. The developer can specify the height and width of each of the button elements by editing the values in a single line of the applet code. Creating a new Clipstream™ Video button set then is accomplished by creating a graphic set like the one featured here and by changing the parameters in the applet code.

Don't want to create your own?

Download one of our different coloured button sets

Important v2.5 Note: updated PanelImageWidth

The new default Panel Images has different dimensions as the old buttons.gif. If you replace your buttons.gif with the new panelimages.jpg, you must also change your PanelImageWidth parameter in your existing applets to:

Creating a button set

Use a graphic editing program like Photoshop or Paintshop Pro that can be used to save your work as a .gif or .jpg. The elements you need to create are as follows:

Upstates		Downstates / Opposites
Play up		Play Down
Pause Up		Pause Down
Stop Up		Stop Down
Seek Bar Beginning		Seek Bar Beginning Filled
Seek Control		Seek Control Filled
Seek Bar End		Seek Bar End Filled
Mute Disabled		Mute Enabled
Label menu space

To save time and effort, it's best to create them all in one unified document since you will need to combine them all into one Button Pannel .gif anyway. You can create buttons of any size, colour or style but they must be square unless the background of the web page the Clipstream™ Video with the new set will appear on is the same as the background of your buttons.

The default interface featured here is a common UI familiar to anyone who has owned a VCR except for two additional features. The downstates occur when the user has clicked the mouse cursor down on them. The 'filled' states of the Seek bar elements occur when the video is playing. The 'Bandwidth selection space' simply provides an area where text elements telling the user what the bandwidth choices are will reside.

The buttons and their downstates must be arranged in the layout and order below with the downstates or opposites directly below the upstates:

Creating them in this one document allows the Clipstream™ Video applet to use only one Button Panel picture to create an entire interface system and also reduces the chance that a single image file is lost and prevents the applet from playing at all.

Once you have completed creating these buttons, save them in a .gif or .jpg and upload them to your remote site. Your panel image is now ready to be referenced by the Clipstream™ applet code.

The Clipstream™ Video applet calls regions from this single document when it needs to, to display the separate elements when needed. These regions are specified in the applet code. In fact all of the elements of the interface except for the graphics themselves can be customized by parameters.

Panel Images Parameters

Below is a list of the parameters and the interface elements they affect:

<param name="PanelEnable" value="true">
- The PanelEnable parameter tells the applet whether or not to use graphics at all

<param name="PanelImagesURL" value="buttons.gif>
- The PanelimagesURL specifies the filename of the button set to be used

<param name="PanelPosition" value="bottom">
- The PanelPosition tells the applet where to place the button panel

<param name="PanelLayout" value="PSRMC">
- The PanelLayout specifies which buttons to enable. Using this allows the developer to show only those buttons they want. (P=Play | S=Stop | R=Random Seek Bar | M=Mute | C=Connection Speed)