Imajine Blog Imajine Articles
Contact Me

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

Download Free Photo Gallery

Download Free Photo Gallery

You can download Imajine's Scrapbook Photo Gallery absolutely free of cost and to customize , you need no knowledge of Adobe Flash.  Click here to view Scrapbook Photo Gallery / download

Tutorials
Flash Tutorials
Horizontal 3D Carousel
MP3 Player
Scrapbook Photo Gallery
Text Enhancement
Color object
Glow effect using actionscript
Drawing with actionscript
Blur Effect
Load external .mp3 file
Preload external .mp3 file
Sound Controller
Set volume of externally .mp3 file
View MP3 song details
Actionscript blur effect
Actionscript fade in / out effect
Fireworks Tutorials
Custom Stroke
Typography / Ink blot effect
Photograph focus effect
Rainbow Pattern
Inset Text Effect
Fuzzy Light Blending Mode
Little bulb effect
Old paper effect
'Post it' effect
Hand drawn designs
Black/White and Sepia tone
Water color painting effect
Vintage effect on vector graphics
Solid color, black/white
Photoshop Tutorials
Photo editing
Purple Haze

Portfolio

Logos
Website design
CMS Customization
Flash
Web development
Print


Download free textures and patterns and use it for your personal use.

Click here to download Textures and Patterns.

Download free birthday cards

Free Birthday Cards
Click here to view Imajine's free downloadable birthday cards for personal and corporate use. Imajine's birthday cards are in jpeg format so it is faster to download and send in your wishes to your friends and family.
Bookmark and Share Tell a Friend jayanthi.varma@imajine.in  |  © 2008 Imajine