click vs mouse up

[mlecho]

hey all..i have this gallery that has images which enlarge on a click, and return to normal if you click on them again. However, client has asked for the ability to drag the images around when enlarged. Sounded easy, but Flash wants to accept the MOUSE_UP handler as a CLICK. The result is, the image enlarges, the user can MOUSE_DOWN to drag the image, but once the user lets go, the image will return to it's normal state... How do i be more specific with Flash so it does not interpret my mouse up as a click after a drag?

i am providing snippets of the pertinent code....obviously, it's not the entire class.

private function positionDO(gi:MovieClip):void
		{
			
			setPosition(gi)
			gi.addEventListener(MouseEvent.CLICK,galleryClickHandler);
			gi.addEventListener(MouseEvent.MOUSE_OVER,galleryOVERHandler);
			gi.addEventListener(MouseEvent.MOUSE_OUT,galleryOUTHandler);
			
		}
private function dragImage(me:MouseEvent):void
		{
			var gi:GalleryImage=me.currentTarget as GalleryImage
			this.selected.startDrag();
			gi.addEventListener(MouseEvent.MOUSE_UP,stopDragImage);
			stage.addEventListener(MouseEvent.MOUSE_UP,stopDragImage)
		}
		private function stopDragImage(me:MouseEvent):void
		{
			this.selected.stopDrag();
		}
private function topDepth(ar:Array,targetSize:Number,gi:MovieClip):void
		{
			var others:Array=ar;
			gi.removeEventListener(Event.ENTER_FRAME,expand)
			gi.scaleTo=targetSize
			gi.addEventListener(Event.ENTER_FRAME,expand);
			if(isGalleryImage(gi))
			{
				gi.addEventListener(MouseEvent.MOUSE_DOWN,dragImage);
			}
			var container:MovieClip=this.getChildByName("galleryContainer") as MovieClip
			var thisIndex=container.getChildIndex(gi);
			var lastIndex=container.getChildIndex(this.imagesOnStage[this.imagesOnStage.length-1]);
			container.swapChildrenAt(thisIndex,lastIndex)
		}
private function galleryClickHandler(me:MouseEvent):void
		{
			
			bringToCenter(me.currentTarget)
		}

[fx.barrett]

That a too large piece for me... Don't really have the time / nerves to read all that and I can't even test it. What I can say is that CLICK is totally different from mouse up and down... As far as I'm concerned Flash handles the event the way it should... Try putting together an example or something that illustrates your problem, I honestly don't have the time read / test all that.

[mlecho]

var bt:BT=new BT()
addChild(bt)
var big:Boolean=false
bt.scaleX=bt.scaleY=2

bt.addEventListener(MouseEvent.CLICK,expand)
bt.addEventListener(MouseEvent.MOUSE_DOWN,drag)
bt.addEventListener(MouseEvent.MOUSE_UP,stopdrag)

function expand(e:MouseEvent)
{
	var mc=e.target
	big=! big
	if(big)
	{
		mc.scaleX=mc.scaleY=4
	}else
	{
		mc.scaleX=mc.scaleY=2
	}
}

function drag(me:MouseEvent)
{
	
	bt.startDrag()
}
function stopdrag(me:MouseEvent)
{
	bt.stopDrag()
}

[fx.barrett]

I'm afraid this can't really be done. At least, not in the way you are trying to do it. Since both CLICK and MOUSE_DOWN are fired every time ( once you click the object, you are both clicking it and having your mouse down ) there isn't really any way of telling flash when what to do... You might try using tons of variables to somehow tell flash and to CLICK and when to drag but not really sure if that can be done... the most I got out of this is having the image go back to it's original state on double click...

var button_mc:Sprite;

init(); // initialize

function init():void
{
    button_mc = new BT();
    
    button_mc.doubleClickEnabled = true;
    
    button_mc.addEventListener(MouseEvent.CLICK, onClick);
    button_mc.addEventListener(MouseEvent.MOUSE_DOWN, onStartDrag);
    button_mc.addEventListener(MouseEvent.MOUSE_UP, onStopDrag);
    
    addChild(button_mc);
    
    function onClick(event:MouseEvent):void
    {
        if (event.target.scaleX == 1)
        {
            event.target.scaleX = event.target.scaleY = 2;
            
            event.target.addEventListener(MouseEvent.DOUBLE_CLICK, doubleClick);
            
            button_mc.removeEventListener(MouseEvent.CLICK, onClick);
            
        }
        else
        {
            event.target.scaleX = event.target.scaleY = 1;
            
        } // end if
        
    } // end of onClick
    
    function onStartDrag(event:MouseEvent):void
    {        
        event.target.startDrag();        
        
    } // end of onStartDrag
    
    function onStopDrag(event:MouseEvent):void
    {
        event.target.stopDrag();
        
    } // end of onStopDrag
    
    function doubleClick(event:MouseEvent):void
    {
        event.target.scaleX = event.target.scaleY = 1;
        
        button_mc.addEventListener(MouseEvent.CLICK, onClick);
        
    } // end of doubleClick
    
} // end of init 

Don't know for sure if this can be done but if it can be done, then be sure that achieving such and effect will be a big pain in the ass... Or maybe it's only me not seeing the simple solution... Maybe others will be of more help.

Good luck.

PS: maybe if you use a couple of enter frame event listeners or timers then you could constantly check if you are dragging or simply clicking the movie clip but IMHO that would just eat up CPU. Even if you'll manage to find a workaround or something for this problem I don't think you'll be pleased with the final result... I'm quite sure that it will be inefficient as hell... or as I said before, maybe I'm just missing something really simple that hopefully, another ( more wiser ) member will observe and enlighten us both.

[Mazoonist]

Maybe this can't be done in the way that you're thinking. But a good workaround would be to create a "drag handle." This would be similar to the way windows work on your computer: when you mouse down on the title bar of a window, you can drag it around, but a click anywhere else has a different effect.

[fx.barrett]

^ Yeps, true, a drag handle would be a good work around.
Other then that, I don't think it can be done the way he tried.

[cancerinform]

Here is a simple script, which would do the job:

var clicked:Boolean=true;
mc.addEventListener (MouseEvent.CLICK, cl);
function cl (event:MouseEvent)
{
    if (clicked)
    {
        trace ("clicked");
    }
}
mc.addEventListener (MouseEvent.MOUSE_DOWN, md);
function md (event:MouseEvent)
{
    startDrag ();
    var myTimer:Timer=new Timer(1,100);
    myTimer.start ();
    var i:int=0;
    myTimer.addEventListener (TimerEvent.TIMER,te);
    function te (event:TimerEvent)
    {
        i++;
        trace (i);
        if (i>10)
        {
            clicked=false;
            event.currentTarget.removeEventListener (TimerEvent.TIMER,te);
        }
    }
}
mc.addEventListener (MouseEvent.MOUSE_UP, mu);
function mu (event:MouseEvent)
{
    stopDrag ();
} 

[fx.barrett]

^ I tried that out and it still produces the same unwanted effect as our other pieces of code. He wants to scale the MC on click, but tries somehow to check if the user is dragging or just clicking the mc... if it's dragging it then the mc should scale back, if it's just clicking then it should scale back.

[Taidaishar]

I think that if you created something to listen for the startDrag event (I don't know if that's possible), but you could have an if statement that worked off of that.

For instance, you could do something like this:

object.addEventListener(MouseEvent.MOUSE_UP, mouseUpEvent)

function mouseUpEvent(e:MouseEvent):void
{
       if(dragging)
       {
              object.stopDrag();
              dragging=false;
       }
       else
       {
              resizeImage();
       }
} 

You would have to completely eliminate the CLICK event handler and just do MOUSE_UP...

[Shokushu]

Checking for a mouseUp quickly after a mouseDown should simulate the desired type of click shouldn't it?

[Taidaishar]

On second thought, why don't you set the double-click to change the size of the photo and that way you won't have to worry about mouse up and mouse down. They'll both be free for you to use. You can set it to increase in size if you double click, and then if it's already large and you double click it will go back to it's normal size.

[mlecho]

hey all...thanks for you help on this. in the end, i went with cancerinforms timer idea...for some strange reason, i could not have the timer handler actually inside the mouse event handler...i had to make it its own private function...but alas, after a few tweaks, i am getting the desired effect, and it does not seem to be a performance hit.

thanks again to all of ya

[mycaptainkite]

hey Mlecho,

i'm trying to do the same thing.. do you think you could post the code for how you finally got it to work? thanks

[mlecho]

this is super bare bones, and you would probably want to play with the timer some, but should get you on track.

// 'mc' is the movieclip instance in question
var draggn:Boolean = false;
var tm:Timer = new Timer(10);
tm.addEventListener(TimerEvent.TIMER,ticktock)
mc.addEventListener(MouseEvent.MOUSE_DOWN,onDown)
mc.addEventListener(MouseEvent.MOUSE_UP,onUp)
stage.addEventListener(MouseEvent.MOUSE_UP,onUp)

function onDown(e:MouseEvent)
{
	tm.start();
	stage.addEventListener(MouseEvent.MOUSE_MOVE,dragAround)
	
}
function onUp(e:MouseEvent)
{
	tm.stop();
	if(tm.currentCount<20 && e.currentTarget == mc)
	{
		doClick()
	}
	
	//RESET VARS for next time
	draggn=false;
	stage.removeEventListener(MouseEvent.MOUSE_MOVE,dragAround)
	tm.reset()
}

function dragAround(e:MouseEvent)
{
	
	if(draggn)
	{
		trace('ok, drag')
		mc.x= mouseX;
		mc.y= mouseY;
	}else
	{
		trace('not yet')
	}
}
function ticktock(e:TimerEvent)
{
	if(tm.currentCount > 20)
	{
		
		draggn = true;
	}
}


function doClick()
{
	trace("that was a clcik")
}