Cartão de Natal animado com AS3

Neste tutorial sobre o Flash, você vai aprender como criar um cartão de Natal animado com flocos de neve caindo lentamente através da imagem.

Passo 1

Abra o Adobe Flash CS3 ou CS4, e crie um novo arquivo ActionScript 3.0 e salve-o com o nome de snow.fla.

Passo 2

Renomeie a primeira camada para “Cartão”. Sobre está mesma layer vamos exportar uma imagem qualquer (com tema de Natal) que será o fundo do nosso cartão.

Neste exemplo usamos um wallpaper retirado do site: http://www.xmas-wallpapers.com/

Passo 3

Agora criamos uma nova camada que vai conter as ações do nosso projeto. Antes de escrever o código, vamos criar um floco de neve. Desenhe uma forma que se pareça com a neve, você pode usar a ferramenta “Oval” (O) para fazer o floco.

Faça o floco de neve

Depois do processo acima, selecione o pequeno círculo e pressione a tecla F8 para converter em um Movie Clip. Na janela de configuração clique em “Advanced” e coloque o nome da classe de “Snowflake”, clique em Ok. Agora se quiser pode excluir o objeto criado.

Criando a classe

Passo 4

Com a camada de ações (actions) seleciona, abra o painel Actions (F9). No primeiro frame da camada, adicionamos o evendo enterFrame:

addEventListener(Event.ENTER_FRAME, createSnow);

Passo 5

Na função createSnow (que manipula o evento enterFrame), criamos um floco de neve usando a classe Snowflake e definimos sua posição x para um valor aleatório. Também adicionamos o evento enterFrame no floco a fim de animá-lo:

function createSnow(event:Event):void{
	var snowflake : Snowflake = new Snowflake();
	snowflake.x = Math.random() * stage.stageWidth;
	snowflake.y = 0 ;
	addChild(snowflake);
	snowflake.addEventListener(Event.ENTER_FRAME, moveSnowflake);
}

Passo 6

Nesta função moveSnowflake, verificamos se o floco de neve ainda é visível na fase de acompanhamento de sua propriedade y. Se assim for, podemos modificar o Y, alpha, scaleX e as propriedades scaleY para torná-lo caindo e se derretendo.

Mais como não vemos mais o floco de neve, removeremos os eventos usados na função anterior:

function moveSnowflake(e:Event):void{
	if(e.target.y < stage.stageHeight){
		e.target.y += 10 + Math.random() * 5 ;
		e.target.alpha -= 0.015;
		e.target.scaleX = e.target.scaleY -= 0.01;

	}
	else{
		e.target.removeEventListener(Event.ENTER_FRAME,moveSnowflake);
		removeChild(e.target as Snowflake);
	}
}

Passo 7

Aqui está o código final completo, teste o seu projeto para vê-lo em ação:

addEventListener(Event.ENTER_FRAME, createSnow);

function createSnow(event:Event):void{
	var snowflake : Snowflake = new Snowflake();
	snowflake.x = Math.random() * stage.stageWidth;
	snowflake.y = 0 ;
	addChild(snowflake);
	snowflake.addEventListener(Event.ENTER_FRAME, moveSnowflake);
}

function moveSnowflake(e:Event):void{
	if(e.target.y < stage.stageHeight){
		e.target.y += 10 + Math.random() * 5 ;
		e.target.alpha -= 0.015;
		e.target.scaleX = e.target.scaleY -= 0.01;

	}
	else{
		e.target.removeEventListener(Event.ENTER_FRAME,moveSnowflake);
		removeChild(e.target as Snowflake);
	}
}