Distance-based user interaction is a good way to add another level of smoothness to your website design.

If you use the trigonometry formula for distance (that thing you learned in high school and probably forgotten by now), you can create some cool effects. For my example I’m going to put a black square on the stage, and the further the mouse is from the square the lower the square’s alpha is (you can test it out below). Now that sounds pretty lame, and it is, but with a little creativity this distance formula could be used for all sorts of cool effects. You can check out one of the pieces in my portfolio to see how I used it for adding a little polish to the navigation.

Get Adobe Flash player

The first thing we need to cover is the distance formula. To put it simply, you subtract the x point of the origin from the x point of the destination, and store the difference in a variable. Do the same for the y points, then square both of them. Add the squares together and take the square root of that and you have the distance. That sounds like a mouthful, but when you see it written it’ll look a lot more simple.

Start with a var for the difference between the x points. Subtract the destination x point from the origin x point.

var dx:Number = x1 - x2;


Then do the same for the y points.

var dy:Number = y1 - y2;


Then square them, add them and take their square root. Store that in a final var called dist.

var dist:int = Math.sqrt(dx*dx + dy*dy);


And that’s it. Now let’s rewrite that in the form of a function.

function getDist(x1:Number, y1:Number, x2:Number, y2:Number):Number {
    var dx:Number = x1 - x2;
    var dy:Number = y1 - y2;
    var dist:int = Math.sqrt(dx*dx + dy*dy);
    return dist;
}


Our geDist function works so that you can feed it the x and y of the first point and the x and y of the second, and it’ll return to you the distance in the form of a number. Don’t forget to return the dist value, and don’t forget to datatype the return value as Number as oppose to the usual void.

Now you can take that formula and easily create the example above.

Start by creating the square on the stage, making it a symbol, and giving it an instance name of “box”.

this.addEventListener(Event.ENTER_FRAME, onEnter, false, 0, true);


On the onEnter function use and if statement to tell it when to change alpha. Here you use the getDist function to get the distance and use an if statement to say if the mouse if less than 250 pixels away, transform the alpha to the distance divided by 250. Put that statement in brackets and subtract it from one. Remember the value you get has to be between 0 and 1. Adding the minus 1 at the beginning inverses the results. (0.8 becomes 0.2)

function onEnter(e:Event):void{
    var mouseDist:int = getDist(mouseX, mouseY, box.x, box.y);
    if (mouseDist> 250) {
        box.alpha = 0;
    }else {
        box.alpha = 1- (mouseDist / 250);
    }
}

function getDist(x1:Number, y1:Number, x2:Number, y2:Number):Number {
    var dx:Number = x1 - x2;
    var dy:Number = y1 - y2;
    var dist:int = Math.sqrt(dx*dx + dy*dy);
    return dist;
}