Hypertext Animation FAQ

Before we get into it, instead of doing this manually, there is a program which will do this all for you.

Animation to Hypertext Converter Version 1.5 -- 25 kilobytes

The most common question is.... How? Well my friend, it is simple! All you need to do is draw a few frames of ascii art to be animated, and then slap it between some javascript :)

How the hell do I draw frames of ascii art?? Well that's a longer story. I guess ya just got it or ya don't!

Okay, so how do I write the Javascript? Well, good news! Ye don't!! I've done it :) Just use this:


<script language="JavaScript">
<!-- Begin animation ---
var frame_count=0;
var nl="\r\n";

function Animate()
{
        document.animation.viewer.value = cartoon[frame_count];
        if (cartoon[++frame_count]==null) frame_count = 0;
        // Remove "//" from start next line to show it a frame at a time.
        // if(confirm('continue?'))
        setTimeout("Animate()", 100);  // Change number here to change speed
}

var cartoon = new Array(

This is where you shall put your animation, with the
following modifications:

First, in this order:

Replace all \ with \\
then replace all " with \"

And then

End each line with \r\n"+
Put a " at the start of every line,
End each frame with a ","
End the last frame with... nothing.

Example: "line 1\r\n"+ "line 2\r\n"+ "line 3\r\n", Next frame... );// ---- End animation script -----> </script> Now just add this hypertext - the area where the animation wil be animated. <FORM NAME=animation> <center><TEXTAREA NAME=viewer ROWS=11 COLS=60></TEXTAREA></center> </FORM> And add an onload attribute to the BODY tag so the animation will start, eg <BODY text=white bgcolor=black onload=Animate()>

Problems: When the animation gets large, maybe around 30 kilobytes (it's unknown exactly what size), the javascript will start producing errors for some reason on 16 bit netscapes. You can fix this by splitting the animation into separate variables. This involves replacing this line:

if (cartoon[++frame_count]==null) frame_count = 0;

with:

if (cartoon[++frame_count]==null)
{       // Switch cartoon variables.
        var temp=cartoon; cartoon=next; next=temp;
        frame_count = 0;
}

If splitting the variable into two still doesn't work... keep going. All you need is to slightly modify the "switching cartoon variables" line in the javascript for each additional split.

This sounds like a lot of work!! Heeeeelp me?? Well since you asked, there's a program which does all of this for you :)

Animation to Hypertext Converter Version 1.5 -- 25 kilobytes

I have also made a small program to help you test your frames before converting them to hypertext. It's just a small DOS program that animates the frames

Ascii Art Animator Version 1.1 23.2 kb
The following zip contains a few files you can test it on:

Examples

Hint: This method can also be used to display a flasing text message. (If it's only one line, change the TEXTAREA to an INPUT tag)

This page was updated on the 27th of August, 1997
The Great Ascii Art Library