create your own

Flash CS3 and CS4 Tutorial, Sound Basics

74
rate or flag this page

By frenchsquared


Flash CS3 Tutorial, Sound Basics

In this Flash CS3 Tutorial I am going to go over Using Sound, after all what Flash game would be complete with out the great sound effects. In Flash CS3, there are basically three ways to play a sound:

1. Import the sound into the library, then add the sound to a key frame in the time line.

2. Import the sound into the library and then use ActionScript to dynamically control the sound.

3. Use ActionScript to dynamically load and play the sound.

This Flash CS3 Tutorial is not really going to cover the first way to play a sound. You should know how to import an image into your library, you import a sound the same way. And just as you would drag an instance of an image onto the stage, you can also drag a sound onto the stage. The sound will simply play every time the key frame plays. Let work on the second way of playing a sound.

A sound file has already been imported into the library. However, if you wish to use your own audio file you can do so by going to File - Import - Import to Library, and select an audio file . Flash CS3 by default will allow you to import, AIF, WAV and MP3 files. There are additional plug ins that enable more files types. Right Click the audio file called Ring.wav. Select Linkage, Check export for ActionScript, leave the base class alone, but you may change the Class to any name you can remember. This CS3 Tutorial is simply going to delete the .wav from the Class name, thus calling the sound Ring. CS3 Linkage Panel

Now, something needs to be done to call the sound. As normal select the first key frame on the actions layer and press F9 to open the actions panel. In Flash CS3 using ActionScript you need to create a new instance of just bout anything you want to work with. So, create a new instance of the sound by creating a new variable and setting it to the sound. In the example code the variable phoneRing was created, set as equal to a new instance of Ring. The next line of code actually tells flash to play the sound. After typing, or copying and pasting the code to your file, you may test it.

var phoneRing:Ring = new Ring() phoneRing.play()

Press Control-Enter to hear your sound play once..

The last method of playing a sound is to load the sound dynamically. The advantage to dynamically load sounds is that the sounds will not increase the size of your .swf, thereby keeping the download times lower. Copy the code from the example and paste it in the actions panel below the code that makes the phone ring. URLRquest is a new method introduced in ActionScript 3.0. The getURL method no longer exists, therefore you may want to get familiar with URLRequest, but not in this CS3 Tutorial. In the example code you are simply telling Flash to go get the file listed in between the quotation marks. You can use http:// if the file is not located next to the .swf. Next in the example code, the variable Music is created and defined as a sound. Lastly, the variable music is loaded with the file from the URLRequest. At this point the sound is loaded but nothing is being done with it. Lets do something with it.

var yourRequest:URLRequest = new URLRequest ("SideOfABullet.mp3") var Music:Sound = new Sound() Music.load(yourRequest)

You should have noticed the stop and play button located in the start01.flv file. The final part of this Flash CS3 tutorial will be using those buttons. Before, ActionsScript can control the sound it needs to have a soundChannel defined. The example code creates a variable called controlMusic and data types it as a sound channel. You can then control the sound by simple calling on the variable controlMusic.

var controlMusic:SoundChannel

Add the final example code to the actions panel. You should be familiar with most of this code. You are simple adding event listeners to the stop and play buttons that were created for you. It is the code inside the events that should be new. First when the play button is clicked the sound channel you created earlier is set a Music.play(). remember you earlier defined Music as being equal to the audio file loaded when the .swf is called. So, the code associated with the play button is simple telling the music to play. It would stand to reason that the code associated with the stop button would then simply tell the music to stop. Just, remember that you have to control the sound channel, and not the sound directly.

play_btn.addEventListener(MouseEvent.CLICK, playMusic) function playMusic(event:MouseEvent):void{ controlMusic= Music.play() };

stop_btn.addEventListener(MouseEvent.CLICK, stopMusic) function stopMusic(event:MouseEvent):void{ controlMusic.stop() };

Press Control-Enter and test the file.

Congratulations, you should now be able to add sound to your website, note that you do not need to make the buttons play music, you have the basic code to make your navigation play a chime when clicked.

Download Flash CS3 Source Files





How to do that on a computer

  • CSS, How to understand inline and block level elements.

    Block level  elements are normally displayed as blocks with line breaks before and after. Examples of block level elements include paragraphs, headings, divs and block quotes. Inline elements are not displayed as blocks. The content is displayed in lines and there are no line breaks before and after. Examples of inline elements include emphasized text, strong [...] - 3 months ago

  • CSS, How To tweak css for only Safari?

    If you have spent anytime dealing with CSS you have run into issues with a browser rendering code incorrectly. You may even have gone as far as to make several style sheets and use a browser check to tell the browser which one to use. Most of my websites dont need more then one style [...] - 3 months ago

  • CSS, How to Hide Styles from Older Browsers?

    Some older browsers, such as Netscape Navigator 4 and IE 4, have poor support for CSS. It is possible to hide styles from these browsers using specific media types and @import rules. All styles will be hidden from Netscape Navigator 4 by changing the link element’s media type from screen to screen, projection. Netscape Navigator 4 [...] - 3 months ago

  • CSS, How to use @import styles

    @import Styles? Header and external style sheets also can import other style sheets using the @import rule. The @import rule must be placed before all other rules in the header or external style sheet. @import “advanced.css”; p { font-family: arial, helvetica, san-serif; margin: 1em; padding: 1em; background-color: black; } Imported styles can be used to link to multiple CSS files as well as to [...] - 3 months ago

  • CSS, How to use External Style Sheets!

    The third method of applying styles to  document involves linking to external style sheets. External style sheets are the most appropriate method for styling documents. If styles need to be changes, the modifications can take place in one CSS file rather than all HTML pages. To change the header style to an external style, move the [...] - 3 months ago

  • CSS, How to Use Header Styles

    Header styles also can be used to style the <p> element. The CSS rules can be placed in the head of the document using the style element. Like inline styles, header styles, header styles should be avoided where possible because the styles are added to the HTML markup rather than in external CSS files. There are [...] - 3 months ago

  • CSS, How to Apply Inline Styles.

    CSS, Inline styles can be applied directly to elements in the HTML code using the style attribute. However, inline styles should be avoided wherever possible because the styles are added to the HTML markup. This defeats the main purpose of CSS, which is to apply the same styles to as many pages as possible across [...] - 3 months ago

  • Twitter Weekly Updates for 2009-08-09

    New blog post: CSS, What is a <div> http://bit.ly/Sbfu # Flash, ActionScript tutorials on loops http://bit.ly/QMq8t # Great PHP Tutorial on using include and require. Include is a great way to control your header or footer. http://bit.ly/pnX7g # Install OSX on your PC (Gigabyte GA-EP45-UD3P): http://digg.com/d3zt8L?t # CSS How To, IDs have more weight then classes. If a class [...] - 3 months ago

CSS, How to

  • CSS, How to work with content areas.

    The content are of a box can be given width, height, and color. Width and height can be specified in points (equal to 1/72 of an inch), picas (equal to 12 points), pixels, ems, exes, millimeters, centimeters, inches, or percents. - 6 weeks ago

  • Twitter Weekly Updates for 2009-09-20

    My Farmville is broken, cant access, gifts, market, or ribbons # Farmville and zynga are a rip off. Watch out. There are still some glitches in the game and zynga told me to bad Im unimportant. # wouldnt it make more since for a developer to fix broken issues rather then add new features. Well not farmville, [...] - 2 months ago

  • Twitter Weekly Updates for 2009-09-06

    I need 5 more neighbors on FarmVille help me out. http://bit.ly/tLsni # looking for flash tutorials and how to guides check out – http://frenchsquared.com/ # Powered by Twitter Tools - 2 months ago

  • Twitter Weekly Updates for 2009-08-30

    New version of Wordpress theme adStyle is live at: http://wordpress.org/extend/themes/adstyle # Just finished installing OS X 10.6 on my new Solid State drive. Very impressed, seems noticeably faster. # I need more neighbors on Farmville for Facebook. Hit me up as a friend. http://bit.ly/tLsni # playin farmville on my macbook 10.6 and new solid sate sata II [...] - 2 months ago

  • CSS, How to properly use Border Styles.

    The border properties specify the width, color and style of the border of an element. Shorthand border properties include border-top, border-bottom, border-right, border-left and border. - 3 months ago

  • CSS, How to Padding Padding and more Padding

    Padding can be applied to the outside edges of the content area of any block level or inline element. Padding creates the space between the edge of the element and its content. - 3 months ago

  • Twitter Weekly Updates for 2009-08-23

    Wordpress liked my theme. They have asked that a make a few revisions and resubmit. Sounds like my theme may get accepted! # how long does it normally take for wordpress to get back to you after submitting a theme? # Just finished update my first wordpress theme http://wordpress.org/extend/themes/adstyle # New wordpress theme made for adsense check it out [...] - 3 months ago

  • CSS, How to deal with background color and images.

    The background-color property sets the background color of an element. The backgound-image property applies a background image to an element, which will appear on top of any background-color. - 3 months ago

working