Multiple Tween creation collisions

[YellowSock]

Well first I'll explain the basic concept of my usage attempt.

I have a path call it circular (defined by a complex reusable xml format with paths, segments, points)

I have collections of objects to distribute around the circle. (I switched to using TweenMax because of it's totalProgress ability.)

Okay I want to have the objects position to the point on the path before looping around the circle and return to their place of origin upon completion.

I believe when I originally tried putting a move and then a repeated circle it repeated the positioning move too. Maybe I glitched that but it didn't seem to work so..

I created one TweenMax to position and onComplete call a function that creates the next tween and followed the path, and it inturn called onComplete to restore in back to it's original position.

[One would think you could have a TimelineMax contained 3 tweens; a TweenMax with 0 repeat to position, another to repeat the circle path, and a final one with no repeat) to return. I think it reapeated all of them so that seemed like a bug but maybe it was me.] {Still distribution calculation gets confusing, more so with dividing the circle division by a repeat count since it's dependent over total time of all repeats - that's okay).

Here's where things start to go weird...

I wanted to create the path tween first, and tried immediateRender etc. in hopes I could see the totalPosition for distribution in the position of the object (mid frame) to create the positioning tween to go there (then onComplete call the circular one).

Funky thing was when I even try to make a second tween before the other ones finished it randomly prepended to the positioning path the circular path and was noticed in repeating/looping (to hope back to start and move to the front of the line.

I tried every way I could for days to invalidate them or remove the bizarre extra positioning path. re-executing the same code a second time and it would be gone. So I can only assume there is a bug where when you create multiple tweens for an object it can prepend initially into a repeat (the second timeline tween). I wondered if something wasn't initialized properly at first (since it seemed trapped in the queue regardless of attempts to remove it), or maybe something else.

Still the only way that it works reliably it seems is to create the circle path onComplete of the positioning tween, and this does not help me figure out where it should position to while distributing via totalProgress.

I tried putting onStart to create the second path's tween still prepending only the first one resulted.

Putting break points and invalidating some times seemed to work but never properly.

I've tried poking around in the source code for fixes problems etc. not sure if force was working right either.

I did early on add this to TweenLite...

var p:String, i:int, plugin:*, prioritize:Boolean, siblings:Array;
		if (typeof(this.vars.ease) == "function") {
			_ease = this.vars.ease;
		}
		/* Hack STARTed 2010:04:25 */
		else {
			if(typeof(this.vars.ease) == "string") {
				_ease = EaseLookup.find(this.vars.ease);
			}
		}
		/* Hack ENDed 2010:04:25 */

To fix Ease lookups passed from XML. (worthy of adding for sure since it's powerful and I don't think adds much to the well done great efficient code that this is)

I think a good suggestion is to have a command/function to ask where would this var/property be if I'm at totalProgress in a given timeline without interrupting it. I'm thinking of trying to hack in one, but I'm not sure if I've missed something since there did seem to be buggy functionality it may not have allowed it to work as maybe it should.

Which I figured was store my start point, create a TimelineMax (circle path) offset with totalProgress via immediateRender. Then take the objects position and create the positioning tween from/while restoring the origin.

 

I also have noted the circle path I made with Linear ease seems to Sine a we bit at the start and end with pause during repeats, not sure it's me but pretty sure that needs double checking/curing.

 

Awesome Stuff hopeful for Help with much Thanks

[YellowSock]

First test

 

var tm:TimelineMax = new TimelineMax();
tm.append(new TweenMax(targetItem.link, 2, {x:100, y:100}));
tm.append(new TweenMax(targetItem.link, 1, {x:100, y:600, repeat:3}));
tm.append(new TweenMax(targetItem.link, 2, {x:600, y:100}));
tm.play();

YES: looping only the middle one works!

var tm:TimelineMax = new TimelineMax();
tm.append(new TweenMax(targetItem.link, 2, {x:100, y:100}));
new TweenMax(targetItem.link, 1, {x:100, y:600, repeat:3});
tm.append(new TweenMax(targetItem.link, 2, {x:600, y:100}));
tm.play();

This version causes the first Tween to disappear (AUTO?) while the second one not part of the play()ed timeline plays twice. It starts tweening from the original origin? not from the last place the first one was to go to?

This maybe somehow related to my issues.

Creating an unused TweenMax shouldn't break the flow of the TimelineMax. Should it?! no.

It seems the first is gone, but maybe they add? Still only repeats twice or something so it seems like a bug to me. No?

 

var tm:TimelineMax = new TimelineMax();
tm.append(new TweenMax(targetItem.link, 2, {x:100, y:100}));
tm.append(new TweenMax(targetItem.link, 2, {x:600, y:100}));
var tm2:TweenMax = new TweenMax(targetItem.link, 1, {x:100, y:600, repeat:3});
tm.play();
tm2.play();

Let's note that this has the same effect as above. First Tween gone, Second (tm2) tweens twice (2 not 3 repeats or sorry it plays twice not four times), third okay.

comment out the first tween to 100 100 results the same but this time tm2 plays wipping out tm altogether as potentially expected.

still remove tm2.play and it's the same?!?!! four times to lower left. So It looked right but it wasn't was it? no.

[YellowSock]

Initial HACK attempts...

Well I thought to first try replacing all masterList[target] (and/or masterList[this]) reference with this...

[starting in TweenLite I skipped TweenNano since I don't use that for now]

Of course this probably has repercussions I've not encountered full yet.

var uniqueID:String = UIDUtil.getUID(target);
trace("TweenLite constructing:" + uniqueID);
var a:Array = masterList[uniqueID];

So that a uniqueID is created for reference. Storing it internally in the target to say an Image class, which isn't dynamic is not possible, so it must be extrapolated for each use (at least as an initial test).

This last code now plays the tm first and them plays twice the loop of tm2... so still not right but better.

var tm:TimelineMax = new TimelineMax();

tm.append(new TweenMax(targetItem.link, 2, {x:600, y:100}));
var tm2:TweenMax = new TweenMax(targetItem.link, 1, {x:100, y:600, repeat:3});
tm.play();
//tm2.play();

 

I think I was hoping to have uniquely stored references in the masterList for Timelines but this is only on target.

[YellowSock]

After much digging through the code in an attempt to understand the convolutions I've come to some newer understanding I'll be exploring more.

It seems if you want to make multiple timelines with a target you have to setEnabled(false) the timelines until you use them otherwise there is a chain of linkage that causes problems.

I've also discovered some motionpath classes for handling circular paths but I'm still not certain if I'll be able to determine how to tween to a different starting position on a path first.

[GreenSock]

I think you're misunderstanding a few things like how tweens are overwritten and how they're scheduled. I tested your code and it's working exactly as expected - no bugs at all.

 

Please read up on the overwriting modes here: http://www.greensock.com/overwritemanager/.

 

In AUTO mode (which is used by default whenever you use TimelineLite, TImelineMax, or TweenMax anywhere in your swf), the first time a tween renders it will look for other tweens of the SAME object and analyze their tweening properties. If it finds any overlaps, it will overwrite those. So if you start a 2-second tween (let's call it "tween A") and then 1 second later start another tween ("tween B") of the same properties of the same object, it will immediately overwrite those properties in tween A. This is very useful and should make things behave in an intuitive way.

 

Let's take one of your examples:

var tm:TimelineMax = new TimelineMax();
tm.append(new TweenMax(targetItem.link, 2, {x:100, y:100}));
new TweenMax(targetItem.link, 1, {x:100, y:600, repeat:3});
tm.append(new TweenMax(targetItem.link, 2, {x:600, y:100}));
tm.play();

 

You created a TimelineMax and dumped a tween into it that affects targetItem.link's x and y properties. Then you created a competing TweenMax that is NOT in the timeline, and it also affects targetItem.link's x and y properties. Since both the TimelineMax and TweenMax will start right away, they will BOTH be trying to control targetItem.link's x and y properties - that's a flaw in your code. But TweenMax/TimelineMax handles the conflict for you. The 2nd tween overwrites the first one. You also have a 3rd tween inside your TimelineMax that affects the same properties of the same object. It is scheduled to start after 2 seconds (since it was appeneded after the first tween whose duration was 2). So when that one renders for the first time, it sees the repeating tween that's running and it overwrites it, taking control of targetItem.link's x and y properties. See what I mean?

 

So it's working exactly as it should.

 

I couldn't quite follow your original description about your goals with the circle, scheduling things, move tweens, etc. But you should not need to hack the class, use setEnabled(), tap into the masterList, etc. Check out the CirclePath2D stuff because I think it'll make it pretty easy to position things along a circular path and tween them in whatever direction you want.

 

As for adding the EaseLookup.find() functionality into the core class, I disagree - doing so would increase the base size of the class by quite a bit and force every swf that uses TweenLite to embed EVERY easing class even when only one or two is utilized. EaseLookup.find() was built in such a way as to make it very simple to use externally. If I also started allowing the "ease" parameter to be Strings or Functions, it creates a more sloppy API and would break things like the TweenLiteVars and TweenMaxVars classes.

 

Anyway, if you still think there are bugs in the code, I'd be happy to look into those - I'd just need sample code (or better yet, a sample FLA) that demonstrate the issues. But I'm pretty sure that once you read through the various overwriting modes, things will be cleared up quickly.

 

Happy tweening!

[YellowSock]

I thought I had things working, now I'm not sure.

I'll look deeper into what you've said.

For now I'll try to sum up...

I want to make Timelines or appended tweens at the same time and them play one and then the other without conflict (intuitively of course).

The usage is when a bunch of items are distributed on a path via totalProgress I want to tween to the path start first.

I've been trying to create a path tween in a stored timeline with a distributed start point and then move to that start point on the path/circle and when it finishes return to the original location. (the end doesn't seem to be a problem since it's initialized at onComplete of the main timeline.

The issues seem to arise when I try to use renderObjectAt or renderTime on a (stored to play later) timeline to figure out where on the timeline to tween from an origin to the path's starting point first. (could be any timeline sequence of lines, beziers circles etc.)

I have latest version and tried ever form of Overwite with nominal difference originally.

The setEnabled stuff doesn't seem to be working like I thought it was, and functionality seems intermittent whch seems to be related to overwriting.

I'm concerned my control over when a tween plays and actually starts is limited so I've though enabled=false should be an overrideable global default or something.

[YellowSock]

Maybe it's when I render to find position of totalProgress that it renders all other objects in the path and they need restoring or suppressing that.

[GreenSock]

I'm having a pretty hard time understanding exactly what you're trying to do and where things are breaking down - it would be SUPER helpful to see a simplified example that demonstrates the issue. Can you post the simplest FLA possible that shows the issue? Tween one object, for example.

 

FYI, when you set the totalProgress or currentProgress (or render at any particular time on the Timeline), it renders the whole thing accordingly - it almost sounded like that surprised you or that you were expecting it to only render certain tweens/timelines. For example, if you do this:

 

var t:TimelineLite = new TimelineLite();
t.append( new TweenLite(mc, 1, {x:100}) );
t.append( new TweenLite(mc, 1, {y:200}) );
t.totalProgress = 1;

 

That will render the timeline at its end state (totalProgress = 1) which means mc.x will be 100 and mc.y will be 200. It won't only render the last tween. It's just like a MovieClip timeline in the Flash IDE. See what I mean?

[YellowSock]

Yes I was coming to say after digging in the code and tracing my issues it seems since your totalProgress property is overriding via getter and setter it caused rendering to occur.

I was creating in advance various tweens (Again particularly to determine where to tween to initially - some point distributed on the next tween).

I though as a timeline I have control when it renders only by playing it, and was not expecting simply setting up the totalProgress property (in advance) was going to start moving things around. Although it does make sense it should I suppose.

Maybe having a function to set totalProgress() would have suggested to me more intuitively in my haste lack of knowledge and particular usage, that it might actual do something too. While also having totalProgress as a property which is obviously happening in various ways. setTotalTime() time= cacheStartTime= maybe whatever.

 

So that was the root of much confusing and possibly worth noting.

It took me days of complex source code debugging to grasp the source of confusion for my needs.

 

My code is about 4 months of work in Flex and completely not postable,no simple FLA or way to untangle an example.

Now I'll say in sudocode I...

Create Main Path Tween
store in target object desired totalProgress starting point
store target's position
set totalProgress
extract now calculated desired starting position from main path
restore target's original position
create initial tween from original starting position to main path tweens distributed starting position
play initial tween onComplete play Main Tween onComplete create and tween to original position.

 

Now I'm trying to figure out how (in my situation) to have the center of the objects follow the path, so multiple targets on the same bath with different size (width and height) offset to the center of the path properly, alas that's the topic for another thread.

 

I tried hacking into CirclePath2D renderAll

f.target.x = f.target.x - (f.target.width / 2);
f.target.y = f.target.y - (f.target.height / 2);

and renderObjectAt

target.x = target.x - (target.width / 2);
target.y = target.y - (target.height / 2);

to no avail ?! I observed the values changing in debug but it didn't translate the objects on screen.

[GreenSock]

My code is about 4 months of work in Flex and completely not postable,no simple FLA or way to untangle an example.

I understand how complex a project can get and it can seem incredibly difficult to pull things apart and simplify. However, in my experience, it is by far the best way to troubleshoot an issue like this. I'm not saying for us on the forum to troubleshoot your issue - I'm saying when I personally struggle on my own project to understand a problem, I usually isolate the general process in a separate simplified FLA and slowly build up until it breaks so that I can isolate the issue. Often there are a bunch of complexities in your code that have nothing to do with the problem, so pulling it apart and doing the most basic, simple thing to begin with an slowly layering the complexities usually forces the problem to bubble to the surface more quickly than trying to avoid the work of creating the simplified FLA and sticking with the files that have 4 months worth of code crammed in. But if it's impossible to post any example or isolate your stuff into a separate FLA, so be it.

 

I followed most of your pseudo code until the end. I don't know what the "Main Tween" refers to or what exactly the onCompletes are doing or why you seem to be using tweens just to figure out a position or what exactly the path is (a CirclePath2D?). This could all just be a limitation of my ability to visualize things - it's not necessarily that you explained them poorly. But without seeing real code or any example, and not having files to add trace() statements to, etc., I'm afraid I can't be of much assistance.

 

For the record, CirclePath2D has methods in it that allow you to render an object at a specific progress point - you don't have to build a tween to figure it out. See the docs for details. And I think your "hack" in CirclePath2D needs to factor in a lot more in terms of the geometry (not just x + width / 2. If I understand your goal (which may not be the case), you need to adjust the radius of the circle based on your objects' size and plug that into the equations.

[azpaul]

Hi Jack,

 

I am researching on how to loop or restart the flash movies. I just made a post about it. After posting that I am still digging in to see what I can do and I came across this post.

 

You are 110% correct on simplifying the code. That is exactly how I overcame my situation that we just worked on. It worked on a simplified fla of just that routine I was looking to do. But when I went to append it into my original fla, it broke and I could not figure out why. So, I rebuilt from the working model and I am so close to completion. It saved me hours of trouble shooting and searching once I simplified it.

 

I just wanted to give my 2 cents on that one.

 

Thanks!

 

My code is about 4 months of work in Flex and completely not postable,no simple FLA or way to untangle an example.

I understand how complex a project can get and it can seem incredibly difficult to pull things apart and simplify. However, in my experience, it is by far the best way to troubleshoot an issue like this. I'm not saying for us on the forum to troubleshoot your issue - I'm saying when I personally struggle on my own project to understand a problem, I usually isolate the general process in a separate simplified FLA and slowly build up until it breaks so that I can isolate the issue. Often there are a bunch of complexities in your code that have nothing to do with the problem, so pulling it apart and doing the most basic, simple thing to begin with an slowly layering the complexities usually forces the problem to bubble to the surface more quickly than trying to avoid the work of creating the simplified FLA and sticking with the files that have 4 months worth of code crammed in. But if it's impossible to post any example or isolate your stuff into a separate FLA, so be it.

 

I followed most of your pseudo code until the end. I don't know what the "Main Tween" refers to or what exactly the onCompletes are doing or why you seem to be using tweens just to figure out a position or what exactly the path is (a CirclePath2D?). This could all just be a limitation of my ability to visualize things - it's not necessarily that you explained them poorly. But without seeing real code or any example, and not having files to add trace() statements to, etc., I'm afraid I can't be of much assistance.

 

For the record, CirclePath2D has methods in it that allow you to render an object at a specific progress point - you don't have to build a tween to figure it out. See the docs for details. And I think your "hack" in CirclePath2D needs to factor in a lot more in terms of the geometry (not just x + width / 2. If I understand your goal (which may not be the case), you need to adjust the radius of the circle based on your objects' size and plug that into the equations.