Criando um sistema de partículas simples com ActionScript 3.0

Há várias maneiras de como se criar partículas em Flash. Há desde bibliotecas que facilitam o trabalho e permitem criar efeitos excelentes (é o caso da Tweensy e a sua parte – ainda em beta – FX) até os tutoriais dificílimos disponíveis na Web, que geralmente envolvem muita matemática – e que são muito bons -, de sites como o Flash & Math.

No entanto, até que não é muito complicado criar efeitos simples usando bibliotecas como a TweenMax. Com uma quantidade enxuta de linhas é possível fazer efeitos interessantes.

A seguir, posto um exemplo bem simples, mas que serve para ilustrar que usar métodos e métodos para controle de tempo e criação de efeitos são desnecessários usando TweenMax:

package 
{
	import flash.display.*;
	import flash.events.*;
	import com.greensock.*; 
	
	/**
	 * ...
	 * @author Francisco Prado
	 */
	public class Main extends MovieClip
	{
		private var volume:int = 0;
		private var particulas:Array = new Array();
		
		public function Main():void 
		{
			// inicia (ou desenha mais) "partículas"
			desenharParticula();
		}
		
		private function desenharParticula():void {
			var mc:MovieClip = new MovieClip();
			mc.graphics.beginFill(Math.round(Math.random()*0x6666ff));
			mc.graphics.drawCircle(0, 0, 5);
			mc.graphics.endFill();
			
			mc.x = 200;
			mc.y = 300;
			
			addChild(mc);
			
			// fazendo as "partículas" subirem e desaparecerem
			TweenMax.to(mc, Math.random() + 1, 
			{ bezier: [
			{ x: mc.x, y: mc.y }, 
			{ x: (Math.random() * 50) + mc.x, y: 250 }, 
			{ x: (Math.random() * -50) + mc.x, y: 180 }, 
			{ x: mc.x, y: 80 }], 
			orientToBezier:true, blurFilter: { blurX: 10, blurY: 10 }, alpha: 0, motionBlur:true,
			onComplete: function removendo():void {
					removeChild(mc);
					mc = null;
				}
			});
			
			// chama o método para adicionar novas partículas à cena
			TweenMax.to(this, 0, { delay: 0.05, onComplete: desenharParticula } );
		}
	}
}

O código fará o efeito seguinte:

A ideia aqui não é mostrar necessariamente como fazer um sistema bonitinho de particulas, mas sim demonstrar que com uma linha do TweenMax é possível fazer um método para tempo e efeitos de cores e luz.

Usando ActionScript “puro” seria necessário apelar para uma variável Timer, uma outra linha para iniciar a contagem e uma função para manipular eventos no AS (TimerEvent).

Já com uma linha (no caso, a 48 do exemplo anterior) do TweenMax é possível fazer uma contagem (usando a propriedade de atraso delay) é possível fazer todas as coisas: o tempo e a chamada da função (no atributo onComplete é chamado o método que adicionará mais partículas).

A mesma situação na linha que fazem as partículas subirem e sumirem. Com o parâmetro bezier da TweenMax é possível fazer animações em curvas. Você pode conhecer mais efeitos testando nesta página, na seção Plugins.

Enfim, com um punhado de linhas é possível fazer efeitos bem interessantes, dispensando assim volumosos códigos chatos para caramba.

Acredito que, em se trantando de Flash – largamente utilizado na publicidade -, quanto menos linhas de código melhor, pois os prazos nem sempre são generosos (geralmente tudo é “pra ontem” 🙂 ) e eficiência é sempre fundamental.

Be Sociable, Share!

5 pensamentos em “Criando um sistema de partículas simples com ActionScript 3.0”

  1. Grande Chico!

    Ontem só tive tempo de favoritar e retuitar seu post, mas hoje volto para comentar com mais calma.

    Flash sempre foi um grande mistério para mim. Não sei exatamente como, mas até hoje consegui evitar fazer alguma coisa nele. Mas sei que, mais cedo ou mais tarde, vou ter de aprender ActionScript, a não ser que a tecnologia Flash morra antes (o que parece pouco provável).

    Achei o efeito interessante. Principalmente pelo pouco código empregado. Já tem versão para HTML5 com canvas? 😛

    Parabéns, e continue blogando! 🙂

  2. Pois é, também demorei a lidar com Flash. No início tinha preconceito, por ser fechadão, pesado, etc., mas com tempo tive que aceitar. E tanto que acabei tendo que trabalhar com ele. Coisas do destino. 🙂

    Com o HTML 5 dá/dará para fazer coisas legais, como dá com o Flash. Porém a adoção ainda está começando, há incompatibilidades entre os navegadores (como é o caso da tag – http://www.tableless.com.br/elemento-tag-audio), mas enquanto isso teremos que recorrer ao Flash para lançar essas coisas na Web. 😀

    Abs!

  3. This is such a great resource that you are providing and you give it away for free. I enjoy seeing websites that understand the value of providing a prime resource for free. I truly loved reading your post. Thanks!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Time limit is exhausted. Please reload the CAPTCHA.