Image working as a scrollable map? (all 4 directions)

[Jessica M]

Ok, so I got this huge image of a map. I put a Mask over it so it will fit on a small screen. But....

I want users to be able to view the whole map but click on arrow buttons that will transfer them in all 4 directions. I know I can do this with keyframes, showing different parts of them map each stage....

But isn't there a simplier way? Some sort of actionscript code that will tell flash to scroll how many pixels left or right or up or down? And that it will know that the image will stop here so don't scroll more than that?

I'm using Flash CS4. And my document is actioscript 2.0

Thanks

[Nig 13]

Remove your Mask, like you did in Flash. The Mask shape, convert it to a movieclip, and give it an instance name of, mask_mc. The image, convert it to a movieclip, and give it an instance name of, image_mc. Make an arrow button, copy and paste it, so that you have 4 arrows. Give RIGHT-pointing arrow, instance name, btn_r, LEFT-pointing, btn_l, UP-pointing, btn_u, and DOWN-pointing, btn_d. Then, use this code on your Frame:

speed = 10; // change this for how many pixels it should move

image_mc.setMask(mask_mc);

btn_l.onPress = function(){
    b = image_mc.getBounds(_root);
    m = mask_mc.getBounds(_root);
    if(b.xMin < (m.xMin-speed)){
        image_mc._x += speed;
    }
}

btn_r.onPress = function(){
    b = image_mc.getBounds(_root);
    m = mask_mc.getBounds(_root);
    if(b.xMax > (m.xMax+speed)){
        image_mc._x -= speed;
    }
}

btn_u.onPress = function(){
    b = image_mc.getBounds(_root);
    m = mask_mc.getBounds(_root);
    if(b.yMin < (m.yMin-speed)){
        image_mc._y += speed;
    }
}

btn_d.onPress = function(){
    b = image_mc.getBounds(_root);
    m = mask_mc.getBounds(_root);
    if(b.yMax > (m.yMax+speed)){
        image_mc._y -= speed;
    }
}

We set Mask with actionscript, and make a variable to hold the amount of pixels the image should move for every click. On each button, we first find the most LEFT, RIGHT, TOP and BOTTOM pixel point of the image movieclip, and the same for the mask movieclip. Then, if we click RIGHT button, we check if the most RIGHT point for the image movieclip is greater than that of mask movieclips, if it is, then move the image to the right, but if it's not, which means that the image movieclip has reached its limit for the right-side, we then do nothing - this is to prevent the image from moving further when we have reached its most RIGHT-side point, but as you can see, I check if the most RIGHT-side point of the image movieclip, is greater than the mask movieclip's most right-side point PLUS the amount of pixels to be moved (aka the variable speed's value). If I hadn't done this, when reaching the most right-side point, you could see a bit whiteness, that the image had moved a bit more than what it shouldn't, so this is to fix that.

I know, the above explanation is so bad that it makes me cry, but hopefully the code should work. If you can't get it to work, I've made an EXAMPLE FLA FILE

Hope this helps

[Jessica M]

Nig, your example is exactly what I wanted! Thank you very much!!

Now gonna try to apply it on my site's map and let you know how it works out!

When the site is done, I'm gonna put this site and the people who helped me at the credits!

[Jessica M]

Works like a charm!! Excellent!!!!!!

[Nig 13]

Great