Flex4 VideoDisplay全屏和部分控件全屏小例子

说明：这个例子包括了上一篇的videoDisplay的视频锯齿的处理，state状态的切换，控件全屏和部分控件全屏，双击单个视频全屏，那个全屏的按钮是所有视频的全屏，还有一个位置计算的方法

           刚学Flex不久，要做一个类似图中那样的视频展示网页。（代码写的太乱了真希望有大神可以帮忙优化！）

先看下效果图

1. main.mxml

   主页面

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   xmlns:s="library://ns.adobe.com/flex/spark"   xmlns:mx="library://ns.adobe.com/flex/mx" width="960" height="530" xmlns:c="component.*"   initialize="init(event)" applicationComplete="applicationCompleteHandler(event)" backgroundColor="0x000000" ><fx:Declarations><!-- 将非可视元素（例如服务、值对象）放在此处 --></fx:Declarations><s:states><s:State name="one"/><s:State name="two"/><s:State name="three"/><s:State name="four"/><s:State name="five"/><s:State name="six"/></s:states><fx:Script><![CDATA[import mx.core.UIComponent;import mx.events.FlexEvent;import it.sephiroth.utils.HashMap;private var bId:String;private var vdAllArray:Array = null;private var stateArrayMap:HashMap = new HashMap();protected function init(event:FlexEvent):void{ExternalInterface.addCallback("changeState",changeState);}private var fullBlocks:int = 1;private function allFullScreen():void{this.fullScreen(this.getGroupId(Math.sqrt(fullBlocks)), 1);}private function singlefullScreen(event:MouseEvent):void{this.fullScreen(event.currentTarget as SVideoDisplay, 0);}private function fullScreen(displayObject:UIComponent, flag:int):void{if(FullScreenUtil.isFullScreen){FullScreenUtil.exitFullScreen();selectRect.width = 0;selectRect.height = 0;}else{FullScreenUtil.goFullScreen();if(flag == 0){// 加入要全屏的对像．videoDisplayFullScreenUtil.addChild(null, displayObject, true, true, true);}else{FullScreenUtil.addChild(stateArrayMap.getValue("map" + fullBlocks) as Array, displayObject, true, true, true);}}}private var stateMap:HashMap = new HashMap();private function changeState(gState:String, blocks:int):void{//vdAllArray = null;currentState = gState;if(stateMap.getValue(gState) == null){this.vdFitGroup(blocks);stateArrayMap.put("map" + blocks, vdAllArray);}selectRect.width = 0;selectRect.height = 0;fullBlocks = blocks;stateMap.put(gState, blocks);}private function getGroupId(sqrtBlocks:int):Group{var groupId:Group;if(1 == sqrtBlocks){groupId = oneVideo;} else if(2 == sqrtBlocks){groupId = twoVideo;}else if(3 == sqrtBlocks){groupId = threeVideo;}else if(4 == sqrtBlocks){groupId = fourVideo;}else if(5 == sqrtBlocks){groupId = fiveVideo;}else if(6 == sqrtBlocks){groupId = sixVideo;}return groupId;}private function vdFitGroup(blocks:int):void{var sumWidth:int = 960;//容器宽度var sumHeight:int = 480;//容器高度var cuttingLineWidht:int = 2;//分割线宽var x:int = 2;//相对X轴的距离var y:int = 2;//相对Y轴的距离var sqrtBlocks:int = Math.sqrt(blocks); //取平方根var videoHeight:int = (sumHeight - (sqrtBlocks + 1) * 2) / sqrtBlocks;//视频的高度var videoWidth:int = (sumWidth - (sqrtBlocks + 1) * 2) / sqrtBlocks; //视频的宽度var remainX:int = (sumWidth - (sqrtBlocks + 1) * 2) % sqrtBlocks; //X轴剩余的像素var remainY:int = (sumHeight - (sqrtBlocks + 1) * 2) % sqrtBlocks;//Y轴剩余的像素var vd:SVideoDisplay = null;var vh:int;var vw:int;var hk:int = 0;vdAllArray = new Array();for(var i:int = 0; i < sqrtBlocks; i++){ //行var wk:int = 0;if(i >= (sqrtBlocks - remainY + 1)){hk++;}vdAllArray[i] = new Array();for(var j:int = 0; j < sqrtBlocks; j++){ //列vd = new SVideoDisplay();if(remainX > 0 && j >= (sqrtBlocks - remainX)){vw = videoWidth + 1;} else {vw = videoWidth;}if(remainY > 0 && i >= (sqrtBlocks - remainY)){vh = videoHeight + 1;} else {vh = videoHeight}if(j >= (sqrtBlocks - remainX + 1)){wk++;}x = 2 + 2 * j + j * videoWidth + wk; //列相距X轴的距离公式y = 2 + 2 * i + i * videoHeight + hk; //行相距Y轴的距离公式vd.x = x;vd.y = y;vd.id = blocks + "" + i + "" + j;vd.videoURL = "http://helpexamples.com/flash/video/clouds.flv";vd.height = vh;vd.width = vw;vd.toolTip = blocks + "" + i + "" + j;vd.addEventListener(MouseEvent.CLICK, vdClick);vd.doubleClickEnabled = true;vd.addEventListener(MouseEvent.DOUBLE_CLICK,singlefullScreen);vdAllArray[i][j] = vd;this.getGroupId(sqrtBlocks).addElement(vd);}}}//点击视频窗口的时候重新画一个矩形包围视频private function vdClick(event:MouseEvent):void{selectRect.x = SVideoDisplay(event.currentTarget).x;selectRect.y = SVideoDisplay(event.currentTarget).y;selectRect.width = SVideoDisplay(event.currentTarget).width;selectRect.height = SVideoDisplay(event.currentTarget).height;}protected function applicationCompleteHandler(event:FlexEvent):void{// TODO Auto-generated method stubthis.vdFitGroup(1);stateArrayMap.put("map" + 1, vdAllArray);stateMap.put("one", 1);}]]></fx:Script><!-- 视频容器 --><s:Group id="oneVideo" height="480" width="100%" includeIn="one"></s:Group><s:Group id="twoVideo" height="480" width="100%" includeIn="two"></s:Group><s:Group id="threeVideo" height="480" width="100%" includeIn="three"></s:Group><s:Group id="fourVideo" height="480" width="100%" includeIn="four"></s:Group><s:Group id="fiveVideo" height="480" width="100%" includeIn="five"></s:Group><s:Group id="sixVideo" height="480" width="100%" includeIn="six"></s:Group><!-- 选择框 --><s:Rect id="selectRect"><s:stroke><s:SolidColorStroke color="0xff0000" weight="2" /></s:stroke> </s:Rect><s:BorderContainer x="0" y="480" height="50" width="960" borderColor="0xff0000"><s:layout><s:HorizontalLayout/></s:layout><s:Button name="one" label="1" click="changeState(event.currentTarget.name, 1)"/><s:Button name="two" label="4" click="changeState(event.currentTarget.name, 4)"/><s:Button name="three" label="9" click="changeState(event.currentTarget.name, 9)"/><s:Button name="four" label="16" click="changeState(event.currentTarget.name, 16)"/><s:Button name="five" label="25" click="changeState(event.currentTarget.name, 25)"/><s:Button name="six" label="36" click="changeState(event.currentTarget.name, 36)"/><s:Button label="全屏" click="allFullScreen();"/></s:BorderContainer></s:Application>

2. SVideoDisplay.mxml

    自定义组件为VideoDisplay设置背景色，并且动态绑定一个source属性，还有视频锯齿的处理

    还有一个原因就是因为VideoDisplay如果视频源为空的话，他这个对象就为空，到时候需要点击的时候就获取不到

<?xml version="1.0" encoding="utf-8"?><s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"   xmlns:s="library://ns.adobe.com/flex/spark"   xmlns:mx="library://ns.adobe.com/flex/mx"   backgroundColor="#999999" borderVisible="false" width="400" height="200"><fx:Declarations><!-- 将非可视元素（例如服务、值对象）放在此处 --></fx:Declarations><fx:Script><![CDATA[import spark.components.VideoDisplay;/** *自定义视频url属性 ，因为这个视频源要动态的，所以加了个_videoURL属性用来动态绑定他（不知道这样合不合理） * */[Bindable]private var _videoURL:String = "";public function set videoURL(url:String):void{this._videoURL=url;}public function get videoURL():String{return this._videoURL;}import org.osmf.events.MediaPlayerStateChangeEvent;private function checkState(e:MediaPlayerStateChangeEvent):void{if(e.state == "playing") vid_player.videoObject.smoothing = true;}]]></fx:Script><s:VideoDisplay id="vid_player" width="100%" height="100%" source="{_videoURL}" scaleMode="stretch"  mediaPlayerStateChange="checkState(event)" /></s:BorderContainer>

FullScreenUtil.as

  网上的一个全屏的as类，自己加了一些代码进去

package {import flash.display.DisplayObject;import flash.display.StageDisplayState;import flash.events.FullScreenEvent;import flash.utils.Dictionary;import mx.containers.Canvas;import mx.core.FlexGlobals;import mx.core.IVisualElementContainer;import mx.core.UIComponent;import mx.events.ResizeEvent;import mx.managers.PopUpManager;public class FullScreenUtil{private static var theCanvas:Canvas;private static var displayObjectMap:Dictionary = new Dictionary(true);private static var anchorMap:Dictionary = new Dictionary(true);private static var _canvasStyleName:String = null;public static var isFullScreen:Boolean = false;private static var displayObjectArr:Array = new Array(); //自定义一个数组/** *Getters and setters to facilitate styling the background canvas  * @param val *  */public static function set canvasStyleName(val:String):void{_canvasStyleName = val;}public static function get canvasStyleName():String{return _canvasStyleName;}/** *Use this method to send the application full screen  * @param color color for the full screen background to be *  */public static function goFullScreen(color:uint = 0x000000):void{isFullScreen = true;theCanvas = new Canvas();theCanvas.mouseEnabled = false;if(canvasStyleName){theCanvas.styleName = canvasStyleName;}else{theCanvas.setStyle('backgroundColor', color);}PopUpManager.addPopUp(theCanvas, FlexGlobals.topLevelApplication as DisplayObject);FlexGlobals.topLevelApplication.stage.displayState = StageDisplayState.FULL_SCREEN;onResize();(FlexGlobals.topLevelApplication as DisplayObject).addEventListener(ResizeEvent.RESIZE, onResize);theCanvas.systemManager.stage.addEventListener(FullScreenEvent.FULL_SCREEN, onExitFullScreen);}/** *Use this method to exit full screen  * all cleanup and child parenting will be done automatically */public static function exitFullScreen():void{isFullScreen = false;if(!theCanvas)return;if(null != displayObjectArr){vdFitWindow(960, 480, displayObjectArr.length*displayObjectArr.length);} else {}(FlexGlobals.topLevelApplication as DisplayObject).removeEventListener(ResizeEvent.RESIZE, onResize);theCanvas.systemManager.stage.removeEventListener(FullScreenEvent.FULL_SCREEN, onExitFullScreen);if(theCanvas.systemManager.stage.displayState == StageDisplayState.FULL_SCREEN)theCanvas.systemManager.stage.displayState = StageDisplayState.NORMAL;PopUpManager.removePopUp(theCanvas);readdChildred();theCanvas = null;}/** *Use this method to addchildren to the full screen instance after you've called the <code>goFullScreen()</code> method * if you strech proportionally without anchoring the object will be moved to 0,0 in the canvas' coordinate space  * @param displayObject - display object to be added * @param centerHorizontally - whether to center horizontally in the canvas space * @param centerVertically - whether to center vertically in the canvas space * @param stretchProportional - whether to stretch proportionally to cover all of the space * @param anchorLeft - left anchor * @param anchorRight - right anchor * @param anchorTop - top anchor * @param anchorBottom - bottom anchor *  */public static function addChild(arr:Array, displayObject:UIComponent, centerHorizontally:Boolean = false, centerVertically:Boolean = false, stretchProportional:Boolean = false, anchorLeft:Number = -1, anchorRight:Number = -1, anchorTop:Number = -1, anchorBottom:Number = -1 ):void{if(!theCanvas)return;var infoObject:Object = new Object();infoObject['parent'] = displayObject.parent;infoObject['x'] = displayObject.x;infoObject['y'] = displayObject.y;infoObject['width'] = displayObject.width;infoObject['height'] = displayObject.height;infoObject['percentWidth'] = displayObject.percentWidthinfoObject['percentHeight'] = displayObject.percentHeight;//获取组件在原先的父级上的索引if(displayObject.parent){if (displayObject.parent is IVisualElementContainer){var ivec:IVisualElementContainer = IVisualElementContainer(displayObject.parent);infoObject['childIndex'] = ivec.getElementIndex(displayObject);ivec.removeElement(displayObject);}else{infoObject['childIndex'] = displayObject.parent.getChildIndex(displayObject);displayObject.parent.removeChild(displayObject);}}//自定义displayObjectArr = arr;if(null != arr){vdFitWindow(theCanvas.width, theCanvas.height, displayObjectArr.length*displayObjectArr.length);} else {}displayObjectMap[displayObject] = infoObject;var anchorObject:Object = new Object();anchorObject['stretchProportional'] = stretchProportional;anchorObject['anchorLeft'] = anchorLeft;anchorObject['anchorRight'] = anchorRight;anchorObject['anchorTop'] = anchorTop;anchorObject['anchorBottom'] = anchorBottom;anchorObject['centerVertically'] = centerVertically;anchorObject['centerHorizontally'] = centerHorizontally;anchorMap[displayObject] = anchorObject;theCanvas.addChild(displayObject);onResize();}/** *Remove a child explicitly from the full screen view * cleanup is done, and it is reparented  * @param displayObject - child to be removed *  */public static function removeChild(displayObject:UIComponent):void{var uic:UIComponent = displayObject as UIComponent;var infoObject:Object = displayObjectMap[uic];if(!infoObject)return;if(infoObject['parent']){// add back to original parentif (infoObject.parent is IVisualElementContainer)infoObject.parent.addElementAt(uic, infoObject['childIndex']);elseinfoObject.parent.addChildAt(uic, infoObject['childIndex']);if(isNaN(infoObject['percentWidth'])){uic.width = infoObject['width'];}else{uic.percentWidth = infoObject['percentWidth'];}if(isNaN(infoObject['percentHeight'])){uic.height = infoObject['height'];}else{uic.percentHeight = infoObject['percentHeight'];}uic.x = infoObject['x'];uic.y = infoObject['y'];delete displayObjectMap[uic];delete anchorMap[uic];}}/** *Readds all children to their correct containers * used when we're exiting full screen  *  */private static function readdChildred():void{for(var key:Object in displayObjectMap){if(key is UIComponent){removeChild(key as UIComponent);}}}/** *Called on resize to update the coordinates of anchored children throughout the canvas  *  */private static function updateAnchorStates():void{for(var key:Object in anchorMap){if(key is UIComponent){var uic:UIComponent = key as UIComponent;var anchorObject:Object = anchorMap[key];var stretchProportional:Boolean = anchorObject['stretchProportional'] as Boolean;var anchorLeft:Number = anchorObject['anchorLeft'] as Number;var anchorRight:Number = anchorObject['anchorRight'] as Number;var anchorTop:Number = anchorObject['anchorTop'] as Number;var anchorBottom:Number = anchorObject['anchorBottom'] as Number;var centerVertically:Boolean = anchorObject['centerVertically'] as Boolean;var centerHorizontally:Boolean = anchorObject['centerHorizontally'] as Boolean;if(stretchProportional){var w:Number = uic.width;var h:Number = uic.height;var sw:Number = FlexGlobals.topLevelApplication.screen.width;var sh:Number = FlexGlobals.topLevelApplication.screen.height;if(w > h){uic.width = sw;uic.validateNow();//高直接用屏幕的高度//uic.height *= (uic.width / w);uic.height = sh;uic.validateNow();}else{uic.height = sh;uic.validateNow();uic.width *= (uic.height / h);uic.validateNow();}}if(anchorLeft != -1){uic.x = anchorLeft;}if(anchorRight != -1){uic.x = FlexGlobals.topLevelApplication.screen.width - uic.width - anchorRight;}if(anchorTop != -1){uic.y = anchorTop;}if(anchorBottom != -1){uic.y = FlexGlobals.topLevelApplication.screen.height - uic.height - anchorBottom;}if(anchorLeft == -1 && anchorRight == -1 && stretchProportional)uic.x = 0;if(anchorTop == -1 && anchorBottom == -1 && stretchProportional)uic.y = 0;if(centerVertically)uic.y = FlexGlobals.topLevelApplication.screen.height / 2 - uic.height / 2;if(centerHorizontally)uic.x = FlexGlobals.topLevelApplication.screen.width / 2 - uic.width / 2;}}}/** *When the application is resized  * @param event *  */private static function onResize(event:ResizeEvent = null):void{if(!theCanvas)return;theCanvas.width = FlexGlobals.topLevelApplication.screen.width;theCanvas.height = FlexGlobals.topLevelApplication.screen.height;theCanvas.validateNow();updateAnchorStates();}/** *When full screen is exited with the escape key this will be triggered  * @param e *  */private static function onExitFullScreen(e:FullScreenEvent):void{if(e != null && !e.fullScreen)exitFullScreen();}/** * 自己定义的方法，全屏的时候计算容器内子控件的位置 *  */private static function vdFitWindow(width:int, height:int, block:int):void{var sumWidth:int = width;//容器宽度var sumHeight:int = height;//容器高度var cuttingLineWidht:int = 2;//分割线宽var blocks:int = block;//几屏 1，4，9，16，25，36var x:int = 2;//相对X轴的距离var y:int = 2;//相对Y轴的距离var sqrtBlocks:int = Math.sqrt(blocks); //取平方根var videoHeight:int = (sumHeight - (sqrtBlocks + 1) * 2) / sqrtBlocks;//视频的高度var videoWidth:int = (sumWidth - (sqrtBlocks + 1) * 2) / sqrtBlocks; //视频的宽度var remainX:int = (sumWidth - (sqrtBlocks + 1) * 2) % sqrtBlocks; //X轴剩余的像素var remainY:int = (sumHeight - (sqrtBlocks + 1) * 2) % sqrtBlocks;//Y轴剩余的像素var vh:int;var vw:int;var hk:int = 0;for(var i:int = 0; i < sqrtBlocks; i++){ //行var wk:int = 0;if(i >= (sqrtBlocks - remainY + 1)){hk++;}for(var j:int = 0; j < sqrtBlocks; j++){ //列if(remainX > 0 && j >= (sqrtBlocks - remainX)){vw = videoWidth + 1;} else {vw = videoWidth;}if(remainY > 0 && i >= (sqrtBlocks - remainY)){vh = videoHeight + 1;} else {vh = videoHeight}if(j >= (sqrtBlocks - remainX + 1)){wk++;}x = 2 + 2 * j + j * videoWidth + wk; //列相距X轴的距离公式y = 2 + 2 * i + i * videoHeight + hk; //行相距Y轴的距离公式var vd:SVideoDisplay = SVideoDisplay(displayObjectArr[i][j]);vd.x = x;vd.y = y;vd.height = vh;vd.width = vw;}}}}}

还有一个swc包，这个是别人实现的一个hashmap 

到这里来下载 http://download.csdn.net/detail/soanl/6877289