01 December 2008

Making Zoom Tool with Masking in Flash

This quick tutorial will show you how to create simple zoom tool with masking in Flash. Only few minutes and basic Flash knowledge are required. Before we begin, make sure you have some appropriate image to use with zoom tool, something with details, perhaps. I've found this image by arimoore.

Open new Flash document and set some properties. I have used 350 px for width, 250 px for height, #0099FF as background color and frame rate 24. Add two more layers and rename them like this: layer3 - tool, layer2 - mask_layer and layer1 - map.

First we will create some movie clips. You need to import your image into Library. Go to File - Import - Import to library... Now create new movie clip (ctrl + f8 or Insert - New symbol) and name it map_mc and press OK. Drag your image from library to center of the Stage. It doesn't have to be exactly in the center in pixels, but closely enough. Go back to scene 1, you are done with this movie clip.

Two more movie clips are needed as scaling tool. Create new movie clip, name it 'line' and press OK. Draw solid white (or whatever color) line with 50 height, set stroke height to 2, place it vertically in the center of the stage (see example). This one has to be exactly in the center, so make sure you set X:0.0 and Y:-25.0. Name second movie clip 'stool' (scaling tool) and draw some rectangle like shape, approximately 20 px width and 10 px height and place it in center of the stage. Done with movie clips, now on layers.

Lock both tool and mask_layer and select first and only frame of map layer. Drag map_mc from library and place movie clip in the center. While movie clip is selected, name your instance 'map_mc' (imagine that!). Next, lock and hide map layer and unlock mask_layer. Select rectangle tool, add some corner radius (5-10), set stroke color to none and fill color to some light green. Draw a rectangle with right margin larger than left one (we need extra space for zoom tool). Lock all layers, right click on mask_layer and choose mask option. Save your work if you haven't before. You can test your movie if you like to see if masking is working.

Now, actions. Unlock and select first frame of tool layer. Drag line movie clip from the library to the right of the map, name instance 'line'. Drag stool movie clip also and place it near line movie clip. Name stool instance with 'stool' off course! Exact position of stool isn't matter because we will use ActionScript to position it right. Press F9 to open actions panel. First, we will write onLoad function like this:

onLoad = function() {
stool._x = line._x;
stool._y = line._y;

Next we need arrow movement commands. We use keyboard arrows to move our map in all 4 directions by 5 pixels per frame.

onEnterFrame = function() {
if (Key.isDown(Key.RIGHT)) {
map_mc._x -= 5;
else if (Key.isDown(Key.LEFT)) {
map_mc._x += 5;
else if (Key.isDown(Key.UP)) {
map_mc._y += 5;
else if (Key.isDown(Key.DOWN)) {
map_mc._y -= 5;

Finally, last function we need is scale function.

stool.onMouseDown = function () {
var ypos = _ymouse-line._y;
var distance = Math.abs(_xmouse-line._x);

if (distance < 20) {
if(ypos<-10 && ypos>-20) {
this._y = line._y-20;
map_mc._xscale = 50;
map_mc._yscale = 50;
if(ypos<0 && ypos>-10) {
this._y = line._y-10;
map_mc._xscale = 75;
map_mc._yscale = 75;
if(ypos<10 && ypos>0) {
this._y = line._y;
map_mc._xscale = 100;
map_mc._yscale = 100;
if(ypos<20 && ypos>10) {
this._y = line._y+10;
map_mc._xscale = 120;
map_mc._yscale = 120;
if(ypos<30 && ypos>20) {
this._y = line._y+20;
map_mc._xscale = 150;
map_mc._yscale = 150;

This function is easy to understand actually. With ypos variable we make sure only mouse clicks close to line object are detected and with distance we can find out how far mouse is from line center. Based on that distance we create different commands, first one is to move stool movie clip. We use 'this' keyword because MouseDown function is attached to stool movie clip. Second command is actually our zoom tool. We change scale factor for map_mc in a range from 50 to 150 by 25. In this way we get 5 different views, but you can change this to whatever you like. You can easily create drag and drop functionality if you like.

I hope you have enjoyed this tutorial. Share it, use it, abuse it in any way you like.

flash zoom tool live demo

download zoom tool



Daryl James said...

Wow, you have some great little Flash creations on your site, and the step by step is very helpful. Thanks.

flanture said...

thank you for reading my blog!

Farith Rezza said...

Hey there.. do you know how to create search function in flash? for example, searching location on a map. xml maybe? php? javascript? ;)

flanture said...

Hi Farith,

if your data is represented with array you can use my search array functions.

I hope this helps,

seyed sobhan ali Sabet said...

Thanks for helpful and the step by step titorial.

but when i press arrow key for long time, the map is going out of mask screen, how can i fix it?

and sorry, my grammar english is so bad.


template by blogger templates