ActionSript 3 - show controls on mouseover - actionscript-3

Question

I currently have a graphic animation with a simple play/pause button beneath, which stops and starts the entire animation:
Frame 1:
stop();
btn_2.addEventListener (MouseEvent.CLICK, stopplaying);
function stopplaying(e:MouseEvent):void {
MovieClip(root).stop();
stop();
gotoAndStop(2);
}
Frame 2:
stop();
btn_1.addEventListener (MouseEvent.CLICK, startplaying);
function startplaying(e:MouseEvent):void {
MovieClip(root).play();
play();
gotoAndStop(1);
}
This works simply and perfectly. However, I'd like the control button to show up on mouseover, and once again become transparent when the mouse leaves the area of the animation. Simply mapping alpha states to the mouse events works, but also seems to break the functionality of the button. Any help would be hugely appreciated!
Update: #BadFeelingAboutThis has good logic, but I'm not having much success with it. To be clear, frame 1 of my scene's actions is now:
var btn_1, btn_2;
this.addEventListener(MouseEvent.MOUSE_OVER, mouseOver);
this.addEventListener(MouseEvent.MOUSE_OUT, mouseOut);
function mouseOver(e:Event):void {
if(btn_1) btn_1.visible = true;
if(btn_2) btn_2.visible = true;
}
function mouseOut(e:Event):void {
if(btn_1) btn_1.visible = false;
if(btn_2) btn_2.visible = false;
}
The button is hidden, but is not reappearing on mouseover. The only fail-point I can see is the keyword 'this', that is, that I'm using it incorrectly. Let me know if there's any other info I can provide!
Update 2: Some more information (and I apologize for my dimness here): here is the animation: [link snipped, updated link below]. The play/pause button is a movie clip named "pp" that contains two frames, each with a button, one named btn_1, the other btn_2.
Update 3: I added a transparent background square (named "backpp") as a mouseevent area (instead of using the broader "this"):
backpp.addEventListener(MouseEvent.MOUSE_OVER, mouseOver);
backpp.addEventListener(MouseEvent.MOUSE_OUT, mouseOut);
This works great! When I mouseover the square, the controls show up. When I mouseout, they go away. However, the play/pause functionality is now not functioning. Any ideas?
Update 4: Most recent code/context below. The play/pause button is now sort-of functioning, and is hiding as intended, but is exhibiting a visual "flashing" behavior, as seen here: http://allaboarddesign.com/rodney/rodney-test.swf
Here is a screenshot of my FlashPro context:

Answer 1

You can do the following:
//create placeholder vars for your btns (they will be populated by the instances on the timeline)
//do this so the compiler knows they exist
var btn1, btn2;
//hide the buttons, do this on frame 2 as well but with btn2
btn1.visible = false;
//listen for mouse over/out on `this` (the timeline whose code this on, presumably your animation)
this.addEventListener(MouseEvent.MOUSE_OVER, mouseOver);
this.addEventListener(MouseEvent.MOUSE_OUT,mouseOut);
function mouseOver(e:Event):void {
//show the buttons if they exist
if(btn1) btn1.visible = true;
if(btn2) btn2.visible = true;
}
function mouseOut(e:Event):void {
//hide the buttons if they exist
if(btn1) btn1.visible = false;
if(btn2) btn2.visible = false;
}
EDIT
Based off your screenshot, it looks your hierarchy is this:
Maintimeline -> pp -> btn1
Where pp is the controls for your main timeline animation.
In that case, the code should be on the Main Timeline and look like this:
pp.visible = false;
//listen for mouse over/out on `this` (the timeline whose code this on, presumably your animation)
this.addEventListener(MouseEvent.MOUSE_OVER, mouseOver);
this.addEventListener(MouseEvent.MOUSE_OUT,mouseOut);
function mouseOver(e:Event):void {
//show the buttons if they exist
pp.visible = true;
}
function mouseOut(e:Event):void {
//hide the buttons if they exist
pp.visible = false;
}
For the mouse over to work, your animation will need something in the background to mouse over, even a transparent shape or movieClip will do.