Basic Scenes
Several steps are necessary to create a basic scene, and add it to your page. You must define...
- A "scene"
- A "consist", containing at least one Train Gif
- A "track"
- A "train"
- 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>
<>
</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;
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;
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.
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);