This tutorial is written by llizard

Making a finite JavaScript ASCII-animation

revised September 1999

There are four parts to this lesson. This fourth part is on how to make a finite animation. The first is the basic template. The second is on optimizing. The third is how to place more than one animation on one page.

Perhaps it is driving you mad that that bird WON'T stop singing. You can make the bird stop by making the animation finite.

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 Daniel Hunt's finite JavaScript animation and hope that he doesn't mind my broadcasting it about.) If you use the finite script, please ensure that you give due credit to Daniel Hunt. 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.

You'll see that while this bears similarities to the basic template, it is rather different. This is how the coding looks for the above animation:

      .................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 starting and stopping singing</b> --ejm98,99

<script type="text/javascript">

<!-- // hide script
    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,

"   \<\") "+a,

"   \>\") "+a,

"   \<\") "+a

        );
        var x=0;
        function tick() {
                document.f.t.value=" "+a+
        tl[x]+
        "   ( \>\\"+a+   
        "    \" \\\\"+a+
        "       \\  ejm"+a;
                tl[x];
                x++;
                if (x!=max)
                setTimeout("tick()", 70);
                else
                x=0;
        }
// end -->

</SCRIPT>

<FORM NAME="f">
<TEXTAREA NAME="t" ROWS="6" COLS="15"></TEXTAREA>
</FORM>

<FORM>
<INPUT TYPE="BUTTON" NAME="Display" VALUE="Replay" onClick="tick()">
</FORM>
<p>Many thanks go to <A HREF="http://www.mcs.drexel.edu/~udhunt0/ascii.html"
target="_top">Daniel Hunt</A> for the javascript coding that allows a finite
animation.</p>

<P>To <A HREF="http://www.crosswinds.net/~llizard/animations.htm
target="_top">llizard's Javascript ASCII-animations</A></P>

</BODY>

</HTML>

      ............................end copy..........................


Please review the lesson on optimization if you are having trouble inserting your own animations into this template.

bird starting and stopping singing --ejm98,99

Many thanks go to Daniel Hunt for the javascript coding that allows a finite animation.


                 \ 
                  \,^^%---
                  <\/  \ See? It's easy when you know how....
                  >
                  >^^
                 /| 
ejm98            | \

Oh, yes, and one last reminder, Javascript animations can only be viewed with Netscape3, Opera 3.2b2 and Microsoft Explorer 4 (or higher) that have the Javascript enabled.



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 in the newsgroup. Please do not post your whole animation there.