Chuck Freedman will be happy to know the knob is back.
I needed it for an idea I’m exploring, so here it is:
[kml_flashembed movie=”http://www.bit-101.com/blog/wp-content/uploads/2008/07/knob.swf” height=”240″ width=”250″ /]
It’s got a pretty good feature set. You can change the mouse range – how many pixels the mouse needs to move to change the knob from minimum value to maximum. This allows you to have a quick moving control, or slow moving, but very precise control. You can choose whether or not to show the value label and set the precision (number of decimal places) to show in the value label. It’s resizable, supports negative and positive values for min and max, as well as “upside down” values (max is less than min).
The new SWC and source code are up on Google Code:
really nice. thanks for these components theyre really handy.
what would be a nice addition is to have a ‘dual mouse mode’ option, like in the ohmforce range of audio plugins, where a vertical movement gives coarse changes and horizontal movement is for fine tuning.
see http://www.ohmforce.com/
i guess i could always code it myself 🙂
i grabbed it and tried to twist it around
took a couple of seconds to realize you need to move up and down. acts more like a vertical slider.
Hi Keith
As a humble suggestion, have you tried grabbing polar coordinates instead of one cartesian axis? It would force the user to mimic a circular motion around the knob with the mouse, as the real thing; usually people employ a slider when a cartesian axis control is required.
lunetta. I know what you mean. Personally, I find the circular motion really hard for choosing a linear value, like 0-100. Have you used Reason? It uses the vertical motion scheme which I used here. I find it’s very workable once you get used to it. I did consider making an angle selector, which would let you choose a number from 0-360 (or 0-2PI) based on polar coords.
cool component!
The comments above got me thinking about the logic of dragging to change values… wouldn’t a cool component be something to implement AE style params that change when you click-drag in the value?
this is a tricky one to implement in the digital medium as it lacks the physical affordance of being able to grab and twist. I can see that having to rotate the mouse around in a circle would be unergonomic (if that is a word). But It would be nice I think if clicking and dragging horizontally also had an effect on the knob, as there no indication, besides trial and error, that clicking and dragging vertically is the way to control it. Also, scroll wheel support would be cool. Perhaps I will try and ‘tweak’ the code myself.
FWIW I had the same thing… I started going around the circle and thought it was broken. Personally, I’m digging the numeric sliders in many Adobe products (AfterEffects/Premiere and so on) where you can either type into a field, or if you click and drag it’s a slider that doesn’t appear visually, but the values update as you drag your mouse.
If you’re going to make it only go up/down why do you even have the visual of a circle? I’m sure the code is handy and I like the whole minimal part of it… but still.
Dudes. Try Reason. Once you get the hang of it, you’ll love it.
http://www.propellerheads.se/products/reason/
Cool Slider. Hope you don’t mind if I slide in a different question… do you use masks instead of scrollRect in your comps because you’re worried about possible flickering?
Pickle, I used masks because I’m old skool. That’s what I’m used to. Didn’t occur to me to use scrollRect, to be honest. Are there any particular benefits you know of?
I recently started using it on my components and I find scrollRect to be a little more intuitive than using masks. Also requires less code to resize and move the “window”.
I can’t remember where but I read on some other blogs that scrollRect can be faster (though I doubt by much). I also read somewhere that some browsers flicker, but I haven’t actually seen it happen or tested at all.
Nice stuff. I was looking at this
http://www.flexiblefactory.co.uk/flexible/?p=19
trying to figure out how they get these mouse events that keep going even OUTSIDE of the Flash animation (meaning you can keep on dragging and turning the knob, even outside of the bounds of the Flash animation itself). So I looked at your code and I got it… nice stuff!
Why is it so common in Flash to add events to something and then REMOVE them instead of using Boolean flag that? You add events to the stage and remove them EVERY TIME you get a mouse down. I prefer to have a variable called “userBeChangingTheValue” (or whatever) and react to that. That way the events get set only once. Or is there something I’m missing?
Thank you for taking the time to post your knob. I have made my own, but without yours it wouldn’t have been possible. BTW, the vertical motion to set the knobs is EXACTLY what music programs like Ableton Live do, so you’re in good company. Circular motion makes no sense for a mouse, I think.
If I understand your question correctly, it’s often more efficient to add and remove the event. Like the mouse move event. If you add it on mouse down and remove it on mouse up, then you never execute a single line of code when the mouse moves otherwise. If you just have a boolean value, then you are running that mouse move code constantly and checking that value constantly and determining what to do, whether or not the user ever interacts with your component.
Hi KP, yes, that is the question, and I agree with your answer. Although in most real-world situations the two solutions probably don’t differ much (in terms of performance), if one has hundreds of these knobs (on a audio mixing board, for instance) then the performance difference could be noticeable. This is especially true because MOUSE_MOVE can potentially fire a lot, and one would have one event per control on the stage. So thinking about it, I’ll open my thinking to include removing events, too 🙂
Thanks for your thoughtful response.
Best,
Daniel