Tag: usability

A specific use of drag and drop which is a bit more complicated than your average drag & drop needs is a slider. You can use components, but I usually prefer using my own graphics and code, partly because the components tend to bloat the filesize of the swf and partly because that’s just how I am, I like to make it myself. Many projects I’ve worked on require sliders as a form of user input, such as a volume control in my video player, or the inputs for my Voter’s Aide app that let users assign value to issues in the 2008 presidential election. I figured I’d just pull out the code I used with the sliders there, since it was already done. The issue with sliders is we need to restrict the dragging to a certain area, which in itself is a line of code, but I also prefer to allow users to click the actual bar as well for quick selection.

Example

[kml_flashembed fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2009/05/as3dragdrop-sliders.swf” targetclass=”flashmovie” useexpressinstall=”true” publishmethod=”dynamic” width=”550″ height=”400″]

[/kml_flashembed]

Vertical Slider Steps

The vertical slider here goes from 0 – 100. We need to drag the handle but have it restricted to the slider, so users won’t be confused when they click and drag the handle off the slider and break it. We want to click the background bar of the slider and have the handle snap to that place, and we need to be able to see what value the slider holds (0 – 100). I made this code to be pretty reusable, as long as the slider is set up in similar fashion.

1. Make graphics for slider bg and handle
2. Put the graphics into a slider mc
3. Place them each at 0,0 and center their registration points (for easier control and code later)
4. Assign button mode to handle and bar (for better usability)
5. Add Mouse Down Event Listener for handle and bar and assign press function
6. In bar press function set position of handle according to mouse position, and then call the handle press function
7. In handle press function remove the Mouse Down listeners and add stage mouse event listeners for both mouse Up and Move (Stage listeners emulate onReleaseOutside (from as2) and also provide more accurate results)
8. Define dragging area as a rectangle(x, y, width, height), if you’ve do the set up earlier it should be close to Rectangle(0,0,0,slider.bar.height);
9. Begin dragging handle and apply the drag area limiting rectangle
10. Mouse Move function find value (should simply be the handle’s y position) and updateAfterEvent for smooth animation
11. Mouse Release function remove stage listeners, re-add the listeners to the slider and stop dragging

Actionscript (as3)


// Vertical Slider
sliderVertical.handle.buttonMode = true;
sliderVertical.bar.buttonMode = true;
sliderVertical.handle.addEventListener(MouseEvent.MOUSE_DOWN, verticalHandlePress);
sliderVertical.bar.addEventListener(MouseEvent.MOUSE_DOWN, verticalBarPress);

function verticalBarPress(e:MouseEvent):void{
sliderVertical.handle.y = sliderVertical.mouseY;
verticalHandlePress(e);
}
function verticalHandlePress(e:MouseEvent):void {
sliderVertical.handle.removeEventListener(MouseEvent.MOUSE_DOWN, verticalHandlePress);
sliderVertical.bar.removeEventListener(MouseEvent.MOUSE_DOWN, verticalBarPress);
stage.addEventListener(MouseEvent.MOUSE_UP, verticalHandleRelease);
stage.addEventListener(MouseEvent.MOUSE_MOVE, verticalHandleDrag);
//limit dragging area
var verticalDragArea:Rectangle = new Rectangle(0, 0, 0, -sliderVertical.bar.height+1);
sliderVertical.handle.startDrag(false, verticalDragArea);
}
function verticalHandleRelease(e:MouseEvent):void{
stage.removeEventListener(MouseEvent.MOUSE_UP, verticalHandleRelease);
stage.removeEventListener(MouseEvent.MOUSE_MOVE, verticalHandleDrag);
sliderVertical.bar.addEventListener(MouseEvent.MOUSE_DOWN, verticalBarPress);
sliderVertical.handle.addEventListener(MouseEvent.MOUSE_DOWN, verticalHandlePress);

sliderVertical.handle.stopDrag();
updateVNumber();
}
function verticalHandleDrag(e:MouseEvent):void{
e.updateAfterEvent();
updateVNumber();
}
function updateVNumber():void{
sliderVertical.sliderValue = sliderVertical.stat.htmlText = Math.abs(sliderVertical.handle.y);
sliderVertical.stat.y = sliderVertical.handle.y - sliderVertical.handle.height/2;
}


Horizontal Slider Steps

Pretty much the same as the vertical slider, but adjust heights and y positions to widths and x positions. Note in this example I have a range of (-100 to 100) and to accomplish the bar I just reused the same on flipping it around, so here we have the handle, the barLeft and the barRight. I use both of these combined to calculate the limiting rectangle area.

Actionscript (as3)


// Horizontal Slider
sliderHorizontal.handle.buttonMode = true;
sliderHorizontal.barLeft.buttonMode = true;
sliderHorizontal.barRight.buttonMode = true;
sliderHorizontal.handle.addEventListener(MouseEvent.MOUSE_DOWN, horizontalHandlePress);
sliderHorizontal.barLeft.addEventListener(MouseEvent.MOUSE_DOWN, horizontalBarPress);
sliderHorizontal.barRight.addEventListener(MouseEvent.MOUSE_DOWN, horizontalBarPress);

function horizontalBarPress(e:MouseEvent):void{
sliderHorizontal.handle.x = sliderHorizontal.mouseX;
horizontalHandlePress(e);
}
function horizontalHandlePress(e:MouseEvent):void {
sliderHorizontal.handle.removeEventListener(MouseEvent.MOUSE_DOWN, horizontalHandlePress);
sliderHorizontal.barLeft.removeEventListener(MouseEvent.MOUSE_DOWN, horizontalBarPress);
sliderHorizontal.barRight.removeEventListener(MouseEvent.MOUSE_DOWN, horizontalBarPress);
stage.addEventListener(MouseEvent.MOUSE_UP, horizontalHandleRelease);
stage.addEventListener(MouseEvent.MOUSE_MOVE, horizontalHandleDrag);
//limit dragging area
var dragArea:Rectangle = new Rectangle(-sliderHorizontal.barLeft.width+1, 0, sliderHorizontal.barLeft.width+sliderHorizontal.barRight.width-2, 0);
sliderHorizontal.handle.startDrag(false, dragArea);
}
function horizontalHandleRelease(e:MouseEvent):void{
stage.removeEventListener(MouseEvent.MOUSE_UP, horizontalHandleRelease);
stage.removeEventListener(MouseEvent.MOUSE_MOVE, horizontalHandleDrag);
sliderHorizontal.handle.addEventListener(MouseEvent.MOUSE_DOWN, horizontalHandlePress);
sliderHorizontal.barLeft.addEventListener(MouseEvent.MOUSE_DOWN, horizontalBarPress);
sliderHorizontal.barRight.addEventListener(MouseEvent.MOUSE_DOWN, horizontalBarPress);

sliderHorizontal.handle.stopDrag();
updateHNumber();
}
function horizontalHandleDrag(e:MouseEvent):void{
e.updateAfterEvent();
updateHNumber();
}
function updateHNumber():void{
sliderHorizontal.sliderValue = sliderHorizontal.stat.htmlText = sliderHorizontal.handle.x;
sliderHorizontal.stat.x = sliderHorizontal.handle.x - sliderHorizontal.handle.width;
}


Source

source as3dragdrop-sliders.fla file