Author: johnie
|
Page 1 :
Have you ever written an animation in Kool Moves and wanted to have a
really cool animated GIF, QT movie, or Media Player/ Real movie as the background
and noticed that Kool Moves doesn't support QT , animated GIFs, Real movies
as backgrounds. Well worry no longer because this tutoriol will show you
how using CSS positioning to acomplish this.
Lets get started:
1. Create an animated Movie in Kool Moves and export as SWF with HTML
I really named my movie as test6. I was just too lazy to make a new screenshot.
2. Open up the HTML in your Favorite HTML editor. I suggest using notepad. The HTML will look like this;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR="#ffffff">
<CENTER>
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" ALIGN="Center" WIDTH="320">
<TR>
<TD><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id=test6 width=550 height=300 codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=3,0,0,0">
<param name="movie" value="test6.swf">
<param name="quality" value="high">
<param name="play" value="true">
<param name="loop" value="true">
<param name="bgcolor" value="#ffffff">
<SCRIPT LANGUAGE=JavaScript>
<!--
var ShockMode = 0;
if (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"] && navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin) {
if (navigator.plugins && navigator.plugins["Shockwave Flash"])
ShockMode = 1;
} if (ShockMode ) {
document.write('<embed src="test6.swf"');
document.write(' width=550 height=300 bgcolor="#ffffff" quality="high" loop="true"');
document.write(' TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/">');
document.write('</EMBED>');
} else if (!(navigator.appName && navigator.appName.indexOf("Netscape")>=0 && navigator.appVersion.indexOf("2.")>=0)) { document.write('<IMG SRC="nonflash.gif" width=550 height=300');
}
//-->
</SCRIPT><NOEMBED><IMG SRC="nonflash.gif" width=550 height=300 BORDER=0></NOEMBED><NOSCRIPT><IMG SRC="nonflash.gif" width=550 height=300 BORDER=0></NOSCRIPT></OBJECT></TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
3. Okay now the Fun begins. The first thing we add is this tag to the OBJECT;
<param name="Wmode" value="transparent">
This will turn WMode on so that you can have a transparent Flash Background. This trick only works in IE.
4. Remove the table tags. This is what it will look like;
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="test4" width="550"
height="300"
codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=3,0,0,0">
<param name="movie" value="test6.swf">
<param name="quality" value="high">
<param name="play" value="true">
<param name="loop" value="true">
<param name="bgcolor" value="#000000">
<param name="Wmode" value="transparent"><script LANGUAGE="JavaScript">
<!--
var ShockMode = 0;
if (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"] && navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin) {
if (navigator.plugins && navigator.plugins["Shockwave Flash"])
ShockMode = 1;
} if (ShockMode ) {
document.write('<embed src="test6.swf"');
document.write(' width=550 height=300 bgcolor="#000000" quality="high" loop="true"');
document.write(' TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/">');
document.write('</EMBED>');
} else if (!(navigator.appName && navigator.appName.indexOf("Netscape")>=0 && navigator.appVersion.indexOf("2.")>=0)) { document.write('<IMG SRC="nonflash.gif" width=550 height=300');
}
//-->
</script><noembed><IMG SRC="nonflash.gif" width=300 height=150 BORDER=0></noembed><><img SRC="nonflash.gif"
width="550" height="300" BORDER="0"></>
</object>
5. Add this CSS to the Header;
<style TYPE="text/css">
.a{ position: absolute; left: 20px; top: 43px;z-index=2 }
.b{ position: absolute; left: 100px; top: 185px;z-index=1 }
</style>
You are probably going, "What is this". This is a CSS their are a couple
of rules thet you must follow when you use these. First the CSS must be
in the header- Between the <Head> and </Head> tags. Second all CSS rules must begin with a ".".
We can set these atributes ; position, left, top, overflow, clip, z-index, visibility, width, and height.
In my example we have set a at an absoulote position 20 pixels left of the
left hand corner, 43 px from the top, and set the z-index to 2. The z-index
is the depth function. The lower the z index the closer to the base of
the page it is. Since a's z index is 2 and b's z-index is 1 that means
that a will be displayed on a higher layer than b.
6. The next thing we are going to do is put our objects in div tags. This is what mine look like;
<div class="a">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="test4" width="550"
height="300"
codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=3,0,0,0">
<param name="movie" value="test6.swf">
<param name="quality" value="high">
<param name="play" value="true">
<param name="loop" value="true">
<param name="bgcolor" value="#000000">
<param name="Wmode" value="transparent"><script LANGUAGE="JavaScript">
<!--
var ShockMode = 0;
if (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"] && navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin) {
if (navigator.plugins && navigator.plugins["Shockwave Flash"])
ShockMode = 1;
} if (ShockMode ) {
document.write('<embed src="test6.swf"');
document.write(' width=550 height=300 bgcolor="#000000" quality="high" loop="true"');
document.write(' TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/">');
document.write('</EMBED>');
} else if (!(navigator.appName && navigator.appName.indexOf("Netscape")>=0 && navigator.appVersion.indexOf("2.")>=0)) { document.write('<IMG SRC="nonflash.gif" width=550 height=300');
}
//-->
</script><noembed><IMG SRC="nonflash.gif" width=300 height=150 BORDER=0></noembed><><img SRC="nonflash.gif"
width="550" height="300" BORDER="0"></>
</object>
</div>
<div class="b">
<img
src="animated.gif"
width="300" height="150" alt="animated.gif (89002 bytes)">
</div>
I put the 2 Divs in different colors to illustrate the difference. Notice
that I put an animated GIF in Div B and the generated Object in Div A.
My SWF will play over my GIF. I didn't have to use an animated GIF in DIV
B. I could have put another SWF or an embbeded movie into this DIV.