Working with Sound
Techniques from Flash 5 to Flash MX
Flash makes working with sound very easy: import the sound file, establish a keyframe on the layer which is to hold the sound, and then drag the sound from the library onto the stage.
Unfortunately, this ease of use comes at a price: the only control that you have over the sound's playback is the sledgehammer stopAllSounds() action, which stops ALL playing sounds, without preventing sounds from being played in the future, at a later keyframe.
Flash 5 provides greater control over the playback of sound in a Flash movie by various means, though all of them are more complicated than dragging a sound from the library onto the stage. Often a few ActionScript commands are necessary to enabled these refined techniques. The advantage is that you will then have independent control over each sound in your movie.
Flash MX provides new sound control features - again accessed by ActionScript - as well as the ability to play an MP3 file directly by means of loadMovie(). One of the many great features of Flash MX, and especially the extensions added to ActionScript, is that 99% of anything you might have learned about ActionScript in Flash 5 is preserved in Flash MX.
In this Web handout, we will explore
the various techniques and procedures for working with sound in Flash MX. The directions are targetted towards working in the Flash MX environment, even when reviewing Flash 5 techniques. The main difference for our purposes here will be in the directions for accessing specific ActionScript commands in the Actions panel ... it's been redesigned in MX, but with a little digging around, you should be able to figure out how to access the same ActionScript commands in the Flash 5 Actions panel.
The sound files which we will be using comes from freeplaymusic.com, which
grants free production rights for personal, non-commercial uses. These sound files are arranged (not just edited) into 10, 15, 20, 30, and 60 second cues as well as a 2+ minute full arrangement. Macintosh users can access the sound files easily via their iTools account: in the iDisk folder, under Software, in the Extras folder, in the FreePlay Music folder.
The different techniques for working with sound presented here include:
From Flash 5:
To Flash MX:
Attach Sound to Layer:
Attaching a sound to a layer of the main timeline is the easiest method to accomplish when applying a sound to your Flash movie. After downloading the source files, we'll apply the sound to a layer, and explore the significance of the Stream and Event sound synchronizing characteristics.
- Download the source files:
- Click, right-click, or Control-click to download source file to disk: attach_to_layer.fla
- Click, right-click, or Control-click to download sound file to disk: BadMoon60.mp3
- Click, right-click, or Control-click to download sound file to disk: wolf.wav
- Establish or locate a folder to be used as a production folder (containing the source files), and move the downloaded files to that folder
- In Flash, open the file: attach_to_layer.fla
Importing a Sound File:
- File -> Import ...
Navigate to and select the sound file (WAV on Windows, AIFF on Macintosh, MP3 on either) you wish to import, then click on: Open
From time to time, the machine that you are working on may not recognize a particular file format as being valid to import. In that case, in the Import dialog box, select All Files from the Show menu.
When a sound file is imported, it is NOT placed on the stage, but in the Library where it can be used as easily as it is to use an instance of a symbol.
Apply a Sound to a Layer: Method #1:
- Insert a new layer, name it: Sound, and drag it above the existing layers
NOTE: By default, when you create a new layer, the first frame of the new layer is a keyframe
- With the new Sound layer selected, open the Library (Window -> Library), and drag the BadMoon60.mp3 sound onto the Stage
The only visual indication you will see is a the waveform of the sound on the layer which was selected when the sound was dragged onto the stage from the library
- Extend all layers to frame 20
The waveform of the applied BadMoon60 sound should now be more visible
- File -> Save, and Control -> Test Movie
The sound begins playing when the movie begins playing. At frame 20, the movie ends, and will automatically loop back to the beginning of the movie, unless you take steps to prevent that from happening. At the beginning of the movie, keyframe 1 of the Sound layer is encountered again, triggering the playback of a second copy of the BadMoon60 sound.
Stop the Movie from Looping
- Insert a new layer, name it: Actions, and drag it above the existing layers
- Insert a keyframe at the last frame of the Actions layer (frame 20)
- Select
Keyframe 20 of the Actions layer, and open the Actions panel (Window -> Actions)
- Apply a stop() action to Keyframe 20
- Actions: Movie Control: stop
- OR: Add Actions -> Movie Control -> stop
- Test movie
Now the movie stops playing when it reaches the end of the movie, instead of looping.
NOTICE: Even though the movie stops at frame 20, the sound continues to play. This is a characteristic of the Event sound synchronizing behavior.
Sound Synchronization: Event vs Stream
The two primary sound synchronizing behaviors are Event and Stream. An Event sound (behavior) is independent of the playback of the main timeline, and will continue to play until the sound's conclusion even if the movie stops playing or the layer which is holding the sound ends. A Stream sound (behavior) is dependent upon the playback of the main timeline: the sound will stop when the main timeline stops, and will end when the layer which is holding the sound ends. The Stream sound is synchronized to the playback of the movie, to the point where the Flash player will drop frames during playback to keep the visual part of the movie synchronized to the playback of the sound.
By default, when a sound is first applied, it has the Event Sync characteristic.
- To change the sound Sync characteristic:
- Select the layer which contains the sound
Or if there are more than one sound on a layer, select the keyframe in which the sound has been applied, or any frame which contains the sound waveform
- Open the Properties Inspector (Window -> Properties), and look for the Sync dropdown menu
- From the Sync dropdown menu, select: Stream
This synchronizes the playback of the sound with the playback of the movie. If the movie stops, or the layer (which holds the sound) ends, then the sound will stop playing as well.
- Test movie
When the movie reaches frame 20 (which contains a stop() action), both the movie will stop AND the sound will stop
- Extend the Actions, Counter, and Title layers out to frame 40, but leave the Sound layer with 20 frames
- Test movie
Now the sound will end when the layer which holds it ends (frame 20) even while the movie continues to play to frame 40
- Change the sound Sync characteristic back to Event:
- Select the layer which contains the sound (or the Keyframe which starts the sound)
- In the Properties Inspector, Sync -> Event
- Test movie
The sound continues to play, even after the layer which contains it ends (frame 20)
EVENT Sync: independent (asynchronous) playback of sound
STREAM Sync: dependent (synchronized) playback with movie, layer length
Stopping the sound
- Extend all layers out to frame 100
- Insert a new layer, name it Buttons, and drag it beneath the Sound layer; make sure the Buttons layer is selected
- From the Library, drag an instance of the Stop Graphic symbol onto the stage
- Select the Stop Graphic instance on the stage, and convert it into a Button symbol named: Stop
- Apply the stopAllSounds() action to the Stop button:
-
Select the Stop button instance
- Open the Actions panel
- Actions: Movie Control: stopAllSounds
- or -
- Add Actions -> Movie Control -> stopAllSounds
(From here on, the directions for working with the Actions panel will be with respect to the [+] plus button in the Actions panel, above the ActionScript pane, and will be refered to as "Add Actions". You can always use the alternate method of selecting actions in the Actions Toolbox pane)
- Test movie
When the Stop button is clicked, the BadMoon sound is halted
The problem with stopAllSounds() is that it is indiscriminate: you can't target a specific sound. Also, stopAllSounds() does not prevent another sound from being triggered later in the movie
- Import another sound: File -> Import..., then navigate to and select the file: wolf.wav
-
Insert a new layer, name it: Howl, and drag it below the Sound layer
- Insert a keyframe at frame 50 of the Howl layer
Apply a Sound to a Layer: Method #2:
- Select keyframe 50 of the Howl layer, and then open the Properties Inspector
- In the Properties Inspector, from the Sound dropdown menu, select: wolf.wav
- In the Properties Inspector, from the Sync dropdown menu, select: Event
- Test movie
When the Stop button
is clicked, any playing sound is stopped
Any other sound attached to the main timeline WILL BE PLAYED after the stopAllSounds() command is triggered. If the Stop button is clicked before frame 50 (where the wolf.wav sound is placed), then when the playback head reaches a keyframe which contains a sound, that sound will be played
When all sounds are Event sounds (have the Sync characteristic set to Event), then stopAllSounds() stops only those currently playing sounds, and any other sound established at a later keyframe will be played normally when the playback head sweeps through that keyframe
- Remove the stop() action on the last frame of the Actions layer
- Select the ending keyframe of the Actions layer
- In the Actions panel, select the stop() action in the ActionScript pane
- Click on the [-] minus sign button to delete the selected action
- Duplicate Scene 1:
- Open the Scene panel (Window -> Scene)
- Select Scene 1
- Click on the Duplicate Scene button
- Rename: Scene 1 copy to: Scene 2
- Switch back to editing Scene 1 (click on Scene 1 in the Scene panel)
Mixed Event and Stream Sounds
-
Test movie
When the Stop button
is clicked, any playing sound is stopped
Any other sound that is triggered later in the movie - especially in later scenes - will be played as they normally would be played
-
In Scene 1, change the BadMoon sound to Stream
- Select any frame of the Sound layer
- In the Properties Inspector, change the BadMoon sound Sync characteristic to: Stream
-
Test movie
When the Stop button is clicked, any sound in the movie is stopped/prevented from starting ... DEPENDING UPON THE MIX AND ARRANGEMENT of Event and Stream type sounds
When the movie loops back to the beginning of Scene 1, the stopAllSounds() action is no longer in effect
- In Scene 1, change the Sync charateristic for the BadMoon sound to Event, and the wolf.wav sound to Stream
- Select any frame which contains the BadMoon sound, and in the Properties Inspector, Sync -> Event
-
Select any frame which contains the wolf.wav sound, and in the Properties Inspector, Sync -> Stream
- Test movie
When the Stop button is clicked between frames 1 and 49, the BadMoon sound is stopped, but any later sounds will play normally
When the Stop button is clicked between frames 50 and 100, the wolf.wav sound and the BadMoon sound are stopped, and none of the later sounds will play normally
When there is a mix of Event and Stream sounds, then stopAllSounds() may or may not stop all sounds from being triggered (to play) later in the movie
- Delete Scene 2
- In the Scene panel, select: Scene 2
- Click on: Delete Scene
- Add a stop() action to the last frame of Scene 1
- Select keyframe 100 of the Actions layer
- In the Actions panel: Add Actions -> Actions -> Movie Control -> stop
Effects of Stopping the Movie on Sound Playback
- Add a stop (movie) button and a play button onto the stage
- Select the Buttons layer on Scene 1
-
Open the Common Library of button symbols (Window -> Common Libraries -> buttons.fla)
- From the Playback folder in the Library, drag an instance of the playback-stop and playback-play buttons onto the stage
- Scale them by about 400%, and position them anywhere on the stage
- Add a stop() action to the playback-stop button (Add Actions -> Actions -> Movie Control -> stop)
- Add a play() action to the playback-play button (Add Actions -> Actions -> Movie Control -> play)
- From the previous steps, the BadMoon sound has the Event Sync type, and the wolf.wav sound has the Stream Sync type
- Test movie
Once the movie begins playing, click on the playback-stop button. The BadMoon sound, having the asynchronous, independent-timeline nature of the Event sound type, continues to play, even with the movie stopped (the frame counter indicates that the movie is stopped).
Click on the playback-play button, and once the movie begins playing the wolf sound, again click on the playback-stop button. The BadMoon (Event) sound will continue to play, but the wolf (Stream) sound will stop when the movie is stopped. With Stream sounds, the sound playback is synchronized with the playback of the movie. When the playback-play button is clicked, the Stream sound resumes playing.
- Save the movie, and close the document window
Result (instructor's source file): attach_to_layer_production.fla
The Good, the Bad, and the Ugly
Good: Easy to implement
Bad: Only the grossest form of control ... stopAllSounds()
Ugly: stopAllSounds() works differently in a mixed Event/Stream environment
Attach Sound to Button:
Attaching a sound to a button gives you the ability to provide auditory feedback to a user when they cursor over or click on a button instance. This involves placing a sound on a keyframe of the button symbol itself, in either the Up frame (for the sound to play when the cursor is away from the button), the Over frame (for the sound to play when the cursor rolls over the button), or the Down frame (for when the user clicks on the button)
- Download the source files:
- Establish or locate a folder to be used as a production folder (containing the source file), and move the downloaded file to that folder
- In Flash, open the file: attach_to_button.fla
Attach sound to Button
Attaching sounds to a Button Symbol's layer provides an easy way to trigger sounds when the cursor moves over a button instance or when the user clicks on a button instance.
- Edit the button symbol by double-clicking on the button instance on the stage
- Open the Actions panel
- Scale the playback-play button instance to approximately 100 x 100 pixels
- Edit the playback-play button symbol (double-click on the button instance)
You are now editing the Xplayback-play Symbol in place
- Insert a new layer, name it: Sound, and drag it above the existing layers
- Open the Common Sounds library (Window -> Common Libraries -> Sounds)
- If you want a sound to play when the button is in the neutral state (Up frame), then apply the sound to the Up frame of the Sound layer
- If you want a sound to play when the cursor rolls over the button:
- Insert a keyframe in the Over frame of the Sound layer
- With the Sound layer selected and the playback head above the Over frame, drag a sound onto the stage (Visor Hum Loop)
- Make sure the Sync setting for this sound is: Event
Why? Remember, the sound stops playing when the movie stops playing when the sound Sync type is set to Stream. When the cursor hovers over a button, the playback head of the button is moved to the Up frame AND THEN STOPPED. So the Sync type for a sound applied to a button's layers must be set to Event, or the sound will not play
- If you want a sound to play when the cursor clicks on the button:
- Insert a keyframe in the Down frame of the Sound layer
- With the Sound layer selected and the playback head above the Down frame, drag a sound onto the stage (eep.wav)
- Make sure the Sync setting for this sound is: Event
- Switch back to editing the main timeline (click on the Scene 1 button above the stage)
- Test:
- Control -> Enable Simple Buttons {selected}
- Move the cursor over the button to trigger the Over frame sound ... click on the button to trigger the Down frame sound
- Control -> Enable Simple Buttons {deselected}
- Save the file, and close the document window
Result (instructor's source file): attach_to_button_production.fla
The Good, the Bad, and the Ugly
Good: Useful for providing auditory feedback
Bad: More possibilities when using buttons to control external (to button) sound playback
Ugly: n/a
Creating a Toggle Clip:
A toggle is switch with only two possible settings. Think of a light switch: one physical control, but with two possible outcomes depending on the current state of the switch. If the lights are on, then clicking the toggle switch will turn them off. But, if the lights are off, clicking the same switch will turn the lights on.
The functionality of a toggle switch is very useful in Flash: having a single controller which performs two tasks (on/off, start/stop) is more effiecient, and potentially less confusing, than having one ON button and a separate OFF button.
We can implement this toggle switch in Flash, by creating a two-frame movie clip. Each frame contains a separate button instance. A pair of actions is applied to each button: one action advancing or rewinding the playback head of the movie clip (with nextFrame() and prevFrame() actions); the other action
performing the appropriate on/off, start/stop, action/reverse_action behavior.
Since we will be using this concept of a toggle clip in many of the remaining examples, it will be easier to understand if the creation of the toggle clip is addressed independently of it's potential interactions with sound in a Flash movie.
- Download the source files:
- Click, right-click, or Control-click to download source file to disk: toggle_clip.fla
- Establish or locate a folder to be used as a production folder (containing the source file), and move the downloaded file to that folder
- In Flash, open the file: toggle_clip.fla
- Insert a new layer, name it Toggle, and drag it above the existing layers
Create the Movie Clip
- Create the Movie Clip symbol:
- Insert -> New Symbol...
- Name: Toggle Clip
- Behavior: Movie Clip
- Click: OK
You are now in Symbol Edit mode, editing the new Toggle Clip symbol
- Organize the layers:
- Rename Layer 1: Buttons
- Insert a new layer, and name it: Labels
- Insert a new layer, and name it: Actions
- Prevent the movie clip from playing
Movie clip instances begin playing automatically, and we want the Toggles playback head to move only when a user clicks on one of the buttons
- Apply a stop() action to the first frame of the movie clip:
-
Select keyframe 1 of the Actions
layer
- Open the Actions panel
- Add Actions -> Actions -> Movie Control -> stop
Add a Button
There will be two separate button instances in the Toggle Clip symbol: one for the start/on action, and one for the stop/off action. Which one you place in frame 1 depends upon the state of the behavior you intend to control. If we have a sound (or a movie) playing which we intend for the user to control, then their first choice for control will be to stop the sound (or movie). So the button in the first frame of the Toggle Clip should be one which represents stopping the sound (or movie).
- Select the Buttons layer
- Drag an instance of the Stop Button from the Library, and center it in the Symbol Edit space
Apply a Frame Label
A frame Label allows us to tell a movie (clip) to go to a specific frame. This can always be done with gotoAndPlay(frameNumber), but then we have to remember the specific frame number. With a frame label, all we have to do is come up with a meaningful, descriptive, easy-to-remember word, and then use gotoAndPlay("start") ... if we have a frame Labeled "start".
- Select keyframe 1 of the Labels layer
- In the Properties Inspector, in the Frame (label) field, enter: stop
If we ever need to, we will now be able to tell the Toggle Clip to go to the frame labeled "stop", which will then present the Stop Button instance
A frame Label allows us to tell a movie (clip) to go to a specific frame. This can always be done with gotoAndPlay(frameNumber), but then we have to remember the specific frame number. With a frame label, all we have to do is come up with a meaningful, descriptive, easy-to-remember word, and then use gotoAndPlay("start") ... if we have a frame Labeled "start".
Add the Second Button
There are several ways to present a Toggle-type controller. One is to re-use the graphical space of the first button, so that only one control is visible at a time. Another way is to always present both buttons, with the inactive one "grayed-out". In this example, we'll reuse the graphical space of the first button.
- Insert a keyframe at frame 2 of the Buttons layer
This places a copy of the Stop button instance in keyframe 2
-
Use Swap Symbols to replace the Stop button instance with the Start button
- Select the Stop Button instance at keyframe 2
-
In the Properties Inspector, click on the Swap... button
- In the Swap Symbols dialog box, choose the replacement symbol (Go Button)
- Click: OK
The button instance at keyframe 2 is now an instance of the Go Button
Apply a Second Frame Label
- Insert a Keyframe at frame 2 of the Labels layer
- Select Keyframe 2 of the Labels layer, and in the Properties Inspector, apply the frame label: start
If we ever need to, we will now be able to tell the Toggle Clip to go to the frame labeled "start", which will then present the Go Button instance
nextFrame() and prevFrame()
Next we need to apply ActionScript to each of the buttons, so that when a button is clicked, the playback head of the Toggle Clip moves to present the other button. We never want this Toggle Clip to play ... it is always stopped at a frame showing a particular button. The nextFrame() and prevFrame() actions are perfect for this: the advance or rewind one frame and stop playing at that frame.
- Select the Stop Button instance at keyframe 1 of the Buttons layer
- In the Actions panel:
-
Add Actions -> Actions -> Movie Control -> goto
- From the Type dropdown menu, select: Next Frame

The Stop button is on frame 1. When the user clicks on it, the Stop button should be replaced by a Start button (you can't stop something that has already been stopped). The Start button in on frame 2. So to present the Start button, we apply a nextFrame() action to the Stop button. Because these buttons are placed inside a movie clip, their movie control functions are targetted to the current (movie clip) timeline, and not the main Scene 1 timeline.
- Select the Go Button instance at keyframe 2 of the Buttons layer
- In the Actions panel:
-
Add Actions -> Actions -> Movie Control -> goto
- From the Type dropdown menu, select: Previous Frame
The Go button is one frame 2. When the user clicks on it, the Go/Start button should be replaced by a Stop button. The Stop button is on frame 2.
So to present the Go/Start button, we apply a prevFrame() action to the Go button.
Test
Before we make this Toggle Clip controller actually do some work, let's first test it's mechanics
... that when we click on one button, the other button is presented.
- Switch out of Symbol Edit mode, back to editing Scene 1
- Select the Toggle layer
-
Drag an instance of the Toggle Clip onto
stage
- Test movie
When you click on the Stop button (inside the Toggle Clip), the Go/Start button is presented. When you click on the Go/Start button, the Stop button is presented.
- File -> Save
This saves a mechanically functional copy of the Toggle Clip controller, which can be reused in future projects.
- Save the file under a slightly different name, so that we can test the Toggle Clip to make sure we have it do something useful
- File -> Save As ...
- Name: toggle_clip_test.fla
- Click: Save
We are now editing the file: toggle_clip_test.fla
Stop/Start Movie Playback
The Stop and Go/Start buttons are located inside the Toggle Clip movie clip. To send commands to the main timeline, those commands must be sent to the timeline "one level up". To send a command "up one (timeline) level", we use the _parent construct with the dot separator
- Edit the Toggle Clip symbol
(Double-click the Toggle Clip instance, to edit the Toggle Clip symbol in place)
Stop Button Action
- Select the Stop Button instance at frame 1
- Open the Actions panel
- In the ActionScript pane, select the nextFrame() action
- Stop the main timeline when this Stop Button is clicked by the user
- Add Actions -> Objects -> Movie -> _parent
This establishes an "evaluate" expression. The _parent construct is placed in the Expression field, with the insertion bar to the right of _parent
- Enter the dot separator
With the insertion bar to the right of _parent, type a period (".")
A context-sensitive scrollbox appears with the range of choices that can be selected for appending after the dot separator
- From the scrollbox, select (double-click) the stop action
The Stop Button instance now has an action which tells the main timeline to stop playing ... with the button instance located inside the Toggle Clip, which is located on the main timeline, to address the main timeline we used: _parent.stop()
Start Button Action
- Select the Go Button instance at frame 2
- In the Actions panel, in the ActionScript pane, select the prevFrame() action
- Start the main timeline when this Go/Start Button is clicked by the user
- Add Actions -> Objects -> Movie -> _parent
This establishes an "evaluate" expression. The _parent construct is placed in the Expression field, with the insertion bar to the right of _parent
- Enter the dot separator
With the insertion bar to the right of _parent, type a period (".")
A context-sensitive scrollbox appears with the range of choices that can be selected for appending after the dot separator
- From the scrollbox, select (double-click) the play action
The Stop Button instance now has an action which tells the main timeline to stop playing ... with the button instance located inside the Toggle Clip, which is located on the main timeline, to address the main timeline we used: _parent.play()
- Switch back to editing Scene 1
- Test movie
When the stop button is visible and the user clicks on it, the main movie timeline is halted (check the current frame indicator towards the upper-right corner), and the stop button is replaced with a go/start button.
When the go button is visible and the user clicks on it, the main movie timeline is started (check the current frame indicator towards the upper-right corner), and the go/start button is replaced with a stop button.
This Toggle Clip (toggle switch) concept will be used repeatedly in the remaining sections of this handout. It's also a very useful concept/construction for any project in the future for which it is useful to have only one appropriate control visible at any one time.
Result (instructor's source file, generic: no movie playback control): toggle_clip_production.fla
Result (instructor's source file, with movie playback control): toggle_clip_production_test.fla
The Good, the Bad, and the Ugly
Good: Extremely useful tool for implementing an on/off-type controller
Bad: You have to know how to navigate the timeline hierarchy of a movie
Ugly: You REALLY have to know how to navigate a timeline hierarchy
Attach Sound to Movie Clip Layer
The next step in the evolution of working with sound is to place it in a layer of a movie clip, whose overall structure is inherited from the Toggle Clip we built earlier.
There are two other sound synchronizing types besides Event and Stream: Start and Stop. We will see how to make use of these two characteristics.
- Download the source files:
- Click, right-click, or Control-click to download source file to disk: attach_to_clip.fla
- Click, right-click, or Control-click to download source file to disk: jazz.mp3
- Establish or locate a folder to be used as a production folder (containing the source files), and move the downloaded files to that folder
- In Flash, open the file: attach_to_clip.fla
- Create or re-use a Toggle movie clip
In this example, the Toggle Clip has already been created, and an instance placed on the main timeline
- Edit the Toggle clip
Double-click the Toggle Clip to edit it
Apply a Sound to the Movie Clip
- Editing the Toggle clip, insert a new layer, name it: Sound, and drag it above the Buttons layer
- Import the sound file: jazz.mp3
- Apply the jazz.mp3 sound to keyframe 1 of the Sound layer:
- With the Sound layer selected, drag the jazz.mp3 sound from the Library onto the stage
- or -
- With keyframe 1 of the Sound layer selected, select jazz.mp3 from the Sound dropdown menu in the Properties Inspector
Start Sync Characteristic
In addition to the Event and Stream synchronizing charateristics, there are two others which we will be using here: Start and Stop
... these allow you to start and stop a sound, although it is not intuitively obvious how to make this work. Here's how:
- Apply the Start Sync setting:
- Select Keyframe 1 of the Sound layer if it is not already selected
- In the Properties Inspector, select Start from the Sync dropdown menu
- If you want the sound to loop:
- Select Keyframe 1 of the Sound layer if it is still selected
- In the Properties Inspector, enter the number of times that you want the music to loop in the Loop field
Stop Sync Characteristic
As the Sync dropdown menu implies, you can't assign more than one Sync type to a specific instance of a sound. We'll need to establish another instance of the sound (another keyframe containing the sound) in order to apply the Stop characteristic.
- Establish a second instance of the sound:
- Insert a Keyframe at frame 2 of the Sound layer
- Apply the same sound ( jazz.mp3) keyframe 2 of the Sound layer
- Apply the Stop Sync setting:
- Select Keyframe 2 of the Sound layer if it is not already selected
- In the Properties Inspector, select Stop from the Sync dropdown menu
- Test movie
Clicking on the Stop button stops the sound, by moving the Toggle Clip's playback head to the nextFrame (frame 2): frame 2 contains the instance of the sound which contains the Stop Sync characteristic. Frame 2 also displays the Go/Start button.
Clicking on the Go/Start button plays the sound, by moving the Toggle Clip's playback head to the prevFrame (frame 1): frame 1 contains the instance of the sound which contains the Start characteristic. Frame 1 also displays the Stop button.
Although everything appears to function normally, there are a couple of problems with this approach.
Problem #1: If the Stop button has been clicked (stopping the sound), then the Go/Start button will be displayed. However, if the Scene loops under this circumstance, then the sound will be triggered again AND the Go/Start button will still be displayed.
Problem #2: If the movie has more than one scene, the Toggle clip instance disappears at the end of the first scene. If the next scene contains another instance of the Toggle clip, when this second instance first loads, everything is reset to the original condition (ie, the sound will start playing, even if it's stopped from the previous scene.
Solution: Use attachMovie() to pull the instance sound/toggle Movie Clip from the Library: "float" the Toggle instance in a level greater than level 0 (the root level for a movie). Levels are like layers, except that they only exist while the movie is playing (at run time), and can only be accessed by ActionScript.
preparation
To test this out, let's duplicate Scene 1 (so we can test that this works with multiple scenes):
- Exist Symbol Edit mode, and return to editing Scene 1
- File -> Save
- File -> Save As ...
- Name: attach_to_clip_scenes.fla
- Click: Save
- Now working on the file: attach_to_clip_scenes.fla, open the Scene panel (Window -> Scene)
- In the Scene panel, select Scene 1, and then click on the Duplicate Scene button
-
Rename Scene 1 copy: Scene 2
- Delete the Toggle layer
- Insert a new Scene, name it: Preload, and drag it above the existing scenes
- Click on Scene 1 in the Scene panel to return to editing Scene 1
Linkage Identifier
To work with attachMovie(), we need to establish a Linkage Identifier
for the Symbol we wish to work with.
- Open the Symbol Library
- Select the Toggle Clip symbol
- From the Library's Panel Options menu, select: Linkage ...
- In the Linkage Properties dialog box, select the Export for ActionScript checkbox
- With Export for ActionScript selected, enter a name for the linkage Identifier
I always avoid spaces and special characters when I name things, so for this linkage Identifier, I entered: Toggle_Clip
- Click: OK
With the Linkage Identifier established, we can now make use of attachMovie() to dynamically establish an instance of the Toggle Clip symbol
- In Scene 1, delete the Toggle layer
Yes, that's right, delete the Toggle layer and the Toggle Clip which it holds
- Switch to editing the Preload scene
attachMovie()
- Rename Layer 1: Actions
-
Select keyframe 1 of the Actions layer, and open the Actions panel
- Add Actions -> Objects -> Movie -> Movie Clip -> Methods -> attachMovie
- Object: this
In the Object field, enter the word: this
- Parameters: "Toggle_Clip","toggle",100
- idName: enter the Linkage Identifier, exactly as you have it spelled in the previous steps, within quotation marks: "Toggle_Clip"
- {then enter a comma}
- newName: enter an instance name for the new movie clip instance, within quotation marks: "toggle"
- {then enter a comma}
- depth: enter a number greater than 0: 100
Depth refers to the z-index stacking order, with level 0 being the level of the base Flash movie
When attachMovie() is used to dynamically load an instance of a symbol, Flash places the new instance with the registration mark of the instance in the upper left corner of the stage. This means we'll need to move it into place via ActionScript
- With the attachMovie() command still selected:
Add Actions -> Actions -> Miscellaneous Actions -> evaluate
- In the Expression field, enter: toggle._x = 275
- toggle ... is the name of the new Toggle Clip instance (2nd attachMovie() parameter)
- . ... is the dot separator
- _x ... is the horizontal position property of the instance
- = 275 ... is the assignment of the horizontal position
- Add Actions -> Actions -> Miscellaneous Actions -> evaluate
- In the Expression field, enter: toggle._y = 270
- toggle ... is the name of the new Toggle Clip instance (2nd attachMovie() parameter)
- . ... is the dot separator
- _y ... is the vertical position property of the instance
- = 270 ... is the assignment of the vertical position
This Frame action was placed in a separate scene at the beginning of the movie, because we do not want the movie to trigger this action after the movie has begun playing (it'll attach a whole new instance, resetting the clip so that it begins playing the sound from the very beginning). So we'll need to add a Frame action at the last frame of the last scene, telling the movie to skip the Preload scene and go directly to Scene 1:
- Switch to Scene 2
- Insert a new layer, and name it: Actions
- Insert a keyframe in the last frame of the Actions layer
- With the new keyframe selected, in the Actions panel:
Add Actions -> Actions -> Movie Control -> goto
- From the Scene dropdown menu, select: Scene 1
- Double-check that the Go to and Play radiobutton is selected
Everything else can be left at their default values
- Test movie
You now have (stop/start) control over the sound throughout the playback of the movie
Result (instructor's source file, single scene): attach_to_clip_production.fla
Result (instructor's source file, with attachMovie() ): attach_to_clip_scenes_prod.fla
The Good, the Bad, and the Ugly
Good: Very easy if working with one scene; a lifesaver (with attachMovie) w/mulitple scenes
Bad: To make it really useful, you have to master attachMovie()
Ugly: The growing realization of the importance of knowing a little ActionScript
LoadMovie with Sound-only SWF
With this technique, the sound is placed in a sound-only SWF file, which is then brought in to the main movie via the loadMovie() ActionScript command. This has many advantages, chief of which is the more rapid loading of the main movie which does not have the sound embedded in it.
- Download the source files:
- Establish or locate a folder to be used as a production folder (containing the source files), and move the downloaded files to that folder
Create the sound-only Movie
- In Flash, open a new document window
- Save the file as: badmoonsound.fla
Make sure it gets saved into your production folder
-
Import the file: badmoon60.mp3
- Rename Layer 1: Sound
- Attach the badmoon60 sound to the Sound layer
- Select keyframe 1
- From the Properties Inspector: Sound -> badmoon60.mp3
- From the Properties Inspector: Sync -> Stream
If we want to control the playback of the sound, it needs to be synchronized to the playback of the sound-only movie
-
Extend the sound layer so that all of the Stream-type sound will be played
- Insert a frame at frame 723 of the Sound layer
- Control -> Test Movie
This creates the file: badmoonsound.swf and saves it to your production folder
- Close the badmoonsound document window
- Open the file:
slideshow_explained_partial.fla
This is an almost-finished project file, in which we will add the appropriate ActionScript commands
Load the sound-only SWF into a Level
- Select keyframe 1 of the Actions & Labels layer, and open the Actions panel
- Load the sound-only movie into a level:
- Add Actions -> Actions -> Browser/Network -> loadMovie
- URL: badmoonsound.swf
REMEMBER: Like any other URL without path information, this SWF file must be in the same folder as this to-be-exported project file
- Expression: {deselected}
- Location: Level
- Level: 1
- Save, and test movie
The sound should play while the main movie (slideshow) is playing
However, we have no control over the sound. To control the sound:
Control Playback of Movie Loaded into Level
- Establish a variable which tracks whether the loaded movie is playing or not:
-
With keyframe 1 of the Actions layer of the Preload scene still selected, in the Actions panel: Add Actions -> Actions -> Variables -> var
- Variables: playing = true
We are declaring a variable, named: playing, and setting it's initial value to true (the sound-only loaded movie will begin playing automatically)
Modify the toggle movie clip, to control the playback of the loaded movie
- Edit the Toggle Stop First movie clip symbol
- Select the Stop button instance at frame 1 of the Buttons layer
- In the Actions panel, select the nextFrame() statement in the ActionScript pane
- Tell the movie in level 1 to stop:
- Add Actions -> Objects -> Movie -> _parent
(We need to go up out of the timeline of the movie clip to access the main timeline)
- In the Expression field, enter a period (dot separator) after _parent
- Add Actions
-> Objects -> Movie -> _level
- In the Expression field, enter the level which the sound-only movie was loaded into: 1
- In the Expression field, enter a period (dot separator) after _parent._level1
- From the contextual menu, select: stop
- Update the variable: playing
- Add Actions -> Actions -> Miscellaneous Actions -> evaluate
-
Add Actions -> Objects -> Movie -> _parent
- In the Expression field, enter a period (dot separator) after _parent
- In the Expression field, enter the variable name: playing
- In the Expression field, enter a space, an equals sign, and a space ( = )
- In the Expression field, enter the value: false

- Select the Play button instance at frame 2 of the Buttons layer
- In the Actions panel, select the prevFrame() statement in the ActionScript pane
- Tell the movie in level 1 to play:
- Add Actions -> Objects -> Movie -> _parent
(We need to go up out of the timeline of the movie clip to access the main timeline)
- In the Expression field, enter a period (dot separator) after _parent
- Add Actions
-> Objects -> Movie -> _level
- In the Expression field, enter the level which the sound-only movie was loaded into: 1
- In the Expression field, enter a period (dot separator) after _parent._level1
- From the contextual menu, select: play
- Update the variable: playing
- Add Actions -> Actions -> Miscellaneous Actions -> evaluate
-
Add Actions -> Objects -> Movie -> _parent
- In the Expression field, enter a period (dot separator) after _parent
- In the Expression field, enter the variable name: playing
- In the Expression field, enter a space, an equals sign, and a space ( = )
- In the Expression field, enter the value: true
- Switch back to editing the main timeline (preload scene)
Make each Toggle instance Self-aware
The problem that needs to be solved is that in each new scene - indeed, each time the toggle clip is instantiated at a keyframe - it will reset itself to present the stop button, even if the loaded movie is stopped. To solve this, an onClipEvent(load) event handler is placed on each toggle instance (at each keyframe which contains the toggle clip). In this example, only the toggle at keyframe 1 of the preload scene need to have this done (all others are already done).
- Select the Toggle Stop First instance at keyframe 1 of the Buttons layer
- Use onClipEvent(load) to perform actions only once, when the clip is first instantiated:
-
In the Actions panel: Add Actions -> Actions -> Movie Clip Control -> onClipEvent
The default event - load - is the one we want to use to trigger the following actions
- Add Actions -> Actions -> Conditions/Loops -> if
- In the Conditions field, enter: _parent.playing == false
The side-by-side equals sign is a test for equality, not an assignment
- Add Actions -> Actions -> Movie Control -> goto
- Go to and Stop (*) {selected}
- Scene: <current scene> {default}
- Type: Frame Label
- Frame: play
The toggle clip has a frame label ("play") at which the Play (sound) button is visible

EXPLANATION: When onClipEvent() is applied to a clip instance, the actions contained in the onClipEvent() become part of the timeline of the movie clip instance. The conditional if statement checks to see if the variable playing (located on the main timeline, not the clip timeline) contains the value false (meaning that the sound-only movie is stopped). If this is the case, we don't want to be displaying the stop button, so we tell the clip's timeline to go to the frame labeled: play. That frame contains the Play button.
This onClipEvent() group of statements needs to be attached to each instance of the Toggle clip (which has already been done in this example, except for this first instance).
- Save and test movie
Control over the playback of the sound-only SWF, loaded into level 1, is available in all scenes of the movie.
Result (instructor's source file): slideshow_production.fla
Result (instructor's source file): badmoonsound.fla
The Good, the Bad, and the Ugly
Good: Separates sound file (size) from main movie
Bad: Some timing issues over dialup connections
Ugly: Oh no, more ActionScript (want some cheese with that whine?)
Sound Objects
The notes for working with the
Sound Object are available in a separate handout: Sound
Object
Load MP3 Sound
With Flash MX, we can dynamically load MP3s just as we can SWFs (with loadMovie()). It requires the use of the Sound Object walks through the basics of working with the Sound Object (not as detailed as the handout referenced above).
Objects in Flash are like lumps of clay which can be molded into useful tools by means of ActionScript. You will never see an actual Object ... all you can do is see (or hear) the results of one working successfully.
- Download the source files:
- Click, right-click, or Control-click to download source file to disk: bluedreams60.mp3
- Click, right-click, or Control-click to download source file to disk: wolf.wav
- Establish or locate a folder to be used as a production folder (containing the source files), and move the downloaded files to that folder
- Create a new Flash document, and save the file as: sound_object.fla
- Rename Layer 1: Buttons; insert a new layer, and name it: Actions
- Import the sound: wolf.wav
The Basic Sound Object
- Select Keyframe 1 of the Actions layer, and open the Actions panel
We start by creating the new Sound object, and associating it with a variable (name). (It won't respond to "Hey, you", "Yo", or "Dude".)
- Add Actions -> Actions -> Variables -> var
- Variables: wolfSound =
(enter "wolfSound" plus a space plus an equals sign plus a space)
With the insertion bar to the right of the equals sign in the Variables field
- Add Actions -> Objects -> Movie -> Sound -> new Sound
Leave the Target parameter empty (a tooltip/hint shows Target as a possible parameter)
This creates the Sound Object and associates the (variable) name "wolfSound" with it
- We then associate a sound with it
If we are going to use a sound that has been imported into the project file, we must first associate a Linkage Identifier (name) with that sound ... only the Linkage Identifier can be used to access the sound via ActionScript
- Establish a Linkage Identifier:
- Select: wolf.wav in the Library, then select: Linkage ... from the Panel Options menu (upper-right corner)
- Linkage: Export for ActionScript [x] {selected}
- Identifier: wolfhowl
- Click: OK
- Attach the sound (via the Linkage ID) with the new Sound Object
- With Keyframe 1 of the Actions layer still selected, in the Actions panel, select the new Sound statement in the ActionScript pane
- Add Actions -> Objects -> Movie -> Sound -> Method -> attachSound
- Object: wolfSound
(The name of the Sound Object)
- Parameters: "wolfHowl" ... {include the quotation marks!}
(The Linkage Identifier)
This completes the work of creating a Sound Object, and associating ("attaching") a specific sound with it. You need to tell the sound object what to do ... otherwise, it is really dumb.
- Tell the Sound (Object) to play:
- With Keyframe 1 of the Actions layer still selected, in the Actions panel, select the attachSound() statement in the ActionScript pane
- Add Actions -> Objects -> Movie -> Sound -> Method -> start
- Object: wolfSound
(The name of the Sound Object)
- Parameters: {leave empty}
(The parameters allows you to set an offset into the sound at which the sound will begin playing, as well as setting the number of times the sound is to loop. Leaving the parameters empty will start the sound at the very beginning, and play only once)

- Save and test movie
Because the wolfSound.start() command was placed on a Frame, it is automatically triggered when the playback head enters that frame. We can also trigger the playback of that sound with an action attached to a button instance.
Play Sound from Button
- Open the Common Library of buttons, and drag any button onto the Buttons layer
- Select the Button instance, and open the Actions panel
-
Add Actions -> Objects -> Movie -> Sound -> Method -> start
- Object: wolfSound
(The name of the Sound Object)
- Parameters: 0,2
(0 seconds offset - start at the beginning; loop 2 times)

A word of caution about scope: working with the timeline hierarchy of Flash is very similar to the file-and-folder hierarchy of a Web site. You can link to files in the same folder by referencing just the other file's name: in Flash, you can reference named object that are in/on the same timeline just by referencing the object's name. The moment you start working with movie clips ... and especially nested movie clips ... you'll need to start applying paths to the target object (just as you do in HTML when referencing files that are not in the same folder).
- Save and test movie
The sound is played once (from the frame action), and loops twice when the button is clicked on
There are other Sound Object features which can be accessed in the same way that the Sound.start() action was ... in the screen snapshot above, some of the other methods are visible: setting the left/right pan position of the sound, setting the volume, and stopping the sound, among others.
loadSound
Once a Sound Object has been created, you can use the new loadSound() Sound Object method to dynamically load an MP3 file.
- Create a new Sound Object:
- Select keyframe 1 of the Actions layer, and in the Actions panel:
- Add Actions -> Objects -> Movie -> Sound -> new Sound
- In the Expression field, place the insertion at the beginning of the statement, before the word: new
- Enter: var mySound =
(The keyword "var", then a space, then "mySound", then a space, then an equals sign, then a space)
mySound is the variable name we are associating with the new Sound Object
- From the Common Library of Buttons, drag another button onto the Buttons layer
- Dynamically load the MP3:
-
With the new Button instance selected, open the Actions panel:
- Add Actions -> Objects -> Movie -> Sound -> Method -> loadSound
- Object: mySound
(The name of the Sound Object)
- Parameters: "bluedreams60.mp3",true
- The location of the file - the URL - must be in quotes
- follow the URL with a comma
- isStreaming (the 2nd paramter) has two potential values:
- true
makes it a Stream Sync type (independent timeline)
- false
makes it an Event Sync type (synchronized with timeline ... the whole sound file must be downloaded before it can be played)
for this example, set the isStreaming parameter to: true
- Save and test movie
Clicking on the new button instance should load the MP3 file and start it playing
Stopping the Sound (Object)
- Drag another Button from the Common Library of Buttons onto the Buttons layer
- Select the button instance, and in the Actions panel:
- Add Actions -> Objects -> Movie -> Sound -> Method -> stop
- Object: mySound
(The name of the Sound Object)
- Save and test movie
Once the MP3 has begun playing, clicking on the new button will stop it
Result (instructor's source file): sound_object_production.fla
| copyright © 2003 Stephen McManus |
july 15, 2003 |
Home