Advanced (but easy to use) 3D Flying Effect in AS3.0

Link to demo.

Link to FLA file.

This is a sweet way to simulate flying through a 3d stack of images.  You have to wait a few seconds for all 3 images to load. It uses very little processing power, and it’s fairly easy to understand. It uses this magic formula: scale = focalLength / (focalLength + z). My code here is very well commented, so I’ll let it do the talking. If you have any questions, just throw them in a comment.

Btw, the images are pulled from Flickr, from a very talented photographer.

Code:

//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.