Multiple color tweens on Sprites - actionscript

Question

I try to make a grid of squares, where I could control every square's color parameters individually ie. make them flash one by one or all at the same time.
I'm trying to do it with tweens, running the parameters with for-loop.
The code below tries to flash all the squares at the same time, once in every second. but for some reason all of the squares don't tween, only some do. Or they tween partly and sometimes they don't tween at all. However, the pattern doesn't repeat itself.
Is this too many tweens at the same time? Is the for-loop right way to do this? Should I use MovieClips instead of Sprites? If I want to control colors in many differeng objects in a very fast phase, what would be the best way to do it?
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
import flash.display.*;
import flash.events.*;
import flash.display.Sprite;
import flash.geom.Rectangle;
import flash.geom.ColorTransform;
import Math;
import flash.utils.Timer;
import flash.events.TimerEvent;
import resolumeCom.*;
import resolumeCom.parameters.*;
import resolumeCom.events.*;
public class LightGrid extends MovieClip
{
private var t1:Tween;
private var resolume:Resolume = new Resolume();
private var tempo:FloatParameter = resolume.addFloatParameter("Tempo", 0.6);
private var pad = 3;
private var dim = 20;
private var posX = 0 + pad;
private var posY = 0 + pad;
private var a:Number = new Number();
private var b:Number = new Number();
private var blk:Number = new Number();
var newCol:ColorTransform = new ColorTransform();
public function LightGrid()
{
resolume.addParameterListener(parameterChanged);
for (var b = 0; b < 16; b++)
{
posY = (b*dim) + (b*pad) + pad;
trace("New row");
for (var a = 0; a < 24; a++)
{
posX = (a*dim) + (a*pad) + pad;
// l = line, f = fill
var l:Sprite = new Sprite;
l.graphics.lineStyle(2, 0xFFFFF, 1);
l.graphics.drawRect(posX, posY, dim, dim);
l.name = "line_Row" + b + "Col" + a;
addChild(l);
var f:Sprite = new Sprite;
f.graphics.beginFill(0x990000, 1);
f.graphics.drawRect(posX, posY, dim, dim);
f.graphics.endFill();
f.name = "fill_Row" + b + "Col" + a;
addChild(f);
trace(getChildByName("fill_Row" + b + "Col" + a).name);
}
}
var myTimer:Timer = new Timer(1000, 100);
myTimer.addEventListener("timer", timerHandler);
myTimer.start();
}
public function timerHandler(event:TimerEvent):void {
flashTheLights();
}
public function parameterChanged(e:ChangeEvent):void
{
if (e.object == tempo)
{
}
}
public function flashTheLights():void
{
blk = 0;
for (var blk = 0; blk < (24/3); blk++)
{
for (var d = 0; d < 16; d++)
{
for (var c = (0+(3*blk)); c < (3+(3*blk)); c++)
{
newCol.redOffset=30-(35*blk);
newCol.blueOffset=200+(7*blk);
newCol.greenOffset=200;
trace(getChildByName("fill_Row" + d + "Col" + c).name);
var fill:Sprite = getChildByName("fill_Row" + d + "Col" + c) as Sprite;
fill.transform.colorTransform.alphaMultiplier = -255;
fill.transform.colorTransform = newCol;
trace("Run tween");
var myTween = new Tween(fill,'alpha',Regular.easeIn,1,0,0.3,true);
}
}
trace("Done!" + blk);
}
}
}

Answer 1

I kinda solved the problem by stacking the sprites under movieclips so I only tween couple of elements instead of tens or hundreds
for (var k = 0; k < (grdX/ptrnSz); k++)
{
var ptrn:MovieClip = new MovieClip();
ptrn.name = "ptrn" + k;
addChild(ptrn);
ptrn.alpha = 0.01;
ptrnAm++;
for (var d = 0; d < grdY; d++)
{
posY = (d*dim) + (d*pad) + top;
for (var c = (0+(ptrnSz*k)); c < (ptrnSz+(ptrnSz*k)); c++)
{
posX = (c*dim) + (c*pad) + left;
// l = line, f = fill
var f:Sprite = new Sprite;
f.graphics.beginFill(0xFFFFFF, 1);
f.graphics.drawRect(posX-0.5, posY, dim, dim);
f.graphics.endFill();
f.name = "fill_Block" + k + "Row" + d + "Col" + c;
ptrn.addChild(f);
}
}
}
grdX = Grid size in X-axis (how many columns)
ptrnSz = size of the movieclips containing the Sprites (how many columns)
After that I just tween movieclips with TweenMax, calling them each with getChildByName.