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?
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!
Here is a sample:
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
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.
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...
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.