Glamorous picture gallery

Date: 8.2.2007, 23:52    Total views: 48961

In this detailed tutorial made for Flash 8, you will see how to create advanced glamorous picture gallery using the Action Script.You can see this galleries in many modern flash sites.



Step 1

Open a new Flash document. Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 270 pixels and the height to 200 pixels. Select white as background color, for frame rate set 40 fps (Frames per Second) and click OK.





Step 2

Find on internet or somewhere six picture, open it in some of graphic programs (photoshop....) and set its dimensions to 90x90px. After that, go in flash, choose File > Import > Import to Library, and Import them in Flash Library.See the picture below.



Step 3

Using the "drag and drop technique", move the picture from the Library on the stage, and place it on the position like it is shown on the picture below.



Double click on layer 1 to rename its name in picture gallery.

Step 4

Select the first picture in gallery and press F8 key (or select Modify > Convert to Symbol ) to convert this picture 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

Click on frame 15 and press F5 key.

Step 7

Create a new layer and name it effect. After that take the Rectangle Tool (R).In the Colors portion of the Tool panel, block the Stroke color by clicking on the little paint bucket icon and then on the small square with the red diagonal line. For Fill color choose white and draw a "recatngle" 80x80px, and place it on the center of the first picture. See the picture below.



Step 8

While the "rectangle" is still selected, press F8 key (Convert to Symbol) and convert it into a Movie Clip symbol.



Step 9

Click on frame 15 and press F6 key. After that, take the Selection Tool (V), click once on the "rectangle" 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 45 %.





Step 10

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




After that, while the rectangle that you just decreased is still selected, in 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 11

Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears.



Step 12

Go back on the main scene (Scene1), take the Selection Tool (V), select the first picture, open the Properties Panel (Ctrl+F3) and on the left side, you will find the Instance name input field there.In that field type (call this picture) img1. Look at the picture below!



Step 13

Create a new layer and name it Invisible Button. After that, select that layer and create the "Invisible Button" over the first picture.



Step 14

Take the Selection Tool (V), click once on the Invisble Button to select it, open the A.S.Panel (F9), and enter this code inside the Actions panel:

on (rollOver) {
_root.mouse_over_img1 = true;
}
on (rollOut) {
_root.mouse_over_img1 = fstartlse;
} on (release){
getURL("http://www.flashfridge.com/", "blank");

}

Step 15

Create a new layer and name it Action. Click on the first frame of layer Action, and in A.S.Panel (F9), paste this script:

_root.img1.onEnterFrame = function() {
if (mouse_over_img1) {
_root.img1.nextFrame();
} else {
_root.img1.prevFrame();
}
};

We're done with the first picture in menu. Repeat the previous steps for every other picture in menu in an equivalent way.

Have a nice day!

Download source file (.fla)