Loading multiple images

[Flep]

Suppose we want to create an images gallery using Flash CS3 or CS4.

One of the first things you should consider is whether to load all the images right away or to load one at a time requested by the user.

If we want to load them all right away, here's a method to show a preloader that goes from zero to 100 and load all the images.

Of course, the images could be 10 as 200 and the following preloader would not wrong, it always shows the partial percentage value of loaded images.

To better understand the extreme comfort and utility of this script, better if we see it in place.

Example:

XML file:

<?xml version="1.0" encoding="UTF-8"?>
<images>
<img path="images/pic_1.jpg" />
<img path="images/pic_2.jpg" />
<img path="images/pic_3.jpg" />
<img path="images/pic_4.jpg" />
<img path="images/pic_5.jpg" />
<img path="images/pic_6.jpg" />
<img path="images/pic_7.jpg" />
<img path="images/pic_8.jpg" />
<img path="images/pic_9.jpg" />
<img path="images/pic_10.jpg" />
<img path="images/pic_11.jpg" />
<img path="images/pic_12.jpg" />
<img path="images/pic_13.jpg" />
<img path="images/pic_14.jpg" />
<img path="images/pic_15.jpg" />
<img path="images/pic_16.jpg" />
<img path="images/pic_17.jpg" />
<img path="images/pic_18.jpg" />
<img path="images/pic_19.jpg" />
<img path="images/pic_20.jpg" />
<img path="images/pic_21.jpg" />
<img path="images/pic_22.jpg" />
<img path="images/pic_23.jpg" />
<img path="images/pic_24.jpg" />
</images>

Actionscript 3.0:

/*

 *************************************      

 * @author Filippo Lughi - FlepStudio | Flash CS3 CS4 tutorials

 * version Actionscript 3.0                  

 *************************************

 */

package

{

    import flash.display.*;

    import flash.text.*;

    import flash.events.*;

    import flash.xml.*;

    import flash.net.*;

    import com.flepstudio.utils.*;

    

    public class Main extends MovieClip

    {

        private const XML_PATH:String="images.xml";

        

        private var xmlData:XMLDocument;

        

        private var images_array:Array=new Array();

        

        private var counter:int=0;

        private var ratio:Number;

        private var partial:Number=0;

        

        public function Main()

        {

            addEventListener(Event.ADDED_TO_STAGE,init);

        }

        

        private function init(evt:Event):void

        {

            removeEventListener(Event.ADDED_TO_STAGE,init);

            

            loadXML();

        }

        

        private function loadXML():void

        {

            var xmlLoader:XMLLoader=new XMLLoader();

            xmlLoader.addEventListener(CustomEvent.ONLOADED,on  XMLLoaded);

            xmlLoader.load(XML_PATH);

        }

        

        private function onXMLLoaded(evt:CustomEvent) 

        {

            evt.target.removeEventListener(Event.COMPLETE,onXM  LLoaded);

            xmlData=evt.data as XMLDocument;

            var node:XMLNode=xmlData.firstChild;

            

            var images:int=int(node.childNodes.length);

            for(var i:int=0;i < images;i++)

            {

                images_array.push(node.childNodes[i].attributes["path"]);

            }

            

            ratio=100/images_array.length;

            loadImage();

        }

        

        private function loadImage():void

        {

            var request:URLRequest=new URLRequest(images_array[counter]);

            var loader:Loader=new Loader();

            loader.contentLoaderInfo.addEventListener(Event.OP  EN,onLoadingOpen);

            loader.contentLoaderInfo.addEventListener(Progress  Event.PROGRESS,onLoadingProgress);

            loader.contentLoaderInfo.addEventListener(Event.CO  MPLETE,onLoadingComplete);

            loader.load(request);

        }

        

        private function onLoadingOpen(evt:Event):void

        {

            evt.target.removeEventListener(Event.OPEN,onLoadin  gOpen);

            area_txt.appendText("loading image "+(counter+1)+"\n");

        }

        

        private function onLoadingProgress(evt:ProgressEvent):void

        {

            var percentage:Number=(evt.bytesLoaded/evt.bytesTotal)*ratio;

            var total_percentage:Number=Math.floor(partial+percent  age);

            field_txt.text=total_percentage.toString()+" %";

        }

        

        private function onLoadingComplete(evt:Event):void

        {

            evt.target.removeEventListener(Event.COMPLETE,onLo  adingComplete);

            

            partial+=ratio;

            

            if(counter < images_array.length-1)

            {

                counter++;

                loadImage();

            }

            else

                area_txt.appendText("\n"+"done"+"\n"+"toal images loaded: "+images_array.length);

        }

    }

}

Source files: