Example 1 - Simple Masking and the Slider Component

Masking is easy and it allows to create interesting visual effects. In this tutorial, we show several examples involving masking. We begin with simple examples where we use dynamic, programmatic masking to control display of photographs. Our last example shows how masking can be useful in designing mathematical learning objects. As a part of the tutorial, we also show how to use the slider component in Flash CS3. Let's look at our first example. You can download the source file from the link below the Flash movie.


Download the well-commented fla file for the swf displayed above.

The idea of masking is very simple: if a display object A is assigned as a mask to a display object B, then any fill in A serves as a window through which a portion of B is visible. A mask itself is not visible and neither are portions of B outside of the 'window' in A.

In our example, we imported to the Stage a jpeg photograph of a computer lab session during our recent PREP workshop. We converted the photo to a MovieClip, and gave it an instance name 'mcLab'. The dimensions of the clip are 300 by 225 pixels; it is postioned at 35,33. We put on the Stage an instance of the slider component, configured it suitably (a description of that process follows on the next page), and named the slider 'photoSlider'. The following code placed on the first (and the only) frame does the rest. A mask, called photoMask, is a programmatically created Sprite. We draw a rectangle in it whose size and position overlaps exactly with our photo. The slider changes the scaleX property of photoMask making more or less of mcLab visible.

In order to use the slider component, you need an instance of it on the Stage (as in this applet) or at least in the Library. If an instance is only in the Library, you can instantiate a slider at runtime with 'var mySlider:Slider=new Slider();'. In either case, you need a copy of the slider in the Library and you need to import the two classes below. (You place a copy in the Library by openning the Component panel and dragging the slider to the Library.)

import fl.events.SliderEvent;

import fl.controls.Slider;

We create a new Sprite, photoMask, that will serve as a mask for our photograph. We add it to the Display List, and position it. Next, we will draw a rectangle in photoMask that overlaps exactly with the photo. (The jpeg photo was imported to the Stage and converted into a MovieClip with an instance name, mcLab.)

var photoMask:Sprite=new Sprite();





//We are calling the function that draws a rectangle in photoMask.




function drawMask():void {






We are assigning photoMask as a mask to our photograph, mcLab. The only portion of mcLab that is visible is the portion behind the fill in the mask. It would be the whole photo if we didn't adjust the initial horizontal scaling for the mask to 0. (The scaling ranges from 0 to 1, corresponding to 0 to 100 percent.)



The slider, whose property 'value' represents the position of the knob, will change the horizontal scaling of the mask. As the user drags the knob to the right, the scaling increases, making a larger and larger portion of mcLab visible. The target of the event e (when the slider's knob moves) is our slider. e.target.value represents the current position of the knob, 300 is the length of the slider (and the width of the photo).



function sliderChange(e:SliderEvent):void {




On the next page, we show a similar example and explain how to configure the slider component.

Back to Intermediate Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.