Using Layers in Train Gif Scenes
Introduction
Planning for Layers in a Train Gifs Scene
<marquee> Tag Layering
javaScript Layering
References and Links
Introduction
Thanks to HTML, we can place one object in front of, or behind, other
objects. This is the effect that has one train passing in front of
another. The technique for doing so takes advantage of layering.
Just as your Mom baked a layer cake, with one layer atop another, we can do the
same in HTML, with one object atop another. There are several ways to
approach layering mechanically, but we shall only work with 2: Layering
within the <marquee> tag, and using
layering via Brian Clough's approach to javaScripted train gif scenes. The
structural effect is really the same, so let's first talk about layering in
general.
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.
Back to the top
Planning for Layers in a Train Gifs Scene
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.
Assume the following bit of coding (this example is for a javaScripted scene,
but the effect is the same when working with the <marquee> tag):
placeStatic("building.gif",0,0,bottom,1);
createTrack("throatIn",7,2);
createTrack("throatout",7,3);
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:
placeStatic("building.gif",0,0,bottom,1);
placeStatic("signalMast.gif",0,150,bottom,2);
createTrack("throatIn",7,2);
createTrack("throatout",7,3);
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:
placeStatic("building.gif",0,0,bottom,1);
placeStatic("signalMast.gif",0,150,bottom,2);
createTrack("throatIn",7,3);
createTrack("throatout",7,4);
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:
placeStatic("building.gif",0,0,bottom,5);
placeStatic("signalMast.gif",0,150,bottom,10);
createTrack("throatIn",7,15);
createTrack("throatout",7,20);
Now, suppose you want to add another signal mast between
the 2 tracks:
placeStatic("building.gif",0,0,bottom,5);
placeStatic("signalMast.gif",0,150,bottom,10);
createTrack("throatIn",7,15);
placeStatic("signalMast.gif",0,170,bottom,17);
createTrack("throatout",7,20);
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.
Back to the top
javaScript Layering
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.
Back to the top
<marquee>
Tag Layering
Compared to working in javaScript, I think identifying the z-index of
different layers is somewhat awkward, but not particularly complicated.
The <marquee> tag should not stand
alone -- it needs to be in a container, such as <div> or <p>.
The specification of the z-index is done in the container tag, not the
<marquee> tag. Here is an
example:
<div id="bugtussleLeft" style="z-index:1">
<p>
<img src="building.gif" />
</p>
</div>
<div id="movingEngine" style="z-index:2">
<marquee>
<img src="engineLeft.gif" />
</marquee>
</div>
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!
Back to the top
References and Links
HTML. The best reference I've found is HTML Unleashed (Second
Edition), 1999, Sams Publishing. Available from Amazon dirt cheap --
get a used one.
javaScript Tutorials. Brian Clough's tutorials are
here .
Dr. Clue's scripts are available thru Brian Clough's site.
Frograil Gif Tutorials home page is here.
|
