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.