And yet another Photo Album idea that was given so long ago by Yugop,if I do remember right, I will go through this quickly as most of the steps of doing this was discussed in the other two tutorials for the same subject. Here is the file that we'll do together:

Let's move. But before we start just notice that all the dimentions used here for the images, stage,... are relative to each other, so if you are going to use a different size for the images you will need tomodify them.

• Open a new flash document 300x250, make 3 layers and name them (frame, Movieclips and Script).
• Import 9 images, convert all of them to a Movieclip and make sure that its top/left is @ the 0,0 of theMC, and resize all of them to 54x54
• Arange them on the stage as 3x3, rows x columns in the MovieClips layer and give them an instance names in an order like pic1, pic2,.... pic9, then lock the layer
• In the Frame layer, make a frame arount the images (you can dropt this)

Let's think for a while of the main steps of our work, when we roll over the image we want:

• Its alpha becomes 100%
• It enlarges to four times its size while the other images shrink with the same percent

And when rolling out, its alpha becomes 50 %, and you maight want to reset its size which I will leave it to you.

Now, Open the Action panel, lets start with making the alpha of each to 50%

[as]//Declaring tow variables, one to hold the total number of images
// and the other that will controll which image will be selected
var totalPix:Number = 9;
var select = "";
//reducing the alpha of each image to 50
for (i=0; i<=totalPix; i++) {
        this["pic"+i]._alpha = 50;
        //Also reducing the alpha of each image to 50 when rolling out of it
        this["pic"+i].onRollOut = function() {
                this._alpha = 50;
        };
}
[/as]

Then we will create a function to control the size of each image

[as]function moveAndScale(instanceName, targetWidth, targetHeight, targetX, targetY, factor) {
        instanceName._x += (targetX-instanceName._x)/factor;
        instanceName._y += (targetY-instanceName._y)/factor;
        instanceName._width += (targetWidth-instanceName._width)/factor;
        instanceName._height += (targetHeight-instanceName._height)/factor;
}
[/as]

What this function does basically?? firstly it needs six parameter:

• instanceName: The name of the active image that has the focus of the mouse.
• targetWidth And targetHeight: The desired width and height that the image will scale to.
• targetX AndtargetY: The desired X and Y that the image will scale to.
• factor: This will controll the easing of the moving and scaling.

Then we use these data for controling the position and the size, but note that these needs to be called within an onEnterFrame statment.

What else, I can say that's it, all we need is extra two lines, one when you roll over the image, and the other is using the function for the activated image. I will show you here only how to use it for the first image and the rest is too easy.

[as]// The first image script
_level0.pic1.onRollOver = function() {
        this._alpha = 100;
        _level0.select = "numOne";
}
[/as]

This make the alpha of the image that has the focus of the image is 100% and changes the value of the variable that we declared first in the root (the 'select' variable) to be the current focused image's name to use this within the next line:

[as]_level0.onEnterFrame = function() {
        if (_level0.select == "numOne") {
                moveAndScale(pic1, 162, 162, 26.1, 3.1, 2);
                moveAndScale(pic2, 40.5, 162, 188, 3.1, 2);
                moveAndScale(pic3, 40.5, 162, 228.5, 3.1, 2);
                moveAndScale(pic4, 81, 40.5, 26, 165, 2);
                moveAndScale(pic5, 81, 40.5, 107, 165, 2);
                moveAndScale(pic6, 81, 40.5, 188, 165, 2);
                moveAndScale(pic7, 81, 40.5, 26, 205.5, 2);
                moveAndScale(pic8, 81, 40.5, 107, 205.5, 2);
                moveAndScale(pic9, 81, 40.5, 188, 205.5, 2);
        }
}
[/as]

As you can see, all the hassle are in calculating the new position and size for each image.

This is, too easy to open your mouth when you see it for the first time (or at least me did so)

Good luck