11 Replies Latest reply on Aug 2, 2017 5:27 AM by kglad

    Adobe Animate CC HTML 5 Canvas

    MuraliK Level 1

      What is the procedure and detailed codding to work on next and previous function for multiple frames(images). In animate cc HTML5 format.

       

      [Here is the list of all Adobe forums... https://forums.adobe.com/welcome]

      [Moved from Comments forum to specific Program forum... Mod]

        • 1. Re: Adobe Animate CC HTML 5 Canvas
          kglad Adobe Community Professional & MVP

          this.nextbutton.addEventListener('mousedown',nextF.bind(this));

          this.prevbutton.addEventListener('mousedown',prevF.bind(this));

           

          function nextF(){

          if(this.currentFrame<this.totalFrames){

          this.gotoAndStop(this.currentFrame+1);

          }

          }

          function prevF(){

          if(this.currentFrame>0){
          this.gotoAndStop(this.currentFrame-1);

          }

          }

          1 person found this helpful
          • 2. Re: Adobe Animate CC HTML 5 Canvas
            MuraliK Level 1

            Hi,

             

            Thank you so much for the reply. But this code is not working properly for me. I want to do multiple image rotation and at the end rotation,

            it need to stop but it is looping. While clicking next button it is rotating systematically but on clicking previous button , it is not rotating systematically.

             

            Please suggest on the same. 

             

            Thank you.

            Murali

            • 3. Re: Adobe Animate CC HTML 5 Canvas
              MuraliK Level 1

              I am using this code which is working systematically  for me, But I need a shorter version for this , since my code is quite lengthy....

              Please go through and suggest.

               

               

              ________________________________________

              this.nxt1.visible=true;

              this.nxt2.visible=false;

              this.nxt3.visible=false;

              this.nxt4.visible=false;

              this.nxt5.visible=false;

              this.nxt6.visible=false;

              this.nxt7.visible=false;

               

              this.prev1.visible=true;

              this.prev2.visible=false;

              this.prev3.visible=false;

              this.prev4.visible=false;

              this.prev5.visible=false;

              this.prev6.visible=false;

              this.prev7.visible=false;

               

              this.nxt1.addEventListener("click", fl_MouseClickHandler_1.bind(this));

              this.nxt2.addEventListener("click", fl_MouseClickHandler_2.bind(this));

              this.nxt3.addEventListener("click", fl_MouseClickHandler_3.bind(this));

              this.nxt4.addEventListener("click", fl_MouseClickHandler_4.bind(this));

              this.nxt5.addEventListener("click", fl_MouseClickHandler_5.bind(this));

              this.nxt6.addEventListener("click", fl_MouseClickHandler_6.bind(this));

               

              this.prev1.addEventListener("click", fl_MouseClickHandler_11.bind(this));

              this.prev2.addEventListener("click", fl_MouseClickHandler_12.bind(this));

              this.prev3.addEventListener("click", fl_MouseClickHandler_13.bind(this));

              this.prev4.addEventListener("click", fl_MouseClickHandler_14.bind(this));

              this.prev5.addEventListener("click", fl_MouseClickHandler_15.bind(this));

              this.prev6.addEventListener("click", fl_MouseClickHandler_16.bind(this));

               

              function fl_MouseClickHandler_11()

              {

              this.dress.gotoAndStop(0);

              this.nxt1.visible=true;

              this.nxt2.visible=false;

              this.nxt3.visible=false;

              this.nxt4.visible=false;

              this.nxt5.visible=false;

              this.nxt6.visible=false;

              this.nxt7.visible=false;

               

              this.prev1.visible=true;

              this.prev2.visible=false;

              this.prev3.visible=false;

              this.prev4.visible=false;

              this.prev5.visible=false;

              this.prev6.visible=false;

              }

               

              function fl_MouseClickHandler_12()

              {

              this.dress.gotoAndStop(1);

              this.nxt1.visible=false;

              this.nxt2.visible=true;

              this.nxt3.visible=false;

              this.nxt4.visible=false;

              this.nxt5.visible=false;

              this.nxt6.visible=false;

              this.nxt7.visible=false;

               

              this.prev1.visible=true;

              this.prev2.visible=false;

              this.prev3.visible=false;

              this.prev4.visible=false;

              this.prev5.visible=false;

              this.prev6.visible=false;

              }

               

               

              function fl_MouseClickHandler_13()

              {

              this.dress.gotoAndStop(2);

              this.nxt1.visible=false;

              this.nxt2.visible=false;

              this.nxt3.visible=true;

              this.nxt4.visible=false;

              this.nxt5.visible=false;

              this.nxt6.visible=false;

              this.nxt7.visible=false;

               

              this.prev1.visible=false;

              this.prev2.visible=true;

              this.prev3.visible=false;

              this.prev4.visible=false;

              this.prev5.visible=false;

              this.prev6.visible=false;

              }

               

               

              function fl_MouseClickHandler_14()

              {

              this.dress.gotoAndStop(3);

              this.nxt1.visible=false;

              this.nxt2.visible=false;

              this.nxt3.visible=false;

              this.nxt4.visible=true;

              this.nxt5.visible=false;

              this.nxt6.visible=false;

              this.nxt7.visible=false;

               

              this.prev1.visible=false;

              this.prev2.visible=false;

              this.prev3.visible=true;

              this.prev4.visible=false;

              this.prev5.visible=false;

              this.prev6.visible=false;

              }

               

               

              function fl_MouseClickHandler_15()

              {

              this.dress.gotoAndStop(4);

              this.nxt1.visible=false;

              this.nxt2.visible=false;

              this.nxt3.visible=false;

              this.nxt4.visible=false;

              this.nxt5.visible=true;

              this.nxt6.visible=false;

              this.nxt7.visible=false;

               

              this.prev1.visible=false;

              this.prev2.visible=false;

              this.prev3.visible=false;

              this.prev4.visible=true;

              this.prev5.visible=false;

              this.prev6.visible=false;

              }

               

               

              function fl_MouseClickHandler_16()

              {

              this.dress.gotoAndStop(5);

              this.nxt1.visible=false;

              this.nxt2.visible=false;

              this.nxt3.visible=false;

              this.nxt4.visible=false;

              this.nxt5.visible=false;

              this.nxt6.visible=true;

              this.nxt7.visible=false;

               

              this.prev1.visible=false;

              this.prev2.visible=false;

              this.prev3.visible=false;

              this.prev4.visible=false;

              this.prev5.visible=true;

              this.prev6.visible=false;

              }

               

              function fl_MouseClickHandler_1()

              {

              this.dress.gotoAndStop(1);

              this.nxt1.visible=false;

              this.nxt2.visible=true;

              this.nxt3.visible=false;

              this.nxt4.visible=false;

              this.nxt5.visible=false;

              this.nxt6.visible=false;

              this.nxt7.visible=false;

               

              this.prev1.visible=true;

              this.prev2.visible=false;

              this.prev3.visible=false;

              this.prev4.visible=false;

              this.prev5.visible=false;

              this.prev6.visible=false;

              }

               

               

              function fl_MouseClickHandler_2()

              {

              this.dress.gotoAndStop(2);

              this.nxt1.visible=false;

              this.nxt2.visible=false;

              this.nxt3.visible=true;

              this.nxt4.visible=false;

              this.nxt5.visible=false;

              this.nxt6.visible=false;

              this.nxt7.visible=false;

               

              this.prev1.visible=false;

              this.prev2.visible=true;

              this.prev3.visible=false;

              this.prev4.visible=false;

              this.prev5.visible=false;

              this.prev6.visible=false;

              }

               

               

              function fl_MouseClickHandler_3()

              {

              this.dress.gotoAndStop(3);

              this.nxt1.visible=false;

              this.nxt2.visible=false;

              this.nxt3.visible=false;

              this.nxt4.visible=true;

              this.nxt5.visible=false;

              this.nxt6.visible=false;

              this.nxt7.visible=false;

               

              this.prev1.visible=false;

              this.prev2.visible=false;

              this.prev3.visible=true;

              this.prev4.visible=false;

              this.prev5.visible=false;

              this.prev6.visible=false;

              }

               

               

              function fl_MouseClickHandler_4()

              {

              this.dress.gotoAndStop(4);

              this.nxt1.visible=false;

              this.nxt2.visible=false;

              this.nxt3.visible=false;

              this.nxt4.visible=false;

              this.nxt5.visible=true;

              this.nxt6.visible=false;

              this.nxt7.visible=false;

               

              this.prev1.visible=false;

              this.prev2.visible=false;

              this.prev3.visible=false;

              this.prev4.visible=true;

              this.prev5.visible=false;

              this.prev6.visible=false;

              }

               

               

              function fl_MouseClickHandler_5()

              {

              this.dress.gotoAndStop(5);

              this.nxt1.visible=false;

              this.nxt2.visible=false;

              this.nxt3.visible=false;

              this.nxt4.visible=false;

              this.nxt5.visible=false;

              this.nxt6.visible=true;

              this.nxt7.visible=false;

               

              this.prev1.visible=false;

              this.prev2.visible=false;

              this.prev3.visible=false;

              this.prev4.visible=false;

              this.prev5.visible=true;

              this.prev6.visible=false;

              }

               

               

              function fl_MouseClickHandler_6()

              {

              this.dress.gotoAndStop(6);

              this.nxt1.visible=false;

              this.nxt2.visible=false;

              this.nxt3.visible=false;

              this.nxt4.visible=false;

              this.nxt5.visible=false;

              this.nxt6.visible=false;

              this.nxt7.visible=true;

               

              this.prev1.visible=false;

              this.prev2.visible=false;

              this.prev3.visible=false;

              this.prev4.visible=false;

              this.prev5.visible=false;

              this.prev6.visible=true;

              }

              • 4. Re: Adobe Animate CC HTML 5 Canvas
                kglad Adobe Community Professional & MVP

                you need one next button and one previous button, not different ones for each frame.

                 

                you should have a this.stop() on the frame that contains the code i suggested and you need to replace nextbutton with the name of your single next button.  likewise for your previous button.

                • 5. Re: Adobe Animate CC HTML 5 Canvas
                  MuraliK Level 1

                  Hi,

                   

                  Below it is AS 3.0 code. Its working great for me. I need to convert this script to HTML5 canvas scripting. Please advise.

                   

                  ===============================================

                  leftBtn.buttonMode=true;

                  rightBtn.buttonMode=true;

                   

                  leftBtn.addEventListener(MouseEvent.CLICK, leftBtnClick);

                  rightBtn.addEventListener(MouseEvent.CLICK, rightBtnClick);

                   

                  function leftBtnClick(e:MouseEvent):void

                  {

                  rightBtn.alpha=1;

                  if(currentFrame === 3)

                  {

                  leftBtn.alpha=0.5;

                  stop();

                  }

                  else

                  {

                  nextFrame();

                  }

                  }

                   

                  function rightBtnClick(e:MouseEvent):void

                  {

                  leftBtn.alpha=1;

                  if(currentFrame === 1)

                  {

                  rightBtn.alpha=0.5;

                  stop();

                  }

                  else

                  {

                  prevFrame();

                  }

                  }

                  ================================================

                   

                  Thanks,

                  Murali

                  • 6. Re: Adobe Animate CC HTML 5 Canvas
                    kglad Adobe Community Professional & MVP

                    the code i suggested is for html5/canvas.

                    • 7. Re: Adobe Animate CC HTML 5 Canvas
                      MuraliK Level 1

                      Hi,

                       

                      But this code is not working properly for me. I want to do seven image rotation and at the end rotation,

                      it need to stop but it is looping. While clicking next button it is rotating systematically but on clicking previous button , it is not rotating systematically.

                       

                      Next function is working but previous function is not working. Please help me out on that.

                       

                      Thanks,

                      Murali

                      • 8. Re: Adobe Animate CC HTML 5 Canvas
                        kglad Adobe Community Professional & MVP

                        how is the image rotation related to advancing/retreating one frame when a next/prev button is clicked?

                        • 9. Re: Adobe Animate CC HTML 5 Canvas
                          ClayUUID Adobe Community Professional

                          Please stop saying "systematically". It doesn't mean what you think it means.

                          • 10. Re: Adobe Animate CC HTML 5 Canvas
                            MuraliK Level 1

                            We have 7 images between the back and next button. When we click on the next it takes us one image at a time till the 7th image. Post that, the button is yet active and it should ideally get disabled

                            This is the same for the back button as well.

                            • 11. Re: Adobe Animate CC HTML 5 Canvas
                              kglad Adobe Community Professional & MVP

                              do the next and prev buttons work (using the code i suggested)?