A little later on in this tutorial we will be importing sound resources, so now would probably be a good time to have a quick look at how to import audio into Flash MX. You will find it in "Using Flash > Adding Sound > Importing sounds" in the contents of your online help. In fact, the whole "Adding Sound" section is probably worth at least a quick glance!

Buttons will play a big part in our media controller. See "Using Flash > Using Symbols, Instances, and Library Assets > Creating buttons" in your help file for more info. Ah, what the heck... spoil yourself: read all of the "Using Symbols, Instances, and Library Assets" section.

Since we will be sharing our controller between all of our audio files, a glance at "shared libraries" in your online Flash MX documentation would be beneficial. You will find it in the "Using Flash > Using Symbols, Instances, and Library Assets > Using shared library assets" in the contents of your online help.

We will also be animating a box-shaped mask. This part of the tutorial is optional, but if you're interested you may want to check out "Using Flash > Creating Animation > tweening shapes" and "Using Flash > Creating Animation > Using mask layers".

Our first task is to get some audio in to Flash and have it play.

Create a new FLA file. Save it as "test.fla".

Rename "Layer 1" to "media".

Import your audio by selecting "File > Import..." (Ctrl+R). Select your favourite audio file in the Import dialog. If you now open your Library window (F11), you will see your imported audio file ready for use. Well, it's nearly ready... let's check out the Sound Properties.

Double-click on the speaker icon in the Library next to the sound file that you just imported. You should see this dialog:

The Compression combo box contains a list of all of the different types of compression settings that Flash can use. By playing with these settings, you can get a feeling for the final file size you will end up with.

And clicking on the Test button will let you hear what the compression will do to the sound. Click on OK when you have it to your liking.

Try it now. I'm going to make a coffee. I'll be right back.

Ahh, that's better. Good coffee.

To get sound to play correctly for this tutorial we need to add sound to a layer and set it up to stream. This means that the whole sound does not need to download before it starts to play.

Select the media layer. At the bottom of your Flash MX application you will see your Properties window. Drop down the Sound combo and you should see the sound file you have imported. Select your sound and make sure that the Sync combo is set to Stream. This means that your sound will be downloaded and played frame by frame. Don't worry. The sound comes out sounding nice and smooth, it's just that you don't have to wait for the whole sound to download before you can start listening to it. You also have the added bonus of being able to jump to any frame (or position) in the sound by using a gotoAndPlay command.

Right now, though, your media layer will probably have only one frame. This is bad when we are trying to stream the sound. We need enough frames to play all of it. Right-click on the media layer timeline somewhere to the right of frame 1. Select Insert Frame. You should see your sound wave drawn in the frames that you have created. Keep inserting frames until you can see all of your sound.

Delete any extra frames that have no sound in them so that we don't end up with silent frames at the end of the sound.

Now if you click and drag the playhead (pinky-red rectangle in the timeline) you should hear the sound you imported. It will sound jerky here.

Test your movie (Ctrl+Enter) to hear your sound correctly.

It's great to hear a sound, but we're going to add an image of the waveform for people to look at while the sound plays. This gives a visual indication of what the audio will sound like. We will look at a simple method for generating a waveform and add it to our sounds.

This section is not critical to developing the audio controllers, so feel free to skip it if you are not really interested. You can animate anything you like over the duration of the sound. Feel free to experiment!

In the Library, when you have your sound selected, the wave form for the sound is shown. My sound is stereo; yours may be mono (you may only see one wave). If you make sure that your stage is shown at 100%, you can resize the Library window (and the area that the waveform is shown in) to a size that you would like to show the wave at.

Do a Print Screen to copy the screen to the clipboard. Start your favourite paint program. Paste in the image of the screen. Crop the waveform to an appropriate size. Adjust the colours of your wave so that it is a black wave on a white background. Save your waveform image as a GIF with white as your background transparent colour (so that we can easily tint the waveform later). I saved it as sample.gif.

This is what I ended up with for my audio file:

Import your GIF into the Library ("File > Import to Library..."). Don't do the Ctrl+R thing this time. We don't want the image on the stage yet.

Now create two new layers above the media layer. Name them "sample grey" and "sample black". You should now have this in your timeline:

What we are going to do here is have a greyed-out waveform of our sample which will slowly turn black as the sample plays.

Select the sample grey layer and drag your GIF bitmap on to the stage. Put it roughly in the centre. Done that? Good. In order to tint the GIF, we first need to convert it to a graphic. So, with the GIF bitmap selected on the stage, do an "Insert > Convert to Symbol..." command (F8), name it "sample" and give it a Graphic behaviour. Like this:

Down in your Properties panel you should now see a Color combo box. Set this to Tint and pick a colour and a percent to tint. I chose grey at 100%. (I did name the layer "sample grey", but you may choose anything you like!)

With your sample symbol still selected (sorry for the alliteration), do an "Edit > Copy" command (Ctrl+C), select the "sample black" layer, and do an "Edit > Paste in Place" command (Ctrl+Shift+V). This will put a copy of the waveform sample symbol in the same position that we had in the "sample grey" layer. Set the Color of the newly pasted sample to a black Tint (or set the Color to None, which is what I did).

We need these GIF bitmaps to line up so that when we reveal the black sample using a mask, we don't get the waveform wobbling. Doing a Paste in Place solves this nicely, but you could also do it with your Align panel.