Thursday, 19 June 2008

Create a Soundboard

This flash tutorial will teach you how to create a basic sound board. There are many ways to create a sound board but I will show you the most straight forward method. A sound board is basically a collection of buttons which play audio clips when a button is clicked. Examples of sound boards can be found at soundboards.com and ebaumsworld.com

Of course, a sound board needs sound or audio. You can create your own audio files by recording samples of yourself, friends, and even audio clips from dvds or the television. Just make sure you have permission before recording your audio clips. If you don’t want to record your own audio files you can also download your audio files from the internet.

This tutorial requires some knowledge of creating basic buttons and is created in Actionscript 2.0.

Create a sound board

Step 1

Open a new Flash document.
Select an appropriate stage size and background colour.
Import all your audio files in the library by selecting File > Import > Import to library then select all your audio files and click ok.


Step 2

Using the rectangle tool create your rectangle button shapes on the stage. Use the correct number of buttons on the stage relative to the number of audio clips you have. Once, you have created all your buttons on the stage. Your stage should look something like below. I have also included headings such as greetings, questions, replies, statement etc. You may add these headings if you wish.



Now convert each of your rectangle shapes into a symbol by pressing F8. Choose an appropriate name, check button and click ok.


Step 3

Select the Selection tool (V) and double click on one of the buttons to enter the button’s timeline. On the timeline you should now see four states which can be changed to whatever colours you wish. If you don’t know how to changes the states checkout this tutorial.

On the timeline insert a new layer called “Sound” and then insert a key frame (F6) on the down state.

Select the down state then go to the properties tab at the bottom of the screen. And change the sound drop down menu to your corresponding audio file.

UPDATE - The properties panel might be a different location depending on what version of Flash you are using.



Your timeline should now look like below after you have selected a sound:



Now repeat step 3 for all your buttons.


Step 4

Select the text tool (t) and type “Press the spacebar to stop sound” somewhere on the stage. On the timeline insert a new layer called “actions” right click on the first frame and select Actions. And add the following code:

_root.onEnterFrame = function() {
if (Key.isDown(Key.SPACE)) {
stopAllSounds();
}
}

This code will stop the currently playing sound.

**You could have created a stop button instead of the spacebar to the stop the current sound.


Step 5


Test your movie clip Ctrl + enter. Click the individual buttons and a sound should play.



You should now have a soundboard.

6 comments:

bigpoppaE 17 February 2009 at 13:35  

Is there actionscript that would cause the other sounds to stop when you press any of the other buttons?

Would it be in the vicinity of:

stop()
buttonname_btn.onPress = function(){
stopAllSounds();
}

iliketo 17 February 2009 at 16:35  

@bigpoppe

Checkout step 4 and yes, the stopAllSound() can be used to stop sound when you press other buttons.

Matt Edwards 5 November 2009 at 10:20  

Is there a way to set up a soundboard so that the user would "program" a sequence of sounds and then press play and hear the result?

iliketo 10 November 2009 at 09:14  

@Matt Edwards

You could try pushing the sounds into an array and then play the sounds in the array.

Bluesoju 13 December 2009 at 02:48  

I'm using adobe flash cs4 and I tried to make a new layer for the sound, and went to properties but there is no menu like that. The only way I could get it to work was by dragging the sound onto the button, but if I make the sound layer, then no sound plays at all. If I just drag it onto layer 1, then it will play. I'm a bit confused why that's happening and it would be nice if you cleared up step 3 a little bit. Other tutorials told me I must put a keyframe on "down" and "hit"

iliketo 13 December 2009 at 10:23  

@Bluesoju

I have rewritten step 3, so hopefully it should make more sense.

Your timeline for step 3 should look like the image here. As you can see there is a new layer called ‘sounds’ above layer 1, and a key frame on the down state.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP