Written by: Alfred Fayek (farafiro) farafiro@gmail.com
Difficulty Level: Intermediate
Requirements: Flash MX 2004
File(s) to download: photoAlbumv2.0.zip

Along with my previous tutorial about Photo Album, here we will discuss how to make another one more like the famous Natzke file named 'Source Files'.

And this is the file that we will do together:

Just some comments:

• The text field with the numbers and the border are just for the sake of the tutorial.
• I'm duplicating some pictures als for the same reason.
• I didn't use a preloader to load the images here for it's not the aim of this tutorial

ok, now let's start .......

What we want to do to make such a file?? I will have 3 main steps:

1. Make the 'Arrange in a circle shape' script.
2. The scaling, moving to the target postition, moving back to the initialization position and the moving above the other Movieclips.
3. Loading and unloading the images .

Make the 'Arrange in a circle shape' script:

To do so, we need to determine 3 values, ('posX'& 'posY') for the center of the circle and ('Z') for the circumference of it. So, start a new flash document, open the Action Panel and start adding this:

[as]var posX: Number = 200;
var posY: Number = 200;
var posZ: Number = 200;
var angle: Number = Math.PI/ 6;
[/as]

We have just one new line, the Math.PI , what it does?? Briefly and from the Flash help document: "A mathematical constant for the ratio of the circumference of a circle to its diameter, expressed as pi, with a value of 3.141592653589793."
To understand what is the use ofit in here, let's finish what we've started, close the Actions panel, pick up the 'Rectangle' tool and draw a small square like 18x18 px for ex., then convert it to a movieclip and give it an instance name in the properties panel (I chosed sq_mc).

Back to the Actions panel again, add this script right after the previos block:

[as]for (i=0; i<=12; i++) {
        var w: Number = angle*i;
        this .sq_mc. duplicatemovieclip ( "s" +i, i);
        this [ "s" +i]. _x = posX+posZ* Math.cos (w);
        this [ "s" +i]. _y = posY+posZ* Math.sin (w);
}
[/as]

Now, test the fla by pressing 'Ctrl+Enter' , wow, we have a 12 squares in a circle shape with a diameter of 200 and it's center is exactly at (x=200, y=200). Does these numbers looks familier to you, now you have got it but let me say out loud how this script works.

• I want to have a 12 squares in here, so why I've make the for loop in here, also note that this is related to the Math.PI, to have a full circle we should devide the Math.PI with the half of the number os squares we want. To have a semi-circle, devide it by the same number u want to have, and to have a half semi-circle just devide it by the double of it.
• The 'w' factor is to give each Square a seperate angle but within the circumference of the circle, and we get this by multiplying the 'angle' by the 'i'
• Lastly, we give each Square its X and Y position.

scaling, moving to the target postition,.....:

Let's move to our file, What we want to do when we click on the image:

• To move to a new position (target X and target Y), and if clicked again to get back to the original position.
• To scale to a new size (xScale and yScale), and if clicked again to get back to the original size.
• To become over all the other images (Depth), and if clicked again to get back to the original depth.

Okey,open a new flash document, make a new 72x72 square, fill it with any color you want and conver it to a movie clip with an instance name of 'holder'. Then convert it to a movie clip again but with an instance name of 'holder_mc'. Back to the main stage, chose the holder_mc and delete it, open the library and right click the holder_mc, chose linkage and just check the Export for Actionscript box, this will result that it will have a linkage name with the same name of its instance name.

Before we go to the Scripting thing, make sure that you have an external folder for the images, I gave it a name here of 'pix', and for now keep it in the same folder with your flash file. Now open the Action panel and start putting down what we've did in the previous example but with slightly change by replacing the attachmovieClip() with duplicatemovieclip(). Also I did the positioning within the same line:

[as]var posX: Number = 200;
var posY: Number = 200;
var posZ: Number = 200;
var angle: Number = Math.PI/ 12;
for (i=1; i<24; i++) {
        var theAngle: Number = i*angle;
        _level0. attachmovie ("holder_mc", "h" +i, i, { _x :posX+posZ* Math.cos (theAngle), _y :posY+posZ* Math.sin (theAngle)});
}
[/as]

Test the file, the same as previous 'till now, I will just add a text field in every movie for the learning purpose for getting a clear view for the tutorial, the final script will be like this for now:

[as]var posX: Number = 200;
var posY: Number = 200;
var posZ: Number = 200;
var angle: Number = Math.PI/ 12;
//~'~'~' The text format
var theFmt: TextFormat = new TextFormat() ;
theFmt. align = "center" ;
theFmt. size = 40;
theFmt. color = 0xFF0000;
//~'~'~'
for (i=1; i<24; i++) {
        var theAngle: Number = i*angle;
        _level0. attachmovie ("holder_mc", "h" +i, i, { _x :posX+posZ* Math.cos (theAngle), _y :posY+posZ* Math.sin (theAngle)});
        this [ "h" +i].holder. _alpha = false ;
        //~'~'~' The text thing
        this [ "h" +i]. createTextField ("t", 1000, 1, 1, 70, 70);
        this [ "h" +i].t. border = true;
        this [ "h" +i].t. text = i;
        this [ "h" +i].t. setTextFormat (theFmt);
}
[/as]

Test the fla, no big difference instead of there is a text field in each Movie clip with the number of it.

Now, for the moving, scaling and depth step, we want when the MC is pressed - as I mentioned before - it moves to a new position (x and y), scales to a new size (xScale and yScale) and its depth become the highest among the other movieclips and vise versa when it gets pressed again it gets reset to the original position, size and depth. So we will declare some variables to control these thigs, firts add this right after the last line in the previous block:

[as]/~'~'~' Declaring the variables that will controll the position, size and depth
//~'~'~' This variable is to tell the MC to enlarge or to shrink
this [ "h" +i].moveAndScale = false ;
//~'~'~' The positions variables
this [ "h" +i].x = this [ "h" +i]. _x ;
this [ "h" +i].y = this [ "h" +i]. _y ;
//~'~'~' The size variables
this [ "h" +i].xScale = this [ "h" +i]. _xscale ;
this [ "h" +i].yScale = this [ "h" +i]. _yscale ;
//~'~'~' The depth variable
this [ "h" +i].depth = this [ "h" +i]. getDepth ();
[/as]

And then we want it to start executing when clicked, so the rest of the script will be as:

[as]// Switching the value of the variable 'moveAndScale' to know whether the MC is enlarged or not
this [ "h" +i]. onPress = function () {
        if ( this .moveAndScale == true ) {
                this .moveAndScale = false ;
        } else {
                this .moveAndScale = true ;
        }
};
// Telling the MC the new values of the position, size and depth that
// will be executed and save them in local variables to each MC
// these values are to be executed if the MC is shrinked (the moveAndScale variable is true)
// And to load the picture into the holder
this [ "h" +i]. onRelease = function () {
        if ( this .moveAndScale == true ) {
                this .holder. _xscale /= 4;
                this .holder. _yscale /= 3;
                this . swapDepths (10000);
                this .tgtX = 100;
                this .tgtY = 50;
                this .tgtXScale = 320;
                this .tgtYScale = 240;
                this .holder. loadMovie ( "pix/carz/pic" +this.i+ ".jpg" );
        } else {
                // and if the MC is enlarged (the moveAndScale variable is false)
                // Telling the MC to reset to the old values of the position, size and depth
                // And to unload the picture into the holder
                this .holder. _xscale *= 4;
                this .holder. _yscale *= 3;
                this .swapDepths(this.depth);
                this .tgtX = this .x;
                this .tgtY = this .y;
                this .tgtXScale = this .xScale;
                this .tgtYScale = this .yScale;
                this .holder. unloadMovie ();
        }
};
[/as]

And finally putting all these new values within the onEnterFrame statment:

[as]this [ "h" +i]. onEnterFrame = function () {
        // First changing the positions
        this . _x += ( this .tgtX- this . _x )/5;
        this . _y += ( this .tgtY- this . _y )/5;
        if ( this . _x == this .tgtX) {
                //if the MC is in the right position
                // Start changing the size and changing the alpha of the holder mc to 100%
                this . _xscale += ( this .tgtXScale- this . _xscale )/5;
                this . _yscale += ( this .tgtYScale- this . _yscale )/5;
                this .holder. _alpha = 100;
        } else {
                this . _xscale += ( this .tgtXScale- this . _xscale )/3;
                this . _yscale += ( this .tgtYScale- this . _yscale )/3;
        }
};
[/as]

You can find the whole script in the attached fla.