dynamically created timelines

[pbohny]

Thanks for you example, it's quite impressive to see your approach with the slide class and the the slides extending it.

 

I just wonder how you would approch this case:

 

The fundamental driver (length of timeline) of my animation is given by a loaded soundfile. While the soundfile is playing, a synchronized TimeLineMax instance is playing as well. ( I simply fire start, play and pause for sound and timeline in the same functions). From an xml file I do get params to draw objects (e.g. a circle with radius, fillcolor, alpha, line etc.) as well as a the times when this object ought to be drawn or removed. I use a Class FocusCircle with a method drawCircle() creating an animated drawing of the circle.

 

//initialize focus
		public function insertFocuses():void {
			var i:int;
			var focusCircle:FocusCircle;
			var fadein:Number
			var fadeout:Number
			var numFocuses:int = xmlAction.focuses.focus.length();
			for (i=0; i					sequence_TL = new TimelineMax({onComplete:sequenceTimelineEnd});
				focusCircle = new FocusCircle();
				focusCircle.name = xmlAction.focuses.focus[i].name;
				focusCircle.xPos = xmlAction.focuses.focus[i].posX;
				focusCircle.yPos = xmlAction.focuses.focus[i].posY;
				focusCircle.fillColor = Number(xmlAction.focuses.focus[i].color);
				focusCircle.fillAlpha = Number(xmlAction.focuses.focus[i].fillalpha);
				focusCircle.strokeColor = Number(xmlAction.focuses.focus[i].linecolor);
				focusCircle.strokeAlpha = Number(xmlAction.focuses.focus[i].linealpha);
				focusCircle.strokeWeight = Number(xmlAction.focuses.focus[i].lineweight);
				focusCircle.radius = Number(xmlAction.focuses.focus[i].size);
				focusCircle.drawingTime = Number(xmlAction.focuses.focus[i].tempo);
				fadein = Number(xmlAction.focuses.focus[i].fadein);
				fadeout = Number(xmlAction.focuses.focus[i].fadeout);
				focusCircle.visible = false;//will only be changed by autoAlpha instance of TweenMax
				focusCircle.alpha = 0;
				objectsLayer.addChild(focusCircle)
				stageObjects.push(focusCircle);
				sequence_TL.insert(new TweenLite(focusCircle, 0, {delay:fadein, x:0, y:0}));
				sequence_TL.insert(new TweenLite(focusCircle, 1, {delay:fadein, autoAlpha:1}));
				sequence_TL.insert(new TweenLite(focusCircle, 1, {delay:fadeout, autoAlpha:0}));
				//insert sequence timeline into main timeline
				analysis_TL.insert(sequence_TL);

			}
		}

 

I do get a working result with this code (the objects fadein nicely at the fadein time, but they are already drawn obviously, which is ok for static objects). Instead of autoAlpha, I would rather start the draw method of my FocusCircle class at the fadein time. How would this be done correctly?

 

Regards

[GreenSock]

Do you mind me asking why you want to draw them only when the tween is supposed to start? There are several down sides to this approach:

 

1) There's an increased risk of the animation not playing smoothly because you're doing the drawing right in the middle of the animation. I doubt this will be a big issue unless you have a lot of drawing happening, but in theory, you'll get the best, smoothest playback by drawing your objects first, setting visible to false (which autoAlpha would do for you) and then fade them in when necessary (and toggle their visible property of course).

 

2) You cannot create a tween that doesn't have a target, so you'd be forced to wait until your objects are drawn before creating their tweens. This makes it more difficult to lay out your animation ahead of time.

 

3) Timelines can be skipped around at any time. You can fastforward, rewind, etc. So even if you wait until a tween is about to start before you do your drawing, all the drawing will have to have been done by the end of the timeline. Say, for example, you create a 60 second timeline that has 50 objects that must be drawn and you immediately gotoAndPlay(50), that means all the objects before that point will have to be drawn at once which could hurt performance.

 

So what are you trying to accomplish by delaying the drawing of your objects? If your goal is to improve performance, I think it would actually hurt more than it would help (in most scenarios at least).

[pbohny]

I am most likely approaching the issue in a twisted way, so let me formulate what I want to achieve in the most simplest way:

 

I want to play soundfile (dynamic) and I want to animate many isntances of something like this:

http://forums.greensock.com/viewtopic.php?f=1&t=287&p=1147&hilit=animate+drawing#p1147

at certain times down the soundfile (and linked timeline). All is dynamic and has to be created at runtime with params parsed from an xml.file

 

Does this make more sense?

[GreenSock]

I think I understand what you're after, but is there something that prevents you from being able to create the drawings before creating the TimelineLite instance? It can all be dynamic, of course, based on XML.

[pbohny]

No, there isn't. I load and parse the xml and would now like to create the Timeline, insert the nested timelines (see viewtopic.php?f=1&t=287&p=1147&hilit=animate+drawing#p1147) that starts playing at the time provided. Now I would start playing the main timeline and have the nice features of pausing, reversing etc.

 

Sorry, I am blocked. I tried with the callback method with no success.

[GreenSock]

I'm not sure I understand what your specific question is, but you could make the FocusCircle have a "drawProgress" getter/setter that does the actual drawing for you based on a number between 0 and 1 where 0 is the start (nothing drawn) and 1 is completely drawn. Then I'd tween that property, like TweenLite.to(mc, 3, {drawProgress:1}). That way, if you reverse your timeline, pause it, etc., it affects the drawing properly. Otherwise, the drawing will start when the timeline is moving forward but if you pause() the timeline, your drawing would keep going.

 

Does that help?