| How to Create a Drag Bar that Affects Sound Position | Return to Index | Do you want all FLA's used for this tutorial? | Do you have a question? |
This section will explain two popular items for media players: a graphic that tracks along the audio position and how to create a knob that the user can drag to change the sound position. In order to have an image move to the exact position of the audio, all you need to do is add the graphic's starting position to the quotient of the sound's position divided by its duration, which is then multiplied by the width of the distance the knob has traveled. This will be more clear when you see the ActionScript.
To have a knob that the user can use to change the audio position, you need to know the distance the knob travels from its starting position, which for this example, will be a variable named distanceTraveled. Next, you need to calculate the percentage of the overall distance that the knob has traveled, which will be called percentTraveled. The percentTraveled variable will be determined by dividing the distanceTraveled by the range of travel. In other words, if you configure your code to allow the knob to be dragged 400 pixels to the right from its starting position, then 400 is the range of travel. Finally, by multiplying the percentTraveled by the duration of your audio (divided by 1000), you will have the number equal to the audio's position at the location where the knob is released. In the example below, the width of the audio's waveform graphic is used to define the range of left to right motion.
| Fig. 26: Using a drag bar to change sound position |
To create the above, the attachSound method was used to create the sound object on the _root level in a layer named "sound objects".
| johnLennon=new Sound(); johnLennon.attachSound("johnLennon01"); |
The remainder of the code used to create the draggable slider was placed on an empty movie clip. The movie clip was selected, and the following code was pasted into its Action pane (press F9 to see the action pane). The draggable knob has the instance name of "hslider" and the graphic of the waveform has the instance name of "hbase" (just like the horizontal volume slider). When the knob is pressed, a yellow bar appears to assist the user in exact placement of the release position. This yellow bar has the instance name of "laser".
| onClipEvent (load) { startPosition= _root.hslider._x; // hslider is the knob. left = _root.hslider._x; top = _root.hslider._y; right = _root.hbase._x+_root.hbase._width-7; bottom = _root.hslider._y; } // onClipEvent (enterFrame) { // _root.laser._x = _root.hslider._x + (_root.hslider._width/2) ; // mySoundPosition = _root.johnLennon.position/1000; mySoundDuration = _root.johnLennon.duration/1000; // myTimeBarPosition = startPosition + (mySoundPosition/mySoundDuration) * _root.hbase._width; if (_root.dragingSlider!=1) { _root.hslider._x=myTimeBarPosition; } // distanceTraveled = _root.hslider._x - startPosition; percentTraveled = distanceTraveled / _root.hbase._width; dragStartPosition = percentTraveled * mySoundDuration; // _root.hslider.onPress = function() { _root.laser._visible=1; _root.dragingSlider = 1; _root.johnLennon.stop(); startDrag(_root.hslider, false, left, top, right, bottom); }; // _root.hslider.onRelease = function() { _root.laser._visible=0; _root.hslider.stopDrag(); _root.dragingSlider = 0; _root.johnLennon.start(dragStartPosition, 0); }; // Time Display |
Notice that the knob will track along unassisted with the audio unless "dragingSlider" equals 1. Once the user begins dragging the knob, dragingSlider equals one, and then equals 0 upon release of the knob.
Note: This drag bar works best once the sound is completely loaded. If you are going to use it with streaming sounds, you should buffer then sound at least partially before it starts playing. Otherwise, the drag knob may act erratic. In order to buffer the sound, add the following to the first frame of the _root timeline (actually, any place, as its affects are global).
| _soundbuftime = 10; |
This will force a percentage of the file to load before playing starts. Increase or decrease the number according to your needs.
This document copyright © 2005 by Kenny Bellew of Cowfly.Com Design, kennybellew@hotmail.com