Saturday, November 13, 2010

Adding Sound to Flash Movie Timeline and Choosing Flash Sync Sound Options - Flash Event Sound vs Flash Stream Sound Tutorial

This tutorial comes with exercise files. Click the link below to visit the download page:
[GO TO EXERCISE FILES DOWNLOAD PAGE]

In this Flash Sound tutorial, we'll be learning the basics of adding sound to Flash documents. Here, I'll show you how to add sound to the timeline of a Flash movie. We'll also be taking a closer look at 2 of the Adobe Flash Sync Sound options - Flash Event Sound vs Flash Stream Sound. These are options that allow you to control the synchronization of sound in your Flash movie and we'll take a look at the difference between the two.

Open the add-bg-music.fla file. This is just a simple 16-second Flash animation of a jumping stickman. Take a look at the timeline and you will see a layer called bgmusic. This is where we will be placing the sound for our Flash movie. You'll see that the layer has one blank keyframe and nothing else.

NOTE: You DO NOT need a dedicated layer for your audio in Flash. You can place the sound on a layer that also has some animation in it. But even if creating a dedicated layer for your sound is not required, I would still recommend that you do so, in order to keep things more organized within your Flash document.

To add sound to Flash documents, let's first import the audio file. Import the CheerfulSong.mp3 file into the Flash document by choosing File > Import > Import to Library. Navigate to where the file is on your hard drive and import it. Once it's imported, select the blank keyframe on frame 1 of the bgmusic layer. A keyframe is needed in order to place sound on a layer in the timeline.

Next, go to the Properties Inspector. Here, you should now see the frame properties. Under the SOUND heading, click on the Name drop-down menu in order to expand the list. Whenever you import an audio file into your Flash document's library, it automatically gets added to this list. You should see CheerfulSong.mp3 as the second option.

Go ahead and select it. This applies the audio to our selected keyframe.

Take a moment to look at the other properties under the sound heading. You'll see Effect and Sync.

The Effect menu let's you choose from a few basic effects that you can apply to the selected sound.

Sync is short for synchronization. The Sync options let you choose the type of synchronization that the selected sound should follow: Event, Start, Stop or Stream. You can also instruct the sound to play more than once by specifying a Repeat value greater than one, or by choosing the Loop option.

When adding sound to Flash, the synchronization options will affect how the sound behaves when it is playing. Let's take a closer look at 2 of the synchronization options - Event and Stream.

Let's try to understand the difference between those two:

Event - This synchronizes the sound in your Flash movie to an event. That event would be when the playhead enters the frame that contains the sound. Once the playhead enters that frame, the sound will start playing and will only stop when the sound is explicitly told to stop (e.g. using ActionScript code that will stop the sound). Even if the animation is already at the end, an Event sound will keep on playing until it is explicitly told to stop (or until the song reaches the end).

Stream - This synchronizes the audio to the frames of the Flash movie. When the Flash movie stops, so does the sound. Also, when there are no more frames in the layer that contains the sound, then the sound will stop playing as well, even if the other layers still have frames to play.

Let's choose the Event option first and let's see how it will work in this example. But before you test the movie, let me explain what will happen: First, you need to know that the CheerfulSong.mp3 audio file is about 30 seconds long, while the Flash animation of the jumping stickman is only 16 seconds long. So our song is almost twice as long as the animation. And also, by default, a Flash animation is going to loop. This means that when the playhead reaches the last frame, it will go back to frame 1 and play the animation again, and so on... And since the animation is shorter than the song's duration, this means that the animation will loop back even before the song reaches its end. It's important that you understand this because when you preview this animation with the Event sound, you will notice that when the Flash animation loops, the same sound will play again, but the previous instance of the sound will still continue playing. So you'll end up with two instances of the song playing on top of each other. This happens because an Event sound will play every time the playhead enters the frame that contains that sound. When the animation loops, the playhead enters the frame with that sound once again, and therefore, another instance of the song is played as well. But we also know that an Event sound will not stop unless you explicitly tell it to stop. That's why the first instance of the sound will still continue playing along with the new instance of the sound. This will keep happening as long as the animation keeps looping and the Event sound is NOT explicitly told to stop. In cases where the sound is much, much longer than the looping animation, you'll end up with not just two instances of the sound playing on top of each other, but more! So go ahead and choose the Event option and then test the movie to verify what happens.

NOTE: The Start option behaves similar to the Event option in that it waits for an event (the playhead entering the frame where the sound is placed), but it differs in that the Start option will NOT play the sound again while the previous instance is still playing.

Now let's go back to the Flash document, and let's change the Sync option to Stream so we can understand how it will make the sound behave in this example. But before you test the movie, let me tell you that you will NOT hear the sound playing. We'll have to fix one more thing first to make the sound work properly. But in the meantime, go ahead and test the movie to verify, and then continue reading the article.

So now that you've tested the movie, let me explain why we don't hear the sound playing: The reason why you don't hear the sound playing is because there is only one frame on the layer where we placed the sound. If you recall, the Stream option will synchronize the sound to the frames of the animation. And right now, the sound is only being synchronized to one frame. That's not enough. So in order to hear the sound, we'll need to add more frames. Let's do that. Select the empty slot for frame 193 on the bgmusic layer, then right-click on it and choose Insert FRAME in order to add more frames to the layer. So now that there are more frames on the bgmusic layer, you should be able to hear the sound. Go ahead and test the movie to verify. You will notice that whenever the animation loops, the previous instance of the sound stops playing and the new instance starts from the beginning. And again, that's because the sound is being synchronized with the frames of the animation whenever the Stream option is used.

So when should I choose Event and when should I choose Stream?
Well, it really depends on what you're trying to do in your Flash movie. But as a general rule, I choose Stream whenever I need the sound to be in sync with the animation. I choose Event when I need to have a sound play regardless of how many frames I may have in the animation (for example if I'd like a song to keep playing even though the animation has already reached the end). But as you've seen in the example, this can be quite tricky because Event sounds can end up playing on top of each other. So in some cases I will just choose the Start sync option or I would add some ActionScript to make sure that the sound plays the way I want it to. With Button symbols, however, when you want to add sound inside a Button symbol's timeline (e.g. a sound effect whenever the user clicks on it), you must use the Event option. Button symbols' timelines only have a limited number of frames (just 4 to be exact), so most likely, the Stream option won't play the sound properly in this case.

Adding sound to Flash is fairly simple. It's usually with the way the sound behaves when playing where most new Flash users have a little trouble with. Hopefully, this tutorial has made it a bit more clear for those of you who are just learning how to add sound to Flash movies.

PREVIOUS: Flash Sound Basics | Adding Sound to Flash Movies - Importing Audio Files into a Flash Document's Library

15 comments:

  1. Thanks for this article it was much needed!

    ReplyDelete
  2. ummm i need some help i changed the sound file to a mp3 and it willn't let me upload it

    ReplyDelete
  3. This explaination is very clear and very helpful, thanks! Just wondering... What exactly does the 'Stop' option do? Is it just the same as putting a blank keyframe in to stop a streaming sound from playing beyond a certain frame?

    ReplyDelete
  4. Yep, it's going to have the same effect. But when you choose STOP, you also have to make sure that you select the correct sound file from the drop down menu. So you also have to be specific as to which sound file you want to stop. Because of this, you can also use the STOP sync option on the DOWN frame of a button symbol. That way, you'll be able to create a stop button for your music.

    ReplyDelete
  5. Hi! Is there a way to hear sound while previewing animation in the timeline? It doesnt work for me and I have searched a long time without result... Thank you in advance

    ReplyDelete
    Replies
    1. set Sync to Stream, rather than event.

      Delete
  6. Thanks a lot!

    Despite the fact that advertisement and recommendations for Adobe Flash states that it is easy to use, well it is easy to use once you know the ins and outs of the software.

    But for first-time users, such as Photoshop users wanting to use Flash as a second or third tool, the opposite is true. The learning curve is cruel and deadly.

    For users wanting to learn Adobe Flash, you better be patient or this software is not for you. Once you learn it, the pay is, well, somewhat good.

    ReplyDelete
  7. Yes! Just what I was looking for, thank you so much!

    ReplyDelete
  8. Great Tut, Thanks

    Is there way that we can sync music in HTML (jQuery) picture slide show without any Flash.

    ReplyDelete
  9. great guy.... very very great. you are the man. I dont remembered how to work with flash... but reading your post, my memories is back! tks

    ReplyDelete
  10. Very very helpful indeed, saved my day.

    Thanks so much!

    ReplyDelete
  11. Exactly what I was looking for. I was playing around with the different Flash CS4 sync options, but never could get them down to their exact purposes. Adding sound to my flash animations is a lot easier now.

    ReplyDelete
  12. Hi, I have this problem "Stream" is greyed out for me, it will only let me use "Event," What's the problem?
    Using Flash CC Pro HTML5 canvas presets

    ReplyDelete
  13. Thanks a lot!

    Despite the fact that advertisement and recommendations for Adobe Flash states that it is easy to use, well it is easy to use once you know the ins and outs of the software.

    But for first-time users, such as Photoshop users wanting to use Flash as a second or third tool, the opposite is true. The learning curve is cruel and deadly.

    For users wanting to learn Adobe Flash, you better be patient or this software is not for you. Once you learn it, the pay is, well, somewhat good.

    ReplyDelete