Flash With Transparent Backgrounds

Posted in Web Design News, Web Design Tutorials by patrickh | Feb 22, 2008

When I tell people I found out how to make an SWF with a transparent background, they look at me like I’m evil because they think I’m unleashing some annoying ads that float over the navigation and content you’re trying to get to. Yeah, that IS really annoying! Well here at Blueprint Design Studio, we say ‘Not so fast, cowboy.’ I think there are some ways to use this technique for good (not evil). Technology is moral-neutral! It depends on what we do with it! ;)

Ok. I’ve used a transparent flash intro on a project we just finished, as well as on a new concept, in slightly different ways. In Fruit Fly Life, I made a background image on the index page similar to the home page that the intro leaps to, making a visually smooth transition. The Flash animation has a getURL action on the last frame to go from the index to the home page. I did things a little differently in a concept for Forest Villa. The SWF is actually floating over the content in an AP Div that I inserted in Dreamweaver (In the concept, the page isn’t a functional page, but the concept image is still more or less acting like content). I like what happens here: a fun dynamic is created with loading times between the flash animation and the html page.

Here’s how to make an SWF with a transparent background:
Insert your SWF (into Dreamweaver by using Insert>Media>Flash or do an Insert>Layout Objects>AP Div, then insert the Flash file into that). Dreamweaver will write all the appropriate javascript for you and make the RunActiveContent file for you of course. But the you can go into that code and insert a couple things to make give it a transparent background (where I’ve highlighted).

WMode

That’s it! Be careful to get your commas and code grammar perfect. Also, keep in mind that even though the SWF has a transparent background, users can’t click on anything below it, so either design your page with that in mind, or make it jump to another page (as in Fruit Fly Life). Perhaps there’s a way to use unloadMovieNum in ActionScript to make it go away — but I have yet to figure out how to make a SWF unload from itself. Let me know if you think of a way.

See you later. Remember, never let anyone shake your baby.

Post a comment or leave a trackback.

4 Responses to “Flash With Transparent Backgrounds”

  1. On March 26th, 2008 at 12:21
    Adam Freetly said:

    this can also work if you’re using swfobject to insert flash, you just need to use wmode:"transparent" when you call the script:

    
    <script type="text/javascript"> // <![CDATA[
	var flashvars = {};
	var par = { wmode:"transparent" };
    swfobject.embedSWF("<?php bloginfo('template_directory'); ?>/test.swf", "flash", "587", "240", "9.0.0", "<?php bloginfo('template_directory'); ?>/expressInstall.swf", flashvars, par );
	// ]]>
    </script>

    (this code is for wordpress, but you can replace the PHP with absolute or relative paths)

  2. On June 2nd, 2008 at 3:48
    Flash Web Designer said:

    A quicker way if your using CS3, in the properties bar at the bottom of the window, there is a parameters option box. If you click that you can just input wmode and transparent into that.
    Sam

  3. On December 17th, 2008 at 3:08
    Alex said:

    Hi…

    The transparent thing was great. But do you have any idea on how to remove the flash which floats on the host html page. If I use a close button and give the code
    on (release) {
    this.unloadMovie();
    }
    the swf surely goes away and I see the underlying html page only. But when I rightclick I can find that the ‘About Flash Player 9′ which means the flash still exists. The swf has unloaded and not the flash player which is running the swf. To get the idea you can visit http://www.pixelgenio.com/ongoingprojects/ipgeorgia/dress3.html

    If you an solve this for me that would be of great help.
    Thanks
    Regards
    Alex

  4. On January 5th, 2009 at 7:20
    ed said:

    thank you for this… ive found so many tutorials explaining how to do this but this is the only one that seems to work!!

    thanks for making my day!!

Leave a Comment!