Tip:
Highlight text to annotate it
X
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. Param name Window Mode, value transparent.
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 code to
the EMBED tag.
Window Mode equals transperent.
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/.