Written by: Alfred Fayek (farafiro [email:[email protected]])
Difficulty Level: Intermediate
Requirements: Flash MX 2004
File(s) to download: photoAlbumv1.0.zip

No doubt that we are seeing a huge number of question about making a photo album or a photo navigation, here I will try as much as I can to explain the most famous or asked questions of how to do such files.

Before we start, you should have some knowledge about the easing effect which you can find it at Bit-101's site. Also a very nice article about Flash Limits by Senocular.

This is the final file that we will do it together, now let's get our hands dirty

Start with a new flash file 550x400, and before we go on let's just think how we want our file looks like??

Here I'd prefer you get your pencil and a paper and start to put down your ideas 'till you get the desired results. I chosed a simple one for this tutorial.

We have 6 images that we want to make a navigation for them, so here are our steps:

• Import the desired images to the library (File> Import> Import To Library), all the images are 320x240
• Make our button that will control the transition of the images (I made a MovieClip that will use it like a button)
• Make an empty Text Field to show a brief describtion for the current diplayed images

ok, now we have all the stuff we need, let's make the main MC that will hold the images. Make a new MC (CTRL+F8), give it a name 'pixNav'. Now give the layer a suitable name, like 'Pix'.

Open the library, and drag the first image to the stage, position it at the 0,0. drag all the other images to the stage and snap them to the edge of each other, then select them all and convert them to a MC (F8), name it 'thePix' and in the property panel give it a name like 'panorama_mc', so it looks 'like this:

Alright, this was just too easy. Now let's add a new layer above the 'Pix' one and name it 'Mask' . Make a 320x240 rectangle shape in it (as the image size), place it at 0,0 so it covers the first image:

easy enough, huh

Let's move to the next step.

Back to the main stage , it's empty 'till now, so open the library,it should look something like this:

Let's add our layers and assets, we need a total of four layers with names ('Script', 'Buttons','The Text','Pix_mc').

• The Script Layer: this layer will have all our Action Script that will controll the navigation, so keep it locked for not adding symbols by mistake
  • The Pix_mc layer: in here drag the 'pixNav' MC from the library and center it on the stage , give it an instance name in the property panel like 'thePix_mc'
• The Buttons Layer: drag the buttons that we did earlier and duplicate it as much as you have images (I added 6) place them wherever you want on the stage , name them in the property panel like 'the1_btn' , ' the2_btn',.....etc.
• The Text Layer: add a dynamic Text Field here, give it an instance name like 'info_txt' in the property panel. This will have a brief discription for each image

So, the final project will look like this image:

Now, let's go to the Scripting thing, open the Actions panel (F9) and let's shoot this thing up. What we want to do?, we want these buttons to control the position of each image when it's pressed while the Text Field shows up some info about the image that's in the view.

We will start by initializing our Variables and arrays that we will use, in the Action panel declare two arrays, one for the positions of the images and the other for the describtion of the current image which will show up in the text field

[as]//we declare a variable to hold total number of images
var numOfPix:Number = 6;
//declaring the positions array
//The positions starts from 0 (the first image position and we add the width of each image on the right)
var pos:Array = [0, 320, 640, 960, 1280, 1600];
//declare the informations that will be displayed in the text field, just a dummy text for the sake of ease
var theInfo:Array = ["The First Car", "The Second Car", "The Third Car", "The Fourth Car", "The Fifth Car", "The Sixth Car"];
//Declaring variables to control the buttons' labels
var w:Number = _level0.the1_btn._width;
var h:Number = _level0.the1_btn._height;
[/as]

Fine 'till now, let's move another step. We set the Text Format that we will use in our Text Fields

[as]//~~~ The text Format ~~~
//First we create a new Text Formt that weill hold our text properties which are "align to center", "color is orange",
"bold", "size to 20" and our desired font that we will create it later
var theFmt:TextFormat = new TextFormat();
theFmt.align = "center";
theFmt.color = 0xFF6600;
theFmt.font = "theFont";
theFmt.size = 20;
theFmt.bold = true;
//
[/as]

How to export and use a font in the libray

Next step, we create Text Field for the buttons and set the Text Format that we made for them

[as]//creatin a text field in each of the buttons (MCs) we have
for (i=1; i<=numOfPix; i++) {
        _level0["the"+i+"_btn"].createTextField("theNum_txt", 1, 0, 0, w, h);
        _level0["the"+i+"_btn"].theNum_txt.text = i;
        _level0["the"+i+"_btn"].theNum_txt.setTextFormat(theFmt);
}
//apply the text format to the Text Field that will have the describtion, and make it not selectable
_level0.info_txt.selectable = false;
_level0.info_txt.setNewTextFormat(theFmt);
//
[/as]

Now for the final step, making the buttons to control the navigation of the images

[as]//
for (i=1; i<=pos.length; i++) {
        _level0["the"+i+"_btn"].n = i;
        _level0.info_txt.text = _level0.theInfo[0];
        _level0["the"+i+"_btn"].onRelease = function() {
                _level0.thePix_mc.panorama_mc._x = _level0.pos[this.n-1]*-1;
                _level0.info_txt.text = _level0.theInfo[this.n-1];
        };
}
//
[/as]

What does this do??

We make a "for loop" to decrease the written data, in first line of the loop we declare a variable for each button mc (n), this will control the images navigation and the information for each image that will be displayed in the info_txt text field. The second line displays the current image (which is the first image) info in the text field by getting it from the info array that we declared earlier.

Now, we want when we press any button to see the appropriate image to be shown, so inside the loop we make an onRelease event for each button to read the new position from the positions array (pos) and change the current x position of the images and at the same time displays the info of the current image in the info_txt text field .
so the final project for now:

DOH, what is this?? I can hear you saying that this can be done with frames and a couple of buttons. Yes, but wait and let's move to the dynamic parts, the easing and the trasition parts.

The Easing:

In its simplest discription, the easing in the calculation of the 'new property' minus the 'old property' devided by the 'easing factor' and the old property needs to be calculated untill the 'new' and 'old' properties are equal.

So, in our example we do have all the pictures in a long row, all of them are 320 pixel wide and the first one starts at _x=0 and the next one is of course at 320, then 640, 960,....

Let's make an example for navigating the 4th picture which it resides at _x=960 within the pictures holder movie, the script would look like:

[as]thePixHolder._x +=( theNewXPosition - thePixHolder._x) / easingAmount
[/as]

and in Numbers

[as]thePixHolder._x += (960-0)/10
[/as]

this is easy enough, but as mentioned the 'thePixHolder._x' needs to be calculated untill the 'new' and 'old' properties are equal, so it's needed to be within an onEnterFrame statment. And the new script would look like:

[as]speed = 10
theButton4.onRelease = function() {
        _level0.theTgt = 960;
};
theButton4.onEnterFrame = function() {
        _level0.thePix_mc._x += (_level0.theTgt-_level0.thePix_mc._x)/_level0.speed;
};
[/as]

and the swf will look like this:

and the added script within the for loop just after the onRelease statment:

[as]_level0["the"+i+"_btn"].onEnterFrame = function() {
        _level0.thePix_mc.panorama_mc._x += (_level0.theTgt-_level0.thePix_mc.panorama_mc._x)/_level0.speed;
};
[/as]

Now for the transition thing, we need to:

• Make a new layer just above our 'pix_mc' layer, name it 'Second Pix_mc', and insert another copy of our 'pix_mc' in it, give it an instance name as 'thePix2_mc' . Make sure it cordinates are the same as the first one
• Make another layer above it, name it 'Mask', pick the Rectangle Tool from the tool bar and draw a square just the same dimension as the 'thePix2_mc'. Convert it to MovieClip and name it 'mask' with an instance name of 'mask_mc' . Now edit it [Ctrl+E], make a couple of extra KEY FRAMES (I did 5 frames), just as much you want for the number of masks, and thenmake a new layer for script, add a stop() in the first frame.
• Back to the main stage, make the Mask layer as a mask to the 'thePix2_mc'

This it, what this will do?? we will make the new pix_mc that we've added (thePix2_mc) to react just as the first one but with difference in the speed, so we will add a new variable for it, name it speed2 and change the first one to speed1 and also we add a variable to hold the total number of frame of the mask_mc:

[as]var speed1:Number = 15;
var speed2:Number = 9;
var numOfFrames:Number = _level0.mask_mc._totalframes-1;
[/as]

and then we add these new two lines within the onRelease and onEnterFrame statments:

[as]_level0["the"+i+"_btn"].onRelease = function() {
        _level0.theTgt = _level0.pos[this.n-1]*-1;
        _level0.info_txt.text = _level0.theInfo[this.n-1];
        _level0.mask_mc.gotoAndStop(Math.round(Math.random()*_level0.numOfFrames+1));
};
_level0["the"+i+"_btn"].onEnterFrame = function() {
        _level0.thePix_mc.panorama_mc._x += (_level0.theTgt-_level0.thePix_mc.panorama_mc._x)/_level0.speed1;
        _level0.thePix2_mc.panorama_mc._x += (_level0.theTgt-_level0.thePix2_mc.panorama_mc._x)/_level0.speed2;
};
[/as]

The end, tadaaaaaaaaaaaaaaa