Animate CC button rollover pop up event

[josephf61175]

Hi;

I have three buttons in Anumate CC. I want each to display a different block of text. Is it best to use Javascript or HTML5? Is an event listener the primary means to do this?

Thanks

jjfjr

[avtutorials]

Hi Joseph,

You won't use HTML5 to do this; you'll use Javascript.  Put a dynamic text object on the stage, named myTextObject1.  Have your button object named button1.  This code should work:

var root = this;
this.button1.addEventListener("click", button1Function);
function button1Function() {
	root.textObject1.text = "hello";
}

[josephf61175]

Hi;

Thanks for the response. I'm rather new to Animate. Where / how do I insert this code?
Joe

[avtutorials]

Timeline, select the frame, and hit F9 key.  That's one of the basics of using Adobe Animate -- the beginner tutorials that Adobe offers for learning the interface are essential before you do anything else.

[josephf61175]

Hi;

After putting in my specific button and object names, the code is:

var root = this;
this.Conserve_Mass_Button.addEventListener("click",Conserve_Mass_ButtonFunction);
function Conserve_Mass_ButtonFunction() {
root.Dyn_Txt_obj_Conserve_Mass_Button.text = "hello";
}

It does not seem to work. I would like to have a paragraph and my voice reading the paragraph appear when I hover over the button. It would disappear when I move off the button. I know that I could create a button symbol and use the over state but I'm unsure how to show the paragraph / narration. Each button would have its own specific paragraph and narration. Does that mean I should use a movieclip?

jjfjr

[avtutorials]

I tested your code with your specific object and button names, and it does work.

You'd need event listeners for mouseover and mouseout.  You can put the text into a MovieClip symbol if you need to... it really depends on what you are trying to achieve.  That discussion is probably a little more in-depth.

For now, this code should work:

var root = this;
this.Conserve_Mass_Button.addEventListener("click",Conserve_Mass_ButtonFunction);
function Conserve_Mass_ButtonFunction() {
	root.Dyn_Txt_obj_Conserve_Mass_Button.text = "Clicked";
}

// mouseover and mouseout
var frequency = 10;
stage.enableMouseOver(frequency);
this.Conserve_Mass_Button.addEventListener("mouseover", fl_MouseOverHandler);

function fl_MouseOverHandler() {
	root.Dyn_Txt_obj_Conserve_Mass_Button.text = "mouseover";
}

this.Conserve_Mass_Button.addEventListener("mouseout", fl_MouseOverHandler2);

function fl_MouseOverHandler2() {
	root.Dyn_Txt_obj_Conserve_Mass_Button.text = "";
}

[Nick Gioia]

/* Mouse Over Event
Mousing over the symbol instance executes a function in which you can add your own custom code.

Instructions:
1. Add your custom code on a new line after the line that says "// Start your custom code" below.
The code will execute when the symbol instance is moused over.
frequency is the number of the times event should be triggered.
*/
var frequency = 3;
stage.enableMouseOver(frequency);
this.symbol.addEventListener("mouseover", fl_MouseOverHandler);

function fl_MouseOverHandler()
{
// Start your custom code
// This example code displays the words "Moused over" in the Output panel.
alert("Moused over");
// End your custom code
}