What should I have in the animation file?
You have two choices: coordinates, regular or a mixture between the two.
A regular animation consists of a series of frames in succession.
A coordinate animation consists of a series of coordinates and ascii characters.
The animation file should start of with a line like:
2,2,100,coord
or
2,2,100,regular
followed by a return. No spaces should be before or after the commas or after the bit that says "coord".
The "2,2" means that we want an animation two characters across by two down.
"100" is a speed setting, and 100 is pretty fast. 1000 works out at one frame per second. Feel free to do the maths.
"regular" means do a frame-by-frame animation, "coord" means to do a coordinate animation.
Now, read on to find out the rest...
What do I put in for a regular animation, then ?
OK, we have started with the line:
2,2,100,regular
We now populate the animation file with the individual frames.
In the example below, I have replaced blank spaces (" ") with hyphens ("-").
--
--
.-
--
..
--
..
-.
..
..
This would produce a simple animation that traces a 2x2 box with full stops (".").
Note that there are no spaces between the frames, and that everything, including spaces, is typed out.
That seems like hard work. What's the coordinate system like?
The coordinate system seems hard at first, but is perfect for tacky animations like the one above.
All you need to put down is what pixel changes at what location each frame.
The format for this is:
0!0!.¦3!3!.
This seems rather abstract, and you're right - it is... but at the same time it works rather well.
The above piece of code simply says "On this frame, set the character at "0,0" to ".", and set the character at "3,3" to "."".
This is why it's called the coordinate system. In a 4 by 4 grid, you start at 0 and work up to 4 across, as you do to four down.
The format for each frame is thus:
XLocation ! YLocation ! Character ¦ XLocation ! YLocation ! Character ¦ ... and so on
Of course, spaces must be removed.
Incidentally, the "¦" character is not the "|" or "pipe" character.
It is the character that comes from pressing alt-gr, top-left-hand-buttun-under-escape...
... or in other words, also produces "¬", and is responsible for the backtick (`) character.
For an example, let's try and do the same animation that we did above...
0!0!.
1!0!.
1!1!.
0!1!.
Note that we have no need for the ¦ character in this case, because we're only changing on pixel per frame.
What do I need to put on my webpage to get the animation working ?
First things first, somewhere in the <head> area of your HTML, you need to
include the tojam javascript source. You can do this by using the following bit
of code:
<script language="javascript" src="tojam.js"></script>
Now, somehow we have to be able to read in the animation file. This isn't possible using javascript alone, so I have hacked together a java applet that contains the functions we need.
This code must NOT be altered in ANY way!
<applet name="ReadFile" code="ReadFile.class" width="0" height="0"
MAYSCRIPT></applet>
Next, we need to include the textarea box that will house the animation. Design your page as you desire, and where you want the animation, place this HTML:
<form action=#>
<TEXTAREA name=formAnimArea wrap=soft cols=1 rows=1>
</form>
Lo and behold! The animation in the source file (animSrc.txt) will now be played... provided that the animation is valid (a whole different issue)
Very nice. Are there any other features to worry about?
You can enter specific keywords in to your animation file, between frames, that
will alter how your animation is played.
These keywords are case sensitive.
PAUSE delay
Replace the word 'delay' with an integer, the size of
which is the pause you require in miliseconds.
LOOP
Surprisingly, this will cause the animation to loop back to the start of the
animation... forever.
SPEED newspeed
Replace the word 'newspeed' with the speed you now wise the animation to play
at.
CLEAR
Another difficult one, this. Clears the screen.
TYPE animtype
Replace the word 'animtype' with the type of animation you wish to change to.
animtype may be either coord or regular, as explained above.
BG
This keyword specifies that you wish to replace the entire
animation screen up to this point with one frame that follows on the next line
down from this keyword. The frame will be of the same format as those
frames used in the regular animation type. If you don't understand this, it's
unlikely that you'll need to.