Flash tutorials
Home 3D (2) Actionscripting (65) Animation (100) Audio (4) Drawing (7) Full flash sites (4) Getting Started (15) Navigation (25) Special Effects (52) Text Effects (38)

Advanced photo album using a mask technique

17.2.2009, 20:44    Total views: 18191

In this thoroughly explained, detailed lesson, I will show you how to create a really modern and advanced photo album using a mask technique and some special flash tips and tricks. You don't have to use action script code to make this lesson! You can use this photo album when you need to present something, for flash gallery, header, some banner... Using this thoroughly explained lesson, you will also learn how to use Free Transform Tool (Q), how to convert any photo into a Movie Clip Symbol, how to animate it, apply alpha effects on it and much much more! Let's start!



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 #2B2B2B 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 (photo 1, photo 2...) and Shift-click to select them all. Then click open. If you now open your flash library (Ctrl+L key) you will see three images 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.



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



Step 7

Click now on frame 25 and press F6 key. While you're still on frame 25, select 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 Alpha in it and put it down to 20%.



Step 8

Go back now on the first frame, select again the Selection Tool (V) and click once on the photo to select it! Then, go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Advanced in it, click on Settings button and make the adjustments as follow:



Step 9

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

Step 10

Create now a new layer above the layer photo 1 and name it mask 1.

Step 11

Select layer mask 1 and  take the Rectangle Tool (R). In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose white and draw a “rectangle” at the center of stage about 8x6 px. See the picture below!



Step 12

Click now on frame 12 and press F6 key. After that, take the Free Transform Tool (Q) and do like it is shown on the picture below!



Step 13

Click now on frame 25 and press F6 key. While you're still on frame 25, select again Free Transform Tool (Q) and do like it is shown on the picture below!



Step 14

Select now mask 1 layer and go to the Properties Panel (Ctrl+F3) below the stage. On the left side, you will see Tween drop down menu. Choose Shape on it! See the picture below!



Step 15

Select now 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 16

Create now a new layer above the layer mask 1 and name it photo 1.1

Step 17

Go back now on frame 25 of layer photo 1 and press Ctrl+C key (Copy). After that, select frame 5 of layer photo 1.1 and press F6 key. Then, while you're still on frame 5, press Ctrl+Shift+V key (Paste in Plce).

Step 18

Select now 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 Alpha in it and put it down to 40%.



Step 19

Create now a new layer above the layer photo 1.1 and name it mask 1.1

Step 20

Select now frame 5 and press F6 key. Then, go back on frame 1 of layer mask 1 and press Ctrl+C key (Copy). After that, select frame 5 of layer mask 1.1 and press Ctrl+Shift+V key (Paste in place).

Step 21

Click now on frame 17 of layer mask 1.1 and press F7 key (blank keyframe). Then, go back on frame 12 of layer mask 1 and press Ctrl+C key (Copy). Go back now on frame 17 of layer mask 1.1 and press Ctrl+Shift+V key (Paste in Place).

Step 22

Click now on frame 29 of layer mask 1.1 and press again F7 key. Then, go back on frame 25 of layer mask 1 and press Ctrl+C key. Select now frame 29 and press Ctrl+Shift+V key (Paste in Place).

Step 23

Select now mask 1.1 layer and go to the Properties Panel (Ctrl+F3) below the stage. On the left side, you will see Tween drop down menu. Choose Shape on it!

Step 24

Select now mask 1.1 layer and convert it to a mask by right-clicking on the mask 1.1 layer and selecting Mask. See the picture below.



Step 25

Click now on frame 29 of layer photo 1.1, mask 1 and photo 1 and press F5 key.

Now, we're done!

Have a nice day!

Download source file (.fla)

Have questions about this tutorial?
Visit our friendly Community Forums!
Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!

Top tutorials

1. Advanced full flash site - Part 1
Total views: 221533

2. Water effect
Total views: 166039

3. Photo slide show
Total views: 153638

4. High-tech city animation
Total views: 151459

5. Special Picture Effect
Total views: 146246

Related links