Interactive Spot-Light Effect (Masking) Using ActionScript

By Blue_Chi | Flash | Intermediate

It is possible to create the spot-light special effect in Flash using simple timeline masking, which might in fact be much easier than using ActionScript to generate the effect, but that method will not grant you any interactive control over the masked area, which is the main purpose of using ActionScript to generate this effect. You are not required to have any previous knowledge with ActionScript to follow this tutorial as all the commands used are basic beginner codes. This tutorial will take control of the movie clip used as a mask using the simple startDrag method.

Our flash movie will be created using two movie clip symbols; the "mask" mc and the "masked" mc. Our Flash file will run from one frame and will have three layers, one with the mask, the second with the masked object, and the third one will host the script that will run our movie.

Start a new Flash file, set the canvas size to 550x400, the frame rate to 20 fps, and the background colour as white.

Add two more layers to the time line to have a total of three, name them as seen in the diagram below.

Everything is now set for us to add our content, we will use this image down here to test our effect, save it somewhere on your hard drive.


(That's my bilingual keyboard for you!)

Now back in you Flash file, click once on the "Masked Artwork" layer on the timeline, it should get highlighted in blue. Now import the image that you have just saved into the stage.

The image that we have used has been trimmed to fit the canvas we created perfectly. Click on our image to select it. We will now convert the image to a Movie Clip symbol to be able to manipulate it via ActionScript. Once your image is selected go under Modify and select Convert to Symbol. An option panel should pop up, make sure you choose the option Movie Clip. The name that you put here does not matter, put "keyboard_image", click on "OK" once you are done.

We are almost done with our keyboard image, the final stage here is to give our movie clip and instance name so that we can refer to it when writing the code in ActionScript. Using the Properties panel set the instance name of the keyboard movie clip as "masked_mc".

Now that our artwork is ready we will move on to create our mask, click once on the layer named "Mask", use the Oval tool to draw a circle on the canvas, the position and colour of what you draw does not matter, the size is a matter of preference. You may want to hold down "Shift" while you draw your circle to have a perfect circle.

Double click on your circle to select the whole of it (including the outline!), now convert this to a movie clip the same way you did to the keyboard image (Modify>Convert to Symbol). You will then have to use the Properties panel to give your symbol the instance name "myMask_mc".

We are now set to script our movie; select the layer named "ActionScript" then access the ActionScript panel (simply hit F9 on your keyboard or go under Window > Developer Panels > ActionScript).

We are going to use the .setMask method to make our circle play the role of a mask. The name of the layer to which the mask is applied goes first, the name of the mask goes between the brackets. There isn't much to explain about this.

masked_mc.setMask("myMask_mc");

The previous line should do the mask trick, we need to make our mask follow our mouse, we do this by using the .startDrag method. We use this method on the mask and not on the masked layer.

myMask_mc.startDrag(true);

The boolean value "true" is used to lock the mouse to the centre of the mask. You can now test your movie to see the effect in action!

 

Though that should conclude our tutorial, you can make your mask more interesting and interactive in whatever way you wish because you have access to the movie clip that is used as the mask (myMask_mc). I have modified it a little bit and added a couple of lines to create the following. Click the mouse to see what happens to the mask, notice the the movement of the mask is different as well. You will have to explore the movie clip class on your own to realise the unlimited options that you have.

- End of Tutorial.