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:
-
Open up Flash and create a new file. Set the width and
height to 300 x 200 respectively.
-
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 ]
-
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.
-
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 ]
-
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;
- };
-
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:
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
|