Creating click and select

programming flash
1

This is not a question of help but more of an example to show people how to do it.

I spent ages searching google for an example or tutorial on how to create a select box (similar to the one in windows where you click and drag and it select the items inside) and after a day spent inside number crunching and scratching my head i have come up with the following.

I find the best fps is 26 for this otherwise it is to slow and does give the best user experience.

Draw a box in the top left corner and convert it to a symbol. Click on it and enter the following script…


onClipEvent (mouseDown)
{
     this.mouse_click_position_x = _root._xmouse;
     this.mouse_click_position_y = _root._ymouse;
     this._alpha = 30;
}
onClipEvent(mouseMove)
{
     this.mouse_position_x = _root._xmouse;    
     this.mouse_position_y = _root._ymouse;    
}
onClipEvent (mouseUp) {
    this._alpha = 0;
}

open the movieclip up and then click on the box again, and turn it into a symbol and give it the instance name selectbox

create two frames in the timeline and enter


gotoAndPlay(1);

in frame 2

in frame one enter


newwidth = mouse_position_x - this.mouse_click_position_x;
newheight = mouse_position_y - this.mouse_click_position_y;
newx = this.mouse_click_position_x;
newy = this.mouse_click_position_y;    
if(newwidth < 0 && newheight > 0)
{
    selectbox._x = mouse_position_x;
    selectbox._y = this.mouse_click_position_y;    
    selectbox._height = newheight;
    selectbox._width = Math.abs(newwidth);
}
else if(newwidth < 0 && newheight < 0)
{
    selectbox._x = mouse_position_x;
    selectbox._y = mouse_position_y;    
    selectbox._height = Math.abs(newheight);
    selectbox._width = Math.abs(newwidth);
}
else if(newwidth > 0 && newheight < 0)
{
    selectbox._x = this.mouse_click_position_x;
    selectbox._y = mouse_position_y;    
    selectbox._height = Math.abs(newheight);
    selectbox._width = Math.abs(newwidth);
}
else
{
    selectbox._x = this.mouse_click_position_x;
    selectbox._y = this.mouse_click_position_y;    
    selectbox._height = newheight;
    selectbox._width = newwidth;
}

then you should be done, hit test movie and you should have a selection box.

So where can you go from here? Well you could put a hit test in and then create a select style like in windows or osx which enriches the user experience as thats what we are all programming at the end of the day!

Anyways the example url is here
http://www.mavoric.net/flash/examples/mouse_drag_select_box.swf

Source is here
http://www.mavoric.net/flash/examples/mouse_drag_select_box_maker.fla