Creating a Basic Audio Box In Flash

This tutorial will teach you how to create an extremely simple music box in Flash with very little scripting. You can use this music box in your blog, in a forum, a portfolio, personal webpage, etc. I used this in my blog, I think that it gives it this atmospheric feeling to the blog, and it's cool to have one anyway! Our music box is going to be extremely basic, will contain two buttons and two frames: Play and Stop. You press play, the music starts, press stop and the music stops as well.

Before you start, make sure that you have an MP3 file that you can us for this movie. When you're ready, create a new flash document with a width of 150px and a height of 50px, your interface should be like this. As we have stated earlier, our movie is going to contain two frames only, so lets start off with the first one. This frame is going to appear when the music is not playing with the button 'Play' visible so the user can start playing the music.
We'll make our button first, go through Window>Components to access the Components Panel, drag a copy of the Button component from the User Interface category. Components are ready-made movieclips with certain functionalities, this one we are using is a button. You can change the button label by accessing the Properties Inspector and then opening the Parameters tab, name your button 'Play'. We will have to give our button an 'Instance Name' to be able to refer to and control this button via ActionScript. Assign the instance name play_btn to your button.

Create a new blank keyframe in Frame 2 by right-clicking the second frame and then clicking 'Insert Blank Keyframe. Now repeat the previous step to create a button labeled Stop and assign the instance name stop_btn to it.

Alright, it is now time for the juicy part. Create a new layer and call it 'Actions', Make sure that you have blank keyframes on both of Frame 1 and Frame 2 (Right-click and then click Insert Blank Keyframe). Now access the Actions panel by right-clicking the first frame and then clicking on Actions. You will then need to paste the following code:

stop();
stopAllSounds();
play_btn.onRelease = function(){
gotoAndStop(2);
}

We told the movie to stop at this frame and not go to the second one, then we told it to stop any sound playing. The last two lines are a command for our Play button to go to and stop at the second frame when the user releases his click on the button.
We will now add our action to the second frame, click on that frame and access the Actions panel and then paste the following code:

stop();
stop_btn.onRelease= function (){
gotoAndStop(1);
}

The first line makes sure that the movie stops at this frame when it reaches it, the rest is a command for our stop button to go and stop at the first frame when someone clicks it.
I'm sure that you are wondering about what happened to our music, we are going to add it now. Create a new and final layer on the timeline and call it 'Music'. Go through File>Import>Import to Stage.. and import your MP3 file.

We will have to attach our sound to a frame for to play when that frame is displayed on the screen. The trick is to attach it to the second frame. Create a blank keyframe in Frame 2 of the Music layer, access the Properties Inspector to edit the frame's properties. The right side of the panel should have the sound options. Simply select your audio file from there. You can set the number of times the audio gets repeated or you can alternatively make it loop forever by clicking on Repeat and selecting Loop instead.

This should do it, press Ctrl+Enter to test your music box.

Extra

You can make the sound file play automatically by switching the contents and actions of both frames. This way when the movie loads the music starts instantly making it perfect for personal pages and blogs. Here is an example SWF.
This concludes our tutorial, I hope that you learnt something new from this tutorial, feel free to email me on abaddon_zero@hotmail.com for any comments or questions. You can alternatively post at the Oman3D Forum.
- End of tutorial.