DOWNLOAD SOURCE FILE FOR THIS TUTORIAL

Posted by webzo

The images are loaded and are put on random positions.

When the user clicks on an image, the "camera" will travel thought the other images like they were stars in the space and the image clicked will enlarge in the middle of the screen.

First create a new MC to use as a frame for the pictures:

The rectangle inside the frame on my MC has the size "200x150", if your is different just remember the number because we are going to use it.
Allow this MC to be exported for actionscript and set the identifier to "frame".

Create an XML file like the one below and save it in the same folder of your flash files.

Code: Select all
<xml>
<images>
<image1 title = "1.jpg" />
<image2 title = "2.jpg" />
<image3 title = "3.jpg" />
<image4 title = "4.jpg" />
</images>
</xml>


Take some images and copy their paths to the attribute "title" of any node.

Now go to the main timeline and paste this code to load the XML:

Code: Select all
//Import libraries for the BitmapData and Matrix objects
import flash.display.BitmapData;
import flash.geom.Matrix

//Load XML file
var image_xml = new XML()
image_xml.ignoreWhite = true;
image_xml.load("images.xml")

//Array for the path of the images
var images_path = new Array();

//Variable to keep the number of pictures in the stage
var frames = 0

image_xml.onLoad = function()
{
//Loop the nodes
for(j = 0; j < image_xml.firstChild.firstChild.childNodes.length; j++)
{
//Get the path
_root.images_path[j] = image_xml.firstChild.firstChild.childNodes[j].attributes.title;

//Create a MC
_root.createEmptyMovieClip("frames" + j, _root.getNextHighestDepth());

//Load the image using the MovieClipLoader that we will Code below
_root.MCloader.loadClip(_root.images_path[j], _root["frames" + j]);
}
}


The code below will load each image and create a copy of each frame MC.

Code: Select all
//MovieClipLoader object to load our images
MCloader = new MovieClipLoader();

//New object to create an Event Handler
listener = new Object();

//Add the Event Handler bellow to the MovieClipLoader
MCloader.addListener(listener);

//Array to store every frame MC we create
var frames_array = new Array();

//This event is called when the image finished loading
listener.onLoadInit = function(target)
{
//Create a BitmapData object to save the loaded image.
var bmd:BitmapData = new BitmapData(200,150);

//Get the scale of the loaded image so that it
//will fit the size for our frame
var xscale = 200/target._width
var yscale = 150/target._height

//Create a Matrix object to modify the loaded image
var MT = new Matrix();

//Set the Matrix object to scale the image using
//the value we got above
MT.scale(xscale, yscale)

//Draw the "target" to the BitmapData using the
//Matrix to scale it.
bmd.draw(target, MT);

//For loop 3 times to make 3 copies of each image
for(i = 0; i < 3; i++)
{
//Attach the "frame" MC to the framesMC, which we
//will create, and use the variable "mc" to call it
mc = _root.framesMC.attachMovie("frame", "frame" + _root.frames, _root. framesMC.getNextHighestDepth());

//Create a new MC inside the frame to attach the image
mc.createEmptyMovieClip("pic", 10);

//Set the position of this MC
mc.pic._x = -100
mc.pic._y = -75

//Attach the BitmapData to it.
mc.pic.attachBitmap(bmd, 1);

//These are not the actual position of the MC. They are
//two variable inside the MC and will be explained later
mc.x = Math.random() * 2000 ? 1000
mc.y = Math.random() * 1600 ? 800

//Variable to tell us how far away this MC is
mc.z = _root.frames * 1000

//Set the event "onPress" to call the function
//"selectFrame" that we are going to create
mc.onPress = _root.selectFrame

//Create a function called "Move" inside every
//MC that will call another function, "moveFrames"
mc.Move = _root.moveFrames

//Set an element of the array to be a reference to this MC
_root.frames_array[_root.frames] = mc

//Increase the variable frames
_root.frames++
}

//Remove the "target" MC that loaded the image as we don't need it now
target.removeMovieClip();
}


Now we need to code the MCs, paste this code:

Code: Select all
//Create new MC, its where we create all other MCs
this.createEmptyMovieClip("framesMC", 1);

//Set the position to the middle of the
//stage so all frames come from that point
framesMC._x = Stage.width/2;
framesMC._y = Stage.height/2;

//current x, y and z position that we are looking at.
//This on these variables like the coordinates of
//a "camera" that is moving towards an MC
var curX = 0;
var curY = 0;
var curZ = 0;

//selected x, y and z position that we want to
//go to or where we are moving the "camera" to.
var selX = 0;
var selY = 0;
var selZ = 0;

//We coded the MC to call this function every time the
//user clicks on the MC
function selectFrame()
{
//set these variables to the variable
//inside the MC that called this function.
_root.selX = this.x
_root.selY = this.y
_root.selZ = this.z
}

framesMC.onEnterFrame = function()
{
//ease the variable of the current position towards
//the selected variables, that will brings us closer
//to the destination at each frame
_root.curX += (_root.selX - _root.curX)/5;
_root.curY += (_root.selY - _root.curY)/5;
_root.curZ += (_root.selZ - _root.curZ)/5;

//Loop through each element of the "frames_array"
for (k = 0; k < _root.frames_array.length; k++)
{
//Call the function "Move()" of every MC
_root.frames_array[k].Move();
}
}

//The function Move() of each MC call this other function
function moveFrames()
{
//Get the distance between the position of the MC
//and the position of where we are looking
var nX = this.x - _root.curX
var nY = this.y - _root.curY
var nZ = this.z - _root.curZ

//if the difference of the z coordinates is less than 0
//then the MC passed through us and we no longer see it
if (nZ < 0)
{
//Increase z by 10000, the MC will get a new position far away from us
this.z += 10000;

//Get random x and y values
this.x = Math.random() * 2000 - 1000;
this.y = Math.random() * 1600 - 800;

//Get new differences now that we have new values
nX = this.x - _root.curX
nY = this.y - _root.curY
nZ = this.z - _root.curZ
}

//Get a ration based on the z coordinate so every
//position, scale and alpha will be proportional
//with the distance of the MC from the user.
var ratio = 400/(400 + nZ);

//Get a alpha value proportional with the
//distance of the MC
this._alpha = ratio * 1000

//Set the position of the MC using the ratio and
//the distance of the "camera"
this._x = nX * ratio;
this._y = nY * ratio;

//Scale of the MC depending on its
//distance from the "camera"
this._xscale = this._yscale = 100 * ration;

//swap depths so that MCs with bigger nZ, far from
//the user, wont be seen above MCs that are closer
this.swapDepths(Math.round(-nZ));
}


That's all, run your code and enjoy the nice effect.

Code Explanation:

Code: Select all
import flash.display.BitmapData;
import flash.geom.Matrix;


Import the libraries for the BitmapData and Matrix objects, we will use them to save the loaded images and scale them to fit the frame.

Code: Select all
var image_xml = new XML();
image_xml.ignoreWhite = true;
image_xml.load("images.xml");


Load the XML file.

Code: Select all
var images_path = new Array();


This array will keep the paths to the images.

Code: Select all
var frames = 0;


We will use this variable to give unique names to the duplicated MCs.

Code: Select all
image_xml.onLoad = function()
{


When the XML load, run this code.

Code: Select all
for(j = 0; j < image_xml.firstChild.firstChild.childNodes.length; j++)
{


Loop this code by the number of node inside the XML.

Code: Select all
_root.images_path[j] = image_xml.firstChild.firstChild.childNodes[j].attributes.title;


Populate the images_path array with the content of the attribute title from the current node.

Code: Select all
_root.createEmptyMovieClip("frames" +j, _root.getNextHighestDepth());


Create an MC just to load the image, this MC will be deleted after loaded because it won't have any other use.

Code: Select all
_root.MCloader.loadClip(_root.images_path[j], _root["frames" + j]);
}
}


Call the function loadClip() of the MovieClipLoader object to load the image inside the MC we just created.
This function has these parameters:

Code: Select all
loadClip(path,target);


Now the code for the MCLoader:

Code: Select all
MCloader = new MovieClipLoader();


Create a new MovieClipLoader object.

Code: Select all
listener = new Object();


Create an object just to make the Event Handler we need.

Code: Select all
MCloader.addListener(listener);


Add the object "listener" to the MCloader as a listener so that any Event Handler created on this object will be used for the MCloader.
We will create an Event Handler to be called when the image, which we asked the MCloader to load, is done loading.

Code: Select all
var frames_array = new Array();


This array will be populated with all "frame" MCs we create so we only need to use an element inside this array to call an specific MC.

Code: Select all
listener.onLoadInit = function(target)
{


This event has only one parameter: target, that is the MC we used to load the image.

Code: Select all
var bmd:BitmapData = new BitmapData(200,150);


Create a new BitmapData with the size "200x150", if your frame MC has a different size you need to change these values.

Code: Select all
var xscale = 200/target._width;
var yscale = 150/target._height;


var yscale = 150/target._height;
The image we are loading is probably bigger than the size we want so we need to scale it, but we need to know the scale value.
We just divide the width and height we want by the width and height of the target (the image). The result will be used in the Matrix object so that 1 equals 100%, 0.5 equals 50%, etc.

Code: Select all
var MT = new Matrix();


The Matrix object is used to scale the image to the size we want.

Code: Select all
MT.scale(xscale, yscale);


Set the MT object to scale using the values we got above.

Code: Select all
bmd.draw(target, MT);


Now we call the function draw() of the BitmapData to draw the image to the bitmap in the size we want.
This function has these parameters:

Code: Select all
draw(object to draw, Matrix object);


The matrix parameter is optional, but we used it because we need to scale the image.

Code: Select all
for(i = 0; i < 3; i++)
{


Loop three times to make three copies of the same image.

Code: Select all
mc = _root.framesMC.attachMovie("frame", "frame" + _root.frames, _root. framesMC.getNextHighestDepth());


Here we attach the "frame" MC from the gallery to the "framesMC", the attachMovie returns the MC instance so we use the variable "mc" to call this instance.

Code: Select all
mc.createEmptyMovieClip("pic", 10);


Create a MC inside the MC we just created; here we will attach the image we loaded.

Code: Select all
mc.pic._x = -100;
mc.pic._y = -75;


Set the position of the image inside the "frame" MC; these values also depend on how you draw your MC.

Code: Select all
mc.pic.attachBitmap(bmd, 1);


Attach the bitmap with the image to the "pic" MC.

Code: Select all
mc.x = Math.random() * 2000 ? 1000;
mc.y = Math.random() * 1600 ? 800;


These are two variable are the position of the MC, but as we are dealing with 3D the actual position (_y and _x) will depend on the distance of the MC from the user and the coordinates will be calculated later.

Code: Select all
mc.z = _root.frames * 1000;


This is the variable that represents the distance between the MC and the user, the bigger this variable is farther the MC will be and vise-versa.

Code: Select all
mc.onPress = _root.selectFrame;


Set the onPress event from the MC to call the function "selectFrame", which we will create.

Code: Select all
mc.Move = _root.moveFrames;


Create a function called "Move" inside the MC and that function will be the same as the function "moveFrames" that we will code.

Code: Select all
_root.frames_array[_root.frames] = mc;


Populate the array with the MCs we create.

Code: Select all
_root.frames++
}


Increase this variable.

Code: Select all
target.removeMovieClip();
}


Remove the MC we used to load the image as it is useless now.

Now let's code the frames to move:

Code: Select all
this.createEmptyMovieClip("framesMC", 1);


Create a new MC; this MC is where we are going to create the others.

Code: Select all
framesMC._x = Stage.width/2;
framesMC._y = Stage.height/2;


Set the position to the middle of the stage so that the created MC will come from the middle.

Code: Select all
//current x, y and z position that we are looking at.
//This on this variable like the coordinates of
//a "camera" that is moving towards an MC
var curX = 0;
var curY = 0;
var curZ = 0;


These variables represent where we are looking at in the stage. You need to think like these are the coordinates of a camera that is showing us the pictures and we need to change these variables to move the camera.

Code: Select all
//selected x, y and z position that we want to
//go to. Or where we are moving the "camera" to.
var selX = 0;
var selY = 0;
var selZ = 0;


And these variables are where we want to go.

Code: Select all
function selectFrame()
{
_root.selX = this.x
_root.selY = this.y
_root.selZ = this.z
}


This code runs when a MC is clicked, we set these variables to the coordinates of the MC that was clicked.

Code: Select all
framesMC.onEnterFrame = function()
{
_root.curX += (_root.selX - _root.curX)/5;
_root.curY += (_root.selY - _root.curY)/5;
_root.curZ += (_root.selZ - _root.curZ)/5;


This is an easing calculation that is very useful in almost anything.

Code: Select all
variable to ease += (end variable ? current variable) / speed;


The bigger the speed is the slower the easing will be and vise-versa.
We use this easing to get closer to the selected picture in every frame.

Code: Select all
for (j = 0; j < _root.frames_array.length; j++)
{
_root.frames_array[j].Move();
}
}


Then we call the function Move() of every frame on the screen.

Code: Select all
function moveFrames()
{


This is the code that runs when we call the Move() function of the MCs so "this" refers to the MC.

Code: Select all
var nX = this.x - _root.curX;
var nY = this.y - _root.curY;
var nZ = this.z - _root.curZ;


Here we get the difference between this MC and the "camera", these variable are going to be used as the new positions.

Code: Select all
if (nZ < 0)
{


If the z coordinate is negative than the MC would be behind us and we wouldn't see it.
So we get new values for the MC and it will appear far away from us.

Code: Select all
this.z += 10000;
this.x = Math.random() * 2000 - 1000;
this.y = Math.random() * 1600 - 800;


These are new values for the coordinates.

Code: Select all
nX = this.x - _root.curX;
nY = this.y - _root.curY;
nZ = this.z - _root.curZ;
}


And calculate these again with the new values.

Code: Select all
var ratio = 400/(400 + nZ);


Here we calculate the ration depending on the distance of the MC so that the scale, position, and alpha are proportional with the distance.
For example: if nZ equals 0 the ratio would be 1, and as you can see 4 lines of code below the MC scale would be 100%.
400 is a number you need to get by testing, if you put a bigger number everything will look closer and a smaller number everything will look too far away. Find what is best for your needs, in my case 400 doesn't look too close or too far.

Code: Select all
this._alpha = ratio * 1000;


The alpha at the ratio of 1 is 1000, but translates to 100% as there isn't an alpha bigger than that. I used "1000" because even pictures that are pretty close would have low alpha.

Code: Select all
this._x = nX * ratio;
this._y = nY * ratio;


Get a position for the MC that is proportional with its distance.

Code: Select all
this._xscale = this._yscale = 100 * ratio;


Get the scale of the MC that is also proportional with the distance.

Code: Select all
this.swapDepths(Math.round(-nZ));
}


Swap depths to make MCs that are closer to stay above the one that are further.