Thursday 14 August 2008

Playing Sound with your Computer Keyboard - Flash

I had a chat with one of my old Multimedia students on Facebook today. I pointed him to my Ukulele Tuner and he told me that he was currently building a Flash based interactive drum kit (he is a drummer after all).

He had already produced a prototype that worked by clicking each drum with the mouse, but was not happy with the inability to play the drums properly on it. To play drums you need to be able to switch instrument quickly and at times strike two instruments at the same time. You can't do this with a single mouse and clicking on each drum. It's like playing the drums with one stick.

He had the idea of allowing the user to play the drums using the keys on their computer keyboard, but was unsure how to proceed. Unable to leave teacher mode with a challenge like this I put together the following code.

Stage 1

Create a new AS2 Flash file and insert the following code into the first keyframe:

//This attaches the sound for drum 1, make sure you did the linkage thing in the library

var sound1:Sound = new Sound();
sound1.attachSound("drum_1");

//This attaches the sound for drum 2, make sure you did the linkage thing in the library

var sound2:Sound = new Sound();
sound2.attachSound("drum_2");

//This code listens out for the user to press a key, then, depending on which key is pressed will trigger one of the sounds attached above.

var myDrumKeyListener:Object = new Object();
myDrumKeyListener.onKeyDown = function () {
if (Key.getCode()==65) {
sound1.start();
} else if (Key.getCode()==66) {
sound2.start();
}
}
Key.addListener(myDrumKeyListener);

Stage 2

You will notice a bit where it says:

(Key.getCode()==

and then there is a number, this number is the keycode for the key that plays the sound. You can find a list of keycodes online here:

http://livedocs.adobe.com/flash/mx2004/main_7_2/wwhelp/wwhimpl/common/html/wwhelp.htm?context=Flash_MX_2004&file=00001113.html

Stage 3

Now you need to add the actual sound files. Do this by importing the sounds into the Library. Then right click the first sound and choose "Linkage" from the menu. Select the "Export for Actionscript" and "Export in First Frame" options. Then make sure you give the sound an identifier. This is the name by which the sound will be referenced in the actionscript above. I called the sound for the first drum "drum_1". Then in the actionscript it is referenced as follows:

var sound1:Sound = new Sound();
sound1.attachSound("drum_1");

If you put a different name as the identifier, make sure you also change it in the actionscript.

Once that's all done you can press "OK". Then just repeat Stage 3 for each sound in the library.

And that is about it.

The challenge for my ex-student then, is to modify the code to include more drums and have them respond to an appropriate range of keys on the keyboard.

Have jolly fun.

Demo SWF





7 comments:

  1. Anonymous19/2/09 20:44

    Does not work. Only plays sound when the Shift and another key is pressed, and then that doesn't work at all in a browser.

    ReplyDelete
  2. Ouch. Will take another look and see... thanks for the heads up.

    ReplyDelete
  3. Well I just whacked it together again following the blog, and it works fine. I will add a working example to the blog post for you to try.

    ReplyDelete
  4. Demo now added, see above.

    ReplyDelete
  5. Anonymous8/5/11 21:12

    Hi. Im in art school and thank you for this tutorial. I got the sound to work when pressing a key, but how would I tell that same key to play a movie clip simultaneously through the actionscript?

    i tried to
    attachMovie("movie_1",movie1,10);

    and then under
    sound1.start();
    movie1.play();

    but to no avail. I am super new to flash so any help would be much appreciated!!

    ReplyDelete
  6. Hi,

    There are so many ways this can be done - some are easy, some are more difficult. It really depends on how your movie is set up and what effect you plan to achieve with your MovieClip.

    Describe to me what you intend your finished outcome to be like and I will do my best to suggest a solution.

    ReplyDelete
  7. The most obvious solution is this (hopefully it works):

    1. Create a MovieClip animation. But be sure that the first frame is empty (has no graphics or animation).

    2. Place a stop(); action on the first frame of your MovieClip.

    3. Place the MovieClip on your stage where you want it to appear when the key is pressed. Because the first frame is empty all you will see is the + showing where it is on the stage. This means it will not be visible until the key is pressed.

    4. Give the MovieClip the instance name of "keygraphic1_mc".

    5. Modify your ActionScript to make the MovieClip play as follows:

    if (Key.getCode()==65) {
    sound1.start();
    _root.keygraphic1_mc.gotoAndPlay(2);
    }

    We add the trigger for the MovieClip to the same event handler as the sound, since we want them to play together. (In fact you can add as many actions as you like within an even handler and they will all happen.

    You will notice that all we need to do is call the MovieClip by name, and tell it to go to frame 2 and play. By using "gotoAndPlay(2)" it means the clip will re-start every time the key is pressed. If left to play through to the end MovieClips always try to loop, at which point when it returns to frame 1 it will encounter the "stop();" action and stop, until the key is pressed and starts it again.

    Hope this helps. Let me know if you need something else.

    ReplyDelete