Understanding CoolBE: User's Guide
 | Introduction | Step-by-Step | Set-up Parameters | Theme Parameters |

 

Introduction

CoolBE™ stands for "Cool Banner/Billboard Engine". A basic CoolBE animation uses the CoolBE applet, image files, and an HTML file. The applet consists of two Java class files, CoolBE.class and Engine.class. The image files can be any JPG or GIF files you want to display. The HTML file host the applet and provide parameters to direct the animation, see the Example.html.

The parameters in the HTML file are used as set-up parameters or theme parameters. You can change the values of most of these parameters to show your text and images in a series of themes played in an infinite loop.  There can be up to 1000 themes (200 themes for v1.1).

Each theme is a group of statements which will change the display or a window of the display if it has been partitioned.
With CoolBE you have a huge number of options for animating both images and text.
Operation is simple. There is no need for non-programmers to be intimidated: changing an image, text, or animation is simple text editing.  CoolBE does all the work for you behind the scenes.
Since you do not need to be connected to the Internet to run CoolBE, testing it is also simple and quick.  You can even test one theme at a time.
The CoolBE engine will run the themes in an infinite loop, so your display is always in action as long as the web page is displayed. 
The animation stops when the cursor is placed over it, to allow your visitors to look at the display or to click to visit the URL for the theme. 

 

Step-by-Step Guide

If you are new to CoolBE or just want an easy going, these are some steps that you may want to follow:
  1. Double click the Example.html and look how it plays. Try to go though all the themes. If you see some good themes that you'd like to copy, move the cursor on to the display window. The animation will stop to let you examine it and take notes. You can see the theme number at the top-left corner of the display window.

  2. Copy the Example.html to a different location as a backup. Open Example.html with a text editor. Just change some "TextStr" values to what you want to show. Keep the quotation marks and make your string about the same length as the existing ones. Save it. Go back to your web browser. Press the Reload or the Refresh button. Now you have your own text displayed.

  3. Move the cursor onto the animation. You'll see that the animation stopped advancing. This gives you time to examine if your text is perfect. You can fine tune them later.

  4. Copy the line of theme 031 having "http://www.Yahoo.com". Paste it to a different theme location. Change the "031LinkURL" to "032LinkURL" and the link to "http://www.Shareware.com". Save and play it again. If you click theme 032, it will go to Shareware.com.

  5. By changing the values of the parameters "Width" and "Height" near the applet anchor, you will have a different size of display. Everything else will still work the same way.

  6. By changing the values of the "FirstTheme" and "LastTheme" parameter, you can set the range of themes you like to play. This is very helpful when you want to focus on some themes for adjustment.

  7. Change the "ImagesFl" if you like. JPG and GIF file formats are all acceptable. Smaller files will load faster online. Also, your image files should be in the user/ subdirectory.

  8. Now you are ready to insert your billboard part, from "<applet" to "</applet>" to anywhere in your real web pages and have it run in the real world.

  9. You need to upload the CoolBE.class, Engine.class, CoolBE*.jpg to your web site, all in binary format. You also need to upload the image files used to the same location, or a sub-directory.

  10. If you have any problem, refer to the TroubleShoot.html. Or e-mail us at Support@CoolBE.com. Please attach your URL and any error message you see from the status line at the bottom of the browser.
Set-up Parameters
| Width/Height | OwnerURL | Partition | Greeting | FirstTheme/LastTheme |
Width
Height		 To adjust the display size, change the values of the Width and Height parameters. They are located in the <APPLET ...> tag. For example, <applet code="CoolBE" Width="560" Height="80">

Width, Height  In pixels, any reasonable value is accepted
Hint:  Play Example2.html.  It has a different display size than Example.html.
OwnerURL
 This parameter is used as CoolBE ID. Do not alter or remove it. If it is changed or removed, you will not be able to set up your own URLs. 
Partition You can partition the display to have two horizontal or vertical windows, the main window and the secondary window. Only one partition is permitted (to make two windows on the display).

In the Scheme parameter, target = 1 for the main window, target = 2 for the secondary window.

Since CoolBE loads and plays one image at a time, a partition can help reduce image size, for better performance.

<param name="Partition" value="130, East">

The partition parameter has two variables: size, location

size    In pixels

This is the width or the height of the partition, depending on the value of location.  You can enter 0 for no partition.

location  Values: East, North, South

  • West (left) is used by the logo
    West or any other invalid value will default to East.
  • East (right)
    partition width = size
    partition height = display height
  • North (top), South (bottom)
    partition height = size
    partition width = display width

Hint: Example.html defines a 130-pixel wide partition on the east (right) side of the display.  Change the code to "20, North" or "20, South"  to see a 20-pixel high partition at the top or bottom of the display.

Target You can define the target window for the clicked URL. When a visitor click on CoolBE, you can direct the clicked web page to be displayed in the current window or in a new window.

You set the target name in the "Target" parameter. The default value for the Example.html and Example2.html is "_self":

<param name=Target value="_self">

to show the new page in the current window. The web page having the CoolBE will be replaced.

The default value for the Example1.html is "Targ":

<param name=Target value="Targ">

to show the new page in a window named "Targ". If the "Targ" window does not exist, a new window will be created.

You can use FRAMEs, as in Example3.html, to show the new page in a different frame. You name the target window as a "Targ" in the lower frame, and feed the name to CoolBE displayed in the top frame. When you click on the CoolBE in the top, the new web page shows in the lower frame and the CoolBE animation is preserved.

Greeting While the Java Applet is loading, you can display a greeting message.

<param name="Greeting" value="Welcome!">

You can change the value "Welcome!" to any other phrases, or just a "  " for blank.

FirstTheme
LastTheme
The CoolBE program plays the themes in a infinite loop, in ascending numerical order, from FirstTheme up to and including LastTheme. For example,
<param name="FirstTheme" value="040">
<param name="LastTheme" value="098">
The values for a theme number must be three digits, anyone from 000 to 999.  The LastTheme must not be less than the FirstTheme
Hint: You may select any range of themes to play by using "FirstTheme" and "LastTheme",  which can be helpful during testing.
Theme Parameters
| TextStr | TextPar | Border | LinkURL | ImageFL | Scheme |
  • The CoolBE display is a series of themes. Each theme has a number, from 000 to 999 (it must be three digits). Each theme parameter name is preceded by a theme number.

  • Each theme parameter name has the format:
    <param name="[Theme Number][Theme Parameter]"   value=" Parameters values ">

  • CoolBE plays the themes in an ascending numerical order, from FirstTheme to LastTheme in an infinite loop. You can begin and end at any number, and there can be gaps in the numbering.

  • There are six theme parameters for each theme. Not every theme parameter is required for a given theme.  If the TextStr is omitted, no text will be shown in this theme. If any other theme parameter is not given, the one from the previous theme is assumed.  If you want to use the image from the previous theme, it is not necessary to load the image again.

  • The parameters for a theme can be written in any order, but should be put close together.
TextStr
<param name="096TextStr" value="Welcome to the CoolBE show |You can make one for yourself |and it is FREE ">

You can enter any text here. Keep the quotation marks at the ends of the text string. The "|" character is a symbol for a new line. You can use it to enter multiple lines in one theme display.

TextPar 
To change your text appearance, use the TextPar parameter,
<param name="095TextPar" value="10, 60, Helvetica, I, 22, ffff50, 200">
It has seven variables:  x0, y0, font, style, size, color, length
x0    starting position (from the left side of the window)
       Value in pixels
y0    starting position from the top of the window
        Value in pixels
font  Any valid font name (Dialog, Helvetica, TimesRoman, Courier, and so on)
style   PLAIN, BOLD, or ITALIC
            These can be shortened to P,p,B,b,I,i
size    the text size, in pixels
color   text color in hexadecimal format
             Same as HTML color definition, without the "#"
             Example: ff0000 is red
length   Length of the string to display
             Value in pixels
             If not 0, CoolBE will adjust the text size to fit
Border
Each window on the display can have a four-sided border, which can be changed (color, width, and appearance) with each theme:  
<param name="049Border" value="4, 0, 3fa435">
Variables:  Width, Style, color
Width of each side of the border,  in pixels, 0 = no border
Style
0 = 3D (raised then recessed)
1 = raised
2 = recessed
color  In hex format
Same as HTML color definition but without the "#" character

Hint: Should the border size be taken into consideration when sizing the image?  The border cover the edges of the image. If your border is 5, the image will lose 5 pixels on each edge.

ImageFL
The ImageFL is used to load an image, e.g.
<param name="096ImageFL" value="user/downtown1.jpg">
Parameter value:  filename
filename The relative filename of the image
Any JPG or GIF images can be used.
The file must be in the same directory as, or a subdirectory of, the CoolBE class files.
Hint: Try to make your image dimensions the same or at most just a little larger than the window size.  Many schemes allow the image to be stretched or squeezed to fill the space.
Try to make your image file size as small as possible.  The WebsiteGarage can help you reduce the image file size.
All the images in the CoolBE/user directory can be replaced with your own. The animation control of the images are in the Scheme Parameter
LinkURL
LinkURL is for you to enter a hyperlink to go to when that theme is clicked. You may enter one for each theme.
<param name="040LinkURL" value="http://www.CoolBE.com">
Parameter value: address
address  The full web address (URL)
Hint: If the "LinkURL" statement is omitted, the previous URL is assumed.   A click on any theme that does not have a URL will activate the URL of the latest theme that has a URL.
Scheme
Scheme is the master control for each theme: it directs the animation for the theme.  

You can choose among twenty three animation choices for each theme. You can define the speed, the location, the area, the direction, and the target window for each theme. For example,
<param name="114Scheme" value="1, 30, 2, 50, 0, 50, 100, 1, 2">

Variables: control, speed, pause, x0, y0, width, height, direction, target
control  How the image and text are to be played:
0  = display text only, on previous background, if any
1  = display image only
2  = same as 1, but squeeze or stretch the image to fit
3  = display image and text
4  = same as 3, but squeeze or stretch the image to fit
5  = zoom image and text from x0,y0 to Width and Height
6  = zoom last display and add new text
7  = zoom out image while text remains the same size
8  = zoom out last display and add new static text
9  = display image in full window and zoom text
10 = zoom text on top of last display
11 = slide new image and text into window
12 = slide last display and new text into window
13 = slide image into window and display static text
14 = slide last display into window add new static text
15,16,17, and 18 = same as 11,12,13, and 14, but slide past the window
19 = animate a small image on top of last display
20 = marquee text on top of last display
21 = marquee text with a small image on top of last display 
22 = marquee text between an image and last display
speed  speed of the animation, in seconds 
            Value 1 to 3000
pause  seconds to pause before beginning the next theme, 0 = no pause
x0   starting position from the left side of the window
       Value, in percent, 0 to 100, is relative to the window width
y0    starting position from the top side of the window
       Value, in percent, 0 to 100, is relative to the window height
width  Width of the window in which the action will take place
         Value, in percent, 20 to 100, is relative to the window width
         0 in zoom will hold the width static
height  Height of the window in which the action will take place
         Its value, in percent, 20 to 100, is relative to the window height
         0 in zoom will hold the height static
direction  Direction of the animation:
       1 = from the top left corner
       2 = from the top middle
       3 = from the top right corner
       4 = from the left middle
       5 = from the center
       6 = from the right middle
       7 = from the left bottom corner
       8 = from the bottom middle
       9 = from the bottom right corner
target  where this theme will be shown:
       1 = the main display window
       2 = the secondary window, if set

Hint: x0 and y0 are the origin of the display, while Width and Height are the dimensions of the display.
The tricks are that these are relative to the display area. 50 means middle. If you want squeeze an image into the lower-right corner, the values should all be 50. That is: half from the left edge of the window, half from the top, half as wide as the window, and half as high.

Where to start the image is defined by direction.
Copyright © 1998-1999 SearchN Corp. All rights reserved.