Ok, ajmo sada da pokušamo da napravimo animaciju kiše. Recimo da imamo neku reku i moramo da animiramo kapljice koje ćemo na slučajan način „bacati“ u vodu i tom prilikom će se praviti koncentrični krugovi. Koristićemo neku realnu sliku reke koju možemo naći na internetu, namerno sam izabrao da ima refleksiju.

Krenimo redom.

Korak 1

Najpre ćemo pripremiti sliku tako što ćemo izdvojiti samo jedan njen deo koji će nama biti interesantan. Prvo idemo na Break Apart pa onda stavljamo pravougaonik i odsecamo deo koji nam ne treba.

Ok, naša slika sada izgleda ovako:

Korak 2

Sada hoćemo malo da zamutimo ovu vodu jer, jelte pada kiša, a kad pada kiša odsjaj nije tako kristalan. Jasno je, moramo da izdvojimo reku od obale i da zamutimo samo onaj deo koji predstavlja reka.

Sada kada smo selektovali reku kreiraćemo jedan movie clip koji ćemo nazvati „reka“. (Idemo na convert to symbol)

Korak 3

Dalje, postavićemo filter na movie clip „reka“ i to blur na vrednost 4.

Korak4

Promenićemo boju ove zelene linije u neku sivkastu nijansu.

Selektovaćemo sada sve to i konvertovati u novi simbol, movie clip koji ćemo nazvati „slika“, a onda ćemo i na taj movie clip staviti filter, koristićemo Adjust Color jer želimo da napravimo malo tmurniju atmosferu, znači moramo malo da ugasimo sliku.

Contrast podesimo na -40
Saturation na -60

S ovim svmo uradili sve što nam je potrebno a vezano je za pozadinsku sliku. Kasnije (ako me ne bude mrzelo) videćemo da animiramo i taj deo animacije.

Korak 5

Sada idemo na animiranje koncentričnih krugova koji se stvaraju prilikom dodira kapi kiše sa vodom. Ovaj deo neću nešto posebno puno objašnjavati, ideja je jednostavna, treba se prvo pojaviti jedan mali krug (tačnije elipsa) koji će početi da se širi, zatim se pojavljuje drugi krug i isto počinje da se širi i na kraju treći krug. Za ta tri kruga imaćemo tri layer-a. E sad, možemo dodati i jedan krug koji će biti ispunjen bojom koji će se takođe širiti. Recimo da za boju tog kruga uzmemo type = radial, sa tri bele boje ali ćemo za alpha vrednosti uzeti redom 8,9 i 1%.

To bi izgledalo ovako nekako:

Zaista, vi možete potpuno drugačije da uradite ovaj deo i da izgleda sasvim lepo, tako da ovaj deo nisam puno objašnjavao jer nema potrebe.

Korak 6

Ok, imamo pozadinsku sliku, imamo koncentrične krugove, ono što nam preostaje jeste kiša, tj. da animiramo kapljice. E sad razmišljam nešto... bilo bi mnogo jednostavnije da mi te kapljice ubacimo u okviru movie clip-a „krug“ zato što bi u suprotnom morali preko action scripta da prilikom dodira kapljice sa vodom da na to mesto postavimo jednu instancu kruga i da pustimo da se širi. To je mnogo teži način pa ćemo to videti da izbegnemo.


Kreiraćemo novi layer „kapljica“ i u njemu ćemo smestiti liniju koja predstavlja kapljicu u punoj brzini. Treba voditi računa da linija ima takav pravac koji vodi do centra kruga. To se najlakše može uraditi ako se prvo napravi linije koja vodi skroz do kruga pa se obriše deo puta koji kapljica još nije prešla.

Dakle, prvo kapljica padne pa se onda šire koncentrični krugovi.

Korak 7

E sad, priznaćete, baš je glupo da svaka kapljica pada pod istim uglom. Sad ćemo da uradimo još 2 ugla pod kojim kapljica može pasti. To ćemo uraditi na isti način kao i za prvi slučaj. Iskoristićemo postojeći layer „kapljica“.

E sad, u prvi frejm ćemo da „odlučimo“ pod kojim uglom će kapljica pasti tako šro ćemo pozvati random funkciju i u zavisnosti od toga da li je izabran broj 1,2 ili 3 skakati na frejm koji se odnosi na taj ugao padanja.

Naravno, potrebno je na krajevima svaka od 3 slučaja ubaciti AS:
gotoAndPlay(23);
da bi se posle pada kapljice otišlo na krugove. Isto tako stopirati animaciju na kraju.

Ovim smo završili sve animacije. Ostalo nam je još malo Action Scripta i to je to.

Korak 8

Sada ćemo napraviti novu animaciju koja će u sebi sadržati nekoliko kapljica.
Moramo voditi računa da ako se novostvoreni movie clip „kapljice“ nalaze na koordinatama 0,0 onda vrednosti x i y koordinata za kapljice u tom movie clip-u imaju vrednosti:
X od 1 do 500
Y od -150 do 100
Sada ćemo u movie clip „kapljice“ ubaciti 10 movie clipova „krug“ i instancirati ih sa imenima od k1_mc, k2_mc... do k10_mc.

Dodaćemo još 30 frejmova kako bi obezbedili dovoljno vremena da kapljice padnu na vodu.

Korak 9

E sad ćemo se malo pozabaviti actionscript-om.
Treba da obezbedimo da kapljice padaju na slučajan način i da u zavisnosti od toga da li je pala bliže nama ili dalje menjati njene dimenzije i providnost. One kapljice koje padnu skroz gore (koje su dalje od nas) imaće smanjene dimenzije, i njihovi koncentrični krugovi će takođe biti manjih dimenzija, i alpha vrednost će se smanjiti.

Prvi deo, postavljanje random koordinata kapljica:
k1_mc.x = Math.round(Math.random()* 500);
k1_mc.y = Math.round(Math.random()* 300 - 150);

Sama funkcija Math.random() daje slučajnu vrednost od 0 do 1. Ako se pomnoži sa nekim brojem n onda daje vrednosti od 0 do n. Tako smo mi i zadali da x koordinata kapljice ide od 0 do 500.
Ako hoćemo da nam vrednost ne ide od nule to možemo da korigujemo tako što ćemo dodati ili oduzeti neki broj. U našem slučaju mi smo oduzeli 150 da bismo dobili neki broj od -150 do 100.

Kada smo odredili koordinate kapljice sada ćemo da pokrenemo tu kapljicu:
k1_mc.gotoAndPlay(1);
E, sada ćemo da napisemo funkciju koja će u zavisnosti od prosleđene y koordinate vraćati neki od brojeva: 0.4 , 0.6, 0.8 , 0.9 ili 1

Evo i funkcije:
function postavka (y:Number):Number {
//u zavisnosti od y-koordinate
if (y<0){
return 0.4
} else if (y<-50){
return 0.6
} else if (y<0){
return 0.8
} else if (y<50){
return 0.9
} else return 1;
}

Sada ćemo to primeniti na kapljicu i time odrediti njenu visinu, širinu i providnost:
k1_mc.height = postavka(k1_mc.y);
k1_mc.width = postavka(k1_mc.y);
k1_mc.alpha = postavka(k1_mc.y);

Dakle, imamo tu jednu funkciju i pozivamo je za svaku kapljicu. Za kapljicu broj 2 imamo:
k2_mc.x = Math.round(Math.random()* 500);
k2_mc.y = Math.round(Math.random()* 300 - 150);
k2_mc.gotoAndPlay(1);
k2_mc.height = postavka(k2_mc.y);
k2_mc.width = postavka(k2_mc.y);
k2_mc.alpha = postavka(k2_mc.y);

... i tako za 10 kapljica.

Korak 10

Sada ćemo se vratiti na root i kreirati nekoliko layera koji će u sebi imati jednu instancu movie clip-a „kapljice“, imaće dužinu npr pedesetak frejmova i naizmenično će počinjati sa prikazivanjem.

Sada pokrenite animaciju.

Korak 11

Primetili ste da se koncentrični krugovi stvaraju i na suvom delu a ne samo na vodi. To ćemo sada da ispravimo.
Uđite u „kapljice“. Tu moramo postaviti masku. Površinu vode ćemo najbolje uzeti iz movie clip-a „reka“.

Korak 12

Sada ćemo malo da sredimo dodir reke sa obalom. To ćemo malo animirati. Uđite u mc „reka“ i napravite novi layer „kriva linija“ i postavite liniju dodira sa obalom sive boje.

U Layeru 1 smo napravili 20 frejmova.

Korak 13

Napravimo sada keyframe-ove na frejmu 10 i 20. Na početku (frejm 1) i na kraju (frejm 20) ćemo liniju malo odvojiti od obale, malo ćemo je pomeriti udesno, i alpha vrednost linije u tim frejmovima ćemo staviti da bude 30%. U frejmu 10 linija će stajati uz obalu, samo ćemo staviti da alpha vrednost bude 70%. Naravno, napravićemo Shape Tween od 1. do 20. frejma.

Imajte u vidu da smo na mc „reka“ stavili Blur tako da ćemo ovim dobitni mnogo lep efekat.
Pokrenite animaciju.

Korak 14

Ok, sada idemo na malo sredjivanje. Napravićemo novi layer „sminkanje“ i ubaciti neki okvir da to izgleda malo lepše. Ubacićemo 2 buttona „levo_btn“ i „desno_btn“ i jedan Dynamic Text. Neću se ovde mnogo zadržavati, ovo ću objasniti u nekom od sledećih tutorijala. Uglavnom, ideja je da se manipuliše intenzitetom kiše sa vrednošću od 3 do 10. Ta vrednost će se čuvati u promenljivoj „broj“ na root-u.

Korak 15

Sada kada imamo broj koji govori o intenzitetu ući ćemo u mc „kapljice“ i u odnosu na taj broj odredjuje se koliko će kapljica padati (od 3 do 10).

To ćemo uraditi tako što ćemo postavke za svaku kapljicu oivičiti if blokom.
Recimo za k4_mc će biti:
if (MovieClip(root).broj > 3){
k4_mc.x = Math.round(Math.random()* 500);
k4_mc.y = Math.round(Math.random()* 300 - 150);
k4_mc.gotoAndPlay(1);
k4_mc.height = postavka(k4_mc.y);
k4_mc.width = postavka(k4_mc.y);
k4_mc.alpha = postavka(k4_mc.y);
}

Dakle, ako je broj veći od 3, kapljica 4 će padati. Slično, ako je broj veći od 4, kapljica 5 će padati.... ako broj ima vrednost 8 znači da će padati prvih 8 kapljica.

Završili smo, to bi bilo to. Hvala na pažnji.

p.s. Vama sad prepuštam da napravite jedan gliser koji će prolaskom da istera pola vode na obalu .