FlashSound API sonify sites with Flash
News           Documentation           Tutorials           Extensions           Download           Forum           Contact

• Overview
• New in this Version

• API Index
• Static Methods
• Static Properties
• Instance Methods
• Instance Properties

» Tutorials
• Compatibility
• Version History
• License
• Logic Flow chart
DocumentationTutorials

Sonify Sites with Flash

The first step in sonifying a web site with flash is to create a "sound only" movie. Sound only movies consist of specially constructed movie clips that contain a sound and simple ActionScript.

  1. Import a sound into Flash.
  2. Create a new movie clip on the main timeline and give it unique instance name. Use the movie clip instance name in javascript to start or stop this sound.
  3. Add a stop action on frame 1 to prevent autostart of the movie clip.
  4. Add a label called "stop" to frame 5 of the labels layer.
  5. Add your sound to frame 5 of the sounds layer and set sync = stop.
  6. Add a stop action to frame 6 in the actions layer.
  7. Add a label named "start" to frame 10.
  8. This step is optional but recommended. Add a stop sync sound command to frame 10 in the sound layer.
  9. Add your sound to frame 11. If you skipped step 7, place your sound in frame 10.
  10. Add a stop action to frame 9 to prevent automatic looping of the movie clip.
  11. Choose compression options for your sound and publish your "sound only" swf.

Sound Only movie clip

For help on creating "sound only" movies, read the online article Flash Interactive Sound Design Part 1: The "Timeline" Approach.

Using the FlashSound API within your web page
After creating a "sound only" swf, you can begin to code a web page for sound. Coding with the FlashSound API typically has four steps:

  1. Source in flashsound.js JavaScript library
  2. Create a FlashSound instance.
  3. Embed your swf.
  4. Play/Stop sounds with JavaScript link events like onClick, onMouseover, and onMouseout.

1) Add the FlashSound API JavaScript library, flashsound.js, to the head section of your web page. This provides your web browser with the javascript content needed to use the FlashSound API. Download the flashsound.js (windows users right click, mac users option click, and save from the menu)

<html>
<head>
<title>Playing with the FlashSound API</title>
<script language="Javascript" src="pathto/flashsound.js"><script>

2) Create a FlashSound instance. An instance is a JavaScript container holding the swf that you eventually want to control with javascript. Your instance connects the SWF to the FlashSound API so that you may use javascript to control playback of the swf

<script language="Javascript">
var mysound = new FlashSound( );
</script>
</head>

3) Embed your swf content at the end of the html document just before the closing <body> tag. If the user's browser/player is compatible with the FlashSound API, JavaScript writes out the appropriate object/embed tags for you to create a 1 X 2 pixel hidden flash player in the document wherever you place your embedSWF( ) statement.

<body>
web page content.......

<script language="Javascript">
mysound.embedSWF("your.swf");
</script>
</body>
</html>

Notice that we use the instance name in conjunction with the embedSWF( ) method. This tells JavaScript that the instance named "mysound" is a JavaScript container for "your.swf".

4) Explore using the FlashSound API to control playback of your "sound only" SWF by adding playback methods to links, or by setting compatibility methods or embed properties in script tags.

<a href="javascript://"
onMouseover = "mysound.gotoAndPlay('/sound1','start')"
onMouseout = "mysound.gotoAndPlay('/sound1','stop')"
onClick = "return false">Hear a cool sound</a>

In this link we use a dummy url "javascript://" and the onClick = "return false" to prevent a web browser from acting on the url. This is a common technique for making html links that play sounds without loading a new web page. The gotoAndPlay( ) method requires flash ActionScript slash notation to find movie clips in a SWF. The value start and stop tell the flash player which frame to play or stop a sound. The start frame contains your sound. When flash plays this frame you sound plays. The stop frame contains a stop sync sound command. When flash plays this frame your sound stops.

Copy and paste the complete code template

Keep in mind that anytime you want to manipulate embedded swf content with JavaScript, you must always use the corresponding instance name with a FlashSound API method. For example, if you embed "coolsound.swf" using the instance name "mysound", then you must use the "mysound" instance name with all FlashSound API methods in order to control playback of "coolsound.swf".
Copyright © 2003 Hayden Porter, All rights reserved.