Best way to approach this Interactive HTML graphic

[joshuamoran]

Hi everyone, there are so many ways to do this, but don't want to invest my time into the wrong approach.

Here is the prototype - Interactive Graphic

Please help! I am very new to Adobe Animate.

[JoãoCésar]

Hi.

The most direct and simple way will be to place each state of the infographic in a different frame of the main timeline.

Then you add the navigation buttons to change the current frame of the main timeline.

Is this what you want to know?

Regards,

JC

[joshuamoran]

This is definitely what I was looking to know.

In fact, I was considering this approach! Just was unsure if breaking down the elements into individual pieces was better, instead of multiple images.

Creating navigation buttons and changing frames will be something I'll have to research tutorials on. If you have any advice on how to do this, it would be very appreciated.

Thank you for your time!

[JoãoCésar · Accepted solution]

Nice.

Here is a sample:

JS code:

var root = this;
root.changeFrame = function(e)
{
    if (e.currentTarget === root.prevButton)
          root.gotoAndStop(root.currentFrame - 1);
    else if (e.currentTarget === root.nextButton)
          root.gotoAndStop(root.currentFrame + 1);
};
if (!root.started) // prevents the buttons from receiving multiple listeners when this frame is revisited
{
    root.started = true;
    root.loop = false; // set to true or just remove this line if you want the navigation to loop when advancing
    root.stop();
    root.prevButton.on("click", root.changeFrame);
    root.nextButton.on("click", root.changeFrame);
}

FLA download:
animate_cc_html5_simple_navigation.zip - Google Drive

If you want more info about working with HTML5 in Animate CC, please visit the official help and also check the comment #3 from this thread. I also got some stuff on this GitHub repo and on my YouTube channel, in case you're interested.

Regards,

JC

[joshuamoran]

Thank you for providing me with your work via Google Drive.

When I publish and view the HTML, the buttons navigation buttons never activate.

I've tried following other tutorials to contribute to what you have made. However, still not working.

Is your attachment meant to function once published? Seeing the links you provided, I might be publishing incorrectly...

[JoãoCésar]

Hi.

You need to open the FLA and publish it directly from Animate CC via Control > Test.

If you want to run the .html file directly, you're gonna need a offline (like XAMPP) or an online server.

Regards,

JC