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?
AdChoices