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视频的"铁三角"了

var _video:Video = new Video();
var _netStream:NetStream;
var _netConnetction:NetConnection = new NetConnection();

var _url:String;
var _duration:Number;
var _client:Object = new Object;

var _bg:Rect = new Rect(100, 100, 0);
var _playerWidth:Number;
var _playerHeight:Number;

//定义缩放模式
var _scaleMode:String;
//控制全屏与退出全屏的按钮
var _fullScreenBtn:MovieClip;

//初始播放器尺寸
_playerWidth = 400;
_playerHeight = 300;
_scaleMode = "showAll";
_url = "http://js.tudouui.com/bin/events/puma/pumaFlv_2.flv";
init();
function init():void {
        //基本的视频代码
        _netConnetction.connect(null);
        _netStream = new NetStream(_netConnetction);
        _netStream.client = _client;
        _client.onMetaData = onMetaData;
        _netStream.bufferTime = 2.0;
        _netStream.play(_url);
        addChild(_video);
        _video.attachNetStream(_netStream);
        //给全屏按钮添加事件
        _fullScreenBtn = new fullBt();
        addChild(_fullScreenBtn);
        setUIPosition(false);
        _fullScreenBtn.buttonMode = true;
        _fullScreenBtn.addEventListener(MouseEvent.CLICK, onFullScreenBtnClick);
}

然后再添加两个事件，分别的舞台的Event.RESIZE事件和全屏按钮的MouseEvent.CLICK事件。

//给stage对象，添加RESIZE事件
stage.addEventListener(Event.RESIZE, onStageResize);
//给全屏按钮添加事件
_fullScreenBtn = new fullBt();
addChild(_fullScreenBtn);
setUIPosition(false);
_fullScreenBtn.buttonMode = true;
_fullScreenBtn.addEventListener(MouseEvent.CLICK, onFullScreenBtnClick);

flash中实现全屏方法就是在全屏函数里更新stage对像的displayState属性为StageDisplayState.FULL_SCREEN。
可以在全屏函数里改变全屏按钮的状态，这里的全屏按钮是一个MovieClip，所以可以让按钮停在不同的帧上来表现不同的状态。

/*********
** onFullScreenBtnClick方法用于实现全屏与退出全屏
** 更新stage对像的displayState属性
**********/
private function onFullScreenBtnClick(e:MouseEvent):void {
        if (stage.displayState == StageDisplayState.NORMAL) {
                stage.displayState = StageDisplayState.FULL_SCREEN;
                _fullScreenBtn.gotoAndStop(2);
        }else {
                stage.displayState = StageDisplayState.NORMAL;
                _fullScreenBtn.gotoAndStop(1);
        }
}

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

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

/*********
** onStageResize方法在舞台Resize的时候执行
** 可以在这里执行其它控制UI的缩放或位置变换
**********/
function onStageResize(e:Event):void {
        var playerWidth:int;
        var playerHeight:int
        if (stage.stageWidth > 400){
                //更新控制界面
                setUIPosition(true);
                //更新播放器尺寸,这个例子同stage尺寸
                playerWidth = stage.stageWidth;
                playerHeight = stage.stageHeight;
        }else{
                //更新控制界面
                setUIPosition(false);
                //更新播放器尺寸,这个例子同stage尺寸
                playerWidth = stage.stageWidth;
                playerHeight = stage.stageHeight;
        }
        //根据播放器尺寸设置视频尺寸
        setSize(playerWidth,playerHeight);
}

也根据stage的长宽属性值来重新定位与缩放控制界面

function setUIPosition(full:Boolean):void{
        //更新控制UI缩放
        if(full){
                _fullScreenBtn.scaleX = _fullScreenBtn.scaleY = 1.5;
        }else{
                _fullScreenBtn.scaleX = _fullScreenBtn.scaleY = 1;
        }
        //更新控制UI位置
        _fullScreenBtn.x = stage.stageWidth - _fullScreenBtn.width;
        _fullScreenBtn.y = stage.stageHeight - _fullScreenBtn.height;
}

设置视频尺寸，我这里用到了ruochi提供的ScaleUtils类，
可以去看看代码，方法并不复杂这里不详述了，setSize方法如下：

function setSize(w:int, h:int):void {
        //将播放器尺寸赋值给_bg对象
        _bg.width = w;
        _bg.height = h;
        if (_scaleMode == ScaleUtils.NO_BORDER) {
                ScaleUtils.fillNoBorder(_video, _bg);
        }else if (_scaleMode == ScaleUtils.NO_SCALE) {
                ScaleUtils.fillNoScale(_video, _bg);
        }else if (_scaleMode == ScaleUtils.EXACT_FIT) {
                ScaleUtils.fillExactFit(_video, _bg);
        }else {
                ScaleUtils.fillShowAll(_video, _bg);
        }
}

最后需要注意一下的是，程序初始时并没有触发RESIZE事件,视频不能被设置成适当的尺寸，
所以需要在onMetaData方法中设置一下视频尺寸。

function onMetaData(info:Object):void {
        _duration = info['duration'];
        //更新视频尺寸
        setSize(_playerWidth,_playerHeight);
}