1. Create a movieclip with a linked Class
First create a new AS3 project in Flash and create a new movieclip (Insert > New Symbol…), let’s call it MenuButton. In the Linkage properties (click the Advanced button if needed), check the Export for ActionScript box and for this example just leave all the settings like they are so click OK. You can put anything inside the movieclip you want but for this example I’m putting in a black box with the following properties: X:0, Y:0, width:100, height:20. Now return to the root scene, highlight the empty keyframe and open the actions tab.

2. Placing instances of the movieclip on the stage
First we create two variables, one for counting in a loop and one for the movieclip.

var i:uint;
var butn:MenuButton;

And now we create a loop to create 5 buttons, set the Y position of them and add them to the stage.

for (i = 0; i < 5; i++) {
     butn = new MenuButton();
     butn.y = i * 22;
     addChild(butn);
}

Now you should see 5 black boxes, one underneath the other with a 2 pixel space in between.

3. Referencing the movieclips easily
We’re gonna add another variable to create an array that will store all the buttons. Then when we create the buttons in the loop, we push the buttons into the array. So the code will now look like this:

var i:uint;
var butn:MenuButton;
var butns:Array = new Array();

for (i = 0; i < 5; i++) {
     butn = new MenuButton();
     butns.push(butn);
     butn.y = i * 22;
     addChild(butn);
}

So now you can call the third button for example by saying butns[2] (2 because the array count starts at 0). This can come in handy in many situations.

4. Making the buttons active/clickable
First we’re going to activate the movieclips as buttons and add a listener to them to pick up mouse clicks. We also have to add a variable to the button so we know which one go clicked. So now the loop block of the code will look like this:

for (i = 0; i < 5; i++) {
     butn = new MenuButton();
     butns.push(butn);
     butn.y = i * 22;
     butn.num = i;
     butn.buttonMode = true;
     butn.addEventListener(MouseEvent.CLICK, butnClick);
     addChild(butn);
}

And then we create the butnClick function:

function butnClick(e:MouseEvent):void {
     trace("button " + e.currentTarget.num + " was clicked.");
}

And now when you test the movie you will see that you can tell which button you clicked on. So if you wanted to create link outs you could do the following:

function butnClick(e:MouseEvent):void {
     if (e.currentTarget.num == 0) {
          navigateToURL(new URLRequest("yourURL.com"));
     } else if (e.currentTarget.num == 1) {
          navigateToURL(new URLRequest("yourURL2.com"));
     }
     // and so on...
}


5. Further possibilities
You can also add a dynamic text field within the button movieclip and fill it with the appropriate text - easiest using an array filled with the text and then saying butn.mytextfield.text = buttontitles[i];.
You can also use XML file in connection with this application and create the buttons and/or contents declared in the XML.

I’m happy to announce that my blog is now equipped with a good spam blocker so I’ll be accepting comments again and plan to post regularly again. Thanks for your patience and support.

Also, I’ve been selling stock Flash files on FlashDen (now ActiveDen) and now I’m starting to sell audio files, specifically music loops for websites, presentations, intros, etc on AudioJungle. The Envato marketplaces are growing fast and I’m excited to see what comes next!

Thanks,
CK

Also, I combined the two experiments posted here (mouse proximity blur and auto drag & snap) to create a Creative Iconic Menu with mouse proximity effects Flash file now on FlashDen here.

To keep up with my new FlashDen files and new work on my portfolio, you can follow me on Twitter here.

Thanks! 

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