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