4 Replies Latest reply on Aug 16, 2012 1:47 AM by Adrock218

    Moving forwards and backwards through keyframes

    Adrock218

      Hi I was wanting to be able to use a slider on a webpage to be able to move forwards and backwards through the keyframes. I have 10 images, each on different keyframes and I want to be able to move from the first image to the last image using an on-screen, mouse controlled slider, similar to the way you move along the timeline in the program itself. I have found a number of tutorials on the "component slider" however they only refer to changing values such as the size of an object or volume, and not moving through the keyframes which is what I am after. This is for a University assignment and any help would be greatly appreciated.
      Cheers!

        • 1. Re: Moving forwards and backwards through keyframes
          kglad Adobe Community Professional & MVP

          there's not much to do if you've followed any of the slider tutorials.  just associate your slider's values with your keyframes.

           

          for example, you could use an array of keyframes and use a slider with values from 0 to 9:

           

          var keyframeA:Array=["yourfirstframelabel","secondlabel",...];

           

          // in your slider listener:

           

          gotoAndStop(keyframeA[yourslider.value]);

          1 person found this helpful
          • 2. Re: Moving forwards and backwards through keyframes
            Adrock218 Level 1

            Thanks for that! I'll rename my keyframes after you lol and see how I go.... I'm using this video http://www.youtube.com/watch?v=NjQ_EUCIFvI for the slider.

            • 3. Re: Moving forwards and backwards through keyframes
              kglad Adobe Community Professional & MVP

              you're welcome.

               

              p.s.  please mark helpful/correct responses.

              • 4. Re: Moving forwards and backwards through keyframes
                Adrock218 Level 1

                Hi again

                 

                I have added your suggested code to my actionscript for the slider and I can't get it to run. Each of the 12 images are named Frame_1, Frame_2, Frame_3 etc
                Do I need to convert these images to symbols?

                 

                From the youtube video I was able to get the slider working as shown and have copied and pasted it into my own project.

                 

                Obviously the slider needs to contol the playback of the 12 images. At this stage when I preview the swf the slider bar appears however the playback is in a continual loop. The cursor sees the slider as it changes to a hand sybol when I hover over the button however I when I click and attempt to move the slider nothing happens.

                 

                This is the main action script for the slider which is found when clicking on the slider for Symbol 3 and is found in the layer AS3 in this image -  http://i1194.photobucket.com/albums/aa373/lucidimagery/Flash/Screenshot2012-08-16at60032PM .png

                 

                Note: The asterisks are added only to highlight your suggestion and do not appear in the actual script

                 

                 

                import flash.events.MouseEvent;

                ***var keyframeA:Array = ["Frame_1","Frame_2","Frame_3","Frame_4","Frame_5","Frame_6","Frame_7",

                                                                     "Frame_8","Frame_9","Frame_10","Frame_11","Frame_12"];***

                var knobWidth:Number = sliderKnob.width;

                var trackWidth:Number = sliderTrack.width;

                var trackX:Number = sliderTrack.x;

                var boundWidth = trackWidth - knobWidth;

                var boundsRect:Rectangle = new Rectangle(trackX, 0, boundWidth, 0);

                // Enable drag

                sliderKnob.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);

                function startDragging(event:MouseEvent) {

                          sliderKnob.startDrag(false, boundsRect);

                }

                // Stop drag

                sliderKnob.addEventListener(MouseEvent.MOUSE_UP, stopDragging);

                sliderKnob.addEventListener(MouseEvent.MOUSE_OUT, stopDragging);

                function stopDragging(event:MouseEvent) {

                          sliderKnob.stopDrag();

                }

                 

                sliderTrack.addEventListener(MouseEvent.CLICK, snapTo);

                function snapTo(event:MouseEvent) {

                          MovieClip(parent).mouse_txt.text = "Mouse X on slider is: "+ mouseX;

                          if (mouseX < boundWidth && mouseX > knobWidth) {

                                    sliderKnob.x = mouseX;

                          }

                }

                 

                 

                 

                This is the actionscript in the slider listener which appears on the "Scene 1" timeline and is contained in the AS3 layer in this image - http://i1194.photobucket.com/albums/aa373/lucidimagery/Flash/Screenshot2012-08-16at60425PM .png

                 

                Note: The asterisks are added only to highlight your suggestion and do not appear in the actual script

                 

                import flash.events.Event;

                 

                 

                // Enter Frame Event

                var sliderValue:uint = mySlider.sliderKnob.x / 3;

                addEventListener(Event.ENTER_FRAME, onEnterFrame);

                function onEnterFrame(event:Event):void {

                          sliderValue = mySlider.sliderKnob.x / 3;

                          status_txt.text = "Slider position is: "+sliderValue;

                ***gotoAndStop(keyframeA[mySlider.sliderKnob.value]);***

                }

                 

                I was wondering if you had any suggestions?