Russell Chun

One of the most important concepts in interactivity is the idea of mapping, or translating, the property of one object to the property of another. Nearly all interfaces are based on this principle: In scrollbars, the vertical position (y-property) of a slider maps directly to the vertical position (y-property) of a block of text. In video controls, the horizontal position (x-property) of the scrubber maps directly to the time position of a video (the parameter in the FLVPlayback.seek() method). In volume controls, the rotation of a dial maps directly to the volume property of a sound (SoundTransform.volume).

In this simple example, you’ll see how the y-position of the cursor can map to the horizontal and vertical scaling of an image. When you map one property to another, consider the following:

1. Listen for the MOUSE_MOVE or ENTER_FRAME event

You want to provide immediate visual translation based on your viewer’s input. As your viewer moves their mouse over the controls, they should receive visual/auditory feedback. So, use the MOUSE_MOVE event or the ENTER_FRAME event to listen for the different changes in mouse position. The MOUSE_MOVE event fires whenever the mouse moves. The ENTER_FRAME event fires constantly at the frame rate of your Flash movie (so if your movie is set at 30 frames per second, the ENTER_FRAME event fires 30 times a second, even if you only have a single frame on your timeline).

2. Keep track of the mouseX and mouseY properties

The mouseX and mouseY property represents the horizontal and vertical position of the mouse cursor. As the user moves their mouse, the MOUSE_MOVE or ENTER_FRAME event gets triggered, and you can track the changing values of mouseX and mouseY.

3. Translate the changing values of mouseX and mouseY to a range of values appropriate for another set of properties

Do some algebraic manipulation to map the mouseX and/or mouseY values to a range that’s acceptable to your target property. For example, if you want the mouseX or mouseY value to map to the volume of a sound, you’ll want to generate a range of values from 0 (no volume) to 1 (full volume).

Look at this example and the AS3 code that generates the interactivity:

scale_mc.buttonMode=true;
bar_mc.buttonMode=true;

scale_mc.addEventListener(MouseEvent.MOUSE_MOVE, scalemap);
function scalemap(e:MouseEvent):void{
 map_mc.scaleX=.5+(mouseY-scale_mc.y)/scale_mc.height
 map_mc.scaleY=map_mc.scaleX

 bar_mc.y=mouseY
}

In this example, the y-position of the cursor changes the properties scaleX and scaleY. How is this done? First, the position of the cursor is mouseY. We subtract the position of the scale_mc movie clip, so the resulting value ranges from 0 to the height of the scale_mc movie clip. Dividing by the height results in a range from 0 to 1. We add .5 to this so the map doesn’t actually get so small that it disappears. So the final range is from .5 to 1.5.

The last line in the function simply moves the black bar to the same y-position as the mouse cursor to serve as a marker. That is also a mapping, but a direct one, with no algebraic manipulation needed.