Advanced Masking Effect

In this lesson, you will see how to apply advanced lighting effect on any picture using the mask. To create this lesson, you don't have to use Action Script code. Using this lesson, you will also learn:

1. How to use Info Panel,
2. How to use Line Tool,
3. How to use Color Mixer Panel to make a gradient,
4. How to use Add Motion Guide options,
5. How to convert any layer into a mask and more

Example:



Step 1

Open Flash, press Ctrl+R (Import to stage) and import any picture in Flash. ( If you want, you can download picture which I have used for this example).



Step 2

Open Library Panel (Ctrl+L), and double click on inserted picture. That will open Bitmap Properties Pannel. In that Panel, Allow Smoothin option must be switched off. See the picture below.




Step 3

Choose Modify > Document (Shortcut key: Ctrl+J) and set the dimensions of background to be equivalent size like picture. (If you don't know what are the dimensions of your picture press Ctrl+I (Info Pannel) and see what the dimensions are ). After that set Frame rate to 30fps (Frames per Second) and click ok





Step 4

Take the Selection Tool (V) and click once on the picture to select it. Then, press F8 key (Convert to Symbol) to convert this picture into a Movie Clip Symbol. See the picture below.




Step 5

Go to the Properties Panel (Ctrl+F3) below the stage and set the x and y to 0. See the picture below.



Step 6

Take the Selection Tool (V) again, select the new made Movie Clip and press Ctrl+C key (Copy). Then, create a new layer above the layer 1 (layer 2), select it and press Ctrl+Shift+V key (Paste in place).



Step 7

Select again layer 2 and press again F8 key, to convert it again into a Movie Clip Symbol. See the picture below.



Step 8

Lock layer 2, Click on the Edit Symbols and choose the name that you have used. I have used win2_mc.



Step 9

For background color set black and click on View – Snapping and check the Snap to Pixel option and uncheck Snap to Objects options. See the picture below.



Step 10

Create a new layer  (Layer2), lock layer 1, take the Line Tool (N) and go to the Properties Panel below the stage. Select red as line color and choose Solid as type of line, with thickness set to 1. See the picture below.




Step 11

Than draw this.



Point 1, represent your drawn line.

Step 12

Take the Selection Tool (V) and select that "drawn line". Then, go to the Properties Panel below the stage and select hairline as type of line. See the picture below.




Step 13

Click on the first frame of layer 2, take the Selection Tool and select that "drawn line". Then press Ctrl+C (Copy), lock layer 2, create a new layer above the layer 2 (layer 3), select it and press Ctrl+Shift+V (Paste in place).



Step 14

Create a new layer above the layer 3 (layer 4), select it and Take the Oval Tool (O). In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For fill color chose white.






Step 15

Then, draw a "circle" about 35x35px. See the picture below.




Step 16

While the circle is still selected, go to the Color Mixer Panel (shortcut key:Shift+F9). Then, set the following options:

1. Click on the paint bucket icon to select the Fill color.
2. Choose Radial as Type.
3. Click on the small color rectangle that is on the left side and set its color to some bright blue. Alpha property set to 70 %
4. Click on the second rectangle and set its color to white , but change its alpha property to 0% (completely transparent).











Step 17

Take the Selection Tool (V), click once on the circle to select it and press F8 key (Convert to Symbol) to convert this circle into a Movie Clip Symbol. See the picture below.



Then, you'll need to get something like this:



Step 18

I know that this step will suprise you a little, but I  will explain why I have done it. Delete now layer 4. I do that, becouse layer 4 is for now useless. In any time  later if we will need a circle that we have created in layer 4, we will drag it from the  library (Ctrl+L) using the "drag and drop" tehnique. Using this method, you're  only removed Movie Clip (½eraser½) from Scene, but if you open your Library (Ctrl+L) you will see that your MC are still in Library.





Step 19

Unlock now layer 2, click on the first frame and press F8 (Convert to symbol) to convert it into a Movie Clip Symobl. See the picture below.



Step 20

Double-click on the movie clip on stage with the Selection tool (V). You should now be inside the movie clip.



Create a new layer above layer 1 (layer 2).



Step 21

Using the "drag and drop" technique move layer 2 below the layer 1. See the picture below.



Step 22

Lock layer 1, click on the first frame of layer 2 and go to the Library Panel (Ctrl+L). Using the "drag and drop"  technique move the "eraser" (Movie Clip - circle) and place it on the start of line. See the picture below. 



Step 23

Right click on layer 2 and choose Add Motion Guide.



Now you get this:



Unlock layer 1, click on the first frame to select red line and press Ctrl+X key (Cut). Then, click on the first frame of Guide layer 2 and press Ctrl+Shift+V (Paste in Place). After that, select layer 1 and delete it.



Click on frame 60 of Guide layer 2 and press F5 key. Go back on the  first frame of layer 2, open the  Properties Panel (Ctrl+F3) and for Tween choose Motion. After that, click on frame 60 of layer 2 and press F6 key (Keyframe). Then, move the "eraser" (Movie Clip that you have deleted in step 20) at the end of line. See the picture below.

Check the picture



Step 24

Click on the first frame of layer 2, select "eraser" (MC), and in Properties Pannel (Ctrl+F3) under color choose alpha, and put it down to 0%.






Click after that on frame 30 of layer 2 and press F6 key. Go to the Properties Panel once again and click on the Properties tab. On the right, you will see the Color menu. Select Alpha in it and put it down to 100%.

Step 25

Go back on the previous scene.



Step 26

Lock layer 2, unlock layer 3, click on the first frame of layer 3 and take the Selection Tool (V). After that, click once on red line to select it, open the Properties Panel (Ctrl+F3)  and set options from picture below.



Step 27

Chose  Modify > Shape > Convert Lines to Fills

Step 28

Right click on layer 3 and choose Mask.





Step 29

If you now test your movie (Ctrl+Enter), you'll need to get something like this:



We're done with the first line. You will do this for all other lines. To complete this animation, Mask Effect, you'll need a lot time and patience.

Good luck!

Download example (684 KB)