Jump to content
Search Community

Timeline issue - second tween not playing

alin.besnea test
Moderator Tag

Recommended Posts

Hello,

 

I have some problems appending a tween, at the end of the timeline. This issue appears only after some heavy calculations take place. In order to simulate this I used the Tracer plugin for Firefox, and added a lot of traces.

 

As you can see in the code below, I have a timeline with two tweens. The initial tween is added immediately after the timeline is created, while the second tween is added after the first one is complete. If a lot of traces are displayed in the Tracer plugin, the second animation dosen't play.

 

In the example below, the red rectangle should first move horizontally to x = 450, and, after that, move vertically to y=450. When the issue appears, the second animation is not played.

 

I've tried to use the debugger and see what happens, and, as far as I can tell, the problem appears in TimelineMax::renderTime method, in the first call after the second tween is appened. The _rawPrevTime variable does not seem to be updated after the second tween is added, and its value is grater than the value of totalDur, failing the following if clause: if (_rawPrevTime <= totalDur && _rawPrevTime != time). Going further down the execution path, the cachedTotalDuration of the timeline doesn't seem to be updated as well (cachedTotalDuration is still 0.25, rather than 0.5), providing an early quit for the method. This happens in the following if clause: if (this.cachedTotalTime == prevTotalTime && !force).

 

Is is something that I am doing wrong, or is it a Timeline issue? Does anyone have a workarround, maybe?

 

I know it's kind of a strange way to test this by using traces, but on a low performance machine, this issue could appear without those traces.

 

Here is the sample code:

<?xml version="1.0" encoding="utf-8"?>
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                xmlns:local="*"
                frameRate="60"
                initialize="init()"
                width="800" height="600">




Link to comment
Share on other sites

I may not be the best guy for this, but between us perhaps we can figure something out.

 

Specifically regarding the problem surfacing when using lots of traces, I have no idea what could be wrong.

 

However, I have seen couple things worth mentioning in your code.

 

Initially, I'm not sure that you need the two function, "addInitialTweens()" and "onInitialTweenComplete".

 

Your "onInitialTweenComplete()" function uses appendMultiple, but you are only appending one tween. Try changing this (at least while you're only adding one tween) to .append instead (and obviously then remove the []).

 

You could do something like:

       private function createTimeline():void
       {
           // note the use of onComplete for the timeline instance. You can still do it as you had before, but this way, it will always run at timeline completion,
           // so you can mess with the tweens within the timeline as much as you like...
           _timeline = new TimelineMax( { onComplete: onFollowUpComplete } );
           _timeline.pause();
       }

private function addInitialTweens():void
       {           

           var tween:TweenMax = new TweenMax(
                                               _rectangle,
                                               0.25,
                                               {
                                                   x: 450,
                                               }
                                            );

           _timeline.append(tween);

           // add follow-up tween
           var followUpTween:TweenMax = new TweenMax(
                                                       _rectangle,
                                                       0.25,
                                                       {
                                                           y: 450,
                                                       }
                                                    );

           _timeline.append(followUpTween);

           _timeline.play();

       }

 

ultimately I'm not sure this will help much, but let me know what you think, or what happens :)

 

Peace

Link to comment
Share on other sites

Hi berilac,

 

First of all thanks for your response.

 

The actual code is more complex, but I've tried to replicate the methods used and flow of the actual application. This is why I've added the calls for "addInitialTweens()" and "onInitialTweenComplete()". Same for "appendMultiple()" - in the actual project there are multiple tweens that are added at that point.

 

As for using Tracer to "slow-down" the application: this was the easiest way to reproduce the issue, but the same thing has happened even if the Tracer wasn't running, or if the antivirus performed a scan, or even if I was in debug mode (I'm using FlashDevelop IDE).

 

From what I could figure out, the issue only appears if the first tween takes more to complete than the updated total expected duration of the timeline (the value for this is 0.5 seconds - the sum of the durations for the two tweens). If this happens the renderTime method takes a different flow, as described in the first post. Also the fact that I'm adding the second tween when the totalProgress of the timeline is already set to 1, may have something to do with it (although the value of totalProgress is updated after "appendMultiple()" call).

 

I'll post another message as soon as I make any progress.

 

Alin.

Link to comment
Share on other sites

  • 2 weeks later...
  • 1 month later...

I seem to have a similar problem

 

I have are three tweens in a timeline (zoom in, rotate, zoom out). I create this timeline once per object and would ideally 'rewind' and play it every time. According to the documentation I need to use myTimeline.invalidate() and myTimeline.restart(). I think I understand why that is, however something goes wrong with the relative rotationY value in the seconds tween.

 

The point is that the third animation only runs once. A second time it gets skipped, but the sprite IS set to it z=0 position... When i change the rotationY value to be relatively changed the animation runs flawless (but i need it to run relative to it value) every time.

 

Any pointers would be appreciated.

 

 

		private function onAddedToStage(event:Event):void
	{
		myTimeline = new TimelineMax();
		myTimeline.append(new TweenMax(this, .36, new TweenMaxVars().prop('z', -180).ease(Strong.easeIn)));
		myTimeline.append(new TweenMax(this, 1.50, new TweenMaxVars().prop('rotationY', 180, true).ease(Strong.easeInOut)));
		myTimeline.append(new TweenMax(this, .36, new TweenMaxVars().prop('z', 0).ease(Strong.easeIn)));
		myTimeline.addEventListener(TweenEvent.COMPLETE, movementComplete);

		myTimeline.pause();
	}

	public function startMove():void {
		if (isMoving)
			return;

		this.mouseEnabled = true;
		this.isMoving = true;

		myTimeline.invalidate();
		myTimeline.restart();
	}

	private function movementComplete(event:TweenEvent):void {
		this.isMoving = false;
		this.mouseEnabled = true;
	}

Link to comment
Share on other sites

Bas,

 

Welcome to the forum. It is not good form to jump onto someone else's older posts. It is better to start your own thread in this scenario as your issue isn't very closely related to the original post.

As for your problem, if you need new relative positions each time the timeline runs, it may be better to re-create the timeline from scratch each time.

 

Alin,

 

Have you had any luck with your problem?

It is very hard to trouble-shoot such problems from a distance without being able to simulate the "processor strain". Your explanation is extremely detailed and quite good, yet the issue is a bit beyond me.

 

Carl

Link to comment
Share on other sites

I did not mean to do bad form especially on my first post. my apologies...

 

"Could someone please confirm this is a problem or not?" wasn't an invitation then?

 

recreating the timeline does work fine. For this iOS project I try to reuse as much objects as possible (object pooling) that was why I choose this route. I also kind of like the idea of creating several timelines as 'behaviors' and trigger them when needed... My reason for posting here is that this seems like a bug to me. The invalidate method doesn't correctly invalidate... But perhaps it is just a side effect of the way the timeline works and is it not intended by design for what i want. I you agree i would like to hear about it someday...

 

anyway thanks! I love the library!

Link to comment
Share on other sites

I tried running your code and saw the problem with the last tween not running when the timeline repeats.

very strange. I don't know why.

 

instead of invalidating the whole timeline try invalidating just the first tween like so:

 

 

 

public function startMove():void {

if (isMoving)

return;

 

this.mouseEnabled = true;

this.isMoving = true;

 

 

myTimeline.getChildren()[1].invalidate();

myTimeline.restart();

}

 

this allowed the third tween to always play. I'm not sure it it is the result you want though.

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...