Circular image presentation by mask

17.6.2008, 21:28
Submited in: Flash | Total Views: 28753

Using this tutorial, you will see how to create very practical image presentation using a mask. You will also use circle shape and some flash tips and tricks to make this tutorial. You don't have to use action script code to make this tutorial. This tutorial is so easy for create and you can use it for any flash header, banner, presentation...

Step 1

Find any image which you like to use for this presentation. You can also, if you like save my image below to quickly make this lesson.

Step 2

Open a new Flash document by selecting File > New > Flash document and clicking ok. Set the dimensions of your document as the dimensions of image and set the speed (frame rate) to 32 fps. Select any color as background color and click ok. 

Step 3

Choose now File > Import > Import to Stage and import any image into a flash stage.

Step 4

While the image 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 5

While the image is still selected, press F8 key (Convert to Symbol) to convert this image into a Movie Clip Symbol.

Step 6

Press now F6 key on the keyboard thirty-five times. See the picture below.

Step 7

Go back now on frame 2, take the Selection Tool (V) and click once on the image 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%.

Do this also for every second frame (4,6,8...) except last two frames.

Step 8

Click now on frame 100 and press F5 key.

Step 9

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

Step 10

Take now the Oval Tool (O) and draw a circle about 50x50 px and place it on some position on the image.

Step 11

While the circle is still selected, press F8 key (Convert to Symbol) to convert this circle into a Movie Clip Symbol.

Step 12

Click now on frame 5,10,15,20,25,30 and 35 of layer mask and press F6 key.

Step 13

Go back now on frame 5 and place your circle on some other position. Do this also for frame 10,15, 20 and 25.

Step 14

Click now on frame 30, and place the circle on the center of image using the Align Panel (See step 4).

Step 15

After that, enlarge it a little using the Free Transform Tool (Q). See the picture below.

Step 16

Select now frame 35 take again the Free Transform Tool (Q) and enlarge the circle again, until fill the whole image. See the picture below.

Step 17

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

Test your Movie (Ctrl+Enter).

We're done!

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