Transparent PNGs over Flash
I wanted to experiment a bit with some layouts I hadn’t tried before with the new Polycot Labs site, and one of the things I didn’t like as much about our old Polycot Consulting site was that there wasn’t as much visual imagery as I’d like.
We’d used SlideShowPro on the Local Jones site, and it seemed like a really good way to add some light-weight visual flair. We could have done something like the Specialized Riders Club where the logo chunk is embedded in the flash image player, but that would have meant doing some flash development from scratch, which isn’t really our forte.
I wanted to do some drop-shadows over the flash file and around the logo cutout, so I decided on the PNG approach. After hammering on it for a while, the solution that has presented itself (and works in IE 6, 7, Firefox and Safari) is this:
Create your transparent png in photoshop
I cut and pasted a merged version of the top of the photo with the logo and dropshadow with no background into a new file and saved that as a png. It’s as wide as the box (830) and as high as the bottom of the logo boxes drop shadow (103).
Set the flash file to wmode=opaque
Important if you want to do any DHTML over an animating flash file. It slows down rendering since it’s not just writing directly to the screen, but in our case it’s not a game or anything where response time is crucial, so it’s a sacrifice I was willing to make.
Create a single pixel transparent gif
Yea, we’re going old school. Stupid IE6…
Add the elements to the HTML
First place the flash player inside of a div, at the top of the div create a new div enclosing the pixel gif set to the same dimensions as the png you want to lay over the file. Like so:
<div id=”homephoto”>
<div id=”logodrop”>
<a href=”somewhere”><img src=”pixel.gif” height=”100″ width=”500″ /></a>
</div>
<object></object>
</div>
Style the Elements and add the div background
Next we add the styles to our stylesheet to make everything pop into the right places and set a png background on the flashlayover div. We use the * html IE6 hack to call the AlphaBlend function to ensure transparency. I tried a few other methods, but this was the one that worked.
#homephoto {
height: 350px;
margin: 0;
padding: 0;
}
#logodrop {
position: absolute;
float: left;
z-index: 10;
margin: 0;
padding: 0;
}
#logodrop img {
border: 0px;
}
#logodrop {
background: url(”/images/logodrop.png”) no-repeat;
}
* html #logodrop {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”/images/logodrop.png”, sizingMethod=”crop”);
}
Kick back and enjoy, assuming it works
If it all comes together, awesome, you’ve got a stylish, interesting header! If it doesn’t, check your IDs, make sure your elements are positioned correctly, and start playing around with HTML validators, FireBug or the IE web developer toolbar.
Caveats
IE 6 is a little weird about what it considers a link if it’s above a transparent background. I’ve found that the part of the background image that’s actually transparent shows up as a link, but the part that’s rendered as a background doesn’t. It may be possible to render yet another layer over the transparent pixel that has the link, but that was more layers than I wanted to put onto the page.