Objects move on X & Y and follow mouse movement

programming flash
1

I have this code to make some objects for field variable to move on the X axis, how would I get this to at the same time apply the same effect and easing on the y axis as well?

I tried to make it move on the y by adding the y where ever needed under a different event listener render2, but it overwrite how it worked on the x. So need these to both work together at the same time

WORKING CODE

import com.greensock.TweenNano;
import com.greensock.easing.*;

//ease type
var easeType = Expo.easeOut;
//xmouse will hold x position of the mouse in relation to the center of the stage.
//assuming that the stage center's value is 0;
var xmouse:Number = 0;
// percentage of the xmouse position
var xPct:Number = 0;
// speed or durationl
var speed:Number = 2;

// add event listener based on mouse movement
stage.addEventListener(MouseEvent.MOUSE_MOVE, render);

function render(e:MouseEvent):void
{
	//if xmouse pos is greater than the center of the stage
	if( e.stageX > stage.stageWidth/2) {
		
		xmouse= -(e.stageX -stage.stageWidth) - stage.stageWidth/2; //-512
		
	}
	else 
	{
		xmouse = ((stage.stageWidth/2) - e.stageX); //512
		
	}
	
	
	xPct = Math.round ((xmouse/stage.stageWidth) * 200);
	
	var fieldXto:Number = ((xPct/100) * (field_mc.width - stage.stageWidth)/2) + stage.stageWidth/2;

	TweenNano.to(field_mc,speed, {x:fieldXto, ease:easeType});
	
	
}
2

Here is an example of what I created with 2 listeners and one applied to X and one Applied to Y. It only follows the Y

CODE HERE

import com.greensock.TweenNano;
import com.greensock.easing.*;

//ease type
var easeType = Expo.easeOut;
//xmouse will hold x position of the mouse in relation to the center of the stage.
//assuming that the stage center's value is 0;
var xmouse:Number = 0;
var ymouse:Number = 0;
// percentage of the xmouse position
var xPct:Number = 0;
var yPct:Number = 0;
// speed or durationl
var speed:Number = 2;

// add event listener based on mouse movement
stage.addEventListener(MouseEvent.MOUSE_MOVE, render);

function render(e:MouseEvent):void
{
	//if xmouse pos is greater than the center of the stage
	if( e.stageX > stage.stageWidth/2) {
		
		xmouse= -(e.stageX -stage.stageWidth) - stage.stageWidth/2; //-512
		
	}
	else 
	{
		xmouse = ((stage.stageWidth/2) - e.stageX); //512
		
	}
	
	
	xPct = Math.round ((xmouse/stage.stageWidth) * 200);
	
	var fieldXto:Number = ((xPct/100) * (field_mc.width - stage.stageWidth)/2) + stage.stageWidth/2;

	TweenNano.to(field_mc,speed, {x:fieldXto, ease:easeType});
	
	
}

// add event listener based on mouse movement
stage.addEventListener(MouseEvent.MOUSE_MOVE, render2);

function render2(e:MouseEvent):void
{
	if( e.stageY > stage.stageWidth/2) {
		
		ymouse= -(e.stageY -stage.stageHeight) - stage.stageHeight/2; //-512
		
	}
	else 
	{
		ymouse = ((stage.stageHeight/2) - e.stageY); //512
		
	}
	
	
	yPct = Math.round ((ymouse/stage.stageHeight) * 200);
	
	var fieldYto:Number = ((yPct/100) * (field_mc.height - stage.stageHeight)/2) + stage.stageHeight/2;

	TweenNano.to(field_mc,speed, {y:fieldYto, ease:easeType});
	
	
}
3

While I realize this is entirely JavaScript, some of the snippets of code from here may help: http://www.kirupa.com/canvas/mouse_follow_ease.htm

Cheers,
Kirupa :slightly_smiling:

4

Thanks will check it out, yeah looking for something AS3, I guess they are similar