Recently I went searching for Flex knob components on the web and found they either weren’t equipped for my needs or closed source. So, I cooked up my own knob (or dial) component that hopefully someone out there can use. Go do something cool with it.

Available Properties
value - The number value represented by the current knob rotation.
minimum - The value if the knob were turned counter-clockwise as far as possible.
maximum - The value if the knob were turned clockwise as far as possible.
zeroAngle - The angle, in degrees, representing the minimum value (-180 to 180).
maxRotation - The number of degrees from the zero angle the knob is allowed to rotate clockwise (0 to 360).
snapToCursor - If true, the knob will rotate to the cursor as soon as the user mouses down.
allowLooping - If true, this allows the user to continue rotating the knob clockwise past the max angle, eventually forcing the knob to cross over to the minimum angle. Likewise the user can continue rotating the knob counter-clockwise past the min angle and the knob will eventually cross over to the maximum angle. This can be particularly useful when maxRotation is 360 degrees and the user should be able to go around and around.

Skin Parts
backgroundSkin - This is anything around or behind the knob which does not rotate (e.g., tick marks, labels, etc.)
thumbSkin - This is the part of the knob which the user manipulates. In the real world, this would be “the knob” itself–the tactile part you would turn with your hand.

Exhibit A
Have at it! Right-click to view the source. Post a comment if you have a question.

Tags: component, dial, Flex, knob, skinnable