经典论坛's Archiver

woaibujian 发表于 2008-7-2 14:23

FLASH使浏览器鼠标滚轮失效

最近在做项目中发现一个页面的浏览器不能够响应鼠标的上下滚轮了,虽然单个FLASH高度超出网页的可视范围的情况并不多见,不过既然问题出现了,就要想办法解决。

经过几番测试本人发现大部分FLASH是可以正常响应鼠标滚轮的。只有一种情况,就是场景中,更确切的说是库中出现了component时,鼠标就不能响应滚轮了[b]。[url=http://www.merrycat.com.cn/blog/others/flash/webscroll/trans.html]查看例子[/url][/b]
(此文代码均由AS2.0创建,但应该具有普遍性,包括AS3.0)

此例中鼠标置于蓝色区域上时滚轮是失效的。我想大概原因是继承自ui component的组件都支持scroll的功能,从而阻止了对浏览器的滚轮事件的响应?

渐渐的我又发现只有在页面中去掉wmode='transparent'时,滚动又恢复了,[b][url=http://www.merrycat.com.cn/blog/others/flash/webscroll/notrans.html]查看例子[/url][/b]。不过点击按钮或是FLASH其它部分后浏览器还是会失去焦点从而导致滚轮失效。

所以这里还要加上:[code]var mouseListener:Object = new Object();
mouseListener.onMouseWheel = function() {
        getURL("javascript:void(window.focus())");
};
Mouse.addListener(mouseListener);[/code]这样才能够使鼠标点击按钮后再进行滚动时使浏览器重新获取焦点。[b][url=http://www.merrycat.com.cn/blog/others/flash/webscroll/transfocus.html]查看例子[/url][/b]


去掉这个参数就会恢复滚动的原因无从得知,不过加wmode='transparent'一直是我个人的一个习惯,这里不得不又说到另外一个例子上去。

以下是官方对于wmode的解释:[quote]wmode 属性/参数

Window | Opaque | Transparent

模板变量:$WM

说明
(可选)允许使用 Internet Explorer 4.0 中的透明 Flash 内容、绝对定位和分层显示功能。此标记/属性仅在带有 Flash Player ActiveX 控件的 Windows 中有效。

"Window"在 Web 页上用影片自己的矩形窗口来播放应用程序。"Window"表明此 Flash 应用程序与 HTML 层没有任何交互,并且始终位于最顶层。

"Opaque" 使应用程序隐藏页面上位于它后面的所有内容。

[b]"Transparent"使 HTML 页的背景可以透过应用程序的所有透明部分显示出来,并且可能会降低动画性能。[/b]

"Opaque windowless"和"Transparent windowless"都可与 HTML 层交互,从而允许 SWF 文件上方的层遮蔽应用程序。这两种选项之间的差异在于"Transparent"允许透明,因此,如果 SWF 文件的某一部分是透明的,则 SWF 文件下方的 HTML 层可以透过该部分显示出来,而"opaque"则不会显示。

如果忽略此属性,默认值为 Window。仅适用于 object。
[/quote]
这段解释我个人认为部分语句有些含糊不清,尤其是这句[b]"Transparent"使 HTML 页的背景可以透过应用程序的所有透明部分显示出来,并且可能会降低动画性能。[/b]可是根据本人之前做项目的经验,设置为Transparent 实际上是可以提高渲染效率的,可以看以下两个例子:
[b][url=http://www.merrycat.com.cn/blog/others/flash/webscroll/dandan_site/trans.html]transparent[/url]     [url=http://www.merrycat.com.cn/blog/others/flash/webscroll/dandan_site/notrans.html]noTransparent[/url][/b]
通过观察不难发现同样的SWF文件,设置了wmode='transparent'的页面明显要比没有设置的页面运行更流畅,实际上它是与在本地双击浏览swf文件相同的速度,这也是图形比较多的FLASH放到网页播放没有本地流畅的原因。

通过这个例子,实际我想说的是仅仅将wmode='transparent'去掉并不是我想要的完美方案,不知道有没有人和我遇到过相同的问题可以分享一下经验,或是对于上面几个问题的解释。

--------------------------------

还是搜到了更好的办法,直接通过FLASH调用JS控制滚动条:

[code]var mouseListener:Object = new Object();
mouseListener.onMouseWheel = function(delta:Number) {
ExternalInterface.call("gundong",delta*-15);
};
Mouse.addListener(mouseListener);[/code]

[code]<script LANGUAGE=Javascript>
function gundong(value){
var pos
if (document.documentElement && document.documentElement.scrollTop) {
          pos = document.documentElement.scrollTop;
} else if (document.body) {
pos = document.body.scrollTop;
}  
window.scroll(0,pos+value);  
}
</script>[/code]

不要忘了import flash.external.*;


欢迎大家来我的[url=http://www.merrycat.com.cn/blog/article.asp?id=413]blog[/url]交流。

[[i] 本帖最后由 woaibujian 于 2008-7-3 12:38 编辑 [/i]]

ibio 发表于 2008-7-2 14:26

是的。有些FLASH的组件是会让滚轮失效,例如Loader组件。我之前的做法是去掉这些组件。没想到LZ研究得这么深刻,顶一个!特别是那段代码让我十分受用!学习了。

libins 发表于 2008-7-2 14:59

佩服lz的钻研精神,尤其是奉献精神!

学习了!

FlashDJ 发表于 2008-7-2 18:32

前阵子我也发现类似的问题,不过我头疼的是FLASH无法响应鼠标滚轮了,而不是浏览器~

页面中插入的FLASH里有个可以响应滚轮的事件,在IE下面打开时可以响应滚轮,在FF下面打开时就无法响应了,后来我改了wmode,发现在火狐下面也只有wmode='window'的时候FLASH可以响应滚轮,但是如你所说,那样一来性能方面会受到一些影响。
而且不同版本的FF浏览器表现出来的问题也不同。IE6和IE7下都没有问题。
也是很无奈的。

另提一句,感觉FF下的FlashPlayer插件的性能要比IE下的好?
至少在图形和动画较多的FLASH看来,FF下要比IE下相对流畅些~(wmode参数相同的情况下)

[[i] 本帖最后由 FlashDJ 于 2008-7-2 18:36 编辑 [/i]]

SUNXINZHE 发表于 2008-7-2 18:48

基本不用组件,所以也没会到过
但还是要收藏起来
防范于未然

jaoooo 发表于 2008-7-30 11:14

4楼的朋友解决了么? 现在我也有这样的问题

透明后 焦点发生错位

页: [1]



Powered by Discuz! Archiver 6.1.0  © 2001-2007 Comsenz Inc.