Hi and welcome to this week’s web design video. Today’s tutorial is how to embed Flash movies with transparent backgrounds.
Embedding your Flash SWF files with transparancy, allows the background of your HTML page to show through the flash, giving designers the ability to integrate Flash onto their web pages with a lot more flexability.
The key to activating background transparancy lies in the coding that you use to embed your Flash file, rather than having to publish the flash file with any additional settings.
All Flash movies by default will have a background colour, you simply use the embedding coding to take it away.
In a previous video blog, we talked about our preferred method of embedding Flash, the SWFOBJECT technique which is stongly supported and recommended by Google. This method of embedding flash involves running the SWFOBJECT Javascript in your <head> tag and defining the Flash file with a short piece of W3C compliant HTML in the <body>. Assuming that you are using this technique, or something similar, adding the additional transparancy coding is very simple.
Simply add the following HTML within the <OBJECT> tag
If like us, you are using the SWFOBJECT technique, you will need to add this Parameter twice, within both <OBJECT> tags. If you are using a different method from SWFOBJECT to embed your Flash, then chances are you may have an EMBED tag for displaying your Flash. If you do, then also add the following code to the EMBED tag.
wmode="transparent"
If however, you reply on the HTML given to you when publishing your movie directly from Flash, you can alter the publish settings so that the HTML produced incorporates the transparancy settings we just mentioned.
So whether you’re working on an existing flash file or starting a new flash file, simply go to file, publish settings. You’ve probably already got HTML ticked, if you haven’t tick that box and you will get the HTML tab appear in your publish settings.
And you simply make your way down to Window Mode. Then usually it’s set as Window, which isn’t transparent and just simply change that to transparent windowless.
Then when you click ok and publish, your flash movies will be exported with the HTML previously mentioned.
Thank you for watching this week, all of the HTML code featured in the video can be found on our supporting blog post at crearedesign.co.uk/blog/videos/.
Thanks for the video,
Would you apply this technique to a WordPress blog?
I’d like to embed a transparent video to a blog page and I’m stumped as how to do it.
Thank you for any suggestions.
Great! Thanks guys… now if there was a way to build a quick and dirty JW Player with transparent background and play/pause button only I’d be a very happy camper.
I’m using WordPress and the only real options out there are paid, watermarked, limited, or have an opaque background
Cheers!
Luke