# How to make movieclip controlled by button fade in/out on mouse over/out?

**URL:** <https://forum.kirupa.com/t/how-to-make-movieclip-controlled-by-button-fade-in-out-on-mouse-over-out/331806>\
**Category:** flash\
**Created:** [October 27, 2013, 5:24am UTC](https://forum.kirupa.com/t/how-to-make-movieclip-controlled-by-button-fade-in-out-on-mouse-over-out/331806 "2013-10-27T05:24:47Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![oslynray](https://avatars.discourse-cdn.com/v4/letter/o/858c86/32.png) [@oslynray](https://forum.kirupa.com/u/oslynray)\
**Post date:** [October 27, 2013, 5:24am UTC](https://forum.kirupa.com/t/how-to-make-movieclip-controlled-by-button-fade-in-out-on-mouse-over-out/331806/1 "2013-10-27T05:24:47Z")

</div>

Hi,

I am new to Flash, and have tried searching numerous forums to the answer to this question, but nothing I try seems to work. Basically I am trying to create a single “Image” that triggers different animations when you mouse over different invisible buttons located on specific areas. The technique I am using is basically spacing out the animations over different frames, and using the gotoAndPlay command specifying the where the relevant animation is located.

Here is the code from my actions layer with two animations:

[COLOR=#333333][FONT=adobe-clean][COLOR=#008080]stop(); /_This ensures no animations are playing on the first frame_/[/COLOR][/FONT][/COLOR]

[COLOR=#333333][FONT=adobe-clean][COLOR=#008080]/_Mouse over event for redbutton1_/[/COLOR][/FONT][/COLOR]

[COLOR=#333333][FONT=adobe-clean][COLOR=#008080]redbutton1.addEventListener(MouseEvent.MOUSE\_OVER, fl\_MouseOverToGoToAndPlayFromFrame\_2);[/COLOR][/FONT][/COLOR]

[COLOR=#333333][FONT=adobe-clean][COLOR=#008080]function fl\_MouseOverToGoToAndPlayFromFrame\_2(event:MouseEvent):void[/COLOR][/FONT][/COLOR]  
[COLOR=#333333][FONT=adobe-clean][COLOR=#008080]{[/COLOR][/FONT][/COLOR]  
[COLOR=#333333][FONT=adobe-clean][COLOR=#008080] gotoAndPlay(2); /_This is the frame where the animaton triggered by redbutton1 is located_/[/COLOR][/FONT][/COLOR]  
[COLOR=#333333][FONT=adobe-clean][COLOR=#008080]}[/COLOR][/FONT][/COLOR]

[COLOR=#333333][FONT=adobe-clean][COLOR=#008080]/\* Mouse Out Event for redbutton1\*/[/COLOR][/FONT][/COLOR]

[COLOR=#333333][FONT=adobe-clean][COLOR=#008080]redbutton1.addEventListener(MouseEvent.MOUSE\_OUT, fl\_MouseOutHandler\_3);[/COLOR][/FONT][/COLOR]

[COLOR=#333333][FONT=adobe-clean][COLOR=#008080]function fl\_MouseOutHandler\_3(event:MouseEvent):void[/COLOR][/FONT][/COLOR]

[COLOR=#333333][FONT=adobe-clean][COLOR=#008080]{[/COLOR][/FONT][/COLOR]  
[COLOR=#333333][FONT=adobe-clean][COLOR=#008080] gotoAndPlay(1) /_takes animation back to the start of timeline where it stops_/[/COLOR][/FONT][/COLOR]  
[COLOR=#333333][FONT=adobe-clean][COLOR=#008080]}[/COLOR][/FONT][/COLOR]

[COLOR=#333333][FONT=adobe-clean][COLOR=#008080]/_Mouse over event for bluebutton1_/[/COLOR][/FONT][/COLOR]

[COLOR=#333333][FONT=adobe-clean][COLOR=#008080]bluebutton1.addEventListener(MouseEvent.MOUSE\_OVER, fl\_MouseOverToGoToAndPlayFromFrame\_2);[/COLOR][/FONT][/COLOR]

[COLOR=#333333][FONT=adobe-clean][COLOR=#008080]function fl\_MouseOverToGoToAndPlayFromFrame\_2(event:MouseEvent):void[/COLOR][/FONT][/COLOR]  
[COLOR=#333333][FONT=adobe-clean][COLOR=#008080]{[/COLOR][/FONT][/COLOR]  
[COLOR=#333333][FONT=adobe-clean][COLOR=#008080] gotoAndPlay(30); /_This is the frame where the animaton triggered by bluebutton1 is located_/[/COLOR][/FONT][/COLOR]  
[COLOR=#333333][FONT=adobe-clean][COLOR=#008080]}[/COLOR][/FONT][/COLOR]

[COLOR=#333333][FONT=adobe-clean][COLOR=#008080]/\* Mouse Out Event for bluebutton1\*/[/COLOR][/FONT][/COLOR]

[COLOR=#333333][FONT=adobe-clean][COLOR=#008080]bluebutton1.addEventListener(MouseEvent.MOUSE\_OUT, fl\_MouseOutHandler\_3);[/COLOR][/FONT][/COLOR]

[COLOR=#333333][FONT=adobe-clean][COLOR=#008080]function fl\_MouseOutHandler\_3(event:MouseEvent):void[/COLOR][/FONT][/COLOR]

[COLOR=#333333][FONT=adobe-clean][COLOR=#008080]{[/COLOR][/FONT][/COLOR]  
[COLOR=#333333][FONT=adobe-clean][COLOR=#008080] gotoAndPlay(1) /_takes animation back to the start of timeline where it stops_/[/COLOR][/FONT][/COLOR]  
[COLOR=#333333][FONT=adobe-clean][COLOR=#008080]}[/COLOR][/FONT][/COLOR]

Now basically all I need is some code that means that instead of abruptly starting and stopping the animation, the animation will fade in/out whenever the mouseover/out events are triggered. Note: the animation doesn’t have to finish, it basically only plays while the mouse is over.

Any help would be greatly appreciated.