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

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样式的两个图片