Toxiclab.org

Very attractive and advanced photo album with full control

15.10.2008, 22:47
Submited in: Flash | Total Views: 29547

In this step by step lesson made for Flash 8 professional I will explain to you how to create very attractive and advanced photo album in flash. You will control that album using the next and back buttons. You can use this photo album for any photo presentation, for any web site. To make this lesson, you also have to use action script code. Using this lesson, you will also learn how to Import any photos into a Flash Library, how to after that aligned it with the flash background, convert it into a Movie Clip Symbol and much more! For this example, I will use a photos of beautiful womens! :)



Step 1

First of all, download a photos of beautiful womens! You can also, if you like, find some other photos and use it for this lesson!

Step 2

Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 333 pixels and the height to 318 pixels. Select white as background color. Set your Flash movie's frame rate to 32 and click ok.



Step 3

Choose File > Import > Import to Library. In the file explorer window that appears, find a five photos of beautiful womens (photo1, photo2...) and Shift-click to select them all.Then click open. If you now open your flash library (Ctrl+L key) you will see a six photos that you just imported. See the picture below.



Step 4

Take now the Selection Tool (V) and double click on layer 1 to rename its name into a photo 1.

Step 5

Take again the Selection Tool (V) and using the drag and drop technique, move the first photo from the Library on the stage.

Step 6

While the photo 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 the Align vertical center button.



Step 7

After that, while the photo is still selected, press F8 key (Convert to Symbol) to convert this photo into a Movie Clip Symbol.



Step 8

Click now on frame 20 and press F6 key.

Step 9

While you're still on frame 20, go to the Action Script Panel (F9) and enter this code inside the actions panel:

stop ();

Step 10

Go back now on the first frame. After that, take the Selection Tool (V) and click once on the photo to select it. After that, go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Advanced on it, click on Settings button, set the following options and click ok.



Step 11

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

Step 12

Create now a new layer above the layer photo 1 and name it text. Afet that, click on frame 20 and press F6 key. While you're still on frame 20, take the Text Too (A), for text color choose black and type on the right top corner "Next". See the picture below!



Step 13

Create now the Invisible Button over the text (Next). See the picture below!



Step 14

Take now the Selection Tool (V) and click once on the Invisible Button to select it. Then, go again to the Action Script Panel (F9) and enter this code inside the actions panel:

on (release) {
gotoAndPlay(21);
}

Step 15

Create now a new layer above the layer text and name it photo 2. After that, click on frame 21 and press F6 key. While you're still on frame 21, move the second photo from the Library on the stage.

Then, repeat steps 6 and 7.

Step 16

Click now on frame 41 and press F6 key. While you're still on frame 41, type again into a Action Script Panel:

stop ();

Step 17

Go back now on frame 21, and repeat step 10.

Step 18

Right-click anywhere on the gray area between frame 21 and 41 on the timeline and choose Create Motion Tween from the menu that appears. See the picture below.



Step 19

Create now a new layer above the layer photo 2 and name it again text. Then, copy "Next" text and paste it in the same place! After that, type text Back on the top left corner. See the picture below!



Step 20

Create now again the Invisible button over the Next and Back text. See the picture below!



Step 21

Take now the Selection Tool (V) and click once on the Invisible Button over the Back text. Then, enter this action script code inside the actions panel:

on (release) {
gotoAndPlay(1);
}

Step 22

Take now again the Selection Tool (V) and click once on the Invisible Button over the Next text. Then, enter this action script code inside the actions panel:

on (release) {
gotoAndPlay(42);
}

Now, we're done with the first two photos. Repeat this process also for every other photos.

Have a nice day!

Download example

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

Browse by category


Most popular tutorials