Floating Flash!by: bs0d from http://allsyntax.com/tutorials/view.php?id=13&entire=1 |
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 more advanced, just open notepad or whatever you use. 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:
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.
-bs0d
