Ok so at this point we need to load the images resize it and retrieve the bitmapdata from it and then provide this data to a new ImageContainer Object. first of all we load the image in the loader Object, the loader object is added to the fakeHolder instance, after the loading of an image is done we use a resize function to resize the image with no distortion of its ratio, depending on the stage size, after the resizing we retrieve our bitmap date from the fakeHolder which is not resized by the way the loader instance is the one that is resized so the data u retrieve is for the resized image (less bitmapdata).

Loading Code

//load the images via this function
  private function loadNextImage(){
   //Trivial Test to stop the loading
   if(imgPos==imgTotal){
    return;
   }
   //get the url
   var url:String=xmlList[imgPos].toString();
   //assign it to the urlRequest objecct
   urlRequest.url=url;
   //load it
   loader.load(urlRequest)
  }


the xmlList contain the list of our items each item have the url we retrieve it from it give it to the urlRequest and then loaded using the loader object.

OnImage Loaded Code

private function onImageLoaded(event:Event) {
   trace('onImageLoaded');   
   //fix the size of the loaded which is inside the fakeHolder
    fixSize(loader);
    //create a new bitmap data
    myBitmapData= new BitmapData(loader.width, loader.height);
    //draw it from the fakeHolder to retrieve the data of the resized image
    myBitmapData.draw(fakeHolder);
    //creata a new image container
    var imgContainer:ImageContainer=new ImageContainer();
    imgContainer.imageData=myBitmapData;
    //set its position
    imgContainer.x=stageW*(imgPos)+imgPos*stageW/2;
    
    //add it to the image holder
    imgHolder.addChild(imgContainer);
    //and to the reference array
    item_array.push(imgContainer);
    //update the image position
    imgPos++;
    //triger the onAllImagesLoaded event
    if(imgPos>=imgTotal){
     onAllImagesLoaded();
     return;
    }else{
     //or load the next image
     loadNextImage();
    }
}


as u can see the fixSize function is called before retrieving the bitmap data.

Resizing Function
private function fixSize(loader:Loader) {
   var sw:Number=1;
   var sh:Number=1;
   loader.scaleX=1;
   loader.scaleY=1;
   //depending on the stageW and stageH and without loosing the ratio
   //the loaded is resized
   if (loader.width>stageW) {
    sw=stageW/loader.width;
   }
   if (loader.height>stageH) {
    sh=stageH/loader.height;
   }
   var s:Number=Math.min(sw,sh);
   loader.width*=s;
   loader.height*=s;
  }

the first 2 vars are the ratios setted to 1, reinit the loader scale (because we use only one loader), compare the size of the loader with the stage size and the ratio is the minimum between them.

Now let's check the transitions function on the next page