Where there’s a will, there’s a dial. A dial component for Flash.

Feature image

For a recent Flash project at JMX2, I needed to have a dial for a user to turn and it would effect affect how many particles were generated by a particle generator.

There wasn't a dial component in the standard Flash IDE, so I looked around online and although there seemed to be a couple Flex versions, I didn't find a Flash version. I needed to make one myself. A dial seems so simple but there's more going on there than you might guess. It also needed to be very small, since it was going in a Flash banner with tight K size limitations. Although we ended up using some art that I haven't included here, this vector version only adds about 3.5K to your movie for the component and it's ActionScript.

The Flash movie can't be displayed on your device.

What's the deal? If you're reading SuperGeekery, you know your way around a Flash plugin. You've probably got Flash turned off, uninstalled, or maybe you don't have JavaScript turned on. Whatever the case may be, you can see the Flash movie. Go jump on a computer with those things and we're in business again.



It's pretty easy to set up. Here's how the ActionScript for example above looks.

package 
{
	import com.jmx2.components.dialComponent;
	import flash.display.MovieClip;
	import flash.events.Event;

	public class DialExample extends MovieClip
	{
		public var theDial:dialComponent;

		public function DialExample()
		{
			super();
			
			// set debug to true to see a visual representation of the the value it is reporting
			this.theDial.setDebug(true);
			
			this.theDial.setZeroPositionInDegrees(0);
			this.theDial.setRotationSpan(180);
			this.theDial.setValueSpan(0, 100);

			this.theDial.setDialValue(0);
			
			this.theDial.addEventListener("dialEvent", dialEventHandler);
			
		}
		
		private function dialEventHandler(e:Event) {
			trace(e.currentTarget.name + ": " + e.currentTarget.getReading() );
		}
		
	}
}

Visually, it's easy to open it up and skin it how you need. There is a layer called "visuals" inside the library item "the_dial_component" which you can edit.

There are some areas for improvement that I didn't end up doing, but in case you're wondering what I didn't do. Here's what was on my list.

1. Counterclockwise turning. The current version works by turning the dial clockwise only.

2. Making grabbing work. The current version works by having the dial try to turn the position the mouse indicates.

3. The dial currently will ease to the higher end of its value range if the mouse it clicked on the outside of the live area for the dial. If I had had the time, I would have tested to see if the user were clicking closer to the low end of the dial or the higher end, and eased toward the correct one.

4. It's a bit more difficult to get all the way to the very top and very bottom of the range of numbers. It didn't matter for the use case I had, so I didn't worry about it, but if you're going to have someone who definitely needs to get an exact measurement, it's not perfect.

If you'd like to download it, here is the source for the above example. If you use it, I'd love to see what you've done with it. Good luck!

There are no comments to this post.

Leave Your Comment:

name:

email:

location:

url:

your comment:

Remember my personal information

Notify me of follow-up comments?

Twitter Feed

John Morton talking on Twitter




Meanwhile on Instagram… //

My latest shot from Instagram.