Adobe Flex迷你教程 —Flex4全屏显示

   应用场景

  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.设置全屏按钮的样式和提示信息

private function stageFullScreenHandler(event:FullScreenEvent):void {
            if(event.fullScreen){
                screenToolTip = "退出全屏";
                ScreenIcon = EscScreenIcon;
            }else{
                screenToolTip = "全屏";
                ScreenIcon = FullScreenIcon;
            }
        }

3.点击button来切换全屏与退出全屏。

 [Embed(source="/assets/screen/full_screen.png")]
        public var FullScreenIcon:Class;
        [Embed(source="/assets/screen/esc_screen.png")]
        public var EscScreenIcon:Class;
        [Bindable]
        public var ScreenIcon:Class = FullScreenIcon;
        [Bindable]
        private var screenToolTip:String = "全屏";

        private function screenButtonClickHandler(event:MouseEvent):void {
            if (stage) {
                if (stage.displayState == StageDisplayState.NORMAL) {
                    /**全屏*/
                    stage.displayState = StageDisplayState.FULL_SCREEN;
                    screenToolTip = "退出全屏";
                    ScreenIcon = EscScreenIcon;
                } else if (stage.displayState == StageDisplayState.FULL_SCREEN) {
                    /**退出全屏*/
                    stage.displayState = StageDisplayState.NORMAL;
                    screenToolTip = "全屏";
                    ScreenIcon = FullScreenIcon;
                }

            }
        }

4.附件为button样式的两个图片