CODEWITHSUNDEEP
actionscript-3scroll
Hwang
Hwang

Reputation: 502

AS3 Scrollbar content formula

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.

Upvotes: 2

Views: 1816

Answers (2)

Ali Tavakoli
Ali Tavakoli

Reputation: 1

Here is also a great OOP scrollbar you can use, it also supports blur, ease, etc... also uses Greensock easing effects

AS3 Scrollbar (ease, blur, abstract, OOP)

Upvotes: 0

Vincent Osinga
Vincent Osinga

Reputation: 1039

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

Upvotes: 3

Related Questions