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); 
}