Highlighted

Best way to approach this Interactive HTML graphic

Community Beginner ,
Jun 19, 2019

Copy link to clipboard

Copied

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.

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

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

Views

142

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

Best way to approach this Interactive HTML graphic

Community Beginner ,
Jun 19, 2019

Copy link to clipboard

Copied

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.

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

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

Views

143

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
Jun 19, 2019 0
Adobe Community Professional ,
Jun 19, 2019

Copy link to clipboard

Copied

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

__________________________________________
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...
Jun 19, 2019 1
Community Beginner ,
Jun 19, 2019

Copy link to clipboard

Copied

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!

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...
Jun 19, 2019 1
Adobe Community Professional ,
Jun 20, 2019

Copy link to clipboard

Copied

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

__________________________________________
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...
Jun 20, 2019 2
Community Beginner ,
Jun 27, 2019

Copy link to clipboard

Copied

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...

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...
Jun 27, 2019 0
Adobe Community Professional ,
Jun 28, 2019

Copy link to clipboard

Copied

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

__________________________________________
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...
Jun 28, 2019 0