Part 3: Using the media player
Our approach to using the media controls is simple:
- Create a new Flash MX file for the sound.
- Import the sound to a layer and give it enough frames to fully play when streaming.
- Create a progress animation (if you want to).
- Drag our controller to a layer.
- Save and publish the sound SWF file.
- Create a new main Flash MX file for loading the sound SWF file.
- Add the graphics you want and a bit of code to load the sound SWF file.
- 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:
- Create a new Flash MX file for the sound (this time name it "sound.fla") and save it.
- Find a sound that you want to share with the world.
- Import the sound to a layer named "media".
- Make sure it is set to Sync: Stream.
- Insert enough frames to stream and play the sound fully.
- 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:
- The controller is downloaded once for any amount of media that needs a controller.
- 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.
- 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:
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).
|» Level Advanced|
Rating: 8 Votes: 63
|Tim is a co-director of the Glasson Murray Group, providing quality graphic design, illustration, 3D visualisation, interactive environments, virtual reality, multimedia and website services.|
|Download the files used in this tutorial.|
|Download (2157 kb)|
|More help? Search our boards for quick answers!|