6 Replies Latest reply on Sep 2, 2010 5:11 PM by snowgage

    Scrubbing timeline with slider - how to smooth it out?

    snowgage

      I've created a simple slider to scrub through some frames of a MC named states.  Each frame has the same MC (states) just in a different color.

       

      I've setup the slider using

       

      slider.setSize(200,1);
      slider.maximum=states.totalFrames;
      slider.liveDragging=true;
      slider.addEventListener(Event.CHANGE,updatemc);
      function updatemc(e:Event){
          states.gotoAndStop(slider.value);
      }


      I'd like the trainsition from one frame to the next to be smooth so that there is no blunt change when the frames change.  I can easily add a shapetween between frames which creates the smooth transition I am looking for but, I only want the slider to stop on the 5 main frames.  Can someone suggest how I'd accomplish this either through a code mod. or something on the timeline?

       

      Thanks in advance,

       

      Josh

        • 1. Re: Scrubbing timeline with slider - how to smooth it out?
          Rothrock Level 5

          The easiest solution might be to do what you have suggested and then when they release the slider "snap" to the nearest main frame.

           

          Of course that doesn't take into account if they keep holding the slider down and move it very slowly. In that sense the screen might look stopped even though they are still dragging the slider.

           

          I guess it is hard to give advice without know exactly what the content looks like, what you are imagining, how the user is to relate to this process and what they are going to get out of it, etc.

          1 person found this helpful
          • 2. Re: Scrubbing timeline with slider - how to smooth it out?
            snowgage Level 1

            Here is the swf

             

            http://dl.dropbox.com/u/6029868/index.swf

             

            I have 4 frames with differnt colored MCs on each frame. Between these frames I've added a few empty frames and shape tweens.  This smooths the transition and the color melds between frames.  I want the slider to only stop on one of those 4 original frames.  It's fine if it snaps in one direction or the other between stops.

             

            Does this clear up my question?

             

            thanks,

             

            j

            • 3. Re: Scrubbing timeline with slider - how to smooth it out?
              Rothrock Level 5

              Behind a firewall at work and I can't get that.

               

              Another approach might tween the values of the timeline playhead.

               

              So that the slider still only has 4 positions but then, for example, you multiply the value of the slider position by 10 (if there were 9 tweening frames in between) and then tween the value of the playhead position from its current location to the desired location....

              1 person found this helpful
              • 4. Re: Scrubbing timeline with slider - how to smooth it out?
                snowgage Level 1

                Can you view this?

                 

                http://gagecartographics.com/flsh/

                 

                I found out how to set my snap interval which helps.  I just need to smooth out the transition.  Hmm..  Something tells me I should not be doing this on the timeline but in my code.

                 

                slider.setSize(200,1);
                slider.maximum=15;
                slider.liveDragging=true;

                 

                slider.addEventListener(Event.CHANGE,updatemc);

                 

                function updatemc(e:Event){
                    states.gotoAndStop(slider.value);
                    trace(slider.value);
                }

                 

                stop();

                 

                var month:Array = ["December","January"];
                var day:Array = ["Monday","Tuesday","Wednesday","Thursday"];
                var date:Array=[10,11,12,13];

                 

                datetext.text=day[1];

                 

                slider.snapInterval=5;

                • 5. Re: Scrubbing timeline with slider - how to smooth it out?
                  Rothrock Level 5

                  I meant to say easing. Here is what I did.

                   

                  I didn't have my content in a states movieclip, it was on the main timeline, but you should be able to get the idea.

                   

                  At frames 1, 15, 30, 45, and 60 I put my different graphics. I created tweens between 2-14, 16-29, etc.

                   

                  Then I put my scrubber and this code:

                   

                  stop();
                  var home:MovieClip=this;
                  var interval:Number=15;
                  var easing:Number=1.5
                  slider.minimum=0;
                  slider.maximum=Math.round(home.totalFrames/interval);
                  slider.liveDragging=true;

                  home.addEventListener(Event.ENTER_FRAME,handleFrame)

                  function handleFrame(e:Event){
                  var target:Number=slider.value*interval
                  var frame:Number=Math.round(target+(home.currentFrame-target)/easing)
                  if(Math.abs(frame-target)<=1){
                    frame=target
                  }
                  home.gotoAndStop(frame)
                  }

                   

                  Try different values for the easing. Higher numbers and you will see less of the tweens. Lower numbers more.

                  • 6. Re: Scrubbing timeline with slider - how to smooth it out?
                    snowgage Level 1

                    Perfect!  Thanks Rothrock..  This accomplishes exactly what i was after...

                     

                    best,

                     

                    -j