views:

361

answers:

1

I've created a horizontal scroller and now I'm stuck on how to calculate the position of the content when the scroller is at a position.

private function checkDrag(event:Event):void {
  var procent:Number = (stage.stageWidth/(buttonLR.x+buttonLR.width))*(LISTmc.width)
  if (drag) {
   TweenLite.to(LISTmc,1,{x:-procent});
  }

//buttonLR width is also stretched according to how many data loads in,
thats why I'm trying to target the center of buttonLR
 }

A new content will be added from left to right everytime I click a button, so the scroller will be moving to the right end of the bar since its scrolling from left to right, and to show the latest content. So if I want to go back to the previous content I have to drag the scroller to the left.

Currently my code after I load in a new content and I click on the scroller, the content will move till the end of the left side of the stage (right corner of content x=0), and dragging it will makes the content move left more.

+1  A: 

To do this correctly you need to find the width that is outside the screen (extraWidth), and then calculate the position accordingly. I would also subtract the width of the button from the stageWidth when you calculate the percentage on which the button is placed:

   private function checkDrag(event:Event):void {
      if (LISTmc.width < stage.stageWidth) {
        return;
      }
      var extraWidth:Number = LISTmc.width - stage.stageWidth;
      var percentage:Number = buttonLR.x / (stage.stageWidth - buttonLR.width )
      var newXPos:Number = - extraWidth * percentage;
      if (drag) {
        TweenLite.to(LISTmc,1,{x:newXPos});
      }
    }

Hope it helps you

Vincent Osinga
working perfectly! Thanx!
Hwang