AS3：從他們自己的中心擴展多個元素每個

Question

這是我寫的使代碼生效的代碼，但是它從一個角度對它們進行縮放，就好像它們都在一個大容器中，而不是每個都在它自己的容器「middleContainer」。我怎樣才能解決這個問題？

謝謝！ :)

var thumbsContainer:MovieClip; 
var thumb_Loader: Loader; 
var thumb: Loader; 
var middleContainer: MovieClip; 

function createThumbs(): void { 
    thumbsContainer = new MovieClip(); 
    stage.addChild(thumbsContainer); 
    for (var i: uint = 0; i < 5 ; i++) { 
     thumb_URL = VideoList[i].@THUMB_URL; 
     thumb_Loader = new Loader(); 
     thumb_Loader.load(new URLRequest(Thumb_URL)); 
     thumb_Loader.contentLoaderInfo.addEventListener(Event.COMPLETE, viewThumbs) 
     thumb_Loader.x = i * (thumbWidth + thumbSpacing); 
    } 
} 

function viewThumbs(e: Event): void { 
    thumb = e.target.loader; 
    middleContainer = new MovieClip(); 
    middleContainer.addChild(thumb); 
    thumbsContainer.addChild(middleContainer); 

    thumb.x -= thumbWidth/2; 
    thumb.y -= thumbHieght/2; 
    middleContainer.x += thumbWidth/2; 
    middleContainer.y += thumbHieght/2; 

    var scaleUp:Tween = new Tween (middleContainer, "scaleX", Strong.easeOut, 0, 1, 1, true) 
} 
// Scales All Thumbs from One point not individually :((

Answer 1

我認爲這是因爲你的middleContainer的所有實例都位於相同的位置 - 即。集中在舞臺的起源。我認爲你需要水平放置這些實例（就像你現在爲實例所做的那樣），然後在容器內偏移縮略圖。

未經檢驗的，但類似如下：

var thumbsContainer:MovieClip; 
var thumb_Loader: Loader; 
var thumb: Loader; 
var middleContainer: MovieClip; 
var loadCount:int = 0; // use a load count to preserve index 

function createThumbs(): void { 
    thumbsContainer = new MovieClip(); 
    stage.addChild(thumbsContainer); 
    for (var i: uint = 0; i < 5 ; i++) { 
     thumb_URL = VideoList[i].@THUMB_URL; 
     thumb_Loader = new Loader(); 
     thumb_Loader.load(new URLRequest(Thumb_URL)); 
     thumb_Loader.contentLoaderInfo.addEventListener(Event.COMPLETE, viewThumbs); 

     // Need to do this to the middleContainer instances instead 
     //thumb_Loader.x = i * (thumbWidth + thumbSpacing); 
    } 
} 

function viewThumbs(e: Event): void { 

    thumb = e.target.loader; 
    thumb.x -= thumbWidth/2; 
    thumb.y -= thumbHeight/2; 

    middleContainer = new MovieClip(); 
    middleContainer.x = loadCount * (thumbWidth + thumbSpacing); // lay the container's out horizontally 
    middleContainer.addChild(thumb); 

    thumbsContainer.addChild(middleContainer); 

    // This is just reversing the offset you're usng to centre the thumb 
    //middleContainer.x += thumbWidth/2; 
    //middleContainer.y += thumbHieght/2; 

    loadCount ++; 

    var scaleUp:Tween = new Tween (middleContainer, "scaleX", Strong.easeOut, 0, 1, 1, true) 
} 

Answer 2

您的問題可能有做與這兩條線：

thumb.x -= thumbWidth/2; 
thumb.y -= thumbHieght/2; //you spelled height wrong in this variable name 

雖然你沒有表現出來，我猜thumbWidth & thumbHeight對於每個經過的縮略圖都會遞增。拇指的位置不應考慮除拇指寬度/高度以外的任何內容，並且任何真正的定位應僅在父容器（middleContainer）上完成。它更改爲以下僅抵消縮略圖的實際寬度：

thumb.x = thumb.width * -0.5; 
thumb.y = thumb.height* -0.5; 

---

所以，如果你的目標是定位在行（S）的縮略圖，你可以做以下的（我重命名thumbWidth和thumbHeight到一列x和rowY爲了清晰：

var rowHeight:Number = 0; 
var rowX:Number = 0; 
var rowY:Number = 0; 

function viewThumbs(e: Event): void { 

    thumb = e.target.loader; 
    middleContainer = new MovieClip(); 
    middleContainer.addChild(thumb); 
    thumbsContainer.addChild(middleContainer); 

    thumb.x = thumb.width * -0.5; 
    thumb.y = thumb.height* -0.5; 

    if(rowX + thumb.width > stage.stageWidth){ //stage.stageWidth being whatever you want the maximum row width to be 
     //create a new row 
     rowX = 0; 
     rowY += rowHeight + 10; //10 being padding 
     rowHeight = 0; //reset row height; 
    } 

    middleContainer.x = rowX; 
    middleContainer.y = rowY; 

    rowHeight = Math.max(rowHeight, thumb.height); //store the thumb with the biggest height in this row 

    rowX += thumb.width + 10; //10 being some padding - increments the x position 

    var scaleUp:Tween = new Tween (middleContainer, "scaleX", Strong.easeOut, 0, 1, 1, true) 

}