Amen is an industrial informatics engineer. he studied the first four years of his education in Faculty of Engineering in Lebanon. He went to France to Continue his studies by doing the fifth year of engineering and the master TIS (Technologie Information et Système) in the same time at UTC (Université de Technologie de Compiègne). He also work as a freelancer in flash development field. He is always interessted in the new multimedia technologies.
this tutorial will use the tweenEffects class so make sure you have understood the twenEffects class tutorial, so lets begin by viewing the example below of what you are going to create,
the Example
the Steps
1. Create a new flash document 200x200.
2. Set the background to gray (it won't work if its not gray :P ).
3. Open your library (ctrl+L) and create a new movie clip name it "menu" by clicking on the icon showed bellow in the screenshot.
![]()
4. Double click the new movie clip "menu" you created, and grab the text tool and on the stage type with the font of your choice but make it size about 15 px, "MENU ::" and align it to the top right of the movie "menu".
![]()
5. Draw a rectangle 100x20 and convert it to a movie clip name it mask and give it the instance name "mask_mc" and center it to the top left of the menu movie clip

6. Create a movie clip name it menuItem and in it place a dynamic text (font 12) with the instance name text_txt and center it to the top left, also export this movie clip for AS
![]()
7. Same as step six but with font 15 and name is menuItemB
![]()
the Code
Now let's take a look at our code with it's comment
on a new layer in the menu movie clip place this code.
[as]
// define our Menu Item, it can be loaded from an extenal file though but u need to
//parse the content into an array and pass it to this movie clip
var text_array = ["Home", "Portfolio", "Downloads", "About"];
//define small menu item Array
var sm_array = [];
//define big menu array
var bm_array = [];
//create the big menu and the small menu holder
var bmenu = this.createEmptyMovieClip("bmenu", 1);
var smenu = this.createEmptyMovieClip("smenu", 0);
//dynamiclly set the mask or it will be no roll over event for the masked _mc
bmenu.setMask(mask_mc);
// create an object from the class tween effect
var te = new tweenEffects();
//function that will initiate our menu.
function init() {
//go through each item in our text array
for (var i = 0; i<text_array.length; i++) {
//dynamiclly attach a menuItem movie clip from the library.
depth = smenu.getNextHighestDepth();
temp = smenu.attachMovie("menuItem", "menuItem"+i, depth);
//dynamiclly attach a menuItemB(big) movie clip from the library.
depth = bmenu.getNextHighestDepth();
tempB = bmenu.attachMovie("menuItemB", "menuItemB"+i, depth);
//set the _y to be aligned vertically one to each other
temp._y = mask_mc._height+i*temp._height;
tempB._y = mask_mc._height+i*tempB._height;
//and set it s corresponding text
temp.text = tempB.text=text_array[i];
//define onRelease event
temp.onRelease = function() {
//call the update function
update(this)
};
//save the small(big) menuItem(B) in the sm_array for later use
sm_array.push(temp);
bm_array.push(tempB);
}
}
//function that will handle the onRelease for each menuItem(small of course)
function update(_mc) {
//this found var will be used for a test you will see later.
var found;
//counter up and counter down
var cu, cd;
cu = 1;
cd = 0;
//search the position of the clicked _mc
for (var i = 0; i<sm_array.length; i++) {
if (sm_array[i] == _mc) {
break;
}
}
//save it in counter up
cu = i;
//go through the small array _mcs
for (var i = 0; i<sm_array.length; i++) {
//if the current sm_array[i] equal the pressed _mc slide it to 0 0 coordinate
if (sm_array[i] == _mc) {
//sliding small
te.gotoY(sm_array[i], 0);
//sliding big
te.gotoY(bm_array[i], 0);
//set the found to true so the bottum _mc will slide to somewhere else
found = true;
} else {
if (found) {
//this is the _mcs that are above the _mc that is clicked
yf = mask_mc._height+cd*sm_array[i]._height;
te.gotoY(sm_array[i], yf);
yf = mask_mc._height+cd*bm_array[i]._height;
te.gotoY(bm_array[i], yf);
cd++;
} else {
//this is the _mcs that are under the _mc that is clicked
yf = -cu*sm_array[i]._height;
te.gotoY(sm_array[i], yf);
yf = -cu*bm_array[i]._height;
te.gotoY(bm_array[i], yf);
cu--;
}
}
}
}
//initate our menu.
init();
[/as]
Now drag the menu movie clip from the library (ctrl+L) and place it on the stage, and hit (ctrl+Enter) to see the result.
That's it, i hope this tutorial helps, and if you have a question the forums is always ready to answer ;)
Happy Flashing :) .