tutorial_checkboard using masking

7/29/2019 Tutorial_checkboard Using Masking

1/8

Tutorial: Creating checkboard transition effect using masking techniques.

1. Start with changing the stage dimensions as 500x300 and the FPS is 24, see figurebelow:

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

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

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


2/8

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

6. Click on the frame 1, go to the modify menu > select transform > select scale and rotate. Set

the scale value to 120%.


3/8

Open the Properties Panel>Color Effect> set alpha to 0%. See the reference image below:

7. Now, Its 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.



4/8

8. Now, Distribute all 12 rectangle shapes to different layers (Select all shapes>Right

click>distribute to layers). See the reference image below:


|

9. Now we got 12 shapes layer, these all are mask shape. Then insert 1 layer below each shape

layer. See the reference image below:

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


5/8

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


6/8

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:

12. 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 animationend. See the reference image below:

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


7/8

go to the action panel and give action: stop();


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:

14. 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 forMasking3 or further more

images.

15. Edit the Masking2 symbol. On the first frame, Right click on the image and change to duplicate

image named as pic2. Edit pic2symbol and replace the image from the library.

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

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


8/8

18. Go to the main timeline put All 3 maskings 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.

tutorial_checkboard using masking

Documents