將滾動條滾動到內容滾動 - AS3

如果這有點令人困惑，我很難理解，但我會盡我所能解釋它。將滾動條滾動到內容滾動 - AS3

基本上，我創建了一個滾動頁面，允許您擁有超出舞臺並向上或向下滑動以查看它的內容。

在這種情況下，一個movieclip階段掩模下一個對象（比階段更高）和滑動向上/向下的大小影響的對象y位置，顯露更多。

我被困在的部分是獲得側面的「滾動條」對象，以匹配溢出對象的頂部和底部的位置;由於滾動條必須停留在舞臺上，當到達對象的底部時，由於滾動條以相同的速度移動，所以滾動條最終脫離舞臺，所以在這種情況下，滾動條需要移動速度較慢，以便在另一個對象位於底部。

它的編碼，現在我只能似乎通過

scrollbar.y = (e.target.y + barY);

要匹配與

scrollbar.y = (e.target.y - barY);

對面達到頂峯，但是我似乎無法同時實現的方式。

我在AS3（flash CC）中編寫了這個代碼，移動版是我想要的發佈平臺，我將附上我的代碼以及下面的一些截圖。

var ease:int = 6; 
var targY:int = dragMe.y; 
var barY:int = scrollbar.y; 

var drag:Boolean = false; 
var pos:Number = 0; 

var minY:Number = 0 + dragMe.height/2; // how low the top can go 
var maxY:Number = stage.stageHeight - dragMe.height/2; // how high the bottom can go 

var barMax:Number = 0 + scrollbar.height; // how high the bar can go 
var barMin:Number = stage.stageHeight - scrollbar.height; // how low the bar can go 

dragMe.mask = mcMask; 
mcMask.visible = false; 

dragMe.addEventListener(Event.ENTER_FRAME, dragging); 
dragMe.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown); 
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUp); 

function dragging(e:Event):void { 
    if (drag) { 
     targY = mouseY + pos; 
    } 
    // restrict scrolling to stage 
    targY = Math.min(targY, minY); // how low the top can go 
    targY = Math.max(targY, maxY); // how high the bottom can go 

    barY = Math.min(barY, barMin); // how low the bar can go 
    barY = Math.max(barY, barMax); // how high the bar can go 

    // Movement of the text 
    e.target.y += (targY - e.currentTarget.y)/ease; 
    // Movement of the bar 
    scrollbar.y = (e.target.y - barY); 

} 

function mouseUp(e:MouseEvent):void { 
    drag = false; 
} 

function mouseDown(e:MouseEvent):void { 
    pos = e.currentTarget.y - mouseY; 
    drag = true; 
}

任何幫助將是大大感謝！

灰色=階段黑色=外面階段

好： http://i.stack.imgur.com/qvAoz.png

壞： http://i.stack.imgur.com/FvHIm.png

來源

2014-10-31 shaneparsons

你在哪裏設置滾動條的高度？ – BadFeelingAboutThis 2014-10-31 20:05:12

滾動條已經在舞臺上，但** barMin **和** barMax **控制着舞臺上舞臺的高度。如果在條上放置了觸摸事件，則無法將其拖動到高於舞臺的頂部/底部 – shaneparsons 2014-10-31 20:12:54

我卡上收到「滾動條」的部分對象上該邊與溢流物體的頂部和底部的位置相匹配;

那麼，沒有必要讓滾動條對象匹配溢出對象的位置，你應該將它綁定到masker對象的座標。順便說一句，我通常收集IDE中的所有UI元素，然後解析它們。例如，如果我需要添加一個滾動條，我只需要三個元素：

容器 - 所有內容都將被正確添加;
掩碼
滾動條動畫片段，它由兩個MC組成：bg和一個欄。

在這種情況下，我不需要將這些元素放在代碼中，而只需調用一個函數來處理這些元素。代碼本身很簡單。您知道遮罩的高度，容器的高度和位置，以及滾動條背景的高度和條的當前位置。所有你需要的是處理事件並作出相應的反應。

E.g.如果您使用滾動條滾動，只需翻譯欄的當前座標並更新容器的位置。如果您要拖動內容，請相應地更新酒吧的位置。

此外，還有一個更好的方法來拖動滑塊：

private static function drag(e:MouseEvent):void 
{ 
    var myBounds:Rectangle = new Rectangle(bar.x, 0, 0, barBg.height-bar.height+8); 
    bar.startDrag(false, myBounds); 
    bar.addEventListener(Event.ENTER_FRAME, update); 
} 

static private function stopdrag(e:*):void 
    { 
     bar.stopDrag(); 
     update(null); 
     bar.removeEventListener(Event.ENTER_FRAME, update); 

    } 

    static private function update(e:Event):void 
    { 
     var scroll_run_length:Number = barBg.height - bar.height + 8; 
     var modificator:Number = (content.height-masker.height)/scroll_run_length; 
     content.y = startContY -(bar.y * modificator); 

    }

來源

2014-11-01 09:17:17 Platon

將滾動條滾動到內容滾動 - AS3

回答

相關問題