Skip to main content
J
joshuamoran
New Participant
June 19, 2019
Answered

Best way to approach this Interactive HTML graphic

  • June 19, 2019
  • 1 reply
  • 503 views

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.

    This topic has been closed for replies.
    Correct answer JoãoCésar17023019

    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

    1 reply

    JoãoCésar17023019
    JoãoCésar17023019
    Community Expert
    June 19, 2019

    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

    J
    joshuamoranAuthor
    New Participant
    June 19, 2019

    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ésar17023019
      JoãoCésar17023019Correct answer
      Community Expert
      June 20, 2019

      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

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices