AS3 & MVC : importing multiple images in an array

Question

I'm making a card game using MVC. I know in my case using MVC is overkill, I'm using it because I need to learn it.

Here is my problem : In my Model, I'm importing multiple images which I stock in an array (my deck of cards). Then I need to access this array in my view in order to addChild each image.

Model :

package com {

    import flash.events.*;
    import flash.display.*;
    import flash.net.*;

    public class Model extends EventDispatcher {

        var imgcontainer:Loader = new Loader();
        var i:int=0;
        var _setCartes:Array;

        public function Model(target:Stage){
            _setCartes = new Array();
            ImportImg();
        }

        public function ImportImg():void{

            while (i<13){

                imgcontainer.load(new URLRequest("img/"+i+".png"));
                _setCartes.push(imgcontainer);
                i+=1;
                trace(_setCartes);
            }

        }


        public function get setcartes():Array {

            return _setCartes;

        }

    }
}

In my View, I have this method :

    private function doChange(ev:Event):void {
        removeChild(_btncontainer);
        _setCartes = _model.setcartes;
        addChild(_setCartes[5]);
        _setCartes[5].x=100;
        addChild(_setCartes[3]);
        _setCartes[3].x=300;


    }

Two things go wrong:

• First, every element of my array shows the same image. If I addChild _setCartes[5] or _setCartes[3] or _setCartes[0] or whatever, it will always show the same card as if it stocked 13 x the same image in my array.

• Second, I can't addChild both _setCartes[5] and _setCartes[3], only the second one will show. I tried to stock each element of my array in different Sprites, and addChild each Sprite, but it didn't show anything. When I traced the Sprite, it said "Object Sprite" (when I trace the array it shows 13 "Object Loader"), but nothing appears on the stage.

I don't understand what I'm doing wrong.

Thank you in advance for your help, Jussy.

Answer 1

Your problem lies with the understanding of the loader class. Firstly, you need a different loader for every image, using one loader will ultimately result in the loader's content being the last image loaded. Secondly, you are trying to add the same loader to it's container twice, so it looks like it only added one loader, but the truth is, it added the same loader twice! Help: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/Loader.html

Bottom line is, use separate loaders for separate images. Hope it helps, Marton

this is how i would do it:

public class Model extends EventDispatcher {

    var _setCartes:Array;

    public function Model(target:Stage){
        _setCartes = new Array();
        ImportImg();
    }

    public function ImportImg():void{

        for (var i:int = 0; i < 13; i++)
        {
            var imgcontainer:Loader = new Loader(); //create a new loader for every iteration
            imgcontainer.load(new URLRequest("img/" + i + ".png"));
            _setCartes.push(imgcontainer);
            trace(_setCartes);
        }

    }

    public function get setcartes():Array {

        return _setCartes;

    }

}

Keep in mind that the loaders will need time to load their images, the png-s will not be available right away. To avoid this, use this for every loader to check if they are finished.

myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, myCompleteHandler);

One thing i use is keeping track of the number of images needed to be loaded, subtract one for each finished loader, and declare loading finished when this number reaches zero.