Browse DevX
Sign up for e-mail newsletters from DevX


FlashSound API: The Sound of Invisible Flash  : Page 7

Learn to use Flash to add interactive sound to your Web pages.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Sonify Your Web Site: Adding Interactive Sound
After creating a sound-only SWF file, you can begin to code a Web page for sound. Coding with the FlashSound API typically requires four steps:

  1. Set the path to the flashsound.js JavaScript library
  2. Create a FlashSound instance.
  3. Embed your SWF.
  4. Play or stop sounds with FlashSound JavaScript API commands attached to links, buttons, or graphics.
Copy and paste the complete code template. You may find it helpful to view the template while reading through the explanation of each step.

Step 1: Set the path to the flashsound.js JavaScript library

Add a script reference to 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. You can download the flashsound.js script file from Sonify.org (Windows users right click, Mac users option click, and save from the menu). Here's the script you need to add. Replace the pathto portion of the URL with the path to the script on your server.

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

Step 2: Create a FlashSound API instance

An instance is a JavaScript container that holds a reference to the SWF file that you want to control. The new instance connects the SWF file to the FlashSound API, letting you use special FlashSound API JavaScript commands to control playback of the SWF file. Place the script in the <head> section of your HTML file.

<head> <script language="JavaScript"> var swfjavascriptname = new FlashSound( ); </script> </head>

Step 3: Embed your SWF

Embed the SWF content at the end of the HTML document just before the closing <body> tag. To embed your SWF, add the URL of the SWF to the embedSWF() method. This embeds a 1 by 1 pixel hidden instance of the Flash Player in the document wherever you place the embedSWF( ) statement. For example:

<body> web page content....... <script language="JavaScript"> swfjavascriptname.embedSWF("your.swf"); </script> </body> </html>

The embedSWF( ) method is one of the special FlashSound API JavaScript commands. The method tells JavaScript that the instance named named in the method is a JavaScript container for the SWF (in the example it's called "your.swf"). Keep in mind that anytime you want to manipulate embedded SWF content with JavaScript, you must use the corresponding instance name with a FlashSound API command. Each SWF must have a FlashSound API instance and an embedSWF( ) statement.

Step 4: Create a link with onMouseover and onMouseout events

The link starts the sounds when the user moves the mouse over the link and stops the sound when the mouse leaves the link. Use the TGotoAndPlay( ) method to play sounds in your SWF.

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

The dummy href="javascript://" and the onClick="return false" attributes in the link prevent the page from unloading if a user clicks this link.

The TGotoAndPlay(targetpath, frame) method is the most common FlashSound API method for playing sounds. The method finds the specified movie clip in your embedded SWF, and then goes to the specified frame number or label and starts playing the movie clip from that point.

Clip target paths are much like URLs. For example, the URL "/products.html", indicates that the "products.html" Web page is in the root directory; the forward slash "/" means root directory. In Flash, the syntax, "/" represents the root timeline instead. So if you attach a movie clip with the instance name "coolsound" to the root timeline, the target path would be "/coolsound". This tells the Flash Player to find the movie clip with the instance name "coolsound" attached to the root timeline. For more information on target paths and slash syntax read "Understanding Slash Syntax Target Paths."

In the Creating Sound-Only Movies section of this QuickStart, you added sounds to a movie clip with frames labeled "start" and "stop." The frame labeled "start" contained your sound. When the Flash Player plays this frame the sound plays. The frame labeled "stop" contains a stop sync sound command. When Flash plays this frame your sound stops. To create interaction, you tell the Flash Player which sound to control with the target path and whether to start or stop by playing the "start" or "stop" frame.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date