Help with Math for smooth scrolling

[jrm213]

Hi,

Envrironment: Flash CS3, AS3

I have a horizontal image scrolling project that I am working on, and it works but is not super smooth, I would like it to be smoother when it scrolls, and realize that this is a function of pixels scrolled over time and the FPS of the document.

Right now I am moving the items 1 pixel at a time on a timer with delay of 8 to get it to scroll at the speed I want. I am moving it at 1 pixel in order to catch exactly when an object should wraparound to the beginning of the scroller to show up again. So I don't know that I can really change the number of pixels moved to more than 1 and still have the images spaced perfectly, which makes me think I need to increase or decrease the FPS and or the timer delay to make it scroll smoother. Right now it is at 30FPS and as mentioned the timer delay is 8. Small changes to the delay is not a problem.

This is one aspect of flash i don't fully understand. I would really like to know how to figure this out so I can apply it to future projects as well without doing trial and error to make it smooth. Can it be function, like a way to figure out I need to move a 120pixel picture 60 pixels in 2 seconds, what should my FPS be and the picture size and movement size and number of seconds can be variables?

Thanks for any help or points in the right direction.

[Taidaishar]

Can you post your code for the scrolling?

FYI, 30FPS is the maximum that flash applications will support... or something like that... maybe it's the max that most computers can use... I don't remember the reason, but going higher than 30 is a waste... at least, for the time being.

[jrm213]

function moveLeftAction(event:TimerEvent)
{
   for(var t=0;t<scrollerbar.numChildren;t++)
  {
     var child:Object = new Object;
     child = scrollerbar.getChildAt(t);
     if(child is Sprite || child is TextField)
     {
        child.x = child.x - 1;
        if(child.x <= fallOffLeft + photoPad)
        {
           child.x = startRight;
        }
     }
  }
}

the function for moving right is the same except it is +1 instead of -1 and swap Left and Right variable names.

scrollerbar is dynamically loaded with images and descriptions from an XML file.

[Taidaishar]

Sorry, can you post the code for the delay function also?

Do you have a working version that we can see?

[jrm213]

var moveLeftTimer:Timer = new Timer(8);
moveLeftTimer.addEventListener(TimerEvent.Timer,moveLeftAction);

left_button.addEventListener(MouseEvent.MOUSE_OVER,moveLeft);
left_button.addEventListener(MouseEvent.MOUSE_OUT,moveLeftStop);

function moveLeft(e:Event):void
{
  moveLeftTimer.start();
}

function moveLeftStop(e:Event):void
{
   moveLeftTimer.stop();
}

So when they hover the left button it starts the timer that scrolls it, and when they are no longer hovering the button, it stops the timer and the scrolling.

I'm sorry, I do not have a working version I can put anywhere available outside of my office at the moment.

[Taidaishar]

First off, the Timer function is set in Milliseconds. So you're moving the thing 1 pixel every 8 milliseconds. That seems a little excessive.

Maybe change it to 10 pixels every 80 milliseconds.... that should be the same pace, but it will reduce the number of function calls.

[jrm213]

I tried the above, but that makes it look a lot less smooth and also is messing up the spacing between the images when they wraparound after exiting the viewable area because it is moving too far past the falloff point before moving it to its correct wrapped position.

Maybe I am doing something wrong but from my thinking the only way to keep everything in it's correct position all the time is to move by 1.

Moving by 2, seems to work ok as well, which cuts the function calls to 62.5 from 125 calls per second with updating the delay to 16.

[Taidaishar]

Hmmm... I'm not sure what to tell you. Maybe someone else has some other ideas.