The Train Gif JavaScript Tutorial

Basic Scenes

Several steps are necessary to create a basic scene, and add it to your page. You must define...
  1. A "scene"
  2. A "consist", containing at least one Train Gif
  3. A "track"
  4. A "train"
  5. A location, inside the body of your document, where you want the scene to appear


traingifSetup functions

You must define the first four items in a script function called traingifSetup(). Put this function in the HEAD portion of your HTML file. Below is an example of a traingifSetup function, containing the calls necessary to create items 1-4 in the above list.

<SCRIPT>
< !--
function traingifSetup()
{
createScene("demo");
createConsist("MBTAdemo", "MBTAgp40mcright.gif");
createTrack("east", 0, 1);
createTrain("Commute1", "MBTAdemo", Right, 30, 2);
}
//--
>
</SCRIPT>


The first step in creating an animated scene is to initialize the scene object. You do this by calling createScene.

Before you can create a train inside your scene, you must define a consist, which is the set of images that will make up the visual representation of the train, using the createConsist function.

A track is a logical construct that represents the relative location of a group of trains, and is defined with createTrack.

A train (created using createTrain) is a consist moving along a track.

Placing the scene on the page

Next you need to reserve a place on your page for the scene. To do this, place a locateScene call in the <BODY> of your document, at the location you want the scene to appear. The tag should look like;
<SCRIPT> locateScene("demo", 25)</SCRIPT>

Order of functions

It's very important to call the traingifSetup functions in the correct order. You must call createTrain after createTrack, and you must call createTrack and createConsist after createScene.

Any train you create will be assigned to the most recently defined track. So, if you want to define a scene with two tracks, and you enter the following information into traingifSetup;

createTrack("east", 2, 1);
createTrack("west", 3, 1);
createTrain("east1", "demoTrain1", Right, 30, 2);
createTrain("east2", "demoTrain2", Left, 30, 2);
createTrain("east3", "demoTrain3", Right, 45, 2);
createTrain("west1", "demoTrain1", Right, 45, 2);
createTrain("west2", "demoTrain2", Left, 60, 2);
createTrain("west2", "demoTrain3", Left, 60, 2);


In this case, all trains will be assigned to the "West" track. For the trains to get assigned properly, these lines must be arranged as follows;

createTrack("east", 2, 1);
createTrain("east1", "demoTrain1", Right, 30, 2);
createTrain("east2", "demoTrain2", Left, 30, 2);
createTrain("east3", "demoTrain3", Right, 45, 2);
createTrack("west", 3, 1);
createTrain("west1", "demoTrain2", Right, 45, 2);
createTrain("west2", "demoTrain3", Left, 60, 2);
createTrain("west2", "demoTrain1", Left, 60, 2);

Also note that consists can be re-used, even on another track.

Script files

Finally, you need to download several files, and place them in the same directory as your HTML file.

First, you need the TrainGIF Javascript Zip File, which contains two Javascript files. Unzip these two files into your directory.

One of these is Dr. Clue's Javascript DHTML library which provides support functions. Follow the link for the most recent version of this file.

To include these scripts into your document, add the following lines.

<SCRIPT TYPE="text/javascript" LANGUAGE="javascript1.2" SRC="tgjsp2.js"></SCRIPT>
You should place this line in the <HEAD> section, immediately after your traingifSetup function.

<SCRIPT TYPE="text/javascript" LANGUAGE="javascript1.2" SRC="jsDHTMLlib.js"></SCRIPT>
This line goes at the very bottom of your document, just before the </BODY> tag.

This is the result of the examples on this page.