5 Replies Latest reply on Nov 9, 2010 8:17 AM by jp311

    Flash transparency in Firefox?

    jp311 Level 1

      I have a flash navigation menu and a flash app right underneath it, but the transparency modes are not working in firefox.  They work fine in IE though.  You can get a better understanding of what I mean by viewing the page.  You'll notice that in FireFox, you can't use the top 1/4 or so of the game, but in IE you can.  Anyone know why exactly?  Thanks!

       

      Jesse

        • 1. Re: Flash transparency in Firefox?
          kglad Adobe Community Professional & MVP

          that looks like an html issue.

           

          to confirm, publish an html file from flash, don't edit it and test in firefox.  any problem?

          • 2. Re: Flash transparency in Firefox?
            jp311 Level 1

            I've done this, but when I publish it from flash, all I get is the game.  This game is actually going on our website so I'm going to need to put it on the page you just viewed eventually.

            • 3. Re: Flash transparency in Firefox?
              jp311 Level 1

              I tried doing what you suggested kglad, but still no luck.  It seems to work fine in IE, but not in firefox.  If you wouldn't mind taking a look at it again and viewing the source, I'd appreciate it.  This is the last thing I have to do before I send this out.  You can view it here.  Thanks!

               

              Jesse

              • 4. Re: Flash transparency in Firefox?
                kglad Adobe Community Professional & MVP

                there's still an html issue.

                 

                i'm unable to determine exactly what the problem is without checking your html and i'm unable to quickly check your html.

                 

                (and, you should have a way to mute your game's sound or, even better, control its volume.)

                • 5. Re: Flash transparency in Firefox?
                  jp311 Level 1

                  Ok, you'll notice that if you view the page in firefox, you cannot interact with the game until about halfway down the game's stage, but you can in IE.  You'll notice the animating speaker that you can click on in order to stop the music, but it's inaccessible in firefox, but accessible in IE.  The reason for this is because the navigation is actually 275px tall (because it has dropdowns), but I have it's wmode set to transparent.  The navigation is sitting inside of a div that is positioned absolute and has a z-index of 1 so the game is not pushed all the way down to its actual bottom (y of 275px), but rather sits right underneath it.

                   

                  The problem is that even though I have the navigation's z-index set to 1 and it's wmode set to transparent, the game sits directly underneath it, but is not "interactable" until you get the cursor past the height of the navigation (275px).  See what I'm saying?  So essentially this is what you're looking at for the page code:

                   

                   

                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                  <html xmlns="http://www.w3.org/1999/xhtml">
                  <head>
                  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                  <title>Happy Thanksgiving from Travel Solutions!</title>
                  <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
                  <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>

                   

                  <style type="text/css">
                  body, html {margin:0px 0px 0px 0px; text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#5c5e5e}

                   

                  .container {width:955px; margin:0 auto; text-align:center; position:relative;}

                   

                  .nav {position:absolute; z-index:1; left:50%; margin-left:-469px;}

                   

                  .gameholder {margin-top:100px; margin:0 auto; padding-top:65px;}

                   

                  .footertable td {line-height:15px; font-size:10px;}

                   

                  .footertable a:link {color:#5c5e5e; font-weight:normal; text-decoration:underline;}

                   

                  .footertable a:visited {color:#5c5e5e; font-weight:normal; text-decoration:underline;}

                   

                  .footertable a:hover {color:#5c5e5e; text-decoration:none; font-weight:normal;}

                   

                  .footertable a:active {color:#5c5e5e; font-weight:normal; text-decoration:underline;}

                   

                  .hr {margin:10px 0px 25px 0px;}
                  </style>
                  </head>

                   

                  <body>
                  <div class="container">
                  <div class="nav">
                  <script type="text/javascript">
                  AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','wid th','955','wmode','transparent','height','275','src','nav','quality','high','pluginspage', 'http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','mov ie','nav' ); //end AC code
                  </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="935" height="275">
                      <param name="movie" value="nav.swf" />
                      <param name="quality" value="high" />
                      <param name="wmode" value="transparent" />
                      <embed src="nav.swf" width="935" height="275" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
                    </object>
                  </noscript></div>
                  </div>
                  <div class="gameholder">
                    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="627" height="525" id="FlashID" title="Whack-A-Turkey">
                      <param name="movie" value="game2.swf" />
                      <param name="quality" value="high" />
                      <param name="swfversion" value="6.0.65.0" />
                      <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
                      <param name="expressinstall" value="../Scripts/expressInstall.swf" />
                      <param name="wmode" value="transparent" />
                      <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
                      <!--[if !IE]>-->
                      <object type="application/x-shockwave-flash" data="game2.swf" width="627" height="525">
                        <!--<![endif]-->
                        <param name="quality" value="high" />
                        <param name="swfversion" value="6.0.65.0" />
                        <param name="expressinstall" value="../Scripts/expressInstall.swf" />
                        <param name="wmode" value="transparent" />
                        <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
                        <div>
                          <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
                          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
                        </div>
                        <!--[if !IE]>-->
                      </object>
                      <!--<![endif]-->
                    </object>
                  <!--<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.ts24.com%2Fthanksgiving2010 %2Findex.cfm&layout=standard&show_faces=true&width=265&action=like&font=arial&colorscheme= light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:265px; height:80px;" allowTransparency="true"></iframe>-->
                  </div>
                  </div>
                  <img src="../images/hr.jpg" width="935" height="12" class="hr" />
                  <cfinclude template="../includes/footer.cfm">
                  <script type="text/javascript">
                  <!--
                  swfobject.registerObject("FlashID");
                  //-->
                  </script>
                  </body>
                  </html>