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

First thing we are going to do is create the variable "sliderDrag" and set it to false.  We will use this variable to keep track as to whether our user is dragging our slider or not.  Its a Boolean, not because we will be making soup with it, but because its value will only ever  be true or false

var sliderDrag:Boolean=false;


Now we are going to create our Functions.  There will be three functions in all; "slide" - which will allow our user merely to slide the slider bar back and forth on the slider line, "zoom" - which will change the size of the red box in our zoom tool and the image on or main stage proportionately, and "endDrag"

Lets' start with the slide Function:

function slide(event) {
 var sliderLimits:Rectangle = new Rectangle(zTool.sliderLine.x,zTool.slider.y,zTool.sliderLine.width,0);
 zTool.slider.startDrag(false, sliderLimits);
 sliderDrag=true;
}

zTool.slider.addEventListener(MouseEvent.MOUSE_DOWN, slide);


The first line of this code creates a function called "slide" and designates it as an event triggered function. 

The second line is setting a variable that when called upon will draw a rectangle called sliderLimits whose x position is the same as our slider line, y is the same as our slider, width is 95, and height is 0.  This rectangle will be used to set limits on how far our user can drag the slider.  Those variable translate to this -(starting x limit or maximum left position , starting y limit or top limit, maximum right limit, and maximum bottom limit)   Basically we don't want the user to drag our slider up or down (so its y  or top and bottom limits are set to the sliders initial y position with "0" pixels up or down-and we don't want them to be able to drag it further left or right than the edges of our slider line so we set its limits from the x position of the slider line to the end of the slider line or its width. 

The next line merely starts the drag of our slider (zTool.slider) and set its limits to the rectangle mentioned above.  (in AS 2 we could have just put the limits in directly here but AS 3 doesn't like that - too many variables it complains, so we drew a rectangle and just called that single variable.  Then we set our sliderDrag Variable to true - we will reference that later.

The Final line in this code adds an event listener to out slider so that when the user clicks on it, it calls this function.

Ok now we have to let flash no when to end this drag:

function endDrag(event) {
 zTool.slider.stopDrag();
 sliderDrag=false;
}

zTool.slider.addEventListener(MouseEvent.CLICK, endDrag);
zTool.slider.addEventListener(MouseEvent.ROLL_OUT, endDrag);


Notice we that we included this function on both "CLICK" - which is basically onRelease from AS 2, and ROLL_OUT.    This is just so if our user drags too far before releasing it will still call the stopDrag();  instead of having our slider slide back and forth until they click on it again.

Go ahead and test your movie.  You will notice that our slider now slides back and forth but nothing else.

Ok now let’s get it to actually do something!

We are basically going to tell flash to measure the distance our user leaves the slider from the starting point, and turn that number in to a variable called redBoxScale which we will use to resize our little red box in the zoom tool.  We want it so that the farther along the sliderLine our user drags, the smaller our box becomes, indicating that they are zooming in on out main image.   There is one small problem with this though.  Our sliderLine is 100 pixels long and if we use 100 pixels as that scale factor, well, our box will be scaled down to zero and thus invisible.  On the other hand if we zoom back out to 0 we might actually see the edges of our images and that would just be ugly!!!  So we are going to set some conditions, grounding our redBoxScale to a number between 1 and 95 instead of 0-100.  

Finally we are going to use the new size of our red box in proportion to the image in our zoom tool to create a new variable called scaleFactor.  We will use this variable to resize our image on the main stage.

Let’s do it!

function zoom(event) {
 if (sliderDrag==true) {
  var redBoxScale = (zTool.slider.x-zTool.sliderLine.x);
  if (redBoxScale>95) {
   redBoxScale=95;
  }
  if (redBoxScale<1) {
   redBoxScale=1;
  }
  this.zTool.targetArea.scaleX=(redBoxScale-100)/100;
  this.zTool.targetArea.scaleY=(redBoxScale-100)/100; 
var scaleFactor = zTool.image.width/zTool.targetArea.width;
  image.width = viewArea.width* scaleFactor;
  image.height = viewArea.height* scaleFactor;
 }
}
zTool.slider.addEventListener(MouseEvent.MOUSE_MOVE, zoom);



That’s it!  our scale portion of the navigator tool is now built. 

Stay tuned for lesson 2 where we ad the functionality that allows our use to navigate around the image by dragging the small red box.