Easing Menu System

Written by: Evan Olsen
Difficulty level: Intermediate
Requirements: Flash MX

Example file:

Download source: 22KB

This tutorial is gonna' cover the easing menu system (see example). This type of menu system is seen quite often in websites. Today I'm gonna teach you how to make it!

What is easing you say? Easing is a really useful thing to learn. You can use it for a number of different things. What easing does really is; finds the distance between point A and point B, moves the object to exactly half of that distance, then repeats itself. Always cutting the distance in half, then in half again etc.

Okay now on to actually making the file.

Step 1. Open up Flash MX. Make a new movie. Set the width to 400, and the height to 300.
Make some buttons. In the example I made four. Name the button Button_all. Give each button an instance name. Name them button_1, Button_2 etc… Now select your text tool and make six text fields over each button. IN those text fields put whatever you want. For the example I used “Home, About, Works and Contact”

Step 2. Make a new layer. Name it “Content”. Make a new movie clip (CRTL+F8), name it “Content”. Make a square. Make it 540 wide, and450 high. If you would like you can make select four different squares and make them all different colors. But if you do you must make sure to make them the same size as our mask.

Go back to our main timeline. Make an instance of content on the stage and name it “Content_MC”. Now go to the actions panel (F2), and put in this bit of script (I'll explain what it means a little later on)

onClipEvent (load) {
_root.targetx = 116;
_root.targety = 34;
speed = 4;
_root.onEnterFrame = function() {
_x += (_root.targetx-_x)/speed;
_y += (_root.targety-_y)/speed;
};
}
onClipEvent (enterFrame) {
if (_y == targety && _x == targetx) {
delete this.onEnterFrame;
}
}

Step 3. Now lets make our buttons move the content. Okay, this might get kinda confusing. What you're gonna do is put these bits of code on each button. Starting from top to Home, then ending at contact.

on (release) {
_root.targetx = 116;
_root.targety = 34;
}
on (release) {
_root.targetx =-155;
_root.targety = 34;
}
on (release) {
_root.targetx =116;
_root.targety =-196;
}
on (release) {
_root.targetx =-155;
_root.targety =-196;
}

Step 4. Now we're going to make a viewing area. Create a new layer and name it “mask”. In that layer make a box, 270 wide and 230 high. Place that at 115 on the coordinate, and 30 on the _y coordinate. Go to the layer properties and select “mask”. Make sure this layer is above the Content layer.

Onto explaining things.

onClipEvent (load) {
_root.targetx = 116;
_root.targety = 34;
speed = 4;


What this does is it sets the variables of where targetx is, where targety is, and how slow your MC will ease. The higher the number the slower it will go. "_root.onEnterFrame = function(){" is the same as "onClipEvent(enterFrame){", but it'll be used for something very important. I'll explain in a bit.

_root.onEnterFrame = function() {
_x += (_root.targetx-_x)/speed;
_y += (_root.targety-_y)/speed;
};
}
onClipEvent (enterFrame) {
if (_y == targety && _x == targetx) {
delete this.onEnterFrame;
}
}

This sets your MC's _x and _y position to targetx and targety divided by speed. This is the whole part that really makes it ease. Without this, you would be no where. The if statement checks to see if the _y and _x cooridinaces are at targety and targetx, if they are then it deletes the onEnterFrame which saves the user's processor from being eating alive.

on (release) {
_root.targetx = 116;
_root.targety = 34;
}
on (release) {
_root.targetx =-155;
_root.targety = 34;
}
on (release) {
_root.targetx =116;
_root.targety =-196;
}
on (release) {
_root.targetx =-155;
_root.targety =-196;
}

This simply is, when the mouse releases the button, it will set Content_MC to a new target.

Well, this looks like the end. I hope it all made sense...

Evan.