`
zyn010101
  • 浏览: 325730 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

页面的flex与div遮罩效果及输入法问题

    博客分类:
  • flex
阅读更多
Flex嵌入到HTML中切换焦点不能输入中文和遮盖DIV的问题
分类: Flex4 2011-07-05 20:06 7人阅读 评论(0) 收藏 举报
默认情况下如果Flash被嵌入到Web页面中,则SWF文件默认被置于所有HTML元素的顶层渲染级别的。类似在所有html元素的总父容器上一层,无法被任何html元素遮挡。
无论怎么设置flash容器和层的深度(z-index)也无济于事。

遇到这个问题我们可以在插入flash的embed或object标签中加入“wmode”属性并设置为wmode=“transparent”或”opaque” 在Flex4中默认的HTML包围容器的方式变了如代码:

view plain
      <script type="text/javascript"> 
          var swfVersionStr = "10.0.0"; 
          var xiSwfUrlStr = "playerProductInstall.swf"; 
          var flashvars = {}; 
          var params = {}; 
          params.quality = "high"; 
          params.bgcolor = "#ebf4ff"; 
          params.allowscriptaccess = "sameDomain"; 
          params.allowfullscreen = "true"; 
          var attributes = {}; 
          attributes.id = "BSC_ABIS_App"; 
          attributes.name = "BSC_ABIS_App"; 
          attributes.align = "middle"; 
          swfobject.embedSWF( 
              "BSC_ABIS_App.swf", "flashContent",  
              "100%", "100%",  
              swfVersionStr, xiSwfUrlStr,  
              flashvars, params, attributes); 
swfobject.createCSS("#flashContent", "display:block;text-align:left;"); 
      </script> 

这是我们可以在上面的params中加
view plain
params.wmode = "opaque";或者 
params.wmode = "transparent"; 
其他情况基本相同
然后我们了解下这些属性:

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”会导致全屏模式失效。



当看完这些属性时,我们恍然大悟 可以解决了。但是问题接踵而来,就是我们突然发现 当焦点置于Flash后再切换到HTML元素中 如HTML的INPUT输入框中,不管怎么切换我们的输入法,中文就是出不来。 不要急,其实这算是Flash的一个BUG但是我们也有办法解决

当我使劲翻阅了藏在API角落的一个函数时我笑了。yd的笑了。

这个大侠就是flash.system.Capabilities。

我们只需用到它的一个属性 就是查看系统的输入法 Capabilities.hasIME :[只读] 指定系统是否安装了输入法编辑器 (IME),如果是,则为 true,否则为 false。服务器字符串为 IME。

当我们焦点进入到Flash时 我们的 IME.enabled属性直接被Flash禁用 值变为False 这也就是 当我们为什么焦点放在HTML的元素中 狂且输入法就是不管用的原因。既然找到原因了。那么我们动手解决吧

首先对Flash主程序进行事件监听用到这个事件MouseEvent.ROLL_OUT:

用户将指针设备从 InteractiveObject 实例上移开时分派。事件目标是指先前在指针设备下的对象或该对象的父级。relatedObject 是将指针设备向其移动的对象。在该对象的父级链以上连续分派 rollOut 事件,以该对象为开头,并以除 relatedObject 的根或始祖之外的最高级别的父级结束。

rollOut 事件的目的是简化带有子级的显示对象容器的移开行为的编码。当鼠标离开显示对象区域或任何其子级区域并转到除其子级以外的对象时,显示对象分派 rollOut 事件。这是与 mouseOut 事件行为不同的行为,因为该事件是在每次鼠标离开显示对象容器的任何子对象区域时才会被分派,即使鼠标仍保留在显示对象容器的另一个子对象上也是如此。

当我们的光标离开Flash是我们手动设置输入法开启代码如下
view plain
appGroup.addEventListener(MouseEvent.ROLL_OUT, setSRF); 
/** 
             * 当光标离开Flash时开启设置系统的输入法 
             * */ 
            private function setSRF(event:MouseEvent):void{ 
                if(Capabilities.hasIME){ 
                    IME.enabled=true; 
                    IME.conversionMode="CHINESE"; 
                } 
            } 
OK 运行我们的页面 发现 成功了。DIV也上来了。中文输入法也能用了。高兴欢呼吧.

补充:今天晚上项目上线的时候发现悲剧了: 在有的电脑下访问的时候报 2063错误:IME异常!  神啊,救救我吧!!!一群人在等我调试这个bug,鸭梨怎一个大字了得!翻了google的前3页,无解!神是不会救我的,经过1个多小时的实验,终于搞定了该问题:
    
 private function setSRF(event:MouseEvent):void{
				if(Capabilities.hasIME){
		         try{
						if(!IME.enabled){
							IME.enabled=true;
						}
						
						IME.conversionMode="CHINESE";
					}catch(e:Error){
					
					}
					
				}
			}
        


仅仅加了一个判断,加了一个try catch 块,OK,完美解决,项目上线了!
分享到:
评论
4 楼 zyn010101 2012-01-23  
cqzs19871202 写道
将flash的wmode设置成非window后,flash的渲染效率会下降,请问有什么好的办法吗?
我试着在弹出div层的时候就把wmode设置为非window,关闭div时再设置成window,但是这样要重新加载flash才行。。。杯具啊。。。因为是游戏,所以渲染效率一定不能降低的。。。求解。。。

既然是游戏,那就是整个窗口全是flash了,怎么还要用div层啊?
3 楼 cqzs19871202 2012-01-14  
将flash的wmode设置成非window后,flash的渲染效率会下降,请问有什么好的办法吗?
我试着在弹出div层的时候就把wmode设置为非window,关闭div时再设置成window,但是这样要重新加载flash才行。。。杯具啊。。。因为是游戏,所以渲染效率一定不能降低的。。。求解。。。
2 楼 zyn010101 2011-09-15  
wincheer 写道
在Chrome等非IE浏览器下也可以吗?

这个你自己测试一下吧,我的那个设置在ie6,7,8下都解决了这种冲突。
1 楼 wincheer 2011-09-14  
在Chrome等非IE浏览器下也可以吗?

相关推荐

    DIV遮罩层 div div

    在网页设计与开发领域,DIV遮罩层是一种常用的UI技术,用于暂时性地遮挡页面的其他部分,从而聚焦用户的注意力于特定区域或操作上。这种方法尤其适用于弹出窗口、加载动画、登录框等场景,能够提升用户体验和界面的...

    flex绘图和遮罩

    4. 在Flex项目中如何应用绘图和遮罩,以提高用户体验和视觉效果。 5. 探索Flex的其他图形组件,如BitmapData和Graphics类,以实现更高级的图形操作。 通过实践和学习,你可以熟练掌握Flex的绘图和遮罩技术,从而在...

    页面加载div遮罩层

    在网页设计中,"页面加载div遮罩层"是一个重要的技术实践,它的目的是在页面内容正在加载时提供一个视觉屏障,防止用户过早地与未完成加载的页面元素交互。这种做法可以提升用户体验,因为当页面正在加载时,遮罩层...

    漂亮遮罩层css+div

    漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div ...

    实现div 遮罩 frameset

    在这个场景中,“实现div 遮罩 frameset”意味着在`frameset`布局的网页上,使用`div`来实现一个可移动的遮罩层或弹出窗口。 首先,我们来看`frameset`。`frameset`是HTML4中的元素,它允许我们将浏览器窗口划分为...

    JS弹DIVJS弹DIV,遮罩层JS弹DIV,遮罩层

    JS弹DIV,遮罩层JS弹DIV,遮罩层JS弹DIV,遮罩层

    CSS+DIV+JQuery源码实现遮罩效果

    在这个"CSS+DIV+JQuery源码实现遮罩效果"的资源中,我们可以学习如何利用这三种技术来创建一个功能完备且视觉效果良好的遮罩层。 首先,CSS(Cascading Style Sheets)是网页样式表语言,主要用于定义HTML或XML...

    flex as3 air ria 遮罩的使用例子

    在Flex中,遮罩还可以应用于更复杂的场景,例如与动画结合。我们可以用TweenMax或TweenLite库来改变遮罩的形状或位置,创建出动态的效果。例如,可以制作一个从左向右滑动的遮罩,以模拟门打开的动画。 对于Adobe ...

    div_遮罩层

    通过js实现的div遮罩层的效果,相当于锁住全屏,只能操作当前的弹出框操作。

    jQuery funkyUI plugin 弹出div遮罩层效果插件.rar

    jQuery funkyUI plugin 弹出div遮罩层效果插件,一看这名字您就明白,这是一个jquery插件类,这个实例包中有一个无边框iframe完美遮罩演示。这些网页特效对于平时的前端设计用处非常大,学习之后也能提高你的JS水平...

    div背景半透明,覆盖整个可视区域的遮罩层效果

    html代码很简单 &lt;div class=mask&gt;&lt;/div&gt; 1 、半透明效果可以使用 css3 中的 opacity 属性,在低版本的IE浏览器中使用IE的alpha 滤镜。代码: .opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:...

    Div 弹出 DIV移动 遮罩层 Div对话框 Div窗口

    Div 对话框 可移动 可设遮罩层 可以同时打开多个对话框,JS源代码

    Flex采用遮罩方法图片裁剪

    本文将详细介绍如何在Flex 3.5及以上版本中利用遮罩技术实现图片裁剪功能。 遮罩(Masking)是ActionScript 3和Flex中一个强大的图形处理特性,它允许我们隐藏或显示显示对象的一部分。在图片裁剪场景中,遮罩可以...

    div遮罩层.txt

    - `&lt;div class="black_overlay"&gt;&lt;/div&gt;`:这是遮罩层的核心部分,使用了类名为`black_overlay`的`&lt;div&gt;`元素来实现遮罩效果。 ##### 2.2 CSS样式详解 接下来分析CSS样式: ```css .black_overlay { position: ...

    全屏loading图有遮罩效果 当显示全屏loading图时无法操作页面上的按钮

    当加载过程中出现全屏loading图带有遮罩效果时,它不仅指示着用户等待的状态,而且更重要的是,防止用户误操作页面上的元素,确保加载过程不受干扰。这种功能通常被称为全屏遮罩提示。 全屏遮罩是一种半透明的覆盖...

    jsp页面加载之遮罩层

    首先,遮罩层通常是一个半透明的div元素,覆盖在页面上,使得用户无法与页面其余部分交互,直到遮罩层消失。这在网页加载大型数据或者执行异步操作时特别有用,因为它可以防止用户误操作并传达出正在工作的状态。 ...

    js div层遮罩提示窗口效果

    在网页设计和开发中,"js div层遮罩提示窗口效果"是一种常见的用户交互技术,它主要用于提供一种视觉上的反馈,使用户能够更好地理解和响应页面上的操作。这种效果通常是通过JavaScript,HTML和CSS来实现的,其中div...

    模式对话框(可刷新)+可移动div+遮罩层

    确保这个遮罩层位于对话框之下,但高于其他页面元素,以便当对话框打开时,用户无法与遮罩层之下的内容交互。 4. **交互逻辑**:最后,我们需要处理用户与对话框的交互,比如点击遮罩层关闭对话框,或者提供关闭...

    10种遮罩效果

    在网页设计和开发中,遮罩效果是一种常用的技术,它能为页面增添视觉吸引力和交互性。"10种遮罩效果"这个主题涵盖了多种不同的遮罩应用方式,旨在提升用户体验和网页设计的艺术性。遮罩效果通常是通过CSS(层叠样式...

    js 弹出窗口 弹出div window 支持遮罩、拖动、嵌入页面、换肤等实用功能

    1. **遮罩效果**:遮罩层是在弹出窗口后面添加一个半透明的背景层,以突出显示弹出窗口并防止用户与页面其他部分互动。实现这一效果通常涉及到CSS的透明度和定位属性,以及JavaScript来动态调整遮罩层的大小和显示。...

Global site tag (gtag.js) - Google Analytics