In this tutorial it will be explained how to create a flash picture gallery that can be browsed using next and previous buttons.

Prepare 5 picture having dimensions 400x300 pixels and let's start!

1. Create a new Flash document and then go to Modify >> Document (Ctrl+J) or to the Properties panel and set dimensions to 400x350 pixels.

2. Insert two new layers and rename them from top to bottom: actions, pictures, background.

3. In the background layer draw a rectangle about 400x50 using the Rectangle Tool (R). Set the Fill Color to #006699 and align it to center horizontal and bottom on vertical to Stage (choose same options like in the next picture):

Also put here two buttons from Flash collection of buttons or create two buttons (for learnig how to create buttons in Flash see Making a simple Adobe Flash 8 button – tutorial for beginners). Give to the buttons instace names of prev_btn and next_btn.

Then go to the frame 5 and choose Insert >> Timeline >> Frame (or press F5 key).

4. In the pictures layer insert blank keyframes (Insert >> Timeline >> Blank Keyframe) from frame 1 to 5. Import a different picture in each of these frames. Select File >> Import >> Import to Stage (Ctrl+R), choose the picture you want and press the Open button.

5. Select the picture from the first frame of pictures layer and go to the Properties panel. Set W: 400.0, H: 300.0. While the picture is still selected go to the Align panel and align the picture horizontal center and distribute top edge (see picture below):

6. Select the picture and go to Modify >> Convert to Symbol (F8). From the window that appears select MovieClip as Type, center for Registration point and type picture1MC in the Name field. While the movie clip is still selected go to the Properties panel and give it an instance name of picture1_mc.

7. Now double-click the movie clip (or right-click and choose Edit in Place) to edit it. You now should be in Edit mode for your movie clip (see next image):

8. Insert five new keyframes in Layer 1 (Insert >> Timeline >> Keyframe or press F6). Then go to the frame 1, 3 and 5 and delete their content (click the frame and then press the Delete key). Go to frame 6, open the Actions panel (F9) and put in the next ActionScript code:

stop();

9. Great job! repeat the steps 5, 6, 7, and 8 for each of the pictures except their names (for example for picture 3 give the name picture3MC to movie clip and picture3_mc to instance).

10. Now comes the ActionScript. Go to the first frame of the actions layer, open the Actions panel (F9) and put the following code in:

stop();
var contor=0;
prev_btn.onRelease=function(){
contor=(contor+4)%5; // % is modulo operator that returns the remainder (contor+4) divided by 5 that is the same like contor-1 if contor is greater than 0, but if conto4 is 0 (contor+4)%5 will take the value of 4
_root.gotoAndStop(contor+1);
}

next_btn.onRelease=function(){
contor=(contor+1)%5; // if contor is less than 4 then contor will take the value of contor+1, but if it is 4 then it will take the value of 0
_root.gotoAndStop(contor+1);
}

11. Now just test the movie (Ctrl+Enter) and admire your Flash picture gallery with twinkling transition.

discuss this topic to forum