The dial consists of the following three elements:
A transparent button covering the dial which set a flag to toggle the mouseMove event handler.
A rotation indicator showing the rotation.
A mouseMove event handler which uses x,y mouse position to calculate the angle of rotation.
We need to implement a dial that detects and converts x,y mouse movement to circular motion when user drags it,
here is the pusedo mechanism:
User press on the dial i.e. transparent button, which set the flag and record the initial mouse position.
On mouseMove, check the flag.
If flag is up, record new mouse position.
Use the initial x y mouse cordinate, the origin and the new x y mouse cordinate to calculate the rotation using Math.atan2().
Set rotation of indicator.
Set volume accordingly.
Set initial mouse cordinate as current mouse cordinate for the next mouseMove event.
Drap theflag when user releases the mouse button.
Preparing the visual elements
Create image of the volume dial and a rotation indicator (I used a red LED) for the dial, you can use photo image with transparent background (gif / png), or if you are comfortable with the flash drawing utility, draw it yourself.
Creating the dial symbol
Import the visual elements if they were not created in flash.
Then create a 5 layers dial symbol as shown below. Type in the following action script in frame 1:
Then place the dial image onto the "DialImage" layer. Make sure the centre of the dial image or graphic instance(if created in flash) is positioned at the origin(0,0) of the symbol, you can do so by selecting all the graphics within the symbol then bring up the info panel, set the orientation mode to centre and type in its coordinates:
Next place the rotation indicator onto the "RedLED" layer, make sure its centre is aligned with the origin, select the image/graphic instance and convert it into a movie symbol by pressing "F8", type in "RedLED" for the instance name, then double click the instance to edit it in place, now select all graphics in it and use the "up" arrow key on your keyboard to nudge it towards the edge of the dial.
Now create an empty symbol, place it anywhere onto the "angleDetector" layer and name the instance "angleDetector".
Finally create a circular button, put it on the "transparentButton" layer. Adjust the size so that it covers the dial then set its alpha to 0%.
The Code
The action scripts for transparent button is pretty straight forward:
on(press){
//rise the flag
this.dialRot = true;
//record mouse position
xmi = this._xmouse;
ymi = -this._ymouse;
}
on (release, releaseOutside) {
//drop flag
this.dialRot = false;
this.RedLED.play();
}
And finally, the movie scripts for the instance named "angleDetector":
onClipEvent(mouseMove){
if (_parent.dialRot){
//if the dial is pressed , calculate the angular movement of the mouse
//record new mouse movement
var xm=_parent._xmouse;
var ym=-_parent._ymouse;
//calculate the angle between new mouse position and normal
var angleNow = Math.round(180*Math.atan2 ( xm, ym )/Math.PI);
//claculate the angle between initial mouse position and normal
var angleIni = Math.round(180*Math.atan2 (_parent.xmi, _parent.ymi)/Math.PI);
//calculate the change in angular movement
var deltaAngle = angleNow-angleIni;
//set the rotation of the red dot
_parent.RedLED._rotation += deltaAngle;
//set the initial mouse position as the current mouse position for the next mouseMove event
_parent.xmi=xm;
_parent.ymi=ym;
//set the range of rotation between 0 to 360
var fullr;
if(_parent.RedLED._rotation<0){
fullr=_parent.RedLED._rotation+360;
}else if(_parent.RedLED._rotation>360){
fullr=_parent.RedLED._rotation-360;
}else{
fullr=_parent.RedLED._rotation;
}
//set the volume
_root.mySound.setVolume(int(fullr/360*100));
updateAfterEvent();
}
}
note: you have to change "_root.mySound" to the path of your own sound object
Now put an instance of the dial movie symbol onto your stage and name it "dial", then compile your movie to see it in action!
Coming Up Next
I get emails occationally from readers asking me how to implement effects in flash,
one of which is a puesdo particale system:
