Read this thoroughly explained, detailed tutorial and see how to create flash photo album with full control and sound. You can use this photo album for any presentation, flash animation, header, banner... To make this lesson, you have to use action script code. Using this lesson, you will also learn how to import any sound file into a flash stage, how to convert any layer into a mask, how to convert any photo into a movie clip symbol, how to create motion tween and much much more!
Step 1
First, download photos 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 300 pixels and the height to 225 pixels. Select white as background color. Set your Flash movie's frame rate to 32 and click ok.
Step 3
Call the current layer photo 1. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!
Step 4
Choose File > Import > Import to Library. In the file explorer window that appears, find a three photos (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 three photos that you just imported. See the picture below.
Step 5
Select 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 it into a Movie Clip Symbol.
Step 8
Click now on frame 20 and press F6 key.
Step 9
Go back now on the first frame, select again 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 10
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 11
Create now a new layer above the layer photo 1 and name it mask 1
Step 12
Select now mask 1 layer and using the Rectangle Tool (R) and Selection Tool (V), draw this shape and place it on the position like it is shown on the picture below!
Step 13
While the shape is still selected, press F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol. 
Step 14
Click now on frame 20 and press F6 key. After that, place the shape (new made movie clip) on the position like it is shown on the picture below!
Step 15
Select again frame 20 and go to the Action Script Panel (Ctrl+F3). Then, enter this code inside the actions panel:
stop();
Step 16
Select mask 1 layer and convert it to a mask by right-clicking on the mask 1 layer and selecting Mask. See the picture below.
Step 17
Create now a new layer above the layer mask 1 and name it button. 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".
Step 18
Create now the Invisible Button over the text (Next). See the picture below!
Step 19
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 20
Create now a new layer above the layer button 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.
Step 21
Then, repeat step 6 and 7!
Step 22
Click now on frame 41 and press F6 key.
Step 23
Go back on frame 21 and repeat step 9!
Step 24
Repeat now steps 11,12,13,14,15 and 16 but instead frame 20 and mask 1, click on frame 41 and choose mask 2!
Step 25
Create now a new layer above the layer mask 2 and name it button 2. Afet that, click on frame 41 and press F6 key. While you're still on frame 41, take the Text Too (A), for text color choose black and type on the right top corner again "Next".
Step 26
Create now the Invisible Button over the text (Next).
Step 27
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(42);
}
Step 28
while you're still on layer button 2, take the Text Tool (A) and type "Back" text and place it on the top left side. See the picture below!
Step 29
Create now the Invisible button over the "back" text. Then, Select 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);
}
Now, we're done with the first two photos. Repeat this process also for photo 3!
Step 30
It's time for sound, so create a new layer above the layer mask 1 and name it sound.
Step 31
Download now my example file (fla) at the end of tutorial and open it into a flash. After that, open my flash library (Ctrl+L), find my sound file, select it and press Ctrl+C key (Copy). After that, go back on the flash stage of lesson, select sound layer and press Ctrl+V key (Paste).
That's it!
Test your movie (Ctrl+Enter).
Have a nice day!Have a nice day!
Download source file (.fla)
discuss this topic to forum
