flash全屏后的UI控制

好多朋友对全屏后如何控制界面UI感到很困扰，

可能你知道全屏是通过stage.displayState = StageDisplayState.FULL_SCREEN来实现的，
其实我们还可以给stage添加Event.RESIZE事件，用来帮我们触发UI的定位与缩放。

首先需要设置舞台对齐方式，这里设置对齐到左上角，也就是默认的坐标原点。
接下来设置舞台的scaleMode，这里设置为NO_SCALE。

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

再初始化一个简单的播放器,这个例子只需要一个video对象跟一个全屏按钮就可以了，
设置一下播放器尺寸，缩放模式，还有视频地址。

//下面三个对象就是flash视频的"铁三角"了

 1 var _video:Video = new Video();
 2 var _netStream:NetStream;
 3 var _netConnetction:NetConnection = new NetConnection();
 4 
 5 var _url:String;
 6 var _duration:Number;
 7 var _client:Object = new Object;
 8 
 9 var _bg:Rect = new Rect(100, 100, 0);
10 var _playerWidth:Number;
11 var _playerHeight:Number;
12 
13 //定义缩放模式
14 var _scaleMode:String;
15 //控制全屏与退出全屏的按钮
16 var _fullScreenBtn:MovieClip;
17 
18 //初始播放器尺寸
19 _playerWidth = 400;
20 _playerHeight = 300;
21 _scaleMode = "showAll";
22 _url = "http://js.tudouui.com/bin/events/puma/pumaFlv_2.flv";
23 init();
24 function init():void {
25         //基本的视频代码
26         _netConnetction.connect(null);
27         _netStream = new NetStream(_netConnetction);
28         _netStream.client = _client;
29         _client.onMetaData = onMetaData;
30         _netStream.bufferTime = 2.0;
31         _netStream.play(_url);
32         addChild(_video);
33         _video.attachNetStream(_netStream);
34         //给全屏按钮添加事件
35         _fullScreenBtn = new fullBt();
36         addChild(_fullScreenBtn);
37         setUIPosition(false);
38         _fullScreenBtn.buttonMode = true;
39         _fullScreenBtn.addEventListener(MouseEvent.CLICK, onFullScreenBtnClick);
40 }
41 
42 然后再添加两个事件，分别的舞台的Event.RESIZE事件和全屏按钮的MouseEvent.CLICK事件。
43 
44 //给stage对象，添加RESIZE事件
45 stage.addEventListener(Event.RESIZE, onStageResize);
46 //给全屏按钮添加事件
47 _fullScreenBtn = new fullBt();
48 addChild(_fullScreenBtn);
49 setUIPosition(false);
50 _fullScreenBtn.buttonMode = true;
51 _fullScreenBtn.addEventListener(MouseEvent.CLICK, onFullScreenBtnClick);
52 
53 flash中实现全屏方法就是在全屏函数里更新stage对像的displayState属性为StageDisplayState.FULL_SCREEN。
54 可以在全屏函数里改变全屏按钮的状态，这里的全屏按钮是一个MovieClip，所以可以让按钮停在不同的帧上来表现不同的状态。
55 
56 /*********
57 ** onFullScreenBtnClick方法用于实现全屏与退出全屏
58 ** 更新stage对像的displayState属性
59 **********/
60 private function onFullScreenBtnClick(e:MouseEvent):void {
61         if (stage.displayState == StageDisplayState.NORMAL) {
62                 stage.displayState = StageDisplayState.FULL_SCREEN;
63                 _fullScreenBtn.gotoAndStop(2);
64         }else {
65                 stage.displayState = StageDisplayState.NORMAL;
66                 _fullScreenBtn.gotoAndStop(1);
67         }
68 }

我们需要在全屏或退出全屏的时候，缩放与重新定位控制界面，
当然也需要在这个时候，缩放与重新定位视频，
在舞台的RESIZE事件函数里执行这些操作是个不错的方法。

在这里，我设计播放器的尺寸跟stage的尺寸相同，
所以让播放器根据stage的长宽属性值更新尺寸。
再根据播放器尺寸来设置视频尺寸与位置。

 1 /*********
 2 ** onStageResize方法在舞台Resize的时候执行
 3 ** 可以在这里执行其它控制UI的缩放或位置变换
 4 **********/
 5 function onStageResize(e:Event):void {
 6         var playerWidth:int;
 7         var playerHeight:int
 8         if (stage.stageWidth > 400){
 9                 //更新控制界面
10                 setUIPosition(true);
11                 //更新播放器尺寸,这个例子同stage尺寸
12                 playerWidth = stage.stageWidth;
13                 playerHeight = stage.stageHeight;
14         }else{
15                 //更新控制界面
16                 setUIPosition(false);
17                 //更新播放器尺寸,这个例子同stage尺寸
18                 playerWidth = stage.stageWidth;
19                 playerHeight = stage.stageHeight;
20         }
21         //根据播放器尺寸设置视频尺寸
22         setSize(playerWidth,playerHeight);
23 }
24 
25 也根据stage的长宽属性值来重新定位与缩放控制界面
26 
27 function setUIPosition(full:Boolean):void{
28         //更新控制UI缩放
29         if(full){
30                 _fullScreenBtn.scaleX = _fullScreenBtn.scaleY = 1.5;
31         }else{
32                 _fullScreenBtn.scaleX = _fullScreenBtn.scaleY = 1;
33         }
34         //更新控制UI位置
35         _fullScreenBtn.x = stage.stageWidth - _fullScreenBtn.width;
36         _fullScreenBtn.y = stage.stageHeight - _fullScreenBtn.height;
37 }
38 
39 设置视频尺寸，我这里用到了ruochi提供的ScaleUtils类，
40 可以去看看代码，方法并不复杂这里不详述了，setSize方法如下：
41 
42 function setSize(w:int, h:int):void {
43         //将播放器尺寸赋值给_bg对象
44         _bg.width = w;
45         _bg.height = h;
46         if (_scaleMode == ScaleUtils.NO_BORDER) {
47                 ScaleUtils.fillNoBorder(_video, _bg);
48         }else if (_scaleMode == ScaleUtils.NO_SCALE) {
49                 ScaleUtils.fillNoScale(_video, _bg);
50         }else if (_scaleMode == ScaleUtils.EXACT_FIT) {
51                 ScaleUtils.fillExactFit(_video, _bg);
52         }else {
53                 ScaleUtils.fillShowAll(_video, _bg);
54         }
55 }
56 
57 最后需要注意一下的是，程序初始时并没有触发RESIZE事件,视频不能被设置成适当的尺寸，
58 所以需要在onMetaData方法中设置一下视频尺寸。
59 
60 function onMetaData(info:Object):void {
61         _duration = info['duration'];
62         //更新视频尺寸
63         setSize(_playerWidth,_playerHeight);
64 }