Tutorial efeito chuva no Adobe Flash 
Autor: Renato F. Fernandes | Publicado: 2013-01-03T00:30:00-02:00






Olá a todos. Já faz algum tempo que quero postar aqui no blog um tutorial do Adobe Flash, pois acho fantastico o programa, não sou expert no Flash, mas possuo algum conhecimento no programa.A versão que usei para este tutorial é o Adobe Flash CS3, mas creio eu que pode ser feito em qualquer versão do programa. Tipo o MX, o flash 8 e outras verões anteriores ou superiores ao CS3. Tempos atrás eu criei o mesmo tutorial no Flash 8, só que não pude postar aqui no blog. Criei no CS3 por ser a minha versão preferida.

Abaixo o video do efeito:






<embed src="https://www.youtube.com/get_player" type="application/x-shockwave-flash"
width="320" height="266" bgcolor="#FFFFFF"
flashvars="flvurl=https://redirector.googlevideo.com/videoplayback?requiressl%3Dyes%26id%3Dca7d37ec0aa96029%26itag%3D5%26source%3Dblogger%26app%3Dblogger%26cmo%3Dsecure_transport%253Dyes%26cmo%3Dsensitive_content%253Dyes%26ip%3D0.0.0.0%26ipbits%3D0%26expire%3D1484861432%26sparams%3Drequiressl,id,itag,source,ip,ipbits,expire%26signature%3D7A6BD9FEE0AC307D4C71A6288DF4DF129D3F5D5.7E82CE6248F7160DA9A067F7E4B718E765B0616C%26key%3Dck2&iurl=http://video.google.com/ThumbnailServer2?app%3Dblogger%26contentid%3Dca7d37ec0aa96029%26offsetms%3D5000%26itag%3Dw160%26sigh%3DFZOlEIqXZrI8d5FBjJNQ18GNB9g&autoplay=0&ps=blogger"
allowFullScreen="true" />


Imagem original:























Resolvi criar aqui mesmo o tutorial, sem usar uma paginá especifica, pois o meu blog já atingiu o limite de paginas. Então vamos lá:



Em primeiro lugar escolha uma imagem, na web ou em algum outro lugar que melhor se adapte ao efeito e salve em seu computador. Abra o Flash. Escolha action script 2.0, ja na interface do programa, clique em file, import, import to stage, como mostra a imagem abaixo:







No meu caso depois já com a imagem no palco do programa, eu tive que dar um flip horizontal na imagem. Para isso cliquei em modify, transform, flip horizontal.









Clique no primeiro frame da imagem, como mostra a elipse abaixo:













Tecle f9 para abrir o menu actions:







No editor de actions insira o seguinte código:





function chuva(qtd_pingo, vel_chuva){

_root.duplicador = qtd_pingo



for(i=0; i&lt;=_root.duplicador;i++){

_root.createEmptyMovieClip("pingo" + i , i)

_root["pingo"+ i].moveTo(20,20)

_root["pingo"+ i].lineStyle(1,"0xcccccc", random(100))

_root["pingo"+ i].lineTo(20,3)

_root["pingo"+ i]._x = random(Stage.width)

_root["pingo"+ i]._y = random(Stage.height)

_root["pingo"+ i]._rotation = 135

}



onEnterFrame = function(){

&nbsp; &nbsp; for(i=0; i&lt;=_root.duplicador;i++){

&nbsp; &nbsp; &nbsp; &nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; if(_root["pingo"+ i]._y&gt;Stage.height){

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _root["pingo"+ i]._x = random(Stage.width)

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _root["pingo"+ i]._y = random(Stage.height)



&nbsp; &nbsp; &nbsp; &nbsp; }

&nbsp; &nbsp; &nbsp; &nbsp; else{

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _root["pingo"+ i]._y += vel_chuva

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _root["pingo"+ i]._x += vel_chuva

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }

&nbsp; &nbsp; &nbsp; &nbsp;

&nbsp; &nbsp; }

&nbsp; &nbsp;

&nbsp; &nbsp;

&nbsp; &nbsp; }

}

chuva(200,20)



Creio eu que você sabe que é só preciso copiar o código aqui da pagina e colar no editor. Feche o editor clicando em f9.

Teste o movie clip teclando ctrl+ enter.







Pronto o efeito esta criado. No caso de você usar outra versão do &nbsp;

Flash, você terá que converter a imagem num movie clip e impota-la para o palco do Flash, aconselho você a usar o CS3 ou uma versão superior que você não terá problema em criar o efeito.



Mudando os parametros do efeito:



Se você aterar a linha:



_root["pingo"+ i].moveTo(20,20)

só o&nbsp;(20,20) por (40,40) os pingos aumentaram, como mostra&nbsp;

a imagem abaixo:





Se você diminuir o valor os pingos ficarão menores.



Em:

_root["pingo"+ i].lineStyle(1,"0xcccccc", random(100))



, se você aumentar o valor de random o Flash vai adicionar mais pingos na imagem, caso o valor seja menor, tera menos pingos na imagem.



em:



_root["pingo"+ i]._rotation = 135



em rotation o flash define o angulo em que os pingos cairam na imagem, se você alterar o valor, estará alterando o angulo em que os pingos cairão na cena.

Com o valor = 35,

ficará igual a imagem abaixo:







Se você quiser alterar a velocidade dos pingos é só alterar

a linha:



chuva(200,20)



Diminuindo o valor 20, você reduz a velocidade dos pingos do efeito.



Você pode também converter o arquivo em avi. E edita-lo no Movie Marker e incluir um som de chuva no arquivo oque ficaria bem legal. Enfim é só usar a criativaidade.



Bom gente é isso. Espero que gostem do tutorial e quem sabe em breve teremos mais tutoriais aqui do Adobe Flash. Um abraço á todos.