click-and-drag rotating images

[mattwatts15]

I built one of those click-and-drag rotating images. basically you click on it and drag left to right and it will scroll through a series of images in the timeline to make it appear like the object in the images is rotating

the problem is I want to be able to click-and-drag the mouse up-and-down, AND left-and-right. Right now I can program it to do one or the other, but not both. if i put left,right,up,AND down in the code it ignores one or the other.

any ideas?
heres the code :

photos.stop(); 

var startX:Number; 
var startY:Number; 
var startFrame:int; 
var changeDistance:int; 
var travelDistance:int; 


photos.buttonMode = true; 
photos.addEventListener(MouseEvent.MOUSE_DOWN, 
pressHandler); 

function pressHandler(evt:MouseEvent):void { 
       startX = photos.mouseX; 
       startY = photos.mouseY; 
       startFrame = photos.currentFrame; 
       stage.addEventListener(MouseEvent.MOUSE_MOVE,  moveHandler); 
       stage.addEventListener(MouseEvent.MOUSE_UP, releaseHandler); 
} 

function releaseHandler(evt:MouseEvent):void { 
       stage.removeEventListener(MouseEvent.MOUSE_MOVE, 
       moveHandler); 
       stage.removeEventListener(MouseEvent.MOUSE_UP, releaseHandler); 
} 

function moveHandler(evt:MouseEvent):void { 

       changeDistance = Math.round((photos.mouseX - startX)/30); 
       travelDistance = startFrame + changeDistance; 
       if (travelDistance > photos.totalFrames) { 
              photos.gotoAndStop(travelDistance % photos.totalFrames); 
       } else if (travelDistance < 0) { 
              photos.gotoAndStop(photos.totalFrames + (travelDistance % photos.totalFrames)); 
       } else { 
              photos.gotoAndStop(travelDistance); 
       } 
}

right now (with this code) it will click and drag left to right only...

[neznein9]

Try taking the average of the two deltas:

Math.round((photos.mouseX - startX) + (startY - photos.mouseY) / 60); 

I used a technique a long time ago where I had an invisible sprite getting picked up with startDrag - I locked it into a horizontal track (say 0-100) and used the x position as my percent of change. To refine it, I wrapped that whole thing in a sprite and applied a 45° rotation - it worked great but it might not be the same effect you're looking for.

[mattwatts15]

thats a lot closer, at least now its responding to when i move up/down or left/right

only problem is now the thing jumps all over the place
any ideas on how to control that?

[neznein9]

You might try stageX and y instead of the local position...

[mattwatts15]

actually i think i had just not put in enough parenthesis (). its working perfectly now, thanks a lot!

[mattwatts15]

heres another question though,

when i click and drag, its scrolling through a series of images. for some reason everytime around it skips an image, so theres a jump
(the series of photos i have is of a dial, similar to an oven knob. because it skips one photo, thers a jump)
for example if you were tryin to turn you oven gas on to 4 you wouldnt be able to because it would always jump from 3 to 5

it must be skippin one of the last images in the sequence every other time it completes a rotation. i tried adding an extra photo, but then that means it lingers on one of the numbers for an extra tick
does this make sense?

[neznein9]

I'm not quite sure - I'd try tracing out the values you're computing in moveHandler and looking at what's getting reported at the time the image gets skipped - I suspect it's an something in the modulo code.

[mattwatts15]

whats the modulo code

[neznein9]

I believe the number is getting dropped in your if-then in moveHandler - trace out the formulas you've got in there (with the %s in them)