- 浏览: 134115 次
- 性别:
- 来自: 苏州
最新评论
-
lanliying:
主窗体报错Multiple markers at this l ...
Flex自定义事件 -
Alex丿:
12年的帖子,难得~。~
Flex编译参数设置
在页面中经常会用到需要用div来覆盖flash的情况,如梦幻人生项目中有一个游戏场景是全flash的,聊天窗口是普通的div代码,聊天窗口在打开的时候需要盖在flash的上面,如下图:
但 是通常情况下用div是盖不住flash的,不管你如何设置这二者的z-index都是不可能的。解决这个问题的关键在于设置放flash的embed或 object 中wmode的属性,wmode的属性有三种值:opaque,transparent 和 window。我们来看看这三种模式的解释:
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 模式
默认情况下的显示模式,在这种模式下flash player有自己的窗口句柄,这就意味着flash影片是存在于Windows中的一个显示实例,并且是在浏览器核心显示窗口之上的,所以flash只是貌似 显示在浏览器中,但这也是flash最快最有效率的渲染模式。由于他是独立于浏览器的HTML渲染表面,这就导致默认显示方式下flash总是会遮住位置与他重合的所有DHTML层。
但是大多数苹果电脑浏览器会允许DHTML层显示在flash之上,但当flash影片播放时会出现比较诡异的现象,比如DHTML层像被flash刮掉一块一样显示异常。
看了上面的解释,相信你已经有一定了解了。下面我们来应用一下。测试时的浏览器及版本是:ie7/8, ie6, FF3.6+, Safari5.0, Opera10+ 。
注:为了看得更清楚,我把不必要的参数和样式都省略了
例1:wmode="Opaque" 和 wmode="Transparent"
<div id="flash-part" style="position:relative; z-index:1
;">
<embed wmode="Opaque
" src="http://hadaiye.blog.163.com/blog/#" />
</div>
<div id="layer-part" style="position:absolute; z-index:3;
"> </div>
wmode为Opaque(不透明),这种设置可以让layer-part 在 flash 之上,在以上的浏览器中测试都能通过,效果如下图:
wmode="Opaque" 和 wmode="Transparent" 的效果是一样的,所以就不再赘述。
例2:wmode="window"
<div id="flash-part" style="position:relative; z-index:1 ;">
<embed wmode="window " src="http://hadaiye.blog.163.com/blog/#" />
</div>
<div id="layer-part" style="position:absolute; z-index:3 ;"> </div>
将wmode改成window后问题出来了,根据上面的解释,window模式是独立于浏览器窗口之上的,只是看上去在浏览器上而已,z-index已经不起作用了。我测试了一下,除了强大的FF3.6+
,其它浏览器都正确地显示了flash的位置,layer-part被正确地压在了flash的下面。如下:
解决方法:
用一个iframe来盖住flash,同样也是用z-index来定层高。代码如下:
<div id="flash-part" style="position:relative; z-index:1;
">
<embed wmode="window
" src="http://hadaiye.blog.163.com/blog/#" />
</div>
<iframe style="position:absolute;
z-index:2;></
iframe>
<div id="layer-part" style="position:absolute; z-index:3
;"> </div>
但这个方法也不是在所有的浏览器中都有效,此方法对Safari, Opera无效
。在FF,IE,Chrome下的效果如下图(白色部分是iframe):
为 什么iframe可以在部分浏览器中挡住 flash?这个问题我也搜索了一下,找到的解释是这样的,在ie5.5以前,iframe是一个windowed element,也就是说,它也在浏览器上有一个独立的窗口,类似于flash的window模式。在ie5.5之后的版本中iframe虽然被定性为了 windowless element但是似乎它的存在形式并没有完全等同于windowless的元素,某些浏览器对它的显示还是可以当windowed元素使用。
下面我们要介绍一种更变态的运用,把一个window模式的flash放到一个iframe中,再用一个iframe去盖它,看看会发生什么……我们的预期是希望第2个iframe能盖住在第1个iframe中的flash 。
例3:wmode="window" in iframe
<iframe src="http://hadaiye.blog.163.com/blog/tempflash.html" style="position:absolute; z-index:1;" ></iframe>
<iframe style="position:absolute; z-index:2;"></iframe>
<div id="layer-part" style="position:absolute; z-index:3;"> </div>
(tempflash.html 页面中放着一个wmode="window"的flash )
IE,FF下:
Chrome,Safari,Opera下(覆没了):
这下可以按我们的预期的显示的只剩下ie 和FF了。其它浏览器都让我们失望了,我不知道这”失望的显示“是正确的还是错误的,因为我找不到第1个iframe中的flash与第2个iframe之间正确的关系应该是怎么样的
。但是我觉得 safari和opera也许是正确的。windowed的元素应该要比windowless 的元素绝对层级更高些吧。
也许有人会问不用wmode="window"模式不就可以了,干麻还要这么麻烦地研究它呢,但是对于需要使用输入法的flash游戏来说只能使用window模式,其它模式都会使输入法失效(变态),所以这其实是我工作中遇到的问题,拿出来和大家分享一下。
发表评论
-
清除flash player缓存-SharedObject
2012-06-18 14:02 2176http://www.macromedia.com/suppo ... -
Flash Builder4.6破解
2012-06-10 13:41 5具体步骤如下:1.到Adobe官网下载FlashBuilder ... -
SharedObject
2012-04-11 16:05 1622共享对象可以简单理解为类似浏览器的cookies,可以将一定 ... -
RollOver和MouseOver的区别
2012-03-20 10:22 1703共同点:都是针对鼠标的进入和进出事件。 不同点: 1、 ... -
Flex自定义事件时为什么要重载clone()方法(转载)
2012-02-19 17:35 1404声明:转载 以前在学习自定义事件的时候一直不太明白为什 ... -
Datagrid动态添加列
2012-02-19 17:34 1913Datagrid的列是一个数组,动态添加列的方法是创建一个新的 ... -
一个简单的画板
2012-02-17 11:22 1425Flex中画图,有两种方法: 1、直接在canvas中画 ... -
给特效加上缓动效果
2012-02-17 11:21 1017给特效的结束前加上缓动效果,比如模拟篮球落地->弹起-& ... -
BitmapData
2012-02-17 11:21 1875可以使用BitmapData对象加载图片,BitmapData ... -
TitleWindow自定义标题栏
2012-02-17 11:21 1626应用场景: TitleWindow宽度固定,titl ... -
Image拉伸
2012-02-17 11:21 1305应用场景: 当使用Image加载图片或swf文件时, ... -
TextArea设置文本的局部样式
2012-02-16 13:21 3403var tr:TextRange = new TextR ... -
HtmlText中加入超链接
2012-02-16 13:20 1249以下是Label中加入超链接的例子: prote ... -
Flex滤镜
2012-02-16 13:20 1789使用滤镜可以改变文本和控件显示效果,Flex滤镜如下: ... -
Flex字体
2012-02-16 13:20 17461、嵌入字体 嵌入字体会把字体文件编译到应用中,所以 ... -
Flex的Combobox组件
2012-02-16 13:19 85471、显示提示 设置Prompt ... -
Flex中ToolTip的使用
2012-02-15 10:12 26911、为ToolTip加入动画效 ... -
Flex常用特效
2012-02-15 10:12 1052Flex常用特效列表: -
Flex回调函数
2012-02-15 10:12 1215应用场景:父子窗体之间的通信,比如想把弹出窗口中的数据传给弹出 ... -
Flex内存优化(转载)
2012-02-15 10:12 14591. 使用合适的显示对象,对于非交互的简单形状用Sha ...
相关推荐
在这个例子中,“your.swf”是SWF文件的路径,其他参数如`quality`、`wmode`等会影响Flash的显示效果。 2. `<embed>`标签:HTML5引入了新的`<embed>`标签,简化了Flash的嵌入。虽然`<object>`仍然是推荐的跨浏览器...
在Flash对象中,有一个名为`wmode`的参数,它用于定义Flash与浏览器的交互方式,对解决HTML元素遮挡Flash的问题至关重要。`wmode`有三种主要模式: 1. **transparent(透明模式)**:在这种模式下,Flash内容允许...
3. **参数设置**:开发者可以通过`swfobject.embedSWF()`方法指定Flash对象的参数,如Flash文件的URL、宽度、高度、版本号、以及额外的Flash参数等。 4. **回退机制**:如果用户浏览器不支持Flash或者禁用了Flash,...
总的来说,解决ECShop中的Flash广告覆盖问题,需要对Flash的嵌入代码进行调整,尤其是`wmode`参数,以便实现与页面其他元素的和谐共存,同时考虑性能优化。此外,随着HTML5技术的发展,许多现代浏览器已经不再支持...
6. **使用Wmode参数**:在Flash嵌入代码中添加`wmode`参数,如`wmode="opaque"`或`wmode="transparent"`,这可以使Flash与HTML元素更好地交互,有时可以解决点击穿透问题。 7. **移除Flash**:如果Flash内容不是...
值得注意的是,设置`wmode`为`transparent`可能会对Flash的性能产生一定影响,特别是对于含有复杂交互和大量图形的动画,因为透明背景会使得Flash需要处理更多的渲染工作。 此外,为了方便观察透明效果,作者在HTML...
2. **重新排列元素顺序**:如果`wmode`调整无效或者不适用,可以尝试调整HTML结构,将Flash元素放置在下拉菜单元素之后。这样,虽然Flash加载后仍然会覆盖下拉菜单,但由于HTML的渲染顺序,下拉菜单会在用户交互时...
这个`wmode`(Window Mode)属性对Flash与HTML的交互方式产生了重大影响。 首先,让我们深入理解这三个不同的窗口模式: 1. **Window**:这是`wmode`的默认值。在这种模式下,Flash内容在Web页面上以一个独立的矩形...
然而,需要注意的是,虽然`wmode="transparent"`可以使Flash背景透明,但它可能会对性能产生一定影响,尤其是当Flash内容复杂或与其他网页元素交互时。此外,不同的浏览器和Flash版本可能对`wmode`的支持程度不同,...
这对于透明的FLASH尤其有用,因为它可以与页面的其他元素无缝融合,同时还能保持交互性。下面我们将详细介绍如何在HTML中实现这个功能。 首先,我们需要了解HTML的基本结构。HTML(超文本标记语言)是用于创建网页...
#### 2.2 参数详解 - **codebase**:指定Flash插件的来源。 - 当`SysDownloadFlashFashion`为1时,从Adobe官方服务器下载。 - 当`SysDownloadFlashFashion`不为1时,从本地服务器下载。 - **wmode**:设置Flash...
1. **兼容性**:虽然设置`wmode`参数为`opaque`可以有效解决覆盖问题,但也需要注意这种设置可能会影响到Flash对象的性能,特别是在老版本的浏览器中。 2. **HTML5替代方案**:考虑到Flash技术已经逐渐被HTML5所取代...
接下来,我们将深入解析如何在Flash中实现透明效果,以及“wmode”参数在其中扮演的角色。 ### Flash中的透明性控制 在Flash中,透明性的调整主要通过以下几种方式进行: 1. **Alpha通道设置**:Alpha通道是用于...
同时,可能还需要设置Flash的`wmode`参数为`transparent`或`opaque`,以实现最佳的浏览器兼容性和性能。 5. **兼容性**:SwfFit设计时考虑了跨浏览器兼容性,支持主流的现代浏览器,如Chrome、Firefox、Safari、...
在上述代码中,`wmode`参数被设置为"transparent",这告诉Flash Player和浏览器要启用背景透明。 然而,即使你正确设置了`wmode`,仍可能遇到某些浏览器不支持或表现不佳的情况。这时,可能需要对不同浏览器采用...
JavaScript可以跨平台地操作网页的DOM元素,包括嵌入的Flash对象。 在HTML中,我们可以使用`<object>`或`<embed>`标签嵌入Flash内容,并通过JavaScript控制它们。例如,以下代码展示了如何在JavaScript中禁用Flash...
在`<param>`标签中添加`wmode`参数,设置其值为`opaque`或`transparent`,可以消除虚框并改善与页面其他元素的叠加效果。例如: ```html <param name="wmode" value="opaque" /> <!-- 其他param标签 --> ``` 3...