DHTML
Combined with
FlashIn 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.
I hope the information helped.
If you have any questions or comments, please don't hesitate to post them on the
kirupa.com Forums. Just post your question and I, or our friendly
forum helpers, will help answer it.
The following is a list of related tutorial and help resources that you may find
useful:
|
