[Resolvido]Parar animaçao com movimento do mouse

[M2DOIS 0]

Olá...

 

baixei uma animação em flash de petalas caindo que vou usar como background de um site, gostaria de saber se teria como ao movimentar o mouse essa animaçao parasse e quando o mouse ficasse sem movimento ela voltava...

 

import flash.events.Event;
//Criando um Timer
var myTimer:Timer = new Timer(800);
myTimer.addEventListener(TimerEvent.TIMER, addPetala);
myTimer.start();
//Função para retornar um numero randomico passando 2 valores como parametro
function getRandomByRange(min:Number, max:Number, floor:Boolean = false):Number
{
	var randomNum:Number;
	switch(floor)
	{
		case false:
			randomNum = Math.random() * (max - min + 1) + min;
		break
		case true:
			randomNum = Math.floor(Math.random() * (max - min + 1)) + min;
		break;
	}
	
    return randomNum;
}
//Função que adiciona nova petala.
function addPetala(te:TimerEvent):void
{
	var myPetala:petala = new petala();
	
	var scale:Number = getRandomByRange(0.3, 1);
	
	myPetala.scaleX				= myPetala.scaleY = scale;
	myPetala.x					= Math.random()*stage.stageWidth;
	myPetala.fallingCurve		= getRandomByRange(-2,2,true);
	myPetala.dropSpeed			= (scale/20)*100;
	myPetala.rotateSpeed		= getRandomByRange(-3,3,true);
	myPetala.turn				= 0.1;
	
	var petalaBlur:BlurFilter	= new BlurFilter();
	petalaBlur.blurX			= petalaBlur.blurY = (scale/50)*100;
	petalaBlur.quality			= 3;
	
	var filterArray:Array		= new Array(petalaBlur);
	myPetala.filters			= filterArray;
	
	myPetala.addEventListener(Event.ENTER_FRAME, dropMe);
	
	
	stage.addChild(myPetala);
}
//Função da animação da petala
function dropMe(e:Event):void
{
	var petala:MovieClip 	= e.target as MovieClip;
	petala.x				+= petala.fallingCurve;
	petala.y				+= petala.dropSpeed;
	petala.rotation			+= petala.rotateSpeed;
	petala.scaleX 			+= petala.turn;
	
	if(petala.scaleX > 1)
	{
		petala.turn = -0.1;
	}
	else if(petala.scaleX < 0)
	{
		petala.turn = 0.1;
	}
	
	if(petala.y > stage.stageHeight+petala.height)
	{
		e.target.removeEventListener(Event.ENTER_FRAME, dropMe);
		e.target.parent.removeChild(e.target);
	}
}

 

Desde já agradeço galera e Feliz Natal!

[Michel Araújo 0]

vou tentar explicar uma forma como isso pode ser feito a partir do que você já tem...

 

a lógica básica é a seguinte:

 

primeiro, vou criar uma variável que vai guardar a informação se a animação deve ser feita ou não (true e false)

var movimenta:Boolean = true;

depois, eu condiciono a execução das ações que fazem movimento e que adicionam novos elementos à tela, a situação dessa variável movimenta. Essas ações estão dentro das funções dropMe e addPetala respectivamente. No código:

 

function addPetala(te:TimerEvent):void
{
   	if(movimenta)
        // O que estiver aqui dentro só será executado se a variável movimenta for true
        {
             //Aqui dentro, todo aquele codigo que está dentro da função addPetala
        }
}

function dropMe(e:Event):void
{
   	if(movimenta)
        // O que estiver aqui dentro só será executado se a variável movimenta for true
        {
             //Aqui dentro, todo aquele codigo que está dentro da função dropMe
        }
}

agora a pergunta... como vamos trocar o valor da variável movimenta, verificando se houve movimento do mouse ou não? Eu vou usar um Timer, que vai executar uma função em intervalos regulares de tempo, verificando se a posição do mouse é a mesma da última vez que essa função foi executada. De modo geral, se a posição for a mesma, o mouse não se moveu (e a var movimenta deve ser true), e se for diferente, movimenta deve ser false. No código:

 

//essa variável é declarada aqui para ser global, e vai guardar a ultima posição do mouse
var prevMouse:Point = new Point();
//Aqui temos o timer... coloquei pra verificar a cada 200 milisegundos (0.2s), que pode ser mudado
var movTimer:Timer = new Timer(200);
movTimer.start();
movTimer.addEventListener(TimerEvent.TIMER, movTimerEvent);

function movTimerEvent(e:Event){
        //guardo a posição atual do mouse
	var novMouse:Point = new Point(mouseX, mouseY);
        //comparo com a posição anterior, e com o estado do movimenta, pra não ficar setando valor igual à variavel
	if (novMouse.equals(prevMouse) && movimenta == false){
		movimenta = true;
	}else if(!novMouse.equals(prevMouse) && movimenta == true){
		movimenta = false;
	}
        //defino o valor da pos anterior do mouse, para a proxima verificação
	prevMouse = novMouse;
}

agora é só arrumar esse código dentro do seu código aí.

 

Outra ideia seria usar um evento MOUSE_MOVE para definir o estado false pra variável movimenta... mas precisaria verificar a posição do mouse para retomar a animação, então eu só simplifiquei para não ficar mais extenso.

[M2DOIS 0]

Miguel, FANTÁSTICOOOO uma Aula de Flash ! ! !

 

deu muito certo show de bola.

 

não querendo abusar, mas ja abusando, eu gostaria, se possivel claro, saber se teria como no movimentar o mouse as petalas sumissem da tela, pq do jeito que esta, as petalas param no meio do caminho, e continuam atrapalhando a visualizaçao do restante do site. vou te mostrar... vou disponibilizar o FLA ja do jeito que você me ensinou ai em cima.

 

FLA

 

Miguel, desde já te agradeço demais velho!

 

Marcelo.

[Michel Araújo 0]

Fala Marcelo,

 

você pode simplificar isso adicionando as pétalas não ao palco, mas a um MovieClip 'container'. Aí quando você quisesse que as pétalas 'sumissem' basta você definir a visibilidade desse MC como falsa,ou até por um tween com uma transição de alphas, para fazer esse container sumir, junto com todas as pétalas dentro dele =)

 

mas lendo o que você disse eu pensei em outra coisa... não cheguei a olhar seu arquivo (estou em ambiente linux agora, sem flash), mas acho acho que as pétalas 'sumirem' fica um tanto estranho (pensando no modo real world xD). A ideia que tive, é que quando o mouse se mover, você pode 'parar' apenas as ações da função addPetala, assim ele vai parar de criar novas petalas, e as pétalas que já existem vão continuar caindo, até que caiam todas, e a tela fica 'limpa'. Só uma sugestão, pensa aí se não fica legal tb =)

[M2DOIS 0]

essa ultima opçao era tudo o que eu queria, mas nao consegui fazer!

 

tipo as petalas PARAM e param onde elas estao, algumas ate mesmo no meio da tela...

 

como eu faria para elas cairem total e ao mexer o mouse elas voltarem a cair?

 

Vlw

[Michel Araújo 0]

Abri seu fla aqui, e encontrei um erro de sintaxe, você esqueceu de colocar as chaves que abre e fecha o condicional. A função addPetala vai ficar assim:

 

//Função que adiciona nova petala.
function addPetala(te:TimerEvent):void
{
    if(movimenta)
	{ //<-- essa chave abre o bloco condicional

		var myPetala:petala = new petala();
		
		var scale:Number = getRandomByRange(0.3, 1);
		
		myPetala.scaleX				= myPetala.scaleY = scale;
		myPetala.x					= Math.random()*stage.stageWidth;
		myPetala.fallingCurve		= getRandomByRange(-2,2,true);
		myPetala.dropSpeed			= (scale/20)*100;
		myPetala.rotateSpeed		= getRandomByRange(-3,3,true);
		myPetala.turn				= 0.1;
		
		var petalaBlur:BlurFilter	= new BlurFilter();
		petalaBlur.blurX			= petalaBlur.blurY = (scale/50)*100;
		petalaBlur.quality			= 3;
		
		var filterArray:Array		= new Array(petalaBlur);
		myPetala.filters			= filterArray;
		
		myPetala.addEventListener(Event.ENTER_FRAME, dropMe);
		
		
		stage.addChild(myPetala);
	} // <-- essa chave fecha o bloco condicional
}

e no caso, para fazer com que as petalas continuem animadas mesmo com o movimento do mouse, é só deixar a função dropMe da mesma forma que estava no inicio, sem você fazer qualquer alteração:

 

function dropMe(e:Event):void
{
        var petala:MovieClip    = e.target as MovieClip;
        petala.x                                += petala.fallingCurve;
        petala.y                                += petala.dropSpeed;
        petala.rotation                 += petala.rotateSpeed;
        petala.scaleX                   += petala.turn;
        
        if(petala.scaleX > 1)
        {
                petala.turn = -0.1;
        }
        else if(petala.scaleX < 0)
        {
                petala.turn = 0.1;
        }
        
        if(petala.y > stage.stageHeight+petala.height)
        {
                e.target.removeEventListener(Event.ENTER_FRAME, dropMe);
                e.target.parent.removeChild(e.target);
        }
}

[M2DOIS 0]

Fiz exatamente como me disse, porem quando mexo o mouse as petalas continuam caindo elas nao pararam.

 

Acho que nao soube explicar....

 

o que eu queria ma verdade é que ao mexer com o mouse as petalas parassem, ok consegui isso com a sua ajudar (arrumei a } que tava faltando)...

 

porem eu gostaria que as petalas que ainda estivessem caindo quando mexi com o mouse acabassem de cair entende? pq do primeiro jeito que me ensinou funcionou so que elas pararam onde estavam ai fico meio estranho no meio do site algumas petalas paradas.

 

teria como fazer dessa forma?

 

Vlw

[Kradin 0]

Eu fiz um teste aqui e funcionou... deixa o condifional (o if) apenas na função addPetala e tira a da função dropMe

 

http://forum.imasters.com.br/public/style_emoticons/default/bye1.gif

[M2DOIS 0]

Bacana d+ deu certo aki.... mais uma vez Michel MUITO o brigado velho, e Kadrin vlw pela força me fez rever e achar o erro... brigadao tb!