flex 实现图片播放 方案一 图片全部预加载放内存
这种方案，对于web的应用有局限性，在图片量比较多，比较大的时候，就会爆浏览器异常。一般建议轻量级的采用这种方案。
<?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" creationComplete="application1_creationCompleteHandler(event)" minWidth="955" minHeight="600"> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; s|VScrollBar { skinClass: ClassReference("com.tianyu.skins.VScrollBarSkin"); } s|HScrollBar { skinClass: ClassReference("com.tianyu.skins.HScrollBarSkin"); } mx|ScrollBar { downArrowUpSkin: ClassReference("com.tianyu.skins.MXScrollBarDownButtonSkin"); downArrowOverSkin: ClassReference("com.tianyu.skins.MXScrollBarDownButtonSkin"); downArrowDownSkin: ClassReference("com.tianyu.skins.MXScrollBarDownButtonSkin"); upArrowUpSkin: ClassReference("com.tianyu.skins.MXScrollBarUpButtonSkin"); upArrowOverSkin: ClassReference("com.tianyu.skins.MXScrollBarUpButtonSkin"); upArrowDownSkin: ClassReference("com.tianyu.skins.MXScrollBarUpButtonSkin"); thumbDownSkin: ClassReference("com.tianyu.skins.MXVScrollBarThumbSkin"); thumbUpSkin: ClassReference("com.tianyu.skins.MXVScrollBarThumbSkin"); thumbOverSkin: ClassReference("com.tianyu.skins.MXVScrollBarThumbSkin"); trackSkin: ClassReference("com.tianyu.skins.MXVScrollBarTrackSkin"); } </fx:Style> <fx:Script> <![CDATA[ import flash.display.Bitmap; import mx.collections.ArrayCollection; import mx.controls.Alert; import mx.events.CalendarLayoutChangeEvent; import mx.events.FlexEvent; import mx.formatters.DateFormatter; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import mx.rpc.http.HTTPService; [Embed(source="images/title.png")] [Bindable] private var mainBg:Class; private var bitmapDataArr:ArrayCollection=new ArrayCollection(); [Bindable] private var nameArr:ArrayCollection=new ArrayCollection(); private var df:DateFormatter; protected function application1_creationCompleteHandler(event:FlexEvent):void { //加载config.xml配置文件 var configService:mx.rpc.http.HTTPService = new HTTPService(); configService.url = "config.xml"; configService.resultFormat = HTTPService.RESULT_FORMAT_TEXT; configService.addEventListener(ResultEvent.RESULT, configService_resultHandler); configService.addEventListener(FaultEvent.FAULT, configService_faultHandler); configService.send(); df=new DateFormatter(); df.formatString="YYYY-MM-DD"; } public var config:XML; private function configService_resultHandler(event:ResultEvent):void { config=new XML(event.result); remo.endpoint=config.remoteUrl.toString(); remoI.endpoint=config.remoteUrl.toString(); var d:int=Number(config.delay.toString()); bfjg.text=config.delay.toString(); playTimer=new Timer(d); playTimer.addEventListener(TimerEvent.TIMER, function(evt:TimerEvent):void { if (playerxh < (nameArr.length-1)) { playerxh++; if(playerxh<bitmapDataArr.length) { show.source=new Bitmap(bitmapDataArr[playerxh]); myList.selectedIndex=playerxh; myList.scrollToIndex(playerxh); } } else { playerxh=0; show.source=new Bitmap(bitmapDataArr[0]); myList.selectedIndex=playerxh; myList.scrollToIndex(playerxh); playTimer.stop(); play.toolTip="播放" play.source="images/play.png"; } }); remo.getListCloundTimes("",""); remo.showBusyCursor = true; } private function configService_faultHandler(event:FaultEvent):void { Alert.show("加载config配置文件异常,请联系管理员"); } //上一张 private var playerxh:int=0; private function pref():void { if(playerxh>0) { playerxh--; show.source=new Bitmap(bitmapDataArr[playerxh]); myList.selectedIndex=playerxh; myList.scrollToIndex(playerxh); } } //下一张 private function nextf():void { if(playerxh<(nameArr.length-1)) { playerxh++; if(playerxh<bitmapDataArr.length) { show.source=new Bitmap(bitmapDataArr[playerxh]); myList.selectedIndex=playerxh; myList.scrollToIndex(playerxh); } } } //播放 public var playTimer:Timer; private function playf():void { if(play.toolTip=="播放") { play.toolTip="暂停" play.source="images/pause.png"; var n:int=Number(bfjg.text); if(n!=playTimer.delay) { playTimer.delay=n; } playTimer.start(); } else if(play.toolTip=="暂停") { play.toolTip="播放" play.source="images/play.png"; playTimer.stop(); } } private function selectedT():void { playerxh=myList.selectedIndex; if(playerxh<bitmapDataArr.length) { show.source=new Bitmap(bitmapDataArr[playerxh]); myList.scrollToIndex(playerxh); } } private function onResult(evt:ResultEvent):void { var arr:ArrayCollection=evt.result as ArrayCollection; var dateFormatter:DateFormatter = new DateFormatter(); dateFormatter.formatString = "YYYY年MM月DD日 JJ时NN分"; nameArr.removeAll(); for each(var names:String in arr) { var n:String=names.split('.')[0]; if(n.length==12) { var y:String=n.substr(0,4); var m:String=n.substr(4,2); var d:String=n.substr(6,2); var j:String=n.substr(8,2); var nn:String=n.substr(10,2); var td:String=y+"-"+m+"-"+d+" "+j+":"+nn+":00"; var dd:Date=DateFormatter.parseDateString(td) var s:String=dateFormatter.format(dd); nameArr.addItem({label:s,name:names}); } } if(qssj.text=="") { var text2:String=nameArr[nameArr.length-1].label.toString().split("日")[0]; text2=text2.replace("年","-"); text2=text2.replace("月","-"); jssj.text=text2; last2=text2; var d2:Date=DateFormatter.parseDateString(text2); var n1:Number=d2.time-1000*60*60*24*3; qssj.text=df.format(new Date(n1)); last1=qssj.text; } if(nameArr.length>0) { myList.selectedIndex=0; playerxh=0; loadedXH=0; bitmapDataArr.removeAll(); loadImage(nameArr[loadedXH].name); } else { bitmapDataArr.removeAll(); show.source=null; playerxh=0; loadedXH=0; } } private var loadedXH:int=0; private function loadImage(name:String):void { remoI.getYTIMage(name); } private function onResultI(evt:ResultEvent):void { var bytes:ByteArray=evt.result as ByteArray; imgLoad(bytes); } private function imgLoad(bytes:ByteArray):void { var loader:Loader = new Loader(); loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded); loader.loadBytes(bytes); } private var first:Boolean=false; private function imgLoaded(e:Event):void { var _bitmapData:BitmapData = new BitmapData(680,432,true,0x00000000); _bitmapData.draw(e.target.content); if(loadedXH==0) { show.source=new Bitmap(_bitmapData); } bitmapDataArr.addItem(_bitmapData); loadedXH++; if(loadedXH<nameArr.length) { loadImage(nameArr[loadedXH].name); } if(first==false&&loadedXH==20) { first=true; playf() } } private function faults(evt:FaultEvent):void { Alert.show("后台数据异常，请联系管理员！"); } private var last1:String; private var last2:String; import mx.controls.DateField; private function dateChange1():void { if(last1!=qssj.text) { play.toolTip="播放" play.source="images/play.png"; playTimer.stop(); var s1:String=qssj.text; var t1:Date=DateField.stringToDate(s1,"YYYY-MM-DD"); jssj.text=df.format(new Date(t1.time+1000*60*60*24*2)); last1=qssj.text; last2=jssj.text; var p1:String=s1.split("-").join("")+"0000"; var p2:String=jssj.text.split("-").join("")+"2359"; remo.getListCloundTimes(p1,p2); remo.showBusyCursor = true; } } private function dateChange2():void { if(last2!=jssj.text) { play.toolTip="播放" play.source="images/play.png"; playTimer.stop(); var s2:String=jssj.text; var t2:Date=DateField.stringToDate(s2,"YYYY-MM-DD"); qssj.text=df.format(new Date(t2.time-1000*60*60*24*2)); last1=qssj.text; last2=jssj.text; var p1:String=qssj.text.split("-").join("")+"0000"; var p2:String=s2.split("-").join("")+"2359"; remo.getListCloundTimes(p1,p2); remo.showBusyCursor = true; } } ]]> </fx:Script> <fx:Declarations> <!--remo.getListCloundTimes(p1,p2)：获取时间列表，remoI.getYTIMage(name)：获取图片二进制流--> <s:RemoteObject id="remo" destination="zfjcRODestination" result="onResult(event)" fault="faults(event)"/> <s:RemoteObject id="remoI" destination="zfjcRODestination" result="onResultI(event)" fault="faults(event)"/> </fx:Declarations> <s:BorderContainer borderWeight="2" borderColor="#2187D2"> <s:HGroup gap="0"> <s:BorderContainer borderWeight="1" borderColor="#2187D2"> <s:VGroup gap="0"> <mx:Image id="show"/> <s:Group height="38" width="680"> <s:Image source="images/banner.png"/> <s:Image source="images/Pre.png" id="pre" click="pref()" toolTip="上一张" horizontalCenter="-45" verticalCenter="0" useHandCursor="true" buttonMode="true"/> <s:Image source="images/play.png" id="play" click="playf()" toolTip="播放" horizontalCenter="0" verticalCenter="0" useHandCursor="true" buttonMode="true"/> <s:Image source="images/Next.png" id="next" click="nextf()" toolTip="上一张" horizontalCenter="45" verticalCenter="0" useHandCursor="true" buttonMode="true"/> </s:Group> </s:VGroup> </s:BorderContainer> <s:VGroup width="180" gap="0"> <s:Group top="0" left="0" height="33" width="180" right="0"> <s:Rect left="0" right="0" bottom="0" width="100%" height="100%"> <s:fill> <s:BitmapFill fillMode="repeat" source="{mainBg}"/> </s:fill> </s:Rect> <s:Label left="50" top="10" text="卫星云图" color="#2187D2" fontSize="16" fontWeight="bold" fontFamily="微软雅黑"/> </s:Group> <s:HGroup height="30" verticalAlign="middle" paddingLeft="6"> <s:Label text="起始时间:" fontSize="14" fontFamily="微软雅黑" color="#2187D2"/> <mx:DateField width="100" id="qssj" yearNavigationEnabled="true" change="dateChange1()" minYear="2000" maxYear="2030" dayNames="['日','一','二','三','四','五','六']" monthNames="['1','2','3','4','5','6','7','8','9','10','11','12']" formatString="YYYY-MM-DD" /> </s:HGroup> <s:HGroup height="30" verticalAlign="middle" paddingLeft="6"> <s:Label text="结束时间:" fontSize="14" fontFamily="微软雅黑" color="#2187D2"/> <mx:DateField width="100" id="jssj" yearNavigationEnabled="true" change="dateChange2()" minYear="2000" maxYear="2030" dayNames="['日','一','二','三','四','五','六']" monthNames="['1','2','3','4','5','6','7','8','9','10','11','12']" formatString="YYYY-MM-DD" /> </s:HGroup> <s:HGroup height="30" verticalAlign="middle" paddingLeft="6" gap="3"> <s:Label text="播放间隔:" fontSize="14" fontFamily="微软雅黑" color="#2187D2"/> <s:TextInput id="bfjg" text="300" width="70"/> <s:Label text="毫秒" fontSize="14" fontFamily="微软雅黑" color="#2187D2"/> </s:HGroup> <mx:List id="myList" height="349" width="180" labelField="label" dataProvider="{nameArr}" change="selectedT()"> </mx:List> </s:VGroup> </s:HGroup> </s:BorderContainer> </s:Application>
