Masking in Flash: Step by Step Animation Tutorial with Images

Knoji reviews products and up-and-coming brands we think you'll love. In certain cases, we may receive a commission from brands mentioned in our guides. Learn more.
A step by step tutorial for masking in Flash. One can create surreal worlds, make objects dance to life and twist the fabric of creation to his own taste.

With an expertise in Adobe Flash, one can play and fiddle with creativity second only to God. One can create surreal worlds, make objects dance to life and twist the fabric of creation to his own taste. Adobe Flash is the staple of designers, animators, advertisers to a whole host of other professions. Most of us walk blind in this animated world, unaware that we are surrounded by Flash. Everything that has got an element of digital content, starting from the web pages to a music video, to an advertisement to cartoons or to the spellbinding special effects in movies, we live in a world of Flash.

Masking happens to be one of the most useful effects you can achieve using Adobe Flash. An elementary concept, it can be used in a variety of ways to achieve exquisite results. Basically masking is the process of revealing a chosen part of the background below. Spectacular results such as spotlight effects, ripple effect and fading effects are brought about by this procedure used according to requirement. The whole process involves mere twelve steps to master and the following steps illustrate how. Here we have taken to a suitable photo to demonstrate the masking effect.

Step 1: First select the image you want to work on, by importing it from the menu bar File->Import->Import to Stage (Ctrl+R) to import your image to the stage. You can also drag and drop the image to your stage to get the result.

Step 2: Rename this layer in the timeline to ‘BackGround’ for convenience.

Step 3 : Select Insert->Timeline->Layer to insert a new layer. You can also click on the button in the bottom left of the timeline as shown in fig. & rename this layer to ‘Mask’.

Step 4: In the Mask layer select the ‘Oval Tool’ (O) from the Toolbar & draw a circle in the stage.

Step 5: Select the Selection Tool from the toolbar (V) and drag the circle to the starting point of the motion upon your own choice.

Step 6: Right Click on the circle and select ‘Convert to Symbol’ (F8) to convert the circle to a symbol. In the symbol window select ‘Movie Clip’ as Type and rename it to Mask Circle. [This step is necessary because all animations and tweens can only be performed on symbols.

Step 7: After this, Right click on the circle and select ‘Create Motion Tween’. You can see certain number of frames in the timeline getting Blue in colour. The number is exactly equal to the frame rate of your flash, thus this allows us animation of precisely 1 second.

Step 8: Now drag the circle to the end point of your animation. You can see a line appearing in your stage with dots on it. The dots represent the position of the circle in each frame. You can change the path of the circle from a straight line to any other path you like by dragging the dots to various points. You can also add more curves to your path by selecting different frames in the timeline and then dragging the circle to the required place. Play around with it for a while and you will easily get the hang of it.

Step 9: After doing this, drag the edge of the Blue area in the timeline to the required frame so that you can lengthen the animation to desired choice. I have dragged it to frame no. 70. Notice the small diamonds, created in the timeline frames due to changing the paths, getting evenly spaced.

Step 10: After this process is over, go to the BackGround layer and go to the end frame. Right click on the end frame and select Insert Frame (F5) to get the image present throughout the timeline.

Step 11: Now Right click on the Mask layer and select ‘Mask’ to put the masking effect.

Step 12: Select Control->Test Movie (Ctrl+Enter) to see the desired result.

Thus, in just twelve steps we have managed to demonstrate the most basic form of masking. The incredible range of applications that Flash offers makes the masking effect putty in the hands of an expert to mould it to any use that his imagination offers. With Adobe Flash the height of your creativity is the limit and then best part – ‘You can always go beyond your limits.’


Learn how to motion tween in the same manner. Read the complete tutorial here

A virus is on the prowl, beware Yahoo and Skype users. Read about the threat and how to stay safe here

Photos: Courtesy RashmiRanjan, NIT Rourkela


Anusha Jain
Posted on Jun 13, 2011
Hector M
Posted on Jul 24, 2010
Jessie Agudo
Posted on Jul 24, 2010
Akshaydeep Punj
Posted on Jul 12, 2010