Twitter Facebook RSS Logo

Gorgeous Page Roll Image Transition Effect in Flash

22 Comments

In this tutorial you will learn how to create a gorgeous page roll image transition effect  using masking in Adobe Flash.

Tutorial Details Program: Flash CS5

Estimated Completion Time: 40 hr

Tutorial FLA File - Source File.fla

Page Roll Image Transition Effect in Flash

Let’s get started!

Open a  new flash document with action script 2.0.

Creating Page Curl Transition

Step 1: Setting Up Document Properties

Now Select Modify from the menu bar and select Document or You directly can press ctrl + J to open the document properties.

Creating Page Curl Transition

Now change the stage dimensions as 700×438, FPS = 30, and Background Color = Black as shown in the Figure below. To start with the tutorials download the source.zip file that will provide you with the necessary files to be used in the tutorial.

Creating Page Curl Transition

Step 2: Importing necessary images

First import the downloaded used images from the source. To do that, Go to the File menu > Select Import > Select Import to Library.

Creating Page Curl Transition

Step 3: Positioning images on to the stage

Before starting we already have layer 1, now name the layer as 1. Drag the img1 image from the library on to the stage.

Creating Page Curl Transition

Align the image to the center of the stage using the align panel. Keep in mind that to align any item to the center of the stage, check on the “Align to stage” check box.

Creating Page Curl Transition

Step 4: Creating Transition1

Press Ctrl + F8 to create a new symbol. Type the name Transition1 and select type to Movie Clip.

Creating Page Curl Transition

You will enter the Transition1 movie clip and rename the layer as img1. Then select the image and Press F8.

Creating Page Curl Transition

Drag image img2 from library and Press F8 to create a new symbol. Name this symbol as img2. But do not retain this symbol on the stage as of now. Keep this in library.

Step 5: Creating Transition1 – Arranging elements

Insert a new layer and name it as img1_mask.

Creating Page Curl Transition

Now create a rectangle with the dimension are as follow.

Open the propertied panel. To open the properties panel, Go to the Window menu > Select the properties.
W = 40
H = 450
X = -390
Y = -225

Creating Page Curl Transition

Now insert a new layer again and name it as img1_flip.

Creating Page Curl Transition

Now copy img1 image by pressing ctrl + C and Paste on img1_flip layer using ctrl + shift + V. Then go to the modify menu > Transform > Flip horizontal.

Creating Page Curl Transition

Now move the flipped image to left till it comes out from the stage. Do not leave single pixel space between both the images as given in the reference image below.

Creating Page Curl Transition

Now insert a new layer and name it as img1_flip_mask.

Creating Page Curl Transition

Now create a rectangle with the dimension are as follow.

Open the propertied panel. To open the properties panel, Go to the Window menu > Select the properties.
W = 61
H = 438
X = -411
Y = -219

Creating Page Curl Transition

Now copy this rectangle by pressing ctrl + C and insert a new layer and name it as gradient_effect. Then paste the copied image by pressing ctrl + shift + V.

Now apply gradient color to the rectangle. To do that, go to the window menu > color or press alt + shift + F9 to open the color panel.

Creating Page Curl Transition

After applying gradient, select the left color bucket and type 7E7E7E in the color code box highlighted in the color panel as given below.

Creating Page Curl Transition

Now press between the both buckets and type #FFFFFF in the color code box highlighted in the color panel. Then set alpha to 0%.

Creating Page Curl Transition

Step 6: Creating Transition1 – Applying Shape and Classic Tween

Now select frame 99 of all the layers except of img1 layer as given in the reference below. Then press f6 to insert key frame. After that select frame 100 of img1 layer only and press f5 to insert frame.

Creating Page Curl Transition

Now apply animation. To do that, select any frame between frames 1 to 99 and do right click and select Create Shape Tween.Apply shape tween on; gradient_effect layer, img1_flip_mask layer, and img1_mask layer.

Creating Page Curl Transition

Now select any frame between the frame 1 and 99 of img1_flip layer and create Classic Tween. To do that, right click > select Create Classic Tween.

Creating Page Curl Transition

Step 7: Creating Transition1 – Creating animation

Now Select the gradient_effect layer, img1_flip_mask layer, and img1_flip layer elements and left alight each of them by pressing the highlighted button given in the reference image below.

Creating Page Curl Transition

Then move them to the right till it comes out from the stage as given in the reference image below.

Creating Page Curl Transition

Select the rectangle placed on img1_mask layer and then increase the width of the rectangle using free transform tool to cover the image.

Creating Page Curl Transition

Step 8: Creating Transition1 – Applying Mask

Now Select the img1_mask layer and do Right click, then select mask. Do the same with img1_flip_mask layer.

Creating Page Curl Transition

Step 9: Preparing transition on main timeline

Click on the Scene to come out from the transition1 movie clip.

Creating Page Curl Transition

Now go to the properties panel and select the Graphic as given in the reference image below.

Creating Page Curl Transition

Then come down in the properties panel and select the Play Once from the LOOPING as given in the reference image below.

Creating Page Curl Transition

Now insert a new layer and name it as 2. Then select the frame 225 of both layers and press F5 to insert frame.

Creating Page Curl Transition

Now copy the transition1 from layer1 by pressing ctrl + C. Insert a new keyframe by pressing F6 and then paste the copied transition1 by pressing ctrl + shift + V. Select the clip and do right click and then select Duplicate Symbol…

Creating Page Curl Transition

Type name Transition2.

Creating Page Curl Transition

Now double click on the transition2 to enter into the clip.

Now go to the properties panel and select the image on the first frame and then press swap.

Creating Page Curl Transition

A swap symbol box will appear then select img2 and press ok. It will replace the img1 symbol to img2 symbol.

Do this Method on each img1 symbol to replace that with img2.

Creating Page Curl Transition

Press ctrl + enter. You will see the effect something like this.

Page Roll Image Transition Effect in Flash

22 thoughts on “Gorgeous Page Roll Image Transition Effect in Flash

  1. Very beautiful effect. But Ido all that you said but the circle mask is not transparent, it’s a simple transition mask. What a disappointment!
    Can you explain me why.
    Thank you

  2. I cant continue on step 9, i dont know what to do with the scene to convert to graphic, coz it wouldn’t showed on the properties panel…Help will be appreciated..please. Thank you in advance

  3. This is a beautiful effect. But you are not explicitly precise in each step with regards to which layer to click, which layer of frame should be selected before inserting “key Frame”, which object should be selected before copying, the detailed steps skip a few points and i am lost at step 9, then i think i understand it after reading twice, then i am stuck at step nine again :-( I would love some help creating this beautiful glorious transition for my images pages. Help would be appreciated.

Leave a Reply

Your email address will not be published. Required fields are marked *

Featured Templates

Subscribe to New Posts

Enter your email address:

Delivered by FeedBurner