Flash Tutorials

//Declaring the URL, the Loader, and the XML variables
var xmlURL:URLRequest = new URLRequest("images.xml");
var xmlLoader:URLLoader = new URLLoader();
var xml:XML;

//Declares the image array
var imageArray:Array = new Array();

//Declares the variables needed for the 3D effect
//Try playing around with the value of these variables to make it look different
var focalLength:int = 50;
var distance:int = 0;
var distanceBetweenImages:int = 100;

//Telling the loader to load the URL
xmlLoader.load(xmlURL);

//Enter Frame event listener
addEventListener(Event.ENTER_FRAME, onEnterFrame);

//Detects when the loader has finished loading the data
xmlLoader.addEventListener(Event.COMPLETE, parseXML);

//converts the loaded data into XML
function parseXML(e:Event):void
{
   xml = new XML(e.target.data);
   displayImages();
}

function displayImages():void
{
   for (var k in xml.image)
   {
       //declares the movieclip that the image will be in
       var imageMC:MovieClip = new MovieClip();

       //gets the URL for the image
       var imageURL:URLRequest = new URLRequest(xml.image[k]);

       //declares the loader and loads the image
       var imageLoader:Loader = new Loader();
       imageLoader.load(imageURL);

       //adds the image to the movieclip
       imageMC.addChild(imageLoader);

       //adds the image movieclip to the stage, and puts the image at the bottom of the image stack,
       //but above the background rectangle with the gradient, you will have to change this number
       //based on what you want to have behind your stack of images
       addChildAt(imageMC, 1);

       //puts the image movieclip at a position
       imageMC.x = 18;
       imageMC.y = 20;

       //adds the image movieclip to the array of images
       imageArray.push(imageMC);
   }
}

function onEnterFrame(e:Event):void
{
   //creates the distance from the screen to the first image in the stack of images
   //you can make this react to a scroll bar, or a slider, or anything you want
   //making it react to the mouse is just for this tutorials demonstrational purposes
   distance = (stage.stageWidth - stage.mouseX) - 200;

   //loops through the image array
   for (var k in imageArray)
   {
       //puts the spacing between the images
       var z:int = distanceBetweenImages * k;

       //figures out the scale
       var scale:Number = focalLength / (focalLength + (z + distance));

       //puts limits on the scale, based on how the scale is computed
       //it is possible for it to be negative, we don't want that
       //makes the image invisible after it gets realls close
       if (scale > 1.2)
       {
           imageArray[k].visible = false;

       } else if (scale < 0)
       {
           scale = 0;
       } else
       {
           imageArray[k].visible = true;
       }

       //applies the scale to the image
       imageArray[k].scaleX = scale;
       imageArray[k].scaleY = scale;

       //makes the image alpha the same as the scale, to add to the effect
       imageArray[k].alpha = scale;

       //places the image at the center of the screen
       imageArray[k].x = (stage.stageWidth / 2) - (imageArray[k].width / 2);
       imageArray[k].y = (stage.stageHeight / 2) - (imageArray[k].height / 2);
   }
}

It’s pulling the URLs for the images from a very simple XML file.

Link to demo.