Return to Kroll Design home page

Flash Tutorials (with .FLA files included)

 
« Return

ActionScript 3

Play sound using external files

This example plays MP3 files which are not embedded in the Flash file, but which are stored in an external folder on the server. However, the song titles ARE in the ActionScript, so to make this player truly stand-alone, you'd need to remove the hardcoded list of song titles and put them in an XML file for example. I wanted the emphasis of this example to be the commands relating to control of playback and the user interface (the buttons). When a button is clicked on, the corresponding song plays and the button turns into a Stop button. If the song is permitted to play through to the end, the button at that point turns back into a Play button. If the user clicks on the Stop button before the end of the song, playback will stop and the button will turn back into a Play button. If user clicks on the button for another song while the current song is playing, the current song will stop and the new song will start playing.

Download the FLA file

// ActionScript 3.0 is no longer interpreted like ActionScript 2.0 was and like
// JavaScript is -- AS 3.0 is compiled into byte code like Java, so that it 
// performs a lot faster at runtime.  This is why AS 2.0's "eval" command is 
// no longer available.  So instead of doing a loop to build instance names
// song1_mc.btnSquare_mc thru song7_mc.btnSquare_mc, I'll just hardcode the names.


// Initially hide the square ("stop button" symbol) in each button:
   song1_mc.btnSquare_mc.visible = false;
   song2_mc.btnSquare_mc.visible = false;
   song3_mc.btnSquare_mc.visible = false;
   song4_mc.btnSquare_mc.visible = false;
   song5_mc.btnSquare_mc.visible = false;
   song6_mc.btnSquare_mc.visible = false;
   song7_mc.btnSquare_mc.visible = false;
	
	
// Hide the button glow that will be shown when a song is playing:	 
	 song1_mc.buttonOnGlow_mc.visible = false;
	 song2_mc.buttonOnGlow_mc.visible = false;
	 song3_mc.buttonOnGlow_mc.visible = false;
	 song4_mc.buttonOnGlow_mc.visible = false;
	 song5_mc.buttonOnGlow_mc.visible = false;
	 song6_mc.buttonOnGlow_mc.visible = false;
	 song7_mc.buttonOnGlow_mc.visible = false;
	
	
// Give the movie clip buttons a hand cursor so that when moused over the cursor 
// looks the same as it does for true buttons:
   song1_mc.buttonMode = true;
   song2_mc.buttonMode = true;
   song3_mc.buttonMode = true;
   song4_mc.buttonMode = true;
   song5_mc.buttonMode = true;
   song6_mc.buttonMode = true;
   song7_mc.buttonMode = true;


// Add a listener to each button, to detect when it's moused over:
   song1_mc.addEventListener(MouseEvent.MOUSE_OVER, showMouseOverEffect);
   song2_mc.addEventListener(MouseEvent.MOUSE_OVER, showMouseOverEffect);
   song3_mc.addEventListener(MouseEvent.MOUSE_OVER, showMouseOverEffect);
   song4_mc.addEventListener(MouseEvent.MOUSE_OVER, showMouseOverEffect);
   song5_mc.addEventListener(MouseEvent.MOUSE_OVER, showMouseOverEffect);
   song6_mc.addEventListener(MouseEvent.MOUSE_OVER, showMouseOverEffect);
   song7_mc.addEventListener(MouseEvent.MOUSE_OVER, showMouseOverEffect);

   function showMouseOverEffect(myEvent:MouseEvent)
   {
     var currentButtonClip:MovieClip = MovieClip(myEvent.currentTarget);
	   currentButtonClip.gotoAndStop("over");
   }


// Add a listener to each button, to detect when it's moused away from:
   song1_mc.addEventListener(MouseEvent.MOUSE_OUT, showMouseOutEffect);
   song2_mc.addEventListener(MouseEvent.MOUSE_OUT, showMouseOutEffect);
   song3_mc.addEventListener(MouseEvent.MOUSE_OUT, showMouseOutEffect);
   song4_mc.addEventListener(MouseEvent.MOUSE_OUT, showMouseOutEffect);
   song5_mc.addEventListener(MouseEvent.MOUSE_OUT, showMouseOutEffect);
   song6_mc.addEventListener(MouseEvent.MOUSE_OUT, showMouseOutEffect);
   song7_mc.addEventListener(MouseEvent.MOUSE_OUT, showMouseOutEffect);

   function showMouseOutEffect(myEvent:MouseEvent)
   {
     var currentButtonClip:MovieClip = MovieClip(myEvent.currentTarget);
	   currentButtonClip.gotoAndStop("up");
   }


// Add a listener to each button, to detect when button is pressed down:
   song1_mc.addEventListener(MouseEvent.MOUSE_DOWN, showMouseDownEffect);
   song2_mc.addEventListener(MouseEvent.MOUSE_DOWN, showMouseDownEffect);
   song3_mc.addEventListener(MouseEvent.MOUSE_DOWN, showMouseDownEffect);
   song4_mc.addEventListener(MouseEvent.MOUSE_DOWN, showMouseDownEffect);
   song5_mc.addEventListener(MouseEvent.MOUSE_DOWN, showMouseDownEffect);
   song6_mc.addEventListener(MouseEvent.MOUSE_DOWN, showMouseDownEffect);
   song7_mc.addEventListener(MouseEvent.MOUSE_DOWN, showMouseDownEffect);

   function showMouseDownEffect(myEvent:MouseEvent)
   {
     var currentButtonClip:MovieClip = MovieClip(myEvent.currentTarget);
	   currentButtonClip.gotoAndStop("down");
   }


// Add a listener to each button, to detect when button is released:
   song1_mc.addEventListener(MouseEvent.MOUSE_UP, showMouseOverEffect);
   song2_mc.addEventListener(MouseEvent.MOUSE_UP, showMouseOverEffect);
   song3_mc.addEventListener(MouseEvent.MOUSE_UP, showMouseOverEffect);
   song4_mc.addEventListener(MouseEvent.MOUSE_UP, showMouseOverEffect);
   song5_mc.addEventListener(MouseEvent.MOUSE_UP, showMouseOverEffect);
   song6_mc.addEventListener(MouseEvent.MOUSE_UP, showMouseOverEffect);
   song7_mc.addEventListener(MouseEvent.MOUSE_UP, showMouseOverEffect);


// Add a listener to each button, to detect when it's clicked:
   song1_mc.addEventListener(MouseEvent.CLICK, playExternalSongFile);
   song2_mc.addEventListener(MouseEvent.CLICK, playExternalSongFile);
   song3_mc.addEventListener(MouseEvent.CLICK, playExternalSongFile);
   song4_mc.addEventListener(MouseEvent.CLICK, playExternalSongFile);
   song5_mc.addEventListener(MouseEvent.CLICK, playExternalSongFile);
   song6_mc.addEventListener(MouseEvent.CLICK, playExternalSongFile);
   song7_mc.addEventListener(MouseEvent.CLICK, playExternalSongFile);


// Load external songs so they are ready: 
   var sound1:Sound = new Sound();
   var sound2:Sound = new Sound();
   var sound3:Sound = new Sound();
   var sound4:Sound = new Sound();
   var sound5:Sound = new Sound();
   var sound6:Sound = new Sound();
   var sound7:Sound = new Sound();

	 // for publishing:
   var song1:URLRequest = new URLRequest("movies/sounds/music/BigBillBroonzy-BabyPleaseDontGo1.mp3");
   var song2:URLRequest = new URLRequest("movies/sounds/music/fmcr-02.mp3");
   var song3:URLRequest = new URLRequest("movies/sounds/music/ScottJoplin-TheEntertainer1902.mp3");
   var song4:URLRequest = new URLRequest("movies/sounds/music/edmeeker-TakeMeOuttotheBallGame.mp3");
   var song5:URLRequest = new URLRequest("movies/sounds/music/MaRainey-StackOLeeBlues.mp3");
   var song6:URLRequest = new URLRequest("movies/sounds/music/LouisArmstrong-OldManMose.mp3");
   var song7:URLRequest = new URLRequest("movies/sounds/music/dukeellington-BlackBeauty.mp3");
	 	 
	 /* 
	 // for testing:
	 var song1:URLRequest = new URLRequest("sounds/music/BigBillBroonzy-BabyPleaseDontGo1.mp3");
   var song2:URLRequest = new URLRequest("sounds/music/fmcr-02.mp3");
   var song3:URLRequest = new URLRequest("sounds/music/ScottJoplin-TheEntertainer1902.mp3");
   var song4:URLRequest = new URLRequest("sounds/music/edmeeker-TakeMeOuttotheBallGame.mp3");
   var song5:URLRequest = new URLRequest("sounds/music/MaRainey-StackOLeeBlues.mp3");
   var song6:URLRequest = new URLRequest("sounds/music/LouisArmstrong-OldManMose.mp3");
   var song7:URLRequest = new URLRequest("sounds/music/dukeellington-BlackBeauty.mp3");
	 */
             
   sound1.load(song1);
   sound2.load(song2);
   sound3.load(song3);
   sound4.load(song4);
   sound5.load(song5);
   sound6.load(song6);
   sound7.load(song7);


// Initialize a dummy clip since something must exist for priorButtonClip,
// even before the user has had a chance to click a button:
   var priorButtonClip:MovieClip = MovieClip(dummyClip_mc);


// ==============================================================================
// This function is called each time user clicks a button:
   function playExternalSongFile(myEvent:MouseEvent) {
	 SoundMixer.stopAll(); // stop all currently playing sounds
	 var channel:SoundChannel;

// Declare a Movie Clip variable called clickedButtonClip, and have it point
// to Flash's system variable "currentTarget", which is a reference to 
// whatever button the user just clicked:
	 var clickedButtonClip:MovieClip = MovieClip(myEvent.currentTarget);	
	
// For whatever button the user clicked, replace the "play" symbol of a triangle 
// with a "stop" symbol of a square, and add a glow,
// to give the user a visual clue that they
// can click on this same button to stop playback of the song that's now playing:
	 clickedButtonClip.btnTriangle_mc.visible = false;
	 clickedButtonClip.btnSquare_mc.visible = true;
	 clickedButtonClip.buttonOnGlow_mc.visible = true;		 
	
// Reset the look of the prior button:	
	 priorButtonClip.btnSquare_mc.visible = false;
	 priorButtonClip.btnTriangle_mc.visible = true;
	 priorButtonClip.buttonOnGlow_mc.visible = false;	
	
// The internal value for "channel" is different each time, it has a unique value
// for each play of each song, that's why you have to have addEventListener for SOUND_COMPLETE	
// in each branch of the IF statement below: 
	
	 if (clickedButtonClip == priorButtonClip)
	 {			
	   priorButtonClip = dummyClip_mc;
		 trace("don't play any songs -- the same button was clicked");
	 }			
	 else if (clickedButtonClip.name == "song1_mc")
	 { priorButtonClip = song1_mc;
	   
	   channel = sound1.play();
		 listenForSongEnd();
	 }
	 else if (clickedButtonClip.name == "song2_mc")
	 { priorButtonClip = song2_mc;
	   channel = sound2.play();
		 listenForSongEnd();	
	 }
	 else if (clickedButtonClip.name == "song3_mc")
	 { priorButtonClip = song3_mc;
	   channel = sound3.play();
		 listenForSongEnd();	
	 }
	 else if (clickedButtonClip.name == "song4_mc")
	 { priorButtonClip = song4_mc;
	   channel = sound4.play();
		 listenForSongEnd();	
	 }
	 else if (clickedButtonClip.name == "song5_mc")
	 { priorButtonClip = song5_mc;
	   channel = sound5.play();
		 listenForSongEnd();	
	 }
	 else if (clickedButtonClip.name == "song6_mc")
	 { priorButtonClip = song6_mc;
	   channel = sound6.play();
		 listenForSongEnd();	
	 }
	 else if (clickedButtonClip.name == "song7_mc")
	 { priorButtonClip = song7_mc;	
	   channel = sound7.play();
	   listenForSongEnd();	
	 }
	
	
   function listenForSongEnd()
	 {
		 channel.addEventListener(Event.SOUND_COMPLETE, songDonePlaying);	
	 } // end of listenForSongEnd function			
	
		
// If I move the songDonePlaying function outside of the playExternalSongFile function,
// it doesn't work, because it doesn't know what clickedButtonClip is.
   function songDonePlaying()
	 {
		 trace("song is done playing");
		 clickedButtonClip.btnTriangle_mc.visible = true;
	   clickedButtonClip.btnSquare_mc.visible = false;
		 clickedButtonClip.buttonOnGlow_mc.visible = false;		
		 priorButtonClip = dummyClip_mc;
	 } // end of songDonePlaying function			
		
} // end of playExternalSongFile function


 
« Return


©2012 Kroll Design    info@KrollDesign.net    781.910.3694
Last modified: 12/31/1969 7:00 PM