We have create a sliding menu unit. I select them all and convert them into a symbol. Now, I drag 4 instance of them on to the stage. There instance name are : menu1, menu2, menu3 and menu4.
Now, I need to modify the rollOver button a little. If the submenu movieClips always slide-in when we rollOut, then we can not access those submenu buttons, and that will be non-sense.
Here is the codes:
on (rollOver) {
_parent.activeMenu.active = false;
_parent.activeMenu = this;
_parent.activeMenu.active = true;
}
The script says: when rollOver, what is active should be set in-active. And, this menu should be the active menu and set this menu active.
This will make what has already slide-out now slides-in and "this" menu will slide out its submenu.
The last part:
I add a movieClip "align controller". I want write enterFrame codes to it to "seamlessly" align all these 4 menu. The codes are simple:
onClipEvent (enterFrame) {
with (_parent) {
menu1._y = 0;
menu2._y = menu1._y+menu1._height;
menu3._y = menu2._y+menu2._height;
menu4._y = menu3._y+menu3._height;
}
}
It says: I dont care menu2 is expanding, shrinking or half expanding. I measure the height and put menu3 seamlessly next to it.
That is all. It is already a finished sliding menus. At present, we create them by drag symbol on to the stage, We will discuss how to create these by attach Movie.
I believe, if you understand this principle, Liquid menu is just a piece of cake.
After note:
1.
What is the most important secret that make the math so simple ?
The secret is: Make all the registration point (0,0) to be at the left-top corner. Dont make registration point in the center. That will make the math hundred times complex.
2.
Flash executes enterFrame blocks from top layer down. So, the "align controller" must be in the lowest layer. It means, I will align all these menus after they expand or shrink. If we put "align controller" at top layer, then it means we align these menu before they expand or shrink.