Image listing by number

This tutorial will show you how to create image galleries, which is listing on number click. To create this tutorial, you have to use a little A.S.code. You will also learn:

1. How to import an image in Flash,
2. How to convert image into a Symbol,
3. How to convert any number into a Button,
4. How to apply action script code on button, using the action script panel and more.



Step 1

Create a new Flash document.

Step 2

Download the sample images for this tutorial that you'll use to quickly create this tutorial. Unpack the zip file and place the images in some folder where you will easily find them.

Step 3

Go back in flash. Choose File > Import > Import to Library. In the file explorer window that appears, find a five images (img1, img2, img3....) and Shift-click to select them all.Then click open. If you now open your flash library (Ctrl+L key) you will see all five images that you just imported. See the picture below.



Step 4

Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 270 pixels and the height to 240 pixels. Select white as background color. Set your Flash movie's frame rate to 28 and click ok.



Step 5

Take the Selection Tool (V), and using the "drag and drop" technique, move the first image from the library on the stage.

Step 6

While the picture is still selected, go to the Align Panel (Ctrl+K) and do the following:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click on the Align vertical center button.



Now, you have aligned the first image with the background.

Step 7

After that, move the image a little up, using the arrows key or by mouse. See the picture below.



Step 8

Double click on layer 1 to rename its name in image 1.

Step 9

Click on the first frame of layer image 1 and go to the Action Script Panel (F9). Then, enter the following Action Script code inside the actions panel:

stop();

Step 10

After that, create a new layer above the image 1 layer and name it numbers. Then, take the Selection Tool (V) and move the numbers layer below the image 1 layer using the "drag and drop" technique. See the picture below.



Step 11

Select the numbers layer, take the Text Tool (A) and go to the Properties Panel (Ctrl+F3) below the stage. Then, choose the following options:

1. Select a Static Text field,
2. Select a Trebuchet MS as font.
3. Choose 17 as font size,
4. Select black as color,
5. As the rendering option, select Use Anti-alias for readability.



Then, type below the image 1 2 3 4 5. See the picture below.



Step 12

Take again the Selection Tool (V) and select only the number 1.



After that, press F8 key (Convert to Symbol) to convert this number into a button symbol. See the picture below.



Step 13

While the new made button is still selected, go to the Action Script Panel (F9) and enter the following action script code inside the actions panel:

on (release) {
gotoAndPlay(1);
}

Step 14

Take again the Selection Tool (V) and select only the number 2. After that, press F8 key (Convert to Symbol) to convert this number into a button symbol. See the picture below.



Step 15

While the new made button is still selected, go again to the Action Script Panel (F9) and enter this script inside the actions panel:

on (release) {
gotoAndPlay(2);
}

Like we have converted the first two numbers into a button symbol, convert the all other numbers, and enter the following action script code for each one:

number 3:

on (release) {
gotoAndPlay(3);
}

number 4:

on (release) {
gotoAndPlay(4);
}

number 5:

on (release) {
gotoAndPlay(5);
}

Step 16

Click on frame 5 of layer numbers and press F5 key.

Step 17

Create a new layer above the image 1 layer and name it image 2.

Step 18

Click on frame 2 of layer image 2 and press F6 key. Then, move the second image (img2) from the Library Panel (Shortcut key: Ctrl+L) on the stage using the "drag and drop" technique and Selection Tool (V).

Step 19

Then, place the second image on the same position where we have placed the first image.

Step 20

Take the Selection Tool (V) and click on frame 2 of layer image 2. Then, enter this code inside the action panel:

stop ();

Step 21

Like we moved the first twe images from Library on the stage, move all other images, and place it in the separate layer on frame (img3 on frame 3, img4 on frame 4 and img 5 on frame 5). See the picture below:



We're done!

Have a nice day!

click to download