# On Mouseover Action

**URL:** <https://forum.kirupa.com/t/on-mouseover-action/184746>\
**Category:** flash\
**Created:** [April 7, 2006, 1:00pm UTC](https://forum.kirupa.com/t/on-mouseover-action/184746 "2006-04-07T13:00:22Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![ecohen](https://avatars.discourse-cdn.com/v4/letter/e/bc79bd/32.png) [@ecohen](https://forum.kirupa.com/u/ecohen)\
**Post date:** [April 7, 2006, 1:00pm UTC](https://forum.kirupa.com/t/on-mouseover-action/184746/1 "2006-04-07T13:00:22Z")

</div>

Hi,  
I have this menu, and I like it but I would like to change one thing :  
instead the action “onclick” the menu expand, I would like to switch to “Onmouseover” the menu will expand.

Please I need help.

I 've attached the fla source.

---

<div class="post-metadata">

**Author:** ![ecohen](https://avatars.discourse-cdn.com/v4/letter/e/bc79bd/32.png) [@ecohen](https://forum.kirupa.com/u/ecohen)\
**Post date:** [April 7, 2006, 2:12pm UTC](https://forum.kirupa.com/t/on-mouseover-action/184746/2 "2006-04-07T14:12:07Z")

</div>

any suggestions?

---

<div class="post-metadata">

**Author:** ![pixi](https://avatars.discourse-cdn.com/v4/letter/p/5fc32e/32.png) [@pixi](https://forum.kirupa.com/u/pixi)\
**Post date:** [April 7, 2006, 2:31pm UTC](https://forum.kirupa.com/t/on-mouseover-action/184746/3 "2006-04-07T14:31:53Z")

</div>

on the bottom line / put this

menus\*.title.[U]onRollOver[/U]= TitleButtonPress 🙂 instead of  
menus\*.title.[U]onPress[/U]= TitleButtonPress;

---

<div class="post-metadata">

**Author:** ![ecohen](https://avatars.discourse-cdn.com/v4/letter/e/bc79bd/32.png) [@ecohen](https://forum.kirupa.com/u/ecohen)\
**Post date:** [April 7, 2006, 2:53pm UTC](https://forum.kirupa.com/t/on-mouseover-action/184746/4 "2006-04-07T14:53:43Z")

</div>

That’s perfect, it’s working great.  
But one more thing, when I “mouseout” I would like my menu collapse.  
How to do that?

Thanks

---

<div class="post-metadata">

**Author:** ![B\_L\_U\_E](https://avatars.discourse-cdn.com/v4/letter/b/ba8739/32.png) [@B\_L\_U\_E](https://forum.kirupa.com/u/B_L_U_E)\
**Post date:** [April 7, 2006, 4:22pm UTC](https://forum.kirupa.com/t/on-mouseover-action/184746/5 "2006-04-07T16:22:04Z")

</div>

> [@ecohen](#):
>
> That’s perfect, it’s working great.  
> But one more thing, when I “mouseout” I would like my menu collapse.  
> How to do that?
> 
> Thanks

[AS]onRollOut = function() {  
//collapse menu  
}[/AS] :cowboy:

---

<div class="post-metadata">

**Author:** ![ecohen](https://avatars.discourse-cdn.com/v4/letter/e/bc79bd/32.png) [@ecohen](https://forum.kirupa.com/u/ecohen)\
**Post date:** [April 7, 2006, 5:35pm UTC](https://forum.kirupa.com/t/on-mouseover-action/184746/6 "2006-04-07T17:35:26Z")

</div>

I don’t know how collapsing my menu and where to put that in my script:

// Variables  
var speed = 10; // constant speed for menu opening and closing  
var menus = []; // array to store all menu items  
// FindMenus: finds movieclips within this movieclip and adds them to  
// the menus array. Only place menu clips within this clip otherwise  
// this function will assume the non-menu clips to be clips as well  
FindMenus = function(){  
for (value in this){  
if (this[value] instanceof MovieClip){  
menus.push(this[value]);  
}  
}  
menus.sort(SortByVertical); // order so the highest is first  
}  
// SortByVertical: sort function to sort menus in menus array  
// so that the highest menu appears first  
SortByVertical = function(a, b){  
return (a.\_y \> b.\_y);  
}  
// ApplyMenuMask: creates and draws a function for the i’th menu  
// in the menus array. That menu clips is then assigned a  
// property “masker” representing this clip  
ApplyMenuMask = function(i){  
var menu = menus\*;  
var mask = this.createEmptyMovieClip(“mask”+i, i);  
mask.\_x = menu.\_x;  
mask.\_y = menu.\_y;  
mask.beginFill(0,100);  
mask.moveTo(0, 0);  
mask.lineTo(menu.title.\_width, 0);  
mask.lineTo(menu.title.\_width, menu.title.\_height);  
mask.lineTo(0, menu.title.\_height);  
mask.endFill();  
menu.setMask(mask);  
menu.masker = mask;  
}  
// StartMenuPosition: positions the menu to start. This is its closed  
// position beneath the menu above it unless its the first menu where its 0.  
StartMenuPosition = function(i){  
var menu = menus\*;  
if (i == 0){  
menu.\_y = menu.masker.\_y = 0;  
}else{  
var menu\_above = menus[i-1];  
menu.\_y = menu.masker.\_y = Math.round(menu\_above.\_y + menu\_above.title.\_height);  
}  
}  
// MenuOpen: this function opens a menu when its title is clicked  
MenuOpen = function(){  
var menu = this;  
menu.masker.\_height += speed;  
if (menu.masker.\_height \>= menu.\_height){  
menu.masker.\_height = menu.\_height;  
delete this.onEnterFrame;  
}  
PositionMenusBelow(menu.i);  
}  
// MenuClose: this function closes a menu when its title is clicked  
// When a menu has closed, its onClose callback is called (then deleted)  
MenuClose = function(){  
var menu = this;  
menu.masker.\_height -= speed;  
if (menu.masker.\_height \<= menu.title.\_height){  
menu.masker.\_height = menu.title.\_height;  
delete this.onEnterFrame;  
}  
PositionMenusBelow(menu.i);  
}  
// TitleButtonPress: this is the action assigned to a titlebar onRelease in a menu  
// based on whether that menu’s mask is greater than its titlebar. If it is, its  
// considered open. Otherwise its closed and would need to be opened  
TitleButtonPress = function(){  
var menu = this.\_parent;  
if (menu.masker.\_height \> menu.title.\_height){  
menu.onEnterFrame = MenuClose;  
}else{  
menu.onEnterFrame = MenuOpen;  
}  
}  
// PositionMenusBelow: Positions all menus below the i’th menu based on that  
// menus mask. This is used when opening or closing a menu so that menu items  
// beneath update their position properly  
PositionMenusBelow = function(i){  
var menu = menus\*;  
if (i \< menus.length-1){  
var menu\_below = menus[i+1];  
for (i=i+1; i\<menus.length; i++){  
if (menus\* == menu\_below){  
menus\*.\_y = menus\*.masker.\_y = menu.\_y + menu.masker.\_height;  
}else{  
var menu\_above = menus[i-1];  
menus\*.\_y = menus\*.masker.\_y = menu\_above.\_y + menu\_above.masker.\_height;  
}  
}  
}  
}

// Initialization function. Does setup operations  
Init = function(){  
FindMenus(); // find movieclips within this movieclip and assign to menus array  
// for each menu (as in menus array)  
for (var i=0; i\<menus.length; i++){  
menus\*.i = i; // assign a number to represent its position in the array  
ApplyMenuMask(i); // give it a mask  
StartMenuPosition(i); // position it accordingly (vertical only)  
menus\*.title.onRollOver = TitleButtonPress; // apply the actions to the titlebar  
}  
}  
Init();