Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks Tutorials
& Resources
Photoshop
Tutorials
Web Design
Tutorials & Resources
CSS
Tutorials
CorelDraw
Tutorials
You are here : : Home > Free Resources > Flash Tutorials & Resources > Peeling Sticker Effect   

Flash Tutorials

Basics

Animation & Effects

Actionscript

Creating a Website New!

Miscellaneous

Flash Articles

Free Flash Resources

Other Flash Resources

Peeling Sticker Effect in Flash

In this tutorial, you will learn how to create a paste effect or peeling sticker effect animation using masking in Flash.

Tutorial Details

Program: Flash CS4

Difficulty: All

Estimated Completion Time: 40 hr


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.

10.jpg

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.

11.jpg

Now select any frame between frame 1 and frame 35, then Right click > Select Create Motion Tween.

12.jpg

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.

13.jpg

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.

14.jpg

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

15.jpg

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.

16.jpg

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.

17.jpg

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

18.jpg

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.

19.jpg

14. Now select any frame between frame 1 and frame 35, then Right click > Select Create Shape Tween. See the reference image below.

20.jpg

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.

21.jpg

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.

22.jpg

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.

23.jpg

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.

24.jpg

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.

25.jpg

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

26.jpg

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

final.jpg

Download Source File

Click here to download the source .fla file

Hope you enjoyed this tutorial. We are very keen to hear your comments and feedback so please feel free to leave your comment and share your experiences of creating this kind of animation and what are the other tutorials you would like to see in future.


Now building a website is as easy as 1-2-3!

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.


Looking for high-quality Flash Website Design? Choose from over 6000 templates!

Featured Template
Template # 35419
Type: Joomla 1.6 Template
Price: $65

Flash Photo Galleries