Tweening a For Loop Grid [SOLVED]

[treeloy]

I'm trying to use TweenLite or TweenMax to animate squares in a grid form which are created dynamically with a for loop. I've tried various things to make the squares named to be able to tween them, but to no success. I'll just include the grid code. Basically, I'm trying to create a grid that fills up a portion of the screen and will either fade in or out with tweening. Meaning, it will start with one square and then sequentially affect the following squares (so not the entire grid at once, but each, individual square). Hope I'm clear in my explanation. Any help would be greatly appreciated.

 

      var rows:int = 50;
     var cols:int = 50;
     for (var py:int = 0; py           for (var px:int = 0; px               var mr_square_fade:mr_square = new mr_square();
             mr_square_fade.x = 50 + mr_square_fade.width * px;
             mr_square_fade.y = 50 + mr_square_fade.height * py;
             addChild(mr_square_fade);
         }
     }

[GreenSock]

It should be as simple as something like:

 

var rows:int = 50;
var cols:int = 50;
var delay:Number = 0;
for (var py:int = 0; py 	for (var px:int = 0; px 		var mr_square_fade:mr_square = new mr_square();
	mr_square_fade.x = 50 + mr_square_fade.width * px;
	mr_square_fade.y = 50 + mr_square_fade.height * py;
	addChild(mr_square_fade);
	TweenMax.fromTo(mr_square_fade, 1, {autoAlpha:0}, {autoAlpha:1, delay:delay});
	delay += 0.2;
}
}

[treeloy]

Wow, quick reply. It works, I'll just have to tweak to liking. But that was a great help. Many thanks.

[treeloy]

Just one more question. How could I also add a tween to the scale? Would I have to use insertMultiple or append?

[GreenSock]

insertMultiple() and append() are just for if you're dumping the tweens into a TimelineLite or TimelineMax. You can simply add the scale stuff to the tweens like:

 

var rows:int = 50;
var cols:int = 50;
var delay:Number = 0;
for (var py:int = 0; py    for (var px:int = 0; px       var mr_square_fade:mr_square = new mr_square();
     mr_square_fade.x = 50 + mr_square_fade.width * px;
     mr_square_fade.y = 50 + mr_square_fade.height * py;
     addChild(mr_square_fade);
     TweenMax.fromTo(mr_square_fade, 1, {autoAlpha:0, scaleX:0.1, scaleY:0.1}, {autoAlpha:1, scaleX:1, scaleY:1, delay:delay});
     delay += 0.2;
  }
}

[treeloy]

Perfect! That gets me on the right track. That alone has probably saved me hours of trial and error. Can't thank you enough.

[treeloy]

Just one more question to that. Although I don't think it's specifically related to the Tweening. How can I set the ChildIndex of the square so that the entire grid is behind the other objects on the stage? I tried to put the stage.setChildIndex(mr_square_fade,0); in there, but keep getting the error message: ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller. Sorry to reopen the topic.

 

///Mr. Square  
function mrSquare():void{
var rows:int = 10;
var cols:int = 30;
var delay:Number = 0;
for (var py:int = 0; py    for (var px:int = 0; px       var mr_square_fade:mr_square = new mr_square();
  //container.setChildIndex(mr_square_fade, numChildren – 1);
     mr_square_fade.x = 0 + mr_square_fade.width * px;
     mr_square_fade.y = 150 + mr_square_fade.height * py;
     addChild(mr_square_fade);
  stage.setChildIndex(mr_square_fade,0);
  mr_square_fade.alpha = 0;
  TweenMax.fromTo(mr_square_fade, 4, {autoAlpha:0, scaleX:0.1, scaleY:0.1, tint:0x063773/*, y:-300*/}, {autoAlpha:1, scaleX:1, scaleY:1, tint:0x0B1E3B, /*y:mr_square_fade.height * py + 150, */delay:delay});
     delay += .01;
  }
}
}

[GreenSock]

BAD: stage.setChildIndex(mr_square_fade, 0)

GOOD: mr_square_fade.parent.setChildIndex(mr_square_fade, 0)

[Rodrigo]

Hi,

 

This post has been extremely helpful and for that i thank treeloy and the admin.

 

Using the code given here i have created my own grid but there is something i want to achieve but reducing the amount of code involved.

 

I uploaded the examples here in order to explain myself correctly.

 

The code of the first example is as follows:

FIRST FRAME

import com.greensock.*;

this.stop();

var cont1:MovieClip = new MovieClip();

var delay:Number = 0;

btn1.addEventListener(MouseEvent.CLICK, btn1ck);
function btn1ck(e:MouseEvent):void{
gotoAndPlay("2");
}

SECOND FRAME

this.stop();

addChild(cont1);
cont1.x = 600;
cont1.y = 5;

TweenMax.to(cont1, 0.5, {x:5});

for (var i:Number = 0; i < 7; i++) {
for (var j:Number = 0; j < 9; j++) {
	var fondo1:MovieClip = new cuadro();
	fondo1.x = 25 + fondo1.width * j;
	fondo1.y = 25 + fondo1.height * i;
	cont1.addChild(fondo1);
	fondo1.alpha = 0;
	TweenMax.fromTo(fondo1, 0.7, {autoAlpha:0, scaleX:0.1, scaleY:0.1}, {autoAlpha:1, scaleX:1, scaleY:1, delay:0.05});
	}
}

btn2.addEventListener(MouseEvent.CLICK, btn2ck);
function btn2ck(e:MouseEvent):void{
gotoAndPlay("1");
removeChild(cont1);
}

 

AS you can see what i achieve is a well defined grid that expands an moves from right to left, then the idea is to continue from center to the left of the screen in order for the grid to disappear.

 

But what i want to achieve is what happens in the second example because in the first one all the grid components expand at the same time while in the second example they do it in sequence.

 

The point is that the second example is made with quite an amount of code that could and it would probably cause problems in the future. Here is the code of the second example:

FIRST FRAME

import com.greensock.*;

this.stop();

var cont1:MovieClip = new MovieClip();

var delay:Number = 0;
var delay2:Number = 0;
var delay3:Number = 0;
var delay4:Number = 0;
var delay5:Number = 0;
var delay6:Number = 0;
var delay7:Number = 0;

btn1.addEventListener(MouseEvent.CLICK, btn1ck);
function btn1ck(e:MouseEvent):void{
gotoAndPlay("2");
}

SECOND FRAME

addChild(cont1);
cont1.x = 600;
cont1.y = 5;

TweenMax.to(cont1, 0.5, {x:5});

for (var i:Number = 0; i < 9; i++){
var fondo1:MovieClip = new cuadro();
cont1.addChild(fondo1);
fondo1.x = 25 + fondo1.width * i;
fondo1.y = 25;
fondo1.alpha = 0;
TweenMax.fromTo(fondo1, 0.5, {autoAlpha:0, scaleX:0.1, scaleY:0.1}, {autoAlpha:1, scaleX:1, scaleY:1, delay:delay});
delay += 0.05;
}

for (var j:Number = 0; j < 9; j++){
var fondo2:MovieClip = new cuadro();
cont1.addChild(fondo2);
fondo2.x = 25 + fondo2.width * j;
fondo2.y = 75;
fondo2.alpha = 0;
TweenMax.fromTo(fondo2, 0.5, {autoAlpha:0, scaleX:0.1, scaleY:0.1}, {autoAlpha:1, scaleX:1, scaleY:1, delay:delay2});
delay2 += 0.05;
}

for (var k:Number = 0; k < 9; k++){
var fondo3:MovieClip = new cuadro();
cont1.addChild(fondo3);
fondo3.x = 25 + fondo3.width * k;
fondo3.y = 125;
fondo3.alpha = 0;
TweenMax.fromTo(fondo3, 0.5, {autoAlpha:0, scaleX:0.1, scaleY:0.1}, {autoAlpha:1, scaleX:1, scaleY:1, delay:delay3});
delay3 += 0.05;
}

for (var l:Number = 0; l < 9; l++){
var fondo4:MovieClip = new cuadro();
cont1.addChild(fondo4);
fondo4.x = 25 + fondo4.width * l;
fondo4.y = 175;
fondo4.alpha = 0;
TweenMax.fromTo(fondo4, 0.5, {autoAlpha:0, scaleX:0.1, scaleY:0.1}, {autoAlpha:1, scaleX:1, scaleY:1, delay:delay4});
delay4 += 0.05;
}

for (var ñ:Number = 0; ñ < 9; ñ++){
var fondo5:MovieClip = new cuadro();
cont1.addChild(fondo5);
fondo5.x = 25 + fondo5.width * ñ;
fondo5.y = 225;
fondo5.alpha = 0;
TweenMax.fromTo(fondo5, 0.5, {autoAlpha:0, scaleX:0.1, scaleY:0.1}, {autoAlpha:1, scaleX:1, scaleY:1, delay:delay5});
delay5 += 0.05;
}

for (var ij:Number = 0; ij < 9; ij++){
var fondo6:MovieClip = new cuadro();
cont1.addChild(fondo6);
fondo6.x = 25 + fondo6.width * ij;
fondo6.y = 275;
fondo6.alpha = 0;
TweenMax.fromTo(fondo6, 0.5, {autoAlpha:0, scaleX:0.1, scaleY:0.1}, {autoAlpha:1, scaleX:1, scaleY:1, delay:delay6});
delay6 += 0.05;
}

for (var ik:Number = 0; ik < 9; ik++){
var fondo7:MovieClip = new cuadro();
cont1.addChild(fondo7);
fondo7.x = 25 + fondo7.width * ik;
fondo7.y = 325;
fondo7.alpha = 0;
TweenMax.fromTo(fondo7, 0.5, {autoAlpha:0, scaleX:0.1, scaleY:0.1}, {autoAlpha:1, scaleX:1, scaleY:1, delay:delay7});
delay7 += 0.05;
}

btn2.addEventListener(MouseEvent.CLICK, btn2ck);
function btn2ck(e:MouseEvent):void{
gotoAndPlay("1");
removeChild(cont1);
}

 

As i said in the beginning what i want is what happens in the second example but i want to reduce the amount of code involved, but i haven't been able to make it happen from the code of the first example.

 

Any help will be extremely helpful.

 

Thank you,

Rodrigo.

[Carl]

normally I don't spend a lot of time on optimizing complex code, but this reminded me of one of my code challenges AND I had a grid loop laying around.

 

here is my demo swf: http://snorkl.tv/dev/gridDemo/ (click the button multiple times to toggle the direction of the animation)

 

Here is the code:

 

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.TweenPlugin;
import com.greensock.plugins.ScalePlugin;
import flash.display.MovieClip;
import flash.events.MouseEvent;

TweenPlugin.activate([scalePlugin]);

var cont:MovieClip = new MovieClip();
addChild(cont);


var numTiles:Number = 63;
var cols:Number = 9;

var tl:TimelineMax = new TimelineMax({paused:true, reversed:true});

for (var i = 0; i	var newTile:Tile = new Tile();
newTile.x= 25 + (i % cols) * (newTile.width);
newTile.y = 25+  int(i / cols) * (newTile.height);	
newTile.scaleX = newTile.scaleY = 0;
newTile.alpha = 0;
tl.insert(TweenLite.to(newTile, .5, {scale:1, alpha:1, delay:(i % cols)*.05}));
cont.addChild(newTile);
}


tl.insert(TweenLite.from(cont, 1, {x:600}));

btn.addEventListener(MouseEvent.CLICK, toggleTl);

function toggleTl(e:MouseEvent):void{
tl.reversed = !tl.reversed;
tl.resume();
}

 

pretty much everything happens in the loop that builds the grid.

I noticed from your sample swfs (thanks, they were a big help) that pretty much every item in a column did the same thing.

In my loop all the tiles have the same tween except the delay is based on what column they live in.

 

I put all the tweens into a TimelineMax so that I could easily reverse the entire sequence. This is really a testament to the power of TimelineMax.

 

To understand more about how the grid is built with the % modulo operator, read Rich Shupe's article here: http://www.learningactionscript3.com/20 ... ing-clips/

 

 

cs4 fla attached

[Carl]

Just an FYI, this post has inspired me to create a brief tutorial on using this method with a variety of animation styles:

 

http://www.snorkl.tv/2011/08/tile-trans ... d-masking/

 

thanks rhernando!

[Rodrigo]

First of all thanks to you Carl, without your input it would have taken a lot of time for me to see where the problem was, so again thanks to you. As i said the only problem with the first example was the delay time, it was as simple as changing this:

TweenMax.fromTo(fondo1, 0.7, {autoAlpha:0, scaleX:0.1, scaleY:0.1}, {autoAlpha:1, scaleX:1, scaleY:1, delay:0.05});

to this:

TweenMax.fromTo(fondo1, 0.7, {autoAlpha:0, scaleX:0.1, scaleY:0.1}, {autoAlpha:1, scaleX:1, scaleY:1, delay:j*0.05});

 

As Carl said in his first response:

In my loop all the tiles have the same tween except the delay is based on what column they live in.

 

And the code posted by Carl works an does the trick very good, so if any one else is interested in doing something like this could use either one of the codes, Carl's or mine.

 

As for your tutorial Carl just one word: AWESOME!!!

 

Thank you again,

Rodrigo.