Direção do mouse + Ease

[gfm100 0]

Preciso de ajuda em uma função que faça um mc seguir a direção do mouse com ease.

 

A função atual é:

var X:int = mouseX - mc.x;
var Y:int = (mouseY - mc.y) * -1;
var angle = Math.atan(Y/X) / (Math.PI/180);
if (X < 0) {angle += 180;}
mc.rotation += (((angle * -1) + 90) - mc.rotation) * .1;

Neste exemplo, que criei com a mesma função, vocês podem observar o problema. Logo quando o mouse está abaixo do indicador e passa de um lado para o outro. A mudança brusca da variável faz com que a seta gire pelo outro lado para alcançar a rotação da fórmula.

 

Alguém poderia me dar uma ajuda com essa função ou me mostrar outro jeito de fazer isso?

[Thiago de Oliveira Cruz 21]

O calculo se faz assim amigo :)

 

parent.addEventListener(MouseEvent.MOUSE_MOVE, rotate);

function rotate(evt:MouseEvent):void{
var mousex = evt.stageX-mc.x;
var mousey = (evt.stageY-mc.y)*-1;
var angle = Math.atan2(mousey, mousex);
mc.rotation = -angle*180/Math.PI;
}

Abraços

[gfm100 0]

O calculo se faz assim amigo :)

 

parent.addEventListener(MouseEvent.MOUSE_MOVE, rotate);

function rotate(evt:MouseEvent):void{
var mousex = evt.stageX-mc.x;
var mousey = (evt.stageY-mc.y)*-1;
var angle = Math.atan2(mousey, mousex);
mc.rotation = -angle*180/Math.PI;
}

Abraços

Meu cálculo é igual ao seu, porém tenho o ease já embutido no código.

 

Do seu jeito o mc vira na direção do mouse instantaneamente. O que preciso é de um ease, mas não consigo fazer funcionar corretamente.

 

Veja meu exemplo, o swf, que entenderá o problema.

[Matheus Brito 12]

Se eu me lembro bem , o erro ai é devido a essa funcao mat.atan(), porque o você tem o valor em radiano, e no seu codigo nao to vendo a conversao pra angulo.

 

Seria mais ou menos assim:

 

addEventListener(Event.ENTER_FRAME, onLoop, false, 0, true);

function onLoop(evt:Event):void {
mc.rotation = getAngulo(mc.x, mc.y, mouseX, mouseY);
}

function getAngulo(x1:Number, y1:Number, x2:Number, y2:Number):Number {
var radianos:Number = Math.atan2(y1-y2, x1-x2);
return rad2deg(radianos);
}

function rad2deg(rad:Number):Number {
return rad * (180/Math.PI);
}

Abs

[gfm100 0]

Os dois jeitos que vocês me passaram são "sinônimos matemáticos" da maneira que estou fazendo.

 

Meu problema não está em conseguir o ângulo, mas sim em colocar o ease.

 

Talvez a forma que eu esteja calculando o ângulo me impeça de colocar o ease, mas também não consegui desenvolver, com o ease, da maneira que vocês me passaram.

 

Como no exemplo que eu coloquei no post inicial, eu preciso que o mc vire um pouco mais lentamente na direção no mouse, e não de uma vez. O movimento deve ser lento, aí está meu problema.

 

Não precisaria ser com uma dessas fórmulas que colocamos aqui. Só preciso do efeito da direção do mouse ser seguida com o ease.

[Thiago de Oliveira Cruz 21]

Bom da maneira que nós colocamos... ele faz como se fosse um enterframe ou mouse_move...

 

Se você quer que seja mais lento, então utilize algum tipo de Time() ou SetInterval, que crie um pequeno intervalo... ou um delay entre a mexida do mouse para seguir...

 

Mas mesmo assim não acredito que você consiga dar um slow na função... se consegue fazer com que ela fique mais "lenta", mas não sei se seria isso que você quer...

 

Fora que com o calculo que passamos para você a seta roda 360 graus sem parar a sua quando passa em baixo em 270 graus... ele vira para o outro lado... assim dando um bug em sua função...

 

Abraços

[Matheus Brito 12]

Eh a funcao que passei ta correta, e a sua ta errado, porque como berseck falou quando a sua vai chegando na parte inferior ela vira subitamente para o outro lado.

Pensei que a solucao seria sobre isso.

Abs

[gfm100 0]

A solução é sobre isso, mas sem retirar o ease.

 

Estou com dificuldades para corrigir esse bug.

 

Minha dúvida é se existe uma maneira mais fácil para fazer esse movimento no mc, lentamente, sem virá-lo subitamente, ou apenas um jeito de corrigir meu bug.

 

Já pesquisei bastante na internet e não encontrei nada que pudesse usar.

 

Obs.: usar qualquer tipo de timer não causa um efeito visual interessante. Fica "feio".

[Thiago de Oliveira Cruz 21]

Bom se você quiser tentar com easiIn

 

Tenta isso aqui :S

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

var myTween:Tween;

var rotIni:Number = 0;
var rotacao:Number = 0;
parent.addEventListener(MouseEvent.CLICK, rotate);

function rotate(evt:MouseEvent):void{
	var mousex = evt.stageX-mc.x;
	var mousey = (evt.stageY-mc.y)*-1;
	var angle = Math.atan2(mousey, mousex);
	rotacao = -angle * 180/Math.PI;
	myTween = new Tween(mc, "rotation", Strong.easeOut, rotIni, rotacao, 2, true);
	myTween.addEventListener(TweenEvent.MOTION_STOP, tweenFinished);
}

function tweenFinished(e:TweenEvent){
	rotIni = rotacao;
}

Mas você vai ver que só vai para a proxima quando você clicar... se colocar mouse_move... não da tempo do tween funcionar... logo bixa tudo.

 

Tente colocar algum tipo de setInterval e tals...

 

Abraços

[gfm100 0]

berseck, dessa forma ele apresenta o mesmo problema inicial, em certo momento ele da a volta pelo outro lado, e infelizmente, eu preciso que seja com MouseMove ou EnterFrame. Usando timer não da certo.

 

Eu percebo que isso é bem complicado, mas insisto em pedir ajuda de vocês.

[ocuspocus 0]

Tenho um problema semelhante a este. Vi este exemplo,

 

http://www.kirupa.com/developer/mx/easing_mouseclick.htm em Flash MX e queria reescrever em AS3. No exemplo, o autor cria dois movie clips, sendo que um é uma bola que segue a direção do mouse, e acrescenta este código:

 

onClipEvent (load) {
	_x = 0;
	_y = 0;
	speed = 5;
}
onClipEvent (mouseDown) {
	endX = _root._xmouse;
	endY = _root._ymouse;
}
onClipEvent (enterFrame) {
	_x += (endX-_x)/speed;
	_y += (endY-_y)/speed;
}

 

Reescrevi desta forma em AS3, mas não está funcionando como o do tutorial. Alguém tem alguma sugestão de como corrigir? (Esou usando o Flex 3, caso isto seja importante citar)

 

import flash.display.Sprite;
	   import flash.events.MouseEvent;
	   import flash.events.Event;

	[SWF(backgroundColor = 0x000000)]
	public class FollowingMouse extends Sprite
	{
		private var _sprite:Sprite;
		private var _player:Sprite;
		private var _moving:Boolean;
		private var sx;
		private var sy;

		public function FollowingMouse()
		{
	  
		   _sprite = new Sprite(  );
			addChild(_sprite);
			_sprite.graphics.beginFill(0xffffff);
			_sprite.graphics.drawRect(0, 0, 400, 400);
			_sprite.graphics.endFill(  );
			_sprite.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
			_sprite.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
		   
			_player = new Sprite();
			addChild(_player);
			_player.graphics.beginFill(0x33cc99);
			_player.graphics.drawCircle(100, 100, 15);
			_player.graphics.endFill();
		   
			_moving = false;
			addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
			addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
			addEventListener(Event.ENTER_FRAME, onLoop);
		}
	   
		private function onMouseDown(event:MouseEvent):void
		{
			_moving = true;
			sx = mouseX;
			sy = mouseY;
		}
		   
		private function onMouseUp(event:MouseEvent):void
		{
			_moving = false;
		}
	   
		private function onLoop(evt:Event):void
		{
			if (_moving)
			{
				_player.x += (sx - _player.x) / 5;
				_player.y += (sy - _player.y) / 5;
			}
		}
   
	}

[Matheus Brito 12]

Tenho um problema semelhante a este. Vi este exemplo,

 

http://www.kirupa.com/developer/mx/easing_mouseclick.htm em Flash MX e queria reescrever em AS3. No exemplo, o autor cria dois movie clips, sendo que um é uma bola que segue a direção do mouse, e acrescenta este código:

 

onClipEvent (load) {
	_x = 0;
	_y = 0;
	speed = 5;
}
onClipEvent (mouseDown) {
	endX = _root._xmouse;
	endY = _root._ymouse;
}
onClipEvent (enterFrame) {
	_x += (endX-_x)/speed;
	_y += (endY-_y)/speed;
}

 

Reescrevi desta forma em AS3, mas não está funcionando como o do tutorial. Alguém tem alguma sugestão de como corrigir? (Esou usando o Flex 3, caso isto seja importante citar)

 

import flash.display.Sprite;
	   import flash.events.MouseEvent;
	   import flash.events.Event;

	[SWF(backgroundColor = 0x000000)]
	public class FollowingMouse extends Sprite
	{
		private var _sprite:Sprite;
		private var _player:Sprite;
		private var _moving:Boolean;
		private var sx;
		private var sy;

		public function FollowingMouse()
		{
	  
		   _sprite = new Sprite(  );
			addChild(_sprite);
			_sprite.graphics.beginFill(0xffffff);
			_sprite.graphics.drawRect(0, 0, 400, 400);
			_sprite.graphics.endFill(  );
			_sprite.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
			_sprite.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
		   
			_player = new Sprite();
			addChild(_player);
			_player.graphics.beginFill(0x33cc99);
			_player.graphics.drawCircle(100, 100, 15);
			_player.graphics.endFill();
		   
			_moving = false;
			addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
			addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
			addEventListener(Event.ENTER_FRAME, onLoop);
		}
	   
		private function onMouseDown(event:MouseEvent):void
		{
			_moving = true;
			sx = mouseX;
			sy = mouseY;
		}
		   
		private function onMouseUp(event:MouseEvent):void
		{
			_moving = false;
		}
	   
		private function onLoop(evt:Event):void
		{
			if (_moving)
			{
				_player.x += (sx - _player.x) / 5;
				_player.y += (sy - _player.y) / 5;
			}
		}
   
	}

 

Seria interessante você criar seu proprio topico.

Abs