You are here: Home Design Flash Efeito Neve Caindo (AS3)
   

Efeito Neve Caindo (AS3)

  • Print
(1 - user rating)
User Rating:  / 1
PoorBest 
Details
Details
Category: Flash
Published on Monday, 14 March 2011 00:27
Written by Marcos A. Visentin
Hits: 1909

Veja neste tutorial como criar um efeito de neve caindo bastante realista...

Utilizaremos apenas um Movie Clipe (que chamaremos de “neve”), e codificação Action Script 3...

 

Vejam os passos:

 

 

No flash, crie um novo arquivo AS3, e deixe no tamanho padrão (550 X 400). Pinte de preto (para poder ver a neve)...

  1. Abra o menu Insert // New Symbol (Ctrl + F8). Deixe como abaixo:

  2. Ao clicar ok, você verá uma nova janela chamada “Action Script Class Warning”... É só clicar em “OK”.

    Uma janela com fundo preto e uma marca ao centro vai aparecer... Nela, desenhe seu “floco de neve”: com a Oval Tool (O), desenhe um círculo (qualquer tamanho) e preencha com um gradiente radial do branco para o transparente... Defina sua Largura (W) e sua Altura (H) para 10. Veja como está a minha (com bastante zoom):

  3. Pronto, agora volte para a Scene 1 (parte superior esquerda da tela).
  4. Hora do Action Script para colocar o Movie Clip no palco e construir a animação... Selecione o frame 1 da timeline e pressione F9.
    Nessa janela, digite:

Código AS3

View source
  1. function nevar():void //cria a função nevar
  2. {
  3.  for(var i:Number=0; i < 700; i++) //sendo "i" (nº de partículas) <700,
  4. //acrescenta mais uma
  5.  {
  6.  var _nevar:neve; //variável para a classe neve (do próprio movie clip)
  7.  
  8.  _nevar = new neve(); //cria uma nova instância e............
  9.  addChild(_nevar); //...........coloca no palco
  10.  _nevar.x = -350 + Math.random() * 900;// (palco(largura)=550)...
  11. //-350 + 900 = 550
  12.  _nevar.y = Math.random() * 400; // surgimento randômico na altura (400)
  13.  _nevar.scaleX =_nevar.scaleY = Math.random();// tamanhos randômicos
  14.  _nevar.alpha = Math.random();//propriedade alpha, também randômica
  15.  _nevar.addEventListener(Event.ENTER_FRAME, nevasca);
  16.  //tudo o que está acima deve acontecer no evento ENTER_FRAME,
  17. //pela função "nevasca" (abaixo)
  18.  }
  19. }
  20.  function nevasca(event:Event):void 
  21. {
  22.  if ( event.target.y > 390 || event.target.x > 550)
  23.  { 
  24.  event.target.x = -350 + Math.random() * 900;
  25.  event.target.y = Math.random() * 40;
  26.  }
  27.  else 
  28.  { 
  29.  event.target.y += 5; event.target.x += Math.random() * 5;
  30.  //a linha acime é a velocidade da animação
  31.  } 
  32. }
  33. nevar(); // chamada da função inicial, para que ocorra a animação !!!
  34.  

E está pronto... Seu Movie Clip “neve” já foi multiplicado e cada “floco” tem seu próprio tamanho e opacidade...

Note também que as direções (desvios) desses “flocos” são diferentes e não estão em linha reta !!!

Pressione CTRL + Enter e veja o resultado... Como fundo (atualmente está preto), importe uma imagem qualquer onde você queira aplicar o efeito...

Forte abraço a todos e até a próxima.

Webtutoriais:2B31C1D9

   

Login