Through the keyhole





Flash has special layers called masks.

You are going to find out how they work by producing the basics of a through the keyhole activity.


Start with a new flash movie and rename the default layer as picture.

Import a suitable image into frame 1 of the layer. You can download an example here and then save it to a suitable folder.

Create a new layer on top of the picture layer and call it keyhole.

Since the picture is not going to be altered you might be advised to lock the layer.

the imported picture

Use the basic rectangle and oval drawing tools to create a small, black keyhole somewhere near the middle of the stage in frame 1 of the keyhole layer.


the keyhole

Double-click on the document icon next to the keyhole layer name to bring up the layer properties dialog.

This is where you will tell flash that you want the layer to act as a mask.

the layer name icon

Click on the mask option and then OK.

You will see that the layers icon has changed to show that its role is now that of a layer.

Repeat the last step with the picture layer but this time select the masked option. The layer is now indented under its mask to show that they are linked.

the masked layer

If you now test the movie, you will see that the only bit of the picture that is visible is the bit under the keyhole.

Now you need to allow the user to move the keyhole to search around to spot things in the picture.


Select the keyhole graphic and convert it to a Movieclip symbol called keyhole.

Open the new symbol's actions pane and enter the following ActionScript to make it draggable.

on (press){

on (release){

When you test the movie now, you can move the keyhole around and find things on the picture or try to guess what the picture is.

You could have the keyhole as a ball that bounces around the picture and challenge your students to guess what the picture is.

The next part of the lesson shows you how the technique could be adapted to produce a sideways scrolling background to a movie or a panoramic view.