This tutorial is written by llizard
Optimizing your Javascript ASCII-animation
revised September 1999
There are four parts to this lesson. This second part is on optimizing. The first is the basic template. The third is how to place more than one animation on one page. The fourth part is on how to make a finite animation.
Perhaps your animation has similar lines in each frame. You can optimize it and substantially reduce the size (always a good thing) making it much faster to load.
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.
Note that the above animation always has these lines the same.
|_____| ===-^^>
--- == \/ >
[_____] __>,^
ejm | | //| |
Instead of repeating all the lines of the drawing in each one of the frames, it is only necessary to put in the varying lines of the drawing.
This is how the coding looks for the above animation:
<HTML>
<HEAD>
<TITLE>your title here</TITLE>
</HEAD>
<body bgcolor="#FFF6E9" text="#660000" link="#3366ff" Alink="LLIZARD"
Vlink="#333399"" onload="tick()">
<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+
" _/ | z"+a,
" "+a+
" ___ z"+a+
" _/ |"+a,
" z"+a+
" ___ "+a+
" _/ |"+a
);
var x=0;
function tick() {
document.f.t.value=" "+a+
tl[x]+
" |_____| ===-^^\>"+a+
" --- == \\/ \>"+a+
" [_____] __\>,^"+a+
"ejm | | //| |"+a;
x++; if(x==max) x=0;
//if(confirm('continue?'))
setTimeout("tick()",250);
}
// end --></script>
<FORM NAME="f"><TEXTAREA NAME="t" ROWS="9" COLS="27">
<P><B>To <A HREF="http://www.crosswinds.net/~llizard/animations.htm">
llizard's Javascript ASCII-animations target="_top"</A></B></P>
</BODY>
</HTML>
|
If the top line(s) in your animation are the same, add them before the variable:
);
var x=0;
function tick() {
document.f.t.value="first line "+a+
"second line (and so on) "+a+
tl[x];
x++; if(x==max) x=0;
//if(confirm('continue?'))
setTimeout("tick()",100);
If the bottom line(s) in your animation are the same, add them after the variable:
);
var x=0;
function tick() {
document.f.t.value= tl[x]+
"lower line "+a+
"lower line "+a+
"lower line "+a;
x++; if(x==max) x=0;
//if(confirm('continue?'))
setTimeout("tick()",100);
If you want to keep the middle lines the same and change the top and bottom, use the following coding:
);
var x=0;
function tick() {
document.f.t.value="first line "+a+
tl_top[x]+
"middle line "+a+
"middle line "+a+
"middle line "+a+
tl_bottom[x]+
"bottom line "+a;
x++; if(x==max) x=0;
//if(confirm('continue?'))
setTimeout("tick()",100);
Oh yes, one more thing:
With this coding, you can only have one Javascript animation running per page.
But it is possible to have more than one animation running on a page. Please go to Part 3 of my Javascript ASCII-animation lesson.
Oh, yes, and remember, Javascript animations can only be viewed with Netscape Navigator 3.01, Opera 3.2b2 and Microsoft Explorer 4.0 (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.
\
\,^^%---
<\/ \ See? It's easy when you know how....
>
>^^
/|
ejm98 | \
Many thanks to The Omega in The Omega's Javascript Help Forum for revising the Javascript coding and basically writing the above explanation so that an animation can take much less time to load.