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

应用场景

1.播放器

我们经常看视频的时候，需要全屏显示，（在flex中这个视频初始化的时候是嵌入到html的iframe中）。

2.监控

如下图所示，大多时候我们的监控用的是flex，而树形菜单和标题用的是html，flex嵌入到html的iframe中，而我们如果在这么小的范围内看监控，总感觉不爽，这时

就需要我们全屏显示flex应用来专心的观看监控。

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAN8AAACWCAIAAADRzMrfAAAE20lEQVR4nO3c0ZWqMBRGYeqiIOqhGpqhGOZBZWIMIQeE/Cfu/XQVlAPzDaN3LegWItW62gMQbYZO0g2dpBs6STd0km7oJN3QSbqhk3Tb19kRHQqdpBs6STd0km7oJN0q6Dy/SWo1dJJu6CTd0Em6oZN0Qyfphk7SDZ2kGzpJN3SSbugk3dBpyNe0DYROQ76mbSB0GvI1bQOh01ByWl+74Ct0GvI1bQOh05CvaRsInYZM0+7uoK99rxI64zpjmffZ3dC3Z28tdBqynjutKxz4HWg7dBoqmbacV1Ln4e02GToN3XDuPLnRxkKnoaSnwye8Ep3uDtF3Q6ch07ntvE5fB+eK0GnoTp2+jsxFodPQd3V+rvN46O6wXBc6DZmmLVEb/dvdAbk6dBoyTV6oM3pDj4flutB5VZ+7Vr6/bR+Z8tB5YSf3tOT0zAG0veH9m2y4bq/aA14bOkk3dJJu9XXWysuctPZDOsld6CTd0Em6oZN0q6Dz/CaPJTIGZUInOnVDJzp1Qyc6dUMnOnVDJzp1Qyc6dUMnOnVDJzp1Qyc6dUMnOnVDJzp1Qyc6dZPQOY99l6of5/MDlY9Bakno/G8aLjZZNgZphE506uZA5+O56fHXf10YfhqIXpFZVDgGaeREZ9d1w7Sx2jz2waPMovIxSCMvOkOb89i/PV7msX++KrPIMsa9iYwhmBOd4XMb3/CHKbvINMa9rVtHZ5RXnUlwuUWmMe4t3Hr1YaRyqDP3xd7wnV9T5wLQII86n3/A/8+R89i/HmQWGca4t8+tVx9JJJc6l+gTZspuclHpGPe2tXWAium8MZExlqzCHweKTmmdu0vbDp3qOktWaDV0olM3dKJTN3Q60PmzoROduqETnbqhE526odOZToWBbwud9X/Y5Vv/EZRrbnR+/QeDTv3c6Px6ImMs6NwOnejUDZ3o1E1F5xxdEPze47LMwksySgf9SZ35nVXTr6Sz79PXT76WofNzzW6jY5tDZ+bcOQxD4gw5j/3GknODtqIzuVpmp9Bp3uTzasrE5efT0PXjPMU60zf8CN7m2fqi+AKQhnWWLDK9Va3EdL4wriu/bp/wrnPzhh/Rx9fwRg0/p7Pw3UQOQjI5ne8O1wfhszv3AgkNBhe4ozPxboIiw/R0hjeX+T+RBjpzN/yIb7fgUWdmsLzO1FHZ+XpUfd/zCepceYYfQmOdG9+QpHUm9Vg9ZZ4p3ItoQ+jc3+Q7q2mIv8CHf9kzN/zI6IwXVdFper5kzWM6P5/RNKqp8/nXOyD49ml0+4YfGZ3v97J73nbxVp1bfUtnycszvyGCQEV1ftzZMP4fpY0bfuR0vr1omNrQWf7y3dXQeckmjyUyxnKXzu9Ock/orK9zOX3+axUoOr3qjF7SJFB0OtOZGXh3afkw1Q/II3T601m+5pkdrH5MFnRWH2Mdpu4AnymMhE506oZOdOqGTnTqhk506oZOdOqGTnTqhk4JnZQMnejUDZ3o1A2d6NQNnejUDZ3o1A2d6NQNnejUDZ3o1A2d6NQNnejUDZ3o1A2d6NQNnejUDZ3o1A2d6NQNnejUDZ3o1A2d6NQNnejUDZ3o1A2d6NQNnejUrb5OosLQSbqhk3RDJ+mGTtLtDp06fXG3yUX8pEk3dJJu6CTd0Em6oZN0Qyfphk7S7Q/zc23SCbtCegAAAABJRU5ErkJggg==" alt="" />

实现方式：

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

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAEQElEQVRoge1aT0syXxR+uotZFcWgMbiYRpkkQsIP4NJlvLhzIy5dtBhCXPgBRFuFi2g5grgYXIhGH6BVtAyRCBOZWsQgEUa7EM+76B37o9n8633rx++BC8N17jnPM84999wzd2EwGNDu7i6Ojo7A8zwEQUA0GoUgCAgEApPrtbU1/E1cX1/DMAycn5/j9vZ2cm0YBu7v7/Hr1y+Uy2UsJBIJajabloxGIhGsrq5ClmWEw2EIgoCNjQ2Ew2EsLS3ZIvj4+Ihut4vLy0sYhoFut4ter4fBYIBOp2PJRiKRADiOIwCuGsdxVKvVyCo0TSOv/CIQCLg2BIACgYBlAV76ZKFQyNLf9Rmenp6+5N55CIVCYJIkeWLs4ODgS+6dB0mSwERRdGWEMQZVVZFMJi2PSSaTUFUVjDFXvkVRBFRVdfwOMsaoWq1afvffo1arEWPMsX9VVd3NgfF4jHa77Xh8p9PBeDx2PD4UCgG6rruOBrlczvbTz+Vyrv3quk4YjUaexGQ7Irwgz3EcjUYjAhGRJEmexOVsNvsp+Ww264kvSZKIiJ4FxONxT4x+JkJRFM/8xOPxFwGZTMYzwwCoUChMkS8UCp76yGQyRETEgOcFwUuUy+Wpvr29PU99mJwZ8CcceYjFxcWpPp7nPfVhcmbAnxVtBlRVhaIotgwzxrC/vz/VXy6Xba+8iqJAVdWZv004ExENh8OpUKqqqu3J99nKXK1WLa+8iqJMxr3PFjiOo+Fw+DKJiZ6XdZ/PRz6fjzRNsx1BrKYVVkS8Jm+iXq9P+L3ee2Dqzjn4SARjzNaGZl4ONIv8PNgSMEuEXfImZomwS57IgQAiomKxSDzPkyiK1Gg0nJggIqJGo0GiKBLP81QsFh3ZWCAishUavhnc7Si+Af4X8K/hSECpVILf70cwGESr1XLsvNVqIRgMwu/3o1QqOTNid9b/6DD6rRcyTdNIEAQSBIHq9bpl8nZFWKlEfJRKmPxepzozkznGmONkbp4IO2WU98nc63FTydzZ2dlMI6qq2t4GMsao2WxOkW82m7ZrQIqiTGWiZjs9PX0RoGmaLcOfNVmWpwR4VTgwm/kaMQDo9/vwEoZhTPXd3d156sPkzABA13VPjefzeUt9bjDhTPQfKKvIsvzl5E14Xtj68aXFH1/cPTk5+evkTeTzeVe+T05OiLkJoYwxRKNRx+MjkYirrzT9fh/MTQgdj8dIp9OoVCq2x1YqFaTTaVcfOHq9HpBKpVy/i4yxmbWkj6BpmqtPS2ZLpVKEWCzm2hAA8vl8lgX4fD5PfMZiMXdz4F+j3+///KMGtg57vD7gIUkSBEHA1tYWZFnG8vKyraf38PCAXq+HdrsNwzCg6/qbgx9WkEgksDAYDGhnZwfHx8dYWVl5c8RGFEVsbm5CEASsr6/bIugWV1dXMAwDFxcXuLm5eXP0ZjgcYnt7G4eHh/gNK3OYE6G6d9oAAAAASUVORK5CYII=" alt="" />aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAEQElEQVRoge1aT0syXxR+uotZFcWgMbiYRpkkQsIP4NJlvLhzIy5dtBhCXPgBRFuFi2g5grgYXIhGH6BVtAyRCBOZWsQgEUa7EM+76B37o9n8633rx++BC8N17jnPM84999wzd2EwGNDu7i6Ojo7A8zwEQUA0GoUgCAgEApPrtbU1/E1cX1/DMAycn5/j9vZ2cm0YBu7v7/Hr1y+Uy2UsJBIJajabloxGIhGsrq5ClmWEw2EIgoCNjQ2Ew2EsLS3ZIvj4+Ihut4vLy0sYhoFut4ter4fBYIBOp2PJRiKRADiOIwCuGsdxVKvVyCo0TSOv/CIQCLg2BIACgYBlAV76ZKFQyNLf9Rmenp6+5N55CIVCYJIkeWLs4ODgS+6dB0mSwERRdGWEMQZVVZFMJi2PSSaTUFUVjDFXvkVRBFRVdfwOMsaoWq1afvffo1arEWPMsX9VVd3NgfF4jHa77Xh8p9PBeDx2PD4UCgG6rruOBrlczvbTz+Vyrv3quk4YjUaexGQ7Irwgz3EcjUYjAhGRJEmexOVsNvsp+Ww264kvSZKIiJ4FxONxT4x+JkJRFM/8xOPxFwGZTMYzwwCoUChMkS8UCp76yGQyRETEgOcFwUuUy+Wpvr29PU99mJwZ8CcceYjFxcWpPp7nPfVhcmbAnxVtBlRVhaIotgwzxrC/vz/VXy6Xba+8iqJAVdWZv004ExENh8OpUKqqqu3J99nKXK1WLa+8iqJMxr3PFjiOo+Fw+DKJiZ6XdZ/PRz6fjzRNsx1BrKYVVkS8Jm+iXq9P+L3ee2Dqzjn4SARjzNaGZl4ONIv8PNgSMEuEXfImZomwS57IgQAiomKxSDzPkyiK1Gg0nJggIqJGo0GiKBLP81QsFh3ZWCAishUavhnc7Si+Af4X8K/hSECpVILf70cwGESr1XLsvNVqIRgMwu/3o1QqOTNid9b/6DD6rRcyTdNIEAQSBIHq9bpl8nZFWKlEfJRKmPxepzozkznGmONkbp4IO2WU98nc63FTydzZ2dlMI6qq2t4GMsao2WxOkW82m7ZrQIqiTGWiZjs9PX0RoGmaLcOfNVmWpwR4VTgwm/kaMQDo9/vwEoZhTPXd3d156sPkzABA13VPjefzeUt9bjDhTPQfKKvIsvzl5E14Xtj68aXFH1/cPTk5+evkTeTzeVe+T05OiLkJoYwxRKNRx+MjkYirrzT9fh/MTQgdj8dIp9OoVCq2x1YqFaTTaVcfOHq9HpBKpVy/i4yxmbWkj6BpmqtPS2ZLpVKEWCzm2hAA8vl8lgX4fD5PfMZiMXdz4F+j3+///KMGtg57vD7gIUkSBEHA1tYWZFnG8vKyraf38PCAXq+HdrsNwzCg6/qbgx9WkEgksDAYDGhnZwfHx8dYWVl5c8RGFEVsbm5CEASsr6/bIugWV1dXMAwDFxcXuLm5eXP0ZjgcYnt7G4eHh/gNK3OYE6G6d9oAAAAASUVORK5CYII=" alt="" />