moxol

October 21, 2012

Thanks, I overlooked that total means including repeats.

October 20, 2012

Can you explain me what is the difference between progress, totalProgress, duration, totalDuration, time, totalTime methods?

Is this a good way to complete timeline while it's playing?

timeline.seek(timeline.totalDuration());

October 12, 2012

Every tween has a startTime that corresponds to the spot on its parent timeline where it begins. Are you using v12? If so, you can do something like this:
timeline.seek( tween3.startTime() );
By default, all events (like callbacks, onCompletes, etc.) will be suppressed when the playhead moves to the new spot, but if you want them to be triggered (not suppressed), use the 2nd parameter and set it to false.
timeline.seek(tween3.startTime(), false);
Is that what you were looking for? If you're using v11, the code would be slightly different, but I suspect you're using v12 (which I'd recommend).

I am using v12.

This could do, but I already found different solution, you can tell me if it's alright.

timeline.append(tween1);
timeline.append(tween2);
timeline.addLabel("tween3", timeline.duration());
timeline.append(tween3);
timeline.append(tween4);

and to forward I do:

timeline.gotoAndPlay("tween3", false);

October 11, 2012

How do I do forwarding to specific tween in timeline?

If I have:

timeline.append(tween1);

timeline.append(tween2);

timeline.append(tween3);

timeline.append(tween4);

and I want to forward to tween3, how to do that?

Also, tween1 and tween2 have tween events that need to be completed before forwarding.

October 5, 2012

I'm actually quite surprised by your post - I'm used to hearing the opposite. GSAP is well known for outperforming most (if not all) other animation solutions out there by a wide margin, so I'm very curious to see an example where it's slower than some other alternative - could you post an example? I have heard from many developers who said that once they started using GSAP in their Flex apps they noticed a large performance improvement. Maybe you have a unique scenario that's exposing a weakness which I'd definitely want to shore up if at all possible. So a sample that shows the same thing working well with a different solution and poorly with GSAP would be VERY helpful in diagnosing the issue.

I didn't say it's bad, but for some serious interactive app, it's not.

I was using relatively small number of FXG's in relatively complex MXML, and choppy animation is noticable, slower response to starting animation when mouse clicked...

That slower performance has to do with event dispatching mostly, and redrawing of FXG's, even though I used as much performance tweeking I could.

It's not due to GSAP, which probably is the best solution, but rather Flash not up to task.

October 4, 2012

I was wondering if anyone has experience in using GSAP in MXML and Sprite so that comparison can be made in performance.

I am working at the moment with MXML and I didn't have chance to try GSAP only in Sprite, and I can say that I am not very pleased with speed of executing tweens. I know that there are many factors that can slow down executing tweens, particularly in Flash runtime, but as it stands now, I think that using GSAP in MXML is limited to simpler work, to what extent, I don't know yet.

September 30, 2012

Setting the tween's progress wouldn't help here - that would only pick the tween up and reposition it inside its parent timeline so that the timeline's playhead is positioned accordingly.

If you want the timeline to jump to where that tween ends, and we know it ends at exactly 10 seconds, you could simply do this:
timeline.seek(10);
Does that help?

That is working, but still if I do that, object's movement is again choppy meaning object would jump to 100 and continue to 300, even though code finishes before tween twe starts. Why?

September 29, 2012

Can you help me with this example:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
		   xmlns:s="library://ns.adobe.com/flex/spark"
		   xmlns:mx="library://ns.adobe.com/flex/halo"
  click="starts()">

<fx:Declarations>
 <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<fx:Script>
 <![CDATA[
 import com.greensock.data.TweenMaxVars;
 import com.greensock.TweenMax;
 import com.greensock.events.TweenEvent;
 import com.greensock.TimelineMax;

 private var timeline:TimelineMax = new TimelineMax();

 private function starts():void
 {
  var tweenMaxVars1:TweenMaxVars = new TweenMaxVars();

  var twe1:TweenMax = new TweenMax(obj, 10, tweenMaxVars1);
  twe1.addEventListener(TweenEvent.START, write);

  var tweenMaxVars:TweenMaxVars = new TweenMaxVars();
  tweenMaxVars.x(300);

  var twe:TweenMax = new TweenMax(obj, 5, tweenMaxVars);
  timeline.append(twe1);
  timeline.append(twe);
 }

 private function write(event:TweenEvent):void
 {
  for (var counter:Number = 0; counter < 3000; counter++)
  {
trace('beforeStart')
  }
  trace("finished");

  TweenMax(event.target).progress(1);
 }
 ]]>
</fx:Script>

<s:Label id="obj" text="object"/>

</s:Application>

I tried to end tween twe1 with TweenMax(event.target).progress(1) so that it ends when for command ends, but that doesn't work.

How to do that?

September 28, 2012

I'm pretty sure I understand what you're asking for. I'm also pretty sure you don't understand what I'm saying or why what you're asking for is logically impossible.

Let's say you have three 2-second tweens that are supposed to run back-to-back in a timeline. That means it should be finished in 6 seconds. And let's say you run your code just before the last tween begins and it takes 0.3 seconds to complete. How do you want to handle that exactly? Do you want to move the tween back in time so that now the total duration of the timeline is 6.3? You said you didn't want that because the tweens must finish at the time you requested. So then do you want to move the start time of the tween forward 0.3 seconds and squish the tween into the remaining time, changing the duration to 1.7 seconds? If you do that, think about what will happen when you reverse() - there will be a gap between the 2nd and 3rd tweens.

See the attached graphic.

What would you like the plugin to do?

I don't mind if 3rd tween finishes 0.1 seconds later, that's not important.

Lets make it this way. Can I insert empty tween with duration 0.1 between 2nd and 3rd that will do the code, because I tried that and rendering of 3rd tween still is choppy.

September 28, 2012

I have a tweens that are in timeline and I need to execute code before one tween in timeline that is going to start after some tweens.

Because that tween duration is 0.3 seconds, code that is in TweenEvent.START listener disrupts rendering on screen, so I don't need huge gap, just maybe 0.1 seconds.

So for example I need this:

TIMELINE:

1. Tween

2. Tween

3. Tween

4. Code

5. Tween

September 27, 2012

Oh, I know exactly what you're talking about now, and that is expected behavior. In fact, it's a feature (although it may not feel like it in this scenario given your goals). Let me explain...

The GreenSock Animation Platform is a synchronized system, unlike many other tweening engines. In other systems, even if you start 2 tweens on the same frame and they have identical durations, they may end at completely different times on completely different frames (not good!). Like if you stacked up a bunch of 1-pixel high boxes vertically on the screen and then tweened each of their "width" properties, you may see more of a wave as they animate across the screen rather than a solid, synchronized wall/edge because each tween's start time was recorded differently. However, GSAP is perfectly synchronized.

In your example, you're setting up the tween on a timeline. The timeline begins now, so let's just say the start time is recorded as 0 (to make it easy). The duration of your tween is 2 seconds, so it should finish exactly 2 seconds from now. Let's assume you're moving x from 0 to 200 with a Linear.easeNone ease to make things simple, meaning x should move at 100 pixels per second. No problem.

On the next frame, when the tween renders, it fires off your onStart which does a bunch of looping and takes a lot of extra time to process in your function, meaning that the swf's frame rate (for that moment) drops drastically and the next frame doesn't render until 0.5 seconds later. Now at 0.5 seconds, if we're moving at 100 pixels per second, that means x should be at 50 now, so visually it jumps from 0 to 50. That is technically accurate (a feature, not a bug). The only other option is to MOVE your tween so that it won't end on schedule anymore. Most developers don't want that.

There are 2 solutions to your dilemma:

Set useFrames:true on your timeline and make sure that you define the duration and/or delay in terms of frames rather than seconds. In frames mode, it doesn't care about time at all - it simply counts frames. That means that if your frame rate bogs down, your tweens will last longer but they will always change the pre-determined amount on each frame.

Create your tween on the next update/tick of the engine AFTER your write() function is called. You can do that using a delayedCall() that has an extremely small duration, like 0.001 and then in that function, you create your tween. Either that or call the undocumented Animation._updateRoot() method from within your

Does that help clarify things?

I understand how it works.

First solution is no good for me because frame rate can seriously drops and tween must finish in time.

Second solution is also no good for me beacuse I don't know when I need to call write() function, if we are looking at real scenario for my app, because there are other tweens, and I just need something like Pre-start event. Can some plugin be written?

September 27, 2012

I don't see that at all. What do you mean it starts while write() is executing? ActionScript is single-threaded. Here is code that proves the tween isn't starting until after write() fully executes:
var timeline:TimelineMax = new TimelineMax();
var tweenMaxVars:TweenMaxVars = new TweenMaxVars();
tweenMaxVars.x(300);
tweenMaxVars.onStart(start);
var tweenMaxVars1:TweenMaxVars = new TweenMaxVars();
tweenMaxVars1.onStart(function():void {
write();
});
tweenMaxVars.startAt(tweenMaxVars1);
var twe:TweenMax = new TweenMax(mc1,2,tweenMaxVars);
timeline.append(twe);

function write():void {
for (var counter:Number = 0; counter < 3000; counter++) {
	trace('beforeStart');
}
}

function start():void {
trace("start");
}
I see "beforeStart" traces out 3000 times before "start" traces. Are you seeing something different?

On screen object moves from 0 to 70-80 and continues to 300,

It doesn't smoothly goes to 300.

September 27, 2012

Here is example I tried:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
		   xmlns:s="library://ns.adobe.com/flex/spark"
		   xmlns:mx="library://ns.adobe.com/flex/halo"
  click="starts()">

<fx:Declarations>
 <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<fx:Script>
 <![CDATA[
 import com.greensock.data.TweenMaxVars;
 import com.greensock.TweenMax;
 import com.greensock.events.TweenEvent;
 import com.greensock.TimelineMax;

 private function starts():void
 {
  var timeline:TimelineMax = new TimelineMax();

  var tweenMaxVars:TweenMaxVars = new TweenMaxVars();
  tweenMaxVars.x(300);
  var tweenMaxVars1:TweenMaxVars = new TweenMaxVars();
  tweenMaxVars1.onStart(function():void {
write();
});
  tweenMaxVars.startAt(tweenMaxVars1);

  var twe:TweenMax = new TweenMax(obj,2, tweenMaxVars);


  timeline.append(twe);

 }

 private function write():void
 {
  for (var counter:Number = 0; counter < 3000; counter++)
  {
trace('beforeStart')
  }
 }
 ]]>
</fx:Script>

<s:Label id="obj" text="object"/>
</s:Application>

I need that write() function executes completely before tween starts.

In this example you can see that tween starts while write() function is still executing, which is what I don't want to happen.

September 27, 2012

I need to execute some code just before tween starts and then let tween play.

I was using TweenEvent.START but actually I need before it starts, some event like PRE-START, STARTING...

How to do that?

September 25, 2012

If I have timeline.stop() how to detect that it's stopped?

September 25, 2012

I'm sure the problem exists - I'm just saying I don't think it has anything specifically to do with the tweening platform. I can assure you that the tweening platform is rock solid regardless of the frame rate; there's nothing in the code that would break if the frame rate bogs down. It is built with that in mind, actually. Updates only occur on ENTER_FRAME.

Is Flex/Flash throwing any runtime errors?

No, just on screen is visible (in my case) wrong x,y, width and/or height of FXG's.

I will keep track of it, and update as the news are coming... :arrow:

September 24, 2012

I'm pretty confident that this isn't related to anything in the tweening platform and I suspect you just have some sort of error in your code that's halting Flash Player's execution of code, that's all. There is absolutely nothing in TweenLite/Max that is dependent on the target's child index or anything remotely like that. Unless maybe you're using a special plugin that has to add/remove something from the display list (MotionBlurPlugin?), but that's doubtful. Even if that was the case, it wouldn't just cause events to stop being dispatched - it would probably just throw an error (which would likely cause the Flash Player to cease executing code). See what I mean?

The only other thing I can think of is if you've written code that causes a tween to get overwritten (or killed) - in that case it wouldn't continue to dispatch UPDATE events. Pretty tough to diagnose blind, though. Hopefully something here is helpful. I'm glad to hear you tried to reproduce the problem in a separate, simplified file - that's always what I recommend. Unfortunately it sounds like you couldn't reproduce the problem that way. I suppose that's good news and bad news at the same time I'd recommend taking your simple example and keep building it up to mimic your real project until it breaks. At that point, you'll know exactly what's causing the error.

I'll continue to track this problem, and hopefully get exact description.

But problem exists, and as I mentioned, if I don't use setElementIndex() method then tweening is ok, but if I use it, then tweening events can be unsent, and I can I give one more clue to it and that is happening if rendering is going slower, if there's a slow frame rendering, slow animation...

I suspect Flash runtime has something to do with it, and if I find exact cause, then it should be taken in consideration.

September 23, 2012

Wow such a fast response. This is the best forum I have seen so far.

Me too. :wub:

September 23, 2012

I have noticed that setElementIndex for tween object can affect tween events in a way such that they are not dispatched.

I must say that I can't provide an example because I am not sure when those problems exactly arise, but I have noticed that TweenEvent.UPDATE is not always dispatched if setElementIndex is running at the same time for tween object. I have seen for example that UPDATE is dispatched only once at beginning and never again. setElementIndex() method is using remove and add element to rearrange indexes so probably that's the cause for tween events problems. Also I have noticed that if tween objects have TweenEvent.UPDATE and TweenEvent.COMPLETE events and I do TweenMax.killAll(true) in Event.RESIZE listener, results of completion of code in those tween events listeners are not always equal if they include some movements of tween objects.

I don't know if anyone had such problems, but I have done testing and I can't reproduce them in a simple app, but in complex app that I am developing when there is FXG graphics and lots of code behind, those problems are occuring.

September 17, 2012

Thanks.

September 17, 2012

I just wrote it in a quicker way to show what change I want.

Of course I will use variable instead of a.length in while.

I am more interested in functional repercussions of that change, will it affect in any way using GSAP platform.

September 17, 2012

I have been looking at TweenMax.as code and I have found a reason for described behaviour.

Code for function TweenMax.killAll(true) is:

public static function killAll(complete:Boolean=false, tweens:Boolean=true, delayedCalls:Boolean=true, timelines:Boolean=true):void {
  var a:Array = getAllTweens(timelines),
i:int = a.length,
isDC:Boolean,
allTrue:Boolean = (tweens && delayedCalls && timelines),
tween:Animation;
  while (--i > -1) {
tween = a[i];
if (allTrue || (tween is SimpleTimeline) || ((isDC = (TweenLite(tween).target == TweenLite(tween).vars.onComplete)) && delayedCalls) || (tweens && !isDC)) {
 if (complete) {
  tween.totalTime(tween.totalDuration());
 } else {
  tween._enabled(false, false);
 }
}
  }
 }

Line 7 while (--i > -1) is iterating a:Array backwards causing tweens to be completed in reversed order from which they are added.

If I change line 3 i:int = a.length to i:int = 0 and line 7 while (--i > -1) to while (i < a.length) (and adding i++ to the end of loop) then tweens are completed in appended order and tween event listeners are triggered in appended order.

I want to know if this change is ok, will it have negative reflection on something?

Thanks.

September 17, 2012

If I do TweenMax.kilAll(true) then TweenMax event listeners function doesn't end in order.

For example, if I have this code:

var timeline:TimelineMax = new TimelineMax();

  var tweenMax:TweenMax = new TweenMax(obj, 5, { x:200, y:200 } );
  tweenMax.addEventListener(TweenEvent.START, function():void
  {
trace("Start");
  });
  tweenMax.addEventListener(TweenEvent.UPDATE, function():void
  {
trace("Update");
  });
  tweenMax.addEventListener(TweenEvent.COMPLETE, function():void
  {
trace("Complete");
  });

  var tweenMax1:TweenMax = new TweenMax(obj, 5, { x:300, y:300 } );
  tweenMax1.addEventListener(TweenEvent.START, function():void
  {
trace("Start1");
  });
  tweenMax1.addEventListener(TweenEvent.UPDATE, function():void
  {
trace("Update1");
  });
  tweenMax1.addEventListener(TweenEvent.COMPLETE, function():void
  {
trace("Complete1");
  });

  timeline.append(tweenMax);
  timeline.append(tweenMax1);

If I do killAll(true) while tweenMax is playing then I get following order of event listneres triggered:

Start1

Update1

Complete1

Update

Complete

which means that tweenMax1 event listeners are triggered first and then tweenMax event listeners.

I thought that order of events would be:

Update

Complete

Start1

Update1

Complete1

because order of timeline appends is tweenMax and then tweenMax1.

September 12, 2012

Ugh! Figured out the problem. Should be fixed now online. Sorry about the hassle!

I tried it, and again it's giving me trace and trace and trace and trace... :mrgreen:

Just kidding, it's ok now.

September 12, 2012

I test it, and obviously .as files are not compiled, meaning greensock.swc version is older then .as files.

.as files doesn't show trace statements while greensock.swc does.

Again, I am urging you not to publish unsync versions of .as and greensock.swc file, it just brings unnecessary confusion.

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by moxol