Dragging a map image

1

OK so I have been working on this project. I am pretty new to flash but developing a map application with pan and zoom. I decided to improve it slightly by adding in mouse functionality. I have the mouse wheel controlling zoom, and I understand the object.startdrag and stopstopdrag and how to make it work. How ever it moves the entire object, which meeses up the built in buttons that pan around the map.

I am wondering if any of the flash gurus on this site would venture a guess for a solution to making mouse down add a pan function similar to the way button clicks work.


import fl.controls.Slider;
import fl.events.SliderEvent;
import fl.controls.Button;

var measure:Number = 4800;
var measure2:Number = 4800;


var s:Slider = new Slider();
s.move(25,10);
s.liveDragging = false;
s.setSize(550,15);
s.maximum = 5;
s.minimum = 1;
s.tickInterval = 1;
s.addEventListener(SliderEvent.CHANGE, announceChange);
addChild(s);

stage.addEventListener(MouseEvent.MOUSE_WHEEL, zoom);

var uB:Button = new Button();
var dB:Button = new Button();
var lB:Button = new Button();
var rB:Button = new Button();

uB.name = "uB";
dB.name = "dB";
lB.name = "lB";
rB.name = "rB";


uB.label = "UP";
dB.label = "DOWN";
lB.label = "L
E
F
T";
rB.label = "R
I
G
H
T";

uB.width =600;
dB.width =600;
lB.width =22;
rB.width =22;
uB.height = 22;
dB.height = 22;
lB.height = 550;
rB.height = 550;

uB.emphasized = true;
dB.emphasized = true;
lB.emphasized = true;
rB.emphasized = true;

uB.move(0,30);
dB.move(0,608);
lB.move(0,53);
rB.move(578,53);

uB.addEventListener(MouseEvent.CLICK, buttonClick);
dB.addEventListener(MouseEvent.CLICK, buttonClick);
lB.addEventListener(MouseEvent.CLICK, buttonClick);
rB.addEventListener(MouseEvent.CLICK, buttonClick);

addChild(uB);
addChild(dB);
addChild(lB);
addChild(rB);

var picHolder:Sprite;
var picMask:Sprite;

_constructor();

var picMap:map=new map();
picMap.width=550;
picMap.height=550;

picMap.addEventListener(MouseEvent.MOUSE_DOWN, mapDown);
picMap.addEventListener(MouseEvent.MOUSE_UP, mapUp);

addPic(picMap);
s.value = 5;

function mapDown(e:MouseEvent) 
{

    if(s.value <5)
    {
        trace("moving");
    }
    else
    {
        trace("no move");
    }
}
function mapUp(e:MouseEvent) 
{
    trace("release");
}

function addPic(d:DisplayObject):void
{
    while(picHolder.numChildren)picHolder.removeChildAt(0);
    picHolder.addChild(d);
    picMask.graphics.clear();
    picMask.graphics.beginFill(0);
    picMask.graphics.drawRect(0,0,550,550);
}

function _constructor():void 
{
    picHolder=new Sprite();
    picHolder.x = 23
    picHolder.y = 53;
    addChild(picHolder);
    
    picMask=new Sprite();
    picHolder.mask=picMask;
    picMask.x=picHolder.x;
    picMask.y=picHolder.y;
    addChild(picMask);
}

function zoom(e:MouseEvent)
{
    var changed:Boolean = false;
    if(e.delta > 0)
    {
        if(s.value > 0)
        {
         s.value--;
         changed = true;
        }
    }
    else
    {
        if(s.value < 5)
        {
         changed = true;
         s.value++;
        }
    }
    if(changed)
    {
        s.dispatchEvent(new SliderEvent(SliderEvent.CHANGE, s.value,'SliderEventClickTarget.THUMB', 'InteractionInputType.MOUSE'));


    }
}
function announceChange(e:SliderEvent):
void 
{
    if(e.target.value < 5)
    {
        measure2 = 2400 / e.target.value;
        picHolder.height = 4800 / e.target.value;
        picHolder.width = 4800 / e.target.value;
    }
    else
    {
        measure2 = 550;
        picHolder.height = 550;
        picHolder.width = 550;
        picHolder.x = 23;
        picHolder.y = 53;
    }
    if(picHolder.x < (23 - picHolder.width + 550) )
    {
        picHolder.x = 23 - picHolder.width + 550;
    }
    if(picHolder.x > 23)
    {
        picHolder.x = 23;
    }
    if(picHolder.y > 53)
    {
        picHolder.y = 53
    }
    if(picHolder.y < 53 - picHolder.width + 550)
    {
        picHolder.y = 53 - picHolder.width + 550;
    }
        
}
function buttonClick(e:MouseEvent) 
{
    //trace("x: " + picHolder.x + " y: " + picHolder.y +" width: " + picHolder.width +" hright: " + picHolder.height );
    if(measure2 != 550)
    {
        switch (e.target.name)
        {
            case "uB":
                picHolder.y += picHolder.height/30;
            break;
            case "lB":
                picHolder.x += picHolder.width/30;
            break;
            case "dB":
                picHolder.y -= picHolder.height/30;
            break;
            case "rB":
                picHolder.x -= picHolder.width/30;
            break;
        }
    }
    if(picHolder.x < (23 - picHolder.width + 550) )
    {
        picHolder.x = 23 - picHolder.width + 550;
    }
    if(picHolder.x > 23)
    {
        picHolder.x = 23;
    }
    if(picHolder.y > 53)
    {
        picHolder.y = 53
    }
    if(picHolder.y < 53 - picHolder.width + 550)
    {
        picHolder.y = 53 - picHolder.width + 550;
    }
    
}

to preview the app in action:

http://sci.tamucc.edu/~beveritt/WorldMap.html

The site is under construction, but the app should load and work just fine.