Working on a new website for a client right now and ran into a problem.
The logo looked a little blurry when animated in the flash header, so I decided the best solution would be to place a floating div over the flash header.
If you’re not sure how to do this yet, here’s how:
1. In your code for the flash file, add the following:
| <param name=”wmode” value=”transparent”> |
2. In the “embed” area, you need to add this:
| wmode=”transparent” |
Add your div with absolute positioning and off you go.
So, this works all well and good when you aren’t using the swfObject to embed the flash and get rid of the nasty flash activation box that surrounds all flash files in IE.
I searched on Google for a while this morning but could not find an example of someone having a problem with this.
So, I started to think creatively. I’m not a programmer at all and I do not know much javascript. But I was able to make educated decisions on what I do know.
When using the swfObject, the javascript on the same page as your flash file looks something like this:
var fObj = new FlashObject("example.swf", "header", "778", "527", 7, "#FFFFFF");fObj.addParam("base",".");
|
Using this javascript that comes with the swfObject embed code,and the external js file, will stop your div from appearing over the flash file now. In essence, steps 1 and 2 from above are not working now because of this js added to remove the activation box on the flash file.
How do we fix this? That’s what I was having trouble with for a few minutes. I couldn’t figure out why my div was now behind the flash file.
Then, I realized what needs to be added to the JS that is comes with the swfObject.
Currently, the new javascript that we added from the box above is writing to the flash element what parameters and values are to be read. So, we have to add the new parameter we added to the flash code when we wanted the div to float over the flash.
Simply, add this to the JS from the box above:
| fObj.addParam(”wmode”, “transparent”); |
This now tells the JS to write this parameter also as it is already included in our first two steps we did to get the div to float over it.
Not knowing much javascript, that’s what it means to me anyways! Some JS experts out there may be able to explain what is going on here a lot better, but it works so I am happy!
Marcos’s...
Hey Brian - until I found your post I nearly gave up on trying to do this.
Thanks for putting me in the right direction, your method above works fine.
I am working on a large project for a corporate client and I wanted to use a search form over a Flash banner. Wasn’t hopeful it would work cross browser (or at all).
I did another search “swfObject embed code” and came across the new SwiftObject 2.0 coding. It solves the IE flash activation box issue, is W3c , detects versions and offers alternative HTML if no Flash.
You can even use a code generator. just remember to specify your Flash ‘parameter’ as above ()
My code looks like this
script type=”text/javascript” src=”${row2_assets_base}scripts/swfobject.js”>
var flashvars = {};
var params = {};
params.wmode = “transparent”;
var attributes = {};
swfobject.embedSWF(”${row2_assets_base}flash/intro.swf”, “introtext”, “960″, “250″, “9.0.0″, false, flashvars, params, attributes);
The links you should check out:
http://code.google.com/p/swfobject/
http://www.swffix.org/swfobject/generator/
Wow, thank you guys, I had the same problem when placing a div over flash content. If something was animated, the content of the div disappeard in firefox 2. I still don’t really understand why wmode is the problem here because it only makes the swf transparent..
But the main thing is, it works and saved me much time:)
Hi
it seems that google chrome doesnt handle swfobject: all my flash apps using swfobject are not showing while those without work perfectly…
Marcus, glad you got it working
Pygmees, I checked that out and you’re right. Embedded links are not working in the flash file if you have the swfobject added….that’s not good.