Home / Tutorials / Flash / Unlimited Masking Effects using 1 animation in Flash

Unlimited Masking Effects using 1 animation in Flash

Here I’m going to tell you a technique, by using this technique you can make unlimited Masking effects using 1 animation. I bet you never learn this kind of technique, I’ve also uploaded Source FLA files for your convenience. You only have to change one Tween, then your animation would be having different style. So hopefully you will enjoy working on it.

[DOWNLOAD ALL SOURCE FILES]

1. Lets start with a new file and change the size of file according to your all pictures sizes (I’ve taken 560 x 400 px file size with 36 frame per second). We are going to use 5 different pictures and every picture will come after having an effect. Run the command File >> Import >> Import to Library and then select your all picture files which you want to use in Flash.

2. Now we are going to make an animation and we will be using this animation for Masking, so this animation is very important and by having a small change we can make Unlimited different effects of Animations. Run the command Insert >> Symbol or just press F8 Functional key. A box will come asking you the name and Type of symbol, write any name I’ve written single-box and selected Movie Clip from Type list box:

3. Now by using any Shape tool (rectangle, ellipse etc.) draw any object. I’m going to draw a Rectangle of size 40 x 40 px (color does not matter).

4. Now decide how many frames your animation must be having. I’m going to make 50 frames animation. Just click on 50th frame in Timeline and press F5 Key.

5. Right click on 50th frame and select Create Shape Tween (this will be for Adobe CS, for older version, you have to select Shape Tween from Property Panel):

Your frames will look like this:

Keep selecting the last frame and press F6 Key (to make Keyframe):

6. Now click on the First frame and remove some parts of Rectangle like I’ve deleted two corners:

Press <Enter> key to check the animation.

7. Select last frame (50th) and press F9 (to bring Action Panel) and write:

stop();

8. Now run the command Insert >> Symbol and write any name (I’ve written all-boxes) and select Movie Clip from Type:

9. Bring Library by pressing Ctrl+L key and paste animation which you just created (single-box) on stage (by holding its name and dragging it on stage) and align it towards left and top of the stage:

10. Now its time to copy this box to whole area (560x400px, that it covers whole picture). If you are using Flash 8 then you will find Copy to Grid command to copy this box horizontally and vertically, you will get this command at Insert >> Timeline Effects >> Assistants >> Copy to Grid and give 10 in Rows and 14 in Columns and 0 in Horizontal and Vertical space. So it will cover 560 x 400 px area.

If you are using Adobe Flash CS4 then you will not get this command. You have to copy it manually. Like:

11. If you want to run all animations at once then no need to separate these boxes. But if you need to run Horizontally, Vertically or Cornerwise then you have to separate these boxes in separate layers according to your desire. I’ll let you know later how can you change this animation.

12. Now its time to put this animation on the Pictures. Press F8 to take new Movie Clip. Give any name, I’ve given the name Pictures. Now from Library put First picture on stage and align it left and top of the stage. Take New Layer and paste ALL-BOXES movie clip over it, by aligning left and top of the stage. Then take new layer and paste second picture and then take new layer and paste this Movie Clip (all-boxes), so like this take new layers and paste other picture and movie clip alternatively. Like:

13. Now right click on all Movie Clip (Mask) layers one by one and select Mask, so all Movie Clip layers would be converted into Mask. Like:

14. Now its time to plan after how much time next picture would come and stay. As we know that our First box animation was 50 frames, so that mean 50 frames need to come new picture and 50 frames need to go this picture and suppose we need to stop every picture for 100 frames. So that mean we need 200 frames for every layer. So goto 200 frame and select all 200 frames for every layer and press F5 key. like:

15. Now we are going to manage all these pictures, like first picture need 50 frames to come and 100 frames to stay and then 50 frames need to second picture to come and in the mean time first picture should remain visible at that time. So click on Picture 2 layer name and then Hold Shift key and click on Movie Clip (Mask) layer just above it. It will select all frames of these two layers:

Now move all frames towards right, just behind 50 frames of first layer, and move all other layers like this:

16. Now paste this movie clip (Pictures) on Main Stage and press Ctrl+Enter. It will look good and fine, but it will be having a problem and i.e. our this animation should run forever, mean when this animation will end, it will display white color of stage in the end to start it from the beginning. We want to remove this error. For this purpose double click on Pictures movie clip to edit it. Just take a new layer behind all layers and past Last picture into it, but that picture must be having only 50 frames. Like:

17. After doing this one error still remain and i.e. the last picture will be visible 50 frames more. Because those 50 frames we have just by pasting the above picture. So delete last 50 frames of Picture 5 and its masking layer. (mean Picture5 and its masking layer must be having 150 frames instead of 200 frames as all other pictures are having, so here you will get the final animation:

Here is another effect, i’ve just changed the First image of single-box movie clip:

Here is another animation after slight change:


Here is another animation by using same FLA:


[DOWNLOAD ALL SOURCE FILES]

About Wijdan Rohail

A professional Web/Graphic Designer, working as Freelancer since 2000. Designing is my passion, blogging is my hobby.

Check Also

Dancing Stars in Flash without ActionScript

Dancing Stars in Flash without ActionScript

In this Flash tutorial you will learn about Movie Clips, working on Guided Layers, use …

8 comments

  1. thnsk for the work but Cant open in flash 8 what can i do..

  2. thanks it helpfull

  3. wonderfull tutorial, iam looking for this type of masking tutorial for many days. please help me how to make the second masking effect right below the tutorial. But i dont how to give grid in all-boxes for that masking effect please help me now iam doing a project for Hospital so i will keep this masking on that.

    • That is why we have included all source files. Just see [DOWNLOAD ALL SOURCE FILES] this link below the animation, download it, unzip it and you will get Source FLA file, so you can open and modify it in Flash.

  4. sorry i made spelling mistake
    masking tutorials not making tutorials 🙂

  5. Awesome tutorial thanks so much for your very good useful tutorial.
    I learn so much form you
    really this types of making tutorials are very rare in internet but you done is so nicely
    Keep doing good work
    God bless you 🙂

  6. Very useful tutorial..I will implement it..

Leave a Reply

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

%d bloggers like this: