应用场景
1.播放器
我们经常看视频的时候,需要全屏显示,(在flex中这个视频初始化的时候是嵌入到html的iframe中)。
2.监控
如下图所示,大多时候我们的监控用的是flex,而树形菜单和标题用的是html,flex嵌入到html的iframe中,而我们如果在这么小的范围内看监控,总感觉不爽,这时
就需要我们全屏显示flex应用来专心的观看监控。
实现方式:
直接看code:
1.在 addedToStage的事件里监听stage的FullScreenEvent事件。
private function addedToStageHandler(event:Event):void { stage.addEventListener(FullScreenEvent.FULL_SCREEN, stageFullScreenHandler); }
2.设置全屏按钮的样式和提示信息
1 private function stageFullScreenHandler(event:FullScreenEvent):void { 2 if(event.fullScreen){ 3 screenToolTip = "退出全屏"; 4 ScreenIcon = EscScreenIcon; 5 }else{ 6 screenToolTip = "全屏"; 7 ScreenIcon = FullScreenIcon; 8 } 9 }
3.点击button来切换全屏与退出全屏。
1 [Embed(source="/assets/screen/full_screen.png")] 2 public var FullScreenIcon:Class; 3 [Embed(source="/assets/screen/esc_screen.png")] 4 public var EscScreenIcon:Class; 5 [Bindable] 6 public var ScreenIcon:Class = FullScreenIcon; 7 [Bindable] 8 private var screenToolTip:String = "全屏"; 9 10 private function screenButtonClickHandler(event:MouseEvent):void { 11 if (stage) { 12 if (stage.displayState == StageDisplayState.NORMAL) { 13 /**全屏*/ 14 stage.displayState = StageDisplayState.FULL_SCREEN; 15 screenToolTip = "退出全屏"; 16 ScreenIcon = EscScreenIcon; 17 } else if (stage.displayState == StageDisplayState.FULL_SCREEN) { 18 /**退出全屏*/ 19 stage.displayState = StageDisplayState.NORMAL; 20 screenToolTip = "全屏"; 21 ScreenIcon = FullScreenIcon; 22 } 23 24 } 25 }
4.附件为button样式的两个图片