Tutorial details: Easing Menu System
Written by: comciGeek | www.KELdesigns.vze.com
Time: 30 mins. to 1 hour
Difficulty Level: Intermediate
Requirements: Flash MX
Topics Covered: Easing movement for menu (ei. Barney's)
Assumed knowledge: instance names, functions, variables, equations and expressions


Download source here.

Do you like the easing movement of movie clips at Barney's website? If you do then you'll going to like this tutorial. It is fairly easy to do before, it's even easier to do now using Flash MX.

Let's start!

Make some buttons. In the example I made 6. Give each button an instance name. Now make a movie clip with 6 sections or an equivalent to the number of buttons that you made and name it se. Each section of the movie clip should have the same size. In the example I made it into 250x200. Click on it a open the actions panel. place in the following actions:

First initialize the variables needed when the movie first loads. We set the _x and _y to 0 so the movie clip rests on that position. We also set the speed of the movement which determines the amout of increment or movement div=5.

onClipEvent (load) {
_x = 0;
_y = 0;
div = 5;
}

We then add the script that contains the equation for determining the new position of the movie clip. The variables endY and endX are the new position of the movie clip when a button is pressed. That is, the movie clip moves to the new position specified by endY and endX. The += operator is used to store the new values of _x and _y. We use enterFrame to continually check if the equation is true.

onClipEvent (enterFrame) {
_x += (endX-_x)/div;
_y += (endY-_y)/div;

Use the button function onRelease to specify new values of endX and endY. For example if I will click and then release on the button named works the new values of endX will be -250 and endY will be 0. With the equation above the values of the movie clip's _x and _y will gradually change until it will be equal to endX=-25 and endY=0.

The values of endX and endY are relative to the size of the movie clip that we want to move. for example my movie clip has a total size of 750x400 and I want to move it to show a section of it which is 250x200, I have to change the values of endX by factor and endY by a factor of 200.

_root.home.onRelease = function() {
endX = 0;
endY = 0;
};
_root.works.onRelease = function() {
endX = -250;
endY = 0;
};
_root.skills.onRelease = function() {
endX = -500;
endY = 0;
};
_root.bio.onRelease = function() {
endX = 0;
endY = -200;
};
_root.links.onRelease = function() {
endX = -250;
endY = -200;
};
_root.contact.onRelease = function() {
endX = -500;
endY = -200;
};
}

Only the clip that you want to move wil contain the action. You can also modify the script to let the movie clip move in response to the mouse.

onClipEvent (load) {
_x = 0;
_y = 0;
div = 5;
}
onClipEvent (enterFrame) {
endX = _root._xmouse;
endY = _root._ymouse;
_x += (endX-_x)/div;
_y += (endY-_y)/div;
}