# Making boxes appear 1 by 1

**URL:** https://forum.kirupa.com/t/making-boxes-appear-1-by-1/29817
**Category:** flash
**Created:** [August 31, 2003, 10:44am UTC](https://forum.kirupa.com/t/making-boxes-appear-1-by-1/29817 "2003-08-31T10:44:16Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![blah\_de\_blah](https://avatars.discourse-cdn.com/v4/letter/b/a8b319/32.png) [@blah\_de\_blah](https://forum.kirupa.com/u/blah_de_blah)
#### Post date: [August 31, 2003, 10:44am UTC](https://forum.kirupa.com/t/making-boxes-appear-1-by-1/29817/1 "2003-08-31T10:44:16Z")

</div>

I was wondering how to duplicate boxes, so they appear in a tiled format (this question was asked before but dind’t get much response :-).

I don’t have much clue at the moment apart from having 2 ‘for’ loops which will assign the boxes their own positions; however this doesn’t make the boxes appear one by one :-\

I’m just looking for the concept, don’t really want the code just yet. thx!

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [August 31, 2003, 10:49am UTC](https://forum.kirupa.com/t/making-boxes-appear-1-by-1/29817/2 "2003-08-31T10:49:48Z")

</div>

Voetsjoeba’s written a tute on it… i dont know if it’s up yet 🙂

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [August 31, 2003, 11:07am UTC](https://forum.kirupa.com/t/making-boxes-appear-1-by-1/29817/3 "2003-08-31T11:07:08Z")

</div>

Nope … first sen’s 12 page 3d tutorial is getting added. It’s pretty cool, I had a preview and I can tell you, sen is a genious !

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [August 31, 2003, 11:10am UTC](https://forum.kirupa.com/t/making-boxes-appear-1-by-1/29817/4 "2003-08-31T11:10:50Z")

</div>

> \*Originally posted by Voetsjoeba \*  
> \*\*I can tell you, sen is a genious ! \*\*  
> well DUHH! 😛

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [August 31, 2003, 11:40am UTC](https://forum.kirupa.com/t/making-boxes-appear-1-by-1/29817/5 "2003-08-31T11:40:04Z")

</div>

In the most unlikely case someone didn’t know yet 😛

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [August 31, 2003, 2:42pm UTC](https://forum.kirupa.com/t/making-boxes-appear-1-by-1/29817/6 "2003-08-31T14:42:35Z")

</div>

I’ll be waiting voets 😛 can i have a little peak into the concept in the meantime though 😛

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [August 31, 2003, 2:49pm UTC](https://forum.kirupa.com/t/making-boxes-appear-1-by-1/29817/7 "2003-08-31T14:49:24Z")

</div>

Hmmn … no.

[size=1]Psst … [http://voetsjoeba.asianillusion.com/tutorials/fadegrid.htm[/size]](http://voetsjoeba.asianillusion.com/tutorials/fadegrid.htm%5B/size%5D) 😉

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [August 31, 2003, 3:11pm UTC](https://forum.kirupa.com/t/making-boxes-appear-1-by-1/29817/8 "2003-08-31T15:11:40Z")

</div>

ooooh i get it now!!! i thought about the ‘for’ statements, but i thought they would calculate so fast you wouldn’t see them duplicating. Now i understand they actually fade INTO the picture!! thanks you 🙂 Now time to try creating the code on my own 😛

EDIT: oh btw i’m that kirupa forum member eh 😛

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [August 31, 2003, 3:35pm UTC](https://forum.kirupa.com/t/making-boxes-appear-1-by-1/29817/9 "2003-08-31T15:35:30Z")

</div>

> \*Originally posted by blah-de-blah \*  
> **ooooh i get it now!!! i thought about the ‘for’ statements, but i thought they would calculate so fast you wouldn’t see them duplicating. Now i understand they actually fade INTO the picture!! thanks you 🙂 Now time to try creating the code on my own 😛**

What it does is create a grid of boxes and fade those out, but they are duplicated so fast you can’t see them duplicating indeed. The effect you see is the fading out, not the duplicating.

> \*Originally posted by blah-de-blah \*  
> \*\*EDIT: oh btw i’m that kirupa forum member eh 😛 \*\*

Yep :).

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [August 31, 2003, 11:18pm UTC](https://forum.kirupa.com/t/making-boxes-appear-1-by-1/29817/10 "2003-08-31T23:18:29Z")

</div>

or you could do something like this:  
[AS]MovieClip.prototype.drawGrid = function() {  
//parameters of grid  
grid = {maxx:10, maxy:10, spacing:myMC._width};  
placeMC = function () {  
(x\<grid.maxx && y\<=grid.maxy ? x++ : y\<grid.maxy ? x=1 : grid.maxx);  
y\<grid.maxy && x == 1 ? y++ : x != grid.maxx ? y : 1;  
myMC.duplicateMovieClip(“myMC”+x+"_"+y, ++d);  
_root[“myMC”+x+"_"+y].\_x = x_grid.spacing;  
 root[“myMC”+x+""+y].\_y = y_grid.spacing;  
// add any extra stuff here ie:  
// _root[“myMC”+x+"_"+y].fade(5,2)  
// a function to make the squares fade  
updateAfterEvent();  
};  
//set the speed at which grid is drawn  
setInterval(placeMC, 100);  
};  
drawGrid();[/AS]

-zylum

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [September 1, 2003, 1:02am UTC](https://forum.kirupa.com/t/making-boxes-appear-1-by-1/29817/11 "2003-09-01T01:02:36Z")

</div>

Wow that code is much more complicated than voets, but i’ll definately check it out, thanks a lot!! :thumb:

Just a quick question if you don’t mind 😛 what does the “:” do? i’m surprised i’ve never actually come across these :-\ I know the if…else purpose of them, but in this case:

{maxx:10, maxy:10, spacing:myMC.\_width};

they are used for something else right?

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [September 1, 2003, 1:17am UTC](https://forum.kirupa.com/t/making-boxes-appear-1-by-1/29817/12 "2003-09-01T01:17:26Z")

</div>

grid = {maxx:10, maxy:10, spacing:myMC.\_width};

is equivelant to:

grid.maxx = 10  
grid.maxy = 10  
grid.spacing = myMC.\_width

hope that explains your question

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [September 1, 2003, 1:32am UTC](https://forum.kirupa.com/t/making-boxes-appear-1-by-1/29817/13 "2003-09-01T01:32:02Z")

</div>

Yep thanks i get it now. I was thinkin it would be somethin like that 😛

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [September 1, 2003, 4:37am UTC](https://forum.kirupa.com/t/making-boxes-appear-1-by-1/29817/14 "2003-09-01T04:37:01Z")

</div>

> \*Originally posted by zylum \*  
> \*\*grid = {maxx:10, maxy:10, spacing:myMC.\_width};

is equivelant to:

grid.maxx = 10  
grid.maxy = 10  
grid.spacing = myMC.\_width\*\*  
Actually thats wrong. :sigh:[AS]grid = {maxx:10, maxy:10, spacing:myMC.\_width};[/AS]is equivalent to:[AS]grid = new Object();  
grid.maxx = 10  
grid.maxy = 10  
grid.spacing = myMC.\_width[/AS]

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [September 1, 2003, 9:55am UTC](https://forum.kirupa.com/t/making-boxes-appear-1-by-1/29817/15 "2003-09-01T09:55:52Z")

</div>

ooh…i see…this is taking my actionscript to a new level then…never messed with new Object or anything before 😛 i’ll try it out thanks!

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [September 1, 2003, 10:04am UTC](https://forum.kirupa.com/t/making-boxes-appear-1-by-1/29817/16 "2003-09-01T10:04:42Z")

</div>

Oh yea, just another quick question 😛 why use a prototype for the draw grid function and a normal function for the other?!

EDIT: ok i don’t know if this is bothering you, but some of this code is bothering me :-\ I have noc lue why this code:

[AS]  
(x\<grid.maxx && y\<=grid.maxy ? x++ : y\<grid.maxy ? x=1 : grid.maxx);  
y\<grid.maxy && x == 1 ? y++ : x != grid.maxx ? y : 1;  
[/AS]

one part is in brackets and the otehr isn’t :-\ oh yea and the updateAfterEvent(), does that check to see if the x values or y values have changed? tthanks again

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [September 1, 2003, 6:36pm UTC](https://forum.kirupa.com/t/making-boxes-appear-1-by-1/29817/17 "2003-09-01T18:36:10Z")

</div>

oh, sorry, there don’t need to be brackets there… i was optimizing the code and i guess i forgot to take them out there…

as for the prototype thing… i used a prototype because im just used to using them a lot but you really don’t need it… you could do something like this…

```auto
grid = {maxx:10, maxy:10, speed:100};
placeMC = function() {
	x<grid.maxx && y<=grid.maxy ? x++ : y<grid.maxy ? x=1 : grid.maxx;
	y<grid.maxy && x == 1 ? y++ : x != grid.maxx ? y : 1;
	_root.attachMovie("myMCID", "myMC"+x+"_"+y, ++d);
	_root["myMC"+x+"_"+y]._x = x*_root["myMC"+x+"_"+y]._width;
	_root["myMC"+x+"_"+y]._y = y*_root["myMC"+x+"_"+y]._height;
	updateAfterEvent();
};
setInterval(placeMC, grid.speed);

```

notice that i call the function using setInterval and now instead of duplicateMC i use attachMovie…

as for update afterEvent, that just updates the screen independant of the frame rate so since the function is called every grid.speed (100 milliseconds) then the screen will be updated that many times per second. otherwise if the function is called more times than frames go by then and you didnt have updateAfterEvent then the squares would apear in bunches…

try this script to see what i mean:

```auto
grid = {maxx:10, maxy:10, speed:50};
placeMC = function() {
	x<grid.maxx && y<=grid.maxy ? x++ : y<grid.maxy ? x=1 : grid.maxx;
	y<grid.maxy && x == 1 ? y++ : x != grid.maxx ? y : 1;
	_root.attachMovie("myMCID", "myMC"+x+"_"+y, ++d);
	_root["myMC"+x+"_"+y]._x = x*_root["myMC"+x+"_"+y]._width;
	_root["myMC"+x+"_"+y]._y = y*_root["myMC"+x+"_"+y]._height;
	//updateAfterEvent();
};
setInterval(placeMC, grid.speed);

```

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [September 2, 2003, 6:34am UTC](https://forum.kirupa.com/t/making-boxes-appear-1-by-1/29817/18 "2003-09-02T06:34:29Z")

</div>

ok thanks zylum those clear things up now…But just two m ore questions hope you don’t mind 😛

Why change attachMovie to duplicateMovieClip? because when i use attachMovie, how do i target where i want the first box to start? i’ve tried making a new movieclip and doing:

\_root.newMC.attachMovie…

But that stops the whole process altogther :-\ Do you know whY? if not ii’ll just use the first code you gave me and see if i can undesrtand that…thanks!

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [September 2, 2003, 6:40am UTC](https://forum.kirupa.com/t/making-boxes-appear-1-by-1/29817/19 "2003-09-02T06:40:57Z")

</div>

Oh and i’m trying to make these 2 lines:

[AS]  
x\<grid.maxx && y\<=grid.maxy ? x++ : y\<grid.maxy ? x=1 : grid.maxx;  
y\<grid.maxy && x == 1 ? y++ : x != grid.maxx ? y : 1;  
[/AS]

the long way so i can understand em more easily 😛 This is what i have but for some reason it doesntt work correctly :-\

[AS]  
if (x\<grid.maxx && y\<=grid.maxy) {  
x++;  
} else if (y\<grid.maxy) {  
x = 1;  
} else {  
grid.maxx;  
}  
if (y\<grid.maxy && x == 1) {  
y++;  
} else if (x != grid.maxx) {  
y = 1;  
}  
[/AS]

thanks and sorry for all the questions 🙂

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [September 2, 2003, 11:09pm UTC](https://forum.kirupa.com/t/making-boxes-appear-1-by-1/29817/20 "2003-09-02T23:09:18Z")

</div>

sorry if i’m confusing you 🙂 i went over the script again and found a lot of things that needed improvements:trout: here’s the final draft (i hope)

```auto
grid = {maxx:10, maxy:10, startx:100, starty:100, speed:50};
placeMC = function () {
	if (x<grid.maxx || y<grid.maxy) {
		x = x<grid.maxx && y<=grid.maxy ? x+1 : 1;
		y = y<grid.maxy && x == 1 ? y+1 : y;
		_root.attachMovie("myMCID", "myMC"+x+"_"+y, ++d);
		_root["myMC"+x+"_"+y]._x = x*_root["myMC"+x+"_"+y]._width+grid.startx;
		_root["myMC"+x+"_"+y]._y = y*_root["myMC"+x+"_"+y]._height+grid.starty;
		updateAfterEvent();
		// trace(x+"_"+y); (for debugging)
	}
};
setInterval(placeMC, grid.speed);

```

first, notice i added an if statement at the beginning of the function, this prevents the ‘myMC’ from being duplicated or in this case attached unnecessarily after the final grid has been finished. without it, the function would keep being called and the myMC would be duplicated after the grid has been finished. also i refined the two beginning if statements(i don’t know what i was on when i did that code) and now they are much simpler (i hope)

i have chosen to use attachMovie instead of duplicate movie so that i would have the ‘master’ MC floating around on stage, instead it’s in the library.

if you want to generate the grid in a new MC called newMC then you would use the following script :

```auto
grid = {maxx:10, maxy:10, startx:100, starty:100, speed:50};
placeMC = function () {
	if (x<grid.maxx || y<grid.maxy) {
		x = x<grid.maxx && y<=grid.maxy ? x+1 : 1;
		y = y<grid.maxy && x == 1 ? y+1 : y;
		_root.newMC.attachMovie("myMCID", "myMC"+x+"_"+y, ++d);
		_root.newMC["myMC"+x+"_"+y]._x = x*_root.newMC["myMC"+x+"_"+y]._width+grid.startx;
		_root.newMC["myMC"+x+"_"+y]._y = y*_root.newMC["myMC"+x+"_"+y]._height+grid.starty;
		updateAfterEvent();
		// trace(x+"_"+y); (for debugging)
	}
};
setInterval(placeMC, grid.speed);

```

notice how the x and y values are given, you have to use "\_root.newMC[…].\_x’ to assign the value instead of just \_root.

finally to answer your question about positioning. Just add two extra variables to the object to specify the startX and startY of the grid and then when assigning the x and y to the grid, just add “+ startx” and “+ starty” (check first script as reference)

well ihope that answers all your questions. if you have any more then just hit me with them:trout: 😛

-zylum

[Next page](https://forum.kirupa.com/t/making-boxes-appear-1-by-1/29817.md?page=2)