Making A Soundboard With Flash CS4

September 21, 2011 Flash CS4, Tutorials Comment

It’s actually pretty easy to create a soundboard using Adobe’s Flash Cs4. Ill walk you through the steps. I am going to create a soundboard of the best President of all time. Obama. (Okay, I won’t get political, but I actually think he’s the worst President of all time.) Try it out. Click on the words below to see how the soundboard works.

[swfobj src=”http://www.jacobrichey.com/wp-content/uploads/2011/09/OBAMA1.swf” width=”600″ height=”400″ align=”none” allowfullscreen=”false”]

Obama Soundboard Tutorial

[/swfobj]

 

Step 1: Download mp3’s of Obama and edit which sound clips you plan on using in the soundboard. Use free software like Audacity for the best results. You can also easily edit the sound clips within Audacity. Save each mp3 clip on your desktop.

Step 2: Open up Flash and create a document that is 600 pixels wide 400 height. (You can use whatever dimensions you want.)

Step 3: Go to File -> Import -> Import to library¬† Upload all the mp3’s you want to use in the soundboard. Also, upload any images you wish to include. I found a pic of Obama that I will use as a background for the soundboard.

Step 4: Drag the image of Obama over you soundboard document. You may need to re-size it to get the dimensions just right. Once you have him properly placed in the soundboard, lock the first layer and create a new one.

TIP – You can always press control/command enter to view how your soundboard is coming together.

Step 5: Create a layer 2 and make a title for the soundboard “Pres. Obama Soundboard. Click on the word to activate it” Say whatever you like. Put the name of your website in the bottom right corner. Now lock layer 2.

Step 6: Create a 3rd layer. This is where your words are going to sit. Push T and get your text tool ready to create your first active sound clip.

Step 7: Choose your first mp3 and type what it says. In this case I’ll start with Obama saying “Yeah”. Type out Yeah with the text tool and then push V. Click on the word you just typed and a blue box will appear around the word.

Step 8: Right click on “Yeah” and convert it to a symbol. You want to make sure the type is set to button and name it “Yeah”. Click ok.

Step 9: Now that it’s a symbol double click it and it will bring you into the symbol. You’ll now see where it says up, over, down, hit. Highlight over, down and hit.

Step 10: Now right click and it will says convert to keyframes. Convert it and then highlight the down key. Now you will be telling the down key to activate the “Yeah” mp3 sound clip.

Step 11: Click on your properties tab and you’ll see where it says sound, Name. Click name and a list of your mp3’s will pop up. Choose “Yeah”. Now click out and go back to scene 1. Try it out and make sure it works. Push control/command enter and you’ll be able to test it. It works. Now repeat steps 7-11 until all of your mp3’s are added.

Step 12: Now we’ll make a button that says “Stop All Sounds”. This is handy if you want to quickly stop all the sound.

Step 13: Create the words “Stop All Sounds”. Right click and create it into a new symbol. This time make “Stop All Sounds” a movie clip.

Step 14: Double click into “Stop All Sounds” and click on layer 1.¬† Now open the actions – frame and put the following code into it. This code will stop all sounds when you click on it.

this.addEventListener(MouseEvent.MOUSE_DOWN,f);

function f(e:Event):void{

SoundMixer.stopAll();

}

Step 15: Now try it out and it should work. Save it and then you’ll export it into a swf movie clip. You can now upload it to your site or do whatever you want to do.

If there is anything that doesn’t make sense or you don’t understand something, let me know and I’ll try to clarify.

HAVE FUN!

Written by Jake