dotz

To use Dotz on your site you should put dotz.cab, dotz.jar and dotfont.gif on your server. That'll make it work with netscape 4+ and MSIE 3+. If you also want it to be viewable in netscape 3 you should unzip dotz.jar and put all class files in it on your server too.

You should call the applet from a html file like this:
<APPLET code="Dotz.class" archive="dotz.jar" width=400 height=40>
<PARAM name="cabbase" value="dotz.cab">
</APPLET>
This will point netscape to the dotz.jar file and MSIE to the dotz.cab file. Of course you should enter your own values for the width and the height of the applet.

This piece of code first creates item0 with the text 'Hello world'. Next it displays it for 20 frames. Note that item0 is referenced with a '<' and a '>' around it. Because the animation is looped, here item0 will be displayed continueously and thus a steady 'Hello world' appears.

<APPLET code="Dotz.class" archive="dotz.jar" width=400 height=40>
<PARAM name="cabbase" value="dotz.cab">
<PARAM name="item0" value="Hello">
<PARAM name="item1" value="world">
<PARAM name="animation0" value="enter,top,<item0>,20:<item0>,20">
<PARAM name="animation1" value="morph,<item0>,<item1>,20">
<PARAM name="animation2" value="<item1>,20:leave,bottom,<item1>,20">
</APPLET>

This time two items are created, one with the text 'Hello' and one with 'world'. The animation consist of three parts. In the first part item0 is moved in from the top in 20 frames and then displayed for another 20 frames. These two actions are put into sequence by seperating them by a ':'. The next animation morphs item0 to item1, again in 20 frames. You should be able to understand the last animation by now. Another thing that becomes important now is that Dotz displays 30 frames per second.

First we create item0 as 'Hello' and item1 as 'world'. Next we combine them in item2. By doing this item0 and item1 are automaticly repositioned to form 'Hello world'. This means every item can only be referenced once in another item. Also keep in mind that items can only be referenced in items with a higher number. Now we can do animations on the two words seperately or on both of them at once. So first we scroll them in together and display them. Next we scroll item0 to the left and item1 to the right at the same time. We do this by seperating the sequences (1 or more actions, seperated by a ':') by a '&'. Make sure the sequences all have the same number of frames.

<APPLET code="Dotz.class" archive="dotz.jar" width=400 height=40>
<PARAM name="cabbase" value="dotz.cab">
<PARAM name="item0" value="The time is <time>">
<PARAM name="item1" value="The date is:">
<PARAM name="item2" value="<date> <clock32>">
<PARAM name="animation0" value="enter,top,<item0>,20:<item0>,60">
<PARAM name="animation1" value="leave,bottom,<item0>,20&enter,top,<item1>,20">
<PARAM name="animation2" value="<item1>,20:morph,<item1>,<item2>,20">
<PARAM name="animation3" value="<item2>,60:leave,left,<item2>,40">
</APPLET>

You can also display the time and date in Dotz by using the <time> and <date> tags. And there's the option to show a clock by using the <clock> tag. The default clock size is 24. You can give it another size by adding the size in the tag like <clock32>.

<APPLET code="Dotz.class" archive="dotz.jar" width=400 height=40>
<PARAM name="cabbase" value="dotz.cab">
<PARAM name="item0" value="Hello">
<PARAM name="item1" value="Hello">
<PARAM name="item2" value="world">
<PARAM name="item3" value="<item1> <item2>">
<PARAM name="animation0" value="enter,top,<item0>,20:<item0>,20">
<PARAM name="animation1" value="align,<item0>,<item1>,20&morph,<item0>,<item2>,20">
<PARAM name="animation2" value="<item3>,20">
<PARAM name="animation3" value="twirl,out,<item1>,20:delay,40&<item2>,20:sweep,out,<item2>,40"> </APPLET>

These are all animations:
Delaying:
'delay',time
Scrolling in or out (If using angle, 0 is top and 90 is right):
'enter' or 'leave','top' or 'bottom' or 'left' or 'right' or angle,item,time
Morphing an item into another:
'morph',item,item,time
Moving an item to the position of another:
'align',item,item,time
Twirling in and out:
'twirl','in' or 'out',item,time
Sweeping in and out:
'sweep','in' or 'out',item,time
That's all for now.

<APPLET code="Dotz.class" archive="dotz.jar" width=400 height=40>
<PARAM name="cabbase" value="dotz.cab">
<PARAM name="bgcolor" value="003F7F">
<PARAM name="item0" value="single">
<PARAM name="item1" value="color">
<PARAM name="item2" value="<item0> <item1>">
<PARAM name="color2" value="FFFF00">
<PARAM name="item3" value="gradient">
<PARAM name="color3" value="gradient,007FFF,FFFFFF">
<PARAM name="item4" value="color">
<PARAM name="item5" value="<item3> <item4>">
<PARAM name="color5" value="gradient,FFFF00,FF0000">
<PARAM name="animation0" value="enter,top,<item0>,20&enter,bottom,<item1>,20">
<PARAM name="animation1" value="<item2>,20">
<PARAM name="animation2" value="morph,<item0>,<item3>,20&align,<item1>,<item4>,20">
<PARAM name="animation3" value="<item5>,20:twirl,out,<item5>,20">
</APPLET>

To set the background color of the applet you can use the bgcolor parameter and fill in a hexcolor code. Every item can also have it's own color. This can be a single hexcolor code or a gradient. A gradient needs a top hexcolor code and a bottom hexcolor code. The color of an item overrides the color of the item it's referenced in. As you can see the morph and align actions automaticly fade the colors.

<APPLET code="Dotz.class" archive="dotz.jar" width=400 height=40>
<PARAM name="cabbase" value="dotz.cab">
<PARAM name="item0" value="previous">
<PARAM name="item1" value="tutorial">
<PARAM name="item2" value="<item0> <item1>">
<PARAM name="link2" value="dotztutorial7.html">
<PARAM name="target2" value="tutorial">
<PARAM name="item3" value="next">
<PARAM name="item4" value="tutorial">
<PARAM name="item5" value="<item3> <item4>">
<PARAM name="link5" value="dotztutorial9.html">
<PARAM name="target5" value="tutorial">
<PARAM name="animation0" value="sweep,in,<item2>,50:<item2>,20">
<PARAM name="animation1" value="morph,<item0>,<item3>,20&align,<item1>,<item4>,20">
<PARAM name="animation2" value="<item5>,20:leave,135,<item5>,20">
</APPLET>

Every item can have it's own link and target simply by adding a link and target parameter. To have the link shown in the top frame, put '_top' in the target parameter. To show it in a new frame, use '_blank'.

This is hand.gif:

Another option is to create dots out of an image. To do this you should us the image parameters. Here you should fill in the name of the image, the transparent color, the number of frames and the scale factor. The frames should be placed next to eachother. Of course a single frame is also possible. If you've created them you can reference them unlimited in the item parameters. If you use a normal image, you should set the scale factor to at least 3. Note that the colors in the image are not changeable with a color parameter.

<APPLET code="Dotz.class" archive="dotz.jar" width=400 height=40>
<PARAM name="cabbase" value="dotz.cab">
<PARAM name="fontimage" value="dotfont.gif,000000,82,4">
<PARAM name="dotstyle" value="block">
<PARAM name="item0" value="Block style!">
<PARAM name="animation0" value="sweep,in,<item0>,80:<item0>,20:sweep,out,<item0>,80">
</APPLET>

You can change the style of the dots with the dotstyle parameter. There are three styles available: 'default', 'block' and 'open'. Try them and choose your favorite.

If you're an advanced user, you can also change the font. Just use the fontimage parameter the way you use the image parameters and use the fontstring parameter to enter the string the image represents. Note that the characters '<', '>' and ' ' can't be used. In this example I just changed the scale factor from it's default 3 to 4. If you've made a nice font you can add it in the download section.

Back to the dotz applet page

Applet Index
(sorted alphabetically)
A B C D E F G H I J K
L M N O P Q R S T U
V W X Y Z #s

The Java Source
(applets w/source code)
A B C D E F G H I J K
L M N O P Q R S T U
V W X Y Z

How to Add Java Applets to Your Site

New on the Java Boutique:

New Review:

Time Management Made Easy with the Quartz Enterprise Job Scheduler
Why not just use the Java timer API? This open source scheduling API boasts simplicity, ease-of-integration, a well-rounded feature set, and it's free!

New Applet:

Reverse Complement
Reverse Complement is a simple applet that converts DNA or RNA sequences into three useful formats.