Internet Cross Logo
Internet Cross your one stop web tutorial website
Search Internet Cross Shop:

Making a moving mask with Macromedia Flash MX

by Diego Park

Movie clips

We want to create a gun scope, ideal for first person shooting games. For this, we need to draw two elements: the scope and the background for the scene. The background can look like the Figure 1.


IMAGE


Figure 1. The background is masked with the movie clip mask.

For the scope, we are going to need two elements: the mask itself (Figure 2) and the scope shown to the player (Figure 3). We need the first movie clip to use the method setMask(). This means that the background is visible only where the mask area is placed. Please notice how the mask itself is not visible; it is a filter for the movie clip masked. We see the masked movie clip (background) exclusively through the mask (mask). The rest of the background -where does not exist intersection between the background and the mask- is not visible for the user.

We have used a circle of 100 by 100 for the scope, although it is resized to 300% in the root.


IMAGE


Figure 2. The mask has got to maintain the same shape as the user scope --in this case a circle. But please note how the shape only matters. The graphical representation of the scope is detailed in another movie clip.



IMAGE


Figure 3. In this movie clip we draw the graphical representation of the scope. In this case, we do not work on the shape but in the in the lines.


Joint

It is time to join the different elements in the root. We have created four layers, one with a different purpose (Figure 4). Please drag the three movie clips that we have created (background, circle and scope) from the Library window (Ctrl+L) to the corresponding layers. For example, place the movie clip circle into the layer mask.

IMAGE


Figure 4. This scene has got a single layer for every movie clip, plus one for ActionScript.

We recommend to first place background, then circle and finally the movie clip scope. Centre these three movie clips to the stage (Ctrl+K). Since we use several overlapped layers, it is useful to lock and unlock and show and hide the different layers.

Then, select the movie clip mask (set to 300% from Transform window, Ctrl+T) and instance it as mask. The instance name is referred in the actionscript layer. Right-click and insert:

onClipEvent(enterFrame)
{
_x=_root._xmouse;
_y=_root._ymouse;
}

What we are doing is to drag the movie clip. It follows the mouse position.

Now select the movie clip scope and write:

onClipEvent(enterFrame)
{
_x=_root._xmouse;
_y=_root._ymouse;
}

Notice how we do not instance this last movie clip, since it is not needed. The code is exactly the same as the movie clip mask. They drag the corresponding movie clip. But although the code is the same, the results are fairly different. First, we need to drag the mask to simulate a gun scope, remembering we are going the see only the portion of the background where the mask is placed. In this case, we are going to see different areas of the background as we move the mask, since it follows the mouse position. The second movie clip, scope, is visible to the user, and it is shown as it was created, which does not happen with the mask. It was created as a white circle, but we see circular portions of the background.

Please select the layer actionscript and right-click on the frame. Select Actions from the menu and insert:

Mouse.hide();
background.setMask(mask);

As you see, we do not need more than two lines to implement the mask. Of course, the first line hides the system mouse cursor, while the second sets the mask: the movie clip mask masks the movie clip background. It means that we are going to see mask-areas of the background.

Please remember to set a relatively high frame rate --30 fps, for example.


Conclusion

We have developed a basic scope for shooting game engines. Of course, it is not the optimal way to implement a gun scope, but it is a realistic approximation. To implement the scope we have used masks.
[Page 1]
Visit our forums to discuss / post your problems.