IT’S ALWAYS FUN when sound and graphics come together to create an engaging and dynamic experience. This example uses ActionScript 3.0 to assign sounds to invisible buttons. The sounds are triggered when you roll over individual drums and cymbals. Each sound file in the Library is exported for ActionScript, allowing you to assign each sound to a different keyboard command as well. As a result, the Flash movie converts your keyboard to a musical instrument.
This is just one of an infinite number of ways sound and ActionScript can be combined to create a fun, interactive experience.
1 The first step is to create an invisible button for the area you want to assign a mouse command to. On a new layer above your image, draw a solid color in the same shape as your image. Convert the shape to a Button symbol and then double-click it to enter Edit Mode. Drag the Up keyframe to the Hit frame. The Hit state dictates the active area of the button and will not be visible in the compiled movie. Back on the main timeline the button is semi-transparent for editing purposes. With the instance of the button selected, type in a descriptive instance name in the Properties panel so you can assign some commands to it.
2 Import your sound file into your Flash document. In the Library panel, right-click over the sound and select Linkage from the context menu.
3 In the Linkage Properties panel, click the Export for ActionScript checkbox. That will automatically check the Export in the first frame for you. If you’re using AS3, provide a unique Class name (AS2 uses Identifier instead). Here, I’ve named it “Tom1”. The Base class must be “flash.media. Sound” but Flash is smart enough to fill that in for you. When you click OK, Flash may give you a warning about a missing class in the classpath. That’s the Tom1 class you just named, so let Flash generate its automatic fix. If you like, check “Don’t warn me again” to avoid a repeat warning. Click “OK”.
4 The first line creates a suitably named variable and sets it to an instance of Tom1. You’ll do this for each sound clip class, which preps each sound for play. The other lines here show how to trigger the sound with a keystroke. Set the focus to the stage, then add a “key down” event that checks for the event’s charCode. In case it’s 68 or 100, play the sndTom1 sound. What are 68 and 100? These happen to be ASCII codes for the letter D. See asciitable.com for a chart (you’ll want the Dec column).
5 If you want to trigger the sound with a mouse movement, add the desired mouse event handler to your btnTom1 button and have the function play the corresponding Sound instance. Check out the sample file to see how easy it is to repeat this small block of code as often as necessary.
6 Now that you have created a hit area and assigned a mouse and key command to trigger a sound dynamically, repeat steps 1–5 for each additional sound you want to add to your project. In the dynamic_sounds_AS3.fla provided on the source CD, I have created an additional 12 invisible buttons “mapped” to specific areas of the image of the drum set. Each Button was given a unique instance name.
7 Open the library and you’ll find a total of 13 sounds, each exported to ActionScript and given a unique Class name. Open the Actions panel and you’ll see all the ActionScript has been provided as well.
This example was written by David Stiller (quip.net) in AS3. He has also written a version in AS2 which has also been provided on the source CD. We hope that these samples will provide a springboard for your own dynamic sound projects and experiments. Have fun!
Hot Tip
Choose instance names carefully to help “sort” things in your code. At a glance, it’s easy to see that the Tom1 class relates to the sndTom1 instance, which is a sound, and to the btnTom1 instance, which is a button.
