16 Replies Latest reply on Mar 1, 2010 6:00 PM by Harry Kunz

    Need help to navigate timeline with arrow keys...

    Spindrift Level 1

      Hi guys,

       

      I'm making a Flash presentation for a client which I will eventually publish as a Projector movie...

       

      All the animated slides are in individual scenes, but the individual scenes have several stop points.

       

      My client wants to be able to use the left and right arrow keys to skip backwards and forwards to these stop points. They also want to be able to press the spacebar at any point to stop and play the movie manually.

       

      Does anyone know how this can be done or know of a tutorial that does what I am after.

       

      Thank you very much and I hope to hear from you.

       

      James

        • 1. Re: Need help to navigate timeline with arrow keys...
          Ned Murphy Adobe Community Professional & MVP

          The stop points could be realized as frame labels that you store in an array and use an index variable to keep track of where you are in the timeline relative to that.  As you enter a frame with a label the index variable gets adjusted.  So when you click the RIGHT arrow key, a...

           

          gotoAndStop(labelArray[indexVariable+1]);

          // or -1 for the LEFT key 

          // or gotoAndPlay if that's the intent

           

          command can be issued by the key press code.

           

          As for the stopping and playing with the spacebar, you essentially use a Boolean variable that you toggle between true or false each time the key gets pressed. In your key event handling function you use a conditional to determine if the current status of that variable would mean to stop or to play, which you command, and then you change the status to the opposite.  Let's say you name that variable stopPlaying, initially it would have some value... yours to decide, but in the key event fhandling function you would have something to the effect of...

           

          if(stopPlaying){

               stop();

          } else {

               play());

          }

           

          stopPlaying = !stopPlaying;

           

          As for the key event handling, that all depends on which version of actionscript your are entertaining.  You should be able to find examples for that in the Flash help documentation for whichever version that is.

          • 2. Re: Need help to navigate timeline with arrow keys...
            Harry Kunz Level 4

            Here is a code on how you can handle Key presses for arrow left, arrow right, and space bar. To test it create a dynamic text field and give it an instance name of "KeyPress_TXT" then paste this code in frame 1. Just supply the code routines you want to execute on each of the case key press handlers (i.e. nextFrame() in Key.RIGHT).

             

            import mx.utils.Delegate;

             

            var txtKeyPress:TextField = this["KeyPress_TXT"];

            var oListener:Object = new Object();

            oListener.onKeyDown = Delegate.create(this, onKeyDown);

            Key.addListener(oListener);

             

            function onKeyDown():Void

            {

               switch(Key.getCode())

               {

               case Key.RIGHT:

                  txtKeyPress.text = "Key.RIGHT";

                  break;

               case Key.LEFT:

                  txtKeyPress.text = "Key.LEFT";

                  break;

               case Key.SPACE:

                  txtKeyPress.text = "Key.SPACE";

                  break;

               default:

                  txtKeyPress.text = "UNHANDLED KEY";

                  break;

               }

            }

            • 3. Re: Need help to navigate timeline with arrow keys...
              Spindrift Level 1

              Hi guys,

               

              Many thanks for your replies...

               

              Sorry to be a pain, I'm not really that amazing in Flash! Would you mind telling me exactly where to put the code you have given me and if I need to assign any actions to objects?

               

              Thank you again and I hope to hear from you.

               

              J

              • 4. Re: Need help to navigate timeline with arrow keys...
                Harry Kunz Level 4

                Just place it in the first frame of your flash file. Then whatever actions you would like to have for Right arrow and Left arrow press, place it under case: Key.RIGHT and Key.LEFT respectively. Simple programming, just need to know these commands:

                 

                for main timeline:

                this.play();

                this.stop();

                this.nextFrame();

                this.prevFrame();

                this.gotoAndStop(frame_number);

                this.gotoAndPlay(frame_number);

                 

                for movieclip timelines just replace "this" with your mc instance name like:

                myMc.nextFrame();

                • 5. Re: Need help to navigate timeline with arrow keys...
                  Ned Murphy Adobe Community Professional & MVP

                  As long as you're using AS2, Harry's code might help you.  But if you're not, you'll be wasting time trying to work with it because it won't work.  It always helps when you specify what version of actionscript you're using.  The code I provided works for either version, but I left out the key controls due to the lack of you indicating the AS version.

                  • 6. Re: Need help to navigate timeline with arrow keys...
                    Spindrift Level 1

                    Hi Harry,

                     

                    Thanks for the quick response...

                     

                    Right, I've finally got the test working - where do we go from here to be able to use the keys to control the timeline?

                     

                    Thank you very much for all your help guys.

                     

                    J

                    • 7. Re: Need help to navigate timeline with arrow keys...
                      Harry Kunz Level 4

                      Okay, that's great. So i'm assuming you're using AS2 because it worked. So you say you want to control the timeline with left and right arrow keys to navigate to the different stop points. First place the code in the first frame of "Scene 1". Make sure that this code only gets executed once meaning do not go back to frame 1 so that you won't add more Key listeners that cause multiple execution of key press handlers. You can use gotoAndStop(sScene, nFrame); where sScene is a string for the name of the scene (i.e. "Scene 1") and nFrame is the frame number of the frame with the stop. You might want to declare an array that stores all the stop/check points and declare a variable nCheckPoint that holds the index value of the current check point, which you will increment and decrement when pressing right and left arrows, respectively. Like this for example:

                       

                      import mx.utils.Delegate;

                       

                      var nCheckPoint:Number = 0;

                      var aCheckPoints:Array = new Array();

                      aCheckPoints.push( { sScene:"Scene 1", nFrame:10 } );

                      aCheckPoints.push( { sScene:"Scene 1", nFrame:27 } );

                      aCheckPoints.push( { sScene:"Scene 2", nFrame:54 } );

                      aCheckPoints.push( { sScene:"Scene 3", nFrame:17 } );

                       

                      var oListener:Object = new Object();

                      oListener.onKeyDown = Delegate.create(this, onKeyDown);

                      Key.removeListener(oListener);

                      Key.addListener(oListener);

                       

                      function onKeyDown():Void

                      {

                         switch(Key.getCode())

                         {

                         case Key.RIGHT:

                            nCheckPoint++

                            if(nCheckPoint >= aCheckPoints.length) {

                                nCheckPoint = 0;

                            }

                            GoToCheckPoint(nCheckPoint);

                            break;

                         case Key.LEFT:

                            nCheckPoint--;

                            if(nCheckPoint < 0) {

                                nCheckPoint = aCheckPoints.length - 1;

                            }

                            GoToCheckPoint(nCheckPoint);

                            break;

                         case Key.SPACE:

                            //Place your routine here maybe stop();

                            break;

                         default:

                            trace("UNHANDLED KEY");

                            break;

                         }

                      }

                       

                      function GoToCheckPoint(nValue:Number):Void

                      {

                          var oChkPoint:Object = aCheckPoints[nValue];

                          var sScene:String = oChkPoint["sScene"];

                          var nFrame:String = oChkPoint["nFrame"];

                          gotoAndStop(sScene, nFrame);

                      }

                      1 person found this helpful
                      • 8. Re: Need help to navigate timeline with arrow keys...
                        Spindrift Level 1

                        Excellent! Thank you, that works great!!!

                         

                        The only thing is that the keyboard buttons only seem to work when I go to 'Test Movie' but not in the Projector which I am publishing. Also, if I don't load the .swf from within Flash, the buttons don't seem to work.

                         

                        Do you know what may be causing this off the top of your head?

                         

                        Thank you so much for getting me this far! - much appreciated.

                         

                        J

                         

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

                         

                        Note for people using this:

                         

                        The last line of the code is...

                         

                        gotoAndStop("sScene, nFrame");

                         

                        ...not...

                         

                        gotoAndStop(sScene, nFrame);

                        • 9. Re: Need help to navigate timeline with arrow keys...
                          Harry Kunz Level 4

                          Oops i have a typo in the code. The gotoAndStop should be correct. The problem is i declared var nFrame as String instead of Number. Are you loading the SWF file with the arrow key press functionality into another SWF or will it be the standalone Projector? I tried creating a projector from the SWF and the arrow key press still works.

                          • 10. Re: Need help to navigate timeline with arrow keys...
                            Spindrift Level 1

                            Hi Harry,

                             

                            Thank you for getting back me...

                             

                            It's all as one FLA and SWF - nothing is being loaded into it.

                             

                            That's so strange...as I say, for me, I can go Control >>> Test Movie and it works perfectly. If I open the SWF outside of Flash the keys do nothing (but they work if I open the SWF within Flash itself). When I export it as a Projector the keys don't work.

                             

                            I know I know nothing but could it be something to with...

                             

                            import mx.utils.Delegate;

                             

                            ...as I was thinking maybe the SWF and Projector need a file from Flash to execute the code. I'm probably being stupid though!

                             

                            Have you got any other thoughts as to why it may not be working for me. I have the output set to ActionScript 2.0 and Flash Player 9 if that helps?

                             

                            Thank you for your invaluable help!

                             

                            J

                            • 11. Re: Need help to navigate timeline with arrow keys...
                              Spindrift Level 1

                              Hey,

                               

                              I've just worked out that I am being a complete idiot and had just discovered the shortcut keys that Flash provides to play/stop and forward/rewind the movie (<, > and ENTER). How embarrassing!

                               

                              So basically I have the code you kindly gave me in Frame 1, Scene 1.

                               

                              Are you able to point me in the right direction as to how I can get this to fully work now please?

                               

                              Thanks you for all your help.

                               

                              J

                              • 12. Re: Need help to navigate timeline with arrow keys...
                                Spindrift Level 1

                                hi guys,

                                 

                                below is where im at with the code now. ive got the arrow keys moving to points in the movie but it seems a bit erratic and only goes to some of the key points and not others. why could this be?

                                 

                                also, ive got the spacebar to perform a stop action. do you know how i can get it to play as well, like it can pause/play on command.

                                 

                                 

                                 

                                import mx.utils.Delegate;

                                 

                                 

                                 

                                var nCheckPoint:Number = -1;

                                 

                                var aCheckPoints:Array = new Array();

                                 

                                aCheckPoints.push( { sScene:"001", nFrame:69 } );

                                 

                                aCheckPoints.push( { sScene:"002_003", nFrame:34 } );

                                 

                                aCheckPoints.push( { sScene:"002_003", nFrame:137 } );

                                 

                                aCheckPoints.push( { sScene:"002_003", nFrame:240 } );

                                 

                                aCheckPoints.push( { sScene:"002_003", nFrame:344 } );

                                 

                                aCheckPoints.push( { sScene:"004_005", nFrame:80 } );

                                 

                                aCheckPoints.push( { sScene:"004_005", nFrame:191 } );

                                 

                                aCheckPoints.push( { sScene:"004_005", nFrame:281 } );

                                 

                                 

                                 

                                var oListener:Object = new Object();

                                 

                                oListener.onKeyDown = Delegate.create(this, onKeyDown);

                                 

                                Key.removeListener(oListener);

                                 

                                Key.addListener(oListener);

                                 

                                 

                                 

                                function onKeyDown():Void

                                 

                                {

                                 

                                   switch(Key.getCode())

                                 

                                   {

                                 

                                   case Key.RIGHT:

                                 

                                      nCheckPoint++

                                 

                                      if(nCheckPoint >= aCheckPoints.length) {

                                 

                                          nCheckPoint = 0;

                                 

                                      }

                                 

                                      GoToCheckPoint(nCheckPoint);

                                 

                                      break;

                                 

                                   case Key.LEFT:

                                 

                                      nCheckPoint--;

                                 

                                      if(nCheckPoint < 0) {

                                 

                                          nCheckPoint = aCheckPoints.length - 1;

                                 

                                      }

                                 

                                      GoToCheckPoint(nCheckPoint);

                                 

                                      break;

                                 

                                   case Key.SPACE:

                                 

                                      stop();

                                 

                                      break;
                                     
                                    case Key.SPACE:

                                 

                                      play();

                                 

                                      break;

                                 

                                   default:

                                 

                                      trace("UNHANDLED KEY");

                                 

                                      break;

                                 

                                   }

                                 

                                }

                                 


                                function GoToCheckPoint(nValue:Number):Void

                                 

                                {

                                 

                                    var oChkPoint:Object = aCheckPoints[nValue];

                                 

                                    var sScene:String = oChkPoint["sScene"];

                                 

                                    var nFrame:Number = oChkPoint["nFrame"];

                                 

                                    gotoAndPlay("sScene", nFrame);

                                 

                                }

                                • 13. Re: Need help to navigate timeline with arrow keys...
                                  Harry Kunz Level 4

                                  Sorry wasn't able to check online for a while. I figured the problem. I forgot that the timeline is playing, my bad. The code is perfect if going to each checkpoint was a gotoAndStop. But since we are playing the movie with gotoAndPlay, that means that when we reach a certain checkpoint without right arrow press, it should do a checkpoint increment too so that the logic won't get messed up. But that might get a little complicated, i found an easier way. Use this code below instead and place in the first checkpoint keyframe (which is frame 69) in your code with code nCheckPoint = 1, then and nCheckPoint = 2 in the next and so on and so forth until the last.

                                   

                                  function onKeyDown():Void

                                  {

                                  switch (Key.getCode())

                                  {

                                  case Key.RIGHT :

                                  GoToCheckPoint(nCheckPoint+1);

                                  break;

                                   

                                  case Key.LEFT :

                                  GoToCheckPoint(nCheckPoint-1);

                                  break;

                                   

                                  case Key.SPACE :

                                  stop();

                                  break;

                                   

                                  case Key.SPACE :

                                  play();

                                  break;

                                   

                                  default :

                                  trace("UNHANDLED KEY");

                                  break;

                                  }

                                  }

                                  • 14. Re: Need help to navigate timeline with arrow keys...
                                    Spindrift Level 1

                                    Hey Harry,

                                     

                                    Thank you for the reply and info...

                                     

                                    I am actually using a gotoAndStop now as this will allow the client to get to a certain point before pressing spacebar to play it.

                                     

                                    The arrow keys still aren't going to the specified frames now and never seems to get past the 4th checkpoint (Scene: 002_003, Frame: 240).

                                     

                                    Do you by any chance know what I am doing wrong?

                                     

                                    Thank you for all your invaluable help.

                                     

                                    J

                                     

                                    In each of the places I want the movie to stop I have:

                                     

                                    stop();
                                    nCheckPoint = 1

                                     

                                    ...and the next stop point has...

                                     

                                    stop();
                                    nCheckPoint = 2

                                     

                                    ...etc.

                                     

                                    The code I have in Frame 1 now is:

                                     

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

                                     

                                    import mx.utils.Delegate;

                                     

                                     

                                     

                                    var nCheckPoint:Number = -1;

                                     

                                    var aCheckPoints:Array = new Array();

                                     

                                    aCheckPoints.push( { sScene:"001", nFrame:69 } );

                                     

                                    aCheckPoints.push( { sScene:"002_003", nFrame:34 } );

                                     

                                    aCheckPoints.push( { sScene:"002_003", nFrame:137 } );

                                     

                                    aCheckPoints.push( { sScene:"002_003", nFrame:240 } );

                                     

                                    aCheckPoints.push( { sScene:"002_003", nFrame:344 } );

                                     

                                    aCheckPoints.push( { sScene:"004_005", nFrame:80 } );

                                     

                                    aCheckPoints.push( { sScene:"004_005", nFrame:191 } );

                                     

                                    aCheckPoints.push( { sScene:"004_005", nFrame:281 } );

                                     

                                    aCheckPoints.push( { sScene:"006", nFrame:80 } );

                                     

                                    aCheckPoints.push( { sScene:"007", nFrame:80 } );

                                     

                                    aCheckPoints.push( { sScene:"007", nFrame:125 } );

                                     

                                    aCheckPoints.push( { sScene:"007", nFrame:150 } );

                                     

                                    aCheckPoints.push( { sScene:"007", nFrame:175 } );

                                     

                                    aCheckPoints.push( { sScene:"007", nFrame:200 } );

                                     

                                    aCheckPoints.push( { sScene:"007", nFrame:217 } );

                                     

                                    aCheckPoints.push( { sScene:"007", nFrame:234 } );

                                     

                                    aCheckPoints.push( { sScene:"007", nFrame:251 } );

                                     

                                    aCheckPoints.push( { sScene:"007", nFrame:302 } );

                                     

                                    aCheckPoints.push( { sScene:"007", nFrame:352 } );

                                     

                                    aCheckPoints.push( { sScene:"007", nFrame:402 } );

                                     

                                     

                                     

                                    var oListener:Object = new Object();

                                     

                                    oListener.onKeyDown = Delegate.create(this, onKeyDown);

                                     

                                    Key.removeListener(oListener);

                                     

                                    Key.addListener(oListener);

                                     

                                     

                                     

                                    function onKeyDown():Void

                                     

                                    {

                                     

                                    switch (Key.getCode())

                                     

                                    {

                                     

                                    case Key.RIGHT :

                                     

                                    GoToCheckPoint(nCheckPoint+1);

                                     

                                    break;

                                     

                                     

                                     

                                    case Key.LEFT :

                                     

                                    GoToCheckPoint(nCheckPoint-1);

                                     

                                    break;

                                     

                                     

                                     

                                    case Key.RETURN :

                                     

                                    stop();

                                     

                                    break;

                                     

                                     

                                     

                                    case Key.SPACE :

                                     

                                    play();

                                     

                                    break;

                                     

                                     

                                     

                                    default :

                                     

                                    trace("UNHANDLED KEY");

                                     

                                    break;

                                     

                                    }

                                     

                                    }

                                     


                                    function GoToCheckPoint(nValue:Number):Void

                                     

                                    {

                                     

                                        var oChkPoint:Object = aCheckPoints[nValue];

                                     

                                        var sScene:String = oChkPoint["sScene"];

                                     

                                        var nFrame:Number = oChkPoint["nFrame"];

                                     

                                        gotoAndStop("sScene", nFrame);

                                     

                                    }

                                    • 15. Re: Need help to navigate timeline with arrow keys...
                                      Spindrift Level 1

                                      Hi Harry,

                                       

                                      Got it! - just used frame labels instead of scene/frame number and it is working sweetly!

                                       

                                      Thank you very much for all your help, hard work and patience - it's very, very much appreciated.

                                       

                                      Take care and thank you again,

                                       

                                      J

                                       

                                       

                                      Here's the code I eventually went with:

                                       

                                       


                                      import mx.utils.Delegate;



                                      var nCheckPoint:Number = -1;

                                      var aCheckPoints:Array = new Array();

                                      aCheckPoints.push({nFrame:"stop001"});

                                      aCheckPoints.push({  nFrame:"stop002" });

                                      aCheckPoints.push({ nFrame:"stop003" });

                                      aCheckPoints.push({nFrame:"stop004" });

                                      aCheckPoints.push({ nFrame:"stop005" });

                                      aCheckPoints.push({ nFrame:"stop006" });

                                      aCheckPoints.push({ nFrame:"stop007" });

                                      aCheckPoints.push({ nFrame:"stop008" });

                                      aCheckPoints.push({ nFrame:"stop009" });

                                      aCheckPoints.push({ nFrame:"stop010" });



                                      var oListener:Object = new Object();

                                      oListener.onKeyDown = Delegate.create(this, onKeyDown);

                                      Key.removeListener(oListener);

                                      Key.addListener(oListener);



                                      function onKeyDown():Void {

                                          switch (Key.getCode()) {

                                              case Key.RIGHT :

                                                  nCheckPoint++;

                                                  if (nCheckPoint >= aCheckPoints.length) {

                                                      nCheckPoint = 0;

                                                  }

                                                  GoToCheckPoint(nCheckPoint);

                                                  break;

                                              case Key.LEFT :

                                                  nCheckPoint--;

                                                  if (nCheckPoint < 0) {

                                                      nCheckPoint = aCheckPoints.length - 1;

                                                  }

                                                  GoToCheckPoint(nCheckPoint);

                                                  break;

                                              case Key.SPACE :

                                                  play();

                                                  break;

                                              case Key.ENTER :

                                                  stop();

                                                  break;

                                              default :

                                                  trace("UNHANDLED KEY");

                                                  break;

                                          }

                                      }
                                      function GoToCheckPoint(nValue:Number):Void {

                                          var oChkPoint:Object = aCheckPoints[nValue];

                                          var nFrame:Number = oChkPoint["nFrame"];

                                          gotoAndStop(nFrame);

                                      }