Flash AS3 timer question

Question

Hi I have got a timerEvent that adds 25 movieclips to the stage and animates them from x:0,y:0, this all works fine! What i would like to do is assign each movie clip a y value of 25px more than the last movieClip added to the stage. I did a little test by trying to increment a number value each time the timer did a loop but it didnt increment. Should i be using a for loop/array too?

Thanks in advance. Jono

import flash.events.*;
import caurina.transitions.*;

bringItemsOn();

var itemTimer:Timer;
function bringItemsOn():void {
 itemTimer=new Timer(300);
 itemTimer.addEventListener(TimerEvent.TIMER,itemTimer_tick);
 itemTimer.start();
}

function itemTimer_tick(e:TimerEvent):void {    
    itemTimer.currentCount-1;
    var mc:MovieClip = new MovieClip();
    mc.graphics.beginFill(Math.random() * 0x000000);
    mc.graphics.drawRect(0,0,stage.stageWidth,25);
    mc.x=0;
    mc.y=0;
    addChild(mc);
    Tweener.addTween(mc,{y:Math.random()*1000 - 500,
                             x:0,
                             time:.9,
                             transition:"easeOutExpo"});

    if (itemTimer.currentCount>=25) {
  itemTimer.removeEventListener(TimerEvent.TIMER,itemTimer_tick);
 }
}

Answer 1

Didn't really locate the part where you tried to increment a variable or add 25px to y, but try this:

function itemTimer_tick(e:TimerEvent):void {

    ...

    mc.y = itemTimer.currentCount * 25;
    addChild(mc);

    ...

}

Answer 2

I really different approach could be to use the delay property of the Tweener.addTween method. Initiate all movieclips and increase the delay for every one just a little bit?

Answer 3

Honestly I would have set this all up initially with a for loop. Once you have finished your for loop, placing each item accordingly, then use TweenLite, or your favorite Tweening Package.

package
{
    import flash.display.Sprite;
    import flash.events.Event;

    import gs.TweenLite;
    import gs.easing.*;

    public class ExampleDocumentClass extends Sprite
    {
        if(stage) _init();
        else addEventListener(Event.ADDED_TO_STAGE, _init(), false, 0, true);
    }
    private function _init(e:Event =null):void
    {
        for(var i:int = 0; i < 25; i++)
        {
            var mc:MovieClip = new MovieClip();
            mc.graphics.beginFill(Math.random() * 0x000000);
            mc.graphics.drawRect(0,0,stage.stageWidth,25);
            //Seperates them by 25, their width, so they will touch.
            mc.x= i * 25; //i * 25 + 1 leaves a space in between.
            mc.y=0;
            addChild(mc);
            TweenLite.to(mc, 0.9, {y:math.random()*1000-500, x: 0, ease: Expo.easeOut});

        if(i == 24) //Total length - 1
        {
            //The loop ended.
        }
    }
}

It is important to note that screen updates DO NOT happen within code blocks such as for and while loops. You could not space these based on each other in the fashion that I have shown because even though the prior items x may have just been set, it has not been drawn to screen; In order to build a system where say all the images aren't the same width, yet one must start after another, we must wait for the Event.COMPLETE event to fire for the given loader, so that we may access it's width and other attributes. Since you just wanted to space them 25 pixels apart, and they are the same size, we merely use "i" to separate them

Whats happening: i * 25 = 0; i++; i * 25 = 25; i++; i * 25 = 50;

as you can see we have achieve the spacing we were looking for.

Brian Hodge
hodgedev.com blog.hodgedev.com