Jump to content
Search Community

TimelineMax Sequence Tweening being messed around

johnjoallen test
Moderator Tag

Recommended Posts

Hi Guys,

 

I'm wondering can you give me a little help. I'm using TimelineMax within and for loop and the animations are being messed around... basically it looks like everything is being scarmbled

 

CODE:

for(var i:uint = 0; i < attackEnemiesToAnimate.length; i++)
{	
	enemyToTrack = attackEnemiesToAnimate[i];
        createAnimation(enemyToTrack);	
			
	if(enemyToTrack.x == stage.stageWidth - 20)
	{
		attackEnemiesToAnimate.splice(i,1);
		this.removeChild(enemyToTrack);
		enemyToTrack = null;
	}
enemyToTrack = null;
}

private function createAnimation(e:Enemy):void
{	
    var tl:TimelineMax = new TimelineMax();
   tl.to(e, 0.5, {x:stage.stageWidth - 100, y:50},1).to(e, 0.5, {x:pirate.x, y:pirate.y},2).to(e, 0.5,  {x:-stage.stageWidth - 30, y:-stage.stageHeight - 10}, 3);
  e = null;
tl =null;
}

Any Suggestions

 

Cheers,

 

John

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Although I appreciate how concise the code is, its still tough to visualize exactly what the problem is.

 

From my initial inspection nothing is really jumping out. It looks like you are creating a bunch of assets that all should be animating to the same series of positions at the same time.

 

If you could provide just enough of the code / assets to compile and test that bit of code it would be very helpful. (you can attach a zip via "more reply options")

 

In the meantime, perhaps you could try not nulling everything, minimizing the timeline to a single tween and try to better find where things are breaking.

Link to comment
Share on other sites

Hi Greensock Support,

 

i think this is the right topic, because i´m trying to get a simple endless-loop Sequence to run:

		
private function buildTL2(objects:Array,duration:Number, blendDuration:Number):TimelineMax
		{
			var tll:TimelineMax=new TimelineMax({repeat:-1, paused:true});
			
			//var animArr:Array=new Array();
			var td:Number=0;
			
			for (var i:uint=0; i<objects.length; ++i)
			{
				if(i>0)
					tll.append(TweenMax.fromTo(objects[i],blendDuration,{autoAlpha:0, immediateRender:true},{autoAlpha:1, immediateRender:true}),-blendDuration);
				
				tll.append(TweenMax.fromTo(objects[i],blendDuration,{autoAlpha:1, immediateRender:true},{autoAlpha:0, immediateRender:true}),duration);
				
				td=1;
					
					
				//tll.append(this.animINOUT(objects[i],duration,blendDuration),-blendDuration);
				
				//animArr.push(this.animINOUT(objects[i],duration,blendDuration));
			}
			tll.append(TweenMax.fromTo(objects[0],blendDuration,{autoAlpha:0, immediateRender:true},{autoAlpha:1, immediateRender:true}),-blendDuration);
			
			//tll.append(TweenMax.fromTo(objects[i],blendDuration,{autoAlpha:1, immediateRender:true},{autoAlpha:0, immediateRender:true}),duration);
			//tll.appendMultiple(animArr, 0, "normal", -blendDuration);
			
			return tll;
		}

No way to get this work: the timeline is built, but isn't playing in a right way; Its starting with the last picture then you have to wait numberOf(objects)*duration befor its blinking once and playing in the expected way. Tryied with play(0), restart(), gotoAndPlay(0), gotoAndStop(9) and play(), etc.

 

In Flash its working, in AIR 3.2-3.8 not. Why???




In the attached .fla you can find several ways to build the timeline:
- tl.append(TweenMax)

- tl.appendMultiple(Array(TimelineMax))

- tl.appendMultiple(Array(Animation))

TimelineTest_27-09-2013.zip

Link to comment
Share on other sites

I tried compiling the fla but it threw errors about missing files, duplicate variable definitions, etc. Could you create the simplest possible example that we can cleanly compile and post it here? We'd love to help. 

 

Additional disclaimer: I'm not terribly familiar with AIR or its quirks. Since you said this works fine in Flash, it seems like it very well could be an AIR issue (which we can't do much about unfortunately). I haven't heard of any incompatibilities between AIR and GreenSock stuff, though - lots of people are using GreenSock tools in AIR projects. 

Link to comment
Share on other sites

Two more things I noticed:

  • You're splicing the array in the middle of a loop. That can lead to odd results because imagine "i" is 5 and you splice(i, 1), but your loop iterates i after that time through the loop, so it's now 6 but what was PREVIOUSLY the 6th element of the array is now the 5th element due to the splice()! Therefore, you skipped an element. 
var a = [1,2,3];
var i = 0; 
trace(a[i]); //1
a.splice(i, 1);
i++;
trace(a[i]); //3, not 2
  • You're placing your tweens into the timeline(s) so that they start at 1-second into the timeline. In other words, there's 1 second of nothing happening at the beginning of your timeline. That's fine. You mentioned trying to play(0) and restart(), etc. - were you expecting the timeline to skip that first second or something? You can certainly play(1) if you're trying to make it play from 1 second onward.

Does that clear anything up? 

Link to comment
Share on other sites

Hi,

 

thank you very much for your reply!

 

The missing files error is a runtime-error not an compile-error and is caused by the missing images in the defined imageFolder in the line:

var fd:File=new File("C:\\TimelineTest_27-09-2013\\Bilder");

Duplicate variable definition is a warning not an error. You can compile that fla by ignoring all warnings. Just put some images (jpg) into the folder defined above.

 

The timeline-build is happening in the function buildTL2() (see code below and the attached fla)

 

I'm not splicing an array anywhere. The array is built after all Images in the folder are loaded and is consisting of the rawcontent of all successfully loaded loader (imageLoader when only jpgs are in the defined folder).

 

Also, as you can see in the code below, the first tween starts at 0 in the timeline, because of the IF(i>0)-Statement in the loop.

        private function buildTL2(objects:Array,duration:Number, blendDuration:Number):TimelineMax
        {
            var tll:TimelineMax=new TimelineMax({repeat:-1});
            
            //var animArr:Array=new Array();
            var td:Number=0;
            
            for (var i:uint=0; i<objects.length; ++i)
            {
                if(i>0)
                    tll.append(TweenMax.fromTo(objects[i],blendDuration,{autoAlpha:0, immediateRender:true},{autoAlpha:1, immediateRender:true}),-blendDuration);
                
                tll.append(TweenMax.fromTo(objects[i],blendDuration,{autoAlpha:1, immediateRender:true},{autoAlpha:0, immediateRender:true}),duration);
                
            }
            tll.append(TweenMax.fromTo(objects[0],blendDuration,{autoAlpha:0, immediateRender:true},{autoAlpha:1, immediateRender:true}),-blendDuration);
            
            
            return tll;
        }

So unfortunately you answer does not clear anything up :rolleyes:

I commented out all unneeded code in the TLTestMain.as

 

After compiling you should see output like this:

dir loaded.
extension: jpg
extension: jpg
extension: jpg
extension: jpg
extension: mp4
extension: jpg
extension: jpg
extension: jpg
extension: swf
extension: jpg
progress: 0.0019732022538030795
progress: 0.003946404507606159
progress: 0.005190645583326561
progress: 0.007163847837129641
progress: 0.00913705009093272
progress: 0.010899461497279817
progress: 0.012872663751082897
progress: 0.014845866004885976
progress: 0.016819068258689056
progress: 0.018792270512492135
progress: 0.020765472766295215
progress: 0.022806539977985138
progress: 0.024779742231788218
progress: 0.026752944485591297
progress: 0.9702562421353415
progress: 0.9722108514519288
progress: 0.9741654607685162
progress: 0.974546176526668
progress: 0.9765007858432553
progress: 0.9784553951598426
progress: 0.9804100044764299
progress: 0.9810125881957953
progress: 0.9829671975123827
progress: 0.98492180682897
progress: 0.9856573502702187
[SWF] C:\Entwicklung\TimelineTest_27-09-2013\Bilder\TestSWF.swf - 192779 Byte nach Dekomprimierung
progress: 0.9857042947749841
progress: 0.9950806637048359
progress: 0.9970538659586391
progress: 0.9990270682124421
progress: 1
LoaderMax 'mainQueue' is complete!

TimelineTest_27-09-2013.zip

Link to comment
Share on other sites

I tried getting your file to compile properly for over 30 minutes and had no luck :(

 

I'm a bit confused why all this file loading stuff is in your file as the trouble seems to be regarding how to animate a few things fading in and out in sequence.

AIR apps aren't really my specialty and the LoaderMax stuff is really intended for http streaming. 

 

Eventually I just made a file that tweens a few circles (Sprites), more on that later.

 

In your timeline loop :

 

for (var i:uint=0; i<objects.length; ++i)
            {
                if(i>0)
                    tll.append(TweenMax.fromTo(objects[i],blendDuration,{autoAlpha:0, immediateRender:true},{autoAlpha:1, immediateRender:true}),-blendDuration);
                
                tll.append(TweenMax.fromTo(objects[i],blendDuration,{autoAlpha:1, immediateRender:true},{autoAlpha:0, immediateRender:true}),duration);
                
            }
//FIRST TWEEN
            tll.append(TweenMax.fromTo(objects[0],blendDuration,{autoAlpha:0, immediateRender:true},{autoAlpha:1, immediateRender:true}),-blendDuration);
}
Please notice that the tween I marked //FIRST TWEEN gets added with a negative start time. 
 
If your tween has a duration of blendDuration and an offset of -blendDuration. It will be complete before the timeline even begins.
 
In other words a tween with a duration of 2 seconds that gets inserted into a timeline at a time of negative 2 will never play. 
 
---
 
In order to make some progress with this file, I stripped out all the file loading code and just  used this in TLTestMain.as

package {
import com.greensock.*;
import com.greensock.plugins.*;


import flash.display.*;
import flash.events.Event;


public class TLTestMain extends MovieClip {
TweenPlugin.activate([AutoAlphaPlugin]);


var tl:TimelineMax = new TimelineMax({});


public function TLTestMain() {
var things:Array = [];
for (var i:uint = 0; i < 4; i++) {
var circle:Sprite = new Sprite();
circle.graphics.beginFill(0xFFCC00);
circle.graphics.drawCircle(i*80, 40, 35);
addChild(circle);
things.push(circle);
}


tl.insert( buildTL2(things,1,1) );
tl.play();


}








private function buildTL2(objects:Array,duration:Number, blendDuration:Number):TimelineMax {
var tll:TimelineMax = new TimelineMax({onComplete:jumpToOverlap, onCompleteParams:[blendDuration]});


//var animArr:Array=new Array();
var td:Number = 0;
var overlap:int;
for (var i:uint=0; i<objects.length; i++) {




if (i == 0) {
//on first pass place first tween at time of 0
overlap = 0;
} else {
//start other tweens -blendDuration seconds before end of timeline
overlap = blendDuration * -1;
}


trace(overlap);


tll.append(TweenMax.fromTo(objects[i], blendDuration,{autoAlpha:0},{autoAlpha:1, immediateRender:true}), overlap);
tll.append(TweenMax.fromTo(objects[i], blendDuration,{autoAlpha:1},{autoAlpha:0, immediateRender:false}), duration);






}


//to have the last object fade out while first tween fades in, you need another overlapping tween of last with first
tll.append(TweenMax.fromTo(objects[0], blendDuration,{autoAlpha:0},{autoAlpha:1, immediateRender:false}), overlap);








return tll;
}


private function jumpToOverlap(overlapTime:int) {
trace("seamless loop");
tl.play(overlapTime);
}


}
}
 

 

I don't know if this is exactly the behavior that you want but its a much better starting point.

Please test the code above and clearly describe the behavior you would like to change.

 

I think there was some confusion as to the splice[] advice and start times of tweens as you jumped onto someone else's thread which contains different code for a different issue. 

 

Also I'm unclear if there is still some drastic change in behavior between compiling for AIR or or as  normal swf. It will probably be best to address that in a separate thread.

 

Also note, in fromTo() tweens immediateRender only needs to be set in the to vars, not in the from vars also. Probably wasn't causing a problem... just not necessary to have it in both.

 

Also, the code could be quite a bit condensed if you are using v12 (current and most recent version of the platform), but I don't want to confuse things too much until the animation behavior is working properly.

 

trace(TweenLite.version) // will get you the version. Should start with 12.

Link to comment
Share on other sites

Hi Carl,

 

I am compiling inside Flash Professional CS6 - and its compiling very well on 3 different systems. You just need to hit <ctrl><enter> (PC). Or just build your own AIR-Project and c/paste the buildTL2()-function.

 

TweenMax.Version=12.0.11

 

the first tween is not the tween you marked as first tween.

This the one:
 

tll.append(TweenMax.fromTo(objects[i],blendDuration,{autoAlpha:1, immediateRender:true},{autoAlpha:0, immediateRender:true}),duration);

The first tween has a positive starttime (duration = 5s).

The timeline shoud start with the first sprite showing it for 5s and then blend over to the next.

 

The one you marked is the last tween: object[0] is blending in, so the loop is endless.

 

Any other is described above:

...the timeline is built, but isn't playing in a right way; Its starting with the last picture then you have to wait numberOf(objects)*duration befor its blinking once and playing in the expected way.

Link to comment
Share on other sites

In the process of quickly trimming out the non-essential loading code, I perhaps misunderstood what was happening in the loop and the conditional without the {}. Sorry about that. 

 

Are you saying the code I provided doesn't loop seamlessly?

 

Again, a simple file with only a few sprites would go along way towards getting this resolved.

 

Thanks

Link to comment
Share on other sites

Yeah, I hadn't realized this thread was hijacked (I don't mean that in a negative way) - I had been looking at the other guy's code. 

 

The problem was definitely a logic issue in the way you built your loop/timeline. If you want a simple loop of things fading up/down in a sequenced fashion, you could do this:

function buildTL3(objects:Array, duration:Number, blendDuration:Number):TimelineMax {
	var tl:TimelineMax=new TimelineMax({repeat:-1});
	return tl.staggerFromTo(objects, duration, {autoAlpha:0}, {autoAlpha:1}, blendDuration + duration).staggerFromTo(objects, duration, {autoAlpha:1}, {autoAlpha:0, immediateRender:false}, duration + blendDuration, duration + blendDuration);
}

However, you'll notice that when the last object finishes fading out, that's when the loop happens, thus the first object doesn't start fading up until the last one is done. That's not a problem with GSAP or the timeline or anything - it's just a logic issue. I assume you might be looking for a way to create a seamless loop where the end appears to overlap with the beginning as well. That's a bit more tricky because it's not a true loop, otherwise the last element would be fading out while the first one fades up initially (again, I doubt you want that). 

 

So the trick is to isolate the first fade up and then have a loop thereafter that's seamless and has the first object's fade up overlapped with the last element's fade out. Here's some sample code for that:

function buildTL4(objects:Array, duration:Number, blendDuration:Number):TimelineMax {
	var tl:TimelineMax=new TimelineMax({repeat:-1});
	var iterationDuration:Number = duration + blendDuration;
	var firstFade:TweenLite, firstFadeCopy:TweenLite;
	for (var i:int = 0; i < length; i++) {
		//the fade up of the FIRST object has to be handled uniquely so that things overlap properly between the end and beginning of the loop.
		if (i !== 0) {
			tl.fromTo(objects[i], blendDuration, {autoAlpha:0}, {autoAlpha:1}, iterationDuration * i - blendDuration);
		} else {
			firstFade = TweenLite.fromTo(objects[i], blendDuration, {autoAlpha:0}, {autoAlpha:1});
			firstFadeCopy = TweenLite.fromTo(objects[i], blendDuration, {autoAlpha:0}, {autoAlpha:1});
		}
		//fade down
		tl.fromTo(objects[i], blendDuration, {autoAlpha:1}, {autoAlpha:0, immediateRender:false}, (i + 1) * iterationDuration - blendDuration);
	}
	//drop the first fade into the END of the timeline so that it matches up seamlessly when looping
	tl.add(firstFade, "-=" + blendDuration); 
	//now we'll create a parent timeline that has the first fade in tween (well, a copy of it) alone to begin with, immediately followed by the looping timeline we created above. The whole point is to ensure that the first fade up is isolated and isn't part of the loop, and the loop is seamless.
	var tlWithOverlap:TimelineMax = new TimelineMax();
	tlWithOverlap.add(firstFadeCopy).add(tl);                 
	return tlWithOverlap;
}

Now you'll see a nice initial fade up of the first element and then everything is seamless thereafter with a loop that has the end appearing to overlap with the beginning fade. 

 

Does that help?

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...

Hi Jack,

 

I was in holliday the last weeks, so my answer is late:

 

1. no, sorry this does not work...(copied and pasted the function)

 

2. There is no logical problem, because there is no need for a firstFadeIn. Its an endless loop, so when the timeline ends the first picture/object is shown - still when the timeline begins.

The timeline is build correctly with my function, but it is not starting to play with the first picture, but with the last (not the last tween!). The last picture is shown for the whole timeline duration with no tween. After that the timeline plays in correctly.

 

Thats not what we need, because the timeline can have a duration of 1 hour. Nobody wants to wait 1 hour to see the first tween/the next picture.

 

I am using Flash Professional CS6 and Flashbuilder 4.6 (yes, a legal registered copy).

I tried it both with swc import and source path definition.

 

 

Thanks!!!

Daniel

 

Heres my function:

        private function buildTL2(objects:Array,duration:Number, blendDuration:Number):TimelineMax
        {
            var tll:TimelineMax=new TimelineMax({repeat:-1});
            
            for (var i:uint=0; i<objects.length; ++i)
            {
                if(i>0)
                    tll.append(TweenMax.fromTo(objects[i],blendDuration,{autoAlpha:0, immediateRender:true},{autoAlpha:1, immediateRender:true}),-blendDuration);
                
                tll.append(TweenMax.fromTo(objects[i],blendDuration,{autoAlpha:1, immediateRender:true},{autoAlpha:0, immediateRender:true}),duration);
                
            }

            tll.append(TweenMax.fromTo(objects[0],blendDuration,{autoAlpha:0, immediateRender:true},{autoAlpha:1, immediateRender:true}),-blendDuration);
            
            
            return tll;
        }
Link to comment
Share on other sites

Okay, I think I know what your intent is now, and the problem is how you're setting your immediateRender values. You're telling ALL of the tweens to render their initial state immediately (which they do). Notice that means as they go through your loop, it would do the following (in this order):

  1. Make the object's alpha 0 (immediately)
  2. Then make the object's alpha 1 (immediately)
  3. Then, at the end of the loop, it would tell the FIRST element to set its alpha to 0. 

Again, that's what your code indicates and the engine is following its instructions properly (as far as I can tell). I believe that what you meant to do was only have the first (fade-up) tween render its starting state initially, so it would look like this:

function buildTL2(objects:Array,duration:Number, blendDuration:Number):TimelineMax {
	var tll:TimelineMax=new TimelineMax({repeat:-1});
	var td:Number=0;	
	for (var i:uint=0; i<objects.length; ++i) {
		if(i>0) 
			tll.append(TweenMax.fromTo(objects[i],blendDuration, {autoAlpha:0}, {autoAlpha:1, immediateRender:true}), -blendDuration);
		
		tll.append(TweenMax.fromTo(objects[i],blendDuration, {autoAlpha:1}, {autoAlpha:0, immediateRender:false}), duration);
		
	}
	tll.append(TweenMax.fromTo(objects[0],blendDuration, {autoAlpha:0}, {autoAlpha:1, immediateRender:false}), -blendDuration);
	return tll;
}

Is that what you were looking for?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...