|
FLASH 8 ACTIONSCRIPTING TUTORIAL ON SET VOLUME OF EXTERNALLY LOADED MP3 FILE
Availability: ActionScript 1.0; Flash Player 5
Returns : Number - An integer.
In this tutorial, we will learn how to adjust volume of an externally loaded MP3 file in flash. As we all know, to get this done, we are basically revolving around sound object. The method used to adjust sound volume is setVolume() of sound object. Similarly we can even retrieve the already set volume by getVolume() method, getVolume() returns the sound volume level as an integer from 0 to 100, where 0 is off and 100 is full volume. The default setting is 100.
To begin with the tutorial, we will need to load external MP3 file, which is already covered in our previous tutorial - Load external MP3 file. For those who have not gone through the above tutorial please read through and then return back to this tutorial.
Now we need to create a volume control horizontal slider and add script to it. Follow the steps given below to create slider movieclip.
- Create a empty movieclip called slider.
- Open this slider movieclip and draw an horizontal line using pencil tool from your tool bar, probably a horizontal line of 150px width.
- Select this line and press F8 to convert this to a movieclip symbol, name it line, select movieclip option and press OK.
- Now draw a rectangular vector similar to the orange slider seen in the above .swf file of volume controller.
- Select this rectangle and press F8 to to convert this to a movieclip symbol, name it dragger, select movieclip option and press OK.
- Give and instance name to this dragger movieclip - "scroller".
- Right above this dragger movieclip, insert a dynamic text area, with this text area still selected, type "per_txt" in the variable text area of property panel. Then convert this dynamic text area to a movieclip, name it "per_mc" and give this movieclip an instance name, "per_mc"
- Add another layer to the slider movieclip and name it "actions". Select the keyframe in "actions" layer, then in actions panel, insert below script. If you can not see actions panel, press F9.
ratio=100;
per_mc.per_txt = ratio + "%";
_root.mySound.setVolume(ratio);
scroller.onPress = function() {
this.startDrag(true, 0, 0, line._width, 0);
this.onEnterFrame = function() {
ratio = Math.round(this._x*100/line._width);
per_mc._x = this._x;
per_mc.per_txt = ratio + "%";
};
};
scroller.onRelease = scroller.onReleaseOutside = function()
{
stopDrag();
_root.mySound.setVolume(ratio);
per_mc.per_txt = ratio + "%";
}; |
Your volume controller is now READY. Press Ctrl + Enter to see what an amasing thing you learnt today. :)
Explanation of the above code -
- First 3 lines, we set variables and its values.
- Variable ratio is used to set volume based on the scroller movement and also update the dynamic text value, which is used to determine volume level.
- Next we need to declare a function for scroller.onPress event. Upon onPress event, we need to enable the global startDrag() function to the dragger movieclip.
- Functionality of startDrag() function -
startDrag(target:Object, [lock:Boolean, left:Number, top:Number, right:Number, bottom:Number]) : Void
target:Object - The target path of the movie clip to drag.
lock:Boolean [optional] - A Boolean value specifying whether the draggable movie clip is locked to the center of the mouse position (true ) or locked to the point where the user first clicked the movie clip (false ).
left,top,right,bottom:Number [optional] - Values relative to the coordinates of the movie clip's parent that specify a constraint rectangle for the movie clip.
- When scroller gets drags, based on its position, we will need to indicate volume level in the dynamic text field area. As dragging can incure randomly, at any posible time, we shall write functionality to check scroller position under onEnterFrame event.
- Only upon releasing the scroller, we will set volume, which gets covered under the function for scroller.onRelease, scroller.onReleaseOutside.
I hope you enjoyed the tutorial !.
Download the source code.
|
|
