大家在做flex应用时有没有碰到移动滚动条时,页面控件显示刷新迟钝,导致页面都是控件的残影,多了就像花屏,特别是用一些复杂的布局。这个问题困扰了我快半个月,一直没找到问题的根源。今天无意中发现,其实这问题出在我们flex 应用的wrapper template上了
以上是正常的代码,但当你在embed中多设置了wmode为Opaque或Transparant时,就会出现花屏的现象。
先说下wmode的作用
在flash标签中
<param name=”wmode" value="xxxx">
"Window" 在 Web 页上用影片自己的矩形窗口来播放应用程序,并且始终位于最顶层。
"Opaque" 显示页面上位于它后面的内容。
"Transparent"使 HTML 页的背景可以透过应用程序的所有透明部分显示出来,并且可能会降低动画性能。
具体说就是
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”会导致全屏模式失效。
从上面大家可以看到默认的window模式效率是最高的,用opaque和Transparant会花屏,因为html和flash同步效率是很低的。但在使用google flex iframe时为了解决游览器的缩放问题时,一定要用opaque或Transparant时html和flash同步,不然缩放会有问题,真是矛盾的问题啊。看样子还是少用wmode,大家不要在flash中嵌入html,或者大家用HTML5,虽然HTML5还没成熟,但我感觉将是未来的趋势,找时间我也要把玩把玩。