Button within Movieclip

Community Beginner ,
Sep 04, 2018 Sep 04, 2018

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!

Views

804

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Sep 05, 2018 Sep 05, 2018

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

...

Likes

Translate

Translate
Adobe Community Professional ,
Sep 05, 2018 Sep 05, 2018

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 05, 2018 Sep 05, 2018

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");

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 06, 2018 Sep 06, 2018

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 09, 2018 Sep 09, 2018

Copy link to clipboard

Copied

LATEST

Many thanks again!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 05, 2018 Sep 05, 2018

Copy link to clipboard

Copied

Try using Adobe Animates code snippets. They will help you understand what is doing what.


Multimedia Developer, Character Creator, and Animator.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines