Saturday, 9 May 2009

Circular transition effect

This Flash tutorial will teach you how to create a circular mask transition effect. This will gives the effect of images merging into each other. This tutorial uses shape tweens and mask layers, so no actionscript will be required for this tutorial. I have used three images for this transition effect, but you can use as many image as you like.

Circular transition effect

Step 1

Open a new Flash document.
Import your images into the library by selecting File > Import > Import to library. Select your images then click ok. I have imported three images for this effect, but you can add more images if you wish.

**Make sure all your images are the same size.

Step 2

On the timeline rename your layer 1 to “Image 1” and change the stage dimensions to the same size as your image. To find out the dimension of the image, simple click the image using the selection tool and notice your sizes at the bottom of the screen.


Select Modify > Document (Ctrl + J) and change the sizes according and then click ok.

Step 3

On the timeline insert at frame (F5) at frame 25 and then insert a new layer called “cmask”.


Step 4

Still on the cmask layer, select the oval tool and drag a small oval shape on the right hand size above the image, like below:

**The colour of the oval does not matter, as this will become the masked layer. Also make sure the oval does not touch the image.

Step 5

On the timeline select the 20th frame and insert a Key frame (F6).
Select the free transform tool (Q) and then hold down shift key and drag your oval until it fills up the whole of your image, like below:


Step 6

On the timeline, select anywhere in between the 1st and 20th frame and insert a shape tween.

Now right click on the “cmask” layer name on the timeline and select Mask from the drop down menu. Your timeline should look like below:


Step 7

On the timeline, insert a new layer called “image 2” and drag it above the “cmask” layer. Then select the 25th frame and insert a key frame (F6) and then select the 50th frame and insert a frame (F5).

Drag your second image from the library on the stage. Make sure your image is within the 25th to 50th frame. Insert a new layer called “cmask2” and make sure it is above the “image2” layer. Then select the 25th frame and insert a key frame (F6).

Now copy and paste the shape tween from the 1st to 20th frame on the “cmask” layer to the “cmask2” layer on the 25th frame.
Right click on the “cmask2” layer name on the timeline and select Mask from the drop down menu.

Step 8

Test your movie clip Ctrl + Enter. If you need to add more images then repeat step 7.

You should now have a nice circle mask transition.
Why not checkout the Fade transtion effect or Image transition effect?
Feel free to contact me for any questions or comments.


Anonymous 19 October 2009 at 07:27  

Excellent - making sure the reader understands the importance of the timeline and the layer positions can help a great deal.

Thank you.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP