Love the Muffin! Worship the Muffin!! Obey The Muffin!!! Chinese Fighting Muffin v3 - Roman Litvinov's Portfolio, Flash Interfaces and Animation
Flash interfaces and animation done by Roman Litvinov About Roman Litvinov Making Flash Intros Guides Contact Information
Go back to Flash Guides Main Index
 

Making Flash Intros 3 - Soundtrack Synchronization

You're making an intro. You have your animation all worked out, you have your nice sound effects and appropriate music loops. You want your animation events to happen in time with specific points in the soundtrack, like flash the lights when the thunder cracks or make an animated character move to the beat of the music. So how do you do that? Well, basically, you have your sound on the timeline, and you just move your animation keyframes around and test the movie until they coincide with the music the way you want. OK, I'm sort of lying here - it IS done this way, but that's only a small part of a larger whole. To understand the rest, you have to know some things about framerates and different sound options in Flash movies first. 


FRAMERATE SETTING
By default, Flash player doesn't skip any frames - it tries to play through all the frames in succession and draw each one on the screen. Don't look at the framerate that you set as the enforced minimum speed limit. It's nothing like that. It actually serves 2 purposes - it tells the Flash player the maximum framerate and it also suggests the desirable mimimum framerate at the same time. If you set your movie at 24 fps, for example, it means that Flash player would never play the movie faster than 24 fps - but there's nothing to stop it from playing the movie SLOWER than that. Of course it tries to keep up with the given number, yes, - but on slower computers each frame will take longer to be drawn and animation will play slower, because actual framerate is dependent on available CPU power and RAM. Even if it plays at 24 fps on YOUR computer, there is no guarantee that it will play at 24 fps on some other, slower, system. Also, as far as I can tell from experience, different browser plugins might also be a factor - for example, IE Flash ActiveX control usually plays Flash movies a bit slower than Netscape's Flash plugin on the same system. So by default your actual framerate depends on all these things.


SOUND "SYNC" SETTING
In the list of Sync options for sound events in Flash there are two major settings that you have to understand well for intro making purposes. They are Event and Stream settings. Here's the list of important differences between them:

A. The way sounds are stored and used inside a Flash movie:
  • Sounds set to Event must be downloaded completely before they start playing. The reason is that Flash stores the data for the whole sound in the first frame of the movie where (or rather, when) this sound occurs. Once this frame with the first occurance of the sound is downloaded, it is kept in memory, and when this sound occurs again later, the data is referenced by the Flash player, - so the sound can be used again and again without the need to re-download it. Therefore, the size of the sound is only added once to the file size of the whole movie. What this means is that if you have a 15 Kb music loop, and you set it to Event and loop it in your movie 20 times, it will add only 15 Kbytes to your movie file size.
  • Sounds set to Stream don't have to be downloaded completely and can start playing as soon as the sound preloading buffer you set is filled, while the rest of the sound downloads. The reason is that Flash stores sounds set to Stream differently - instead of the data for the whole sound being stored in one frame, it is broken into many small chunks which are stored in all the frames that the sound occupies. When the movie is played, all these chunks are played in succession, reconstituting the whole sound again. Therefore, as you can see, a sound set to Stream is not kept in the file as a whole (because it's not a single piece of audio data anymore), so its size has to be re-added to the file size again and again, even if it's the same sound that you're just looping. What this means is that if you have a 15 Kb music loop, and you set it to Stream and loop it in your movie 20 times, it will add 15 Kb x 20 = 300 Kbytes to your movie file size.
B. The way sounds can be stopped:
  • Sounds set to Event cannot be stopped, even if you stop the movie altogether. The only way to stop an Event sound is by stopAllSounds() command, which is a rather radical solution because it doesn't work on individual sounds, - instead it stops ALL sounds currently played. Once started, an Event sound will continue playing until it's finished, for as many loops as it's set to. Sounds set to Event are said to be "independent from the timeline".
  • Sounds set to Stream, due to the way they are stored in the Flash movie file, are completely dependent on the timeline they belong to. That means that when the movie is stopped, the Stream sound is stopped. When the movie is resumed, the Stream sound is resumed. Sounds set to Stream play only for the duration of frames available to them. Let's say you have a 5-second sound clip, and you put it in Frame 1 of a layer. If your movie's framerate is 10 fps, 5 seconds equal 50 frames. If you set this sound clip to Stream, you'll have to put 50 frames on its layer for it to play completely. If you give it only 30 frames, it will only play for 30 frames - which is 3 seconds.
C. The way sounds affect the animation:
  • Sounds set to Event don't affect the animation at all. They play as they play, no matter if the animation keeps up or not. If the computer can't draw animation frames quickly enough, the animation will lag behind the sound.
  • Sounds set to Stream force the animation to stay synchronized with them for the duration of the sound. Some people say that sounds set to Stream force the framerate to stay constant - but that's not exactly true. If a computer is too slow, it is too slow, - there's nothing that Flash can do to magically make it draw the frames of some complex animation faster. So the way it works is Flash starts skipping frames when animation starts to lag behind the sound, in order to keep the synchronization.

After reading all this, you probably have already come up with an idea about a solution for synchronizing the animation to your soundtrack. You're probably thinking:"Just set all sounds to Stream, move the animation keyframes to the appropriate places on the timeline so they would coincide with the sound effects, and it's all going to be synchronized, that's it, right!? Easy!"

Well... YES. And NO.

You see, for some intents and purposes this method will be fine. In fact, it's the easiest and the best way to do things when you use every sound only ONCE in your movie, or when you mix your whole soundtrack before working on animation and import it into Flash as a single long sound file. But when you want to use some of your sounds several times or when you loop short music clips to create your music soundtrack, this method will create files extremely large in size.

Take a look at the paragraph above that describes the way sounds set to Stream are downloaded. See where it says "a sound set to Stream is not kept in the file as a whole (because it's not a single piece of audio data anymore), so its size has to be re-added to the file size again and again, even if it's the same sound that you're just looping"? That's where the problem lies. If you loop your music loop several times or use your sound event several times, and it is set to Stream, you'll add its size to the final movie size as many times as you loop it/use it. Let's say you got a music loop that you want to repeat 20 times - if set to Stream, that means the sound size * 20 is added to your movie size. In most cases this is simply not acceptable.

 

SOLUTIONS

So how do you make sure that your animation is synchronized to your soundtrack when you use the same sounds repeatedly or looping your music, without making the viewers suffer from huge filesizes? There are two commonly used ways to do that.

SOLUTION 1 - Looping a very small silent sound set to "Stream"
This solution is attempting to synchronize all of the animation to a Stream sound and trying to minimize the size of that sound at the same time. Let's say you need to use a high-quality music loop for your background music, you want to loop it 10 times, and you need the synchronization when it plays. Because the music loop is high-quality its compression is lower, so it adds more to the movie file size. You could set it to Stream and it would give you the synchronization you need. But it would mean that a larger-sized (due to high quality) volume of sound data would be added to the movie file 10 times, and you don't want that. In such situations what you can do instead is set some OTHER sound to Stream and play it when you need the synchronization - and set your high-quality music loop to Event so it gets added to the file only once. Obviously the other sound that you will set to Stream needs to be as small as possible - that is why the perfect solution will be to use a very small, very low-quality, SILENT sound clip, and loop it over the range of animation where you need the synchronization. So here's what you do:

1.  Fire up your sound editor and create a short empty sound. No sound information - silent! Save it with the worst sound quality settings possible - because it's empty and silent anyway, and you'll need it as small-sized as you can manage.

2.  Import this small silent sound into your movie.

3.  It is now in your Library. Open its Properties (right-click and Properties, or Properties button) and set the Export settings to minimal quality (MP3/mono/8Kbps/fast or ADPCM/mono/5Khz/2bits - whichever gives you the smallest size).

4.  Make a new layer in your movie.

5.  Now make a new keyframe on this new layer 2-3 frames before the spot where you want the synchronization to begin. Take your Very Small Silent Sound™ and put it in that keyframe.

6.  Set the Sync setting for the slient sound to "Stream".

7.  Set the Loops number for this sound to such a value that it covers the part of the timeline where synchronization is imperative. You can either calculate it precisely, using the sound's duration, the framerate of the movie, and number of frames on the part of the timeline where synchronization is occuring, or you can keep adding to the number of loops until you see that they cover the necessary number of frames. Here's how it would look like - as you can see, the silent sound starts right before the soundtrack part that we want to synchronize the animation to, and continues to loop until the synchronization is no longer necessary:

Solution 1 - small silent sound loops for the duration of the animation where synchronization is important.

8.  If you have several scenes in your movie where synchronization is required, make sure you do this for every such scene. If you want the whole intro to be synchronized, loop the sound for the whole intro's duration. Bah, why am I repeating myself, I'm sure you understand what you have to do, - you need to cover all the areas where synchronization is necessary with the loops of the very small silent sound set to "Stream".

9.  Now you can set your repeating music loops and sound clips to "Event", or just set everything to "Event" except for the silent streaming sound, if you loop it for the duration of the whole animation, - because now your framerate will be forced to stay the same and your only concern is file size.

Advantage of using this technique is that in the areas covered by the loops of the streamed silent sound the synchronization is 100% guaranteed. Disadvantage is that even the smallest silent sound at the lowest quality will add up noticably to the file size, if your movie is sufficiently big and synchronized areas are long. Of course, you could find some ways to actually make this small looping sound useful for something besides synchronization - for example, if you are making an animation simulating an old worn-out movie, with scratches on the film, etc., you could create a very short low-quality clicking sound and loop that for the duration of the intro. It would sound like an old movie projector and add to the atmosphere.

 

SOLUTION 2 - Forced Synchornization mode Kick-in Trick
This solution is much better on the file size, and the way it works is pretty interesting. It isn't the official feature of Flash player, as far as I know, and some people say that it's probably a surprisingly useful bug. In any case, you can use it successfully. Here's what it's based on - there seems to be a glitch in the way audio is handled in the Flash player, because if there is a sound set to Stream being played on a timeline and a sound set to Event is started on the same timeline, Flash handles that Event sound as if it was set to Stream. In other words, you can actually make Flash force the animation keep up with the sound set to Event, without increasing the file size!

There are 2 ways you can use this to your advantage:

Method #1
If you want to keep your whole movie or some areas of it synchronized to the soundtrack regardless of what sounds are actually playing, you can use the short silent sound just like you did in the previous solution - but this time you don't actually set it to Stream, instead you just trick Flash into thinking that it is set to Stream. You set your soundtrack sounds to Event, and you cover areas of your movie with the loops of short silent sound just like before, BUT you set it to Event. You make another layer, make a keyframe on that layer, and put the same silent sound in that keyframe, no looping this time, in such a way that it OVERLAPS the beginning of the looping silent sound (which is set to Event). And THIS single silent sound, you set to Stream. This is how it would look like:

Solution 2 (method #1) - instance of silent sound set to Stream plays once, overlapping the beginning of instance of silent sound which loops and is set to Event. Flash player is tricked into thinking that the looping silent sound is set to Stream, synchronization to the looping silent sound is kicked in.

Method #2
If you want to synchronize your animation to a particular looping music or sound clip, you can trick Flash into thinking that the looping clip is set to Stream, by overlapping its beginning with a very small short silent sound. Put the silent sound on the timeline right before the looping clip that you want to synchronize your animation to. Set the silent sound's Sync setting to Stream, and set the looping clip to Event. Make sure that when the Event sound starts, your silent Stream sound is still playing. You must have it in a position where it overlaps the next sound, like this:

Solution 2 (method #2) - instance of silent sound set to Stream plays once, overlapping the beginning of the looping music clip used as soundtrack. Flash player is tricked into thinking that the looping music clip is set to Stream, synchronization to the looping music clip is kicked in.


When you use method #1, the size of the silent sound is added to the movie size only twice - once for the instance of the sound set to Event and once for the instance of the sound set to Stream. When you use method #2, it's even better - the size of the silent sound is added to the movie size only ONCE. All this - AND you have your forced synchronization at the same time in both cases! Yes, yes, guys, truly it is amazing, I know, now please calm down and stop the fireworks.

Just remember that if you use a Stop() action or stopAllSounds() action, this kind of forced synchronization stops - so you'll have to repeat the trick to get it started again. The same thing also happens when the movie is paused by the viewer during playback - all sounds are stopped and Flash gets out of this type of forced synchronization mode. To prevent this from happening, you'll have to disable the right-click menu for the movie (open File menu, click on Publish Settings, then click on HTML tab and uncheck "Display Menu" checkbox).

Advantages of this solution to synchronization problem are obvious right away - you get the synchronization without the additional file size of the streamed sounds. So why doesn't everyone just use this method all the time for every project? Well, the problem is that forced synchronization mode started this way doesn't guarantee continuous synchronization 100%. Forced synchronization started this way doesn't last. Remember, this isn't an official feature. After several hundreds of frames the animation slowly starts to lag behind the sound again. To start it up again you have to repeat the trick.


This concludes the guide. Now you know what to do to synchronize your animation to the sound. It is up to you to choose which method you will use - just keep advantages and disadvantages in mind. Another thing I should mention is danger of some important keyframes getting skipped when your animation is graphically intensive, synchronized, and played on a slow system. You don't want a keyframe that starts a music loop to get skipped, for example, - and it CAN happen. That is why you should think in advance about what kind of computers your audience will probably have and whether they will be able to handle the framerate or not. If you think it might be a problem, either reduce your framerate a bit or try and decrease the complexity of your animation.

 

Go back to Flash Guides Main Index
    © 2001-2005 Roman Litvinov Site Map