It’s time for a new tutorial, appropriate for beginners, too. This tutorial ilustrates a couple of basic stuff, for example how to load and parse a xml file. The tutorial also explains how to create a 3D gallery in Flash CS4 without any external 3D library. You must remember that  3D in Flash CS4 is  inferior to 3D provided by engines like Papervision or Away3D (there is no Z axis sorting, therefore adding a movieclip to the stage at 100 on the Z axis and then another at 500 on the Z axis, the last added movieclip lays in front, even though it should lay in the back). For this tutorial you  need only Adobe Flash CS4.

To start things off, I have created a new flash document called photo.fla and saved it, a xml file called gall.xml and 7 pics 200×200. If you don’t have a desire for creating this files for yourself you may download the start files right here.

Let’s begin by creating the needed variables:

var arr:Array=new Array();//this holds out all xml data
var pics:Array=new Array();//this holds out all the images
var str:Number=-90;//this is for the maximum angle
var decr:Number=0;//this is the angle increment
var nr:Number=0;//this is the number of the picture
var uldr:URLLoader=new URLLoader();//the url loader variable to load the xml

Now let’s load the xml:


//add a new event listener for the loader
uldr.addEventListener(Event.COMPLETE,doArr);
//load our xml
uldr.load(new URLRequest("gall.xml"));

Now add the code for the Event.Complete function called doArr. This function parses the xml file.

//create the Event.COMPLETE function that parses the xml
function doArr(e:Event){
//create a new xml variable
var xml:XML=new XML(e.target.data);
//create a new xml list variable
var il:XMLList=xml.item;
//parse the xml
for(var i:uint=0;i<il.length();i++){
arr.push(il[i].linku);
}
//after the xml has been parsed, calculate the
//rotation distance between photos
decr=-Math.round((str/il.length()));
//call the function that creates the gallery
createGall();
}

Let’s construct the createGall function:


//create the function that loads our gallery images
function createGall(){
//parse the array that contains our images
for(var i:uint=0;i<arr.length;i++){
//create a new url loader
var ldr:Loader=new Loader();
//load the image locate at the i position in the array
ldr.load(new URLRequest(arr[i]));
//add a new event listener that ads the image to the stage
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE,doImg);
}
}

Write the function that adds the gallery to the Stage.

function doImg(e:Event){
//create a new movieclip to hold the image
var t:MovieClip=new MovieClip();
//create a new sprite in wich to draw a white rectangle
var spr:Sprite=new Sprite();
//we set the fill color to white
spr.graphics.beginFill(0xFFFFFF);
//we draw the rectangle at x:0,y:0, width:210,height:210
//that means +10 of the width and height of our image (200x200)
spr.graphics.drawRect(0,0,210,210);
//and drawing
spr.graphics.endFill();
//we position our sprite
spr.x=-spr.width/2;
spr.y=-spr.height+5;
//create a new bitmap that receives the loaded image
var bm:Bitmap=Bitmap(e.target.content);
//position the image
bm.x=-bm.width/2;
bm.y=-bm.height;
//smooth the image
bm.smoothing=true;
//add the sprite and image to our movieclip
t.addChild(spr);
t.addChild(bm);
//position the movieclip on the stage
t.x=300;
t.y=300;
//set the rotation in 3d space
t.rotationY=-40;
t.rotationX=str;
str+=decr;
//create a new rot property for the movieclip
//that holds the rotation on the X axis
t.rot=t.rotationX;
//the number of the picture
t.nr=nr;
nr++;
//push the picture in the pics array
pics.push(t);
//add the movieclip to the Stage
addChild(t);
//add a new event listener to the movieclip
//that animates our gallery when we click an image
t.addEventListener(MouseEvent.CLICK,entr);
}

Now let’s write the click function that animates the gallery:

function entr(e:MouseEvent){
//check to see if the clicked image is in front
if(e.currentTarget.nr==nr-1){
nr-=1;
//add a new event to the clicked image
e.currentTarget.addEventListener(Event.ENTER_FRAME,anim);
for(var i:uint=0;i<pics.length;i++){
//all the images in a lower postion than the clicked image
//are animated with another function
if(i<e.currentTarget.nr){
//create a temporary movieclip
var tmp:MovieClip=MovieClip(pics[i]);
//animate th movieclip
tmp.addEventListener(Event.ENTER_FRAME,anim2);
}
}
//remove the click event from the current clicked image
e.currentTarget.removeEventListener(MouseEvent.CLICK,entr);
}
}

Add the following code to create the first animation function:


function anim(e:Event){
if(e.currentTarget.rotationX<90){
//roatate the front image
e.currentTarget.rotationX+=(90-e.currentTarget.rotationX)/10;
//decrease the alpha of the image
e.currentTarget.alpha+=(0-e.currentTarget.alpha)/10;
}
}

Now the code that animates the rest of the images:

function anim2(e:Event){
//calculate the rotation at wich the picture
//will be set at the final of the animation
var nrx:Number=e.currentTarget.rot+decr;
//animate the rotation
e.currentTarget.rotationX+=Math.round((nrx-e.currentTarget.rotationX)/10);
//check to see the rotation value
if(e.currentTarget.rotationX>=nrx-4){
//remove this function
e.currentTarget.removeEventListener(Event.ENTER_FRAME,anim2);
//set the rot property
e.currentTarget.rot=nrx;
}
}

Let’s test our movie to see the final result:

You can get the final source files here , play with it and show me what you come up with.