Sync audio with Tween/TimelineMax/Lite

[DigitalOne]

Hi all,

 

Is there any way to sync any of the Tween/TimelineMax/Lites to a loaded audio track?

By that I mean the animation matches the audio flow like within the Flash IDE when you set the audio track in the timeline to sync to "stream"

 

Thank you

[GreenSock]

Not really, but since by default TimelineLite/Max always base their timing on seconds rather than frames, they should stay pretty well synced with any audio that's playing unless the audio gets bogged down for some reason. You could, I suppose, pause() the TimelineLite/Max and then use an ENTER_FRAME to set its currentTime on every frame based on the audio's time, but I'm not sure that's necessary - are you running into problems or something?

[DigitalOne]

Not running into problems. I have an intro that I'm trying to sync. Right now, it's sync'd to an audio track via Flash's timeline "stream" option

 

Haven't tried syncing audio using your classes before. I'll try by appropriate seconds, delays, etc.

[GreenSock]

If you've got the audio synced with the MovieClip timeline (frames), then it may be best to set up your TimelineLite/Max instances with useFrames:true. That way, they'll stay perfectly synced with the MovieClip timeline. Don't forget that your tween's duration an delay properties will need to be defined in terms of frames, not seconds in that case.

[DigitalOne]

Thank you, I'll give that a try

[andy]

I am trying to sync this to audio and first wrote the code on a Mac OS 10 / CS4 / Flash Player 10. It looked good but when I came home and tested on my PC / XP / CS4 / Flash Player 10 the ani was way off. That's the first issue.

 

The second issue is that onFrames makes it run very slowly, as if the code is still running in seconds.

 

Eg.

 

timelineABC.append( new TweenLite(b_txt, 8, {y:"-75", ease:Back.easeOut, useFrames:true}),-10);

timelineABC.append( new TweenLite(b_txt, 24, {y:"75", useFrames:true}));

 

 

FPS = 24 so I reckon that 8 is 1/3 of a second and 24 = 1... Yet the whole thing is acting as if those numbers were actually seconds. No errors either. I'm sure there is something very simple wrong here.

 

The GS stuff and community is terrific. If I could solve this issue I'd be truly converted.

[GreenSock]

I don't have enough information to diagnose the first issue. The only way I can think of to sync audio with ActionScript-based animation is to put your audio in a MovieClip, set its mode to synchronized, and then make sure your ActionScript animation is frames-based (useFrames:true). If you believe there's a GreenSock-related problem, please post an FLA that demonstrates the issue so that we can publish it and quickly see what's going on. It's super helpful to have a sample FLA when troubleshooting.

 

As for the second issue, a tween's timing mode is always controlled by its parent timeline (as indicated in the docs). So in your case, if timelineABC uses seconds, it doesn't matter if you try making the child tweens use frames - they'll always use seconds unless you set useFrames:true on the parent timeline, like:

 

var timelineABC:TimelineLite = new TimelineLite({useFrames:true});
timelineABC.append(...);

 

I hope that helps.

[andy]

As per the Mac/PC issue trying this again on another Mac / 2.66 Intel Duo / OS 10.5 / Flash Player 10 and it runs well. The timing is accurate. But not on the PC which is a well stocked Gateway with equally impressive stats, video RAM, etc. The ani is purely dynamic + GS with mp3 coded in. How does the sync work in that scenario?

 

 

Please see attached fla and mp3

[GreenSock]

One issue I see right away is that you're not accounting for any loading time. You play() the sound immediately after you start loading it, but Flash needs some time to load the audio. You should set up a listener so that your timeline only starts AFTER the sound loads and begins playing.

[jamielloyd]

i'm having a similar problem. i have audio being attached and played from the library thru code. as an animation plays, it arbitrarily falls out of sync with the audio. i'm guessing due to the host computer having to process anything other than the flash movie that's playing. here's a code snippet

 

t = new TimelineMax();

panel = getPanel("panel1");

// init

t.insert(TweenMax.to(panel.c("splashBg"), 0, { autoAlpha:0 }));

t.insert(TweenMax.to(panel.c("logo"), 0, { y:panel.p("logo").y+40, autoAlpha:0, brightness:5 }));

t.insert(TweenMax.to(panel.c("title"), 0, { y:panel.p("title").y+60, autoAlpha:0 }));

t.insert(TweenMax.to(panel.c("logoShadow"), 0, { autoAlpha:0 }));

// animate in

t.append(TweenMax.to(panel, 0, { autoAlpha:1, immediateRender:false }), 1);

t.insert(TweenMax.to(panel.c("splashBg"), 0.75, { autoAlpha:1 }), 1);

t.insert(TweenMax.to(panel.c("logo"), 0.75, { y:panel.p("logo").y, autoAlpha:1, brightness:1 }), 2);

t.insert(TweenMax.to(panel.c("title"), 0.75, { y:panel.p("title").y, autoAlpha:1 }), 2.1);

t.insert(TweenMax.to(panel.c("logoShadow"), 0.75, { autoAlpha:1 }), 2.1);

 

// etc

 

 

 

// start audio

t.addCallback(playAudio, 1, ["Panel1Audio"]);

// add to timeline

_timeline.append(t);

 

_durations[0] = t.totalDuration;

 

 

are there any examples for forcing sync between audio and the timeline max?

[jamielloyd]

i should also mention that my animations i'm trying to synch with audio are usually 2 - 3 minutes long. what i'm experiencing is that towards the end of a timeline max the audio will get cut off too early when going starting the next timeline. sometimes a second or 2.

[GreenSock]

This isn't a problem with TweenLite/Max or TimelineLite/Max - it's just the nature of audio in Flash. Remember, the Flash Player's frame rate can drop at various times when it can't keep up with the rendering demands on the processor and audio generally plays in a distinct way (it gets priority) because Flash knows how jarring it would be to have the audio...st..op...or...g.et...jerky. Visuals are more forgiving. Anyway, the point is that the only way to truly have the audio and animation synced (that I know of) is to embed the audio in a MovieClip timeline and set its sync mode to "stream" instead of event, start, or stop.

 

In theory, the GreenSock tweening platform should be pretty well synced up with audio if Flash does indeed play it at the correct speed because TweenLite/Max always prioritize time over frames (well, unless you set useFrames:true in your tweens of course). So even if the frame rate drops, TweenLite/Max will automatically adjust on the fly so that the timing of your tweens is honored. If the audio isn't staying in sync, that means Flash isn't playing it at quite the right speed which [unfortunately] I have no control over. There's no ActionScript fix for that as far as I know.