1. ANIMACIJAANIMACIJA
Autor: Maja ManojlovićAutor: Maja Manojlović
Kolegij: Multimedijski sustaviKolegij: Multimedijski sustavi
Ljetni semestar 2013/2014Ljetni semestar 2013/2014
Odjel za informatiku RijekaOdjel za informatiku Rijeka

2. Uvod u animaciju (1/2)Uvod u animaciju (1/2)
 ANIMACIJA – brzo prikazivanje nizaANIMACIJA – brzo prikazivanje niza
crteža objekta koji se razlikuju po nekimcrteža objekta koji se razlikuju po nekim
detaljimadetaljima
 crteži = kadrovicrteži = kadrovi

3. Uvod u animaciju (2/2)Uvod u animaciju (2/2)
 grafici se dodaje vremenska dimenzijagrafici se dodaje vremenska dimenzija
koja određuje kada će se i koji grafičkikoja određuje kada će se i koji grafički
objekt (kadar) pojaviti i koliko dugo ćeobjekt (kadar) pojaviti i koliko dugo će
trajati njegovo prikaz na ekranutrajati njegovo prikaz na ekranu

4. Animacija iAnimacija i
multimedija (1/3)multimedija (1/3)
 način korištenjanačin korištenja::
1.1. prikazivanje čitavih multimedijskihprikazivanje čitavih multimedijskih
projekata kao animacijeprojekata kao animacije
 demonstracije ili prezentacijedemonstracije ili prezentacije
 ne zahtijevaju interakciju s korisnikomne zahtijevaju interakciju s korisnikom

5. Animacija iAnimacija i
multimedija (2/3)multimedija (2/3)
2. uključivanje manjih animacija u veće2. uključivanje manjih animacija u veće
multimedijske ili hipermedijske projektemultimedijske ili hipermedijske projekte
 cilj je privući pažnju korisnika ili pojasniticilj je privući pažnju korisnika ili pojasniti
neki dinamički sadržajneki dinamički sadržaj

6. Animacija iAnimacija i
multimedija (3/3)multimedija (3/3)
 interaktivne animacije ili simulacijeinteraktivne animacije ili simulacije ––
nakon što korisnik promijeni neki odnakon što korisnik promijeni neki od
zadanih parametara, mijenja se rezultatzadanih parametara, mijenja se rezultat
prikaza animacijeprikaza animacije

7. Računalna animacijaRačunalna animacija
(1/5)(1/5)
 koristi različite tehnike kojima jekoristi različite tehnike kojima je
zajedničko to što je rezultat digitalnozajedničko to što je rezultat digitalno
kreirana animacija pomoću računalakreirana animacija pomoću računala
 animacija se dijeli na 2-D i 3-D animacijuanimacija se dijeli na 2-D i 3-D animaciju

8. Računalna animacijaRačunalna animacija
(2/5)(2/5)
 2-D animacija2-D animacija
 najčešće se koristinajčešće se koristi
 za uređivanje i kreiranje kadrova koriste seza uređivanje i kreiranje kadrova koriste se
alati za izradu 2-D bitmapa ili vektorskealati za izradu 2-D bitmapa ili vektorske
grafike (npr. Flash)grafike (npr. Flash)

9. Računalna animacijaRačunalna animacija
(3/5)(3/5)
Slika 1: 2-D animacija konjaSlika 1: 2-D animacija konja
(http://en.wikipedia.org/wiki/Traditional_animation#mediaviewer/File:Animhorse.gif)(http://en.wikipedia.org/wiki/Traditional_animation#mediaviewer/File:Animhorse.gif)

10. Računalna animacijaRačunalna animacija
(4/5)(4/5)
 3-D animacija3-D animacija
 visina + širina + dubinavisina + širina + dubina
 crta se žičani model objekta, dodaje se tekstura, acrta se žičani model objekta, dodaje se tekstura, a
zatim se objekti smještaju na neku pozadinuzatim se objekti smještaju na neku pozadinu
 zahtjevnija (koriste se posebni programi, npr. CAD)zahtjevnija (koriste se posebni programi, npr. CAD)

11. Računalna animacijaRačunalna animacija
(5/5)(5/5)
Slika 2: 3-D animacija mačke (http://rebloggy.com/post/alice-in-wonderland-3d-gif-Slika 2: 3-D animacija mačke (http://rebloggy.com/post/alice-in-wonderland-3d-gif-
cheshire-meu-primeiro-gif-assim-mta-emocao-miaedit/30737653776)cheshire-meu-primeiro-gif-assim-mta-emocao-miaedit/30737653776)

12. Principi animacije (1/2)Principi animacije (1/2)
 moguća zbog tromosti oka (objekt ostajemoguća zbog tromosti oka (objekt ostaje
zapamćen nekoliko trenutaka nakonzapamćen nekoliko trenutaka nakon
gledanja)gledanja)
 više kadrova = kvalitetnija animacija (imaviše kadrova = kvalitetnija animacija (ima
manje preskakanja)manje preskakanja)
 minimalni broj kadrova je 10 kadrova uminimalni broj kadrova je 10 kadrova u
sekundisekundi

13. Principi animacije (2/2)Principi animacije (2/2)
 kontrola animacijekontrola animacije::
1.1. pomoću vremenske osi (pomoću vremenske osi (timelinetimeline))
 definira se ukupno trajanje animacije i kadadefinira se ukupno trajanje animacije i kada
se koji kadar pojavljujese koji kadar pojavljuje
2.2. postavljanjem broja kadrova animacijepostavljanjem broja kadrova animacije
((frame rateframe rate))

14. Tehnike animacijeTehnike animacije
(1/4)(1/4)
 tradicionalna animacijatradicionalna animacija
 ručno crtanje kadrova na posebnom papiruručno crtanje kadrova na posebnom papiru
 celuloidna animacijaceluloidna animacija – pozadina koja se ne– pozadina koja se ne
mijenja crta se posebno, a svi elementi kojimijenja crta se posebno, a svi elementi koji
se pomiču crtaju se na prozirnim folijamase pomiču crtaju se na prozirnim folijama

15. Tehnike animacijeTehnike animacije
(2/4)(2/4)
Slika 3: Celuloidna animacija (http://everlastanimation.blogspot.com/p/tugas-5-cel-Slika 3: Celuloidna animacija (http://everlastanimation.blogspot.com/p/tugas-5-cel-
animation_7721.html)animation_7721.html)

16. Tehnike animacijeTehnike animacije
(3/4)(3/4)
 digitalna animacijadigitalna animacija
 ručno nacrtane kadrove moguće jeručno nacrtane kadrove moguće je
digitalizirati i doraditi pomoću softvera ili sedigitalizirati i doraditi pomoću softvera ili se
svi kadrovi mogu crtati odmah u računalusvi kadrovi mogu crtati odmah u računalu
 naslijedila principe animacije pomoću folijanaslijedila principe animacije pomoću folija

17. Tehnike animacijeTehnike animacije
(4/4)(4/4)
 animacija se sastoji od kadrova koji moguanimacija se sastoji od kadrova koji mogu
biti ili bitmape (sprema se svaki kadar ibiti ili bitmape (sprema se svaki kadar i
objedinjuje ih se u datoteku) ili vektorskaobjedinjuje ih se u datoteku) ili vektorska
grafika (nije potrebno spremanje svakoggrafika (nije potrebno spremanje svakog
kadra, već se mogu umetati dok sekadra, već se mogu umetati dok se
animacija izvršava)animacija izvršava)

18. Interpolacija iliInterpolacija ili
tweening (1/4)tweening (1/4)
 proces crtanja međukadrova izmeđuproces crtanja međukadrova između
ključnih kadrovaključnih kadrova
 kod analogne animacije, samo se ukod analogne animacije, samo se u
ključnim kadrovima crtao cijeli objekt, a uključnim kadrovima crtao cijeli objekt, a u
međukadrovima samo oni dijelovi koji sumeđukadrovima samo oni dijelovi koji su
se micalise micali

19. Interpolcija iliInterpolcija ili
tweening (2/4)tweening (2/4)
 kod današnjih računalnih animacija,kod današnjih računalnih animacija,
tweening označava prijelaz iz prvog utweening označava prijelaz iz prvog u
zadnji kadar crtanjem (uz pomoćzadnji kadar crtanjem (uz pomoć
računala) odgovarajućeg brojaračunala) odgovarajućeg broja
međukadrova po određenoj putanjimeđukadrova po određenoj putanji
 interpolacijainterpolacija – računanje vrijednosti– računanje vrijednosti
funkcije koja leži između poznatih točakafunkcije koja leži između poznatih točaka

20. Interpolacija iliInterpolacija ili
tweening (3/4)tweening (3/4)
 različita primjena kod kadrova koji surazličita primjena kod kadrova koji su
bitmape i kod kadrova koji su vektorskabitmape i kod kadrova koji su vektorska
grafikagrafika
 vektorske objekte je lakše izvesti te im sevektorske objekte je lakše izvesti te im se
interpolira položaj, veličina, rotacija,interpolira položaj, veličina, rotacija,
oblik, boja i prozirnost, a sama veličinaoblik, boja i prozirnost, a sama veličina
datoteke je manja nego što bi bila da jedatoteke je manja nego što bi bila da je
riječ o bitmapamariječ o bitmapama

21. Interpolacija iliInterpolacija ili
tweening (4/4)tweening (4/4)
 za interpolaciju s bitmapama koriste seza interpolaciju s bitmapama koriste se
slojevi koji su ekvivalentni nekadslojevi koji su ekvivalentni nekad
korištenim prozirnim folijamakorištenim prozirnim folijama
 moraju se čuvati svi kadrovi izmeđumoraju se čuvati svi kadrovi između
ključnih kadrova zbog čega se datotekeključnih kadrova zbog čega se datoteke
veće i mogu izgubiti na kvaliteti ukolikoveće i mogu izgubiti na kvaliteti ukoliko
se primjenjuje komprimiranjese primjenjuje komprimiranje

22. Vrste animacije (1/7)Vrste animacije (1/7)
 animacija s različitim kadrovimaanimacija s različitim kadrovima
 animacija kadar po kadaranimacija kadar po kadar
 prvi i zadnji kadar se znatno razlikujuprvi i zadnji kadar se znatno razlikuju
 nije moguće koristiti računalni tweeningnije moguće koristiti računalni tweening
nego se svaki od serije kadrova crtanego se svaki od serije kadrova crta

23. Vrste animacije (2/7)Vrste animacije (2/7)
Slika 4: Animacija kadar po kadarSlika 4: Animacija kadar po kadar
(http://filmskapocetnica.restarted.hr/interaktivnaanimacija/)(http://filmskapocetnica.restarted.hr/interaktivnaanimacija/)

24. Vrste animacije (3/7)Vrste animacije (3/7)
 animacija po stazi (animacija po stazi (path-basedpath-based))
 animacija pokreta (animacija pokreta (motion tweenmotion tween))
 objekt se pomiče po određenoj putanji priobjekt se pomiče po određenoj putanji pri
čemu se ne mijenja njegov oblik nego samočemu se ne mijenja njegov oblik nego samo
položajpoložaj

25. Vrste animacije (4/7)Vrste animacije (4/7)
 najjednostavniji oblik jenajjednostavniji oblik je linearni pomaklinearni pomak
 kod linearnog pomaka objekt se pomiče pokod linearnog pomaka objekt se pomiče po
pravcu za jednaku udaljenost izmeđupravcu za jednaku udaljenost između
svakog kadrasvakog kadra
udaljenost = ukupna udaljenost izmeđuudaljenost = ukupna udaljenost između
početnog i završnog kadra/brojpočetnog i završnog kadra/broj
svih kadrova u nizusvih kadrova u nizu

26. Vrste animacije (5/7)Vrste animacije (5/7)
Slika 5: Animacija po stazi (http://mrisnadi.blogdetik.com/index.php/membuat-animasi-Slika 5: Animacija po stazi (http://mrisnadi.blogdetik.com/index.php/membuat-animasi-
sederhana-dengan-motion-tween/)sederhana-dengan-motion-tween/)

27. Vrste animacije (6/7)Vrste animacije (6/7)
 animacija preobražavanjem (animacija preobražavanjem (morphingmorphing))
 animacija oblika (animacija oblika (shape tweenshape tween))
 postepeno pretvaranje jedne slike u drugupostepeno pretvaranje jedne slike u drugu
 računalni program generira međuslikeračunalni program generira međuslike

28. Vrste animacije (7/7)Vrste animacije (7/7)
Slika 6: Animacija preobražavanjem (http://mam3014.wordpress.com/)Slika 6: Animacija preobražavanjem (http://mam3014.wordpress.com/)

29. Proces kreiranjaProces kreiranja
animacijeanimacije
1.1. kreirati slike (kadrove)kreirati slike (kadrove)
2.2. dodati zvuk (nije obavezno)dodati zvuk (nije obavezno)
3.3. snimiti animaciju u odgovarajućemsnimiti animaciju u odgovarajućem
formatuformatu
4.4. provjeriti kako se animacija izvodi uprovjeriti kako se animacija izvodi u
nekom programu za reprodukcijunekom programu za reprodukciju
5.5. uključiti animaciju u prezentacijuuključiti animaciju u prezentaciju

30. Formati datoteka (1/2)Formati datoteka (1/2)
 animirani gif (.GIF)animirani gif (.GIF) – posebna vrsta– posebna vrsta
slikovnog GIF formataslikovnog GIF formata
 Windows Audio Video Interleaved (.AVI)Windows Audio Video Interleaved (.AVI)
– za animacije i video na Windows– za animacije i video na Windows
platformiplatformi
 QuickTime (.MOV)QuickTime (.MOV) – za animacje i video– za animacje i video
na Apple platformi (prenosiv i na drugena Apple platformi (prenosiv i na druge
platforme)platforme)

31. Formati datoteka (2/2)Formati datoteka (2/2)
 Flash (.SWF)Flash (.SWF) – 2-D animacija za Web– 2-D animacija za Web
 Shockwave (.DCR)Shockwave (.DCR) – director animacije– director animacije
prilagođene za Webprilagođene za Web
 Virtual Reality Modeling LanguageVirtual Reality Modeling Language
(.WRL)(.WRL) – 3-D objekti za Web– 3-D objekti za Web

32. Primjena na Webu (1/5)Primjena na Webu (1/5)
 animirani GIF-ovianimirani GIF-ovi
 kreiraju se odvojene slike (po jedna za svakikreiraju se odvojene slike (po jedna za svaki
kadar) i zatim se objedinjuju u jednu GIFkadar) i zatim se objedinjuju u jednu GIF
datotekudatoteku
 problem veličine datoteke (kadrovi suproblem veličine datoteke (kadrovi su
bitmape) i ograničen broj boja (256)bitmape) i ograničen broj boja (256)

33. Primjena na Webu (2/5)Primjena na Webu (2/5)
 za pregledavanje običnih GIF datoteka nijeza pregledavanje običnih GIF datoteka nije
potreban nikakav poseban programpotreban nikakav poseban program
 nije moguće dodavanje interaktivnosti ninije moguće dodavanje interaktivnosti ni
zvuka (za to treba koristiti Flash)zvuka (za to treba koristiti Flash)

34. Primjena na Webu (3/5)Primjena na Webu (3/5)
 Flash animacijaFlash animacija
 koristi se za izradu interaktivnih animacija ikoristi se za izradu interaktivnih animacija i
animacija sa zvukomanimacija sa zvukom
 radna datoteka je FLA formata koju jeradna datoteka je FLA formata koju je
potrebno objaviti u SWF format da bi sepotrebno objaviti u SWF format da bi se
napravila animacija za webnapravila animacija za web

35. Primjena na Webu (4/5)Primjena na Webu (4/5)
 mogu se kreirati animacije kadar po kadarmogu se kreirati animacije kadar po kadar
((motion tweenmotion tween) i proračunavanjem) i proračunavanjem
međukadrova (međukadrova (shape tweenshape tween))
 datoteke su manje (koristi se vektorskadatoteke su manje (koristi se vektorska
grafika)grafika)

36. Primjena na Webu (5/5)Primjena na Webu (5/5)
 ostali (rjeđe) korišteni načiniostali (rjeđe) korišteni načini
 animirani PNG formatanimirani PNG format
 programi u JavaScriptuprogrami u JavaScriptu
 korištenje SVG vektorskog formata uz JavaScriptkorištenje SVG vektorskog formata uz JavaScript
 Java appletiJava appleti