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!