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 }