A brain break task!.. designing with AS

[numediaweb]

Hello world!
When I say this is a brean break, I really mean it:
how to design an animation already done in timeline? you think it is easy? well i spent the last week trying to achieve it but didn't succeed!
her's the animation link: designCells.swf (http://tigmi.net/tmp/designCells.swf)
her's the animation original fla: designCells.fla (http://tigmi.net/tmp/designCells.fla)
Description; from an as3 class, I should duplicate a movieclip on the lirary with linkage name "cell", then duplicate that cell into 100 cells inside a container with instance name "search_cells", but they should be aligned and animated as the original example swf.
her's what i did so far:

var celNum:int = 25;
var celArr:Array = new Array();

function designFirstCel(){
// make sure the first cell esases to starting position
var cel:cell = new cell();
cel.blendMode = "add";
cel.alphaMultiplier="1";
cel.name = "cell_1";
search_cells.addChild(cel);
var xTw:Tween = new Tween(search_cells.getChildAt(1), "x", Regular.easeOut, 693.9, 530, 11, false);
var yTw:Tween = new Tween(search_cells.getChildAt(1), "y", Regular.easeOut, 126.5, 165, 11, false);
search_cells.getChildAt(1).scaleX = .3;
search_cells.getChildAt(1).scaleY = .3;
search_cells.removeEventListener(Event.ENTER_FRAME , designFirstCel);
search_cells.getChildAt(1).addEventListener(Event. ENTER_FRAME, stylizeCell, false, 0, true);
}
function stylizeCell(evt:Event):void {
// scale x evt.currentTarget.startDrag();
if(evt.currentTarget.scaleX <= .90){
evt.currentTarget.scaleX += .05;
}
// scale y
if(evt.currentTarget.scaleY <= .90){
evt.currentTarget.scaleY += .05;
}
// igniti cell creation process
if((evt.currentTarget.scaleY <= .4) && (evt.currentTarget.scaleX >= .4)){
designCels();
}
// kill first cell event upon finish
if((evt.currentTarget.scaleY > .9) || (evt.currentTarget.scaleX > .9)){
evt.currentTarget.removeEventListener(Event.ENTER_ FRAME, stylizeCell);
}
//trace(evt.currentTarget.scaleY)

}
// design top-right block
function designCels(){
for (var i:int = 2; i <= celNum; i++){
var cel:cell = new cell();
cel.blendMode = "add";
cel.alphaMultiplier="1";
cel.name = ["cell_"]+i;
search_cells.addChild(cel);
search_cells.getChildAt(i).addEventListener(Event. ENTER_FRAME, stylizeCell, false, 0, true);
var xTw:Tween = new Tween(search_cells.getChildAt(i), "x", Regular.easeOut, 693.9, 530+search_cells.getChildAt(i-1).width, 11, false);
var yTw:Tween = new Tween(search_cells.getChildAt(i), "y", Regular.easeOut, 126.5, 165-search_cells.getChildAt(i-1).height, 11, false);
//trace("current cel = "+i+" its x is = "+search_cells.getChildAt(i).name);
}
}
// ignit first cell
search_cells.addEventListener(Event.ENTER_FRAME, designFirstCel, false, 0, true);


anyone who has time for a brain break session :genius: ?

[numediaweb]

no idea! comon guys i know you got something for me ;)

[numediaweb]

if just someone could know how to animate the first block (1-->25), that would be great help!

[Sage_of_Fire]

First, you need to establish the final position of all the hexagonal cells by placing them on the stage manually. Then, in the class associated with each cell, you can use Tweenlite (http://blog.greensock.com/tweenliteas3/) to tween the cells from offstage to where they end up. Here's a good tutorial on using Tweenlite (I think): link (http://www.learningactionscript3.com/2008/06/06/tweenlite-introduction/).

Because the cells will already be onstage and in position, it should be easy to calculate where they should start the tween. No matter what, you shouldn't continue making one function to animate each cell. That kind of programming will be far too time-consuming and hard-to-modify for you to become a successful AS3 developer. If you have any more problems, just ask.

[numediaweb]

thank you Sage_of_Fire for your answer.

My only concern is the fact that this project is intended for flex in the future, and we know that flex doesn't have any timeline, so the perfect choice is to create everything in OOP, by using classes to animate (create) timeline.
so when the time comes for a flex upgrade, i don't have to do things twice.
that's why I think it would be great to do the animation stuff using pure AS.

any ideas?

[bojosiri]

Dont know if it will be much help but if you dont want to use the stage, couldnt you make some arrays for the x and y positions for each of the movieclips end position?

If you do what Sage... said above, with the arrays then I think it should work.

Hope this helps.

[numediaweb]

thank you gyus for the support, but for the moment, i will stick with the timeline and when it comes to flex migration, maybe, a solution may rise up.

thnk you all.