Using the Microphone
         by Joppe & Frost : 19 April 2005

The ability to interact with a microphone is something that was introduced in recent versions of Flash. I hope you will get the idea of how to use a microphone in Flash from this tutorial.

The following animation is a simple example of how we were able to create some interactivity by using the microphone to control the scale of the clip:

[ Click Allow and speak into your microphone ]

Let's re-create a simpler version of the above animation:

  1. Open up Flash and create a new file. Set the width and height to 300 x 200 respectively.

  2. Draw a medium-sized circle using the circle tool from your toolbox. Your stage should look similar to the following image:

[ draw a circle in your drawing area ]

  1. Once you have drawn your circle, you will need to make the circle a movie clip. Select your circle and press F8 or go to Modify | Convert to Symbol. From the dialog box that appears, select Movie clip and press OK.

  1. We will need to now give our movie clip an instance name. Select your circle again, look in the bottom-left hand side of your screen where the Properties panel lives, and enter circle as the < Instance Name >.

[ give your newly-made movie clip the instance name circle ]

  1. Now, on the first frame of your movie, we can now add some ActionScript. Select the first frame in your timeline and press F9 or go to Window | Development Panels | Action.
     
    Enter the following code:

m = Microphone.get();
attachAudio(m);
m.setUseEchoSuppression(false);
onEnterFrame = function () {
circle._xscale = circle._yscale = m.activityLevel+50;
};
  1. Test your movie by previewing this page in your browser. Go to File | Publish Preview | HTML. Your animation should work very similar to what we showed you earlier.
     

Code Explanation
Not to leave you in the dark, I will explain what the function of each line in the tutorial is:
m = Microphone.get();
This tells flash to start taking input from the microphone connected to the computer.
_root.attachAudio(m);
This line attaches the audio to the _root, so that every object can access it with the object 'm'.
m.setUseEchoSuppression(false);
This prevents that awful echo from happening, and it is also accessible in the flash movie properties and settings.
onEnterFrame = function () {
circle._xscale = circle._yscale = m.activityLevel+50;
};
This section of code scales our circle movie clip based on the activity (noise) level of our microphone. The activityLevel command returns a value between 0 and 100, depending on the microphone input. In order to get an activity level of 0, your microphone should be really REALLY good!

We have provided the FLA that you can use to see the above code/animation in action:
 

 

Download ZIP

If this tutorial isn't working please contact me [pm either me (joppe) or frost_oni in the forums ] so we can change the things that aren't working or to help you out. And this has only been tested in mx 2004.

Ok. Now this tutorial is over  and I hope you learned something. Before I forget, let's give a big applause to frost_oni for writing the script! I wanted him to also write this tutorial, but I ended up doing it so THANK YOU FROST! 

(response from frost: Yes, i am a lazy man....! )

Cheers!

Joppe & Frost_Oni



SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.