首先了解一下wmode是什么。

window mode(wmode) 。wmode即窗口模式总共有三种:

window 模式

默认情况下的显示模式,在这种模式下flash player有自己的窗口句柄,这就意味着flash影片是存在于Windows中的一个显示实例,并且是在浏览器核心显示窗口之上的,所以flash只是貌似显示在浏览器中,但这也是flash最快最有效率的渲染模式。由于他是独立于浏览器的HTML渲染表面,这就导致默认显示方式下flash总是会遮住位置与他重合的所有DHTML层。 

但是大多数苹果电脑浏览器会允许DHTML层显示在flash之上,但当flash影片播放时会出现比较诡异的现象,比如DHTML层像被flash刮掉一块一样显示异常。 

Opaque 模式 

这是一种无窗口模式,在这种情况下flash player没有自己的窗口句柄,这就需要浏览器需要告诉flash player在浏览器的渲染表面绘制的时间和位置。这时flash影片就不会在高于浏览器HTML渲染表面而是与其他元素一样在同一个页面上,因此你就可以使用z-index值来控制DHTML元素是遮盖flash或者被遮盖。 

Transparent 模式

透明模式,在这种模式下flash player会将stage的背景色alpha值将为0并且只会绘制stage上真实可见的对象,同样你也可以使用z-index来控制flash影片的深度值,但是与Opaque模式不同的是这样做会降低flash影片的回放效果,而且在9.0.115之前的flash player版本设置wmode=”opaque”或”transparent”会导致全屏模式失效。

这边,我们将wmode设置为transparent。

解决办法:

直接修改工程的下的html-template中的index.template.html模板,在该模板文件中,增加红色字体部分的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <!-- saved from url=(0014)about:internet -->
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
     <!-- 
     Smart developers always View Source. 
     
     This application was built using Adobe Flex, an open source framework
     for building rich Internet applications that get delivered via the
     Flash Player or to desktops via Adobe AIR. 
     
     Learn more about Flex at http://flex.org 
     // -->
     <head>
         <title></title>         
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- Include CSS to eliminate any default margins/padding and set the height of the html element and 
        the body element to 100%, because Firefox, or any Gecko based browser, interprets percentage as 
     the percentage of the height of its parent container, which has to be set explicitly. Initially, 
     don't display flashContent div so it won't show if JavaScript disabled.
    -->
         <style type="text/css" media="screen"> 
     html, body { height:100%; }
     body { margin:0; padding:0; overflow:auto; text-align:center; 
           background-color: #ffffff; }   
     #flashContent { display:none; }
         </style>
   
    <!-- Enable Browser History by replacing useBrowserHistory tokens with two hyphens -->
         <!-- BEGIN Browser History required section -->
         <link rel="stylesheet" type="text/css" href="history/history.css" />
         <script type="text/javascript" src="history/history.js"></script>
         <!-- END Browser History required section --> 
       
         <script type="text/javascript" src="swfobject.js"></script>
         <script type="text/javascript">
             <!-- For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. --> 
             var swfVersionStr = "10.0.0";
             <!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. -->
             var xiSwfUrlStr = "playerProductInstall.swf";
             var flashvars = {};
             var params = {};            / /在嵌入flex的html页面中加入这个,
           //object里有个   wmode的属性,你把他设为透明就行了。
            params.wmode="transparent";
            params.quality = "high";
             params.bgcolor = "#ffffff";
             params.allowscriptaccess = "sameDomain";
             params.allowfullscreen = "true";
             var attributes = {};
             attributes.id = "timeline";
             attributes.name = "timeline";
             attributes.align = "middle";
             swfobject.embedSWF(
                 "timeline.swf", "flashContent", 
                 "100%", "100%", 
                 swfVersionStr, xiSwfUrlStr, 
                 flashvars, params, attributes);
     <!-- JavaScript enabled so display the flashContent div in case it is not replaced with a swf object. -->
     swfobject.createCSS("#flashContent", "display:block;text-align:left;");
         </script>
     </head>
     <body>
         <!-- SWFObject's dynamic embed method replaces this alternative HTML content with Flash content when enough 
     JavaScript and Flash plug-in support is available. The div is initially hidden so that it doesn't show
     when JavaScript is disabled.
    -->
         <div id="flashContent">
         <p>
          To view this page ensure that Adobe Flash Player version 
      10.0.0 or greater is installed. 
     </p>
     <script type="text/javascript"> 
      var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://"); 
      document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='" 
          + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" ); 
     </script> 
         </div>
     
        <noscript>
             <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="timeline">
                 <param name="movie" value="timeline.swf" />
                 <param name="quality" value="high" />
                 <param name="bgcolor" value="#ffffff" />
                 <param name="allowScriptAccess" value="sameDomain" />
                 <param name="allowFullScreen" value="true" />
                 <!--[if !IE]>-->
                 <object type="application/x-shockwave-flash" data="timeline.swf" width="100%" height="100%">
                     <param name="quality" value="high" />
                     <param name="bgcolor" value="#ffffff" />
                     <param name="allowScriptAccess" value="sameDomain" />
                     <param name="allowFullScreen" value="true" />
                 <!--<![endif]-->
                 <!--[if gte IE 6]>-->
                 <p> 
                    Either scripts and active content are not permitted to run or Adobe Flash Player version
                    10.0.0 or greater is not installed.
                 </p>
                 <!--<![endif]-->
                     <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" />
                     </a>
                 <!--[if !IE]>-->
                 </object>
                 <!--<![endif]-->
             </object>
      </noscript>  
    </body>
 </html>

参考:

http://jnlilong1213.blog.163.com/blog/static/36097392201092511141585/

http://snowelf.iteye.com/blog/945399