DHTML

In my endless pursuit of making Flash more than just a simple animation on a site, I wanted to do something different with a simple animation that made some use of the advanced HTML technologies out there. I came up with this idea while creating a pre-loader for one my clients. Click on the button below for the example:

Click Here For Animation

Pretty cool ehh? To do that, you must simply add this code to the animation's code. The code in Blue is the actual code that is different than that of what Macromedia Flash publishes. I did shorten the code out just a little bit to fit in this location.

<object ID="Flash5"
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://active.macromedia.com/flash/cabs/swflash.cab"
STYLE="POSITION: absolute; HEIGHT:100%;WIDTH:100%;TOP:5;LEFT:5;VISIBILITY:VISIBLE; ZINDEX:1"
width="400" height="400">
<param name="movie" value="youranimation.swf">
<param name="play" value="true">
<param name="loop" value="true">
<param name="wmode" value="transparent">
<param name="quality" value="best">
</OBJECT>

You should add the code in Blue to your pre-existing animations to make your animation look like my example. I highly recommend you NOT TO copy the entire code and add it to your animation.

Explanation:

• The style tag explains how and where the animation should be positioned. The animation will be on the top-left corner with a 5 pixel margin separating the two dimensions.
   
• You may have wondered how a movie with 400 Width and Height is able to cover the whole page. It is because of the tag in the Style tag that states the height and width to be 100%. That can scale smaller and larger animations to fit the HTML page.
   
• Lastly, the parameter for Wmode is to make the animation's background transparent. This allows the text to be seen through under the animation.

Limitations:

All things good (in Flash) have some problems following them.

• Surprisingly, this animation trick will not work in Netscape. Even Netscape 6 can't get this quite simple trick to work at all. Some Internet Explorer users running on Macs have been unable to see the animation transparently.
   
• Making the animation transparent takes up a good deal of system resources. Computers running on anything less than a good Pentium II will experience decreased frame rate on complex animations. My example though will work any CPU. (It is a simple animation).

That is all there is to combining some DHTML with Flash. Besides the limitations, this effect can be used for almost anything. The best use that I have found for this effect is in Preloaders. Make the numbers fly in, etc. Also, try dragging the animation. You can drag the animation with your mouse OVER the HTML, and have the animation play from there. Not too bad for a few lines of simple DHTML code.

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!