Josh Sager Media: Creative Technologies Blog

Josh Sager Media: Creative Technologies Blog
Creative Technologies Blog
Home | Portfolio |Blog | Presentations | music | About

Posts Tagged ‘Drag and Drop’

Dragging Made Easy

Thursday, March 26th, 2009

Drag and Drop has popped its head into my work week about a half dozen times this week which inspired me to post some code of a basic object oriented drag system.  It’s not perfect and hitTestPoint would give me a more accurate collision detecation against the circle, but I thought it would be nice to see a simple example.

Here’s a quick rundown

  • Array and Loop for setting up the listeners
  • Always set the dragging item on top
  • Check for the correct detection (Here’s a hint it’s the third box)
  • React to the detection

Using the MouseEvent reference defined as e, you can avoid calling the movie clip or button by their original instance name.  This gives you, the developer, a more flexible framework to add and delete drag-able items at will.

Source Code
dragdemoquestion
dragdemoquestion

  1.  
  2. // D R A G A B L E  C L I P S
  3. var dragArray = new Array()
  4. dragArray[0] = box1
  5. dragArray[1] = box2
  6. dragArray[2] = box3
  7. dragArray[3] = box4
  8.  
  9. // L I S T E N E R S
  10. for(var i:int=0; i<dragArray.length; i++){
  11.         dragArray[i].addEventListener(MouseEvent.MOUSE_DOWN, onDragClip)
  12.         dragArray[i].addEventListener(MouseEvent.MOUSE_UP, onStopDragClip)
  13.         dragArray[i].addEventListener(MouseEvent.MOUSE_OVER, onOverDragClip)
  14.         dragArray[i].addEventListener(MouseEvent.MOUSE_OUT, onOutDragClip)
  15.         dragArray[i].buttonMode=true
  16. }
  17.  
  18. // H A N D L E R S
  19. function onDragClip(e:MouseEvent):void{
  20.         e.target.startDrag()
  21.         // Make sure what I’m dragging is always on top
  22.         setChildIndex(MovieClip(e.target), numChildren-1)
  23. }
  24. function onStopDragClip(e:MouseEvent):void{
  25.         // stop the drag please
  26.         e.target.stopDrag()
  27.         // hey do I know you…
  28.         if(e.target.hitTestObject(circle1)){
  29.                 if(e.target.name =="box3"){
  30.                         // … if so do some stuff
  31.                         txt_box.text="Drag Me - Winner"
  32.                         centerClip(MovieClip(e.target),circle1)
  33.                 }else{
  34.                         // … nevermind I thought you were someone else
  35.                         txt_box.text="Drag Me - Loser fail"
  36.                         removeChild(MovieClip(e.target))
  37.                 }
  38.         }
  39. }
  40. function onOverDragClip(e:MouseEvent):void{
  41.         // Rollovers… Aren’t they fun :)
  42.         e.target.filters = [new GlowFilter(0xFFFF00,.5, 20.0,20.0,2,1,false, false)]
  43. }
  44. function onOutDragClip(e:MouseEvent):void{
  45.         // Peace out on the Roll out
  46.         e.target.filters = null
  47. }
  48. // C U S T O M  M E T H O D S
  49. function centerClip(mc1:MovieClip, mc2:MovieClip):void{
  50.         mc1.x =mc2.x+((mc2.width/2) - (mc1.width/2))
  51.         mc1.y =mc2.y+ ((mc2.height/2) - (mc1.height/2))
  52. }
  53.  
  54.  

Tags: , ,
Posted in Flash, Technology | 2 Comments »