HO-FL6: ADDING SOUND TO FLASH

Size: px

Start display at page:

Download "HO-FL6: ADDING SOUND TO FLASH"

Suzan Carpenter
6 years ago
Views:

1 1 of 12 HO-FL6: ADDING SOUND TO FLASH Sound on the Web Sound can add a further dimension to your webpages. It can add mood, meaning, tone, and understanding. However, you need to take care to ensure that your use of sound is appropriate and fits with your design strategy, enhancing any webpages you create. The following table lists the most common sound formats found on the web:.au One of the earliest sound formats. Used by UNIX system..aiff Audio Exchange File Format originally developed by Apple Computers..MP3 A near-cd quality digital file format for sound files, which allows CD tracks to be reduced to around a tenth of their normal size without a significant loss of quality..midi files are generally the smallest of the sound files because they don't actually contain any digitised audio, just text commands, that control built-in sounds and musical instruments on the computer..ra The real audio format is the standard for streaming audio..swa The Shockwave audio format uses the MPEG compression of MP3.WAV The waveform audio format is the main format used on Windows based PCs. W3Schools provides a good overview of the different sound formats for the web, see: Using Sound in Flash You can use sound in Flash in several different ways to make your movies more interesting. You can import sounds and edit them after they are imported. You can attach sounds to different kinds of objects, such as buttons, and trigger them in different ways, depending on your desired effect. Although you can import sounds into Flash, there is no method within Flash for recording or creating sounds. Hence we will focus on using existing sounds and not recording new ones. There are two very basic steps to using sound in Flash: finding (or creating) an appropriate sound and importing it into Flash. You can import sound into Flash in the following formats: wav, aiff and mp3 (although there are some compatibility issues when it comes to sound formats between Macs and PCs). Generally though you should import the best quality sound possible. Flash stores sounds in the library along with bitmaps and symbols. As with graphic symbols, you need only one copy of a sound file to use that sound in any number of ways in your movie. deciding on how you want to use the sound. Flash allows you to use sound in a number of ways: make sounds play continuously in the background. synchronise animation to a sound track. attach sounds to buttons. edit sounds to give them a more professional appearance, for example by making the sound fade in and out. There are two basic types of sound in Flash: EVENT SOUNDS - must download completely before playing, they then continue until stopped. Event sounds are suitable for attaching to buttons. STREAM SOUNDS - begin playing as soon as enough data has been downloaded, and are synchronised to

HOFL6A: Event Sounds - Adding Sound to a Button 1. 2. Open the flash movie (mmfl-ho4b.fla) that you created in HOFL4, select File/SaveAs and save as mm-hofl6a.

Move the 2 buttons to the buttons folder: 4. 5. 6. You will need to find some royalty free sounds for use in your web pages.

2 2 of 12 the timeline. Streaming sounds are suitable for long backgrounds and they play as long as the layer containing the sound continues in the time line, or until the user clicks on the stop button. HOFL6A: Event Sounds - Adding Sound to a Button Open the flash movie (mmfl-ho4b.fla) that you created in HOFL4, select File/SaveAs and save as mm-hofl6a.fla Open the Library and create 2 folders called: buttons and sounds. To do this right click anywhere in the Library and select New Folder from the pop-up menu: 3. Move the 2 buttons to the buttons folder: You will need to find some royalty free sounds for use in your web pages. For now, click here to download a number of sound files that you can use, but you should also search on the web to find other royalty free sounds. Save and un-zip the mm_sounds.zip file into a new folder called I:/myfiles/mm/sounds/ Select File/Import/Import to Library and import the three sounds (kickdrum, bells and drumroll) into the Library: 7. Move these files to the sounds folder. Select a sound and click on the play button to hear the sound (Note: this may depend on whether your PC is fitted with speakers):

each instance of the button and not just for the single instance of the button in your movie.

3 3 of You are going to add a sound to the Down state of each of the buttons, so that a sound will play when the user clicks the button. The simplest way to do this is to add the sound to the button symbol in the library, as in this way the sound will play for each instance of the button and not just for the single instance of the button in your movie. To add sound to the downstate of the prev_btn, double click on the previous button icon in the Library to reveal the different button states. Then Insert a new layer and rename it sounds: 10. Select the Down fame of the Sounds layer and insert a keyframe. With the Down frame of the sounds layer still selected use the Properties panel to add a sound, by selecting drumroll.wav from the list of Sounds:

4 of 12 11. You should now see a sound trail in the Down state, that spreads across into the Hit state of the button? If so Click on click on Scene 1 to close the button: 12. 13.

And therein lies the secret to using sound in Flash, it should be used sensibly and appropriately to enhance the user's experience! Not drive them away from your website).

4 4 of You should now see a sound trail in the Down state, that spreads across into the Hit state of the button? If so Click on click on Scene 1 to close the button: Select Control/Test Movie on the main menu to test your movie. The previous button should now have a sound attached to each it?! (Although this could be quite irritating, don't you think. And therein lies the secret to using sound in Flash, it should be used sensibly and appropriately to enhance the user's experience! Not drive them away from your website). Repeat steps (9) to (11) adding the bells sound to the next_btn (Note: we are adding sounds here so you understand how to do this, but ultimately you will need to find more appropriate sounds for your buttons!): 14. Click here to download the completed mmfl-ho6a.fla file. HOFL6B: Streaming Sounds - Adding Sound to a Movie Open the file you created in Flash-handson5, or click here to download a completed version of the Images of Twickenham file. Save the file as mmhofl6b.fla. You will use this to add streaming sounds to your movie. Open the Library and create 3 folders called: buttons, images and sounds. To do this right click anywhere in the Library and select New Folder from the pop-up menu. Move the buttons to the buttons folder and the images to the images folder Select File/Import/Import to Library and add a suitable sound file to the library, eg. Classical.wav, and move the file to the sounds folder::

the sound and then set the sound options in the Properties panel.

5 5 of Create a new layer for the sound by selecting Insert/Timeline/Layer on the main menu or by clicking on the Insert Layer button. Note: Whenever you add sounds to a movie it is good practice to create a new layer for the sound and then set the sound options in the Properties panel. Double click on the layer name and change it to Sounds: 7. Select the frame 1 of the Sounds layer use the Properties panel to add a sound, by selecting Classical.wav from the list of Sounds: 8. This adds the sound to the Sounds layer:

of adding sound. What do you observe or should I say hear!

) You should find that you have no control over the sound, it simply plays once and then stops.

panel. To do this select frame 1 of the Sounds layer and in the Properties panel set Sync to Loop: 12.

6 6 of Save your document and then select Control/Test Movie on the main menu to test your movie to examine the effect of adding sound. What do you observe or should I say hear!? (Again, you won't hear anything if your PC doesn't have speakers attached!) You should find that you have no control over the sound, it simply plays once and then stops. In order for the sound to play continuously (or loop), you need to adjust the Sync: option on the Properties panel. To do this select frame 1 of the Sounds layer and in the Properties panel set Sync to Loop: 12. The Properties panel provides you with a series of effects that you can apply to your sound, such as Fade In and Fade Out: Experiment with changing these settings to examine their effect on the sound in your movie. The Properties panel also enables you to edit the sound profile/envelope by clicking on Edit:

7 of 12 15. This opens the Edit Envelope panel, which shows the current effect in the top left hand corner (1).

7 7 of This opens the Edit Envelope panel, which shows the current effect in the top left hand corner (1). Clicking on the Zoom Out button in the bottom right hand corner (2) reveals more of the sound profile. In the current case the sound profile shows that the sound phases in: 16. Change the Effect to Fade Out: 17. Use the Scroll bar to move back to the start of the sound envelope and click on the solid black line at point 0 and 5. This adds small black squares to the sound envelope. Drag the first black square down to the axis, which means that the sound should now Fade In and Fade Out:

8 of 12 18. When you close the Edit Envelope the Effect: in the Properties Panel should now be set to Custom: 19.

So we need to give the user to option to switch off (or switch on) the sound.

Controlling Sound with On/Off Buttons Although sounds can add to the mood and impact of your site there will be times

8 8 of When you close the Edit Envelope the Effect: in the Properties Panel should now be set to Custom: 19. We still have one major problem, don't you think? After a while the sound can be annoying! So we need to give the user to option to switch off (or switch on) the sound. To do this we need to add on/off controls (i.e. buttons). Controlling Sound with On/Off Buttons Although sounds can add to the mood and impact of your site there will be times when the user wants to switch off the sound! So it is good practice to include an On/Off switch for the sound. 1. Create a new layer called Soundbuttons: 2. Add text and graphics to this layer, e.g. 'Sound', and create two new buttons: one labeled 'On' and the other 'Off':

rectangle to the Hit state of the button: 5.

converting these to a button symbol called: soundoff_btn.

9 9 of Select the ON text and associated graphic and convert to a button symbol called: soundon_btn: 4. When creating the button ensure that you had a solid rectangle to the Hit state of the button: 5. Repeat, selecting the OFF text and associated graphic and converting these to a button symbol called: soundoff_btn. Again make sure you add a solid rectangle to the Hit state of the soundsoff_btn: 6. Move the two new buttons into the button folder in the Library:

10 of 12 7. Next in the Library right click on the sound file (Classical.

Set the identifier text = sound1 and ensure the 'Export for ActionScript' and 'Export in first frame'

Note: step 7 gives the sound file an 'identifier' which can be called and used by ActionScript.

10 10 of Next in the Library right click on the sound file (Classical.wav) and select Linkage from the pop-up menu. Set the identifier text = sound1 and ensure the 'Export for ActionScript' and 'Export in first frame' options are checked: Note: step 7 gives the sound file an 'identifier' which can be called and used by ActionScript. Next select frame 1 of the Soundbuttons layer and press [F9] to being up the Actions panel and insert the following ActionScript code: my_sound = new Sound(); my_sound.attachsound("sound1"); (Note: this creates an instance of ActionScript's Sound Class, whose source is sound1 (the identifier in the

$Select the soundsoff_btn and press [F9] to bring up the Actions panel and add the following ActionScript code: on (release) { stopallsounds(); } 11.$ $Finally select the soundson_btn and press [F9] to bring up the Actions panel and add the following ActionScript code: on (release) { _root.my_sound.start(0,50); } 12. 13. 14.$

11 11 of library for the Classical.wav sound file) The next steps involve adding actions to our buttons. Select the soundsoff_btn and press [F9] to bring up the Actions panel and add the following ActionScript code: on (release) { stopallsounds(); } 11. This simply stops all sounds when the user clicks on the OFF button. Finally select the soundson_btn and press [F9] to bring up the Actions panel and add the following ActionScript code: on (release) { _root.my_sound.start(0,50); } When the user clicks on the ON button this starts the sound instance (my_sound) playing. The optional parameters (0,50) control where the music starts playing (0 milliseconds) and how many times it loops (50). Save your movie and press Ctrl+Enter to test it out. What do you observe? One thing you should note is that the music plays on movie start-up. To stop the music playing on start-up and allow the user even greater control, i.e. to allow them to start the music playing, we need to edit the Properties of the Sound layer. If you remember we earlier added the Classical.wav to frame 1 of the sound layer. But this is no longer necessary now that we have added ActionScript controls that start the music playing. So we can remove the Classical.wav from the Sounds layer. To do this select frame 1 of the Sounds layer and in the Properties panel set the Sound to None (or simply delete the Sound layer as it is no longer needed!):

12 of 12 15. 16. 17. Finally resave your movie and retest. Click here to download the completed mmfl-ho6b.fla file. Note: Listen carefully to the movie? Do you notice anything unusual?

12 12 of Finally resave your movie and retest. Click here to download the completed mmfl-ho6b.fla file. Note: Listen carefully to the movie? Do you notice anything unusual? (If so, think about what you need to do to correct the problem). HO-FL6: READING AND RESOURCES W3 Schools Multimedia Tutorials: Adding Sound to your Web Site: Adding Sound to the Web: How to put sound and video into web pages: /factsheet24.shtml#section24.1 How to Include Sound in your Web Pages: Different Ways to Play a Sound from a Web Page: Smartwebby - adding an on/off button (Flash MX2004), see: /sound_button.asp. Flash Kit - Audio Tutorials: Adding Sound to Flash: /flash.htm Project Cool - Audio on the Web: Using Audio in Flash: Sound in Flash: Audacity (free, open source software for recording and editing sounds): last updated 06 February 2009

HO-FL1: INTRODUCTION TO FLASH

HO-FL1: INTRODUCTION TO FLASH Introduction Flash is software authoring package for creating scalable, interactive animations (or movies) for inclusion in web pages. It can be used to create animated graphics,