[RESOLVED] Follow mouse until touching

[RansomHostage]

Hello,

I have a graphic replacing the mouse cursor and I'm having it so that when the user goes over a MC (called hitSquare in this case) the cursor graphic moves to a certain location on the stage, then returns to the location of the real mouse position. Here's what I've been doing:

Mouse.hide();

stage.addEventListener(MouseEvent.MOUSE_MOVE,follow);
function follow(evt:MouseEvent) {
    cursorMC.visible = true;
    cursorMC.x = mouseX;
    cursorMC.y = mouseY;
}

stage.addEventListener(Event.MOUSE_LEAVE, hideCursor);
function hideCursor(evt:Event) {
    cursorMC.visible = false;
}

// MOVIE CLIP SETTINGS
hitSquare.addEventListener(MouseEvent.MOUSE_OVER, whack);

function whack(evt:MouseEvent) {
    hitSquare.removeEventListener(MouseEvent.MOUSE_OVER, whack);
    stage.removeEventListener(MouseEvent.MOUSE_MOVE,follow);
    Tweener.addTween(cursorMC, {delay:0.10, x:700, y:-20, onComplete:returnCursor, time:0.2, transition:"easeOutSine"});
    me.play();
}

function returnCursor() {
    cursorMC.y = -10;
    Tweener.addTween(cursorMC, {x:mouseX, y:mouseY, time:0.5, onComplete:reInitialise});
}

function reInitialise() {
    hitSquare.addEventListener(MouseEvent.MOUSE_OVER, whack);
    stage.addEventListener(MouseEvent.MOUSE_MOVE,follow);
}

The problem with this is that during the 0.5 seconds that it takes the graphic to return to the mouse position, the user can still move the mouse, so it actually goes to different co-ordinates and when the user moves the mouse after the 0.5 is over, the cursor just jumps to the new location.

How can I make it so that the graphic smoothly follows the mouse, (even if it's being moved and has to update in real time) and then returns to the standard mouse follow code (cursorMC.x = mouseX; etc) once it's met its final destination?
I take it this requires some "mouse trail" code that gets removed once it's caught up with the mouse. I'm just not sure how to go about it.

Any ideas? Thanks guys.

[TheAS3Guru]

delete this post please

[TheAS3Guru]

For a smooth follow you could create two new number variables and set them equal to the mouse position times a smaller number than one, so the object tries to get to the object a portion of the way each frame.

eg:

addEventListener(Event.ENTER_FRAME, followSmoothly);

public function followSmoothly(e:Event){

var smoothFollowX:Number = mouseX * .2;
var smoothFollowY:Number = mouseY * .2;
yourMovieClip.position.x = smoothFollowX;
yourMovieClip.position.y = smoothFollowY;
}

[RansomHostage]

Thanks for the help, Guru. I'm getting a small error from the code, however it's probably because I've altered it slightly to suit my needs. Can you spot where I've gone wrong?

function returnCursor() {
addEventListener(Event.ENTER_FRAME, followSmoothly);
}

function followSmoothly(evt:Event) {
	var smoothFollowX:Number = mouseX * .2;
	var smoothFollowY:Number = mouseY * .2;
	cursorMC.position.x = smoothFollowX;
	cursorMC.position.y = smoothFollowY;
}

The error I'm getting is:

TypeError: Error #1010: A term is undefined and has no properties.
at homebanner_fla::MainTimeline/followSmoothly()

Repeated many times of course, due to the ENTER_FRAME.

[RansomHostage]

Any of you clever people at Flashkit able to help please?

[5TonsOfFlax]

remove ".position".

[RansomHostage]

Thanks 5TonsOfFlax, that got the code working.

Sadly, the code I've been provided with there simply makes the cursor move slower than the user is moving it, which is kind of the opposite I'm going for! I'm probably not making myself very clear.

All I want is to have the cursor follow the mouse with easing until it finally touches the mouse and then can just follow it as normal. I can't seem to find tutorials for mouse follows with easing in AS3 anywhere! Anyone know how it's done?

[5TonsOfFlax]

Since the mouse can continuously move, you can't use a traditional tween/easing solution. I think what you want is to define a distance based function which moves the cursor partway to the current mouse position.

Here's something I just whipped up:

package 
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Point;
	
	/**
	 * ...
	 * @author srs
	 */
	public class Main extends Sprite 
	{
		private var follower:Sprite;
		private const rad:Number = 10;
		private const factor:Number = 4; //increase for slower, decrease for faster
		
		public function Main():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
			follower = new Sprite();
			follower.graphics.beginFill(0xff0000);
			follower.graphics.drawCircle(0, 0, rad);
			follower.graphics.endFill();
			addChild(follower);
			
			addEventListener(Event.ENTER_FRAME, moveFollower);
		}
		
		private function moveFollower(e:Event):void {
			var dx:Number = stage.mouseX - follower.x;
			var dy:Number = stage.mouseY -follower.y;
			var dist:Number = Math.sqrt(dx * dx + dy * dy);
			if (dist > rad) {
				follower.x += dx / factor;
				follower.y += dy / factor;
			}
			
		}
		
	}
	
}

[RansomHostage]

Thanks for that. I'm not at all familiar with packages and I tend to do all my scripting on the first frame of the timeline rather than externally. I know it might be a lot to ask, but is there any way you could translate that in to code I could use in the .fla?

I appreciate your help either way, Flax.

[5TonsOfFlax]

I can't test the frame script version, but here you go:

//if you already have an instance which you want to be the follower, just use that instead of creating one
var follower:Sprite = new Sprite();
var rad:Number = 10;
var factor:Number = 4; //increase for slower, decrease for faster

follower.graphics.beginFill(0xff0000);
follower.graphics.drawCircle(0, 0, rad);
follower.graphics.endFill();
addChild(follower);

addEventListener(Event.ENTER_FRAME, moveFollower);

function moveFollower(e:Event):void {
  var dx:Number = stage.mouseX - follower.x;
  var dy:Number = stage.mouseY -follower.y;
  var dist:Number = Math.sqrt(dx * dx + dy * dy);
  if (dist > rad) {
 	follower.x += dx / factor;
	follower.y += dy / factor;
  }
}

[RansomHostage]

Absolutely brilliant, thank you Flax. Works perfectly.

In order to revert back to non-easing mouse following, I simply added a "else" which removed the event listener for the smooth following:

function followSmoothly(evt:Event) {
	var dx:Number = stage.mouseX - cursorMC.x;
  	var dy:Number = stage.mouseY - cursorMC.y;
 	var dist:Number = Math.sqrt(dx * dx + dy * dy);
 	if (dist > 10) {
 		cursorMC.x += dx / 4;
		cursorMC.y += dy / 4;
	} else {
		reInitialise();
	}
}

function reInitialise() {
	removeEventListener(Event.ENTER_FRAME, followSmoothly);
	stage.addEventListener(MouseEvent.MOUSE_MOVE,follow);
}