Return to Kroll Design home page

Flash Tutorials (with .FLA files included)

« Return

ActionScript 3

Sound sync animation

Download the FLA file

Having animation play in sync with sound is a large subject area, but here is a simple example of a man walking, the sound of him walking included. His walk cycle is hand-drawn and is 19 frames long. This cannot be changed. The sound clip has a fixed speed also, therefore, to get them in sync with each other, what I experimented with was the frame rate. The sound plays at the correct speed no matter what the frame rate is, but the speed of the man's steps is directly affected by the frame rate. At 10 frames per second, he walks too slow to be in sync with the sound. At 20 frames per second, he walks too fast. What I found was that 17 frames per second most closely matched the sound clip.

A more accurate but more painstaking way to have the animation in sync with the soundtrack of a cartoon is to create the entire soundtrack first, then once the completed sound is ready, the animation can be hand-drawn or created to match the sound. Viewing the actual wave form in Flash can help you see where various sounds take place. There is undoubtedly software that professionals use to speed this process up, but that's their area of expertise, so I'll leave it to them to provide guidance and instruction.

I noticed that when the movie kept looping and playing again, it started to lose sync. This could be a Flash problem or a "me" problem, but to reduce the timing glitch the movie now stops when the man exits on the right, and a "Play again" button appears. By time you click it, the sound file will have had a second to stop and be ready for the next play.

This movie's sound is what is called "streaming" sound -- it plays continuously, and Flash does what it can to play the sound smooothly, even if it needs to drop frames of the visual so that the visual can keep up with the audio.

As mentioned in other tutorial examples, I drew this walking character -- that's why I use it so much. I really should create a few more charactes for variety's sake. And I created the outer space-like background in Photoshop.

Here's the ActionScript for the first frame in the timeline:

const leftEdge:int = -90;
const rightEdge:int = 600;
var   speed:uint = 10;

walker_mc.x = leftEdge;

addEventListener(Event.ENTER_FRAME, moveMan);

function moveMan(myEvent:Event)
	if (walker_mc.x > rightEdge)
	{ walker_mc.removeEventListener(Event.ENTER_FRAME, moveMan);
	  speed = 0; }
	{ walker_mc.x += speed; }	

And here's the ActionScript for the last frame in the timeline:


playAgain_btn.addEventListener(MouseEvent.CLICK, replay);

function replay(myEvent:MouseEvent)

« Return

©2012 Kroll Design    781.910.3694
Last modified: 12/31/1969 7:00 PM