Photo Gallery Tutorial (templetes Redy From Photoshop)

Now on your web site you have to have a nice photo gallery so lets get start to create something like that:

1st Create a new Flash Document in ActionScript 2 with these values:

Now Import the Lay Out From here. Or Try To Design It (it is not difficult to design it but i don't like much to design on flash thats why I import my lay outs from Photoshop)

Lets get Start in the layer 1 Drang and drop the DownBar and name the layer Down bar at position 0 0 (I have save all images in 420x600 to be more easy for you to aling them the only that you have to do is to set the positions 0 0 like the image bellow):

Now lock the DownBar Layer and insert a new layer and name it Arrows. Drag and drop the two images of arrows and Aling them to 0 0 from properties pannel. Lock again the layer and insert a new layer with the name FadeBG and Drag it to the bottom. Now Drag and Drop the FadeBG Image and your Layers have to look like this:

Insert a new layer again And name it Play. Drag the Play image and align it to 00. Press once to your image (to select it) and press f8 to convert it into a symbol. Name it PlayAndStop_mc and converted as a movie clip.

Now get inside to your movie clip (with double click) and press f6 into your time line to insert a new key frame. Delete your image from your key frame to make it blank and Drag and Drop your Pause Image. Align it 00 and insert a new Layer with the name Actions:

press f6 to add a new key frame, go on both key frames and write stop into the Action pannel (f9)

go back now to the Scence 1 again (your main movie) give an instance name play_mc and lock the layer

Add a new layer and name it Gallery. Draw a rectangle with rectangle (R) tool with values 600 width 400 height and position it at 0x 0y. Like this:

Now convert it to a movie clip with name GalleryAll_mc

give an instance name GalleryAll_mc (from the properties pannel)

press double click to go inside and Convert it again to a movie clip symbol with the name Gallery_mc. From the properties pannel give instance name Gallery_mc.

Now go to the time line and name the Layer 1, Gallery. go to frame 15, 30, 35, 50 and 65 and for each frame press (f6) to add key frame now your time line have to look like this:

Go to Frame 15, select (with just one click) the Gallery_mc and open the Filters menu add the Adjust color filter and apply these settings:

Do the same for layer 50.

now go someware between layer 1-15 and press right click to add classic motion tween

do the same for frames 15-30, 35-50, 50-65 now your time line have to look like this:

Now insert a new layer name it Labels and go to frame 36 add a new keyframe go to the properties and write pr.

Add another one layer and name it Actions. Got to Frame 15, 30, 50, 65 add key frames and write to the action script.

Go to frame 1 open the action script pannel and write: stop();

Go to frame 15 open the action script pannel and write: Gallery_mc.inside_mc.nextFrame();

Go to frame 30 open the action script pannel and write: gotoAndStop (1);

Go to frame 50 open the action script pannel and write: Gallery_mc.inside_mc.prevFrame();

Go to frame 65 open the action script pannel and write: gotoAndStop(1);

Frame1

Frame15

Frame30

Frame50

Frame65

Press double click into your Gallery_mc to go inside and make it movie clip (f8). Name it inside_mc.

give instance name inside_mc

and press double click to go inside. Name the Layer 1 images and add key 3 key frames. Add your images in each frame Image 1, Image 2, Image 3. (if you want to add more images you can do it). Add a new layer, name it Actions, go to frame 4 (or if you have more photos go 1 frame after your last photo) and write: gotoAndStop (1);

Now Go Back to your Main movie (Scene 1). add a new layer name it buttons and draw a rectangle with that values:

now convert it to a symbol (button) with f8 and name it Button_bt. Get inside to make it invisible.With drag and drop the first frame (UP) to the last (Hit)

now copy the Button_mc and aling it to 0 for x 400 for y like the image bellow:

go to the left button press once on it to select it and write the bellow code:

on(press){

GalleryAll_mc.gotoAndPlay("pr");

}

now go on the right button and write :

on(press){

GalleryAll_mc.gotoAndPlay(2);

}

Now lock the layers and add a new layer put it between FadeBG and DownBar and name it TimeLine.

Drag and place the TimeLine image to x0 y0. And convert it to a movie clip symbol, name it TimeLine_mc and give an instance name from the properties pannel TimeLine_mc. Press double click to go inside to TimeLine_mc add a new layer with the name mask and draw a rectangle with the rectangle tool (R) with that properties:

Convert it to a movie clip with the name mask_mc, go to frame 90 and insert key frame (f6) in the layer mask and Layer 1.

go back to frame 1 on the layer mask select once the movie clip mask_mc and set the properties like this:

now go somewer between 1-89 frame and press right click to the time line to create classic motion tween like this

insert a new layer name it actions and go to frame 90 press (f6) to add a key frame and write the bellow code to the action script pannel:

_parent.GalleryAll_mc.gotoAndPlay(2);

now go to layer mask press right click and make it mask

For the last go inside to the PlayAndStop_mc (lock all other layers and unlock the play layer). insert a new layer Drag from your library the Button_bt place it in this position:

press f6 into the time line to insert a new key frame so go to the first key frame, press once to your button to select it and write this code:

on(press){

gotoAndStop (2);

_parent.TimeLine_mc.stop();

}

go to the second frame press again once to your button to select it and write that code:

on(press){

gotoAndStop (1);

_parent.TimeLine_mc.play();

}

Go again to the Scene 1 add your last Layer on the top name it Border, Drag from your library the border image, Align it to x0,y0 and...

Save your movie and press Ctr+Enter to see your result

the fla file you can download it from here