Flex | Flash | Air | AS3
Build audio buttons
April 3rd, 2009 in FlashIn this tutorial, we will learn how to create buttons controllers that play, pause or stop mp3 sounds.
1. Create a new flash file (ActionScript 3.0) and save it as audio_buttons.fla.
2. Rename “layer 1″ to “stop btn”. Create a new layer above and call it “play/pause btn”.
Create one more layer at the top and name it “actions” and lock this layer.
3. Select the “stop btn” layer and create create the graphic of a stop button. Then convert it to a movie clip by hitting F8. Give it an instance name of stop_mc.
You can now lock this layer as we have finished with it.
4. Select “the play/pause btn” layer and create the graphic of a play button. Convert it to a movie clip (F8) and give it an instance name of pp_mc (pp=playpause).
5. Double click on the movie clip to edit it.
On the timeline, select frame 2 and insert a blank keyframe. On the stage, create a pause button graphic the same width and height of the play button and at the same position.
Add an “actions” layer and on the two first frames put a stop() in the actions panel.
6. Return to Scene 1. We can now start to add the code. Select the layer “actions” and hit F9 to open the actions panel.
7. First we declare a String variable that stores the path of the mp3, a sound object which will load the sound and a SoundChannel object that will be used to control the sound :
var pathSong : String = "song.mp3"; var song:Sound = new Sound(); var channel:SoundChannel = new SoundChannel(); song.load(new URLRequestpath(Song));
8. Next we add listeners to our buttons and set their buttonMode to true.
stop_mc.buttonMode = true; pp_mc.buttonMode = true; pp_mc.addEventListener(MouseEvent.CLICK, playPauseMusic); stop_mc.addEventListener(MouseEvent.CLICK, stopMusic);
9. Then we need to create the functions that will handle the events. First we declare 2 variables, one that keeps track of the position of the sound and the other which holds the state of the player.
var isPlaying:Boolean = false ; var songPosition:Number = 0 ;
10. Then we write the functions
function playPauseMusic(evt:MouseEvent):void
{
if(!isPlaying)
{
pp_mc.gotoAndStop(2);
channel = song.play(songPosition);
isPlaying = true;
channel.addEventListener(Event.SOUND_COMPLETE,songFinished);
}else
{
pp_mc.gotoAndStop(1);
songPosition = channel.position;
channel.stop();
isPlaying = false;
}
}
function songFinished(evt: Event):void
{
songPosition = 0;
pp_mc.gotoAndStop(1);
isPlaying = false;
}
Note that we add a listener for the SOUND_COMPLETE event so that when the music is finished, the user can listen to it again.
And finally :
function stopMusic(evt:MouseEvent):void
{
songPosition = 0;
channel.stop();
pp_mc.gotoAndStop(1);
isPlaying = false;
}
11. The final code looks like this :
import flash.events.Event
import flash.events.MouseEvent;
var isPlaying:Boolean = false ;
var songPosition:Number = 0 ;
var pathSong : String = "song.mp3";
var song:Sound = new Sound();
var channel:SoundChannel = new SoundChannel();
song.load(new URLRequest(pathSong));
stop_mc.buttonMode = true;
pp_mc.buttonMode = true;
pp_mc.addEventListener(MouseEvent.CLICK, playPauseMusic);
stop_mc.addEventListener(MouseEvent.CLICK, stopMusic);
function playPauseMusic(evt:MouseEvent):void
{
if(!isPlaying)
{
pp_mc.gotoAndStop(2);
channel = song.play(songPosition);
isPlaying = true;
channel.addEventListener(Event.SOUND_COMPLETE,songFinished);
}else
{
pp_mc.gotoAndStop(1);
songPosition = channel.position;
channel.stop();
isPlaying = false;
}
}
function songFinished(evt: Event):void
{
songPosition = 0;
pp_mc.gotoAndStop(1);
isPlaying = false;
}
function stopMusic(evt:MouseEvent):void
{
songPosition = 0;
channel.stop();
pp_mc.gotoAndStop(1);
isPlaying = false;
}
12. To test the player, change the pathSong variable to the path of a mp3 of yours.
Test your movie (Ctrl + Enter or Cmd + Enter) to see it in action.
Jun 12th, 2009
Thanks, this is a great tutorial for someone that isn’t a frequent flash user
Can you please tell me how to set it on auto/continuous play, if isn’t to much trouble ?
Jun 28th, 2009
Great Tutorial haven been added to our website
Jul 30th, 2009
It has been a real late night……thank you for writing in such a way that it penetrated my thick skull after many hours.
Cheers,
d
Aug 9th, 2009
how would I get this to autoplay the mp3 on load.
Aug 25th, 2009
“how would I get this to autoplay the mp3 on load.” yeah! how to autoplay on website load?
Sep 16th, 2009
sorry , it dosnt, work your tut, show this error 2068, i hope you tell why?
Sep 25th, 2009
It’s exactly what I’m looking for. Thanks a lot.
Oct 1st, 2009
[...] Build audio buttons | RiaCodes creating audio buttons in flash (tags: audio flash as3) [...]
Nov 5th, 2009
thanks for the tutorial,
is their a way to call the mp3 files from the html code (egg: JS) rather then having the calls to the MP3 made from the source?
thanks