Manter aceleração crescente com referência circular.

[Elektra 102]

Quando verifico a posição do mouse em x e y para incrementar e manter a aceleração obtenho uma área retângular.

 

Usei um mc circular como referência para remove/add Enter Frame no Mouse_Over/Out.

 

O que preciso: se o mouse ficar parado apenas alguns pixels de distância da borda do círculo o movimento será lento e constante, até exibir o tamanho total da imagem, em qualquer direção. A velocidade aumenta conforme a posição do mouse se aproxima dos limites do stage.

 

Exemplo: http://www.mauriciostudio.com/_old/

 

 

 

Penso que para isso seja necessário usar trigonometria, mas nunca vi algo semelhante.

 

Agradeço quem puder auxiliar, ou sugerir algum material para estudo.

 

 

Abraços

[DesenvolvedorRoger 50]

Olá, Elektra!

 

Fiz um exemplo bem básico, mas que pode te dar uma luz...

 

O seguinte é necessário para testar o exemplo:

 

1 - crie um MovieClip com o dobro do tamanho do Stage(centralize-o no meio do Stage no eixo X).

2 - renomei-o para "mc"

3 - para que se possa visualizar melhor o "efeito", preecha o MovieClip com uma cor gradiente(ou use uma imagem com cores variadas)

 

Em seguida, adicione o código abaixo no painel Action:

//Aqui criamos o evento que irá disparar a função para a movimentação do objeto, conforme a posição do mouse.

mc.addEventListener( Event.ENTER_FRAME, deslizaX );

//Aqui pegamos o eixo central do Stage como referência para o movimento X do objeto.
var posInic_int:int = stage.stageWidth / 2;

//A velocidade máxima permitida
var velocidadeMax:int = 20;

//Percentual é variável usada para aumentarmos e diminuirmos a velocidade, conforme o mouse se afasta do centro do Stage.
var percentual:int;

//A função que faz o objeto se movimentar no Stage.
function deslizaX( e:Event ){    

//se mouseX for maior que posInic_int, isso significa que o objeto tem que se deslocar para a direita.
    if( mouseX > posInic_int ){
    
//Cálculo de porcentagem pois é com base na distância do mouse em relação ao centro do palco que nós aumentamos e diminuimos a velocidade. 
    percentual = ( ( mouseX - posInic_int ) / posInic_int ) * 100;

//Aqui incrementamos a posição X do objeto para que "ande" para a direita      
    mc.x += e.currentTarget.x <= stage.stageWidth ? ( percentual * velocidadeMax ) / 100:0;
//se o objeto ultrapassar o limite do Stage, ele será reposicionado.
    mc.x > stage.stageWidth ? mc.x = stage.stageWidth:"";
    
    } else {//caso contrário, para a esquerda.
        
    percentual = ( ( mouseX - posInic_int ) / posInic_int ) * 100;        
    mc.x += e.currentTarget.x >= 0 ? ( percentual * velocidadeMax ) / 100:0;
    mc.x < 0 ? mc.x = 0:"";
    
    }

}

Agora teste o projeto e movimente o mouse afastando lentamente do centro do Stage para a esquerda ou direita e veja o resultado. Quanto mais distante do centro do Stage, mais rápido o objeto se deslocará...

 

Obs.: Foi um exemplo corriqueiro e passivo de melhorias pois a intenção foi dar uma "luz" de como pode ser feito... Para o eixo Y, segue o mesmo princípio.

 

Agora é com você... rss

 

Espero que ajude.

 

Abs,

[Elektra 102]

Muito obrigada Roger, no eixo X tenho funcionando.

 

Exemplo inicial com área inativa (200 px à direita e à esquerda) e aceleração: http://www.elzapereira.com.br/parallax_1/

 

Preciso que a aceleração/desaceleração ocorra em relação a distância/proximidade da borda do círculo, não ao centro do stage. Quando o mouse está sobre o círculo a aceleração é zero.

 

O que tenho atualmente:

 

var myStage:MovieClip;
myStage = square;
var myStageWidth:int = myStage.width;
var myStageHeight:int = myStage.height;

var diff1X:int = mc_1.width - myStageWidth;
var diff1Y:int = mc_1.height - myStageHeight;
var diff2X:int = mc_2.width - myStageWidth;
var diff2Y:int = mc_2.height - myStageHeight;
var easeSpeed:int = 40;


square.addEventListener(Event.ENTER_FRAME, moveStage);
circle.addEventListener(MouseEvent.MOUSE_OVER, desativaAnima);
circle.addEventListener(MouseEvent.MOUSE_OUT, ativaAnima);


function desativaAnima(e:MouseEvent):void
{
	square.removeEventListener(Event.ENTER_FRAME, moveStage);
}


function ativaAnima(e:MouseEvent):void
{
	square.addEventListener(Event.ENTER_FRAME, moveStage);
}


function moveStage(e:Event):void
{
	var divX:Number = mouseX / myStageWidth;
	var divY:Number = mouseY / myStageHeight;

	var mc1X:Number = divX * diff1X;
	var mc1Y:Number = divY * diff1Y;
	var mc2X:Number = divX * diff2X;
	var mc2Y:Number = divY * diff2Y;

	mc_1.x += (- mc1X - mc_1.x) / easeSpeed;
	mc_1.y += (- mc1Y - mc_1.y) / easeSpeed;
	mc_2.x += ( - mc2X - mc_2.x) / easeSpeed;
	mc_2.y += ( - mc2Y - mc_2.y) / easeSpeed;
}

 

Gostaria de ter a aceleração da mesma forma que o exemplo inicial (link), mas considerando a área circular para desativar o mouse.

 

 

Abraços

[DesenvolvedorRoger 50]

No exemplo que eu deixei também pode-se definir uma margem inativa, basta, nos if/else, contatenar o valor desejado... Mas já que o seu está funcionando e sua intenção é ativar por um objeto circular, fiz agora com base no circulo...

 

*Vale relembrar que para o eixo Y, segue a mesma lógica. O exemplo que postei foi apenas para te dar uma luz...

//Nota:O MC tem que ter o dobro da largura do palco e estar centralizado!

var ativo:Boolean = true;

ciculo_mc.addEventListener(MouseEvent.MOUSE_OVER, desativa );
ciculo_mc.addEventListener(MouseEvent.MOUSE_OUT, ativa );

function desativa( e:Event ){
    ativo = false;
}

function ativa( e:Event ){
    ativo = true;
}

mc.addEventListener( Event.ENTER_FRAME, deslizaX );

var posInic_int:int = stage.stageWidth / 2;
var velocidadeMax:int = 20;

var percentual:int;

function deslizaX( e:Event ){    

    if( mouseX > posInic_int && ativo ){
        
    percentual = ( ( mouseX - posInic_int ) / posInic_int ) * 100;        
    mc.x += e.currentTarget.x <= stage.stageWidth ? ( percentual * velocidadeMax ) / 100:0;
    mc.x > stage.stageWidth ? mc.x = stage.stageWidth:"";
    
    } else if( mouseX < posInic_int && ativo ) {
        
    percentual = ( ( mouseX - posInic_int ) / posInic_int ) * 100;        
    mc.x += e.currentTarget.x >= 0 ? ( percentual * velocidadeMax ) / 100:0;
    mc.x < 0 ? mc.x = 0:"";
    
    }

}

 

Abs,

[Elektra 102]

Obrigada pela atenção Roger.

 

Em outra versão do arquivo publicado, ao tentar definir o limite no eixo X e Y, obtive uma área retangular. Uso imagens bem maiores que o dobro do stage.

 

O code que postei no tópico é outro, base de um template que facilitou para testar com o mc circular. Precisei remover a referência ao stage para obter o mouse over/out.

 

O parallax do site 'modelo' (em AS1) tem a área circular mapeada à unha. Me passou a idéia 'absurda' de usar donuts para definir áreas de aceleração/desaceleração.

 

 

Antes disso, vou estudar o código que você sugeriu.

 

 

Abraços :thumbsup:

[DesenvolvedorRoger 50]

Um detalhe importante que faltou explicar, foi que o ponto de registro do MovieClip deve ser setado para o CENTRO, quando está se criando o mesmo com a tecla de atalho F8, caso contrário, não irá funcionar como o esperado...

 

*E sim, a imagem precisa ter, no mínimo, duas vezes o tamanho do Stage. Pode ser maior, mas aí seria necessário um pequeno ajuste no código.

 

Abs,

[Elektra 102]

Tranquilo, o que tenho online (eixo X) usa registro central, o code que postei (eixo X e Y) é top left. Ambos usam mcs de qualquer tamanho, naturalmente maiores.

 

Ainda não testei seu exemplo em X e Y, mas observei que a aceleração em X tem por referência o centro do stage.

 

 

Quanto aos donuts, cada área de cor (azul,lilás,verde) acionaria uma velocidade, em qualquer direção. Não é a lógica mais recomendável, mas talvez seja possível.

 

 

 

Abraços :lol: (akagambi, sim senhor)