Sounding Random with Flash CS3

It's quite rare to come across a Flash site that doesn't incorporate sound in one way or another so it's an important skill to learn. This tutorial will walk you through how to build a simple random sound machine using ActionScript 3. This version of the ActionScript language is more advanced and is now the de facto standard for professional Flash work.

[If you’d like to download the four MP3 files to randomly play inside your Flash movie (as well as preview the final effect), visit http://layersmagazine.com/downloads.html. All files are for personal use only.]

1 [SET UP YOUR MOVIE]
Open Flash CS3 and create a new Flash File (ActionScript 3.0) document from the Welcome screen. Save this document as sound.fla into the same directory as the MP3 files. In the Property inspector, set the Background color of your movie to black and change the Frame Rate to 24 fps.

2 [SET UP YOUR LAYERS]
The first order of business anytime you create a new Flash movie should be to set up the layer structure for your movie. It’s much better to be organized from the beginning, rather than having to clean up a disorganized Timeline. Rename the first layer to actions and lock it. Whenever you write ActionScript, it’s important to keep it on its own layer to have an organized movie. Click the Insert Layer icon to create a new layer above that and name it button. Create another layer above that and name it textfield.

3 [ADD THE ARCADE BUTTON]
Flash CS3 comes with a whole library of premade buttons for you to use in your Flash projects. (To be honest, most of them look pretty cheesy but there are a few gems.) Choose Buttons from the Window>Common Libraries menu. This opens a Library panel containing folders of button symbols. Double-click on the Classic Buttons folder and then the Arcade Buttons folder. With the first keyframe in the button layer selected, click-and-drag the Arcade Button - Red onto the stage. With it still selected, give it an Instance Name of button in the Property inspector.

4 [LISTENING FOR CLICKS]
Now it’s time to start writing the ActionScript 3 code. Select the first keyframe in the actions layer and press Option-F9 (PC: Alt-F9) to open the Actions panel. The first piece of code that you need to write is to set up the listener for the button’s click event. Add the code shown as shown here. This code essentially tells the button that whenever it’s clicked on, it should call a function called playSound. You’ll be creating this function in the next step.

5 [HANDLE THE EVENT]
To create the PlaySound function, on line 3 of the Actions panel, enter the code shown here. The code on line 5 outputs a string to the Output panel using the trace function. This function is commonly used for debugging purposes. Press Command-Return (PC: Ctrl-Enter) to test your movie. Every time you click on the button you should see the string, “It was clicked,” added to the Output panel.

6 [CREATE THE SOUND OBJECT]
Now that you’ve confirmed that the button click is being handled correctly, you can delete the trace function from line 5. Replace it by entering the code shown here. In this line of code you’re creating a new Sound object with the name of “s.” To the right of the equals sign, you’re initializing the object by sending a new URLRequest object with the URL to your sound file. For now, you’ll simply be playing the first sound named sound1.mp3.

7 [PLAYING THE SOUND]
In the previous step, you created the sound object and pointed it to the first MP3 file. This line of code prepared the MP3 file to be played but it won’t actually play until you call the play method of the sound object. Now add the code shown in this step to line 6 of the Actions panel. Hit Command-Return (PC: Ctrl-Enter) to test your movie. Now when you click on the button, you should hear the first MP3 file playing.

8 [DIFFERENT SOUND OPTIONS]
You now have the basics for playing external sounds in your Flash movies. But there are many available options when it comes to playing sound files. For instance, when you test your movie and repeatedly press the button, it creates a new sound for every click—leading to interesting results if you click the button rapidly. Since you probably want it to start a new sound and mute all the others, add the code shown here to line 5, which stops all sounds in your movie before playing the new one.

9 [CREATING THE TEXTFIELD]
Select the first keyframe in the textfield layer and hit the T key to select the Text tool. Click on the stage to create a new textfield and enter in the number 4. This textfield will display the random number that we generate. In the Properties panel, select Dynamic Text, give it an instance name of bigNum, set the font to Impact with a size of 150, and align it to the center. Now align both the textfield and the button on the stage to your liking. This movie is more about learning ActionScript but it doesn’t hurt to make it look nice too.

10 [RANDOM NUMBER MATH]
Select the first keyframe in the actions layer and open up the Actions panel. Add the code shown above on line 6. This code creates a new Number object named “num.” The Math.ceil function takes whatever number you send to it and rounds it up to the nearest integer. The number you’re sending to it is the product of the Math.random function, which returns a random number between 0 and 1, and the number 4. This will always return a random integer between 1 and 4, which works perfectly for this example.

11 [SETTING THE TEXTFIELD]
Now that you’ve generated the random number, the next step is to populate the textfield on the stage with that number. Add the code shown above to line 7 of the Actions panel. Here you’re setting the text property of the textfield to be equal to the random number that you generated in the last step. This is a Number object however and the text property can only accept String values. To overcome this, you need to call the toString method of the Number object, which converts it into a String value.

12 [BUILDING THE RANDOM PATH]
Now you need to load the random sound file. Add the code shown here to the Actions panel on line 8 to create a new String object named path. You first assign it the string “sound” and then add to it the text currently displayed in the textfield, which is the random number. You add strings together using the + operator. Finally, you add the string “.mp3” to complete the path. On line 9, you pass the newly generated path to the Sound object replacing the hard-coded string.

13 [Testing the Application]
Hit Command-Return (PC: Ctrl-Enter) to test your finished movie. Whenever you click on the button you should hear a random sound and also see the number displayed in the textfield. This example may seem a little useless, but we’ve covered a lot of really useful ActionScript 3 code dealing with sound and numbers. The use of random numbers forms the backbone of all computer games, not just ones built in Flash. Using random numbers for things like sound and animation also ensures that things will be different every time the user sees your movie.

Visitor Comments

Leave us a comment

Your Message: Name: * Email: * Post it!

• Digg This!
• Del.icio.us
• Blinklist
• Back to Top