FrontPage 98 Animation

for Netscape 4.0

Yes, here it is!


(Pour la version française de ce texte, cliquer ici.)

You can now adapt most of your animations created by FrontPage98 for Netscape 4.0!   The following animations are supported: "Fly from Left", "Fly from Right", "Fly from Top", "Fly from Bottom", "Fly from Bottom-Left", "Fly from Bottom-Right", "Fly from Top-Left", "Fly from Top-Right", "Spiral".  The following animations may also be adapted in the case of left aligned paragraphs: "Fly from Top-Right By Word", "Fly from Top-Left By Word" and "Drop in by Word".   Only the ZoomIn et ZoomOut animations are not supported. 

1- Why my original FP98 animations don't work with Netscape 4.0?

The way NS4 supports DHTML differs from Internet Explorer 4 (IE4) in that you usually must have two pieces of code to perform DHTML - one for each browser.

To hide the text or picture before the animation begin, FP give it a horizontal displacement of 10000 pixels to put it out of the field of vision and put a piece of JavaScript code at the beginning of your document.  This code make the animation under IE4; for NS4 it only resets the horizontal displacement to 0 so as to bring into vision the previously hidden text or picture.  You can see this from the following extract:

if ((navigator.appName == "Netscape") &&
    (parseInt(navigator.appVersion.substring(0, 1)) >= 4))
{
    for (index=document.layers.length-1; index >= 0; index--)
    {
        layer=document.layers[index]
        if (layer.left==10000)
            layer.left=0
    }
}

return

2- Making the adaptation for Netscape 4.0

Of course, you can replace the above piece of code with someting more enjoyable for NS4:

First, replace the file C:\Program Files\Microsoft FrontPage\fpclass\animate.js (default location; yours may be installed elsewhere) with the new version which can be downloaded at:

fp_n4_10.zip.

(NOTE: It is suggested, rather than writing over the orifinal FP file, that you rename the existing animate.js and then copy or drag the new version from the downloaded file's location after unzipping.)

This is the file from wich FP98 reads the dynamic code to be inserted into your HTML document. Of course, you have to do this only one time.  If you don't have access to a decompressor for ZIP file, you can simply use the code directly from this page!  Be aware that for this last case, I have modified the value of the speed parameter from 0 to 40 to slow down the animation for the faster micro-computers of today.

Second, as NS4 doesn't recognize the addition of new attributes to tags, I have chosen the "id" attribute for passing the type of animation to the javascript code.  Therefore, you must add an "id" with the same value as the dynamicanimation as added by FP98.  For example, to the following piece of HTML code:

<p dynamicanimation="flyLeft" style="position: relative !important; left: 10000 !important"> Ma dynamic sentence. </p>

you add « id="flyLeft" » to get:

<p id="flyLeft" dynamicanimation="flyLeft" style="position: relative !important; left: 10000 !important"> My dynamic sentence. </p>

If you don't, NS4 will use the "Fly from Left" animation by default.

Et voilà! Most of your FP98 animations are now ready for NS4!

3- The case of "Drop in by Word" and other similarly animations.

To be animated separately, each word must be in its own layer.  With IE4, we can achieve this by dynamically altering the HTML code to insert <span> ...</span> pairs of tags between the words before the animation begins.  But, as you may have now guessed, this is totally impossible with NS4.  In fact, we can not even read the HTML code from Javascript; this is why I have not be successful to adapt the ZoomIn and ZoomOut animations. 

So, for this kind of animation, you must add these tags yourself.   Further, these will work properly only in the case of left alignment.  For the center and right alignments, NS4 doesn't display them properly.  On the plus side, by adding the tags yourself, you can mix different types of animation in the same line. This will work for both IE4 and NS4.  To see an example of how to use the <span> tag, click here.

4- Bugs

Beside the improper display of center and right aligned paragraphs with embedded <span> tags for NS4, the following bugs were noted for IE4:

    a) First, in the dynamic title at the beginning of this page, I had to add a <br> just after the third line; otherwise this line wasn't centered but left aligned.

    b) For a cell which contains only one paragraph, FP98 mixes the dynamic attributes with the <td> tag, giving something that doesn't work under IE4 on a Windows NT workstation.  To get it to work, you must protect your code with the HTMLMarkup webbot component of FP98 by using the insert HTML option on the advanced toolbar.   The table at the end of this page gives an example of this.  There is no problem with IE4 on Windows 95 or with NS4.

    c) I have heard of a case where an image with an URL reference didn't work under NS4 but I have not be able to reproduce it. I have also seen a case where only the reference to the URL didn't work under IE4 but the problem disappear by itself after a small edition to the code and I have not been able to reproduce it either.   Probably a case of badly formed HTML code.

5- The end

You can play with the variables "speed", "stepsZoom", "stepsFly" and "stepsSpiral" to alter the speed of the animation.   Personally, I have changed the speed factor from 0 to 40 for this page; with the effect of slowing it down (again, to compensate for the faster computers).

The next logical step will be to reduce somewhat the size of the code of animate.js.

Finally, I would like to thanks Andy Barr for his precious help in traducing this text and in the testing of this adaptation of animate.js for NS4.