Gorgeous Page Roll Image Transition Effect in

Flash
Let’s get started!

Open a new flash document with action script 2.0.

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.

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.

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.

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.

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.
Step 4: Creating Transition1

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

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

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.

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

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

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.

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.

Now insert a new layer and name it as img1_flip_mask.

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

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.
After applying gradient, select the left color bucket and type 7E7E7E in the color code box highlighted in the color panel as given
below.

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

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.

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.

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.

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.

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

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

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.
Step 9: Preparing transition on main timeline

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

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

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

Now insert a new layer and name it as 2. Then select the frame 225 of both layers and press F5 to insert frame.
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…

Type name Transition2.

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.
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.

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

Realistic Rippling Water Animation in Flash

In this tutorial, you will learn how to create a Realistic water animation in flash using a water image. Here we are taking new flash document
with action script 2.0.

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. See the
reference image below.
Now change the stage dimensions as 700 x 552 and the FPS is 24, 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.

Step 2: Importing image

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

Step 3: Positioning the image on to the stage

Before starting we already have layer 1, now name the layer as scene img. Open the library panel by Pressing Ctrl+L. Then drag the
beautiful-island image from the library.

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, Press the
“To stage” button.
Step 4: Detaching island part of the image
Now Copy the images, to do that press ctrl + C and insert a new layer as scene img2 then press Ctrl + Shift + V.

Now Insert a new layer again above the scene img2 layer, and name it as island area shape.

Now draw a shape using pen tool or line tool around the island and sky area. See the black outline in the given reference image below.
Now Right click on the island area shape layer and select mask.

You will find the masked images something like the given image below.
Step 5: Creating animation symbol
Now insert a new layer, and name it as water animation.

Again paste the copied image or drag and center align the image from the library. Convert the image to movieclip symbol, To do that,
select the image > Right click > Convert to Symbol. See the reference image below

Now press ctrl + T to open the transform panel or go to the window menu and select transform. Increse the width and height to 102%.

Step 6: Creating masking for water area

Now insert a new layer and name it as mask stripes.
Create no. of stripes using rectangle tool as given in the reference image below. Keep in mind the space between each rectangle or strip
must be same as well as size of the strip should be same too.

Step 7: Animating the stripes

Now go to the frame 100 and insert a key frame by pressing f6.
And move the strips to the bottom as shown in Figure below. Keep in mind; do not move stripes to outside the beach area. And the strip
position on frame 1 and 100 should be match. By doing this we can decrease the jerk from the animation

Now select any frame between frame 1 and 100 of mask stripes layer. Then Right click > select Create shape tween.

Now Right click on the mask stripes layer and select mask.
Now come to the main time timeline.

Step 7: Finalizing the animation

Now insert a new layer and name it as mask.

Create a rectangle as shown below. By doing this we can hide the extra part of the water animation layer.
Now Right click on the mask layer and select mask.

Next, choose CTRL + ENTER to publish the flash file to get the realistic water effect.
We hope you have learned something new and interesting in Flash. Do leave your comments and feedback in the comment form found
below. We’d love to hear from you!

Checkboard Transition Effect in Flash

Tutorial Steps

In this tutorial, you will learn how to create a masking effect which creates your picture vertically means
bottom to top or horizontally means left to right, and reverse also. Here we are taking the stage dimensions
as 500x300 and the FPS is 24, as shown in the Figure below. To start with the tutorials download the
Check_mask_tutorial.rar file that will provide you with the necessary files to be used in the tutorial.
1. First we will learn how to create different masks for an image. For this we will import our scene
image to the stage. To do that, choose File > Import from the main menubar and choose the
downloaded images and import them on stage.

2. Next, set the stage size equal to the width and height of the images and convert all the images to
a movieclip simultaneously and name them as img1, img2, and img3 respectively, as shown in
Figure below.

3. Select the image and convert it to the movie-clip symbol by the name as pic1. Again convert pic1
symbol to movie-clip symbol using the name as Masking1. We are taking movie-clip symbol only
because to use some filters effect on the image to get more powerful effect. See the reference
image below:
4. Next step is to create a classic tween to give an simple zoom out animation effect. Open the Flash
Timeline, give the layer name a pic1. Press F6 on the frame 15 to insert a new key frame and
convert frames to classic tween. Now give the ease value to 100% to get smooth zoom effect from
fast to slow animation effect.

See the reference image below:

5. Click on the frame 1, go to the modify menu > select transform > select scale and rotate. Set the
scale value to 120%.

Open the Properties Panel>Color Effect> set alpha to 0%. See the reference image below:
6. Now, It’s time to create a mask shapes. We will create a simple rectangle shape. Make sure that
how many pieces we need. The stage dimension is 500x300 and we have to cover complete stage
by placing mask shapes. Number of mask shapes will create more beautiful and impactful effect.
Here we will create 12 rectangle boxes. That is why the width of the boxes will be 125px to cover the
stage or image width and the height will be 100px. So that the box dimensions are 125x100px.

See the reference image below:

7. Now, Distribute all 12 rectangle shapes to different layers (Select all shapes>Right
click>distribute to layers). See the reference image below:

See the reference image below:

 |

8. Now we got 12 shapes layer, these all are mask shape. Then insert 1 layer below each shape
layer. See the reference image below:

9. We will copy the same image animation. To copy frames, Select all Frames > Right Click on the
frames > Select Copy frames. See the reference image below:
10. Paste copied frames to each blank layer or to copy layer, select the tween layer > press alt key +
Drag on to the blank layer.

Then mask each layer, Select a shape layer > Right click > Select Mask.

Now, To create the effect of image appearance in parts. We will give some frames space after each
mask. As of now we are taking 5 frames gap. See the reference image below:
11. Publish your file and watch the effect. Currently, we will find image parts are appearing but it is not
building the complete image. To solve this problem we will insert frames on the animation end. See
the reference image below:

12. Here we need to stop the animation at the end as the complete image will be visible. Insert a new
layer on the top of the all layers and insert a new key frame at the end of the animation, go to the
action panel and give action: stop();
See the reference image below:
 Now we have created a 70 frames animation effect. To give pause to the image, we can insert more
frames according to the choice. See the reference image below:

13. Now, we want to jump to the next image using the same effects. Copy the Masking1 movie-clip and
paste it to the new layer names. Select the Masking1 symbol > right click > duplicate symbol
named as Masking2. The same procedure can be applied for Masking3 or further more images.

14. Edit the Masking2 symbol. On the first frame, Right click on the image and change to duplicate
image named as pic2. Edit pic2 symbol and replace the image from the library.

15. Select frames > Press alt key > Drag frames to other animation layer to replace the frames.
Apply the same procedure to the next step as given in the reference image below.

16. Apply the same procedure to the Masking3 and further Maskings.

17. Go to the main timeline put All 3 masking’s to the 3 different layers with the gap of 70 frames. 70
frames gap is to play the masking animation and 20 frames gap is to pause the image for some time.
Flash Ripple Effect

This tutorial will teach you how to create a simple Ripple effect in Flash MX 2004. The .fla file also
included at the end of the tutorial.
Please note:
1. You need to have Flash Player 7.0 installed to view the Flash animation.
2. Flash MX 2004 or higher must be installed in your system to download the .fla file.

STEPS TO FOLLOW

Create a Graphic Symbol.

 Import an image to your work area upon which you would like to create ripple effect.
 Press F8, to convert this image to a symbol.
 Name this Symbol "girl_gr" and choose graphic behavior. Press OK.
 Name this Layer "bg".
 Select girl_gr and choose Alpha 99% from color list box in your property window.

Create a Movie clip.

 Press Ctrl+F8, to create Ripple movie clip.

 Name this symbol "ripple_mc" and choose Movie clip behavior. Press OK.
 Drag girl_gr to your working area from Library (ctrl+L).


Select girl_gr and choose Alpha 0% from color list box in your property window.

 Insert Keyframe (F6) into the 5th frame.

 Remaining on the 5th frame, Select girl_gr and choose Alpha 99% from color list box in your
property window.
 Now select 1st frame, choose Motion Tween from Tween list box in your property window.
 Insert Keyframe into 15th frame and later to 20th frame.
  Remaining on the 20th frame, Select girl_gr and choose Alpha 0% from color list box in your
property window.
 Select 15th frame, choose Motion Tween from Tween list box in your property window.
 Insert a new layer above this layer, call it "Layer 2".
 Select frame 1 of Layer 2 and draw a borderless square or rectangle depending on the type
of ripple effect you want.
In the above demonstration, I have used rectangle with 15 pix as its height.
 Place this vector wherever you want the ripple to begin. Make sure that the vector belongs
only to layer 2.
 Insert Keyframe into the 20th frame of Layer 2.
 Place the vector wherever you want the ripple to end or ebb.
In the above demonstration, I have placed it right at the bottom and reduced the height to 5
pix.
 Select 1st frame, choose Shape Tween from Tween list box in your property window.
 Right click on Layer 2 and select Mask.
 Save (ctrl+S). Make it a habit to save your work after each step you do.

Insert Ripple Movie Clip onto Scene 1

1. Now go back to Scene 1.

2. Insert a new layer above bg layer and call it ripple1.
3. Insert new Keyframe (F6) into the 10th frame of ripple1 layer.
4. With 10th frame of ripple1 layer selected, Drag ripple_mc movie clip onto the working area.
Place it appropriate to girl_gr. Make sure that this movie clip is placed exactly where you had
placed your square or rectangular vector in ripple_mc Movie clip.
5. Insert frame (F5) into the 30th frame of ripple1 layer. This is just to make sure that the ripple
_mc runs only for 20 frame.
6. Insert another new layer above ripple1 layer and call it ripple2
7. Insert Keyframe into the 20th frame of ripple2 layer.
8. With 20th frame of ripple2 layer selected, Drag ripple_mc movie clip onto the working area.
Place it appropriate to girl_gr just the way you did in step 4.
 9. Insert frame (F5) into the 40th frame of ripple1 layer. This is just to make sure that the ripple
_mc runs only for 20 frame.
10. Insert frame (F5) into the 40th frame of bg layer.

Here you go!! Your movie is ready. Press Ctrl+Enter to view your movie. Wasn't it simple.

Okay now few things to Note - In the above demonstration I have created a subtle ripple effect. If
you want the ripples to be more prominent, you can add few more layers of ripple_mc movie clip and
reduce the Keyframe differences between layers. Like in the tutorial above, ripples appear every 10
frames. You can reduce this period and make it appear every 5 frames, which would make the ripple
effect more prominent.

Bouncing Effect in Flash

This tutorial will teach you how to create a bouncing effect animation using Motion Tween and
Shape Tween in Flash MX 2004. The .fla download file is included at the end of the tutorial.
Please note:
1. You need to have Flash Player 7.0 installed to view the Flash animation.
2. Flash MX 2004 or higher must be installed in your system to download the .fla file.

In the demonstration, the bouncing heart animation is created using motion tween and the shadow
effect using shape tween.

TO CREATE MOTION TWEEN

Steps to Follow :

Create a Symbol

 First draw an object for Motion Tween.

Like in the above demonstration I used heart.
 Select the object you have drawn and press F8 to convert this object to a Symbol.
  In the Symbol window which appears now. Name this object heart_mc, choose Movie clip
behavior and bottom center square for registration. Press OK.

Create a Motion Tween

 Double click on the Layer and type "Heart".

 Select Frame 30 and press F6 to insert a keyframe.
 Select Frame 15 and press F6 to add another keyframe.
 With the playhead still on Frame 15, hold the Shift key to move the heart_mc in a straight
line, and drag the heart_mc up.
 Select any frame between Frames 2 and 14 and select Motion from the tween pop-up
menu in the Property inspector.
 Select any frame between Frames 16 and 29 and select Motion from the tween pop-up
menu in the Property inspector.
 Press Ctrl+S to save your changes.

Create a Shape Tween

 Insert a new Layer and call it "Shadow".

 Select the first frame in the Shadow Layer, draw borderless shadow relevant to your
Symbol.
 If your Color Mixture Window is not open, press Shift+F9 to open it.
 Select Eyedropper tool from your Tool box. Click it on your shadow. Now go to Color
Mixture Window and type 25% for Alpha value.
 

 Select Frame 30 and press F6 to insert a keyframe, then select Frame 15 and press F6 to
insert a keyframe.
 With the playhead on Frame 15, select the Free Transform tool. Slightly reduce the size
of the Shadow.
 With Frame 15 still selected, select the Eyedropper tool in the toolbar, and then click on
your shadow object. Now go to Color Mixture Window and change Alpha value to 10%.
 Select any frame between Frames 2 and 14 on the Shadow layer. In the Property
inspector, select Shape from the Tween pop-up menu.
 Select any frame between Frames 16 and 29 on the Shadow layer. In the Property
inspector, select Shape from the Tween pop-up menu.

Now its time for Final touch up

 Select Frame 1 of the Heart layer. Press F6 to add a keyframe. A new keyframe is added,
and the playhead moves to Frame 2.
 Go back to frame 1, select the Free Transform tool from your toolbox.
 Select the transformation center point (the small circle near the center of the movie clip)
and drag it to the bottom of the heart. On the Stage, drag the upper middle transform
handle down to slightly compress the heart shape.
  Right-click Frame 1 of the heart layer and select Copy Frames from the context menu. Go
to 29th frame and press F8 to insert a new keyframe. Right-click 29th frame and choose
Paste Frame from the context menu.
 Click on the Stage, away from any objects. Type "28" in the Frame Rate text box of your
Property inspector window.
 On the heart layer, select any frame between Frames 2 and 14. Then in the Property
inspector, in the Ease text box, type 100. Similarly select any frame between Frames 16
and 29 in the same layer, then go back to Property inspector window and type -100 in the
Ease text box. Do the same thing to the Shadow layer.

Press Ctrl+Enter to view your animation.

Peeling Sticker Effect in Flash

Here we are taking the stage dimensions as 300x400 and the FPS is 24, as shown in the Figure
below. To start with the tutorials download the source.rar file that will provide you with the
necessary files to be used in the tutorial.
1. First import the downloaded used images from the source. To do that, Go to the File menu
>Select Import > Select Import to Library. See the reference image below.

2. Before starting we already have layer 1, now name the layer as sticker front. Drag the
front_Sticker_img from the library on to the stage and align it to the center of the stage. Then
Convert the image to movie clip. To do that, Select the image > Right click > Select the Convert
to Symbol > Select Movie Clip and Name the symbol as sticker front. See the reference image
below.

3. Insert a new layer and name it as sticker back. Drag the back_Sticker_img from the library on to
the stage and align it to the center of the stage. Then Convert the image to movie clip. To do that,
Select the image > Right click > Select the Convert to Symbol > Select Movie Clip and Name
the symbol as sticker back. See the reference image below.
4. Now select the sticker back, and then flip it vertical. To do that, Go the Modify menu > Select
Transform > Select Flip Vertical. See the reference image below.

Now apply skew on it. To do that, Open the Transform panel from the window menu. Select Skew
and set value to 162 degree and -18 degree. See the reference image below.
Select the sticker back symbol, and position it to the top outside of the stage. Place the image
according to the given reference image below.

5. Now insert a new layer with name as shadow. Create a shape same as green outline given in
the reference image in below.

6. Now insert a new layer with name as mask. Create a box shape on the top of the sticker front
image as given in the reference image in below.
7. Now select frame 35 of all layers and Press F5 to insert new frame. See the reference image
below.

Now select the sticker back on frame 35 and Press F6 to insert a key frame. Then change the
position of the image to the bottom as given in the reference image below.
Now select any frame between frame 1 and frame 35, then Right click > Select Create Motion
Tween.

8. Now go to the shadow layer. Open the color panel from the window menu. Now select the shape
and select the liner gradient from the color panel as shown in the reference image below.

Now select the white color bucket labeled as 1 in the reference image. Then choose black color,
refer label 2 in the given reference image below, and set alpha to 0%. See the reference image
below.
9. Take the Gradient Transform Tool from the tool bar. See the reference image below.

10. Select the shape using Gradient Transform Tool, then hold down the small circle and rotate it
to 90 degree angle. See the reference image on the left.

11. Hold down the Small Square and drag to up. Do not cross the center point. See the reference
image on the Center.

12. And hold down the center of the gradient and drag to the bottom exactly as given in the
reference image on the Right.
13. Select frame 35 of shadow layer and Press F6 to insert a key frame. Select the shape using
arrow tool from the toolbar and move the shape to the bottom exactly as given in the reference
image below.

Take the Gradient Transform Tool from the tool bar. See the reference image below.

Hold down the center of the gradient and drag to the top of the shape exactly as given in the
reference image on the Right.
14. Now select any frame between frame 1 and frame 35, then Right click > Select Create Shape
Tween. See the reference image below.

15. Go to the mask layer and Select frame 35 on the same layer and Press F6 to insert a key frame.
Move the mask shape to the bottom to cover the sticker front image complete. Do it exactly as given
in the reference image below.

Select any frame between frame 1 and frame 35, then Right click > Select Create Shape Tween.
16. Now we will apply mask. To do that, Right Click on the mask layer > Select Mask. See the
reference image below.

Now select the sticker front and sticker back layer by pressing shift key. Then Drag them little up and
left side over the shadow layer. It will mask you other layers also. See the reference image below.

17. Select frame 35 on the all layers and Press F6 to insert a key frame. Again Select frame 85 on
the all layers and Press F6 to insert a keyGo to the frame 1, and Select the key frame of three layers
except of sticker front layer, then Right click > Select Copy Frames. See the reference image
below.
Go to the frame 50, and Press F6 key to insert key frame on all layers.

Go to the frame 85, Press F6 key to insert key frame on all layers. Then Select the key frame of
three layers except of sticker front layer, then Right click > Select Paste Frames. See the
reference image below.

18. At last apply shape tween and motion tween on the layers as given in the reference image
below.

Publish the file and see the effect as shown in the Figure below.