|
Sound controller In this tutorial, we will learn, - To attach external .mp3 file to swf
- To create preloader for sound file
- To create play / stop button
- Volume controller
- Balance (Pan) controller
To Achieve all the above, we will be using built-in sound class to control sounds in a SWF file. Let's create all the graphics first. Play / Stop button - Select 'Frame1'. Using the rectangular tool in the tool box, create a triangle on your canvas, similar to the one shown in the above '.swf' file.
- Convert this triangular vector shape to button symbol - Select this triangular shape and press 'F8' key. 'Convert to symbol' window pops-up, type 'play_btn' in the Name field and select button 'Type'. Click 'OK'. Your play button is ready.
- Similarly create 'stop_btn' symbol.
Slider for control - Select 'Frame1'. Draw a rectangle on your canvas of 5px width and 18px height.
- Convert this 'rectangle' to a movie clip.
- Give an instance name, 'dragger' to this movie clip in the 'properties window'
- Draw a horizontal line of lenght 150px. Place it under and to the left of 'dragger' as shown above in flash / .swf file.
- Select both - 'line' and 'dragger' movie clip and press 'F8' key and convert this to a 'movie clip' symbol.
- Now select the 'slider' movie clip and give an instance name - 'mySlider' in the properties window.
- Your controller is now ready.
- Right click this controller in your library panel and duplicate the same. Name it 'pan_controller'
- Drag this pan_controller to your canvas. Double click to enter inside movie clip. Align 'dragger' movie clip to the center of the horizontal line.
Place 2 dynamic text fields one beside the other on your canvas and give them variable names - 'load_sg' and 'down_sg' in your properties window. You can now align all your movie clips and buttons according to your design requirements on your canvas. Add a .mp3 file in the folder where this flash file resides and rename it to 'sound2' And now we are ready to add actionscrips and get all the symbols to work. :) Add a new layer in the timeline panel and name in 'actions'. Select 'Frame1' in the actions layer and add below script in 'Actions' window.
mySound = new Sound(); mySound.loadSound("sound2.mp3", false); onEnterFrame = function() { var downloaded:Number = _root.mySound.getBytesLoaded(); var total:Number = _root.mySound.getBytesTotal(); _root.down_sg = Math.floor(downloaded/total*100); if (downloaded != total) { _root.load_sg = "downloading song..."; } else { complete = 1; _root.load_sg = ""; _root.down_sg = ""; } } |
Select play button and add the below script in your 'Actions' window
on (release) { _root.mySound.start(0, 99); } |
Select play button and add the below script in your 'Actions' window
on (release) { _root.mySound.stop(); } | Double click your volume control movie clip and add a new layer, call it 'actions'. Select 'Frame1' of actions layer and add the below code in your 'Actions' window
this.ratio = 0; ratio = _root.mySound.getVolume(); trace("ratio: " + ratio); _root.mySound.setVolume(ratio); dragger.onPress = function() { this.startDrag(true, 0, 0, line._width, 0); this.onEnterFrame = function() { ratio = Math.round(this._x*100/line._width); }; }; dragger.onRelease = dragger.onReleaseOutside = function() { stopDrag(); trace("ratio: " + ratio); _root.mySound.setVolume(ratio); }; |
Double click your pan control movie clip and add a new layer, call it 'actions'. Select 'Frame1' of actions layer and add the below code in your 'Actions' window
this.ratio = 0; ratio = dragger._x; trace("ratio: " + ratio); dragger.onPress = function() { this.startDrag(true, 0, 0, line._width, 0); this.onEnterFrame = function() { ratio = Math.round(this._x*100/line._width); /}; }; dragger.onRelease = dragger.onReleaseOutside = function() { stopDrag(); trace("ratio: " + ratio); _root.mySound.setPan(ratio); }; |
Sound control is ready!!. Press 'ctrl' & 'Enter' to view.
Click here to download source file
Tags: Load external MP3 file into flash, Preload MP3 File, play mp3 file, Sound
Object in Flash, Preload and play music, music play and stop button, Volume control,
balance control, Pan control, Sound control
|