Did You Know?


Working With Sound

By using sound in your animations you can enhance the experience of the user. To use sound in Flash, you must first find the sound file that you wish to use and import it to the library. Flash recongnizes many different sound file formats including .mp3 and .wav.

It is most common to use .mp3 file format for background music and .wav for sound effects such as timed sounds to go along with an event, or recorded narration to go along with your animation.

Start by creating a new Flash file and in the property inspector, leave the size as 550 x 400 and the canvas colour black .

**** Important****

Set the framerate to 12fps. This is important because the soundtrack will be timed according to the length of the animation.

Save this file as sound.fla in your Assignment 14 folder.


1. Create the layers seen below and name them accordingly.


2. Create a graphic symbol for each piece of text seen below and name them accordingly:

***Note*** the blue box around the text is simply the bounding box that shows the symbol is selected. You do not have to create it.

Symbol Name text1

Symbol Name text2

Symbol Name text3

Symbol Name text4

Symbol Name text5

Symbol Name text6

3. Right-click on each image file below and choose "save link as" to save the image file to your Assignment 14 folder.








4. Choose File > Import To Library and import all six photos

You Library should now appear as seen below:

5. Choose Insert > New Symbol and create a graphic symbol called photo1

This will create a new symbol and place you inside of it on the stage

6. Choose the soundphoto1.jpg file from the library and drag it onto the stage

7. Choose Window > Align to bring up the align panel and align the picture to the horizontal and vertical centers of the stage.

8. Click on Scene 1 in the Edit bar to return back to the main timeline.

9. Repeat this process for the rest of the photos so that they are all converted to symbols.

Your library should now appear as seen below:


10. Select frame 20 of the text1 layer and drag the text1 symbol from the library onto the stage.

11. Use the align panel to center the symbol horizontally and vertically to the stage.

12. Insert a keyframe on frame 30, then again on frame 50 and once again on frame 60.

13. Use these keyframes to create an alpha tween where the text1 symbol fades in and fades out.

Your timeline should appear as seen below:

Your animation should also appear as seen below:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

14. Select frame 70 of the photo1 layer and drag a the photo1 symbol from the library onto the stage.

***IMPORTANT**** Remember to drag the photo1 symbol, not the photo1.jpg from the library.

15. Use the align panel to center the symbol horizontally and vertically to the stage.

16. Insert keyframes at the same intervals as text1 symbol (skip 10, insert, skip 20 insert, skip 10 insert)

17. Create the same alpha tween effect as you did with the first text symbol.

Note*** It is important that the number of frames between keyframes stays the same for each alpha tween so that the fade effect appears even and the text appears long enough to be read.

Your animation should now appear as seen below:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

18. Repeat this process with the remaining text and image symbols until your animation appears as seen below:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Adding Sound

19. Right-click on the link below and choose "Save Link As" and save it the file to your assignment 14 folder.

soundtrack song

20. Choose File > Import To Library, navigate to the wonderfulworld.mp3 file and choose Open

This will place the file in your library (use Control + L to open your library)

21. Press the button to preview the sound.

Inserting the Sound File

Once the sound is available in your library you must make it part of the timeline to include it in your animation. Just like everything else, sounds deserve their own layer so that we can control them independently of other shapes and symbols on the timeline.

22. Create a new layer

23. Name the layer Sounds

24. Select frame 20 on the sound layer and insert and blank keyframe

Note*** the sound will begin playing when the timeline reaches frame 20. This makes timing of sounds easy by inserting them in the appropriate frame of the timeline.

25. Choose the wonderfulworld.mp3 file from your library and drag it to the stage.

You will notice that a line appears in the sound layer that represents the sound file.

Your animation will now play the sound file as part of your animation click on link below to see the result:

Test Movie

You will notice that once the animation plays through and restarts, the sound overlaps itself as it continues playing from the first time through and restarts with the second time.

To avoid this, we can edit the sound clip to end when we want.

Setting Sound Options

The first option we must edit is how the sound will play. For this we look to the property inspector.

To Set How The Sound Will Play

26. Select keyframe 20 where the sound begins.

This will give you sound editing options in the property inspector

27. In the Sync drop down box choose Start

This will make it so that your sound begins playing when you want it to, but no other instance of the song will begin until this one has finished.

In this case, however, because the sound file is longer than the animation, using Start still leaves us with the problem of having the sound file continue as the animation repeats.

Editing Sound Clips

28. With the initial sound keyframe selected, choose Edit from the property inspector.

This will bring up the Edit Envelope.

In the sound envelope you can have sounds begin and end at any point during the sound clip. You can also have your sounds fade in and out.

By default the edit envelope measured the sound in seconds (time) for our purposes we will want to measure the song in Frames.

29. Make sure the Frames button is selected.

30. Use the zoom out feature until you can't zoom our anymore. Then use the scroll bar to scroll to where the sound waves end.

You will see that there is also a Time Out Slider that can be adjusted to cut the clip short.

40. Drag the Time Out Slider back to the 500 frame mark. This won't be exact, but we will adjust it in the next step.

This should gray-out the remainder of the sound clip.

41. Zoom in and adjust the Time Out Slider until you can place it right at the 590 frame mark

Why 590 Frames? The whole animation ends at frame 610, but the sound starts at frame 20, so mathematics tells us the sound clip should play for 590 frames.

If you test your movie now, it should begin and end the sound with appropriate timings, but there is still the problem of an abrupt ending of the sound. To fix this, we can add a fade out effect to the clip.

To Fade In/Out

In the Edit Envelope you will notice that there is a left channel (top pane) and a right channel (bottom pane). In each channel there is a sound level handle that controls the level of sound. This is where we will work to add a fade out effect.

42. Scroll to Frame 580 and click on the sound level line at the top of the left channel.

This will add a handle to the line.

43. Click again on the same line, but at Frame 590.

This adds yet another handle. You will also notice that it adds a handle for both channels at these locations.

44. Drag the handle at frame 590 down to the bottom for both channels.

Choose ok and test your movie. It should now play as seen in the movie clip shown below:

Test Movie

****Note**** You can also use the same method to fade in on a sound clip.

Save your flash file and go to the next lesson to continue learning about sound.