U ovom tutorijalu ću pokušati da napravim jednu zanimljivu animaciju kuće, tačnije senke na kući. Sve to bi trebalo ovako da ispadne:

Pretpostavljam da imate neko predznanje vezano za crtanje i rad sa layerima tako da ću u ovom tutorijalu neke međukorake preskakati.

Korak 1

Na samom početku ćemo uzeti sa neta neku sliku kuće, desni klik pa Copy Imaege to Clipboard, zatim ćemo otvoriti Flash i na stage-u desni klik pa Paste.

Korak 2

Dve opcije koje se najviše koriste kada su slike u Flash-u u pitanju su Break Apart (kada selektujemo sliku idemo na Modify –> Brake Apart) alatka koja nam omogućava da se slika kasnije secka (vrlo brzo ću pokazati kako) i druga je Trace Bitmap (Modify -> Bitmap -> Trace Bitmap) koja pretvara sliku u vektorsku grafiku, što može biti od velike koristi ako se žele animirati delovi slike, no to ćemo ostaviti za neku drugu priliku.

Mi ćemo koristiti Break Apart jer želimo da sa slike uklonimo nebo. Prvo ćemo povući linije oko kuće tačnije oko onog dela slike koji želimo da izdvojimo. Zapamtite, da nismo uradili Break Apart ne bismo videli linije koje crtamo preko slike jer je slika po defaultu ispred linije, ali Break Apart nam to omogućava i što je najvažnije moguće je kriviti linije a slika ispod linija se neće menjati. Ajde da to i uradimo:

Korak 3

Sada kliknite bilo gde na plavu površinu i videćete da ste selektovali samo nebo, naravno ako je sve ispravno odrađeno a to znači da je deo koji želimo da selektujemo stvarno oivičen linijama.

Sada ćemo selektovati nebo i promeniti mu boju tako što ćemo u desnom gornjem uglu za type izabrati Linear i postaviti boju da ide od plave do bele tako da na vrhu neba dođe plava a pri dnu bela boja, baš kao na slici:

Korak 4

Kada smo to uradili prelazimo na prednji i bočni zid kuće i kao i za nebo, iscrtaćemo linije, zatim ćemo linije iskriviti tako da odgovaraju ivicama zidova, ovako:

Korak 5

Sada ćemo napraviti dva layera, “prednji” (odnosi se na prednji zid) i “bocni” (odnosi se na bočni zid) i u njih staviti konture prednjeg i bočnog zida.

Korak 6

Sada ćemo ispuniti te zidove tamno-sivom bojom s tim što će za Alpha parametar za prednji zid staviti 50% a za bočni 1%. i naravno, izbrisaćemo crvene linije jer nam više ne trebaju. Ovako treba to da izgleda:

Korak 7

Sada ćemo u layer-e “prednji” i “bočni” da ubacimo keyframe-a na frame-u 40, i promenićemo alpha vrednosti tako što će sada prednji zid imati vrednost 50% a bočni 1% i za oba layer-a da od prvog do četrdesetog frejma kreiraćemo Shape Tween.

Predlažem Vam da ne pokrećete animaciju još pošto ćete pola sata zadivljeno gledati kako sunce prelazi sa jedne strane kuće na drugu i izgubićete dosta vremena :)

Korak 8

Nije još kraj. Sada ćemo dodati i neke ptičice, što bi rekao Mile Kitić: “Mala kuća, a na kući ptičica kaže da si neverna devojčića nisi mala, nisi meni neverna samo si vesela” xaxaxaa :D Šalim se, njih možemo crtati a možemo i naži negde na netu. Ovako nešto:

Korak 9

Sada ne bi bilo loše da sunce baca senku tih ptičica na kuću. Jasno je, kopiraćemo ponovo te ptičice i staviti ih na novi layer “ptičice” i malo ćemo ih rotirati pošto sunce na početku dolazi sa desne strane.

Korak 10

Ok. Sunce je na početku na desnoj strani i ide, polako prelazi na levu, i kako prelazi na levu tako se i senka ptičica rotira u desno. Jasno, potrebno je na 40-om frejmu rotirati senku i opet kreirati Shape Tween.
Zanemarićemo to što prosta rotacija ne daje uverljivo pomeranje senke. Inače, to bi moglo, takođe veoma lako da se uradi kada bi sad tu senku pretvorili u movie clip i da se žice na kojima stoje golubovi uvrću tako da se u jednom trenutku poklope a posle opet raziđu. Ali mi ćemo jednostavniju varijantu.

Korak 11

Sada ćemo kreirati novi layer “mask” i u njega ubaciti isto što se nalazi i u layer-u “prednji” stim što ćemo promeniti boju, tj. Type na Radial i postaviti poje od tamno sive sa Alpha 85% do tamno sive sa alfom 1%. Vrlo je važno da centar bude u centru rotacije i da smanjite krug kao na slici.

Korak 12

I na kraju je potebno samo još da stavimo masku na layer “pticice”.

Gotovi smo.
Moglo je to mnogo bolje da se uradi ali može i ovo da posluži. Može sad tu još da se poradi na senkama, primetili ste da smo ostavili krov netaknut, zatim ove ptičice su isto mogle bolje da se urade, i da se pomeraju ubrzano, trava isto netaknuta, sve to može lepo da se uradi i napravi jedna lepa animacija ali i ovako izgleda prilično pristojno.