From audio streaming synching to timed MovieClips

I’ve been working recently on an iPad app with a lot of vector animation. Sometimes, due to transparency, effects, etc, playback of the animations were not quite up to the frame-rate we were hoping for and for our purposes the speed of the animation was more important than skipped frames. While we played around with removing elements to improve the animation speed, I played around with scripting solutions.

I noticed that when we played streaming audio that the frame rate bumped right back up to the right speed. Although the animation could skip the occasional frame, the speed was correct. Thinking about it, this is what’s to be expected as it wouldn’t be acceptable for the audio to stutter, so to ensure the audio was synched to the animation, it could be necessary for Flash to skip animation frames. But what was news to me, is that the streaming audio doesn’t need to be in the same movieclip as the animation! If for example, you have a looping movieclip with a short streaming audio clip(with sound volume adjusted to zero if you like), this forces ALL movieclips that play to place a higher priority on playing at the correct speed over skipping frames.

Interesting, but practically I don’t think it’s really a workable solution to be constantly streaming audio, I’m sure this would decrease performance. But it got me thinking about creating a custom MovieClip class that always maintains the correct frame rate using TweenLite. Gave it a go and it worked great! See below for the class.

NB: Considerations with this class:

1.  it could skip a frame that contains scripting. (This wasn’t an issue here, but is an issue that could be addressed in a revision to the class)
2. the class assumes a ‘stop’ in the final frame of the class. (Again this could be resolved with an added method for example, called ‘loop’
3. if you manually call gotoAndStop on the clip, you also need to call stop (this is because ‘gotoAndStop’ was called by the Tween class responsible for keeping the movieClip playing, so if ‘gotoAndStop’ was called I couldn’t presume that the animation is over.

package com.craiggrummitt.display
{
import com.greensock.TweenLite;
import com.greensock.easing.Linear;
import com.greensock.plugins.FramePlugin;
import com.greensock.plugins.TweenPlugin;

import flash.display.MovieClip;

public class MovieClipTimeBase extends MovieClip
{
public function MovieClipTimeBase()
{
super();
TweenPlugin.activate([FramePlugin])
}
override public function gotoAndPlay(frame:Object, scene:String=null):void {
this.gotoAndStop(frame);
play();
}
override public function play():void {
TweenLite.killTweensOf(this,false,{frame:true});
var secs:Number=(this.totalFrames-this.currentFrame)/stage.frameRate
TweenLite.to(this,secs,{frame:totalFrames,ease:Linear.easeNone});
}
override public function stop():void {
TweenLite.killTweensOf(this,false,{frame:true});
super.stop();
}
}
}

About craiggrummitt

iOS development with Swift - book: https://manning.com/books/ios-development-with-swift video course: https://www.manning.com/livevideo/ios-development-with-swift-lv