Highlighted

Refresh animation button in HTML Canvas

Community Beginner ,
Aug 06, 2019

Copy link to clipboard

Copied

Hi guys,

First off I'm completely new to animate with no html/js experience so forgive me if this is a dumb question. I chose Animate because I'm an experienced AE user and the interface seemed very familiar.

I have a simple animated timeline with nested movie clips inside. A honeycomb of sorts that animates into position and click functions to flip the sections in a card-like fashion to reveal information on the other side of the card. I've been asked to place a refresh button in the animation to restart the animation. I did so with the code snippets "ClickToGoToAndStopAtFrame" but when I play my animation again the nested movie clips play their animations without having to click on them. Is there any way to stop this behavior?

Here is a link to download the project if anyone is interested in taking a gander. Maybe you can tell me what I missed?

Dropbox - Honeycomb - Simplify your life

Thanks,

Jonn

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

Hi.

Here is:

NCATS_TransScienceInfographic.zip - Google Drive

I simplified your code. I hope you don't mind.

Two main notes:

- In HTML5 documents, Movie Clip instances have their autoReset property set to true by default. So they will remain in the last displayed frame whenever they get added back onto the display list again.

- But, in your case, the first step won't be enough. So I had to code a method called resetHexagons to send the hexagons back to the first frame when the user clicks the refresh button.

JS for the main timeline:

[First frame]

this.setHexagon = function(target)

{

    if (!target.started)

    {

        target.autoReset = false;

        target.on("click", function(e){target.play();});

        target.cursor = "pointer";

        this.hexagons.push(target);

        target.started = true;

    }  

}

this.resetHexagons = function()

{

    this.hexagons.forEach(function(hexagon)

    {

        hexagon.gotoAndStop(0);

    });

};

[Last frame]

this.stop();

if (!this.frame61Started)

{

    this.button_19.on("click", function(e)

    {

        this.resetHexagons();

        this.gotoAndStop(0);

    }, this);

  

    this.frame61Started = true;

}

JS for each hexagon:

[First frame]

this.stop();

exportRoot.setHexagon(this);

[Last frame]

this.stop();

exportRoot.setHexagon(this);

Please let me know if it helps you.

Regards,

JC

Views

392

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

Refresh animation button in HTML Canvas

Community Beginner ,
Aug 06, 2019

Copy link to clipboard

Copied

Hi guys,

First off I'm completely new to animate with no html/js experience so forgive me if this is a dumb question. I chose Animate because I'm an experienced AE user and the interface seemed very familiar.

I have a simple animated timeline with nested movie clips inside. A honeycomb of sorts that animates into position and click functions to flip the sections in a card-like fashion to reveal information on the other side of the card. I've been asked to place a refresh button in the animation to restart the animation. I did so with the code snippets "ClickToGoToAndStopAtFrame" but when I play my animation again the nested movie clips play their animations without having to click on them. Is there any way to stop this behavior?

Here is a link to download the project if anyone is interested in taking a gander. Maybe you can tell me what I missed?

Dropbox - Honeycomb - Simplify your life

Thanks,

Jonn

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

Hi.

Here is:

NCATS_TransScienceInfographic.zip - Google Drive

I simplified your code. I hope you don't mind.

Two main notes:

- In HTML5 documents, Movie Clip instances have their autoReset property set to true by default. So they will remain in the last displayed frame whenever they get added back onto the display list again.

- But, in your case, the first step won't be enough. So I had to code a method called resetHexagons to send the hexagons back to the first frame when the user clicks the refresh button.

JS for the main timeline:

[First frame]

this.setHexagon = function(target)

{

    if (!target.started)

    {

        target.autoReset = false;

        target.on("click", function(e){target.play();});

        target.cursor = "pointer";

        this.hexagons.push(target);

        target.started = true;

    }  

}

this.resetHexagons = function()

{

    this.hexagons.forEach(function(hexagon)

    {

        hexagon.gotoAndStop(0);

    });

};

[Last frame]

this.stop();

if (!this.frame61Started)

{

    this.button_19.on("click", function(e)

    {

        this.resetHexagons();

        this.gotoAndStop(0);

    }, this);

  

    this.frame61Started = true;

}

JS for each hexagon:

[First frame]

this.stop();

exportRoot.setHexagon(this);

[Last frame]

this.stop();

exportRoot.setHexagon(this);

Please let me know if it helps you.

Regards,

JC

Views

393

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
Aug 06, 2019 0
Adobe Community Professional ,
Aug 06, 2019

Copy link to clipboard

Copied

Hi.

Here is:

NCATS_TransScienceInfographic.zip - Google Drive

I simplified your code. I hope you don't mind.

Two main notes:

- In HTML5 documents, Movie Clip instances have their autoReset property set to true by default. So they will remain in the last displayed frame whenever they get added back onto the display list again.

- But, in your case, the first step won't be enough. So I had to code a method called resetHexagons to send the hexagons back to the first frame when the user clicks the refresh button.

JS for the main timeline:

[First frame]

this.setHexagon = function(target)

{

    if (!target.started)

    {

        target.autoReset = false;

        target.on("click", function(e){target.play();});

        target.cursor = "pointer";

        this.hexagons.push(target);

        target.started = true;

    }  

}

this.resetHexagons = function()

{

    this.hexagons.forEach(function(hexagon)

    {

        hexagon.gotoAndStop(0);

    });

};

[Last frame]

this.stop();

if (!this.frame61Started)

{

    this.button_19.on("click", function(e)

    {

        this.resetHexagons();

        this.gotoAndStop(0);

    }, this);

  

    this.frame61Started = true;

}

JS for each hexagon:

[First frame]

this.stop();

exportRoot.setHexagon(this);

[Last frame]

this.stop();

exportRoot.setHexagon(this);

Please let me know if it helps you.

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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
Reply
Loading...
Aug 06, 2019 1
Community Beginner ,
Aug 06, 2019

Copy link to clipboard

Copied

JC, you are a lifesaver! I have no idea what you did (I feel like learning this process is like giving directions in french while in France and all I have is a crappy palm-sized translation book), but I will definitely be studying it to figure it out.

Thanks a ton!

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
Reply
Loading...
Aug 06, 2019 1
Adobe Community Professional ,
Aug 06, 2019

Copy link to clipboard

Copied

Amazing! You're welcome!

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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
Reply
Loading...
Aug 06, 2019 0