Actionscript 3：動態添加限制在容器中的動畫片段

Question

最後編輯：已解決！

嗯，我無法在這裏找到完整的答案，但我終於得到了我之後的東西。非常感謝您的全力幫助和耐心。

作爲附註：我想我可能一直在使用int和Number類型有問題，仔細檢查我的解決方案後，我意識到Number正在被使用而不是int。結果數字包含浮點數，而int不包含。每當我試圖解決這個問題時，我的數字可能都是四捨五入的。對於我所知道的，TDI的答案可能已經被發現，並且使用int來填充可能會累積四捨五入的數字。哦，那麼你每天都會學到一些東西..

正確的代碼將電影剪輯限制爲在時尚我一直在尋找的容器影片剪輯（或雪碧或其他）是這樣的：

var picContainer:PicContainer = new PicContainer(); 
picContainer.x = stage.stageWidth/2 - picContainer.width/2; 
picContainer.y = stage.stageHeight/2 - picContainer.height/2; 
addChild(picContainer); 

var totalPics:int = 17; 

var pic:Pic = new Pic(); //make an instance just to get its width 

var xRange:Number = picContainer.width - pic.width; 
var spacing:Number = xRange/(totalPics - 1); 

//A little optimization: only need to calculate this number ONCE: 
var yLoc:Number = picContainer.height/2 - pic.height/2; 

for(var i:int = 0; i < totalPics; i++) { 
    pic = new Pic(); 
    pic.x = i * spacing; 
    pic.y = yLoc; 
    picContainer.addChild(pic); 
} 

的邏輯是相當簡單的，我不知道爲什麼我不能得到它我自己，因爲我提請圖表說明這個邏輯。然而，我不能把這些數字放在正確的地方，否則我不會問，我會嗎？P

獎勵內容！ 作爲一個額外的好處（如果有人發現此線程尋找答案..） 你也可以通過使用此代碼從中心點（但他們仍然按照從左到右的順序） ：

var picContainer:PicContainer = new PicContainer(); 
picContainer.x = stage.stageWidth/2 - picContainer.width/2; 
picContainer.y = stage.stageHeight/2 - picContainer.height/2; 
addChild(picContainer); 

var totalPics:int = 5; 

var pic:Pic = new Pic(); //make an instance just to get its width 

var padding:Number = (picContainer.width - (pic.width * totalPics))/(totalPics + 1); 

for(var i:int = 0; i < totalPics; i++) { 
    pic = new Pic(); 
    pic.x = padding + i * (pic.width + padding); 
    pic.y = picContainer.height/2 - pic.height/2; 
    picContainer.addChild(pic); 
} 

試一試，這些使得偉大的縮略圖停靠引擎！

第一編輯：嗯，TDI有一些進步，但不是一個完整的解決方案。

你看，問題仍然是電影剪輯沒有完全壓入容器，最後一個或兩個仍然伸出。再次

var newPicContainer:picContainer = new picContainer(); 
var newPic:pic; 

var picwidth:int = 100; 
var amountofpics:int = 22; 
var i:int; 

//add a container 
addChild(newPicContainer); 

//center our container 
newPicContainer.x = (stage.stageWidth/2)- (newPicContainer.width/2); 
newPicContainer.y = (stage.stageHeight/2)- (newPicContainer.height/2); 

var totalpicwidth:int = picwidth*amountofpics; 

var totalpadding:int = newPicContainer.width - totalpicwidth; 

var paddingbetween:int = (totalpadding/amountofpics); 

for (i = 0; i < amountofpics; ++i) 
{ 
    //make a new mc called newPic(and i's value) eg. newPic1 
    this['newPic' + i] = new pic(); 
    this['newPic' + i].width = picwidth; 

    //add our pic to the container 
    newPicContainer.addChild(this['newPic' + i]); 

    //set the new pics X 
    if (i != 0) 
    { 
     // if i is not 0, set newpic(i)s x to the previous pic plus the previous pics width and add our dynamic padding 
     this['newPic' + i].x = this['newPic' + (i-1)].x + picwidth + paddingbetween; 
    } 
    else 
    { 
     this['newPic' + i].x = 0; 
    } 
} 

由於任何人事先：

example: 

我修改後的代碼看起來是這樣的！

原貼：

你好，第一次在這裏發帖。我希望我沒有得到任何錯誤。我的問題如下：

我有一個非常基本的循環，創建一個'縮略圖'，並將其放在包含的影片剪輯中的前一個（有點填充）旁邊。

var newPicContainer:picContainer = new picContainer(); 
var newPic:pic; 
var amount:int = 9; 
var i:int; 

//Add our container 
addChild(newPicContainer); 

//center our container 
newPicContainer.x = (stage.stageWidth/2)- (newPicContainer.width/2); 
newPicContainer.y = (stage.stageHeight/2)- (newPicContainer.height/2); 


for (i = 0; i < amount; ++i) 
{ 
newPic = new pic(); 
newPicContainer.addChild(newPic); 

    //just so i know it's adding them.. 
    trace(newPic.thisOne); 
newPic.thisOne = i; 

    // set this one to its self (+5 for padding..) Times, the amount already placed. 
newPic.x = (newPic.width+5) *i; 
} 

我想知道是否有某種公式或「魔法數學」，我可以用它來找出容器的長度，並在「縮略圖」相對於這個數字增加。基本上壓縮彼此的縮略圖，使他們都適合內部..

東西沿着線：

newPic.x = (newPic.width *i) - stuff here to make it know not to go past the containing width; 

我必須承認，我不跟數學等編碼的這部分脫離了我太大..

感謝任何考生提前..

Answer 1

您可以通過調用其width屬性讓你的集裝箱的長度明確：

//Container Width  
newPicContainer.width; 

或newContainer也是父添加的圖片：

//Container Width  
newPic.parent.width; 

那麼你需要獲得通過您圖片所佔據的總長度：

var arrayOfPics:array = [pic1, pic2, pic3, pic4, pic5]; 
var picsWidth:Number; 

for each (var element:pic in arrayOfPics) 
     picsWidth =+ element.width; 

後比你可以減去總圖片的長度從容器知道你的分離可填充：

var totalPadding:Number = newPicContainer.width - picsWidth; 

現在您可以通過將圖片總數除以圖片數量來確定圖片與容器兩側之間可以承受多少填充，併爲最後添加一個額外的填充。

var padding:Number = totalPadding/arrayOfPics.length + 1; 

現在你可以通過包括填充

for (var i:int = 0; i < arrayOfPics.length; i++) 
    { 
    newPicContainer.addChild(arrayOfPics[i]); 
    (i == 0) ? arrayOfPics[i].x = padding : arrayOfPics[i].x = arrayOfPics[i - 1].x + arrayOfPics[i - 1].width + padding; 
    } 

Answer 2

我建議你看看使用Flex框架（這是一個Flash框架），它會使建立這種視圖更容易。

您可以設置容器的佈局屬性，以便將項目放置在水平，垂直或平鋪佈局中，然後將項目添加到容器中。

有關Flex look here

更多信息對於info on Flex Layouts

Answer 3

試試這個簡單的添加你的照片......

//maximum available length 
var maxLength:int; 

// a single thumbnail width 
var picWidth:int = 100; 

// total number of pics in a container 
var maxNumPics:int; 

// as long as the maximum available length 
// is inferior to the container length 
// add a new thumbnail 
while(maxLength < newPicContainer.length - 100) 
{ 
    maxLength += 100; 
    maxNumPics += 1; 
} 

// calculate the amount of available padding. 
var padding:Number = (newPicContainer.length - maxLength)/ maxNumPics; 

//add your thumbs 
var picX:int; 

for(var i:int ; i < maxNumPics ; ++i) 
{ 
    var newPic:Pic = new Pic(); 
    newPic.x = picX; 

    picX += padding + picWidth; 
    newPicContainer.addChild(newPic); 
}