Refresh animation button in HTML Canvas

[Jonny 5ive]

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

[JoãoCésar · Accepted solution]

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

[Jonny 5ive]

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!

[JoãoCésar]

Amazing! You're welcome!