[Resolvido]Retroceder animação em as3

[Chirlison 1]

como fazer em action script3 com que a animação se inicie quando o mouse ficar sobre o botão e como retroceder uma animação quando o mouse sair de cima do botão?

[Elektra 102]

Será uma animação contínua (loop)? ou 'vai e para' com 'MOUSE_OVER',' volta e para' com 'MOUSE_OUT'?

 

Vai precisar de uma função de adicione e outra que remova um ENTER_FRAME.

 

Conforme o caso, outras funções com nextFrame e prevFrame.

 

 

Adicione mais informações e as tentativas que já fez.

 

 

Abraços

[Chirlison 1]

Bom dia!

Muito obrigado por estar me ajudando, respondendo a este tópico.

Um exemplo que consegui fazer para ilustrar o mais próximo do que quero desenvolver, é este que está logo abaixo:

 

 

//A função fadeCircle faz com que o alpha vá aumentando até a imagem  aparecer completamente.

function fadeCircle(event:Event):void  

{ 
    circle.alpha += 0.15; 
     
    if (circle.alpha >= 1) 
    { 
        circle.removeEventListener(Event.ENTER_FRAME, fadeCircle); 
    } 
} 


//A função startAnimation chama a função fadeCircle.

function startAnimation(event:MouseEvent):void 

{ 
    circle.addEventListener(Event.ENTER_FRAME, fadeCircle); 
} 

 
//O botão denominado btn_circle chama a função startAnimation quando o mouse passar por cima dele.

btn_circle.addEventListener(MouseEvent.MOUSE_OVER, startAnimation);

 

 

 

//A função fadeCircle2 faz com que o alpha vá diminuindo até a imagem desaparecer completamente.  

function fadeCircle2(event:Event):void 
{ 
    circle.alpha -= .05; 
     
    if (circle.alpha <= 0) 
    { 
        circle.removeEventListener(Event.ENTER_FRAME, fadeCircle2); 
    } 
} 


//A função startAnimation2 chama a função fadeCircle2.

function startAnimation2(event:MouseEvent):void 
{ 
    circle.addEventListener(Event.ENTER_FRAME, fadeCircle2); 
} 
 

//O botão denominado btn_circle chama a função startAnimation2 quando o mouse sai de cima dele.

btn_circle.addEventListener(MouseEvent.MOUSE_OUT, startAnimation2);

O que quero fazer e não estou conseguindo:

Tenho um movie clip que a imagem vai aumentando até seu tamanho total.

Gostaria de adaptar estas funções que estão acima para fazer a seguinte animação.

 

A animação está parada.

Quando o usuário passar com o mouse por cima do botão, a animação inicie, e quando o usuário tirar o mouse

de cima do botão, a animação imediatamente retroceda, ou seja, quando o usuário passar com o mouse por cima do

botão, a imagem vá crescendo, e quando o usuário tirar o mouse de cima do botão a imagem venha a diminuir imediatamente.

 

Lembrando que estou usuando as3.

[Matheus Brito 12]

Sua lógica ta certinha, segue abaixo:

 

init();


function init():void{
	
circulo.addEventListener(MouseEvent.MOUSE_OVER, inicia);
circulo.addEventListener(MouseEvent.MOUSE_OUT, saiu);
	
	}

function inicia(e:MouseEvent):void{
	
	e.target.gotoAndPlay(2);
	
	}
	
	function saiu(e:MouseEvent):void{
		
		e.target.addEventListener(Event.ENTER_FRAME, volta);
		}
		
		
		
		function volta(e:Event):void{
			e.target.prevFrame();
			if(e.target.currentFrame==1){
				e.target.removeEventListener(Event.ENTER_FRAME, volta);
				}
			}
			
			

circulo é o nome de instancia do meu movieclip que tem uma animacao de um circulo aumentando.Dai com esse codigo quando passo o mouse ele aumenta e quando tiro o mouse ele diminui.

 

Abs

[lucas_bwd 0]

Tua animação tem que ser feita na timeline ou pode ser via código?

 

Se puder ser via código, dá uma olhada nesse pacote:

 

http://code.google.com/p/tweener/

 

A documentação dele:

 

http://hosted.zeh.com.br/tweener/docs/en-us/

 

Muito tranquilo de usar. Ficaria bem mais simples teu código, porque tu não precisaria mexer com EnterFrame. Basta só dois listeners pro MouseOver e MouseOut, e em cada função tu cria um Tweener.

 

Lucas

[Chirlison 1]

Boa tarde a todos!

 

Matheus Brito, seu script funcionou perfeitamente, mas o que eu preciso é que esta animação seja iniciada por um botão, ou seja, quando eu passar com o mouse por cima do botão a imagem do circulo vá aumentando e quando eu tirar o mouse de cima do botão o circulo venha a diminuir.

 

Sua lógica ta certinha, segue abaixo:

 

init();


function init():void{
	
circulo.addEventListener(MouseEvent.MOUSE_OVER, inicia);
circulo.addEventListener(MouseEvent.MOUSE_OUT, saiu);
	
	}

function inicia(e:MouseEvent):void{
	
	e.target.gotoAndPlay(2);
	
	}
	
	function saiu(e:MouseEvent):void{
		
		e.target.addEventListener(Event.ENTER_FRAME, volta);
		}
		
		
		
		function volta(e:Event):void{
			e.target.prevFrame();
			if(e.target.currentFrame==1){
				e.target.removeEventListener(Event.ENTER_FRAME, volta);
				}
			}
			
			

circulo é o nome de instancia do meu movieclip que tem uma animacao de um circulo aumentando.Dai com esse codigo quando passo o mouse ele aumenta e quando tiro o mouse ele diminui.

 

Abs

 

[Matheus Brito 12]

Mesma coisa que eu fiz so que ao inves de você adicionar os eventos no circulo, você adiciona os evento no botao, e nas funcoes que você vai chamar você muda o e.target para o nome de instancia circulo.

Abs

[Chirlison 1]

Matheus Brito, o script funcionou perfeitamente com as dicas que você postou.

Valeu mesmo.

Muito obrigado.

[Matheus Brito 12]

Matheus Brito, o script funcionou perfeitamente com as dicas que você postou.

Valeu mesmo.

Muito obrigado.

 

Estamos ai pra isso

Abs

[Chirlison 1]

Tua animação tem que ser feita na timeline ou pode ser via código?

 

Se puder ser via código, dá uma olhada nesse pacote:

 

http://code.google.com/p/tweener/

 

A documentação dele:

 

http://hosted.zeh.com.br/tweener/docs/en-us/

 

Muito tranquilo de usar. Ficaria bem mais simples teu código, porque tu não precisaria mexer com EnterFrame. Basta só dois listeners pro MouseOver e MouseOut, e em cada função tu cria um Tweener.

 

Lucas

 

Lucas, obrigado pelos links, vou dar uma olhada.