Introduction:
I know that you've seen it. Sometimes its cool, and sometimes they can be
REALLY annoying. Floating Flash over webpages. Once I seen this, I wondered how
they done that. I thought maybe it had to do with ActionScript or some tedious
process but its actually simple once you know the secret code to set up your
file correctly. Simply, the movie's background is transparent- allowing the
pages contents to be seen behind your movie.
This tutorial is designed to teach you the process of manipulating your flash
movie so that It will have the ability to float over your webpage. By the end of
the tutorial, you will have the ability to play your Flash movie containing
transparency in Internet Explorer (Only works in IE on Windows OS).
Lets get started...
First you simply need to get your graphic you want to use for the movie. I
would recommend something to a 3-D effect to give the appearance that its raised
up off the screen. Also, have the background of that image transparent.
Also, make your design that will incorperate some shadow depth effects or
something. Also, have a fiddle with the Opacity since Flash will preserve it
once imported. Once you have your file I would again recommend that the file
type be .PNG but im sure it could be anything.
Now, the size of your movie will be the area in the web browser your movie
will move around in. Ok, get that imported and convert it to a symbol. And since
its 'Floating Flash' I would put action to the symbol so that you will be able
to see more how it works.
Alright, finally export your movie (swf file) - save it.
Entering the code...
Ok now open your html editor or if you're "html 1337" open notepad or
whatever. You'll need to add a layer over the top of your webpage (this allows
it to work independently). Ok, now insert the code for a flash movie in the
layer you created.
example code:
Finally, heres the final touch. Ok, locate the Flash OBJECT ID. Within this
you see "para name." After the two para name lines, add the following code:
| <para name="wmode" value="transparent"> |
Save what you've done and preview it in Internet Explorer. The background of
your movie is transparent and it should look really great! We done it this way
manually. But Flash can automatically add the wmode to a
published movie. To do this just choose: File--> Publish Settings: Select
Transparent Windowless from Window Mode list (publishing as a HTML file). and
Publish it. And from there, all you have to do is insert the the flash file into
a layer over the webpage for it to be displayed over.
Conclusion...
So thats it. There you have it. One
line of code is all that makes those Floating Flash movies so annoying. But the
reason I made this tutorial was to show you how to do it, and I think also it
can be used to make your site even more dynamic and catchy/interesting. Im sure
it can be used malaciously as well. Image just a big black square that floated
over the webpage and you couldnt close it. Anyways, I hope you enjoy the
tutorial.
