Simultaneous tweens and position resets

[icraig6666]

Hi,

I have a simple movie that has two tweens happening (two photos going down in scale slightly at the same time, var car and var photo; a background object and a foreground object).

 

This works fine on the first loop, but nothing happens on the second loop, and

the third loop the foreground object ("car") has been scaled twice, so appears too small, and again no animation happens.

There are some 'position reset' issues here that I don't understand, most of what I try in the 'reset to start position' in the code

makes things worse. Any help gratefully recieved.  Thanks..

import com.greensock.*
import com.greensock.easing.*;
import flash.display.MovieClip;
//import flashx.textLayout.operations.MoveChildrenOperation;

var text1:MovieClip;
var photo:MovieClip;
var finalText:MovieClip;
var blackMask:MovieClip;
var button:MovieClip;
var price_text:MovieClip;
var car:MovieClip;

// STARTING STATES
text1.alpha = 0;
finalText.alpha = 0;
price_text.alpha = 0;
button.alpha = 0;
button.x = 370;
blackMask.alpha = 1;
photo.scaleX = 1;
photo.scaleY = 1;
car.scaleX = 1;
car.scaleY = 1;



//ANIMATE SEQUENCE
var max_loops:Number = 3;
var loop_count:Number = 1

var TL:TimelineLite = new TimelineLite({onComplete:countUp});

function playOnce():void {
    
    TL.to(photo, .2, {scaleX:"+=0.1",scaleY:"+=0.1"});
    
    //FADE FINAL TEXT IN
    TL.to(blackMask, .4, {alpha:0});
    TL.to(photo, 3, {scaleX:"-.09",scaleY:"-.09"},1);
    TL.to(car, 2, {scaleX:"-.1",scaleY:"-.1"},1);
    
    TL.to(button, 1.5, {alpha:1},  "-=0.1");
    TL.to(text1, 1.5, {alpha:1},  "-=0.1");
    TL.to(finalText, 1.5,  {alpha:1},  "-=0.1");
    TL.to(price_text, 1.5,  {alpha:1},  "-=0.1");    
    TL.to(button, .5, {x:255}, "+=0.5");
    
    //WRAP 'LOOP RESET' TWEENS IN CONDITIONAL, last run ends at FINAL text
    if (loop_count<max_loops) {
    
    //FADE FINAL TEXT OUT
    TL.add([new TweenLite(blackMask, 1, {alpha:1}),            
            new TweenLite(button, 0.3, {alpha:0}),
            new TweenLite(finalText, 0.3, {alpha:0}),
            new TweenLite(text1, 0.3, {alpha:0}),
            new TweenLite(price_text, 0.3, {alpha:0}),        
            new TweenLite(button, 3, {x:370}),
            
            ], "+=3");
            
    //RETURN TO START POS
    
            new TweenLite(photo, 0.25, {scaleX:"0.1",scaleY:"0.1"});
            new TweenLite(car, 0.25, {scaleX:".1",scaleY:".1"});
            new TweenLite(button, 0.3, {alpha:0});
            new TweenLite(button, 0.25, {x:370});
            new TweenLite(car, 0.25, {scaleX:"0.1",scaleY:".1"}),        
    
    TL.play();
    
    }
            
}

function countUp():void {
    loop_count++;
    init();
}

function init():void {
    if (loop_count<=max_loops) {
        trace("played "+loop_count+" times");
        playOnce();
    }
}

init();

[Carl]

Hi and welcome to the GreenSock forums.

 

I can see in theory what you are trying to do, but not sure what isn't working right.

 

Also, its hard to distinguish intent when you mix usage of relative values. I know we changed things in v12 but it is worthwhile to get in the habit of always using the += notation as you do here

TL.to(photo, .2, {scaleX:"+=0.1",scaleY:"+=0.1"});

Please feel free to post your fla and I will take a look at it. Zip it first.

[icraig6666]

Thanks Carl,

 

I've zipped it up for you to take a look at.

TEST copy.zip

 

It's pretty basic stuff - trying to get two objects to tween at the same time,

both scaling down slightly as though the camera is zooming out, the car object scales down slightly less than the bg.

 

It works fine on the first loop but doesn't reset the scale of both objects for subsequent loops. No scaling animation happens in the 2nd and 3rd loop, so its not resetting correctly. The text and button work fine on all the loops.

 

Thanks very much for yr help in getting me to understand some Greensock animation basics!

 

 

Ian

[Carl]

Thanks for the file. Very helpful. 

 

There were a few problems, but I'll just focus on the main one.

 

You had logic that said "when the timeline completes, call the playOnce function again".

Every time the playOnce() function was called it would create and add NEW tweens to the existing timeline (most of them at the end of the timeline). While it was doing that it would decide whether or not the "fadeOut" section of the timeline should be added. When the final loop_count was reached you would simply not add that "fadeOut" section and the timeline would stop. In theory this isn't too bad but there was a flaw in the implementation.

 

   

//FADE FINAL TEXT IN
    TL.to(blackMask, .4, {alpha:0});
    TL.to(photo, 3, {scaleX:"-.09",scaleY:"-.09"},1); //add a time of 1 second
    TL.to(car, 2, {scaleX:"-.1",scaleY:"-.1"},1); //add at a time of 1 second

Let's just say 1 iteration of the timeline is 5 seconds. When the playOnce() timeline plays the first time, those tweens above are added at a time of 1 second.

The problem is, that when the timeline plays a second time and you are adding new tweens to the end of the timeline to build a new iteration... those tweens above ARE STILL being added at a time of 1 second (way in the past). 

 

This is the main reason why it seemed like they weren't playing at the right time, you were simply scheduling them to play at the wrong time.

 

Instead of fixing your current implementation I decided to show you what I think is a more practical approach.

 

Basically you build the timeline once from beginning to end of 1 iteration, including the fade to black stuff. 

When the timeline ends, the onComplete callback will handle incrementing loop_count and telling the timeline to restart().

Each time the timeline reaches the fade out at the end it runs a function which checks the value of loop_count.

If loop_count = max_loops the timeline will pause(), if not it will keep playing to the end and repeat.

 

Paste this code into your file:

import com.greensock.*
import com.greensock.easing.*;
import flash.display.MovieClip;
//import flashx.textLayout.operations.MoveChildrenOperation;


var text1:MovieClip;
var photo:MovieClip;
var finalText:MovieClip;
var blackMask:MovieClip;
var button:MovieClip;
var price_text:MovieClip;
var car:MovieClip;


// STARTING STATES
text1.alpha = 0;
finalText.alpha = 0;
price_text.alpha = 0;
button.alpha = 0;
button.x = 370;
blackMask.alpha = 1;
photo.scaleX = 1;
photo.scaleY = 1;
car.scaleX = 1;
car.scaleY = 1;


//carCutout.scaleX = 1.1;
//carCutout.scaleY = 1.1;




//ANIMATE SEQUENCE
var max_loops:Number = 3;
var loop_count:Number = 1


var TL:TimelineLite = new TimelineLite({onComplete:countUp});


TL.timeScale(1.5);


function playOnce():void {
TL.to(blackMask, 1, {alpha:0});
TL.to(photo, 1, {scaleX:"+=0.1",scaleY:"+=0.1"}, 0);








//FADE FINAL TEXT IN
TL.add("shrink");
TL.to(photo, 3, {scaleX:"-=.09",scaleY:"-=.09"}, "shrink");
TL.to(car, 2, {scaleX:"-.1",scaleY:"-.1"}, "shrink");


TL.to(button, 1.5, {alpha:1},  "-=0.1");
TL.to(text1, 1.5, {alpha:1},  "-=0.1");
TL.to(finalText, 1.5,  {alpha:1},  "-=0.1");
TL.to(price_text, 1.5,  {alpha:1},  "-=0.1");




//var tween = new TweenLite(finalText, 2, {x:100, y:200});




TL.to(button, .5, {x:255}, "+=0.5");


//if loop_count is too big we pause(), otherwise play til end


TL.call(function() {
if (loop_count == max_loops) {
TL.pause();
}
})


//FADE FINAL TEXT OUT
TL.add([new TweenLite(blackMask, 1, {alpha:1}), 
new TweenLite(button, 0.3, {alpha:0}),
new TweenLite(finalText, 0.3, {alpha:0}),
new TweenLite(text1, 0.3, {alpha:0}),
new TweenLite(price_text, 0.3, {alpha:0}),


new TweenLite(button, 3, {x:370}),


], "+=3"); 
}


function countUp():void {
loop_count++;
TL.restart();
}




playOnce();

Note: I may have messed up the timing and animation effects a bit while experimenting. 

The good news is that this gives you a solid foundation for making a timeline repeat a certain amount of times with the option to fade out or animate the end state anyway you like when it repeats.

 

As you will see, one of the big advantages of this approach is that you don't need to reset any of the properties of any of the objects... it all happens naturally when the animation starts playing again at the beginning via restart();

 

If you need a crash course on the position parameter which helps you control the position of tweens, please read: http://greensock.com/position-parameter

 

 

[icraig6666]

Thanks so much Carl, this'll really help me to get familiar with the logic.