Organising XML results as cells in container (AS3)

Question

Hi,

I'm having some problems figuring out how to organise data pulled off XML in cells within a container. I'm sure this should be a basic thing in AS3, but my head's fried.. can anyone help?

Basically an array if fed to callThumbs() which iterates through it and compares the entries with preloaded XML _my_images. If match is found, it's sent to processXML which loads all relevant info and loads a .jpg thumbnail. All this is then fed to createCell which creates a specific cell with position values depending on x_counter and y_counter values (4 cells in a row) and adds the cell into a container _container_mc.

The Problem: This all works fine and looks fine, the problem is that the cells within the container do not display in descending order. They are in random order, probably because some of the .jpg's takes longer to load etc. How do I easily organise the cells within the container in descending order by the XML .id value? Or how do I tell Flash to wait till the thumbnail and data is loaded and the cell created and added?

Thanks guys, would really appreciate all the help!

PJ

//Flash (AS3)       

       function callThumbs(_my_results:Array):void {   // selector = 1 for specific items, 2 for search items

            var _thumb_url:XML;

            for (var r:Number=0; r < _my_results.length; r++) { // iterate through results vector, compare with _my_images XML .id

                for (var i:Number=0; i < _my_images.length(); i++) {

                    if (_my_images[i][email protected]() == _my_results[r]) {

                        _thumb_url=_my_images[i];

                        processXML(_thumb_url, i);

                    }

                }
            }

        } // End callThumbs


        function processXML(imageXML:XML, num:Number) { // Processes XML data and loads .jpg thumbnail

            var _thumb_loader=new Loader();

            _thumb_loader.load(new URLRequest("thumbs/thumb_sm/" + imageXML.@id + "_st.jpg"));
            _thumb_loader.contentLoaderInfo.addEventListener(Event.COMPLETE,thumbLoaded);
            _thumb_loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, urlNotFound);

            var id:XMLList = new XMLList;
            id = imageXML.@id;
            var description:XMLList = new XMLList;
            description = imageXML.@description;

            function urlNotFound(event:IOErrorEvent):void {
                trace("The image URL '" + String(imageXML.@id) + "' was not found.");
            }

            function thumbLoaded(e:Event):void {
                    var imageLoader:Loader = Loader(e.target.loader);
                    var bm:Bitmap = Bitmap(imageLoader.content);

                    createCell(bm, id, description, num);
                    adjustFooterBar(); // Adjust bottom footer
            }


        } // End processXML



        private function createCell(_image:Bitmap, _id, _description:String, _position):void { // Creates a cell with data, add to container

            var _cell_mc = new CellTitle();         

            _cell_mc.initCell(_image, _id, _description, _position, x_counter, y_counter);

            if (x_counter+1 < 4) {
                x_counter++;
            } else {
                x_counter = 0;
                y_counter++;
            }

            _container_mc.addChild(_cell_mc); // movieclip container

        } // End createCell

Answer 1

In order to tell flash to wait for each thumbnail, you will have to wait for each one to load before loading the next. You should be able to easily modify your code to handle this. The code below may need some changes, I am more just trying to illustrate my point.

(AS3)
   // create these outside of the functions so they can be updated/used by both
   var i:Number = 0;
   var totalResults:Number = _my_results.length;

   // start loading the first thumbnail
   callThumbs(0);

   function callThumbs(resIndex:Number):void { 

        var _thumb_url:XML;
        var result = _my_results[resIndex];

        for (var n:Number = 0; n < _my_images.length(); i++) {

            if (_my_images[n][email protected]() == result) {

                _thumb_url = _my_images[n];

                processXML(_thumb_url, n);

                /**
                 * break here because we don't want to do another iteration
                 * the complete handler for the thumbnail loader will determine if this function
                 * is to be called again.
                 */
                break;
            }

        }

    } // End callThumbs


    function processXML(imageXML:XML, num:Number) {

        var _thumb_loader = new Loader();

        _thumb_loader.load(new URLRequest("thumbs/thumb_sm/" + imageXML.@id + "_st.jpg"));
        _thumb_loader.contentLoaderInfo.addEventListener(Event.COMPLETE,thumbLoaded);
        _thumb_loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, urlNotFound);

        var id:XMLList = new XMLList;
        id = imageXML.@id;
        var description:XMLList = new XMLList;
        description = imageXML.@description;

        function urlNotFound(event:IOErrorEvent):void {
            trace("The image URL '" + String(imageXML.@id) + "' was not found.");
        }

        function thumbLoaded(e:Event):void {
                var imageLoader:Loader = Loader(e.target.loader);
                var bm:Bitmap = Bitmap(imageLoader.content);

                createCell(bm, id, description, num);
                adjustFooterBar(); // Adjust bottom footer

            // determine if there is another thumbnail to be loaded
            if (i < totalResults) {
                i++;
                callThumbs(i);
            }

        }


    } // End processXML



    private function createCell(_image:Bitmap, _id, _description:String, _position):void { // Creates a cell with data, add to container

        var _cell_mc = new CellTitle();         

        _cell_mc.initCell(_image, _id, _description, _position, x_counter, y_counter);

        if (x_counter+1 < 4) {
            x_counter++;
        } else {
            x_counter = 0;
            y_counter++;
        }

        _container_mc.addChild(_cell_mc); // movieclip container

    } // End createCell

Also, just out of curiosity, is this being done on the timeline?