Browse > Home / ActionScript, Tutorials / Mouse Proximity Blur Tutorial

| Subcribe via RSS

Mouse Proximity Blur Tutorial

March 31st, 2009 Posted in ActionScript, Tutorials

How to make a menu or icons with a proximity blur effect

A mouse proximity blur is an effect which means the amount of blur on the movie clip is dependent on the distance between the movie clip and the mouse cursor.

In this tutorial, I will take you through a very basic and easy tutorial on how to set up a simple iconic menu and walk you through the ActionScript (AS3) to add this effect on the menu. I first created the mouse proximity blur menu as an experiment in my last post here. This is what the finished product will look like:

—————————————————————————————————————————————

First import your images into your library. Do this by clicking File > Import > Import to Library… Then highlight all the images you want to bring in for your menu and click Open. You will then see them in your library.

Now we want to create a new movie clip called Ball. You can already see it in my library in the image to the left. Do this by clicking Insert > New Symbol… Now the Create New Symbol dialog box will pop up.









































































You want to call it Ball and make sure it is of type MovieClip. You also want to export it for ActionScript and for now we can just tell it to export on the first frame, so just make sure your dialog box looks like the one above, and then click OK. If you get another dialog box that says it will automatically create a class, click OK – this is fine.























































Now inside the Ball movie clip, call the layer as or actions and lock it. After highlighting the keyframe, open the Actions panel (also by pressing F9), and just write

stop();

so the movie clip doesn’t keep playing.

Now create a new layer (by clicking on the little flipped up post-it note looking button) and name it icons or images (this is not necessary, but it is good practice for keeping everything organized). Now make keyframes – however many images you have, make this number of keyframes, including the first keyframe – in this tutorial I’m using three images, so let’s make three keyframes. On the first empty keyframe, drag the first icon/image from the library on to the stage, then align it so it is in the center, for example, if you have an image that is 100×80 pixels, set the X position to -50 and the Y position to -40. Do the same for the second icon/image on the second keyframe and the third icon/image on the third keyframe. You should now have something like the image above.

Now go back to the main timeline by clicking the Scene 1 button. Name this layer as or actions and lock it as well. And again, open the actions panel – this is where we will write our ActionScript code for the menu. After posting code, I will walk you through each line.

First we will create and declare variables that we will use.

var ball:Ball;
var balls:Array = new Array();
var i:uint;
var dist:Number;
var filter:BitmapFilter = new BlurFilter(30, 30, BitmapFilterQuality.MEDIUM);

The first line creates a variable called ball and the type is Ball – that is the class we made out of our Ball movie clip so using this variable, we will create new instances of this movie clip that is in our library. We also create an array called balls that will hold of the Ball movie clip instances. We create a variable i which is a positive integer type – this will be used for any for loops we use. We create a variable called dist which is a number type and this will hold the number that is the distance between the movie clip and the mouse cursor. Lastly, we create a bitmap filter variable – this holds a blur filter that we will change with the dist variable.

Next we create all our movie clips and place them on stage.

for (i = 0; i < 3; i++) {
	ball = new Ball();
	ball.x = 100 + (i * 170);
	ball.y = stage.stageHeight / 2;
	ball.num = i;
	ball.gotoAndStop(i + 1);
	ball.filters = [filter];
	ball.addEventListener(Event.ENTER_FRAME, blurBall);
	addChild(ball);
}

If you have not seen this before, it is called a for loop. The first line is a statement that will loop through the code inside the brackets 3 times, when i is 0, when i is 1, and when i is 2. So for each time, we create a new Ball movie clip. Then we position it on the third and fourth lines. If you calculate the X value in your head, you will see that it is incremented forward and the movie clip will be placed in front of the one before it. Then we attach a variable called num to it which is equal to the i variable so we can store the depth of the movie clip on it. Then we tell it to go to a frame number of i + 1, so the first movie clip where i is 0, it will go to frame 1, then frame 2 on the second movie clip and frame 3 on the third. So it will just go to the different icon/images in our Ball movie clip that we made earlier in our library. Then we attach the filter to it; the blur filter that was created and declared above. Next we add an enter_frame listener to it with a calling function of blurBall which we will define later on - this function will be called on every frame and it will be attached to each Ball movie clip. Finally, we add the ball to the stage using addChild.

Next we will define that blurBall function.

function blurBall(e:Event):void {
	dist = Math.sqrt(Math.pow((mouseX - e.currentTarget.x), 2) +
			Math.pow((mouseY - e.currentTarget.y), 2));
	filter = new BlurFilter(Math.floor(dist / 15),
			Math.floor(dist / 15),BitmapFilterQuality.MEDIUM);
	e.currentTarget.filters = [filter];
}

The first line is the line that creates and declares the function, calling it blurBall, it being called from a Event listener, and we aren't returning anything so we attach void to the end. Inside the dist number is calculated. This is basically the mathematical equation of calculating the distance between two points. Then new values for the XBlur and YBlur are pushed into the blur filter using the dist number. Then the filter is applied to the movie clip in question - e.currentTarget is the movie clip that the listener is attached to, so in this case, each of the Ball movie clips.

Now you should have the finished product, just like the one at the top of this page. Export your movie clip to see it playing, by clicking File > Export > Export Movie... or by hitting Ctrl + Enter.

You can download the finished FLA here!

If you would like to activate the icons as buttons, you would do this in the for loop of the code. Basically as follows:

for (i = 0; i < 3; i++) {
	ball = new Ball();
	ball.x = 100 + (i * 170);
	ball.y = stage.stageHeight / 2;
	ball.num = i;
	ball.gotoAndStop(i + 1);
	ball.filters = [filter];
	ball.addEventListener(Event.ENTER_FRAME, blurBall);
	ball.buttonMode = true;
	ball.addEventListener(MouseEvent.CLICK, ballClick);
	addChild(ball);
}

And then of course create and define the ballClick function just like we did the blurBall function.

Please feel free to comment; adding more to the file/tutorial or if you need help on it.

Thanks,
Christian

5 Responses to “Mouse Proximity Blur Tutorial”

  1. SUDAKA Says:

    Thanks MASTER
    that’s very wonderfull, thanks a lot


  2. Timme Says:

    Great post, I really learned a lot
    Thanks a lot. Y\’r the best


  3. Paul McCauley Says:

    Hey, Great tutorial can this be done with Jquery or javascript?


  4. Christian Kragh Says:

    I’m sure it can be done in jQuery/javascript but I’m not an expert with the tools.


  5. Christian Kragh Says:

    This can definitely be done with JavaScript – especially with EaselJS – Grant Skinner’s open source code base for using JavaScript with the HTML5 canvas. I will be doing some examples and tutorials soon.


Leave a Reply

Security Code: