Preview and Tweak
A D V E R T I S E M E N T
Optimizing Animated GIFs
Preview your animation by choosing Animation | Start. Tweak your interframe
delay to get the effect you want and reposition individual frames. You can also
see the effect of the bit depth and remove unused colors settings. To move
forward or backward through the animation press the up and down arrow keys.
Save As...
Animations are included in a web page just like standard IMG tags, i.e.,
(<IMG SRC="art/moment_anim.gif" WIDTH="89" HEIGHT="104" ALT="Cool Central Site
of the Moment" BORDER=0>). Be sure to include the HEIGHT and WIDTH attributes -
they allow any text to display first. If you omit graphic dimensions in pages
containing JavaScript, Netscape 2.x will bomb.
Bandwidth Simulators
To preview your animation under real-world conditions, try a bandwidth
simulator. GIFMation 2.0 includes a unique integrated bandwidth popup with their
preview feature (Frames | Play Animation) that simulates how your animation will
behave at various connection speeds.
Provide Alternatives
Since not all browsers support animated GIFs (Netscape 2.0b3 was the first,
Explorer 3 supports all features except looping) and some only support part of
their features (Explorer 2 does not support positioning) you should provide
alternatives. You can direct the user to a page optimized for their browser
using automatic content negotiation. Using JavaScript and a hidden frame, you
can determine the type of browser viewing your page and automatically direct it
to a page optimized for that browser.
<SCRIPT LANGUAGE="JavaScript">
<!-- // begin universal browser detection
browser = navigator.appName;
version = parseInt(navigator.appVersion);
if (browser == "Netscape" && version >= 3) type = "n3";
else if (browser == "Netscape" && version == 2) type = "n2";
else if (browser == "Microsoft Internet Explorer" && version >= 2) type = "e3";
with (document) { if (type == "n2")
{ writeln ('<FRAMESET FRAMEBORDER=NO BORDER=0 ROWS="100%,*">' + '
<FRAME SRC="indexs.html"
NAME="text" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="AUTO">'
'</FRAMESET>');
}
else
{
// Netscape 3 or Explorer 3
writeln ('<FRAMESET FRAMEBORDER=NO BORDER=0 ROWS="100%,*">' + '
<FRAME SRC="indexa.html" NAME="text" MARGINWIDTH="0"
MARGINHEIGHT="0" SCROLLING="AUTO">' + '
</FRAMESET>'); } }
// end browser detection -->
</SCRIPT>
</HEAD>
<!-- include default frameset here for non-JavaScript browsers -->
<FRAMESET FRAMEBORDER=NO BORDER=0 ROWS="100%,*">
<FRAME SRC="indexs.html" NAME="text" MARGINWIDTH="0" MARGINHEIGHT="0"
SCROLLING="AUTO">'
</FRAMESET>
<NOFRAMES>
<BODY> insert table equivalent code here
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
The Hidden Frame Trick
The trick is to declare two rows in the FRAMESET tag (ROWS="100%,*") and
define only one frame. This does not cause any errors, it simply displays the
frame you define. By dynamically generating the frameset based on the browser
type you can automatically direct users to different pages. The page appears to
be a normal HTML page when it is in fact a single frame.
The full-screen frame is used as a container to dynamically load either a
static page (indexs.html) or an animated page (indexa.html) depending on the
browser viewing the page. Be sure to use the NOFRAME and NOSCRIPT tags for
browsers that don't support frames and JavaScript.
To see the finished product, go to Cool Central's
site of the page.
GIF89a Browser Support
- Netscape 3.0 fully supports animated GIFs and has no memory leak
- Netscape 2.0x fully supports animated GIFs, but has a memory leak and
may bomb on some GIF89as. Netscape 2-3.x do not support the "restore to
previous" disposal method, and treat it like "do not dispose."
- Explorer 2.0 supports one loop full-frame animated GIFs
- Explorer 3.0 support one loop positioned animated GIFs and the "restore
to previous" disposal method.
|
