In the example above, the region in the middle with the album covers plays streaming audio when different albums are rolled over. They stop playing once the the user rolls off. This is accomplished by placing a a special Bannerstream applet between the graphic regions (.gifs or .jpgs) to the left and right of the album covers. The album cover graphics themselves are called from the applet.

The Bannerstream applet has code for calling the Clipstream-ed sound clips (in .32 and .20 versions) as well as code for governing the behaviour of the clips such as telling the applet to stop playing the clips once the rollover event is over and for specifying regions.

Constructing the rollover audio Banner
The banner was constructed in four steps. First, the graphics and layout were designed in Photoshop. Using Photoshop 6's slice options, the interactive regions were separated from non-interactive regions. It was then exported as jpgs, gifs and HTML containing the table within which the banner is defined. The slices that included the regions that would become the rollovers were renamed to make them easier to identify later.

Secondly, the audio was encoded using the Clipstream™ Audio Encoder. The Encoder exported Clipstream™ Audio compressed files (a .32 and .20 version of each audio clip) and also gave an option to produce the needed applet code with the correct file names inserted.

Bannerstream is different from regular Clipstream applet code in that it contains extra parameters for enabling audio to be played once graphics are rolled over. (This is accomplished using JavaScript methods in the standard Clipstream™ Audio implementation.) In this third step, the Bannerstream code is edited to identify which of the banner's sliced graphics would be used as rollover regions. Also, the correct code key for the remote server is inserted. You may need to ensure that the code in both the applet and the banner HTML is checked for absolute links so that the banner can be playable from email or remote site.

In the table containing the banner, the sliced regions where the rollover will occur are cut out and replaced by the applet code itself. The applet code width and height will correspond to the missing graphics to keep with the banner design. In the example above, the three album graphics (three separate slices) were cut out. Their three separate table <td>s were combined into one which had the combined width and height of all three graphics combined. The applet code is then pasted into that space. *note: the album graphics themselves were not deleted, they must be uploaded along with all the other graphics as they are called by the applet.

In the final step, all the graphics (including the rollover graphics), the page containing the table with the banner and embedded applet, and the Clipstream™ Audio files are uploaded to the remote server. The banner was tested for audio and appearing graphics.

Visit this Bannerstream Help Page for a list of parameters, tips, and and few samples.