Tweening je jedna od najmoćnijih mogućnosti Flasha. Reč Tween je skraćeno interpretiranje fraze In Between (između). Bilo da pravite animaciju karaktera (lika) ili pokretnu grafiku, pa čak i osnovne efekte na buttonima (tasterima), videćete da je tweening nezamenljiva tehnika u Flashu. Kada ste isplanirali Vašu animaciju i kreirali inicijalnu grafiku, možete koristiti tweening za simuliranje tranzicione grafike između ključnih frejmova. Ovo je alat koji Vam omogućava da generišete glatku, preciznu animaciju sa ogromnom uštedom u vremenu koje biste potrošili praveći unikatne grafičke promene, kao što je to slučaj sa frame by frame animacijama. Umesto toga, uspostavićete početnu i krajnu tačku, a onda ćete dozvoliti Flashu da interpolira i izvrši render, ili tween i na taj način ćete imati ispunjen prostor između početne i krajnje tačke. Tweening može biti iskorišćen za renderovanje promena u veličini, obliku, boji, poziciji i rotaciji.

Tweening takođe smanjuje veličinu fajla zato što nemate posebnu grafiku u svakom ključnom frejmu Vaše animacije. Razlog tome je što ste Vi definisali sadržaj samo za početnu i krajnju tačku animacije, Flash snima samo te dve grafike, plus vrednosti koje su potrebne za nastajanje promena između.

U Flashu mogu biti kreirane tri vrste tweenova:

  • Shape Tween
  • Motion Tween
  • Classic Tween

 

Svaki od ovih tipova ima svoju primenu u Flash animacijama. Tip tweena koji upotrebite se prikazuje na Timeline-u u vidu ispuna različite boje. Motion Tween je predstavljen plavom bojom, Shape Tween je predstavljen zelenom bojom, dok je Classic Tween prikazan svetloljubičastom bojom.

 

Shape Tween

Shape Tween se koristi uglavnom kada pravite animaciju u kojoj postoje modfikacije na osnovnim oblicima. Na primer, ako želite da pretvorite kvadrat u krug ili od tačke pravite liniju, iskoristićete mogućnosti Shape Tweena. Flash može da primeni Shape tween samo na „sirove“ oblike, i zato nemojte da se trudite da pravite Shape tween na grupama, simbolima ili na editabilnim tekstovima, jer tween neće raditi. Možete primeniti tween na layer na kom imate više oblika, ali ipak je najbolje da svaki oblik imate na zasebnom layeru. Da bismo Vam na najednostavniji način prikazali kako se ponaša shape kada mu se doda Shape Tween, potrebno je da napravite jedan krug na sceni. Zatim ćete kliknuti na 24 frejm i pritisnuti taster F5 da biste proširili Timeline do tog frejma. Nacrtani krug ćete pozicionirati malo ulevo u odnosu na scenu (slika 1).

 

Slika 1. Prikaz nacrtanog shape-a

 

Sada kada imamo shape koji je spreman za animiranje i kada smo pripremili Timeline, tako da traje sekundu, odnosno 24 frejma, spremni smo da animiramo ovaj objekat. Ako se sećate, kada smo pravili frame by frame animaciju, svaka promena u izgledu grafike je zahtevala novi artwork. U ovom slučaju za tim neće biti potrebe. Kliknućemo na 24 frejm i pretvoriti ga u ključni frejm pritiskom na taster F6. Zatim ćemo selektovati objekat koji imamo na sceni i prebaciti ga malo udesno od položaja scene (slika 2).

 

Slika 2. Izmeštanje objekta u 24. ključnom frejmu

 

Da bismo u potpunosti prikazali efekat Shape Tweena uz pomoć Free Transform alatke, skaliraćemo na sasvim mali krug naš objekat u 24. frejmu (slika 3).

 

Slika 3. Prikaz promena na objektu u 24. frejmu

 

Sada pravimo animaciju, kliknućemo desnim tasterom miša na prvi frejm naše animacije i iz kontekstualnog menija ćemo odabrati opciju Create Shape Tween (slika 4).

 

Slika 4. Prikaz za odabir Create Shape Tween opcije iz kontekstualnog menija

 

Ako je sve urađeno kako bi trebalo, na Timeline-u bi trebalo da dobijete konstantnu strelicu koja se proteže od prvog do poslednjeg frejma sa zelenom pozadinom (slika 5).
 

Slika 5. Prikaz kreiranog Shape Tweena na Timeline-u

 

Sada ako testiramo film u Flash playeru videćemo kako se u jednoj sekundi naš krug kreće sa leve na desnu stranu ekrana, konstantno smanjujući svoju veličinu u tom putu (slika 6).

 

Slika 6. Prikaz animacije puštene u Flash playeru

 

Kao što možete da vidite, u prvom frejmu smo zadali početno stanje gde je krug najveći, dok smo u poslednjem frejmu zadali stanje gde je krug najmanji i skroz na desnoj strani ekrana. Flash je sam ispunio trajektoriju konstantno smanjujući krug kako ide sa leve na desnu stranu, koristeći Shape Tween opciju. Za ovakvu animaciju u metodi frame by frame bile bi nam potrebne 23 promene veličine našeg objekta.

Da bismo videli malo kompleksniju primenu Shape Tween opcije, napravili smo animaciju  koja će nam to omogućiti (slika 7).

 

Slika 7. Prikaz animacije na sceni

 

Napravili smo pozadinu u plavoj boji, a zatim smo nacrtali lice na zasebnom layeru (slika 8).

 

Slika 8. Pozadina i lice na zasebnim layerima

 

Zatim smo nastavili sa crtanjem vrata i kontura tela takođe sve na posebnim layerima, jer kao što smo rekli na početku, uvek je dobro da svi oblici budu na posebnim layerima (slika 9).

 

Slika 9. Dodavanje novih kontura

 

Nastavljamo sa crtanjem, pravimo još par layera i bojimo konture koje smo prethodno nacrtali (slika 10).

 

Slika 10. Dodavanje novih layera i bojenje postojećih

 

Polako se bližimo konkretnim radnjama koje su vezane za Tween, ostalo je da dodamo još samo nekoliko elemenata, kao što su oblaci (slika 11).

 

Slika 11. Dodavanje oblaka

 

Animiraćemo oblake tako da se kreću na sceni od prvog do poslednjeg frejma naše animacije dodavanjem Shape Tweena (slika 12).

 

Slika 12. Dodavanje Shape Tweena layeru Clouds (Oblaci)

 

Ako pogledamo finalnu sliku animacije, videćemo da imamo okvir i tekst na njemu. Napravićemo okvir koji ćemo ispuniti crnim Fillom, a zatim ćemo ga pretvoriti u simbol i smanjiti mu Alpha vrednost (slika 13).

 

Slika 13. Dodavanje okvira koji smo pretvorili u simbol i smanjili mu Alpha vrednost

 

U petom frejmu na layeru, gde se nalazi okvir, pravimo novi ključni frejm i dodajemo tekst (slika 14).

 

Slika 14. Dodavanje teksta u 5 frejmu koji pretvaramo u Keyframe na layeru gde se nalazi okvir

 

Pravimo novi layer na kom ćemo u šestom frejmu dodati novu grafiku, ali ćemo ga prethodno pretvoriti u ključni frejm. Na tom istom layeru dodajemo novu grafiku, takođe i u 14. frejmu, kao i u 19. frejmu (slika 15).

 

Slika 15. Pravljenje novog layer-a, novih keyframe-ova i dodavanje grafike na njima

 

Ovo su do sada bile sve poznate stvari. Sada ćemo napraviti novi layer koji ćemo nazvati Mouth (Usta) i u prvom ključnom frejmu ovog layera nacrtaćemo tačkicu koja će predstavljati usta (slika 16).

 

Slika 16. Dodavanje usta na novom layeru

 

Kada smo to uradili, kliknućemo na 24 frejm Mouth layera, pretvoriti ga u ključni frejm, a zatim ćemo nacrtati usta koja se smeše (slika 17).

 

Slika 17. Crtanje osmeha u 24. frejmu layera Mouth

 

Kliknućemo desnim tasterom na prvi frejm Mouth layera, odabraćemo opciju Create Shape Tween i Flash će napraviti svoju magiju i interpoliratii postepenu tranziciju osmeha. Na ovaj način smo uspešno animirali našu grafiku, dodali smo neke efekte i savladali smo Shape Tween opciju. Ova animacija je uključena u materijale za vežbu koji su vezani za ovu grafiku.

 

Motion Tween

Motion Tween je veoma koristan za animiranje Movie Clip simbola, Graphic simbola i teksta koji se može editovati. Međutim, ne može se koristiti za animiranje grupa, drawing objekata ili jednostavnih oblika, osim, naravno, ako pre toga nisu pretvoreni u simbol. Kao što samo ime kaže, Motion Tween odnosi na pomeranje (pokretanje) objekata, sa jednog mesta na drugo, ali u praksi ovaj vid animacije može mnogo više. Motion Tween takođe može biti upotrebljen za animiranje skaliranja, rotiranja, izvrtanja, promenu boje ili transparentnosti simbola. Flash filteri i novi 3D Properties koji su se pojavili u verziji CS5 takođe mogu biti animirani uz pomoć ovog vida tweena.

Važno je da napomenemo da, kao i ostali tipovi animacija, ni Motion Tween nije svemoguć i često ćemo ga koristiti u kombinaciji sa Shape Tweenom, pa čak i sa frame by frame animacijama.

Pravljenje Motion Tweena je verovatno najlakše od svih ostalih tipova. Možete ga napraviti tako što ćete kliknuti desnim tasterom miša na frejm i odabirom opcije Create Motion Tween iz kontekstualnog menija (slika 18).

 

Slika 18. Prikaz opcije za odabit Motion Tweena u kontekstualnom meniju

 

Motion Tween takođe možete kreirati tako što ćete kliknuti desnim tasterom miša na simbol koji želite da animirati i tu odabrati opciju Create Motion Tween. Kada odaberete opciju za Motion Tween Flash će Vam automatski produžiti Timeline za sekundu, što bi značilo za onaj broj frejmova kojim ste definisali FPS (slika 19).

 

Slika 19. Prikaz Timeline-a posle odabira opcije za kreiranje Motion Tweena

 

Sada kada ste kreirali Motion Tween, ostaje Vam da dodate ključni frejm na kraju Vaše animacije, a ako želite da proširite i ostale layere. Mi ćemo napraviti animaciju za koju će nam biti potrebno više frejmova, pa ćemo produžiti Timeline do frejma 96. Na sceni imamo grafiku u okviru koje ćemo animirati tekst (slika 20).

Slika 20. Prikaz grafike na kojoj ćemo animirati tekst

 

Selektovaćemo tekst layer, kliknuti na frejm 24 i izmestićemo tekst u položaj koji nam  najviše odgovara. To je sve što je potrebno da uradite, jer sve ostalo za Vas radi Flash. Ako pogledate bolje Timeline, videćete da je Flash stavio mali dijamant na poziciju frejma 24. To znači da je tu ključni frejm animacije (slika 21).

Slika 21. Prikaz ikonice dijamanta koju je Flash napravio jer smo mi
ovaj frejm obeležili kao trenutak animacije

 

Sve što je potrebno sada da uradimo je da izmestimo simbol na željenu poziciju (slika 22).

Slika 22. Pozicioniranje simbola u ključnom frejmu

 

Kao što vidite, mi smo u ovom frejmu promenili i poziciju simbolu, ali smo mu promenili i veličinu. Napravićemo nove promene u 48 i 72 frejmu, takođe. Ako dobro pogledate narednu sliku, videćete da se na sceni pojavljuju zelene isprekidane linije. Uz njihovu pomoć možete editovati putanju po kojoj se kreće simbol koji animiramo (slika 23).

Slika 23. Prikaz linija za editovanje putanje

 

Classic Tween

Classic Tween možete prepoznati po ljubičastoj pozadini na Timeline-u. Kao i kod Shape Tweena, uspešan Classic Twen na sebi ima konstantnu strelicu (slika 24).

 

Slika 24. Prikaz Classic Tweena na Timeline-u

 

Kod Classic Tweena bitno je da zapamtite da morate imati instancu jednog simbola na početnom i završnom Keyframe-u. Ukoliko se budete vodili tom logikom, nećete imati problema sa ovom vrstom Tweena. Da bi smo se bolje upoznali sa Classic Tweenom, napravićemo animaciju lopte koju u toku leta nadole probuši metak koji dolazi horizontalno (slika 25).

 

Slika 25. Primer animacije

 

Prvo što ćemo uraditi je promena boje naše scene u crno. Kliknite na Stage u Properties panelu i odaberite crnu boju. U prvom frejmu imamo loptu na sceni koju smo pretvorili u simbol. Nacrtaćemo metak, pretvorićemo ga u simbol i on će takođe biti vidljiv u prvom frejmu (slika 26).

Slika 26. Izgled grafike u prvom frejmu

 

Prvo ćemo animirati loptu. Pravimo ključni frejm na poslednjem 48 frejmu, pomeramo poziciju lopte skroz na dole, klinućemo desnim klikom miša na bilo koji frejm i iz kontekstualnog menija ćemo odabrati opciju Create Classic Tween (slika 27).

Slika 27. Prikaz lopte u poslednjem ključnom frejmu

 

Sada na red dolazi animiranje metka. U 23 frejmu pravimo ključni frejm i pomeramo metak na novu poziciju, takođe pravimo ključni frejm u poslednjem frejmu animacije. Kreiraćemo dva Classic Tweena. Prvi će biti od prvog do 23 frejma, a drugi od 23 do 48 frejma. Sada imamo sledeću situaciju na sceni (slika 28).

Slika 28. Prikaz situacije na sceni u 23 frejmu

 

Na red dolazi dodavanje efekata. Napravićemo dva nova layera, jedan za efekat rupe na lopti, a drugi za delove lopte koji se raspršuju. Nacrtaćemo ove oblike i pretvorićemo ih u simbole. Prvo ćemo animirati rupu na lopti. U 22 frejmu pravimo ključni frejm, od prvog do 22 frejma pravimo Blank Keyframove. Pravimo ključni frejm u poslednjem frejmu animacije i zatim dodajemo Classic Tween od 22 do 48 frejma animacije. Rupa od 22 frejma nastavlja da prati putanju lopte (slika 29).

Slika 29. Prikaz animacije posle dodavanja efekata

 

Sada animiramo delove lopte koji se raspršuju. Pravimo ključni frejm u 22 frejmu animacije. Svi ostali frejmovi su pretvoreni u Blank Keyfrejmove. Pravimo novi layer koji ćemo ispuniti  tekstom. Dodajemo ključni frejm u 22 frejmu, frejmove od prvog do 22 pretvaramo u Blank Keyframove. Frejmove od 25 do 48 takođe pretvaramo u Blank Keyframove. Ovo je poslednji dodatak našoj animaciji (slika 30).

Slika 30. Finalni izgled animacije u 22. frejmu

 

Ovim završavamo našu lekciju koja se bavi Tweenovima u Flashu. Kao što ste mogli da primetite, svaka vrsta Tweena ima svoju namenu, i u toku rada ćete ih jako često koristiti što odvojeno, što kombinovano. Dobro se upoznajte sa Tweenovima, saznajte šta još mogu, upoznajte napredne opcije da biste postigli fantastične rezultate u Vašim animacijama.

Dodaj komentar Sviđa mi se - (0) Ne sviđa mi se - (0)    

  • Korišćenje Tween-ova za animaciju 1
  • Korišćenje Tween-ova za animaciju 2
  • Korišćenje Tween-ova za animaciju 3
  • Korišćenje Tween-ova za animaciju 4