Using Layers in Train Gif Scenes
All layer effects in HTML documents use what is referred to as the "z-index" (don't ask me why we have to put up with such a goofy name -- it's just the way it is -- it's the third dimensional axis). The bottom of the scene has a z-index of 1. Assume that's a building, and we can then add a tree with a z-index of 2, and the scene will display as a building with a tree in front of it. Add a train with a z-index of 3, and you'll have a scene that has a building with a tree in front of it, and a train in front of both of them.
At its simplest, a train with a z-index of 2 will cross "in front of" a train with a z-index of 1, but what really happens is that the train with the highest z-index will cross "on top of" one with a lower z-index.
When you plan a train gifs scene, you probably want to start adding locomotives, cars, scenery, etc., right away. Before you do that, however, you had better do some layer-related planning. Once you have a lot of coding done and your trains and buildings are getting layered to give you a pleasant scene, if you decide to add a layer to allow an additional building or group of trees in the background, you must change all z-index coding above the new layer.
This coding has created objects on 3 layers (the last number in the placeStatic and createTrack functions is the z-index, you can disregard the other numbers, as they have nothing to do with layering): We have a building (z-index = 1), a track in front of the building, and another track in front of that track. Pretty simple. Suppose we want to put a signal mast in front of the building:
We now have a problem, in that a track and the signal mast are on the same z-index (2), and the scene will not render. We have to change all layers as follows:
This was pretty simple, but in real life, a fairly substantial scene may have many layers and adding a new one near the bottom of the scene will result in a lot of grunt work. Getting all z-indices correct is a tedious, hair-pulling process. Here's how to avoid the problem: Make your lowest z-index equal to 5. Make the next one equal to 10, etc, such as:
Now, suppose you want to add another signal mast between the 2 tracks:
We now have 5 layers, with z-indices of 5, 10, 15, 17, and 20, respectively. We have lots of vacant layers we can add, and no existing z-indices will have to be changed.
Before you begin to add trains and other images to your scene, sketch it out on a piece of scratch paper. Figure out what objects will be placed where, and what has to be in front of what else. When you've got a pretty solid idea of what layers will be needed, write down the different layers and their assigned z-index, and then you can start to code, and you'll probably not have to go back and do major re-numbering of your z-indices.
Identifying and working with layers using Brian Clough's tutorials is very easy. There are 2 types of objects that are called in the scripting: stationary and moving. The stationary function call is placeStatic, and the moving function call is createTrack.
placeStatic("building.gif",0,0,bottom,5); This puts the image building.gif 0 pixels from the bottom and 0 pixels from the left margin on the bottom of the scene on z-index 5.
createTrack("throatout",7,20); This creates a track named "throatout" upon which listed trains will run, and the track is 7 pixels from the bottom of the scene. The z-index is 20. [Note that for the createTrack function call to work, you must have at least one train in the track.] createTrack can be used for any moving object. In the Wood Products Scene, I used the function to create a 2-lane road for woodchip and log trucks in and out of the plant, as well as an overhead track to shuffle woodchips in and out of the chip mill.
<div id="bugtussleLeft" style="z-index:1">
<div id="movingEngine" style="z-index:2">
There are other things that should be specified in the <div> tag, but they are not relevant to this tutorial, and are omitted for clarity. Note that the gif of the building will be "behind" the engine, which will be on the 2nd layer. Be careful to close your container tags as well as your <marquee> tag, or strange things will happen to your display!
HTML. The best reference I've found is HTML Unleashed (Second Edition), 1999, Sams Publishing. Available from Amazon dirt cheap -- get a used one.
Frograil Gif Tutorials home page is here.