Programming Tutorials Browser Tutorials Articles Struts Tutorials Hibernate Tutorials

Search: 

  Tutorial: Flash Audio Flash Sound on HTML Web Pages Tutorial

With this technique there is no Flash interface on your web page - only sound. An invisible Flash movie is linked through standard HTML links or plays automatically when the web page loads.

Tutorial Details:

Flash Tutorial: Sound on HTML Web Pages using Flash & JavaScript - webwasp.co.uk - Official Macromedia Affiliate
Free Flash Tutorials
Tutorials ? Downloads ? Newsletter ? Bulletin Board ? Contact Us
Members ? Business ? Web Design ? Home ?
Flash Tutorial - Flash Sound on HTML Web Pages
119 Intermediate
Flash Compatibility: MX 2004 (Principles and ActionScript are the same in Flash 4 and up)
Written by: Rabid Lemming
Length: 1400 words
Assumed Knowledge: Basic knowledge of ActionScript, HTML and JavaScript
Level: Medium
Access: Free Tutorial
The aim of the tutorial is to learn how to add sound to any web page that 99% of all users will be able to hear. With this technique there is no Flash interface on your web page - only sound. It works through standard HTML links or plays automatically when the web page loads. It is compatible with all major browsers and allows you to play different sounds for different HTML links. It also allows you to play many different music file formats like wav, mp3 etc. This works by placing an invisible Flash Movie on your web page that users can't see!
Cross Ref: If you want to add sound to your Flash Movie (and not your HTML web page) see the tutorial on: Using Sound in Flash
Important Note: Many sites use this method for playing sound on their site because of it's ease of use, compatibility for all browser, music types, user friendliness, and ability to play different sounds on different links. It is also possible to preload the Flash file so that it loads invisibly when the web page loads. Having said that if you have a large sound file or multiple sound files in one Flash Movie, then because of the file size it may take some time for the sound to start playing when the user rolls over a link. This may require the user to rollover the link several times before the sound file starts playing. Try to keep the swf file (Flash Movie) size down to a minimum and refrain from using large music files. Instead use multiple swf files for each link instead of one swf file for all the links. Don't use the loop feature unless you need it. This is not a major problem and most user don't experience difficulties but some users on slow Internet connections may not hear the sound, or even realise that there is any sound to be heard!
Example: Download the invisible Flash file Int 119a
Rollover Here To Play A Sound
Rollover Here To Start Playing A Looping Sound
The above are two examples of how to make an Invisible Sound Flash Player.
Step one: Creating the Flash Movie
Open a new Flash Movie.
Save your new Flash Movie as: Sound
Import your sound clip into Flash: File > Import > Import to Library
Note: If you don't have a sound file ready, do a search your hard drive for: mp3 or wav
Webwasp members can download the sound file used on this page: Login or Become a Member
Create a new blank Movie Clip: Insert > Symbol (Short Cut Key: Ctrl + F8)
Give it a name: Sound Player
For Behavior select: Movie Clip
Click: OK
If the Edit Bar is closed, open it: Window > Tool Bars > Edit Bar
In the Edit Bar Click on the Tab:
This should take you back to the main stage. The main stage should still be empty.
If the Library is closed, open it: Window > Library (Short Cut Key: F11)
Drag the new Movie Clip onto the: Main Stage
Give it unique Instance Name: MySoundPlayer
You will use the Movie Clip instance name in the JavaScript to start or stop this sound.
Open up the Movie Clip you just created. Right Click and select: Edit
Add two Layers, so that you have a total of 3 Layers. use the Insert Layer Button:
Rename the top Layer: Actions
Rename the middle Layer: Labels
Rename the bottom Layer: Sound
In the Actions Layer add the following ActionScript:
stop ();
stopAllSounds();
In the Labels Layer in frame 1, add a label called: stop
You add frame Labels from the Property Inspector: Window > Properties
Right click on frame 5 (Mac: Ctrl + click) of the Labels Layer and select: Insert Blank Keyframe
In the new Keyframe add a label named: start
In frame 5 of the Sound Laye r insert a: Blank Keyframe
In Layer 5 of the Sound Layer add your: Sound
Note: To add a sound to a Keyframe you need to first import a sound into the Library (Step 3 above) .
Then you select a Keyframe and use the Sound Option in the Property Inspector to add the sound to the selected frame.
In frame 10 of the Labels Laye r insert a: Blank Keyframe
In this frame add a label: loop
In frame 5 of the Labels Laye r insert a: Blank Keyframe
In frame 10 of the Labels Laye r insert another: Blank Keyframe
In frame 5 of the Actions Laye r insert a: Blank Keyframe
In frame 10 of the Actions Laye r insert another: Blank Keyframe
In frame 5 or the Actions Layer add the following ActionScript:
stop ();
Do the same in frame 10 or the Actions Layer:
stop ();
In frame 10 of your Sound Layer add your: Sound
In the Sound Layer select: frame 5
In the Property Inspector set the Sync to: Start (see illustration below)
Set the Repeat to: 1 (see illustration below)
In the Sound Layer select: frame 10
In the property panel set Sync to: Start
Set the Repeat to: Loop
The Sync Properties.
Note: Set the Sync Properties to: Start, Repeat and 1 to play a sound once.
Change the value 1 if you want to play the sound a specific number of times.
Change the second box to: Loop if you want the sound to repeat forever.
Movie Clip Layers and Keyframes.
Publish the move as a swf and call it: Sound.swf
Note: You Publish the Movie by going to: File > Publish or File > Publish Settings > Publish
There is no need to use the latest Flash Player. In the Publish Settings, click on the Flash Tab and select an older Flash Player such as: Player 5 or Player 6
Step two: Setting up the Web Page
Open the web page that you want to add sound to.
Add the following code to the head section of your web page:


In the body section of the same page add:

Note: If your Flash Movie is not called: Sound.swf - you will need to change the code above.
You MUST download the external JavaScript file: flashsound.js
If you wish to view the content of the JavaScript file: click here
Place this external flashsound.js file along with the Sound.swf Movie in the same location as the web page you want to play sound on.
Every time you want to create a link that will play the sound use one of the following examples of code.
The code below plays a sound on rollover and stops playing on rollout. The sound will only play once:
Rollover Here To Start Playing A Sound
The next bit of code plays a sound on rollover and stops playing sound on rollout. The sound will play continuously:
Rollover here To Start Playing Sound
To have the sound play once when the page loads use this code:

Or to have the sound play continually, place this code in the Body Tag:

The following Body Tag will preload the Flash file:

Note: The start , loop and stop in the code above relates to the frame labels that you created in the Flash Movie.
You can have different sounds on different links by adding additional sounds in your Flash Movie:
Multiple sounds and loops have been added for different links on the web page.
Then refer to each individual sound or loop like so:
Rollover here To Start Playing Sound
The above plays a sound (Label start2 sound) on rollover and stops playing on rollout. The sound will only play once.
Rollover here To Start Playing Sound
The above plays a sound (Label loop2 sound) on rollover and stops playing on rollout. The sound will only play once.
You can download an example web page to see how to code your web page here
For advanced users who want to experiment, the following is a list of commands that you can use:
mysound.gotoAndStop('/SoundPlayer', 'start')"
mysound.gotoAndPlay('/SoundPlayer', 'start')"
return false
For other tutorials on how to use this technique:
www.flashsoundapi.com
tech.irt.org
http://sonify.org/flash sound/timeline
www.devx.com
Please indicate what you thought of this tutorial
10 is the best:
10
9
8
7
6
5
4
3
2
1
If you have not found this tutorial useful, help us improve by telling us why: Forum
previous tutorial
next tutorial
? 47930 visitors to this page since July 04 ?
? Home ? Tutorials ? Downloads ? Newsletters ? Bulletin Board ? Contact Us ?
? Members ? Business ? Web Design ? Other ? Top of Page ?
All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission. Please ask as permission is often granted.


 

Read Tutorial at: Click here to view the tutorial
Rate Tutorial: Flash Audio Flash Sound on HTML Web Pages Tutorial

View Tutorial: Flash Audio Flash Sound on HTML Web Pages Tutorial

Related Tutorials:

Displaying 1 - 50 of about 4234 Related Tutorials.

Embed Flash file in JSP
supportive way to embed video, sound, flash files in the web page. We can add Real Media, Quick Time movies, Windows Media, Flash animations in web page through... a flash file in JSP. In the example given below we have used HTML tag in JSP
 
Embed flash file in jsp page
to embed video, sound, flash files in the web page. We can add Real Media, Quick Time movies, Windows Media, Flash animations in web page through <EMBED>... a flash file in jsp page. In the example given below we have used HTML tag in jsp
 
Difference between Flex and Flash
to the requirement. Flash is used to create web ads, banner for websites, banner for social... of web development. Developers who have good knowledge of html, css and javascript... Difference between Flex and Flash Difference
 
Flash on iPhone 3G
all Flash enabled web pages offer far more absorbing and engrossing browsing... the functionality of the iPhone as Adobe Flash is the most widely used web... richer web experience. What is taking time for the iPhone Flash version to hit
 
Installing flash builder4
Installing and Running Flash Builder 4 With the release of Flex 4, adobe also released Flash Builder 4 tool that was formerly known as Flex Builder... period. Further in this tutorial, you will see how to install and run it. Step 1
 
How to design a flash effect on the picture.
How to design a flash effect on the picture.< How to design a flash effect on the picture.     ... is showing a flash effect on a particular area. You will learn how to flash some
 
Audio
is to read the "Sound" section of the Java Tutorial (see Other Java... Java: Audio Java NotesAudio Java 1.2 supports AIFF, AU, WAV, MIDI (types 1 and 2), and RMF sound
 
Play Audio in Java Applet
Play Sound in Applet,Applet Play Sound Example,Java Applet Sound,How to Play Sound in Java Play Audio in Java Applet... to play the sound while stop() method is used for stop the running audio clip
 
Cool Ajax Sites
; Ajax Animator A functional web based clone of the macromedia flash ide...; Ajax Write ajaxWrite is a web-based word processor that can read and write... Powerfull Ajax Web Chat Instant Messenger for webSites.     
 
Embedding sound in Flex4
Embedding sound in Flex4: You can embedded and play mp3 sound in flex.... In this example you will see how we can embedded a sound in a flex application... soundmp3:Sound = new soundcls() as Sound; public var soundchannel
 
iPhone Button Click Sound
Click Sound In this series of iPhone button tutorial, we are going to create a small iphone application that is going to play a sound on clicking the button... the sound on clicking the button. Download AVAudioplayer iPhone SDK Tutorial Here
 
Report Mill Studio editor
tool available for dynamically generating reports and web pages from Java applications in formats such as PDF, HTML, Flash, Excel and more. ReportMill
 
MX Sound Effect in Flex4
MX Sound Effect in Flex4: The Sound Effect plays an mp3 file when you perform... of Sound Effect is <mx:SoundEffect>. The syntax is following: <mx...;/> In this example you can see how we can use a Sound Effect in your
 
HTML Editor Open Source
editors create attractive Web pages with the least amount of HTML coding...;        Free HTML Editors, Web Editors This page lists free HTML editors, Web editors, WYSIWYG editors, web site
 
HTML Layout
of the web page will be like - HTML Layout of Web Pages A Web Page... is likey to be the layout of the pages in a newspaper. HTML columns are used to present the contents of a web page. HTML columns are created by using tables
 
J2ME Audio Record
; This example is used to record the audio sound  and play the recorded sound. In this example we are trying to capture the audio sound and encoded... and playing of the audio, To play the audio sound we are using the following source
 
Tutorials - Java Server Pages Technology
JSP Tutorials - Java Server Pages Technology Tutorial... web server applications are as follows: 1. Serve HTML... containing dynamic web content such as HTML, DHTML, XHTML and XML
 
Tutorials - Java Server Pages Technology
JSP Tutorials - Java Server Pages Technology Tutorial... web server applications are as follows: 1. Serve HTML... containing dynamic web content such as HTML, DHTML, XHTML and XML
 
What is Web Hosting
. Scalability Usually, a web site starts with a few pages of html and grows over... What is Web Hosting What is Web...;      What is Web Hosting? If you
 
HTML Editor Open Source
editors create attractive Web pages with the least amount of HTML coding...;        Free HTML Editors, Web Editors This page lists free HTML editors, Web editors, WYSIWYG editors, web site
 
Introduction to the JSP Java Server Pages
JSP Tutorial - Java Server Pages Tutorials JSP... and it enable the developers to embed java code in html pages. JSP files are finally... shows you how to track the session between different JSP pages. In any web
 
Ajax Animator
; A functional web based clone of the macromedia flash ide. Read full Description
 
Horizontal Frameset in HTML
; The Frameset in HTML is mean for implementing multiple pages in a single window. Each frame in a HTML page presents a separate web documents. The frameset decides... In this Tutorial, the code illustrates a html page with horizontal frameset. For this we
 
Vertical Frameset in HTML
in HTML is used to display more than one web pages in the same? page of browser... Vertical Frameset in HTML Vertical Frameset in HTML   
 
Java Server Pages(JSP)
web content on the server using HTML, and XML templates, and Java code, which... to dynamically generate HTML, XML or other types of documents in response to a Web... Java Server Pages(JSP) Java Server Pages(JSP
 
Set Background Colors and Images in HTML
to the web pages by using the body attribute bgcolor and putting any color value into it in HTML Page. Understand with Example The Tutorial illustrates to set a background color in HTML. In this Tutorial, the code describe you an example
 
Graphics Designer Jobs
need web designer with 1-4 years of experience in Photoshop, Flash Animation, HTML... Compensation: Matching to industry Location: Delhi Keywords: Web Designer, HTML...;  Position Vacant: Web Graphics Designer Company Name: Rose India
 
Introducing Flex
technology possesses all flash features. Flex is embedded with two languages MXML... is done with an XML based language known as MXML  and like Flash applications, Flex codes too are compiled into a file having SWF format called ShockWave Flash
 
Paragraph in HTML
is useful in creating web pages.</p> </body> </html... this Tutorial, the HTML code begin with a <html.> tag, The <head>tag follows... Paragraph in HTML Mixed Frameset in HTML    
 
JSF Tutorial for Beginners
in a Swing based Applet , instead of web-based html form with all its 'forgetfulness... to develop ASP.net web forms.(please refer to a tutorial on ASP.net in ... JSF TUTORIAL - INTRODUCING   JAVA  SERVER  FACES
 
Introduction to HTML
Markup Language. Using HTML we can create a Web Page which can be viewed through a Web Browser over Internet. HTML describes the contents of a web page.... The General Structure of an HTML document When you will open a web browser
 
Traditional Means of Web Application Development
; In the early days the web pages were static, simple HTML web pages, later on it became... Traditional Means of Web Application Development Traditional Means of Web Application Development    
 
Create Web Page with jsp
to create first web page on tomcat server. JSP simply application that work with Java inside HTML pages. Now we can take any existing HTML page and we change... Create your first Tomcat Web application with jsp Web
 
Show Hyperlink in HTML Page
The Tutorial illustrates an example that show you a Link in HTML.The HTML code show you... Show Hyperlink in HTML Page Show Hyperlink in HTML Page
 
SOA and Web Services
SOA and Web Services,Web Services Tutorials,SOA Tutorial,Service Oriented... Simple Web Service In this tutorial we will create a simple web service... In this web service tutorial you will learn how to expose an EJB as XML
 
SOA and Web Services
SOA and Web Services,Web Services Tutorials,SOA Tutorial,Service Oriented... Simple Web Service In this tutorial we will create a simple web service... In this web service tutorial you will learn how to expose an EJB as XML
 
The Role of AJAX in enhancing the user experience on the Web
web application.    AJAX applications eliminate the start-stop-start-stop nature of traditional web pages hence allow web application to look... but a combination of several existing technologies in a new way. These include HTML, CSS
 
Web 2.0 Innovations
an HTML page, Javascript, Flash, Silverlight or Java. All these methods reduce... Web 2.0 Innovations,Web 2.0 Languages,Web 2.0 Education,Web 2.0 Guide,Web 2.0 Kit Web 2.0 Innovations  
 
Web Services - Web Services Tutorials
In this section of the Web Services tutorial you will be familiarized... Web Services,Web Services Tutorials,what is web services,web services soap,architecture,architectures,http Web Services
 
J2EE Tutorial - Introduction
embedded in HTML document, downloaded from the web server and executed in the end... J2EE Tutorial - Introduction J2EE Tutorial... want to know whether J2EE is Java atall or something else. This tutorial
 
Navigation Frame in HTML
Tutorial helps you to illustrate Navigation Frame in HTML. In this Tutorial we help... Navigation Frame in HTML Navigation Frame in HTML   
 
Site navigation
 

 

Send your comments, Suggestions or Queries regarding this site at roseindia_net@yahoo.com.

Copyright © 2006. All rights reserved.