Make the Flex .swf file transparent (CUSOMIZING THE TEMPLATE)

I was assigned with a task to make a working example of using google maps, and I really wanted to use flex 2.0. I want my movie to cover the full screen, and then i want to use CSS to overlay on top of the .swf file to make it appear as though, my google maps is showing within my .swf file.

I’ve done about an hours worth of research, and I’ve found out how to make my .swf file transparent, but now I’m running into problems with Internet explorer 6.0 not making the .swf file transparent.

First. In your flex project, open up the file “html-template/index.template.html”

THIS IS WHERE ALL OF YOUR CUSTOM JAVASCRIPT goes, that way when you compile, it doesn’t overwrite your contents…

open up that file, and you’ll see little (+)(plus) signs on the left of the code, where it is hidden, just collapse all of the code… i’ve customized my code, so i’m not sure what line it’s on, but I know it’s in the vicinity of line 105

// Version check for the Flash Player that has the ability to start Player Product Install (6.0r65)

var hasProductInstall = DetectFlashVer(6, 0, 65);

(above is the first line of code in the comment)

This comment is actually processed, and ran.

I added the line

“name”, “${application}”,


“wmode”,“transparent”, //<—this line i added

I also added it, in the (else) statement that follows it.

That seemed to work for firefox, but not in IE. I’m now chasing down why the problem is not working, and i’ll post on that later.

1 comment on this post.
  1. Sam:

    This solution also works to show thickboxes on top of flash content. We had to take it out because it caused problems with using the mouse wheel in scrollable content.

    Just a heads up, and nice job on the site. Plenty of good stuff.

Leave a comment