New MinimalComp: WheelNav
This is an idea I got from this article:
http://jonoscript.wordpress.com/2008/10/28/pie-in-the-sky/
I read it a while back, but was recently thinking of ways to make a decent 3D interface. Not an interface that is in 3D, but an interface that allows for rotating, scaling, and moving 3D objects. I've done all sorts of menus, toolbars, keyboard shortcuts, but it never was too usable. I thought this might be better. I'm not sure it will be better for that purpose, but at least I wound up with a cool component that will surely be useful for something.
Here's some demos. First with labels, like you see above. Just click anywhere. Drag to the item you want, and release.
And here with icons:
The use is a bit different, but pretty straightforward. When you create the menu, you need to specify the parent (usually best to place in main class so it's above everything), the number of segments, outer radius, icon radius, inner radius, and default select event handler. Actually, you only need to specify the first two. The rest have default params.
-
wheel = new WheelMenu(this, 8, 80, 60, 10, onSelect);
The number of items, and radii cannot be changed after creation. Hey, this is a minimal comp!
After creation, you add your items, specifying the index of the item, the icon or label, and any data.
-
wheel.setItem(0, "one", "one");
-
wheel.setItem(1, "two", "two");
-
wheel.setItem(2, "three", "three");
-
wheel.setItem(3, "four", "four");
-
wheel.setItem(4, "five", "five");
-
wheel.setItem(5, "six", "six");
-
wheel.setItem(6, "seven", "seven");
-
wheel.setItem(7, "eight", "eight");
The second param is iconOrLabel. You can pass in an instance of any display object, or a class that extends DisplayObject and it will be used as an icon. Or you can pass in a string and a label will be created. No, you can't have a label and an icon. Again, this is a minimal comp, and the layout for that would open a big can of worms. Anyway, you could make your own class that contains a label and an icon and use that easily enough. So if you need both, there you go.
It's up to you to make sure your label isn't too long or your icon isn't too big. And use the iconRadius param of the constructor to adjust how close to the center it goes. A neat trick - you can even set iconRadius larger than outerRadius and your icons/labels will appear outside, around the menu.
To activate it, usually you want to listen for a MOUSE_DOWN event and call wheel.show(). It will automatically center itself on the mouse. Here's the code for the full example above:
-
package {
-
-
import com.bit101.components.Component;
-
import com.bit101.components.Label;
-
import com.bit101.components.WheelMenu;
-
-
import flash.display.Sprite;
-
import flash.events.Event;
-
import flash.events.MouseEvent;
-
-
[SWF(backgroundColor=0xffffff, width=800, height=800)]
-
public class Playground extends Sprite
-
{
-
private var wheel:WheelMenu;
-
private var label:Label;
-
-
public function Playground()
-
{
-
Component.initStage(stage);
-
-
label = new Label(this, 10, 10);
-
-
wheel = new WheelMenu(this, 8, 80, 60, 10, onSelect);
-
-
wheel.setItem(0, "one", "one");
-
wheel.setItem(1, "two", "two");
-
wheel.setItem(2, "three", "three");
-
wheel.setItem(3, "four", "four");
-
wheel.setItem(4, "five", "five");
-
wheel.setItem(5, "six", "six");
-
wheel.setItem(6, "seven", "seven");
-
wheel.setItem(7, "eight", "eight");
-
stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
-
}
-
-
private function onMouseDown(event:MouseEvent):void
-
{
-
wheel.show();
-
}
-
-
private function onSelect(event:Event):void
-
{
-
label.text = "You chose item " + wheel.selectedItem;
-
}
-
}
-
}
Download / checkout here:
http://code.google.com/p/minimalcomps/
