Making a zoomer just like navigator in photoshop

Question

Hi all,
         I am stuck in last few days to make a zoomer application. I am not getting any help on google also.
         it is just like navigator in photoshop . example of this application Link given below.
         http://www.auktionsverket.se/dbk/rdbk_oversikt.asp?d=2010-06-04&at=k&sp=en&bm=E006&id=2855 &snr=0
         Click on any image, then one popup window will open, then click on "zoon in" buttton then flash application will open that is the exact example
         which I want to make.
         I am not getting any help from anywhere And I never made any application of this type But I have to do it.
         So please help me , any idea , any code, any concept, any example  any thing whatever you have.  please.
       THANK YOU .

Answer 1

Thank You  Deepanjan for replying me. It is really very helpfull for me .
I have done till getting current position of navigator in percent Because I wanted to do it on percent based calculation.
Because size of the Big  image can be  resized at any time. I have placed both images without code (manually) and made the  navigator dragable within the small image boundary and scaling the Big image proportionately according to zooming
I am also scalling down navigator according  to the Big image scaling UP AND getting current position of navigator in percent, percent is correct.
Because it is showing 0-100, everything is correct    Now My problem in how to position Big  image based on percent (which is gotten from the navigator).
Please Remember  Registration Point of ther Both (navigator and Big image) in center.
I am pasting My code here since there is no attachment option present and there's no other way I can show you the code.
==========================================   CODE   ================================================================
package com
    import flash.display.MovieClip;
    import fl.controls.Slider;
    import fl.events.SliderEvent;
    import flash.events.*;
    import flash.geom.Rectangle;
    public class main extends MovieClip
        private var slider:Slider;
        private var isMouseDown:Boolean = new Boolean();
        private var percentX:Number = new Number();
        private var percentY:Number = new Number();
        private var imagePercentX:Number = new Number();
        private var imagePercentY:Number = new Number();
        private var stageWidth:Number = new Number(800);
        private var stageHeight:Number = new Number(400);
        private var borderMCWidth:Number = new Number()
        private var borderMCHeight:Number = new Number();
        private var ration:Number = new Number();
        public function main ()
            trace(" it is main calss ");
            borderMCWidth = small_mc.border_mc.width;
            borderMCHeight = small_mc.border_mc.height;
            sp.source = big_mc;
            big_mc.x = stageWidth/2;
            big_mc.y = stageHeight/2;
            ration = stageHeight/stageWidth;
            addSlider();
            init();
            small_mc.border_mc.alpha = 0;
            stage.addEventListener(MouseEvent.MOUSE_MOVE,MouseMoveing);
            plush_btn.addEventListener(MouseEvent.CLICK,plushBtnClicked);
            minush_btn.addEventListener(MouseEvent.CLICK,minushBtnClicked);
        private function plushBtnClicked(e:MouseEvent)
            big_mc.scaleX += 0.1;
            big_mc.scaleY += 0.1;
            if(big_mc.width > stageWidth || big_mc.height > stageHeight)
                small_mc.border_mc.alpha = 1;
                imagePercentX = (stageWidth/big_mc.width)*100;
                imagePercentY = (stageHeight/big_mc.height)*100;
                small_mc.border_mc.width =  (borderMCWidth*(imagePercentX))/100;
                small_mc.border_mc.height =  small_mc.border_mc.width*ration;
                sp.update();
                trace("imagePercentX :"+imagePercentX);
                trace("imagePercentY :"+imagePercentY);
            else
                small_mc.border_mc.alpha = 0;
        private function minushBtnClicked(e:MouseEvent)
            big_mc.scaleX -= 0.1;
            big_mc.scaleY -= 0.1;
            if(big_mc.width > stageWidth || big_mc.height > stageHeight)
                small_mc.border_mc.alpha = 1;
                imagePercentX = (stageWidth/big_mc.width)*100;
                imagePercentY = (stageHeight/big_mc.height)*100;
                trace("imagePercentX :"+imagePercentX);
                trace("imagePercentY :"+imagePercentY);
                small_mc.border_mc.width =  (borderMCWidth*(imagePercentX))/100;
                small_mc.border_mc.height =  small_mc.border_mc.width*ration;
            else
                small_mc.border_mc.alpha = 0;
        function MouseMoveing(e:MouseEvent)
            if(isMouseDown)
                var numX:Number = new Number();
                var numY:Number = new Number();
                numX = small_mc.border_mc.x+((small_mc.width/2)-(small_mc.border_mc.width/2));
                numY = small_mc.border_mc.y+((small_mc.height/2)-(small_mc.border_mc.height/2));
                var diffX:Number = (small_mc.width-small_mc.border_mc.width);
                var diffY:Number = (small_mc.height-small_mc.border_mc.height);
                percentX = (numX/diffX)*100;
                percentY = (numY/diffY)*100;
                trace("percentX :"+percentX);
                trace("percentY :"+percentY);
                sp.horizontalScrollPosition = (sp.maxHorizontalScrollPosition*percentX)/100;
                sp.verticalScrollPosition = (sp.maxVerticalScrollPosition*percentY)/100;
        private function addSlider()
            slider = new Slider();
            slider.liveDragging = true;
            trace("slider.height :"+slider.height);
            slider.move((stage.stageWidth/2),(stage.stageHeight-20));
            addChild(slider);
            //slider.addEventListener(SliderEvent.CHANGE,sliderCnaged);
            slider.addEventListener(SliderEvent.CHANGE, sliderCnaged);
        private function sliderCnaged(e:SliderEvent)
            trace("slider value :"+e.target.value);
        private function init()
            small_mc.border_mc.buttonMode = true;
            small_mc.border_mc.addEventListener(MouseEvent.MOUSE_DOWN,MouseDown)
            small_mc.border_mc.addEventListener(MouseEvent.MOUSE_UP,MouseUp);
        private function MouseDown(e:MouseEvent)
            isMouseDown = true;
            var rect:Rectangle = new Rectangle(((small_mc.border_mc.width/2)-(small_mc.width/2)),((small_mc.border_mc.height/2 )-(small_mc.height/2)),(small_mc.width-small_mc.border_mc.width),(small_mc.height-small_mc .border_mc.height));
            small_mc.border_mc.startDrag(true,rect);
        private function MouseUp(e:MouseEvent)
            isMouseDown = false;
            small_mc.border_mc.stopDrag();
========================================================================================== ========================
Code is fired from the document calss .
You can get percent in the Bold.
just import a image convert to MovieClip name it "big_mc" (Ragistration point in the center)
drag a scroll pane name it "sp"
for navigator.....
make a MovieClip name it "small_mc" (Ragistration point in the center)
in the "small_mc"  make a ectangle and convert to movieClip name "border_mc" (Ragistration point in the center)
in the "small_mc" in the lower layer keep  image in small size for navigator movement.
My stsageWidth = 800, StageHeight = 400.
In short I Want to position the Big image (in any scale) based on percent gotten from navigator (percentX ,percentY);
Please provide hints to help me to solve .I think the problem is arising due to Registration point  but badly need the a solution.
Thanks again for replying, have a great Day.