Learn Flash Sound in HTML	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Tutorial: Flash Sound on HTML Web Pages using JavaScript

Free Flash Sound Tutorial

Step One: Creating the Flash Movie

1. Open a new Flash Movie.
2. Save your new Flash Movie as: Sound
3. 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


4. Create a new blank Movie Clip: Insert > Symbol (Short Cut Key: Ctrl + F8)
5. Give it a name: Sound Player
6. For Behavior select: Movie Clip
7. Click: OK
8. If the Edit Bar is closed, open it: Window > Tool Bars > Edit Bar
9. In the Edit Bar Click on the Tab:
   
   This should take you back to the main stage. The main stage should still be empty.
   
   
10. If the Library is closed, open it: Window > Library (Short Cut Key: F11)
11. Drag the new Movie Clip onto the: Main Stage
12. Give it unique Instance Name: MySoundPlayer
    
    You will use the Movie Clip instance name in the JavaScript to start or stop this sound.
    
    
13. Open up the Movie Clip you just created. Right Click and select: Edit
14. Add two Layers, so that you have a total of 3 Layers. use the Insert Layer Button:
15. Rename the top Layer: Actions
16. Rename the middle Layer: Labels
17. Rename the bottom Layer: Sound
18. In the Actions Layer add the following ActionScript:
    
        stop();
        stopAllSounds();
    
    
19. In the Labels Layer in frame 1, add a label called: stop
    
    You add frame Labels from the Property Inspector: Window > Properties
    
    
20. Right click on frame 5 (Mac: Ctrl + click) of the Labels Layer and select: Insert Blank Keyframe
21. In the new Keyframe add a label named: start
22. In frame 5 of the Sound Layer insert a: Blank Keyframe
23. 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.
    

24. In frame 10 of the Labels Layer insert a: Blank Keyframe
25. In this frame add a label: loop
26. In frame 5 of the Labels Layer insert a: Blank Keyframe
27. In frame 10 of the Labels Layer insert another: Blank Keyframe
28. In frame 5 of the Actions Layer insert a: Blank Keyframe
29. In frame 10 of the Actions Layer insert another: Blank Keyframe
30. In frame 5 or the Actions Layer add the following ActionScript:
    
        stop();
    
    
31. Do the same in frame 10 or the Actions Layer:
    
        stop();
    
    
32. In frame 10 of your Sound Layer add your: Sound
33. In the Sound Layer select: frame 5
34. In the Property Inspector set the Sync to: Start (see illustration below)
35. Set the Repeat to: 1 (see illustration below)
36. In the Sound Layer select: frame 10
37. In the property panel set Sync to: Start
38. 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.



39. 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