This tutorial is written by llizard
So you want to make your own animation!
revised September 1999
There are four parts to this lesson. This first part is the basic template. The second is on optimizing. The third is how to place more than one animation on one page. The fourth part is on how to make a finite animation.
Here is a template you can copy and paste into a text document. (Please note that I did not write the JavaScript. I copied the script from an unknown artist's Javascript animation and hope that that person doesn't mind my broadcasting it about.) Many thanks to miK for altering the line endings so that it can be viewed on most platforms.
I have just been doing some reading about JavaScript. Apparently some bozos have decided that <script language="JavaScript"> is deprecated. They prefer <script type="text/javascript"> now. I have altered the template to reflect that change.
.................Copy between dotted lines.................
<HTML>
<HEAD>
<TITLE>your title here</TITLE>
</HEAD>
<body bgcolor="#FFF6E9" text="#660000" link="#3366cc" Alink="LLIZARD"
Vlink="#333399" onload="tick()">
<b>bird singing</b> --ejm98
<script type="text/javascript">
<!-- hide from older browsers
var agt=navigator.userAgent.toLowerCase();
if (agt.indexOf("mac") != -1) { var a="\r"; } else { var a="\n"; }
var max=0;
function tlist(){ max=tlist.arguments.length;
for(i=0;i<max;i++) this[i]=tlist.arguments[i];
}
tl = new tlist(
" "+a+
" \<\") "+a+
" ( \>\\ "+a+
" \" \\\\ "+a+
" \\ ejm"+a,
" "+a+
" \>\") "+a+
" ( \>\\ "+a+
" \" \\\\ "+a+
" \\ ejm"+a
);
var x=0;
function tick() {
document.f.t.value=tl[x];
x++; if(x==max) x=0;
//if(confirm('continue?'))
setTimeout("tick()",70);
}
// end-->
</script>
<FORM NAME=f><TEXTAREA NAME="t" ROWS="6" COLS="15">
</TEXTAREA> </FORM>
<P><B>To <A HREF="http://www.crosswinds.net/~llizard/animations.htm target="_top"">
llizard's Javascript ASCII-animations</A></B></P>
</BODY>
</HTML>
............................end copy..........................
The body bgcolors (background), text and link colours can be changed to any you like. Consult a colour chart for hexidecimal numbers.
Erase the above birds and insert your frames there. All frames must have the same number of lines. (If your drawing extends to 8 lines tall, all of the drawings must be 8 lines tall.) There are the two frames of the singing bird to show you what it looks like. Each line must begin with a " (quotation mark). Each line except the last line of all frames must end with "+a+ (quotationmark, plus sign, lowercase a, plus sign). The last line of each frame except the last frame must end with a "+a, (quotation mark, plus sign, lowercase a, comma). The last line of the last frame must end with a "+a (quotation mark, plus sign, lowercase a) N.B. THERE IS NO COMMA AT THE END OF THE LAST FRAME.
Another important thing, any \ (backslash) in your drawing must be preceded by another \ (backslash) or you will have weird jumps in your animation. The same goes for any " (quotation mark) in the drawing. And apparently, for some people, you must do the same with any < and > (lessthan and greaterthan) and possible the + (plus sign). Precede each of them with a \ (backslash).
Here is how one of the frame pictures of the bird appears:
<")
( >\
" \\
\ ejm
This is how the frame would look when your animation was done:
" "+a+
" \<\")"+a+
" ( \>\\"+a+
" \" \\\\"+a+
" \\ ejm"+a,
The number after the words
setTimeout("tick()",70);
will adjust the speed. Change it to see what happens.
The numbers in this part
ROWS="6" COLS="17">
will adjust the size of the frame when you are viewing the animation. The ROWS is the number of lines in each frame and the COLS is the width of the frame.
It's a good idea to add a blank line at the top of your drawing so that you won't have unsightly scrollbar things (tantalizing people into thinking there is more to be seen) at the sides of the window of your animation. The blank line looks like " "+a+ (quotation mark, spacebar, quotation mark, plus sign, a, plus sign) You must have a space between the quotation mark and the end of the line or you will get a weird box and a jump in your animation. And then you should add 2 to the number in the "ROW" section. ie: If your original drawing is 5 lines tall, in your animation, it will be 7 lines tall.
Save your animation as an .html to view it. You label the animation "youranimationtitle.html" Remember, Javascript animations can only be viewed with Netscape 3, Opera 3.2b2 and Microsoft Explorer 4 (or higher) that have the Javascript enabled. They DON'T work at all in MSIE 3 because the font is proportional instead of fixed width.
bird singing --ejm98
\
\,^^%---
<\/ \ See? It's easy when you know how....
>
>^^
/|
ejm | \
I hope these instructions were detailed enough and/or not too detailed and that you can now go nuts making your own animations. Have fun and be forewarned; it's really time consuming.
But just in case you'd like some more detail, please go to part 2 of this lesson to learn about optimizing your animation.
With this scripting, you can only have one ASCII-animation per page. But go to part 3 of this lesson to learn how to put more than one animation on a page.
When you have made your Javascript ASCII-animation, please tell people about it. Put your animation onto your website and post the URL in the newsgroup alt.ascii-art.animation. Generally, Javascript ASCII-animations have a LOT of text so take up a tremendous amount of room (not to mention the distortion) in the newsgroup. Please do not post your whole animation there.