I am duplicating a moviclip x times determined by a variable called "total" then i arrange them to have a distance of 30 pixels between each other, the thing is that i whant them to arrange depending of the Stage.width. For example:
I have 12 duplicated movieclips but only 4 clips can fit on the Stage.width so i whant the others to place themselfs in the Stage.height to creat a grid, i hope i make myself clear, ill put my fla so you can take a look.

FLA IS HERE

Thanks.

www.rum-i.com

[Ben]

.. Like.

multiline Word Wrapping ?
But with movieclips ?

[Anik]

my idea is like this.
for example:
i have 11 duplicated movieclips.
if my Stage.width is 550 then the movieclips arrange like this

if my Stage.width is 650 then the movieclips arrange like this


it has to calculate the Stage.width and calculate how many clips can fit in it perfectly if they cant fit then it re arranges them.

[Codemonkey]

Here ye go

// duplicate given clips, and use that clip as offset to create a grid with
function addClips(movieclip:MovieClip, nr:Number) {
    // get the width, but keep 30 pixels distance in total
    var mc_width:Number = movieclip._width + 15;
    var mc_height:Number = movieclip._height + 15;
    // calculate how many mc's fit over the total width
    var columns:Number = Math.floor(Stage.width / mc_width);
    
    // add the clips
    for (var i = 1; i < nr; i++) {
        var depth:Number = movieclip._parent.getNextHighestDepth();
        var mc:MovieClip = movieclip.duplicateMovieClip(movieclip._name + i, depth);
 
        var column:Number = i % columns;
        var row:Number = (i - column) / columns;
        
        // use movieclip._x and y as offset and add the calculated values
        mc._x = movieclip._x + column * mc_width;
        mc._y = movieclip._y + row * mc_height;
    }
}
 
// add 12 duplicates of thumbs
addClips(thumbs, 12); 

[Anik]

thanks Codemonkey ill give it a try !

[Anik]

it works great ! thanks man, one more thing, how can i make it to rearrange each time the Stage.width changes ?

[Codemonkey]

I didn't know you could even do that, but here's the script anyway.

// duplicate the clips, then snap them to the grid
function addClips(movieclip:MovieClip, nr:Number) {
    for (var i = 1; i < nr; i++) {
        var depth:Number = movieclip._parent.getNextHighestDepth();
        movieclip.duplicateMovieClip(movieclip._name + i, depth);
    }
    // create the grid
    arrangeClips(movieclip, nr);
}
 
// create a grid, using given clip as offset
function arrangeClips(movieclip:MovieClip, nr:Number) {
    // get the width, but keep 30 pixels distance in total
    var mc_width:Number = movieclip._width + 5;
    var mc_height:Number = movieclip._height + 5;
    // calculate how many mc's fit over the total width
    var columns:Number = Math.floor(Stage.width / mc_width);
    
    // add the clips
    for (var i = 1; i < nr; i++) {
        var mc:MovieClip = eval(movieclip._name + i);
 
        var column:Number = i % columns;
        var row:Number = (i - column) / columns;
        
        // use movieclip._x and y as offset and add the calculated values
        mc._x = movieclip._x + column * mc_width;
        mc._y = movieclip._y + row * mc_height;
    }
}
//
addClips(thumbs, 12); 

Just call arrangeClips everytime you want to update the grid (supply the duplicated clip and the same number each time).

[Anik]

you'r the man Codemonkey ! it works just had to add a this.onEnterFrame, thanks alot !

[Codemonkey]

always a pleasure!

[Ben]

Thanks, monkey.
Excellent.

[InfinityI]

Nice code codemonkey, to improve performance instead of using an onEnterFrame you could add a listener to the Stage broadcaster and listen for the onResize event, as follows:

var stage_lis = new Object();
Stage.addListener(stage_lis);
stage_lis.onResize = function() {
arrangeClips(movieclip, nr);
} 

[Anik]

InfinityI i tryed what you sayd and added the stage listener, but it seems like the for(); on the arrangeClips function is not being executed, because it doesnt trace, dont know whats the problem

here is the code

// Stage aligh
Stage.align = "LT";
Stage.scaleMode = "noScale";
var stage_lis = new Object();
Stage.addListener(stage_lis);
stage_lis.onResize = function() {
    trace("resize");
    arrangeClips(movieclip, nr);
};
// duplicate the clips, then snap them to the grid
function addClips(movieclip:MovieClip, nr:Number) {
    for (var i = 0; i<nr; i++) {
        var depth:Number = movieclip._parent.getNextHighestDepth();
        movieclip.duplicateMovieClip(movieclip._name+i, depth);
        var mc:MovieClip = eval(movieclip._name+i);
        mc.f = i;
    }
    // create the grid
    arrangeClips(movieclip, nr);
}
// create a grid, using given clip as offset
function arrangeClips(movieclip:MovieClip, nr:Number) {
    // get the width, but keep 30 pixels distance in total
    var mc_width:Number = movieclip._width+15;
    var mc_height:Number = movieclip._height+15;
    // calculate how many mc's fit over the total width
    var columns:Number = Math.floor(Stage.width/mc_width);
    // add the clips
    for (var i = 0; i<nr; i++) {
        var mc:MovieClip = eval(movieclip._name+i);
        //
        var column:Number = i%columns;
        var row:Number = (i-column)/columns;
        // use movieclip._x and y as offset and add the calculated values
        mc._x = movieclip._x+column*mc_width;
        mc._y = movieclip._y+row*mc_height;
        trace("arrange");
    }
}
//
addClips(my_clip, 12); 

[Codemonkey]

hmm, it's working fine here?

[Anik]

the clips arrange perfectly at first but they dont re-arrange when the stage resizes... dont know whats happening...

[Anik]

i got it going, thanks again codemonkey

[tribalab]

Originally posted by Codemonkey
I didn't know you could even do that, but here's the script anyway.

LOL!

U2 are the coolest, CODE - thank you for your help on this and the backend stuff too!

aaron

[nelson714]

how can make it change dynamiclly? when change the borswer size. the stage layout will change dynamiclly.

i saw FWA web site have this feature.

[Anik]

look at the code CodeMonkey posted all you need to know its there

[tribalab]

// config
Stage.align = "LT";
Stage.scaleMode = "noScale";
 
// listener object
var stage_lis = new Object();
stage_lis.onResize = function ()
{
trace("new width: "+Stage.width);
}
 
// add the listener
Stage.addListener(stage_lis); 

All you need to do is create an object, and give it a function for the onResize event, so when the stage changes size, your function is called. Then you can access the new size with the Stage.width, and Stage.height properties. Also dont forget to set the scaleMode and stageAlign

[nelson714]

still not work for me..
i have manuelly refresh the page then the layouit will change

[Codemonkey]

I think you're missing something nelson. Put up some code and we'll take a look at it

[nelson714]

// config
Stage.align = "LT";
Stage.scaleMode = "noScale";
// listener object
var stage_lis = new Object();
stage_lis.onResize = function() {
    trace("new width: "+Stage.width);
    trace("new height: "+Stage.height);
};
// add the listener
Stage.addListener(stage_lis);
 
// duplicate the clips, then snap them to the grid
function addClips(movieclip:MovieClip, nr:Number) {
    for (var i = 1; i<nr; i++) {
        var depth:Number = movieclip._parent.getNextHighestDepth();
        movieclip.duplicateMovieClip(movieclip._name+i, depth);
    }
    // create the grid
    arrangeClips(movieclip, nr);
}
// create a grid, using given clip as offset
function arrangeClips(movieclip:MovieClip, nr:Number) {
    // get the width, but keep 30 pixels distance in total
    var mc_width:Number = movieclip._width+5;
    var mc_height:Number = movieclip._height+5;
    // calculate how many mc's fit over the total width
    var columns:Number = Math.floor(Stage.width/mc_width);
    // add the clips
    for (var i = 1; i<nr; i++) {
        var mc:MovieClip = eval(movieclip._name+i);
        var column:Number = i%columns;
        var row:Number = (i-column)/columns;
        // use movieclip._x and y as offset and add the calculated values
        mc._x = movieclip._x+column*mc_width;
        mc._y = movieclip._y+row*mc_height;
    }
}
//
addClips(thumbs, 15); 

anything wrong for my code

testing

when i change the borswer size. the stage layout never change unless i do the refresh manuelly.

[Anik]

you need to add this

stage_lis.onResize = function() {
arrangeClips(movieclip, nr);
        trace("new width: "+Stage.width);
        trace("new height: "+Stage.height);
}; 

[tribalab]

i don't see the variable "movieclip", or "nr" being declared outside the arrangeClips function parameters?

[Anik]

its declared when you create the grid

addClips(thumbs, 15); 

[nelson714]

i'm added "arrangeClips(movieclip, nr)" on stage_lis.onResize
but still the same. why ?????????????????

[tribalab]

they are instance variables local to the function correct? That means that they would not be accessible outside the function, unless they are set into vars that exist outside the function..

try this:

// config
Stage.align = "LT";
Stage.scaleMode = "noScale";
// listener object
var stage_lis = new Object();
stage_lis.onResize = function() {
        trace("new width: "+Stage.width);
        trace("new height: "+Stage.height);
};
// add the listener
Stage.addListener(stage_lis);
 
// duplicate the clips, then snap them to the grid
function addClips(movieclip:MovieClip, nr:Number) {
        for (var i = 1; i<nr; i++) {
                var depth:Number = movieclip._parent.getNextHighestDepth();
                movieclip.duplicateMovieClip(movieclip._name+i, depth);
        }
        // create the grid
        arrangeClips(movieclip, nr);
}
// create a grid, using given clip as offset
function arrangeClips(movieclip:MovieClip, nr:Number) {
        // get the width, but keep 30 pixels distance in total
        var mc_width:Number = movieclip._width+5;
        var mc_height:Number = movieclip._height+5;
        // calculate how many mc's fit over the total width
        var columns:Number = Math.floor(Stage.width/mc_width);
        // add the clips
        for (var i = 1; i<nr; i++) {
                var mc:MovieClip = eval(movieclip._name+i);
                var column:Number = i%columns;
                var row:Number = (i-column)/columns;
                // use movieclip._x and y as offset and add the calculated values
                mc._x = movieclip._x+column*mc_width;
                mc._y = movieclip._y+row*mc_height;
        }
}
//
var target = thumbs;
var num = 15;
addClips(target, num); 

[Anik]

if you created the clips like this

addClips(thumbs, 15); 

then use the same parameters

stage_lis.onResize = function() {
        arrangeClips(thumbs, 15);
}; 

[nelson714]

finally...done !!
thanks anik

[Anik]

glad you got it working !

[Codemonkey]

I'm going to turn it into a neat class somewhere this week.

[tribalab]

yeah! let me know if i can do anything to help, I would love to give it an official test run

[Anik]

Originally posted by Codemonkey
I'm going to turn it into a neat class somewhere this week.

NICE !!

[HonestWeb]

got it working here. it's great.

just wondering whether it can really work like theFWA, you know the gap between each thumb is adjustable according to the resized stage.width. And our gap between each thumb is set to a fixed number, is there a work around that? when the stage is resized, the gap between thumbs will also adjust themselves to make the thumbs on teh stage perfectly fit teh width of stage?

hope I got myself clear.

[Nutrox]

This should do the trick. It will only work if you are using the entire stage for your thumbnails though:

// number of tile columns
var nX:Number = 4;
// tile width
var tW:Number = 200;
// the space between tiles
var spaceX:Number = (Stage.width - (nX * tW)) / (nX + 1) >> 0;
 
// number of tile rows
var nY:Number = 5;
// tile height
var tH:Number = 200;
// the space between tiles
var spaceY:Number = (Stage.height - (nY * tH)) / (nY + 1) >> 0; 

spaceX is the distance you need to space your tiles out horizontally, spaceY is the distance you need to space you tiles out vertically.

I haven't looked at all of the code in this thread but I imagine that you can work that^ code into your own.

[Anik]

Originally posted by Codemonkey
I'm going to turn it into a neat class somewhere this week.

we are still waiting

[HonestWeb]

hi guys, found this on gotoAndlearn forum.

http://gotoandlearn.com/forum/viewto...9f2afec549f2b4

[emix2006]

that code is great!, once i needed something like that and i had to write it by myself, here is the code if you wanna take a look, is diferent from yours:

//number of columns
var numcol = 4;
//columns spacing
var colspace = base_mc._width+20;
//rows spacing
var filaspace = base_mc._height+20;
//number of elements
var cant = 23 //XMLobject.childNodes[0].childNodes.length;
for (var i = 0; i<cant; i++) {
    base_mc.duplicateMovieClip("base_mc"+i, i);
    this["base_mc"+i]._y = base_mc._y+Math.floor(i/numcol)*filaspace;
    this["base_mc"+i].cuales = i+1
}
base_mc._visible = false;
var xxx = Math.floor(i/numcol)+1;
for (var r = 0; r<=xxx; r++) {
    for (var i = r*numcol; i<numcol*numcol+cant; i++) {
        this["base_mc"+i]._x = base_mc._x+i*colspace-colspace*numcol*r;
    }
} 

make comments about it!

you can also download it here

[HonestWeb]

I was busy last week, just got back on this code today. Splat, I must let you down, 'cause I didn't manage to work your code out into my own. AS is indeed hard for my brain.

What I want to archieve is this. The gap between thumbs are flexible as user resize the stage. And when the total extra gapx is greater than thumbs._width plus the minimal gapx (which I set to 15), we want add one column, otherwise if it's less than that we want to decrease one column.

So as a result, when users drag to resize and stage you can see that the gap between thumbs are changing. And as they are increasing or decreasing to certain level we will add or remove one column from the stage.

Hope I made myself clear.

I came up with this code. Again, it's now working. Somebody help me have a look?

Stage.align = "LT";
Stage.scaleMode = "noScale";
 
var totalgapx:Number;
var nowgapx:Number;
var mingapx:Number = 15;
var totalgapy:Number;
var nowgapy:Number;
var mingapy:Number = 15;
var column:Number;
var row:Number;
var exgapx:Number;
var exgapy:Number;
 
 
//make some mcs to line up the stage
function addClip(movieclip:MovieClip)
{
    for (var i=1; i<column * row; i++)
    {
        movieclip.duplicateMovieClip("movieclip" + i, _root.getNextHighestDepth());
    }
    //create the grid, yea
    arrangeClip(mvoieclip, nr);
}
 
//now the grid function
function arrangeClip(movieclip:MovieClip)
{
    var mc_width:Number = movieclip._width + nowgapx;
    var mc_height:Number = movieclip._height + nowgapy;
    column = Math.floor(Stage.width / mc_width);
    row = Math.floor(Stage.height / mc_height);
    nowgapx = Math.floor((Stage.width - (movieclip._width * column)) / (column - 1));
    nowgapy = Math.floor((Stage.height - (movieclip._height * row)) / (row - 1));
    
    totalgapx = nowgapx * (column - 1);
    totalgapy = nowgapy * (row - 1);
    exgapx = totalgapx - ((movieclip._width + mingapx) * (column - 1));
    exgapy = totalgapy - ((movieclip._height + mingapy) * (row - 1));
 
    //add one column if the extra x gap is greater than movieclip._width plus mingapx
    if(exgapx > (movieclip._width + mingapx))
    {
        column += 1;
    }
    
    //decrease one column if the extra x gap is less than movieclip._width plus mingapx
    if(exgapx < (movieclip._width + mingapx))
    {
        column -= 1;
    }
    
    //add one row if the extra y gap is greater than movieclip._height plus mingapy
    if(exgapy > (movieclip._height + mingapy))
    {
        row += 1;
    }
    
    //decrease one row if the extra y gap is less than movieclip._height plus mingapy
    if(exgapy < (movieclip._height + mingapy))
    {
        row -= 1;
    }
    
    for (var i = 1; i<(column * row); i++) 
    {
        var mc:MovieClip = eval("movieclip" + i);
        // use movieclip._x and y as offset and add the calculated values
        mc._x = movieclip._x + column * mc_width;
        mc._y = movieclip._y + row * mc_height;
    }
}
 
 
addClip(thumbs);
 
// listener object
var stage_lis = new Object();
stage_lis.onResize = function() 
{
    arrangeClip(thumbs);
}
// add the listener
Stage.addListener(stage_lis); 

[HonestWeb]

i know you guys are Christmasing