Sound Advice: Embedded audio in Flash

There are generally two methods available for integrating media content – whether photos, audio or video – into Flash.

The first is to embed the media directly – that is, actually include it as part of your Flash file. The second is to load the media on demand from another location only at the moment (or just before) it’s actually needed.

The two methods impact your user’s experience differently. If you embed the media, all of it is instantly available as soon as your movie loads, guaranteeing a relatively seamless experience. The flip side of this is that embedding all that media can make your Flash (and swf) file much, much larger, making it take substantially longer to load in the first place. Generally, you only want to make users wait for content they’ve “asked for,” i.e. only load the necessary media until the user takes an action (clicking to another panel, for example) that requires more be loaded. The assumption is that users won’t really mind waiting for content they’ve indicated they want, but they’ll get annoyed if they have to wait for that 4-minute video interview to load if they’re only really interested in the overview. At the same time, a 3-second delay to hear a 10-second audio clip (especially if there are many of them) is frustrating, too. You’ll need to assess both the media you’re using and how it integrates into the overall interaction experience on a case-by-case basis to find the best solution each time. But you’ll also need to test frequently – and definitely on a web server: your users won’t have everything sitting on their desktop the way you do.

So, if you’ve determined that embedding your audio is the way to go, here are the steps for a setting up some basic play/pause functionality:

1. Import it! In Flash, choose File>>Import>>ImportToLibrary and import the mp3 you want to embed. It will appear in the Library panel under its file name, with a little speak icon next to it.

 


 

 

 

 

2. Export it! (for ActionScript) Right click on the sound in the Library panel and choose “Linkage…” from the dropdown. A window called “Linkage Properties” will pop up.

 

 

 

 

 

 

 

 

3. Click the “Export for ActionScript” check box (the third check “Export in first frame” will be selected automatically, this is fine). In the input box labeled “Class:”, give your sound a legal name – this means it can include no spaces, no periods, and cannot begin with a number. It’s ok that it won’t match what’s in the Library panel. You’ll want to copy the name you choose, as you’ll need it for the next step. Because my Library name began with a number I renamed mine to “ReginaSpektorFidelity”.

Now you need to need to describe your sound to Flash in code. To do this, we’re going to create a sound “object”, like so:

 

So what’s all this? When you use the keyword “var” (which stands for “variable”), you’re basically telling Flash to create a container in memory and label it so you can refer to it later. In this case, the label I gave the first container was “mySound”, and the second one is called “mySoundChannel”. But I can’t just say to the program “Hey, save some space”; I have to give it some idea of what type of thing is going to go in there. That’s the part after the colon: in the first case I’m saying “It’s going to be one of those sounds that I gave the name ‘ReginaSpektorFidelity'”; in the second case it’s going to be a SoundChannel (a special type defined by Flash – which we know because it turns blue). Finally, in the case of “mySound”, I’m actually going to tell it to put something in the container – in this case the sound itself. To tell the program to put something in a container, we use the equals (=) sign, and to tell it to make a copy of something in the Library, we use the “new” keyword.

Now that we’ve created our sound in code, we need to explain to our buttons how to control it. We’ll write event listeners (more on that here), and then we’ll put the code for controlling the sound inside them. For that, the code looks like this:

Some of this seems pretty obvious: when the user clicks “myPlay”, we tell “mySoundChannel” to play “mySound”; when the user clicks “myPause”, we tell “mySoundChannel” to stop. But what about the

if(mySoundChannel != null){

}

part? Look again at the second line of code, where we named the “mySoundChannel” container and told Flash that a SoundChannel was going to go in it. We didn’t actually put anything in that container. Nothing is in there until the line that says

mySoundChannel = mySound.play();

But what if someone accidentally clicks the pause button before they hit the play button? It doesn’t make any sense to try to “stop” a sound that isn’t there. So we check to make sure that the “mySoundChannel” container isn’t empty before we try to stop it. That’s what the “mySoundChannel != null” part checks for. “!=” is code for “does not equal” or “is not”. So in English what we’ve said is:

“If the ‘mySoundChannel’ container actually has a sound playing in it, stop that sound.”

In the previous event listener we use a similar statement to check if our sound is already playing, and stop it if it is. Otherwise, Flash will happily play the sound in an overlapping loop if the play button gets clicked more than once.

You may be asking yourself: ok, but why all this “SoundChannel” nonsense? Why can’t I just play my sound directly? The answer is: I have no #@?*$&! idea. It’s just the way Flash is set up. If  you ever find out, let me know :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>