Skinnable Knob Component

08.23.2009

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.

Get Adobe Flash player

Fork Project

Tags: , , , ,

Comments

08.25.2009 / jason olmsted said:

The knob has a nice action and seems to be really functional. I’m looking forward to scoring some free time to look through the project in detail.

Thanks for posting as there is not a lot of source being shared for such a commonly required component.

08.27.2009 / casey! said:

i’ve been looking for one these for a while now. this little ditty won you a spot in casey’s google reader account- hollowed ground reserved for the likes of Seth Godin and the AIR team. welcome to the dance! (official “welcome to the dance” certificate to follow via snail mail)

01.28.2010 / Ben said:

Thanks for this, love it, not only have I bashed it to suit my own evil needs, the process of doing so taught me a lot of new stuff about flex (hardly suprising since I only started last week).

06.02.2010 / Thomas said:

this is one awesome component.Thank you so much for sharing.

10.29.2010 / Luciana said:

Thx for sharing this! I was looking for clues on how to start to develop this kind of component but you already did all hard work here. I’m sure i’ll use it on a project to set angle of a gradient background. Definately helpful. Thx again Aaron <3

02.28.2011 / Jord said:

Hello, sorry for my ignorance but I really want to use this in a flash cs5 project but I’m not sure how to import this! Can anyone comment on this?

06.18.2011 / ranjan said:

hi Hardy,

I’m very much in need of a help…………i want to create a simple knob rotating from 0 deg to 180 deg……o% to 100%………please help with as3 code

07.11.2011 / evoneutron said:

That was really really helpful. Thank you so much!!!!!!

10.27.2011 / diego said:

Thank you very much for sharing this very useful component!
I’d like to modify the background and the knob with two images (gif files for example), but since I am inexpert with flex I was wondering if someone can help me a little bit. I don’t know how to add an image in the backgroundSkin and thumbSkin actionscript files… thank you in advance for help!

10.29.2011 / Aaron Hardy said:

Hey Diego, you’re welcome. Try adding a Loader (http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/Loader.html) to the skin parts. If you have further questions, I’d suggest posting your questions at http://tech.groups.yahoo.com/group/flexcoders/. Thanks for stopping by!

Leave a Comment

Your email address is required but will not be published.




Comment