- 浏览: 324516 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
ajax忘了跳转:
谢谢分享,基于你的思路。我改良了一版,可供参考public s ...
一个整数的所有最小因子 -
baobaodehao1991:
楼主,合并多列,单元格内容并不能居中,选中合并的单元格,除了前 ...
把table表格内容导出为excel -
lbaaixy:
楼主,小弟最近也在弄这个东西。有点小问题java.lang.C ...
flex + red5实现视频会议 -
weilikk:
好像只能替换整行,如果是一行中有其他数据,只替换行中某个位置就 ...
poi替换模板标签为图片 -
chinaxiaofeng8:
在吗,兄弟,你那个代码怎么运行看效果的
flex + red5实现视频会议
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个多小时的实验,终于搞定了该问题:
仅仅加了一个判断,加了一个try catch 块,OK,完美解决,项目上线了!
既然是游戏,那就是整个窗口全是flash了,怎么还要用div层啊?
这个你自己测试一下吧,我的那个设置在ie6,7,8下都解决了这种冲突。
分类: 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才行。。。杯具啊。。。因为是游戏,所以渲染效率一定不能降低的。。。求解。。。
我试着在弹出div层的时候就把wmode设置为非window,关闭div时再设置成window,但是这样要重新加载flash才行。。。杯具啊。。。因为是游戏,所以渲染效率一定不能降低的。。。求解。。。
既然是游戏,那就是整个窗口全是flash了,怎么还要用div层啊?
3 楼
cqzs19871202
2012-01-14
将flash的wmode设置成非window后,flash的渲染效率会下降,请问有什么好的办法吗?
我试着在弹出div层的时候就把wmode设置为非window,关闭div时再设置成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浏览器下也可以吗?
发表评论
-
amf协议
2011-12-09 09:06 1130AMF协议的最基本概念则是在XML的文本数据中了解到的。随 ... -
flex + red5实现视频会议
2011-09-30 10:55 25540公司最近要在系统中加视频会议的功能,让我探索,我 ... -
可以动态添加行背景色的flex datagrid控件
2011-08-26 23:31 3282flex自带的datagrid控件是不能改变行的背景色的,项目 ... -
flex为datagrid数据添加序号
2011-08-24 12:10 1353protected function getRowNum( ... -
flex的label换行
2011-05-10 21:00 1103在as中赋值 label.text="aaaaa \ ... -
as3和flex的100条知识
2011-05-10 19:27 1447AS3和Flex一百条常用的知 ... -
一个flex进度条
2011-05-04 16:09 1809package com.iman.sps.sheet.ascr ... -
解决Error #1502: 脚本的执行时间已经超过了 15 秒的默认超时设置
2011-04-11 19:21 8259js代码: var url; var Addi ... -
as和js互相调用
2011-04-11 18:42 1538as调用js: as代码 ExternalInterfac ... -
【转】flex利用Blazeds上传文件
2011-03-29 12:43 1418Flex 利用 Blazeds上传文件 收藏 ... -
flex界面弹出jsp模态窗口,并向js传值
2011-03-29 12:04 5033最近做的项目需要动态创建弹出窗口,动态创建fle ... -
radioButton切换页签TabNavigator
2011-03-25 12:40 1900<?xml version="1.0" ... -
datagrid中显示带下划线链接的列表数据
2011-03-25 12:37 2499public function linkButtonClick ... -
[转]as和java数据类型转换关系
2011-03-15 16:38 1798使用BlazeDS+JAVA的模式来开发的时候,数据类型对应的 ... -
flex中 类似java instanceof 的用法
2011-03-14 18:46 1565java中有 instanceof 关键字,在actionsc ... -
flex解析xml文件和xml字符串的疑问
2011-03-11 16:44 3193最近在做flex页面 ... -
flex中remoteObject和httpservice的取舍
2011-03-08 18:53 2653remoteObject和java交互的时候需要在 ... -
flex的httpservice与java交互过程中的乱码问题
2011-03-08 13:08 2470写程序这么久了,以为自己早已告别了乱码问题,可是最近在做fle ... -
为SSH架构的java web项目添加flex支持
2011-02-11 15:43 3711java+flex开发环境在此不再介绍,SSH架构 ... -
flex的滤镜
2011-02-10 14:34 1995flex可以通过滤镜增加图片效果,这里以模糊效果为例进行演示: ...
相关推荐
在网页设计与开发领域,DIV遮罩层是一种常用的UI技术,用于暂时性地遮挡页面的其他部分,从而聚焦用户的注意力于特定区域或操作上。这种方法尤其适用于弹出窗口、加载动画、登录框等场景,能够提升用户体验和界面的...
4. 在Flex项目中如何应用绘图和遮罩,以提高用户体验和视觉效果。 5. 探索Flex的其他图形组件,如BitmapData和Graphics类,以实现更高级的图形操作。 通过实践和学习,你可以熟练掌握Flex的绘图和遮罩技术,从而在...
在网页设计中,"页面加载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”意味着在`frameset`布局的网页上,使用`div`来实现一个可移动的遮罩层或弹出窗口。 首先,我们来看`frameset`。`frameset`是HTML4中的元素,它允许我们将浏览器窗口划分为...
JS弹DIV,遮罩层JS弹DIV,遮罩层JS弹DIV,遮罩层
在这个"CSS+DIV+JQuery源码实现遮罩效果"的资源中,我们可以学习如何利用这三种技术来创建一个功能完备且视觉效果良好的遮罩层。 首先,CSS(Cascading Style Sheets)是网页样式表语言,主要用于定义HTML或XML...
在Flex中,遮罩还可以应用于更复杂的场景,例如与动画结合。我们可以用TweenMax或TweenLite库来改变遮罩的形状或位置,创建出动态的效果。例如,可以制作一个从左向右滑动的遮罩,以模拟门打开的动画。 对于Adobe ...
通过js实现的div遮罩层的效果,相当于锁住全屏,只能操作当前的弹出框操作。
jQuery funkyUI plugin 弹出div遮罩层效果插件,一看这名字您就明白,这是一个jquery插件类,这个实例包中有一个无边框iframe完美遮罩演示。这些网页特效对于平时的前端设计用处非常大,学习之后也能提高你的JS水平...
html代码很简单 <div class=mask></div> 1 、半透明效果可以使用 css3 中的 opacity 属性,在低版本的IE浏览器中使用IE的alpha 滤镜。代码: .opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:...
Div 对话框 可移动 可设遮罩层 可以同时打开多个对话框,JS源代码
本文将详细介绍如何在Flex 3.5及以上版本中利用遮罩技术实现图片裁剪功能。 遮罩(Masking)是ActionScript 3和Flex中一个强大的图形处理特性,它允许我们隐藏或显示显示对象的一部分。在图片裁剪场景中,遮罩可以...
- `<div class="black_overlay"></div>`:这是遮罩层的核心部分,使用了类名为`black_overlay`的`<div>`元素来实现遮罩效果。 ##### 2.2 CSS样式详解 接下来分析CSS样式: ```css .black_overlay { position: ...
首先,遮罩层通常是一个半透明的div元素,覆盖在页面上,使得用户无法与页面其余部分交互,直到遮罩层消失。这在网页加载大型数据或者执行异步操作时特别有用,因为它可以防止用户误操作并传达出正在工作的状态。 ...
在网页设计和开发中,"js div层遮罩提示窗口效果"是一种常见的用户交互技术,它主要用于提供一种视觉上的反馈,使用户能够更好地理解和响应页面上的操作。这种效果通常是通过JavaScript,HTML和CSS来实现的,其中div...
确保这个遮罩层位于对话框之下,但高于其他页面元素,以便当对话框打开时,用户无法与遮罩层之下的内容交互。 4. **交互逻辑**:最后,我们需要处理用户与对话框的交互,比如点击遮罩层关闭对话框,或者提供关闭...
在网页设计和开发中,遮罩效果是一种常用的技术,它能为页面增添视觉吸引力和交互性。"10种遮罩效果"这个主题涵盖了多种不同的遮罩应用方式,旨在提升用户体验和网页设计的艺术性。遮罩效果通常是通过CSS(层叠样式...
当加载过程中出现全屏loading图带有遮罩效果时,它不仅指示着用户等待的状态,而且更重要的是,防止用户误操作页面上的元素,确保加载过程不受干扰。这种功能通常被称为全屏遮罩提示。 全屏遮罩是一种半透明的覆盖...
1. **遮罩效果**:遮罩层是在弹出窗口后面添加一个半透明的背景层,以突出显示弹出窗口并防止用户与页面其他部分互动。实现这一效果通常涉及到CSS的透明度和定位属性,以及JavaScript来动态调整遮罩层的大小和显示。...