views:

303

answers:

1

I want my animation to advance 120 pixels each time. Instead, my animation goes back to the bottom, rather than advance from it's new position. It assumes a new position, but always go back to the bottom first. How do I get my animation to advance from it's current position each time?

GOAL
I want my animation to advance 120 pixels from current new position, and repeat after ten.

PROBLEM
Animation resets to bottom each time, before advancing. I don't if it's a Tweener problem, how I set up my loop, or something unrelated. If you can give me an example of how to modify this code, I would be appreciated.

alt text

NumbersView.as 'the code works, but in a messed up way as described'

package   
{ 
    import flash.display.DisplayObject; 
    import flash.display.MovieClip; 
    import flash.utils.Dictionary; 
    import flash.events.Event; 
    import caurina.transitions.Tweener; 

    public class NumbersView extends MovieClip 
    { 
        private var _listItems:Array; 
        private var previousNums:Array; 
        private const numHeight:int = 120; 

        public function NumbersView()  
        { 
            _listItems = new Array(); 
            previousNums = new Array(); 
            //Tweener.init();

            var item:NumberImage; 
            for (var i:Number = 0; i < 9; i++) { 
                item = new NumberImage(); 
                addChild(item); 
                item.x = i * item.width; 
                _listItems.push(item); 
            } 
        } 

        public function setTime($number:String):void { 
            var nums:Array = $number.split(""); 
            //trace("$number = " + $number);
            for (var i:Number = 0; i < nums.length; i++) { 
                if (nums[i] == previousNums[i]) continue; 
                Tweener.removeTweens(_listItems[i]);    

                //newY:int = -numHeight;
                var newY:int = int(nums[i]) * -numHeight;
                trace("newY = " + newY);
                trace("currY = " + _listItems[i].y);                
                if (_listItems[i].y < 0) _listItems[i].y = numHeight; 
                Tweener.addTween(_listItems[i], { y:newY, time:3 } ); 
            } 
            previousNums = nums; 
        } 
    } 
} 

alt text

Tweener http://hosted.zeh.com.br/tweener/docs/en-us/

+1  A: 

I kind of was able to get your code to animate items and I saw that each time the items animated they restarted at their position, here is what I changed to get them to move up from where they are currently positioned:

original:

if (_listItems[i].y < 0) _listItems[i].y = numHeight;
Tweener.addTween(_listItems[i], { y:newY, time:3 } ); 

changed to:

//if (_listItems[i].y < 0) _listItems[i].y = numHeight; //get rid of this line
Tweener.addTween(_listItems[i], { y:_listItems[i].y+newY, time:3 } ); 

For the looping portion of this you can use a timer, here is what I put together as an example for you. It's probably not perfect, but hopefully gives you an idea for what you want it to do:

package   
{ 
    import flash.display.DisplayObject; 
    import flash.display.MovieClip; 
    import flash.utils.Dictionary; 
    import flash.events.Event; 
    import flash.events.TimerEvent;
    import caurina.transitions.Tweener; 
    import flash.utils.Timer;

public class NumbersView extends MovieClip 
{ 
    private var _listItems:Array; 
    private var previousNums:Array; 
    private const numHeight:int = 120; 
    var t:Timer;

    public function NumbersView()  
    { 
        _listItems = new Array(); 
        previousNums = new Array(); 
        //Tweener.init();

        var item:NumberImage; 
        for (var i:Number = 0; i < 9; i++) { 
            item = new NumberImage(); 
            addChild(item); 
            item.x = i * item.width; 
            _listItems.push(item); 
        }

        t = new Timer( 1000 ) //1000ms = 1 second intervals
        t.addEventListener(TimerEvent.TIMER, onTimer);
        t.start();

    } 

    public function onTimer( e:TimerEvent):void {

        //this will run every 10th time firing
        if( t.currentCount % 10 == 0 ) {
            //do something to reset the listItems
            for (var i:Number = 0; i < _listItems.length; i++) { 
                _listItems[i].y = numHeight;
            }
        }

        //do your setTime function, I just randomly called it with random numbers
        setTime(Math.round(Math.random()*234567).toString());
    }

    public function setTime(number:String):void { 
        var nums:Array = number.split(""); 
        trace("$number = " + number);
        for (var i:Number = 0; i < nums.length; i++) { 
            if (nums[i] == previousNums[i]) continue; 
            Tweener.removeTweens(_listItems[i]);    

            //newY:int = -numHeight;
            var newY:int = int(nums[i]) * -numHeight;
            trace("newY = " + newY);
            trace("currY = " + _listItems[i].y);                

            Tweener.addTween(_listItems[i], { y:_listItems[i].y+newY, time:3 } ); 
        } 
        previousNums = nums; 
    } 
} 
}
walpolea
Answers the Tweener problem! Any idea how to have it loop. I don't think that was clear in my question
VideoDnd
You could use the onComplete parameter to fudge a type of recursion into your tween by passing the starting position into the function you're using to kick off your tween and then updating it with the expected position after the tween has been completed.
vanhornRF
Thanks, I'll try that.
VideoDnd