Copy link to clipboard
Copied
Hi everyone,
I am new to Animate CC and scripting, can I check how am I suppose to:
• Script a button within a movieclip to navigate the main timeline
• Script a button to navigate a movieclip timeline
Below is the script inside the movieclip which I want the action of going to the frame label on the main timeline in Scene 1 :
this.btn_rewind.addEventListener("click", rewindlabel.bind(this));
function rewindlabel()
{
this.gotoAndStop("start");
}
So far I am able to create the button interaction at the same level of main timeline.
Thanks for the help in advance!
Hi.
There are several ways to achieve what you want.
Here are some suggestions.
You don't need to use all of them. It's just for you to better understand how to reference objects in Animate CC using JavaScript.
Please take some notes:
- The 'on' method belongs to the CreateJS suite of libraries and provides a shortcut to addEventListener, and adds additional functionality;
- 'exportRoot' is a automatic reference to the main timeline that Animate CC creates;
- The if statement is necessary to make sure
...Copy link to clipboard
Copied
Hi.
There are several ways to achieve what you want.
Here are some suggestions.
You don't need to use all of them. It's just for you to better understand how to reference objects in Animate CC using JavaScript.
Please take some notes:
- The 'on' method belongs to the CreateJS suite of libraries and provides a shortcut to addEventListener, and adds additional functionality;
- 'exportRoot' is a automatic reference to the main timeline that Animate CC creates;
- The if statement is necessary to make sure the listeners are added only once because the code will make the main timeline to go back and forth.
// Using 'addEventListener', without binding and with a custom reference to the main timeline
var that = this;
this.navigate = function(e)
{
if (e.currentTarget == that.header.pageButton0)
that.gotoAndStop("start");
else if (e.currentTarget == that.header.pageButton1)
that.gotoAndStop("content");
else if (e.currentTarget == that.header.pageButton2)
that.gotoAndStop("end");
};
this.changeGreetings = function(e)
{
if (e.currentTarget == that.languageButton0)
that.greetings.gotoAndStop("en");
else if (e.currentTarget == that.languageButton1)
that.greetings.gotoAndStop("pt");
else if (e.currentTarget == that.languageButton2)
that.greetings.gotoAndStop("es");
};
if (!this.hasStarted)
{
this.stop();
this.header.pageButton0.addEventListener("click", this.navigate);
this.header.pageButton1.addEventListener("click", this.navigate);
this.header.pageButton2.addEventListener("click", this.navigate);
this.languageButton0.addEventListener("click", this.changeGreetings);
this.languageButton1.addEventListener("click", this.changeGreetings);
this.languageButton2.addEventListener("click", this.changeGreetings);
this.hasStarted = true;
}
OR
// Using 'addEventListener' without binding and with exportRoot
this.navigate = function(e)
{
if (e.currentTarget == exportRoot.header.pageButton0)
exportRoot.gotoAndStop("start");
else if (e.currentTarget == exportRoot.header.pageButton1)
exportRoot.gotoAndStop("content");
else if (e.currentTarget == exportRoot.header.pageButton2)
exportRoot.gotoAndStop("end");
};
this.changeGreetings = function(e)
{
if (e.currentTarget == exportRoot.languageButton0)
exportRoot.greetings.gotoAndStop("en");
else if (e.currentTarget == exportRoot.languageButton1)
exportRoot.greetings.gotoAndStop("pt");
else if (e.currentTarget == exportRoot.languageButton2)
exportRoot.greetings.gotoAndStop("es");
};
if (!this.hasStarted)
{
this.stop();
this.header.pageButton0.addEventListener("click", this.navigate);
this.header.pageButton1.addEventListener("click", this.navigate);
this.header.pageButton2.addEventListener("click", this.navigate);
this.languageButton0.addEventListener("click", this.changeGreetings);
this.languageButton1.addEventListener("click", this.changeGreetings);
this.languageButton2.addEventListener("click", this.changeGreetings);
this.hasStarted = true;
}
OR
// Using 'addEventListener' and binding
this.navigate = function(e)
{
if (e.currentTarget == this.header.pageButton0)
this.gotoAndStop("start");
else if (e.currentTarget == this.header.pageButton1)
this.gotoAndStop("content");
else if (e.currentTarget == this.header.pageButton2)
this.gotoAndStop("end");
};
this.changeGreetings = function(e)
{
if (e.currentTarget == this.languageButton0)
this.greetings.gotoAndStop("en");
else if (e.currentTarget == this.languageButton1)
this.greetings.gotoAndStop("pt");
else if (e.currentTarget == this.languageButton2)
this.greetings.gotoAndStop("es");
};
if (!this.hasStarted)
{
this.stop();
this.header.pageButton0.addEventListener("click", this.navigate.bind(this));
this.header.pageButton1.addEventListener("click", this.navigate.bind(this));
this.header.pageButton2.addEventListener("click", this.navigate.bind(this));
this.languageButton0.addEventListener("click", this.changeGreetings.bind(this));
this.languageButton1.addEventListener("click", this.changeGreetings.bind(this));
this.languageButton2.addEventListener("click", this.changeGreetings.bind(this));
this.hasStarted = true;
}
OR
// Using 'on' and binding
this.navigate = function(e)
{
if (e.currentTarget == this.header.pageButton0)
this.gotoAndStop("start");
else if (e.currentTarget == this.header.pageButton1)
this.gotoAndStop("content");
else if (e.currentTarget == this.header.pageButton2)
this.gotoAndStop("end");
};
this.changeGreetings = function(e)
{
if (e.currentTarget == this.languageButton0)
this.greetings.gotoAndStop("en");
else if (e.currentTarget == this.languageButton1)
this.greetings.gotoAndStop("pt");
else if (e.currentTarget == this.languageButton2)
this.greetings.gotoAndStop("es");
};
if (!this.hasStarted)
{
this.stop();
this.header.pageButton0.on("click", this.navigate, this);
this.header.pageButton1.on("click", this.navigate, this);
this.header.pageButton2.on("click", this.navigate, this);
this.languageButton0.on("click", this.changeGreetings, this);
this.languageButton1.on("click", this.changeGreetings, this);
this.languageButton2.on("click", this.changeGreetings, this);
this.hasStarted = true;
}
OR
// Using 'on', without binding and with exportRoot
this.navigate = function(e)
{
if (e.currentTarget == exportRoot.header.pageButton0)
exportRoot.gotoAndStop("start");
else if (e.currentTarget == exportRoot.header.pageButton1)
exportRoot.gotoAndStop("content");
else if (e.currentTarget == exportRoot.header.pageButton2)
exportRoot.gotoAndStop("end");
};
this.changeGreetings = function(e)
{
if (e.currentTarget == exportRoot.languageButton0)
exportRoot.greetings.gotoAndStop("en");
else if (e.currentTarget == exportRoot.languageButton1)
exportRoot.greetings.gotoAndStop("pt");
else if (e.currentTarget == exportRoot.languageButton2)
exportRoot.greetings.gotoAndStop("es");
};
if (!this.hasStarted)
{
this.stop();
this.header.pageButton0.on("click", this.navigate);
this.header.pageButton1.on("click", this.navigate);
this.header.pageButton2.on("click", this.navigate);
this.languageButton0.on("click", this.changeGreetings);
this.languageButton1.on("click", this.changeGreetings);
this.languageButton2.on("click", this.changeGreetings);
this.hasStarted = true;
}
OR
// Using 'on', without binding and with a custom reference to the main timeline
var that = this;
this.navigate = function(e)
{
if (e.currentTarget == that.header.pageButton0)
that.gotoAndStop("start");
else if (e.currentTarget == that.header.pageButton1)
that.gotoAndStop("content");
else if (e.currentTarget == that.header.pageButton2)
that.gotoAndStop("end");
};
this.changeGreetings = function(e)
{
if (e.currentTarget == that.languageButton0)
that.greetings.gotoAndStop("en");
else if (e.currentTarget == that.languageButton1)
that.greetings.gotoAndStop("pt");
else if (e.currentTarget == that.languageButton2)
that.greetings.gotoAndStop("es");
};
if (!this.hasStarted)
{
this.stop();
this.header.pageButton0.on("click", this.navigate);
this.header.pageButton1.on("click", this.navigate);
this.header.pageButton2.on("click", this.navigate);
this.languageButton0.on("click", this.changeGreetings);
this.languageButton1.on("click", this.changeGreetings);
this.languageButton2.on("click", this.changeGreetings);
this.hasStarted = true;
}
FLA download:
animate_cc_html5_basic_navigation.zip - Google Drive
Please don't hesitate to ask if you still have any further questions.
Regards,
JC
Copy link to clipboard
Copied
Wow...thanks for the scripts and demo! i have studied the script and understood the concept.
Honestly I am intimidated by the length of the script, I thought if will be as easy as inserting a "root" or instance name within the line of script below:
this.gotoAndStop("start");
Copy link to clipboard
Copied
Excellent!
And I understand. Scope/context in JavaScript are way harder to get used to than in AS3, IMO.
Have a great learning!
Regards,
JC
Copy link to clipboard
Copied
Many thanks again!
Copy link to clipboard
Copied
Try using Adobe Animates code snippets. They will help you understand what is doing what.