Before getting started, we need some resources to work with:
+ Background (450x299):
+ Music file (just a demo, you should use a MP3 file): download here
+ Play & stop button:
Download them to your hard driver or use your own for this tutorial
Step 1: Create a new document and press Ctrl-J to open the Document Properties dialog and set your document's dimensions to 450px width and 299px height to fit with our background
Step 2: Import all the resources above to the Library by going to File>Import>Import from Library and select your files to import to the library
(Press Ctrl-L to open your Library panel if it is not on your document)
Step 3: Right click on your sound file in the Library panel and select Linkage to open up the Linkage Properties. Tick on the "Export for ActionScript" check box and type "mySound" in the Identifier textbox. Later you will use a variable to link to this file via its Identifier
Drag the background picture and place it on your document, name this layer "Background". Go to Insert>New Symbol (Ctrl-F8) to create a new symbol, in this case a "play" button, so click on the Button type and name it "On Button"
Step 4: Drag the Play button image from the Library to place it on the center of the workspace
Step 5: Select Over, Down and Hit events of this button and press F6 to insert keyframes for each of them. If you don't do this step, your button will not show up when playing
Step 6: Create another button (Insert>Symbol>New Symbol) but this time name it "Off Button". Drag its image from the Library and place it on the workspace then select Over, Down, Hit events and press F6 to insert keyframes like you did as previous steps
Step 7: Now turn back to your main scene (Scene 1). Create a new layer, name it "On Button" layer and drag your "On Button" button from the Library and place it on this layer. Do not mistake your "On Button" button for your "On Button" image (playsound_star.png)
Step 8: Repeat step 7 with "Off Button". You should place them on separate layers for later modification if necessary
Step 9: Create a new layer and name it "action". It is the place where we put our initial settings. Click on frame 1 of this layer and press F9 to open up the ActionScript tab. Type in as following:
var sndMusic = new Sound(); sndMusic.attachSound("mySound"); sndMusic.start(); |
The first line declares a variable, sndMusic, which belongs to class Sound. The second line attachs this variable to our sound file by using its Identifier. The last line will trigger our sound file when our program is first launched. Now you can press Ctrl-Enter to understand how it works but notice that our buttons still don't work
Step 10: Next we will make our buttons work by adding some code for them. Click on your Play button in the workspace to select it (please don't click on frame 1 of the "On Button" layer, it's totally wrong!), open your ActionScript tab and type in:
| on (release) { sndMusic.start(); } |
The first line identifies that this script will be run when your button is released after being pressed down and it will run our sound file with the "sndMusic.start()" command
Step 11: Click on your "Stop button" and place these code on it (not on frame 1!)
| on (release) { sndMusic.stop(); } |
It's all! Press Ctrl-Enter to see your result now!
discuss this topic to forum
