Erik Liddell

Erik Liddell is an interactive designer based out of Boston MA. He graduated from The School of The Museum of Fine Arts Boston where he focused in Experimental Film and Multi-Media Design.

View all articles by Erik Liddell

Lets start by creating our on Enter Frame Loop where we will include the script for the slider that we just took out.

this.addEventListener(Event.ENTER_FRAME,EnterFrame);
function EnterFrame(event:Event):void {
 
 /// old code we deleted minus the function around it
 var smlRectScale = (zTool.slider.x-zTool.sliderLine.x);
  if (smlRectScale>95) {
   smlRectScale=95;
  }
  if (smlRectScale<1) {
   smlRectScale=1;
  }
  this.zTool.targetArea.scaleX=(smlRectScale-100)/100;
  this.zTool.targetArea.scaleY=(smlRectScale-100)/100;

  var scaleFactor = zTool.image.width/zTool.targetArea.width;
  image.width = viewArea.width* scaleFactor;
  image.height = viewArea.height* scaleFactor;

//*---- we will be coming back to this spot in a bit to ad more to our onEnterFrame loop----*//  

}

This code works just as it did before but instead of being updated when our user drags the slider back and forth, it is constantly being updated

Ok, so now we want to get the drag going on our little red box  or "target area"

Out side of our EnterFrame loop lets create two new functions that start the dragging of our little red box on click and end it on release or roll out. We will be doing this just the same way as we did with the slider bar but with different drag limitations.   Our slider bar we had grounded to its y axis and confined to the beginning and end or our "slider line".  For our little red box we are going to allow it to move up and down on the y axis as well, but be confined to the edges of  the image in our zoom tool.

function reTargetOn(event) {
 var targetLimits:Rectangle = new Rectangle(zTool.image.x-((zTool.image.width-zTool.targetArea.width)/2), 
  zTool.image.y-((zTool.image.height-zTool.targetArea.height)/2), 
    zTool.image.width - zTool.targetArea.width, 
    zTool.image.height - zTool.targetArea.height);
 zTool.targetArea.startDrag(true, targetLimits);
}
zTool.targetArea.addEventListener(MouseEvent.MOUSE_DOWN, reTargetOn);

function endTargetDrag(event) {
 zTool.targetArea.stopDrag();
}
zTool.targetArea.addEventListener(MouseEvent.CLICK, endTargetDrag);
zTool.targetArea.addEventListener(MouseEvent.ROLL_OUT, endTargetDrag);

You will note that we created the limits for this drag much the same way we did for our slider, by creating a variable (this time called  targetLimits instead of sliderLimits).
But the rectangle we drew seems much more complicated doesn't it?

No need to fret, I'll take a moment to explain.
Remember that the rectangle is read like this ( left drag limit, top drag limit, right drag limit, bottom drag limit).

So lets go over these- 
 
Left Limit - The Formula we set for the left limit is the X position of the image in our zoom tool, minus the (difference in width of that image and our rectangle) divided by 2.  We divide by 2 because both of those symbols have a registration point which is centered.  That means their x position is actually centered and not the corner.

Top Limit - same deal as above, but substituting our x position for y position and width for height. 

Right and Bottom - just using the difference in width or height.

Lets test our movie. And discover a slight problem.

Our Drag on the slider should work again changing the size of our main image in proportion.  And, our small red box should be draggable and constrained to the edges of the smaller image in our zoom tool.
 
The problem is, if we zoom in a bit and drag our small red box to any of its' edges, then zoom back out, our red box is now flying out of bounds.

Thats where our onEnterFrame loop is going to be super handy!

Lets go back to our EnterFrame Loop.  and find that spot we commented out:

//*---- we will be coming back to this spot in a bit to ad more to our onEnterFrame loop----*//

var targetLimits:Rectangle = new Rectangle(zTool.image.x-((zTool.image.width-zTool.targetArea.width)/2), 
        zTool.image.y-((zTool.image.height-zTool.targetArea.height)/2), 
    zTool.image.width - zTool.targetArea.width, 
    zTool.image.height - zTool.targetArea.height);
if (zTool.targetArea.x<=targetLimits.x) {
  zTool.targetArea.x=targetLimits.x;
 }
 if (zTool.targetArea.y<=targetLimits.y) {
  zTool.targetArea.y=targetLimits.y;
 }
 if (zTool.targetArea.x>=targetLimits.x+targetLimits.width) {
  zTool.targetArea.x=targetLimits.x+targetLimits.width;
 }
 if (zTool.targetArea.y>=targetLimits.y+targetLimits.height) {
  zTool.targetArea.y=targetLimits.y+targetLimits.height;
 }

image.x= this.viewArea.x -((zTool.targetArea.x - zTool.image.x)*(image.width/zTool.image.width));
 image.y= this.viewArea.y - ((zTool.targetArea.y - zTool.image.y)*(image.width/zTool.image.width));