Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
stevenp

Coordinating Events Using Timeline [Solved]

Recommended Posts

Greetings,

 

I'm trying to coordinate events using timeline, but not getting things to unfold as I envision them. I have 26 different events which, when one is done, the next unfolds. This works as expected. What I want to do is at the end of each of those 26 events, another event triggered which continues on it's own independently and does not slow down the original 26 events. That is, Event 1 happens and when it stops it normally goes to event 2, but instead I want it to trigger event alt_2 and event 2 simultaneously; at the end of event 2, trigger event 3 and event alt_3 simultaneously, etc.

 

I drew an ascii file which may be more helpful (see attached png image). [image removed]

 

 

I tried using nestedTimeline, but no matter how meticulously I timed (using delay), the events did not remain coordinated. They started out so, but halfway through they lose coordination.

 

Thank you in advance,

Steven

 

edit: I am using Actionscript 2.

Edited by stevenp
Link to comment
Share on other sites

Could you clarify what you mean by an "event" here? Are you talking about a tween or a callback or something else?

 

The GreenSock Animation Platform is indeed synchronized, so there would never be any drift that happens inside of a timeline that would cause its children to run at different speeds, so I'm curious to find out what you meant by "events did not remain coordinated". Maybe it would help if you posted a VERY simple FLA that demonstrates what you're talking about. Please don't post your production code - just something as simple as possible to demonstrate the concept.

Link to comment
Share on other sites

Thanks for listening.

 

I've got a number of lines drawing on a map, as a course. Each leg of the course is a line that is a movie clip. I draw the lines thus:

 

import com.greensock.*;
import com.greensock.core.*;
import com.greensock.easing.*;

var as_val:Number = 0.01; // adjusting this value controls overall speed

/////// Initialize clips to 0 //////////
// preset the routes
mc_01._xscale = mc_01._yscale = 0;
mc_02._xscale = mc_02._yscale = 0;
mc_03._xscale = mc_03._yscale = 0;

//preset the dots
mc_dot_01._xscale = mc_dot_01._yscale = 0;
mc_dot_02._xscale = mc_dot_02._yscale = 0;
mc_dot_03._xscale = mc_dot_03._yscale = 0;

// the routes
// the number multiplying the as_val is the length of the hypotenuse - consistent travel
timeline.append(TweenLite.to(mc_01, 21.3*as_val, {_xscale:100, _yscale:100, ease:Linear.easeNone}));
timeline.append(TweenLite.to(mc_02, 15.9*as_val, {_xscale:100, _yscale:100, ease:Linear.easeNone}));
timeline.append(TweenLite.to(mc_03, 69.4*as_val, {_xscale:100, _yscale:100, ease:Linear.easeNone}));

 

At the end of the tween that scales mc_01, the route will have completed leg 1. I now want to start leg 2, which happens fine, but I also want mc_dot_02 to scale from 0 to the size it will end at starting at the same time.I h

 

ave a hard coded vision of what it looks like using masks and hand-made tweens on the timeline attached. It looks like a bad version of "Missile Command". :mrgreen: Darn it ... it's too large to upload. Okay ... I uploaded a screenshot of the work in progress. The line hasn't gotten to it's final destination, and the dot hasn't yet appeared. When the line gets to it's next destination, it will then start toward another destination but the point the new leg starts I want the dot to scale up from 0 ...

post-10039-0-09317800-1335909415_thumb.png

Link to comment
Share on other sites

After reading both descriptions it seems you just need:

 

line1 and dot1 to animate simultaneously for the same duration and then

line2 and dot2 to animate simultaneously for the same duration and then

line3 and dot3 to animate simultaneously for the same duration

 

Here is a preview of what I came up with:

http://snorkl.tv/dev/appendMultiple/

 

The secret is to use appendMultiple().

 

The code looks like this:

import com.greensock.*;
var tl:TimelineMax = new TimelineMax({repeat:-1, repeatDelay:1});
tl.appendMultiple([
   TweenLite.from(line1, 1, {_xscale:0}),
   TweenLite.from(dot1, 1, {_xscale:0, _yscale:0})
   ]);

tl.appendMultiple([
   TweenLite.from(line2, 1, {_xscale:0}),
   TweenLite.from(dot2, 1, {_xscale:0, _yscale:0})
   ]);

tl.appendMultiple([
   TweenLite.from(line3, 1, {_xscale:0}),
   TweenLite.from(dot3, 1, {_xscale:0, _yscale:0})
   ]);
tl.appendMultiple([
   TweenLite.from(line4, 2, {_xscale:0}),
   TweenLite.from(dot4, 2, {_xscale:0, _yscale:0})
   ]);

 

fla attached.

 

If that is not the animation you need, please provide a VERY simple example. Using the Flash timeline and no code would be absolutely fine. Just something we can use to help visualize exactly what you need to do.

appendMultiple_CS4.zip

Link to comment
Share on other sites

In addition, if the lines and the dots are BOTH having their _xscale and _yscale changed (as i see from your example) you can really simplify the code like so:

 

import com.greensock.*;
import com.greensock.plugins.*;
TweenPlugin.activate([scalePlugin]);

var tl:TimelineMax = new TimelineMax({repeat:-1, repeatDelay:1});
tl.appendMultiple( TweenMax.allFrom([line1, dot1], 1, {scale:0}) );
tl.appendMultiple( TweenMax.allFrom([line2, dot2], 1, {scale:0}) );
tl.appendMultiple( TweenMax.allFrom([line3, dot3], 1, {scale:0}) );
tl.appendMultiple( TweenMax.allFrom([line4, dot4], 2, {scale:0}) );

 

you can just paste that into the file I supplied above.

Link to comment
Share on other sites

Thank you so much for your help Carl. Very much appreciated.

 

I adapted your very helpful response:

 

tl.appendMultiple([
TweenLite.to(mc_01, 1, {_xscale:100, _yscale:100}),
TweenLite.to(mc_dot_01, 3, {_xscale:35, _yscale:35})
]);

tl.appendMultiple([
TweenLite.to(mc_02, 1, {_xscale:100, _yscale:100}),
TweenLite.to(mc_dot_02, 3, {_xscale:35, _yscale:35})
]);

tl.appendMultiple([
TweenLite.to(mc_03, 1, {_xscale:100, _yscale:100}),
TweenLite.to(mc_dot_03, 3, {_xscale:35, _yscale:35})
]);

tl.appendMultiple([
TweenLite.to(mc_04, 1, {_xscale:100, _yscale:100}),
TweenLite.to(mc_dot_04, 3, {_xscale:35, _yscale:35})
]);

 

My problem is the dot (mc_dot_XX) clips have a duration of 3, and the next line (mc_XX) doesn't start drawing until the previous dot completes it's tween. I want the next line to start drawing at the same time the dot starts it's tween.

 

I can't upload an SWF to show my hand-rolled existing target, so I converted to animated GIF and attached.

 

 

post-10039-0-88642000-1335951776_thumb.gif

 

This is the behavior I am trying to reproduce with timeline ... unfortunately ... I can't attach another image (quota) of what actually happens with the above actionscript .

Link to comment
Share on other sites

My problem is the dot (mc_dot_XX) clips have a duration of 3

 

That is a fairly important piece of information. Thank you.

 

If the lines and dots each start at the same time, but the lines have different durations and the dots all have the same duration it makes it a little tricky but possible.

 

update preview:

http://snorkl.tv/dev...ple/index2.html

 

updated code:

 

import com.greensock.*;
import com.greensock.plugins.*;
TweenPlugin.activate([scalePlugin]);

var tl:TimelineMax = new TimelineMax({repeat:-1, repeatDelay:1});
//add line tweens and mark the insertion points with labels
//note each tween has a different duration
tl.insert( TweenLite.from(line1, 1, {scale:0}), "line1" );
tl.insert( TweenLite.from(line2, .5, {scale:0}), "line2" );
tl.insert( TweenLite.from(line3, 1, {scale:0}), "line3" );
tl.insert( TweenLite.from(line4, 2, {scale:0}), "line4" );
//insert dot tweens at the appropriate label
//each tween has the same duration and will start when it's respective line tween starts
tl.insert( TweenLite.from(dot1, 2, {scale:0}), "line1" );
tl.insert( TweenLite.from(dot2, 2, {scale:0}), "line2" );
tl.insert( TweenLite.from(dot3, 2, {scale:0}), "line3" );
tl.insert( TweenLite.from(dot4, 2, {scale:0}), "line4" );

 

the first chunk of code inserts all the line animations one after the other. When you specify I label that doesn't exist with insert() it will create a label at the end of the timeline and insert the tween there.

 

after all the lines are set up, I then add the dot animations at the right label.

 

new fla attached (had to move the dots)

insertAtlabel.zip

Link to comment
Share on other sites

That is an exciting concept (labels) to me, Carl. I was aware of them, but hadn't connected the concept with what I want to do. Whoops ... that's certainly lack of conception on my part.

 

Thank you so much for reading and teaching me how to fish. Your solution worked, of course, and I am very appreciative of your help.

 

Steven

Link to comment
Share on other sites

you're welcome!

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.

×