Combined, all the image files form a single rectangular interface.

The figure below shows the standardized zones where each button graphic is recognized by the applet.

To change the look of the buttons, all you need to do is create replacement graphics in a graphic creation program like Photoshop. In the figure above, the names of the graphic files are shown but these can be adjusted in the applet code.

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. The elements you need to create are as follows:

Clipstream™ Audio graphic elements
Upstates		Downstates / Opposites
Play up		Play Down
Pause Up		Pause Down
Stop Up		Stop Down
Play Blink		Blinks between Play up state and this graphic while the audio is playing
The various 'over' states are graphics that are shown when the user's mouse hovers over a button. These usually are the "Up" states unless the developer wants a special 'over' state graphic.
Optional buttons
Seek Bar background un-progressed		The "groove" of the seek bar showing the portion of the bar that has not been played through. This must be as wide as the three top buttons and the logo link button below it.
Seek Bar background progressed		The portion of the bar that has been played through. This background is revealed as the audio progresses. This must be the same dimensions as the seek bar unfilled.
Seek bar knob		The handle that the user clicks on and moves to change the position of the audio being played. The handle must be as high as the seek bar backgrounds.
Logo link		Button that will send user to a specified URL when clicked.

In the case of the action buttons, there needs to be an upstate and a downstate for each region (downstate for when the user clicks on it).

The developer can specify the height and width of each of the button elements by editing the values in a single line of the Java Applet code.

Rules:

• All the button graphics must fit within a rectangle. The three top buttons (play, pause and stop) when put together must equal the width of the bottom Logo link button as shown in the top picture.
• The button positions must be shown in the order given. Play -> Pause -> Stop over the Logolink button.
• All button states must be included or the applet will not work. Even if you don't want a down state shown, you must include a graphic file for a downstate. (Just make it a copy of the upstate).
• In the graphics program, measure the total height and width of all the buttons combined

To save time and effort, it's best to create them all in one unified document and then cut it up into the separate files. Once you have completed creating these buttons, upload the .gifs to a folder on your remote site. Your.gifs are now ready to be referenced by the Clipstream applet parameter code.

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

By changing the values in each parameter, you can quickly switch from different versions buttons.

Enabling / Disabling seek bar
In addition, Clipstream™ Audio also can have a seek bar that allows users to move to a certain part of the audio stream. Naturally, this element is only useful in the case of a long sample so developers may wish to disable it. The parameter to enable or disable the seek bar is this one:

Using Relative Paths in referencing graphic files
The values are not just the file names of the graphics but also indicate the locations of the graphics on your server. You can input a relative path in the values to indicate different folder locations of the graphics provided that they are on the same server. The applet will not work if the graphics are not on the same server as the clipstreamaudio.zip player. This relative path is relative to the location of your clipstreamaudio.zip.