0x40 Hues of Megumi

0x40 Hues of Megumi

Audio looping and animation synchronization have always been difficult to blend in Flash. After years of study, trial and error, and experimentation, I've discovered a number of ways to make it work. Using streaming audio and the timeline to control animation is good, but in long animations, I have found it can drift out of sync. Streaming audio also does not lend itself to looping, as gaps are almost certain to be introduced because of the amount of time each frame uses in the timeline. Therefore, actionscript is the way to get a better control of these issues. Note that this example uses ActionScript 2.0, and does not contain all of the code from the file, just the important stuff.

In order to solve the problem of synchronizing music to animation with looped audio, a few things needed to be established:

1. Isolate a loop of music from a song, and save as a .wav file.

It's important to save as a .wav file, NOT an .mp3 file. Why? It seems that .mp3 files tend to tack on a miniscule gap of silence to the file when saved, whereas a .wav file does not change the waveform at all. This makes for a seemless loop of sound.

2. Map the drum beats to a simple string of characters, so that the animation will be affected by those beats.

You're just going to have to have a sense of rhythm and a keen ear to do this. The beat pattern can actually be seen scrolling at the bottom of the animation, but this is the actionscript used:

// START CODE BLOCK
rhythm = "";
rhythm += "x..xo...x...o...";
rhythm += "x..xo...x...o...";
rhythm += "x..xo...x...o...";
rhythm += "x..xo...x...oxoo";
rhythm += "x..xo...x...o...";
rhythm += "x..xo...x...o...";
rhythm += "x..xo...x...o...";
rhythm += "x...o...x...oooo";
// END CODE BLOCK

Note that the 'x' and 'o' are different drum types, and each do something slightly different in the animation.

3. In the main loop, check what beat the music is on, and perform an action if there is a string match.

You must first initialize a few variable before the loop:

// START CODE BLOCK
rhy = length(rhythm);
blen = song.duration/rhy;
beat = nextup = 0;
// END CODE BLOCK

The 'rhy' variable is equal to 128 in this particular song, which is the number of beats in the audio piece.
The 'blen' variable is the length of each beat in milliseconds.
The 'beat' variable is which beat is currently being played.
The 'nextup' variable is the millisecond value that the next beat falls at.

// START CODE BLOCK
	if(song.position>nextup&&(song.position-nextup)<1500) {
		if(rhythm.charAt(beat)=="x") { yblur = 64; }
		if(rhythm.charAt(beat)=="o") { xblur = 64; }
		if(rhythm.charAt(beat)<>".") { changeit(); }
		beat = (beat+1)%rhy;
		nextup = int(beat*blen);
	}
// END CODE BLOCK

In the loop, we are always checking the song position versus the next beat value in milliseconds. If the song position is beyond the 'nextup' value, AND the difference between the two is less than 1.5 seconds, then the next beat has passed in the audio, and we need to check what character is found in the rhythm string. Why the 1.5 second check? If the audio is nearly at the end and ready to loop, the 'nextup' value is going to be zero, which will always trigger the first part of the conditional. The 1.5 second check ensures the beat and nextup values are close in value.

If the conditional is triggered, we check the character at the position 'beat' in the 'rhythm' string. If it's an 'x', we are going to start a y-directional blur on the picture. If it's an 'o', we'll do an x-directional blur. If it's either an 'x' or an 'o' (any drum, i.e. not a '.'), we'll run a color changing function on the picture.

The beat number is incremented (wrapping to zero if we pass the rhythm string length), and the 'nextup' variable is calculated. We multiply the current beat number by the beat length calculated earlier. We want to do the 'int' here so we don't get rounding errors.

Thanks to Michael Stone, original author of 50 Hues of Megumi, for the inspiration.

- Anonymous D!Noy5sI6il.