Macromedia Flash 8 - Ireland Map, on mouseover dublin, dublin expands

Question

Macromedia Flash 8 Question:

I have a map of Ireland, just a gif, and there are several small buttons representing various point of interest around Ireland, which are scattered across the map. This part works fine.

THE PROBLEM: Dublin is too small to contain all of its points of interest (approx 20).

THE SOLUTION OnMouseOver Dublin, I would like Dublin to expand to perhaps 5 or 6 times its original size, and I would like to be able to have Dublins Points Of Interests now displayed within this larger dublin area, which sits on top of the Ireland map.

OnMouseOut Dublin, this enlarged Dublin region now shrinks back to its original size.

MY QUESTION: How do I implement Dublin??

REQUIREMENTS: 1) The expanded Dublin region shud NOT be clickable, it shud simply be a dublin image on a black background.

2) It must be possible to add additional buttons within this expanded Dublin region.

Any help or assistance greatly appreciated...

Answer 1

you can use that map with zoom : http://www.graphic-flash-sources.com/interactive-flash-map-with-zoom-united-kingdom-ireland/

Answer 2

Assuming that your enlarged Dublin map is a movieClip containing all it's own buttons etc, you could capture the clip's onRollOver event to start zooming, something like this:

// d is an object containing all the variables we need for where to start & finish
var d:Object = { 
 start_x:dublin._x, 
 start_y:dublin._y, 
 start_xscale:dublin._xscale,
 start_yscale:dublin._yscale, 
 end_x:0.5*Stage.width,// change end_x and end_y...
 end_y:0.5*Stage.height,//... to suit your layout
 end_xscale:100,
 end_yscale:100,
 totalSteps:10,// zoom in 10 steps (more steps = slower)
 currentStep:0
 };

//dublin is set to be invisible (but rollOver-able) to start with
dublin._alpha = 0;

//the doStep function does a single stage of the zoom (once per frame)
function doStep(clip):Void {
    var fraction=d.currentStep/d.totalSteps;
    clip._x = d.start_x+(d.end_x-d.start_x)*fraction;
    clip._y = d.start_y+(d.end_y-d.start_y)*fraction;
    clip._xscale = d.start_xscale+(d.end_xscale-d.start_xscale)*fraction;
    clip._yscale = d.start_yscale+(d.end_yscale-d.start_yscale)*fraction;
};

//catch rollOver and rollOut events for the dublin clip:
dublin.onRollOver = function() {
    if (d.currentStep<d.totalSteps) {
        //start growing
        this._alpha=100;
        this.onEnterFrame = function() {
            d.currentStep++;
            doStep(this);
            if (d.currentStep>=d.totalSteps) {
                delete this.onEnterFrame;
            }
        };
    }
};

dublin.onRollOut = function() {
    if (d.currentStep>0) {
        //start shrinking
        this.onEnterFrame = function() {
            d.currentStep--;
            doStep(this);
            if (d.currentStep<=0) {
                delete this.onEnterFrame;
                this._alpha=0;
            }
        };
    }
};

To implement this, do the following:

1. Put an instance of your large-scale map, (instance name = dublin) on the stage, and use the resizing tool to shrink it down so it sits over the location of Dublin on your large-scale map.
2. You can set it's _alpha to (say) 20 for convenience (gets set to 0 at runtime).
3. Paste the code (above) on the timeline of dublin's parent, in a frame where dublin is present (forgive me, I've kind of assumed you're not using AS2 classes to organise your code).
4. There's one drawback to this technique: because we're capturing the onRollOver event with dublin, you may find that any buttons inside it do not respond to rollOvers; they can still be made clickable, however.

Hope this helps.