Transparency and Flash in Dreamweaver

by Mark Snyder

Maybe you have been here before. You are asked to add a rotating photo gallery to the home page of your organization's website and they provide you with a nice set of horizontal photos. You size your flash movie to match the photos exactly and quickly timeline a nice fading rotation and place it on the homepage.

You are feeling pretty good about yourself until the boss decides to get creative and sends a bunch of photos. They are a horrible mess of randomly cropped images that don't fit your neat horizontal layout. You drop them in anyway and of course you are left with the background of you flash movie obliterating the stylish ghosted image or background color on the site. This is because by default Dreamweaver sets the window mode to "opaque."

Click here to see a sample showing the problem.

Don't despair, the solution is sitting right in the SWF properties palette in Dreamweaver CS4. Just choose transparent from the Wmode drop-down menu.

Choose transparent from the Wmode drop-down menu

The SWFs background will be ignored (the background color or background image of your site will show through). This process will even composite filters and transparency within the html file! Click here to see the result.

Note: This transparency option is also where you want to look if you are having problems with CSS/XHTML menus showing up BEHIND your flash movies. Just change the "wmode" parameter from "opaque" to "transparent" by editing the code or using the property palette and your problems will be behind you.

***

Looking to master Flash CS4 quickly. Join Mark for a live, online instructor-led class. Click here for details.

***

About the author: Mark Snyder has been working in the computer graphics field for more than 25 years and has more than 20 years of instructional experience. He is a graduate of the Rochester Institute of Technology and has been creating interactive multimedia in the Washington DC area since the early 90s. His clients include the Smithsonian, NASA, The Wilderness Society and many more. Mark is an Adobe Certified Flash and Photoshop expert and an Adobe Certified Instructor. He is especially adept at teaching very technical subjects in a fun and exciting way.

33 Replies to “Transparency and Flash in Dreamweaver”

  1. wmode opaque will work with HTML-over-Flash scenarios (transparent is not required). See details here: http://pipwerks.com/swfobject/z-index/2.0/index.html
    wmode transparent is a great idea, but not implemented very well by Adobe. It has a bad — and well-earned — reputation for causing all sorts of buggy-ness and performance decreases in Flash Player.
    Personally, I think photo slideshows are a great example of what used to only be possible in Flash, but should now be done with HTML, JavaScript, and CSS. There are a gazillion nice photo gallery scripts out there that use jQuery or MooTools, and none of them require the Flash Player plugin, so they work on mobile devices, too.

  2. wmode opaque will work with HTML-over-Flash scenarios (transparent is not required). See details here: http://pipwerks.com/swfobject/z-index/2.0/index.html
    wmode transparent is a great idea, but not implemented very well by Adobe. It has a bad — and well-earned — reputation for causing all sorts of buggy-ness and performance decreases in Flash Player.
    Personally, I think photo slideshows are a great example of what used to only be possible in Flash, but should now be done with HTML, JavaScript, and CSS. There are a gazillion nice photo gallery scripts out there that use jQuery or MooTools, and none of them require the Flash Player plugin, so they work on mobile devices, too.

  3. wmode opaque will work with HTML-over-Flash scenarios (transparent is not required). See details here: http://pipwerks.com/swfobject/z-index/2.0/index.html
    wmode transparent is a great idea, but not implemented very well by Adobe. It has a bad — and well-earned — reputation for causing all sorts of buggy-ness and performance decreases in Flash Player.
    Personally, I think photo slideshows are a great example of what used to only be possible in Flash, but should now be done with HTML, JavaScript, and CSS. There are a gazillion nice photo gallery scripts out there that use jQuery or MooTools, and none of them require the Flash Player plugin, so they work on mobile devices, too.

  4. Philip,
    Obviously you aren’t a big fan of Flash. I put together a gallery just to show the wmode in when placing a SWF file in DW CS4. I promise to send some serious AS3 your way on the next example. Maybe a little interactive IK?
    You didn’t even comment on the nice photos?
    Mark

  5. Philip,
    Obviously you aren’t a big fan of Flash. I put together a gallery just to show the wmode in when placing a SWF file in DW CS4. I promise to send some serious AS3 your way on the next example. Maybe a little interactive IK?
    You didn’t even comment on the nice photos?
    Mark

  6. Philip,
    Obviously you aren’t a big fan of Flash. I put together a gallery just to show the wmode in when placing a SWF file in DW CS4. I promise to send some serious AS3 your way on the next example. Maybe a little interactive IK?
    You didn’t even comment on the nice photos?
    Mark

  7. I apologize if I sounded like I’m making trouble, I’m not trying to… I’m merely pointing out that wmode transparent has a lot of problems. As a member of the SWFObject development team and co-moderator of the SWFObject Google Group (which I wouldn’t be a part of if I hated Flash), we’ve encountered all kinds of bugs related to transparency mode. As I said, “wmode transparent is a great idea, but not implemented very well by Adobe.” We routinely tell people to steer clear of transparency mode unless absolutely necessary.
    My bad if it sounded like I was bashing anything, it wasn’t my intent.

  8. I apologize if I sounded like I’m making trouble, I’m not trying to… I’m merely pointing out that wmode transparent has a lot of problems. As a member of the SWFObject development team and co-moderator of the SWFObject Google Group (which I wouldn’t be a part of if I hated Flash), we’ve encountered all kinds of bugs related to transparency mode. As I said, “wmode transparent is a great idea, but not implemented very well by Adobe.” We routinely tell people to steer clear of transparency mode unless absolutely necessary.
    My bad if it sounded like I was bashing anything, it wasn’t my intent.

  9. I apologize if I sounded like I’m making trouble, I’m not trying to… I’m merely pointing out that wmode transparent has a lot of problems. As a member of the SWFObject development team and co-moderator of the SWFObject Google Group (which I wouldn’t be a part of if I hated Flash), we’ve encountered all kinds of bugs related to transparency mode. As I said, “wmode transparent is a great idea, but not implemented very well by Adobe.” We routinely tell people to steer clear of transparency mode unless absolutely necessary.
    My bad if it sounded like I was bashing anything, it wasn’t my intent.

  10. No harm, no foul. I know this latest release by Adobe is not their best effort but I am pretty confident that all this will be behind us soon. Cool features like Inverse Kinematics, 9 slice scaling, XML Object support and 3D are just too compelling to ignore. I can’t imagine how painful my mathematics work would be without it. (Notice I didn’t mention video. HTML5 will knock that one out of the park)
    Just trying to present standard Adobe solutions using Adobe tools to my Adobe audience.
    Sounds like I drank the Kool-Aid doesn’t it?
    Stay tuned for some groovy ActionScript 3.0 stuff. I promise I will leave the wmode set to opaque just for you!

  11. No harm, no foul. I know this latest release by Adobe is not their best effort but I am pretty confident that all this will be behind us soon. Cool features like Inverse Kinematics, 9 slice scaling, XML Object support and 3D are just too compelling to ignore. I can’t imagine how painful my mathematics work would be without it. (Notice I didn’t mention video. HTML5 will knock that one out of the park)
    Just trying to present standard Adobe solutions using Adobe tools to my Adobe audience.
    Sounds like I drank the Kool-Aid doesn’t it?
    Stay tuned for some groovy ActionScript 3.0 stuff. I promise I will leave the wmode set to opaque just for you!

  12. No harm, no foul. I know this latest release by Adobe is not their best effort but I am pretty confident that all this will be behind us soon. Cool features like Inverse Kinematics, 9 slice scaling, XML Object support and 3D are just too compelling to ignore. I can’t imagine how painful my mathematics work would be without it. (Notice I didn’t mention video. HTML5 will knock that one out of the park)
    Just trying to present standard Adobe solutions using Adobe tools to my Adobe audience.
    Sounds like I drank the Kool-Aid doesn’t it?
    Stay tuned for some groovy ActionScript 3.0 stuff. I promise I will leave the wmode set to opaque just for you!

  13. I’m not a big fan of flash either anymore. After years and years of developing with it, the software has gone downhill since Adobe acquired Macromedia and took control of the product. Then again Adobe has been doing that to every product they get their hands on over the last 5-8 years. Furthermore, monitoring my processes, Flash is consuming an average 67% of my CPU of an Intel 2.4 GHz Core 2 Duo, and while monitoring it, the consumption will jump from the high 40’s to the 70 percentile just to display a few images! That process is consuming well over 100 MB of memory.
    This is why Adobe needs to make severe investments to clean Flash up or it will go by the wayside. Photoshop provides functions to do the same thing using HTML which will not have an impact on CPU consumption. Flash is also unstable and will crash your system leaving it vulnerable to exploits.
    There are better solutions then Flash. I believe we as developers need to look more at other solutions including HTML 5.
    Yes the pictures look nice, but not at the risk of crashing my system and bringing a very powerful CPU to its knees.

  14. I’m not a big fan of flash either anymore. After years and years of developing with it, the software has gone downhill since Adobe acquired Macromedia and took control of the product. Then again Adobe has been doing that to every product they get their hands on over the last 5-8 years. Furthermore, monitoring my processes, Flash is consuming an average 67% of my CPU of an Intel 2.4 GHz Core 2 Duo, and while monitoring it, the consumption will jump from the high 40’s to the 70 percentile just to display a few images! That process is consuming well over 100 MB of memory.
    This is why Adobe needs to make severe investments to clean Flash up or it will go by the wayside. Photoshop provides functions to do the same thing using HTML which will not have an impact on CPU consumption. Flash is also unstable and will crash your system leaving it vulnerable to exploits.
    There are better solutions then Flash. I believe we as developers need to look more at other solutions including HTML 5.
    Yes the pictures look nice, but not at the risk of crashing my system and bringing a very powerful CPU to its knees.

  15. I’m not a big fan of flash either anymore. After years and years of developing with it, the software has gone downhill since Adobe acquired Macromedia and took control of the product. Then again Adobe has been doing that to every product they get their hands on over the last 5-8 years. Furthermore, monitoring my processes, Flash is consuming an average 67% of my CPU of an Intel 2.4 GHz Core 2 Duo, and while monitoring it, the consumption will jump from the high 40’s to the 70 percentile just to display a few images! That process is consuming well over 100 MB of memory.
    This is why Adobe needs to make severe investments to clean Flash up or it will go by the wayside. Photoshop provides functions to do the same thing using HTML which will not have an impact on CPU consumption. Flash is also unstable and will crash your system leaving it vulnerable to exploits.
    There are better solutions then Flash. I believe we as developers need to look more at other solutions including HTML 5.
    Yes the pictures look nice, but not at the risk of crashing my system and bringing a very powerful CPU to its knees.

  16. Hey Lani,
    You should take a look at those numbers again. There is no way that little slideshow I posted used 67% of the capacity of a 2.4 GHZ Core 2 Duo. I was around 3% on my 2.6 GHz Core 2 and less than 2% on my i5 quad including the browser and whatever else was running. That said, there are some really terrible ways to program in actionscript that can make a mess out of your CPU. Don’t throw the baby out with the bathwater though! Flash is still the best best for web based visualizations and interactivity. Take a close look at HTML5 animation before you give up on Adobe. I love the way it handles video but the animation is painful at best. Of course you may respond “But someone will make a nice GUI to create that code” Yep, probably, and Adobe is already exporting their animation to XML right now so I see them as a prime contender for that.
    That said, I am a bit underwhelmed by the stability of Flash CS4 (and Captivate) and I think anyone who authors a Flash banner ad that uses sharedObjects, resizes itself or has a talking avatar should be tarred and feathered.

  17. Hey Lani,
    You should take a look at those numbers again. There is no way that little slideshow I posted used 67% of the capacity of a 2.4 GHZ Core 2 Duo. I was around 3% on my 2.6 GHz Core 2 and less than 2% on my i5 quad including the browser and whatever else was running. That said, there are some really terrible ways to program in actionscript that can make a mess out of your CPU. Don’t throw the baby out with the bathwater though! Flash is still the best best for web based visualizations and interactivity. Take a close look at HTML5 animation before you give up on Adobe. I love the way it handles video but the animation is painful at best. Of course you may respond “But someone will make a nice GUI to create that code” Yep, probably, and Adobe is already exporting their animation to XML right now so I see them as a prime contender for that.
    That said, I am a bit underwhelmed by the stability of Flash CS4 (and Captivate) and I think anyone who authors a Flash banner ad that uses sharedObjects, resizes itself or has a talking avatar should be tarred and feathered.

  18. Hey Lani,
    You should take a look at those numbers again. There is no way that little slideshow I posted used 67% of the capacity of a 2.4 GHZ Core 2 Duo. I was around 3% on my 2.6 GHz Core 2 and less than 2% on my i5 quad including the browser and whatever else was running. That said, there are some really terrible ways to program in actionscript that can make a mess out of your CPU. Don’t throw the baby out with the bathwater though! Flash is still the best best for web based visualizations and interactivity. Take a close look at HTML5 animation before you give up on Adobe. I love the way it handles video but the animation is painful at best. Of course you may respond “But someone will make a nice GUI to create that code” Yep, probably, and Adobe is already exporting their animation to XML right now so I see them as a prime contender for that.
    That said, I am a bit underwhelmed by the stability of Flash CS4 (and Captivate) and I think anyone who authors a Flash banner ad that uses sharedObjects, resizes itself or has a talking avatar should be tarred and feathered.

  19. In an excellent bit of serendipitous timing, one of the primary Flash Player engineers posted an explanation for how the browser draws Flash elements. It’s a nice, simple explanation and covers wmode as well. Based on his explanation, you can infer that wmode transparent will certainly cause a heavier burden on the browser than wmode normal or wmode opaque. He also mentions upcoming optimizations that should really help smooth things out a bit.
    http://pwrk.us/fp

  20. In an excellent bit of serendipitous timing, one of the primary Flash Player engineers posted an explanation for how the browser draws Flash elements. It’s a nice, simple explanation and covers wmode as well. Based on his explanation, you can infer that wmode transparent will certainly cause a heavier burden on the browser than wmode normal or wmode opaque. He also mentions upcoming optimizations that should really help smooth things out a bit.
    http://pwrk.us/fp

  21. In an excellent bit of serendipitous timing, one of the primary Flash Player engineers posted an explanation for how the browser draws Flash elements. It’s a nice, simple explanation and covers wmode as well. Based on his explanation, you can infer that wmode transparent will certainly cause a heavier burden on the browser than wmode normal or wmode opaque. He also mentions upcoming optimizations that should really help smooth things out a bit.
    http://pwrk.us/fp

  22. No, those numbers are correct I am monitoring as I write this now. I should be more clear: on OS X Activity Monitor displays Safari (64 bit) and Flash Player (Safari Internet plug-in). Safari jumps around from 6% to 12.1%, Flash Player jumps from 35.9 to 47.3 to 52.1 to 67.8% CPU utilization to display the iconlogic page. The minimum numbers occur when the page blanks to white then jumps way up as displays the next image.
    BTW, when I posted before as I closed the iconlogic page it crashed Safari. Just for grins, that day, I went to the lab and ran the same page on Windows 7 using Firefox. Windows 7 does not display the plug-in separately, instead shows all the utilization as a component of Firefox, which on Windows 7 was in the mid 40% utilization. When we tried to close the page, it crashed Firefox. An unusual crash in that Task Manager indicated it was still running but the application was locked solid.
    Flash is the problem, and Adobe needs to put their pettiness away and deal with the problem. They gutted Macromedia to harvest it for Flash, now they own it and it is their problem. But I don’t expect much from Adobe, since Warnock left, this company has an attitude that is less than desirable.
    I realize your Adobe credentials and you must support them. So it is understandable the bias, just like the article on the .net blog link. I think the last comment on that blog, pretty much drew the line in the sand so to speak, separating fact from fiction.
    BTW, this was a great quote from Lynch “Regarding crashing, I can tell you that we don’t ship Flash with any known crash bugs, and if there was such a widespread problem historically Flash could not have achieved its wide use today.” That is almost hysterical. Adobe doesn’t ship a product that crashes, and we all know Bears have modern bathrooms spread throughout the National Parks.
    I’ve been using Adobe’s products since day one when they got started. Seems in recent years they have forgotten their roots.

  23. No, those numbers are correct I am monitoring as I write this now. I should be more clear: on OS X Activity Monitor displays Safari (64 bit) and Flash Player (Safari Internet plug-in). Safari jumps around from 6% to 12.1%, Flash Player jumps from 35.9 to 47.3 to 52.1 to 67.8% CPU utilization to display the iconlogic page. The minimum numbers occur when the page blanks to white then jumps way up as displays the next image.
    BTW, when I posted before as I closed the iconlogic page it crashed Safari. Just for grins, that day, I went to the lab and ran the same page on Windows 7 using Firefox. Windows 7 does not display the plug-in separately, instead shows all the utilization as a component of Firefox, which on Windows 7 was in the mid 40% utilization. When we tried to close the page, it crashed Firefox. An unusual crash in that Task Manager indicated it was still running but the application was locked solid.
    Flash is the problem, and Adobe needs to put their pettiness away and deal with the problem. They gutted Macromedia to harvest it for Flash, now they own it and it is their problem. But I don’t expect much from Adobe, since Warnock left, this company has an attitude that is less than desirable.
    I realize your Adobe credentials and you must support them. So it is understandable the bias, just like the article on the .net blog link. I think the last comment on that blog, pretty much drew the line in the sand so to speak, separating fact from fiction.
    BTW, this was a great quote from Lynch “Regarding crashing, I can tell you that we don’t ship Flash with any known crash bugs, and if there was such a widespread problem historically Flash could not have achieved its wide use today.” That is almost hysterical. Adobe doesn’t ship a product that crashes, and we all know Bears have modern bathrooms spread throughout the National Parks.
    I’ve been using Adobe’s products since day one when they got started. Seems in recent years they have forgotten their roots.

  24. No, those numbers are correct I am monitoring as I write this now. I should be more clear: on OS X Activity Monitor displays Safari (64 bit) and Flash Player (Safari Internet plug-in). Safari jumps around from 6% to 12.1%, Flash Player jumps from 35.9 to 47.3 to 52.1 to 67.8% CPU utilization to display the iconlogic page. The minimum numbers occur when the page blanks to white then jumps way up as displays the next image.
    BTW, when I posted before as I closed the iconlogic page it crashed Safari. Just for grins, that day, I went to the lab and ran the same page on Windows 7 using Firefox. Windows 7 does not display the plug-in separately, instead shows all the utilization as a component of Firefox, which on Windows 7 was in the mid 40% utilization. When we tried to close the page, it crashed Firefox. An unusual crash in that Task Manager indicated it was still running but the application was locked solid.
    Flash is the problem, and Adobe needs to put their pettiness away and deal with the problem. They gutted Macromedia to harvest it for Flash, now they own it and it is their problem. But I don’t expect much from Adobe, since Warnock left, this company has an attitude that is less than desirable.
    I realize your Adobe credentials and you must support them. So it is understandable the bias, just like the article on the .net blog link. I think the last comment on that blog, pretty much drew the line in the sand so to speak, separating fact from fiction.
    BTW, this was a great quote from Lynch “Regarding crashing, I can tell you that we don’t ship Flash with any known crash bugs, and if there was such a widespread problem historically Flash could not have achieved its wide use today.” That is almost hysterical. Adobe doesn’t ship a product that crashes, and we all know Bears have modern bathrooms spread throughout the National Parks.
    I’ve been using Adobe’s products since day one when they got started. Seems in recent years they have forgotten their roots.

  25. Lani,
    I have been doing some homework and you aren’t alone on this one. It isn’t the majority of users however (not that it matters if you are one of the ones affected!) The solutions I have read are simple to downright insane. Bottom line…Adobe needs to address this and help everyone figure out why we have this inconsistency. You can google possible solutions but it seemed like a time vacuum to me.
    Between Flash and Captivate, I won’t be jumping ship anytime soon. I simply can’t create my work without them. Flash is more than video; Games, simulations, data visualizations…they are all handled by Flash and AS3. HTML5 is a long way off when it comes to real production of interactive media. I am playing with it though! Right now it is a huge step backwards for interactivity but that is only until someone develops a really killer authoring tool. I suspect that we will be waiting years for anything that approaches the capability of Flash and Captivate.
    So I guess we just call it a day. Sorry you are having issues but this is a Flash article and we will continue to cover Flash and all things SWF. IK animations with AS3 is up next. You might want to pass on that one!
    Good luck and I hope things get better for you,
    Mark

  26. Lani,
    I have been doing some homework and you aren’t alone on this one. It isn’t the majority of users however (not that it matters if you are one of the ones affected!) The solutions I have read are simple to downright insane. Bottom line…Adobe needs to address this and help everyone figure out why we have this inconsistency. You can google possible solutions but it seemed like a time vacuum to me.
    Between Flash and Captivate, I won’t be jumping ship anytime soon. I simply can’t create my work without them. Flash is more than video; Games, simulations, data visualizations…they are all handled by Flash and AS3. HTML5 is a long way off when it comes to real production of interactive media. I am playing with it though! Right now it is a huge step backwards for interactivity but that is only until someone develops a really killer authoring tool. I suspect that we will be waiting years for anything that approaches the capability of Flash and Captivate.
    So I guess we just call it a day. Sorry you are having issues but this is a Flash article and we will continue to cover Flash and all things SWF. IK animations with AS3 is up next. You might want to pass on that one!
    Good luck and I hope things get better for you,
    Mark

  27. Lani,
    I have been doing some homework and you aren’t alone on this one. It isn’t the majority of users however (not that it matters if you are one of the ones affected!) The solutions I have read are simple to downright insane. Bottom line…Adobe needs to address this and help everyone figure out why we have this inconsistency. You can google possible solutions but it seemed like a time vacuum to me.
    Between Flash and Captivate, I won’t be jumping ship anytime soon. I simply can’t create my work without them. Flash is more than video; Games, simulations, data visualizations…they are all handled by Flash and AS3. HTML5 is a long way off when it comes to real production of interactive media. I am playing with it though! Right now it is a huge step backwards for interactivity but that is only until someone develops a really killer authoring tool. I suspect that we will be waiting years for anything that approaches the capability of Flash and Captivate.
    So I guess we just call it a day. Sorry you are having issues but this is a Flash article and we will continue to cover Flash and all things SWF. IK animations with AS3 is up next. You might want to pass on that one!
    Good luck and I hope things get better for you,
    Mark

  28. Hey Mark,
    My point is not that Flash is a bad tool, but it has problems and Adobe needs to address them. Have you ever followed some of Justin Everett-Church blog (another Adobe Flash engineer)? He has some interesting thoughts on wmode woes. (http://justin.everett-church.com/index.php/2006/02/23/wmode-woes/)
    All in all, if Adobe addressed the issues and fixed the problems, then people wouldn’t need to be running those browser Flash blockers and those people could enjoy your excellent work and that of other developers.

  29. Hey Mark,
    My point is not that Flash is a bad tool, but it has problems and Adobe needs to address them. Have you ever followed some of Justin Everett-Church blog (another Adobe Flash engineer)? He has some interesting thoughts on wmode woes. (http://justin.everett-church.com/index.php/2006/02/23/wmode-woes/)
    All in all, if Adobe addressed the issues and fixed the problems, then people wouldn’t need to be running those browser Flash blockers and those people could enjoy your excellent work and that of other developers.

  30. Hey Mark,
    My point is not that Flash is a bad tool, but it has problems and Adobe needs to address them. Have you ever followed some of Justin Everett-Church blog (another Adobe Flash engineer)? He has some interesting thoughts on wmode woes. (http://justin.everett-church.com/index.php/2006/02/23/wmode-woes/)
    All in all, if Adobe addressed the issues and fixed the problems, then people wouldn’t need to be running those browser Flash blockers and those people could enjoy your excellent work and that of other developers.

Leave a Reply to LaniCancel reply

Discover more from The Logical Blog

Subscribe now to keep reading and get access to the full archive.

Continue reading