本文和大家重点讨论一下Flex全屏的原理和局部Flex全屏的几种方法,Flex全屏和flash全屏其实是相似的,都是由as控制的,当选择以Flex全屏显示的时候,会自动更改swf的高和宽,以Flex全屏幕显示整个swf。
Flex全屏
1.Flex全屏的原理:
Flex全屏和flash全屏其实是相似的,都是由as控制的,当选择以Flex全屏显示的时候,会自动更改swf的高和宽,以Flex全屏幕显示整个swf。
2.局部Flex全屏的两种方法:
一、使用在flash.display包中有一个stage对象,它有一个属性是fullScreenSourceRect:Rectangle,设置FlashPlayer以将特定的舞台区域放大到Flex全屏模式。
二、Flex全屏时调整某组件的高度和宽度,铺满整个屏幕,当退出Flex全屏时,要还原组件的高度和宽度。
3.Flex全屏的代码实现:
第一种方法:
- //valid,willenablehardwarescaling
- stage.fullScreenSourceRect=newRectangle(0,0,320,240);——详细代码可以查看Flex帮助
第二种方法:(注意:在Application中添加的初始化函数,使用的是applicationComplete事件)
- <?xmlversionxmlversion="1.0"encoding="utf-8"?>
- <!--http://blog.Flexexamples.com/2007/08/07/creating-full-screen-Flex-applications/-->
- <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="vertical"
- applicationComplete="init(event)"viewSourceURL="srcview/index.html">
- <mx:Script>
- <![CDATA[
- importflash.display.StageDisplayState;
- privatefunctioninit(evt:Event):void{
- /*Setupfullscreenhandler.*/
- Application.application.stage.addEventListener(FullScreenEvent.FULL_SCREEN,fullScreenHandler);
- dispState=Application.application.stage.displayState;
- }
- privatefunctionfullScreenHandler(evt:FullScreenEvent):void{
- dispState=Application.application.stage.displayState+"(fullScreen="+evt.fullScreen.toString()+")";
- if(evt.fullScreen){
- /*Dosomethingspecifichereifweswitchedtofullscreenmode.*/
- }else{
- /*Dosomethingspecifichereifweswitchedtonormalmode.*/
- }
- }
- privatefunctiontoggleFullScreen():void{
- try{
- switch(Application.application.stage.displayState){
- caseStageDisplayState.FULL_SCREEN:
- /*Ifalreadyinfullscreenmode,switchtonormalmode.*/
- Application.application.stage.displayState=StageDisplayState.NORMAL;
- break;
- default:
- /*Ifnotinfullscreenmode,switchtofullscreenmode.*/
- Application.application.stage.displayState=StageDisplayState.FULL_SCREEN;
- break;
- }
- }catch(err:SecurityError){
- //ignore
- }
- }
- ]]>
- </mx:Script>
- <mx:Stringidmx:Stringid="dispState"/>
- <mx:Labeltextmx:Labeltext="width={Application.application.width}"/>
- <mx:Labeltextmx:Labeltext="height={Application.application.height}"/>
- <mx:Labeltextmx:Labeltext="displayState={dispState}"/>
- <mx:Buttonlabelmx:Buttonlabel="Togglefullscreen"click="toggleFullScreen()"/>
- </mx:Application>
--------------------------------------------------并修改index.template.html:-------------------------------------------
- AC_FL_RunContent(
- "src","main",
- "width","100%",
- "height","100%",
- "align","middle",
- "id","main",
- "quality","high",
- "bgcolor","#869ca7",
- "name","main",
- "allowScriptAccess","sameDomain",
- "type","application/x-shockwave-flash",
- "pluginspage","http://www.adobe.com/go/getflashplayer",
- "allowFullScreen","true"
- );
注意:
1、Application.application.stage.displayState=StageDisplayState.FULL_SCREEN;
//必须把它放到按钮或键盘事件中,否则在AS2.0里会被忽略,AS3.0里会抛出以下异常SecurityError:Error#2152:不允许使用Flex全屏模式。atflash.display::Stage/setdisplayState()
2、Flex全屏下Flash文本框无法输入,设计界面请勿支持Flex全屏,而且Flex全屏下做不到屏蔽右键的功能
【编辑推荐】
- Flex全屏实现方法揭秘
- 解析Flex全屏模式设置方法
- Flex及FlexBuilder2.0开发环境详解
- FlexBuilder3.0与Eclipse3.4的完美结合
- Flex内存泄露解决方法和内存释放优化原则