llizard's ascii art animation tutorial, part 3

This tutorial is written by llizard

You CAN have more than one Javascript ASCII-animation on a page.

revised September 1999

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

So far I only know that this multiple animations on one page aspect works for MSIE 4 and Netscape Navigator 3.04, but I'm assuming that it will work for anyone who can view JavaScript ASCII-animations.

Many thanks to CJRandall for writing the JavaScript code and 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.

bird singing --ejm98

llizard sleeping --ejm98

You'll see that while this bears similarities to the basic template, it is rather different.


.................Copy between dotted lines.................

<HTML>
<HEAD>
    <TITLE>your title here</TITLE>
</HEAD>
<body bgcolor="#FFF6E9" text="#660000" link="#3399ff" Alink="LLIZARD" 
Vlink="#3366cc" onload="animation()">

<script type="text/javascript"><!--\\ ::: main :::
<!--
    var agt=navigator.userAgent.toLowerCase();
    if (agt.indexOf("mac") != -1) { var a="\r"; } else { var a="\n"; }
function animation()
{
        tick_1();
        tick_2();
}

//--></script>

<p><b>animation #1 title</b></p>

<script type="text/javascript"><!--// ::: anim one :::

    var max_1=0;  // this is frame_max
    var x_1=0;    // this is frame_counter

    function tick_1()
    {
        document.form_1.text_1.value="1st line (that remains identical)"+a+
        tl_1[x_1]+
        " 3rd line (that remains identical)"+a+
        " 4th line (that remains identical)"+a+
        " 5th line (that remains identical)"+a;

        x_1++; if ( x_1 == max_1 ) x_1=0;

        //if(confirm('continue?'))
            setTimeout("tick_1()",70);
    }

    function tlist_1()
    {
        max_1=tlist_1.arguments.length;
        for (i=0; i < max_1; i++)  this[i]=tlist_1.arguments[i];
    }

    tl_1 = new tlist_1(

" 2nd line"+a,

" 2nd line"+a;

);

//--></script>

<FORM NAME=form_1><TEXTAREA NAME="text_1" ROWS="6" COLS="15">
</TEXTAREA></FORM>

<p><b>animation #2 title</b></p>

<script type="text/javascript"><!-- ::: anim two :::

    var max_2=0;
    var x_2=0;

    function tick_2()
    {
        document.form_2.text_2.value=tl_2[x_2]+
        "4th line (that remains identical)"+a+
        "5th line (that remains identical)"+a+
        "6th line (that remains identical)"+a+
        "7th line (that remains identical)"+a;

        x_2++; if ( x_2 == max_2 ) x_2=0;

        //if(confirm('continue?'))
            setTimeout("tick_2()",250);
    }

    function tlist_2()
    {
        max_2=tlist_2.arguments.length;
        for (i=0; i < max_2; i++)  this[i]=tlist_2.arguments[i];
    }

    tl_2 = new tlist_2(

" 1st line"+a+
" 2nd line"+a+
" 3rd line"+a,

" 1st line"+a+
" 2nd line"+a+
" 3rd line"+a,

" 1st line"+a+
" 2nd line"+a+
" 3rd line"+a

    );

//--></script>

<FORM NAME=form_2><TEXTAREA NAME="text_2" ROWS="8" COLS="27">
</TEXTAREA></FORM>

<p>Many thanks to <a href="http://www.shieldwolf.demon.co.uk/art-glry.htm#ascii-anim"
target="_top">CJRandall</a> for writing the Javascript code and miK for altering the
line endings so that it can be viewed on most platforms.</p>

<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..........................

As you can see, you could continue on with a third, fourth, fifth, etc, etc. animation, if you wanted.

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

You may not want your animation to loop incessantly. Please go to Part 4 of my Javascript ASCII-animation lesson.

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

Oh, yes, and remember, 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.

Veronica's Homepage

You CAN have more than one Javascript ASCII-animation on a page.

revised September 1999