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.
<APPLET code="Dotz.class" archive="dotz.jar" width=400 height=40>
<PARAM name="cabbase" value="dotz.cab">
<PARAM name="item0" value="Hello world">
<PARAM name="animation0" value="<item0>,20">
</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.
<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="item2" value="<item0> <item1>">
<PARAM name="animation0" value="enter,top,<item2>,20:<item2>,20">
<PARAM name="animation1" value="leave,left,<item0>,40&leave,right,<item1>,40">
</APPLET>
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'.
<APPLET code="Dotz.class" archive="dotz.jar" width=400 height=40>
<PARAM name="cabbase" value="dotz.cab">
<PARAM name="image0" value="hand.gif,000000,10,1">
<PARAM name="item0" value="<image0> cool!">
<PARAM name="animation0" value="<item0>,20">
</APPLET>
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
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.
Elsewhere on internet.com:
WebDeveloper Java
Lots of Java information on webdeveloper.com
WDVL Java
Thorough Java resource at the Web Developer's Virtual Library.
ScriptSearch Java
Hundreds of free Java code files to download.
jGuru: Your View of the Java Universe
Customizable portal with online training, FAQs, regular news updates, and tutorials.
|
