Tim Murray

This user is yet to take control of their account and provide a biography. If you are the author of this article, please contact us via support AT actionscript DOT org.

View all articles by Tim Murray

Our approach to using the media controls is simple:

1. Create a new Flash MX file for the sound.
2. Import the sound to a layer and give it enough frames to fully play when streaming.
3. Create a progress animation (if you want to).
4. Drag our controller to a layer.
5. Save and publish the sound SWF file.
6. Create a new main Flash MX file for loading the sound SWF file.
7. Add the graphics you want and a bit of code to load the sound SWF file.
8. Save and publish the main SWF file.

I'm not going to go through steps 1, 2, and 3 in detail 'cos it's exactly the same as the stuff we did earlier in this tutorial. See sections "Start with some easy audio", "Putting the sound on the stage", and "Adding a sample graphic" for the specifics. Here's a quick recap of that material:

1. Create a new Flash MX file for the sound (this time name it "sound.fla") and save it.
2. Find a sound that you want to share with the world.
3. Import the sound to a layer named "media".
4. Make sure it is set to Sync: Stream.
5. Insert enough frames to stream and play the sound fully.
6. Create a progress animation that plays across the full extent of the sound.

For longer sound files, we found that the waveforms looked too complicated to be meaningful, so we replaced them with a couple of simple microphone images (one in colour and the other in duotone), and then tweened them like this:

That's it for the quick revision on how to prepare the sound with the animation. Now we're going to add the media controller.

Open your Library (F11) and add a folder named "utilities". This folder will keep any bits and pieces that we add to the file. It's always a good idea to keep your library organised on larger projects.

Make sure that your media-controller.fla file is open and that the Library for it is also open. Now drag the media-controller movie clip from the media-controller.fla file and drop it into the utilities folder in the sound.fla file.

That makes the sound.fla file go looking for the media-controls movie clip in the media-controller.swf file when it needs to use it. Close the Library for the media-controller.fla file.

Go back to the sound.fla file and create a new layer at the bottom of the layers and name it "controller". Select the controller layer. Drag the media-controls movie clip on to the stage. Position it to your liking. We also reduced the size of the stage so that our sound animation and controller just fit on it.

Save the sound.fla file and test it (Ctrl+Enter). You will find that you have a fully functioning audio player. Testing will also create the SWF file (sound.swf) for us.

Finally, we are going to build a main Flash MX file to host our sound file. When we split our Flash sounds into a main file, a sound file, and a controller file, we get several benefits:

1. The controller is downloaded once for any amount of media that needs a controller.
2. Our sound file is downloaded separately allowing us to accurately track its download progress and the controller may assume that the sound streams from the first frame to the last frame.
3. Our main file can still stream graphics and text without having to worry about the sound and its controls.

Create a new Flash MX file and save it as "test-audio.fla". The only important thing to do to the file is add an empty movie clip that you can load the sound.swf movie into and a bit of code to do the loading.

Use the "Insert > New Symbol..." command (Ctrl+F8) to create a new movie clip resource. Name it "movie-container". Create a new layer named "audio" and drag the container movie clip on to the stage where you would like your sound animation and controller to be loaded. Make sure that your movie-container movie clip has an Instance Name of "container" so that we may refer to it easily with ActionScript.

Now add an actions layer for the code to load our sound.swf file. This is the code to do it:

stop();
container.loadMovie("sound.swf");

We also added some text and colour to finish things off.

That's it! Save and publish. Nothing more to do (unless you would like to test it).

No. Don't be greedy. But if you are interested in other tutorials that we have written go check out "Yet Another Flash MX Loader", "Object VR In Flash MX", and "Flash MX Skip Intro" elsewhere on this site. You'll be glad you did!

In the online exhibition, we really wanted to deliver something that most people just couldn't get from going down to the Western Australian Museum in Perth, Western Australia, and checking out the "Western Australia: Land and People" exhibition in Hackett Hall. It was just fantastic that the curators of the physical exhibition could share their thoughts for the online version. Once all of the commentary was recorded by Darren Mok, we needed a quick and simple procedure for publishing all of the files in the online exhibition. This is it. Well, it's sort of what we used.

In our final implementation of this audio player in the "Western Australia: Land and People" site, we did the usual trick of loading all window, caption, and text elements as early as we could, then when we hit the sound, we used our loader to indicate progress. Because we can put the loader anywhere we like, we can make the best use of the streaming capabilities of Flash MX and just when things start to stall (when it hits the audio) we whack in a loader so that the site visitor still sees something happening. And when the audio is playing we have another progress bar to let them know how far through the sample they are.

The audio player we developed here is more like the video player we developed for the Western Australian Museum. It's a bit more complicated, a lot more flexible, and better for reuse.

Hmm. Video player. I think that will be the next tutorial off the ranks!

See you soon.

The Glasson Murray Group, Pty. Ltd. creates and presents high quality and engaging content for delivery across a range of media. They designed and developed the virtual exhibition in conjunction with the Western Australian Museum, producing a truly compelling and unparalleled presentation.

http://www.gmg.com.au/

Materials are copyrighted and are protected by worldwide copyright laws and treaty provisions. Copyright law in Australia is contained in the Copyright Act 1968 (Cth) and in decisions of courts, with further amendments in the Copyright Amendment (Moral Rights) Act 2000. They may not be copied, reproduced, modified, published, uploaded, posted, transmitted, or distributed in any way, without GMG's prior written permission. Except as expressly provided herein, GMG and its suppliers do not grant any express or implied right to you under any patents, copyrights, trademarks, or trade secret information. Other rights may be granted to you by GMG in writing or incorporated elsewhere in the Materials.

© 2003 Glasson Murray Group Pty Ltd (ACN 098 651 542), Western Australia. All rights reserved.