In this lesson, you will learn how to import sound files into Flash for both incidental sounds and longer background sound loops. You will create a sound toggle movie clip which will function as a button to use for the play and mute, or off and on states of your sound.
There are several ways of using sound in your movie. One of the simplest ways is to add a layer on your main timeline and name it the name of the sound.
I use a separate layer for each sound in my movie. For instance I have 2 sound files in my library. They are named gong.wav and mrclean.wav. I want to add the mrclean track to the main timeline, so I will name the layer mr. clean. To start the movie with the mrclean sound playing I put my playback head in frame 1, mr. cleanlayer and open the Properties Panel for the frame. Use the Sound: drop-down menu to select mrclean.wav for the sound and select start for the Sync: setting.
The imported sound files in your library are displayed below the Sound: drop-down menu.
Change the Sync: drop-down from Event to Start. Set Loop: to 999 to keep the sound playing indefinitely.
The waveform of the sound file is displayed in the mr. clean layer.
Add frames (F5) to see the entire wave form in the mr. clean layer.
Flash offers 6 Sound Effects plus a Custom Effect that you can modify by selecting the Edit... button to the right of the Effect: drop-down menu. The Edit envelope Window offers options for fading in etc. If you select Custom from the Effect: drop-down menu, the Edit envelope Window will open automatically.
Explore the Edit envelope Window in your own Flash window by clicking on the Edit...button and dragging the white squares around to apply different effects to your sound wave.
LINEAR Flash DEMO
Take some time to explore the features of this window on your computer. Use the play arrow at the bottom left to preview the sound while making your volume adjustments over time. Pan the envelope window to see how the sound fade lines change as the sound starts and ends. You can select effects directly from the Properties Panel Effects: drop-down menu.
Click anywhere on a line to create a new square. Drag the square to a new location. These squares are known as the envelope handles control points. Changing their position modifies the way the sound fades in and out.
The top part of the window is the left sound channel and the bottom part is the right sound channel. These correspond to our speakers. The edit envelope always displays 2 channels even if your sound is mono.
Click on the left mr. clean bottle to hear the None option in the Edit envelope.
After that sound plays completely, click on the right mr. clean bottle to hear the Fade Left to Right option.
I have both sounds Sync: option set to Start meaning that you won't be able to start another sound until the first one has completed playing.
In the Properties Panel for the frame in which you place your sound, there are two more options to set. One is the Sync: field and the other is the Loop: field.
Sync: synchronizes sound to your movie. There are 4 options for sync:
Event - sync sound to an event like a button clicks or specific keyframes (best exported as ADPCM) Start - sound will play when movie loads Stop - sound won't play when the movie loads but will play on an event or playing sound will stop when it reaches a frame that has the Sync: set to stop Stream - keeps the sound fairly synchronized to the animation* - used for soundtracks, background sound loops
Loop: indicates how many times to repeat the sound. I usually insert 999 for the loops number if I want the sound to repeat throughout the entire animation. Looping doesn't work well with streaming sound. Use more for Start or Event sounds.
Right now I have a sound starting at the beginning of my movie. To stop this sound at any frame I would select the frame number of the sound layer, open the Properties for the frame, select Stop from the Sync: drop-down menu and insert 0 for the Loop:. This is the simplest way to start and stop sounds.
A word of note about synchronizing sound to animation:
If you have a 10 second sound and a 10 second animation and you start the sound and the animation simultaneously, they may not end at the same time. On a slow computer, Flash may stutter and pause the animation to wait for the sound to keep up or drop frames in the animation to keep up with the sound. Sound has precedence over animations in Flash. If your sound is streaming you may wind up with choppy animations in order to be sure that the sound stops at the right time.
Flash has many short simple sounds in the Common Library that are useful for event sounds. There are clicks, book drops, thuds, thumps, switches, etc. These sounds are great to add to button states to indicate to the user that something's occurred when they've performed an action. They serve a similar purpose as rollovers. They enhance the interactive experience. The user does something, and Flash responds in several ways.
Let's add sound to a button symbol.
Sounds are often added to the Over and Down states of button symbols to allow users to know that the button is enabled. For hidden or invisible buttons, sounds can provide added clues that the user is over a hot spot. This may be useful when creating Flash games and you'll find it's handy for general interface design as well.
1. Create a new movie in Flash and name it sound_button.fla.Open the Common Libraries>Sound and drag 2 sounds into the library of your new sound-button Flash movie.
2. Insert a new button symbol called sound-but by going to the Insert Menu - Insert>New Symbol.
3. Open the sound-but in symbol editing mode by double clicking on the name in the library.
4. Insert a new layer and name it sound. Rename layer one button. You now have two layers with 4 button states: up, over, down, hit.
5. Create a red circle in the up frame of the button layer. Use the Align Panel to center the button to the stage. Insert keyframes on the over and down states of the button layer. Select the over state of the button layer and select the circle. Change the color to yellow. Select the down state of the button layer and select the circle. Change the color to orange. Save your work.
6. Open the Window Menu - Window>Common Libraries>Sound and drag two incidental short sounds into the library of your movie.
7. In the button symbol's editing mode, add a new layer called sound. Select the over state of the sound layer. Insert a keyframe. Select the down state of the sound layer. Insert a keyframe. Save your work. Open the PI for the selected frame while still on the down state of the sound layer. Select a sound for the sound file from the Sound drop-down Menu in the PI. Select the over state of the sound layer and select the other sound file. Save your work.
8. Return to Scene 1 by clicking on the text link at the top left of the timeline.
9. Drag an instance of your button onto the stage. Go to the Control Window - Control>Enable Simple Buttons and move the cursor over the button. You will hear one incidental sound when you roll over the button and another incidental sound when you click or press the button in the down state.
INTERACTIVE Flash DEMO
Test this button to hear the two sounds. The first sound occurs on rollOver and the second sound occurs on the mouse click.
A button isn't always obvious. Remember the girl with the kiss button? The only indication that she is a button is the cursor changing into a hand and the sound on rollover and click. Helping the user to identify a button with audio feedback makes for successful user interface and interaction.
Now we'll assign some action to the button above with sound in the over and down state. We'll grab two instances of the button and assign one to start a sound and one to stop a sound.
By now, you know how to create a movie, insert a new symbol, convert to symbol, insert keyframes, insert frames, clear keyframes, create motion tweens, create shape tweens, use basic stop, play, go to actions, create a movie clip, drag an instance of a movie clip onto the stage, name an instance of a movie clip, set the movie properties, align objects to the stage and/or to each other, use static text options, import graphics and sound, create a frame-by-frame animation, use onion-skinning to align your keyframes, create frame labels, add sound to a keyframe, use a motion guide, use a layer mask to reveal what's beneath the mask, etc. I won't guide you through the steps for this project but will give you the instructions. If you get lost on a step, review the notes closely.
Exercise:
Let's create a button with sound on the over and down states and use several instances of the button in one of your movies. Name it sound_button.swf.
Create or open a movie that has some background sound such as a song loop or use an event sound from the Common Libraries>Sound and loop it to 999. Make the movie 200x200, background color = #336666. Save the movie as sound-action1.fla. Insert the sound in frame 1 with the Sync: stop and Loop: 0.
Create 5 layers: actions, labels, sound, button on, button off
Make the movie 50 frames long (F5 at frame 50).
Label frame 1 of the labels layer mute. Label frame 5 of the labels layer music.
Put a stop action in frame 1 of the actions layer. Save.
Insert a keyframe in the sound layer, frame 5. Assign a sound to the sound layer, frame 5. Sync: Start, Loop: 999. Save your work.
Create a yellow button or use one you've already created or one from the Common Libraries>Button. Change the up state color to yellow. Add a click sound or similar to the down state of the button only. You can keep the over and down states yellow or change them to another color. Save.
Drag an instance of the button to the stage in frame 1 layer button on. Position the button at the left bottom of the stage and leave enough room to type PLAY underneath the button. Save.
Drag an instance of the button to the stage in frame 1 layer button off. Position the button at the right bottom of the stage and leave enough room to type MUTE underneath the button. Save.
Select the play button and assign the action Go to and play Frame Label music. Select the mute button and assign the action:
on (release) {
stopAllSounds ();
}
You can find this action in the set of Basic Actions. Note that the stopAllSounds action will stop ALL sounds in Flash. If you are playing multiple sounds and only want to stop one sound, this would not be the appropriate action to assign. Play your movie. If it works, I'd like you to try something else.
Select the mute button and remove the code stopAllSounds(); and replace it with gotoAndStop frame label mute.
on (release) {
gotoAndStop ("mute");
}
Now select frame 1 (the mute frame) of your sound layer. Remember that in this frame you selected the same sound as you have playing in frame 2 "music" label but you set the Sync: to STOP and the Loop: to 0. Now play your movie. It should give you the same result as if you had assigned the stopAllSounds to the mute button. See the diagram below which shows the sound attributes in frame 1 of the sound layer. Notice a small square appears in the frame where the sound is stopped representing the stop button on a typical VCR display. The frames with sound enabled shows a waveform of the sound in the sound layer. Now you know 2 ways to stop the sound.
Note that the properties reflected, Sound: Effect: Sync: are properties of the Frame and not an object on the stage.
The tv to the right was formed from the tv on the left. I used the arrow tool to reshape the tv by holding the tool near the edge of the shape and click-hold-and-dragged the shape inwards to get bottom curves. I changed the color and applied gradient fill.
Click on the PLAY and MUTE BUTTONS of the TV's ABOVE AND BELOW TO SEE HOW THEY CONTROL THE SOUND
I've added an animated representation of a waveform to my movie. It's a fairly static example. See how you can incorporate the buttons and sound into a movie with animation that exhibits flare, and fun. Skewing the shapes of the movie screen above would add a bit of pizzazz and punch. Use the Transform Panel to skew and distort some of your shapes to get some unusual and exciting visual effects.
Please continue with the next section of this lesson.
