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
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.
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
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
call in the
of your document,
at the location you want the scene to appear. The tag should look like;
Order of functions
It's very important to call the traingifSetup functions in the correct order. You must call
, and you must call createTrack
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.
Finally, you need to download several files, and place them in the same directory as your HTML
, which contains
One of these is
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.
You should place this line in the <HEAD>
immediately after your traingifSetup
This line goes at the very bottom of your document, just before the
This is the result of the examples on this page.