Advanced picture gallery

29.12.2006, 1:42
Submited in: Flash | Total Views: 161990

In the tutorial listed below I will instruct you, how to make advanced picture gallery in flash 8 using the Action Script.

Step 1

Open a new Flash document.Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 430 pixels and the height to 80 pixels. For background color choose any color, and for Frame Rate set 48 fps (Frames per Second). See the picture below.

Step 2

Find on internet or somewhere four picture, open it in some of graphic programs (photoshop....), and set its dimensions to 100x80px. After that, go in flash, choose File > Import > Import to Library, and Import them in Flash Library.

Step 3

Using the drag and drop technique, move the picture from the Library on the stage. After that, selete the all picture (Ctrl+A), and go to the Align panel. If it isn't opened already, just select Window > Align or press Ctrl+K to open it.While the image is still selected do the following in the Align panel: Make sure that the Align/Distribute to Stage button is turned on, Click on the Align vertical center button and Click the Distribute horizontal center button.

Now you have this:

Step 4

Select the first picture in gallery and press F8 key (or select Modify > Convert to Symbol ) to convert that image into a movie clip symbol.

Step 5

Double-click on the movie clip on stage with the Selection tool (V).

You should now be inside the movie clip.

Step 6

While the picture is still selected, press Ctrl+C key (Copy), create a new layer (layer2), click on frame 2, press F6 key and after that Ctrl+Shift+V key (Paste in Place).

Step 7

Go back on layer 1, select the picture with Selection tool (V) and press F8 key to convert it into a Graphic Symbol.

Step 8

Choose the Selection tool (V), click once on the picture to select it, open the Properties Panel (Ctrl+F3), on the right, you will see the Color menu. Select Alpha in it and put it down to 50%.

Step 9

Click on frame 20 and press F5 key.

Step 10

Lock layer 1, select layer 2, click on frame 2 and press F8 key to convert this picture into a Movie Clip symbol.

Step 11

Click on frame 10,11 and 20 and press F6 key.

Step 12

Go back on frame 1, take the Free Transform Tool (Q), press and hold down Alt key, and do like it is shown on the picture below.

Step 13

Take the Selection Tool (V), select the part of picture that we decreased in previous step, open the Properties Panel (Ctrl+F3), on the right, you will see the Color menu. Select Alpha in it and put it down to 0%.

Step 15

Repeat steps 12 and 13 for frame 20 too.

Step 16

Right-click anywhere on the gray area between frame 2 and 10, and frame 11 and 20 on the timeline and choose Create Motion Tween from the menu that appears. See the picture below.

Step 17

Click on frame 1, open the Action Script Panel (F9), and type this:


Do that also for frame 10.

Step 18

Click on frame 2,open the Properties Panel and for <Frame Label> type goes1.

Step 19

Click on frame 11 , and in Properties Panel for <Frame Label> type goes2.

Step 20

Click on frame 20, open the A.S.Panel and type this:

gotoAndPlay (1);

Step 21

Go back on the main scene (Scene1), take the Selection Tool (V), click once on the first picture to select it, open the A.S.Panel and paste this script:

on (rollOver) {
gotoAndPlay ("goes1");
} on (rollOut) {
gotoAndPlay ("goes2");

on (release) {
getURL ("", _self);

Test your Movie (Ctrl+Enter).

We're done for the first picture in gallery. Repeat this steps for every other picture in gallery.


Download example

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category

Most popular tutorials