How to close a pop-up and open a new one?

I'm making a simple infographics Animate HTML Canvas that would include pop-up boxes appearing and disappearing once the user mouse-overs overs certain parts of the infographics.

I have explained everything in this video which is 4,5 minutes long: http://www.ortodroma.si/downloadable/adobe-forum2.mp4

The idea is that a user mouse-overs over object A (which technically is a button) and a pop-up A opens. Then when the user moves to object B (another button) pop-up A closes and pop-up B opens.

So far opening and closing of the pop-ups is done by pop-ups having an animation:

• Frame 1: Pop-up has alpha value 0% - animation stopped at this frame and played once the user licks on the button
• Frame 12: Pop-up has alpha value 100% - animation stopped at this frame and played once the user clicks on button (but in fact it should be played once a user moves to another button!)
• Frame 24: Pop up has alpha value 0%

As far as I see it the functionality I'm trying to get is similar to Java Script toggle function which hides/shows the element once the user clicks/mouse-overs the button. But here we are talking about Playing the animation. 

I'm also attaching the code that is placed on the three buttons, but please have a look at the video as there everything is explained.

var _this = this;
/*
Mousing over the specified symbol instance executes a function.
'3' is the number of the times event should be triggered.
*/
stage.enableMouseOver(3);
_this.buttonBlue.on('mouseover', function(){
/*
Play a Movie Clip/Video or the current timeline.
Plays the specified movie clip or video.
*/
/* I think some code should be added here to close the pop-up that is currently open */
_this.popupBlue.play();
});


var _this = this;
/*
Mousing over the specified symbol instance executes a function.
'3' is the number of the times event should be triggered.
*/
stage.enableMouseOver(3);
_this.buttonRed.on('mouseover', function(){
/*
Play a Movie Clip/Video or the current timeline.
Plays the specified movie clip or video.
*/
/* I think some code should be added here to close the pop-up that is currently open */
_this.popupRed.play();
});


var _this = this;
/*
Mousing over the specified symbol instance executes a function.
'3' is the number of the times event should be triggered.
*/
stage.enableMouseOver(3);
_this.buttonYelow.on('mouseover', function(){
/*
Play a Movie Clip/Video or the current timeline.
Plays the specified movie clip or video.
*/
/* I think some code should be added here to close the pop-up that is currently open */
_this.popupYellow.play();
});

I think the code that should be added before:

_this.popupBlue.play() or

_this.popupRed.play() or

_this.popupYellow.play()

in each of the three functions above should be something like (I'm really not that good at Java Script):

• get elemnet by name (to make the programme find all pop-up elemnets); perhaps get elemnet by instance name (all the three instance names start with "popup"; could that be a hook to use?) - The program would return 3 pop-ups
• check which frames are those pop-ups currently on (if some pop-up is on frame 12 it means it is opened and should be closed)
• .play() the pop-up that is on frame 12
• that would bring that pop-up to frame 24 where its alpha value is 100% (and the pop up is invisible)

After that the function would normally play

_this.popupBlue.play() or

_this.popupRed.play() or

_this.popupYellow.play()

which would play the correcponding pop-up from frame 1 to frame 12. It means the pop-up would open.

What do you think?