Continous number scroller/slider

Report · Oct 28, 2010

Hi there,

Going to try and make this sound simple (good luck there)

At the moment creating a number slider but come across a stumbling block...

The image above depicts a slider which scrolls through a set of numbers (13 to be exact) using the directional buttons to the sides.

Have set up a timer function on MOUSE_DOWN functions of the buttons to move the numbers across at intervals when you click and hold the buttons.

A for loop animates all the numbers (which are in movie clips) across the x axis, within that loop an if statement checks to see if one of the number clips has gone past a certain point of the x axis and then sets its x position to go back to the start - thus making the scrolling continouos and looping. As soon as you get to the number 13 you will see 1 come just after that.

So yeah in short, the looping is not working - would anyone be able to assist me in telling me what may be wrong with my logic?

Ok enough explaining - I think this may be done better with a code snippet:

(in particular the moveSampleFwd and moveSampleBkwd functions)

package com.eq.rarc  
{
     
     import flash.display.MovieClip;
     import flash.events.Event;
     import flash.events.TimerEvent;
     import flash.utils.Timer;
     import flash.events.MouseEvent;
     import flash.text.*;
     import fl.transitions.Tween;
     import fl.transitions.TweenEvent;
     import fl.transitions.easing.*;
     import flash.display.SimpleButton;
     import flash.display.Sprite;

     
     public class Document extends MovieClip 
     {

          public static var slideMoveBtns:Array = new Array("nextSample", "prevSample");
          private var sliderNumberLabels:Array = new Array("sampleNumber1","sampleNumber2","sampleNumber3","sampleNumber4","sampleNumber5","sampleNumber6","sampleNumber7","sampleNumber8","sampleNumber9","sampleNumber10","sampleNumber11","sampleNumber12","sampleNumber13");
          private var clickMove:Timer = new Timer(300, 0);
          private var sliderMax:Number = 334.75;
          private var sliderMin:Number = -25.75;
          
          public function Document() 
          {
               addEventListener(Event.ADDED_TO_STAGE, init, false, 0, true);
          }
          
          public function init(e:Event):void
          {
               createSlideNum();
               initiateButtons();
          }
          
          public function createSlideNum():void
          {
               for(var i = 0; i < sliderNumberLabels.length; i++)
               { 
               slider.sliderWindow["sampleNumber"+i].slideNum.text = i+1;
               }
          }
          
          public function initiateButtons():void
          {
               slider.nextSample.addEventListener(MouseEvent.MOUSE_DOWN, scrollSamplesFwd);
               slider.prevSample.addEventListener(MouseEvent.MOUSE_DOWN, scrollSamplesBkwd);
               slider.nextSample.addEventListener(MouseEvent.MOUSE_UP, stopScrolling);
               slider.prevSample.addEventListener(MouseEvent.MOUSE_UP, stopScrolling);
               slider.nextSample.addEventListener(MouseEvent.ROLL_OVER, moveSampleRolledOverOut);
               slider.nextSample.addEventListener(MouseEvent.ROLL_OUT, moveSampleRolledOverOut);
               slider.prevSample.addEventListener(MouseEvent.ROLL_OVER, moveSampleRolledOverOut);
               slider.prevSample.addEventListener(MouseEvent.ROLL_OUT, moveSampleRolledOverOut);
               slider.prevSample.buttonMode = true;
               slider.nextSample.buttonMode = true;
          }
          
          public function scrollSamplesFwd(e:MouseEvent):void
          {
               clickMove.addEventListener(TimerEvent.TIMER, moveSampleFwd);
               clickMove.start();
          }
          
          public function scrollSamplesBkwd(e:MouseEvent):void
          {
               clickMove.addEventListener(TimerEvent.TIMER, moveSampleBkwd);
               clickMove.start();
          }
          
          public function stopScrolling(e:MouseEvent):void
          {
               clickMove.removeEventListener(TimerEvent.TIMER, moveSampleFwd);
               clickMove.removeEventListener(TimerEvent.TIMER, moveSampleBkwd);
               clickMove.stop();
          }
          
          public function moveSampleFwd(e:TimerEvent):void
          {
               for(var j = 0; j < sliderNumberLabels.length; j++)
                    {
                         new Tween(slider.sliderWindow["sampleNumber"+j], "x", None.easeOut, slider.sliderWindow["sampleNumber"+j].x,slider.sliderWindow["sampleNumber"+j].x-25.75,0.2, true);
                         if (slider.sliderWindow["sampleNumber"+j].x < sliderMin)
                         {
                              slider.sliderWindow["sampleNumber"+j].x = sliderMax;
                         }
                    }
          }
          
          public function moveSampleBkwd(e:TimerEvent):void
          {
               for(var i = 0; i < sliderNumberLabels.length; i++)
                    {
                         new Tween(slider.sliderWindow["sampleNumber"+i], "x", None.easeOut, slider.sliderWindow["sampleNumber"+i].x,slider.sliderWindow["sampleNumber"+i].x+25.75,0.2, true);
                         if (slider.sliderWindow["sampleNumber"+i].x > sliderMax)
                         {
                              slider.sliderWindow["sampleNumber"+i].x = sliderMin;
                         }
                    }
          }
          
          function moveSampleRolledOverOut(e:MouseEvent):void
          {
               if(e.target.currentFrame == 1)
               {
                    e.target.gotoAndStop(10);
               } else {
                    e.target.gotoAndStop(1);
               }
          }

     }
     
}

Report · Oct 28, 2010

Think I kinda answered myself....

I had a suspicion that my timer wasn't running fast enough to catch the x position of my numbers.

Thus I removed the 'if' statement from moveSampleFwd and moveSampleBkwd functions and just left the tween function on them.

I set up an ENTER_FRAME event on the stage instead which ran the for loop with two if statements inside as described below:

public function checkSliderNumx(e:Event):void { for(var i = 0; i < sliderNumberLabels.length; i++) { if (slider.sliderWindow["sampleNumber"+i].x < sliderMin) { slider.sliderWindow["sampleNumber"+i].x = sliderMax-51.5; } if (slider.sliderWindow["sampleNumber"+i].x > sliderMax) { slider.sliderWindow["sampleNumber"+i].x = 0; } } }