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>