手把手系列打造基于FMS2的视频聊天室(二).docVIP

第一讲：页面编写 编写应用性软件，页面的布局、相关组件的摆放等因素相当重要，它将直接影响到用户的使用体验，然而，对于程序员来说，页面的编写也是一项极其繁杂的工作。基于这个原因，一些可以快速构建页面的编程语言和工具也应用而生。例如：SpringRichClient（一种可以快速构建Swing程序的工具）、各种IDE的页面部件拖拽功能等。 Adobe出品的MXML语言也是这样一种工具：它可以帮助程序员快速的构建页面，而使用起来就和HTML一样简单。 在编写前，大家可以参考Flex SDK自带的Component Exlorer，那里面对所有的页面部件都进行了详细的讲解并提供了相当优秀的示例 本软件的页面主要应用了几个常用的元素：HBOX、VBOX、Panel、List、Button 下面是整体页面代码： ?xml version=1.0 encoding=utf-8? mx:Application xmlns:mx=/2006/mxml layout=absolute fontSize=12 width=80% height=50% horizontalAlign=center verticalAlign=middle creationComplete=init() mx:Script ![CDATA[ //这里盛放代码，后面讲解的所有代码都将放到此位置 ]] /mx:Script mx:HBox width=100% height=100% mx:Panel height=100% width=10% title=在线用户列表 mx:VBox width=100% height=100% mx:List id=users width=100% height=90% cachePolicy=off /mx:List mx:Button label=和选中人聊天 id=chat click=chatWith()/ /mx:VBox /mx:Panel mx:HBox width=90% height=100% mx:Panel title=对方视频 width=50% height=100% horizontalAlign=center backgroundColor=cyan mx:VideoDisplay width=80% height=100% id=remoteVideo maintainAspectRatio=false/ /mx:Panel mx:Panel title=本地视频 width=50% height=100% horizontalAlign=center backgroundColor=cyan mx:VideoDisplay width=80% height=100% id=localVideo maintainAspectRatio=false/ /mx:Panel /mx:HBox /mx:HBox /mx:Application 各位可以先不用管那些事件方法，例如：chatWith()、init()等。 本页面编写要素： 利用HBOX、VBOX作为整体框架 Panel作为部件容器 相对百分比控制部件尺寸 下一讲：连接FMS服务器成功后实现本地视频的播放 第二讲：连接FMS服务器成功后实现本地视频的播放 利用ActionScript 3和VideoDisplay元素可以很容易的实现本地视频的播放；至于和FMS的连接，AS3里也有相关的API供使用。 以本软件为例：连接FMS服务器的代码放到了init()方法，即：页面初始化完成后将触发FMS的连接动作 首先定义程序变量： //与FMS之间通讯的桥梁对象(后面会详细讲解此对象的用处) private var fmsObj:Object = new Object(); //与FMS相连的connection对象 private var fmsConn:NetConnection = new NetConnection(); //播放到FMS的视频流（此stream负责采集本地视频并传送到FMS服务器） private var fmsStream:NetStream = null; //FMS连接串(例如rtmp:///videochat) private var fmsUrl:String = null; //连接的用户名(在线用户名) private var userName:String = null; //用户在线数据 private static var userData:ArrayCollection = new ArrayCollect