19 Replies Latest reply on Aug 31, 2017 1:40 PM by grknnkrgasdasd

    HTML Canvas, Javascript coding for moving forward/backward one frame w/ buttons?!

    JeelyK Level 1

      Hi everyone, I'm super new to Flash/Animate and know very very little about AS2 and AS3 (or any other coding language for that matter)

      I'm trying to build a simple 'module' in Animate, sort of like a PowerPoint where you can move from slide to slide (or frame to frame) with arrow buttons. In previous 'modules' I've built using AS2 I did this by creating buttons and assigning them code that was something like -

       

      on(release) {

      nextFrame():

      }

       

      and

       

      on(release) {

      prevFrame();

      }

       

      and that was super easy.

      However, now I'm working with HTML Canvas, because I need the modules to work on mobile devices, so I'm trying to write the code in JavaScript.

      I managed to come up with some code (after long hours searching through forums) that sort of accomplished what I am trying to do, but after moving one frame forward my "next" button stops working. The "previous" button works, but I can only test it after I've gone one frame in advance.

       

      So here's my setup.

      I created a button shape that I then nestled inside of a movieclip and I place this movieclip on the stage to create my buttons. I gave one instance the name of 'prevBtn' and the other one the instance name 'nextBtn'

      The layers are simply a background layer, my navigation layer (where the buttons are) the only keyframe on my nav layer is the first frame then the buttons remain the same with the same instance names for the remaining frames, a text layer (where I wrote text on each frame to tell when it's moving forward and backward), and an actions frame.

       

      On frame one of my actions layer I put the following code -

       

      this.stop();

       

       

      var frameNumber = this.currentFrame;

      var nextFrame = frameNumber + 1;

      var prevFrame = frameNumber - 1;

       

       

      this.nextBtn.addEventListener("click", navNext.bind(this));

      function navNext() {

        this.gotoAndStop(nextFrame);

      }

      this.prevBtn.addEventListener("click", navPrev.bind(this));

      function navPrev() {

        this.gotoAndStop(prevFrame);

      }

       

       

      If anyone could please tell me why it only works to move forward one frame and then my 'nextBtn' quits working I would GREATLY appreciate it! Or if there is another way to code this simple interactivity, THANKS!