8 Replies Latest reply: Apr 30, 2014 1:25 AM by Ofir B RSS

    How to code a previous and next button using js?

    animatedw00d

      I'm pretty new to javascript, and I was able to figure out how to code a basic play button using js, however, I have no idea how to code a previous and next button using javascript so that a photo gallery with work in html 5. If someone could provide some aid, it would be much appreciated.

        • 1. Re: How to code a previous and next button using js?
          Ned Murphy CommunityMVP

          This does not appear to involve Flash.  You should probably find a javascript forum.

          • 2. Re: How to code a previous and next button using js?
            animatedw00d Community Member

            It does involve Flash.  Flash is able to use javascript through toolkit (a current update to Flash CS6 Professional. I already coded a play button using javascript in Flash. My question is how to code a previous and next button using js in action (where actionscript is coded). I know how to code a continous looping previous and next buttons using actionscript 3, but because html 5 doesn't use actionscript 3, I'm unable to use the interactive properities in my photo galleries online.  Also, I already tried some javascript forums to try to get some aid, however, I wasn't able to get any aid unless I was able to provide a code for these people to examine, and as I don't know what a previous and next code programed using javascript would even come close to looking like, I wasn't able to get any help. I also tried looking up previous and next javascript codes to see if I could cut and paste them into flash, however, every code that I tried was different and ended with the same result: failure.

            • 3. Re: How to code a previous and next button using js?
              Rob Dillon CommunityMVP

              Did you code the photo gallery in Flash and then convert it to html5? What does the code look like for the play button that you made?

              • 4. Re: How to code a previous and next button using js?
                animatedw00d Community Member

                I created a basic play button and coded in Flash and using toolkit converted it into html5, however, because I don't know what a next and previous javascript code looks like, I based the code off of a simple play button but with an this.onCLICK function. I'm hoping to try to get a continuous loop so that when I don't have to adjust the code when I Add more frames to the slide. Here's the previous and next code for you to take a look at. If you are able to help, I would very much apprecate the aid. Also, thanks for taking the time to ask about my problem.

                 

                Next and Previous code:

                 

                /* js

                 

                 

                this.stop();

                this.onClick = function() {

                          this.gotoNext();

                }

                 

                 

                this.onClick = function() {

                          this.gotoPrevious();

                }

                 

                 

                 

                */

                 

                Here's the code for the play button that works which I based the above code on:

                 

                /* js

                 

                 

                this.stop();

                this.onClick = function() {

                          this.gotoAndStop(14);

                }

                 

                 

                 

                 

                */

                • 5. Re: How to code a previous and next button using js?
                  Rob Dillon CommunityMVP

                  The actionscript functions for moving a frame forward or backward are nextFrame() and prevFrame(). In any case, if you are going to be using Flash to create this animation, you will be working within the CreateJS world. You can get more information on CreateJS at their website, http://www.createjs.com.

                   

                  Are you writing your code in Actionscript and then publishing to html5 and having Flash do the translation for you?

                  • 6. Re: How to code a previous and next button using js?
                    animatedw00d Community Member

                    I'm writing my code in js and then publishing it to Dreamweaver and then to Chrome to check to see if it works. Also, I didn't know that Flash could translate actionscript 3 into js; If Flash can translate actionscript into javascript, how would get that to happen?

                    • 7. Re: How to code a previous and next button using js?
                      animatedw00d Community Member

                      I found a solution!! Flash can translate actionscript3 into html by using a program that Google put out called Swiffy. You'll need to update adobe extension manager. I'll provide some links for you if you want to know how this works.

                       

                      Adobe extension manager:

                      http://blogs.adobe.com/cssdk/2012/08/adobe-extension-manager-cs6-6-0-2-update-out-now.html

                       

                      Google Swiffy:

                      https://www.google.com/doubleclick/studio/swiffy/

                       

                      Youtube video on how to use Swiffy:

                      https://www.youtube.com/watch?v=Vg0jxeAJyjA

                       

                      It works and I didn't even have to figure out how to code the js previous and next buttons. This program is better than the toolkit! Thanks for trying to help me with my problem.

                      • 8. Re: How to code a previous and next button using js?
                        Ofir B

                        I have the same problem. I need next and previous buttons to move from frame to frame in the stage timeline. I use Flash CC Canvas. With the help of the HTML5 code snippets, I wrote this code, which almost works (but isn't):

                         

                        this.stop();

                         

                        this.btn_prev.addEventListener("click", f_prev.bind(this));

                        function f_prev(frameNumber)

                        {

                             var frameNumber = this.currentFrame;

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

                         

                        }

                         

                         

                        this.btn_next.addEventListener("click", f_next.bind(this));

                        function f_next()

                        {

                             this.play();

                         

                        }

                         

                        For some reason that I don't understand, every time I press the btn_prev, the f_prev function runs twice, and going two frames backwards instead of one.

                        Please help!

                        TNX!