Astro
Lesson #37:
a.layer.in.time.is.just.fine
As if it wasn't enough for Retrogrrl to go playing with Layers. Now
she's gone and tinkered with Timelines. Actually, Timelines are an
extension of Layers so they aren't really that big a deal.
tick.tock
Timelines are commonly used to create animated movement or actions
based on some sequence of events. They manipulate Layers, which we
chatted about in the previous astro lesson.
If we remember that Layers are 'containers' for HTML or any other
content - images for instance - we will also remember that we can
position them to precise coordinates on the page.
Ah ha! Now, if we can change those coordinates to coincide with something
that happens - well, then we have a Timeline.
time.to.move
Whoops! How did this candid camera shot of RG get here - quick click
it before she sees it!
Phew! That was close ...
What on earth just happened?
?
Layers! The photo was on a layer and, using ever trusty Dreamweaver
we added it to a Timeline. We moved the layer around the page and
recorded the resulting path - or line of movement. Then we added a
behaviour - something that happens as a result of something else -
in this case the act of clicking the picture starts the Timeline.
Here's what the code looks like:
<div
id="Layer1" style="position:absolute; width:200px;
height:115px; z-index:1; left: 125px; top: 754px">
<img src="../retrogrrl.jpg" width="215" height="187"
name="Image1" onClick="MM_timelinePlay('Timeline1')">
</div>
You can see that the <div> information is much the same as
an ordinary layer and inside the div is an image - attached to the
image is an onClick javascript command which forces the Timeline to
play. The actual Timeline information is held in the head of the page
and involves a complexity of coordinates gathered by Dreamweaver.
Check the source of this page to see it.
The Timeline works by adding 'keyframes' - points on a line where
information changes (for instance, the position of the Layer). This
is the way most high end animation programs, such as Macromedia Flash,
also operate - Timelines and Keyframes mark out what is supposed to
happen and when.
lunch.time
Although that bit of trickery was very fine, its not easy to think
how it could be of much use on a web page - apart from scaring the
neighbours with piccys of Retrogrrl in compromising situations.
However, Timelines can be extremely effective when used with menus.
Let's drag out the example menu we used in the last
lesson and do something spiffy with it. Check
it out.
If your thinking cap is on you'll realise that everything is as it
was before, except that the menu buttons are in their own Layer, which
has been added to a Timeline. The Timeline only operates once you
click the text 'menu'. Smashing.
avoiding.the.void
An important point: IE5 and Netscape Navigator play hard to get when
you use an empty link to attach javascript behaviours in order to
make something happen, but not take you to another page. We'll explain.
Javascript needs to be 'anchored' to something in order for it to
do its stuff. Normally you attach it to a link - such as <a href="fred.html>
Meet Fred </a>.
Now this is fine if you want 'Meet Fred' to be a clickable
link that takes the clicker to a new page or a popup window. What
if you want the javascript to begin when the mouse is clicked or when
the words are moused-over but you don't want this to result in a new
page. You want the action to happen right here on this page - just
like our timeline example of RG in all her glory?
Normally you use a # (hash) link which creates an anchor that goes
nowhere, but Javascript can be applied as normal. This looks like
<a href="#"> Meet Fred </a>. Fine. This
is great. HOWEVER - IE 5 and NN think there is more than meets the
eye and they go off to look for more information about what to do
next - in actual fact they jump to the top of the page seeking directions
in the <head> tags. There ain't no directions to be had but
what do they know? And then the visitor doesn't get to see what is
happening because all they now see is the top of the page. Boring.
Solution: You need to tell these over officious browsers that they
don't have to go to anymore trouble and can chill out. To do this,
instead of using hash (#) you need to insert a Javascript thingy that
says "that's it boys - relax and don't do nuthin apart from what
the javascript says.
The thingy is javascript:void(null) and would therefore look like
so -
<a href="javascript:void(null)"> Meet Fred
</a>. Simple, but of course as usual it took RetroGrrl a week
to work this one out. Sigh.
**don't use void(0) as this causes IE5 to leave the room screaming....
finally
And there you have it. Now, these 2 lessons on Layers and Timelines
were really just to introduce the concepts involved. If you like the
look of them, programs such as Macromedia Dreamweaver or Adobe GoLive
Cyberstudio can make the creation process a cinch.
DHTML can be pretty buggy across browsers so make sure you test everything
well. Netscape Nukenator in particular is just plain nasty when it
comes to Layers - in particular it simply has a hissy fit with Nested
Layers, so avoid them at all cost. Until next time when Retrogrrl
shows you something else.
next.pod
