3 Replies Latest reply on Jul 25, 2007 7:06 PM by rotoole

    loading images / data in sequence - tilelist

    keithics Level 1
      Hello!

      Is there a way to load first the first image then the next one.. and so on.. in the tilelist?

      As far as i can see, the images are loaded altogether. (Images are from the XML)

      thanks in advance!
        • 1. loading images / data in sequence - tilelist
          TOdd_23523523 Level 1
          Ahhh,,,my friend, I've been battling this one for quite awhile. I'm interested in what you get for answers. Since Flex does many things asynchronously, what you're seeing -- I believe -- is all the image items being added to the TileList, and then each Image's loader asynchronously fetching the image bits.
          I'm been using AIR, to import a bunch of images from the file system, and have sortof tricked the code into behaving synchronously with events calling other events and then putting a timer pause at the end of the sequence that allows the image to finish loading. I add the image src/url to a bindable collection that is datamapped to the TileList. I only add the image to the bound collection, and then let the titleList update itself. With the timer pause of something like 200 miliseconds, the tilelist seems to load syncronously.
          I don't really have any clean code to demonstrate this right now, however.

          To summarize, try:
          Having your TileList bound to an ArrayCollection
          Create a method by hand that parses out your XML file, and one at a time, adds the image url to your bound ArrayCollection. Before processing the next image, add a timer event to pause the code for a bit to allow the image to load.

          If you're loading a bunch of images where you need to start scrolling up and down to see them, you're going to run into another nuance of the Image class. That when you scroll off the screeen, the image data unloads for images no longer visible. So that when you scroll back up, the image will have to relead...Google "Ely SuperImage" for a workaround image object that caches it's data to avoid this phenominon.
          Good Luck! I hope I didn't confuse you.

          Also, I'm curious if any other experts out there have a nicer solution for this. Personally, I was trying to create an application that loaded images in a way that was similar to Adobe Lightroom...but it's been quite a chore.
          • 2. Re: loading images / data in sequence - tilelist
            keithics Level 1
            thanks my friend!
            Basically this is my solution.. depending on your situation. it works in mine where the images are from the xml.

            if there's anyone who can improve this then i will be glad. I just a newbie in flex and im not a programmer.. i am basically a designer.lol. but i am enjoying it... quite fun but frustrating! I haven't check it properly coz it's 8am now.. got to get some rest.

            Hope this help!

            <?xml version="1.0"?>
            <!-- behaviors\EventEffects.mxml -->
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" >

            <mx:Script>
            <![CDATA[

            import mx.effects.*;
            import mx.events.EffectEvent;
            import mx.core.UIComponent;

            private function endSlowFadeEffectListener(eventObj:EffectEvent):void
            {
            // Access the effect object.
            var effectObj:Effect = Effect(eventObj.target);

            // Access the target component of the effect.
            var effectTarget:UIComponent =
            UIComponent(eventObj.effectInstance.target);

            myTA.text = myTA.text + getTimer() + effectTarget.id + '\n';
            myTA.text = myTA.text + " " + eventObj.type + '\n';
            }

            ]]>
            </mx:Script>

            <mx:Fade id="slowFade1"
            duration="2000"
            effectEnd="endSlowFadeEffectListener(event);"/>
            <mx:Fade id="slowFade2"
            duration="3000"
            effectEnd="endSlowFadeEffectListener(event);"/>
            <mx:Fade id="slowFade3"
            duration="4000"
            effectEnd="endSlowFadeEffectListener(event);"/>
            <mx:Fade id="slowFade4"
            duration="5000"
            effectEnd="endSlowFadeEffectListener(event);"/>

            <mx:Button id="myButton1" creationCompleteEffect="{slowFade1}"/>
            <mx:Button id="myButton2" creationCompleteEffect="{slowFade2}"/>
            <mx:Button id="myButton3" creationCompleteEffect="{slowFade3}"/>
            <mx:Button id="myButton4" creationCompleteEffect="{slowFade4}"/>

            <mx:TextArea id="myTA" height="200" width="100" />
            </mx:Application>

            • 3. loading images / data in sequence - tilelist
              rotoole
              if you use the Image class you can track the loading process. That and other classes dispatch an event for progress and complete.

              myImg:Image = new Image();
              myImg.loaderInfo.addEventListener(ProgressEvent.PROGRESS, progressor);
              myImg.loaderInfo.addEventListener(Event.COMPLETE, complete);

              from those events you can then call whatever function you want so you then

              public function progress(event:ProgressEvent){
              //show a loading % or a graphic or anything
              }

              public function complete(event:Event){
              myTileList.addChild(myImg);
              }