animacija 5
DESCRIPTION
5. verzijaTRANSCRIPT
![Page 1: Animacija 5](https://reader031.vdocuments.pub/reader031/viewer/2022013102/559913321a28ab98798b45b9/html5/thumbnails/1.jpg)
Page 1
ANIMACIJAIzradile:
•Andrea Valenčič
•Martina Brojan
•Đurđica Štanta
•Vlasta Dogan-Grgurić
![Page 2: Animacija 5](https://reader031.vdocuments.pub/reader031/viewer/2022013102/559913321a28ab98798b45b9/html5/thumbnails/2.jpg)
Page 2
Uvod
Animacija je brzo prikazivanje niza crteža koji se razlikuju po sitnim detaljima.
Pojedini crtež nazivamo kadar.
animacija = “grafika u pokretu” (grafika + vremenska dimenzija)
![Page 3: Animacija 5](https://reader031.vdocuments.pub/reader031/viewer/2022013102/559913321a28ab98798b45b9/html5/thumbnails/3.jpg)
Page 3
Klasična animacija
![Page 4: Animacija 5](https://reader031.vdocuments.pub/reader031/viewer/2022013102/559913321a28ab98798b45b9/html5/thumbnails/4.jpg)
Page 4
Animacija u multimediji
zaseban multimedijski projekt (prezentacija) ili dodatak projektu
omogućava dinamičko predstavljanje činjenica
interaktivne animacije - simulacije
![Page 5: Animacija 5](https://reader031.vdocuments.pub/reader031/viewer/2022013102/559913321a28ab98798b45b9/html5/thumbnails/5.jpg)
Page 5
Animacija na računalu
digitalno kreirana
2D-animacija:
najčešće korištena
kadrovi su kreirani pomoću alata za kreiranje 2D bitmapa ili vektorske grafike (npr. Flash)
3D-animacija:
objektima dodaje dubinu
zahtjevnija za izradu (npr. CAD)
![Page 6: Animacija 5](https://reader031.vdocuments.pub/reader031/viewer/2022013102/559913321a28ab98798b45b9/html5/thumbnails/6.jpg)
Page 6
Principi animacije
tromost oka omogućava privid pokreta
crtani filmovi: 24 kadrova u sekundi (engl. frames per second - fps)
na računalu se uzima manje kadrova kako bi se smanjila veličina datoteke
ako je prikazan premali broj kadrova u sekundi (<10), ljudsko oko primjećuje treperenje
Adobe Flash Professional koristi 24 fps
![Page 7: Animacija 5](https://reader031.vdocuments.pub/reader031/viewer/2022013102/559913321a28ab98798b45b9/html5/thumbnails/7.jpg)
Page 7
Principi animacije na računalu
kontrola animacije se vrši na 2 načina:
1.pomoću vremenske osi (engl. timeline)
2.postavljanjem broja kadrova animacije (engl. frame rate)
![Page 8: Animacija 5](https://reader031.vdocuments.pub/reader031/viewer/2022013102/559913321a28ab98798b45b9/html5/thumbnails/8.jpg)
Page 8
Tehnike animacije (1/3)
klasični pristup: kadrovi se crtaju ručno (Snjeguljica, (1937.)
digitalni pristup: kadrovi se crtaju uz pomoć računalnih programa (npr. Flash) (Ledeno doba, 2002.)
celuloidna animacija – pozadina koja se ne mijenja se nacrta samo jednom, a elementi koji se pomiču nacrtani su na prozirnim folijama
crtanje podloge na dugačkom listu papira – pomicanjem objekta nacrtanog na prozirnoj foliji stvara se iluzija pokreta
![Page 9: Animacija 5](https://reader031.vdocuments.pub/reader031/viewer/2022013102/559913321a28ab98798b45b9/html5/thumbnails/9.jpg)
Page 9
Tehnike animacije (2/3)Celuloidna animacija
![Page 10: Animacija 5](https://reader031.vdocuments.pub/reader031/viewer/2022013102/559913321a28ab98798b45b9/html5/thumbnails/10.jpg)
Page 10
Tehnike animacije (3/3)
danas se ručno nacrtani kadrovi digitaliziraju i zatim mijenjaju
kadrovi mogu biti:
bitmape – svaki kadar se sprema zasebno, a kasnije ih spremamo u jednu datoteku
vektorska grafika – međukadrovi se mogu umetati ili interpolirati u realnom vremenu
![Page 11: Animacija 5](https://reader031.vdocuments.pub/reader031/viewer/2022013102/559913321a28ab98798b45b9/html5/thumbnails/11.jpg)
Page 11
Interpolacija
ključni kadrovi (engl. key frames) – prvi i zadnji kadar neke akcije; pojavljuju se kad dolazi do promjena
tweening – postepeni prijelaz iz prvog u zadnji kadar crtanjem međukadrova po određenoj putanji; matematički: interpolacija
lakše je izvesti interpolaciju vektorskih objekata
kod bitmana se za tweening koriste slojevi (analogon prozirnim folijama)
![Page 12: Animacija 5](https://reader031.vdocuments.pub/reader031/viewer/2022013102/559913321a28ab98798b45b9/html5/thumbnails/12.jpg)
Page 12
Tweening :pomak kvadrata u Flashu
![Page 13: Animacija 5](https://reader031.vdocuments.pub/reader031/viewer/2022013102/559913321a28ab98798b45b9/html5/thumbnails/13.jpg)
Page 13
Vrste animacije
kadar po kadar
po stazi (animacija pokreta)
preobražavanjem (animacija oblika)
![Page 14: Animacija 5](https://reader031.vdocuments.pub/reader031/viewer/2022013102/559913321a28ab98798b45b9/html5/thumbnails/14.jpg)
Page 14
Animacija kadar po kadar
prvi i zadnji kadar se znatno razlikuju, pa ne možemo koristiti tweening
svaki kadar se crta zasebno
![Page 15: Animacija 5](https://reader031.vdocuments.pub/reader031/viewer/2022013102/559913321a28ab98798b45b9/html5/thumbnails/15.jpg)
Page 15
Animacija po stazi
objekt se pomiče po nekoj putanji
mijenja se samo položaj objekta
interpolacija pozicije
linearni pomak – objekt se pomiče po pravcu za jednaku udaljenost između svakog kadra; djeluje neprirodno
staza može biti i niz Bezierovih krivulja
![Page 16: Animacija 5](https://reader031.vdocuments.pub/reader031/viewer/2022013102/559913321a28ab98798b45b9/html5/thumbnails/16.jpg)
Page 16
Animacija preobražavanjem
postepeno pretvaranje jedne slike u drugu
morphing - pretapanje fotografije jedne osobe u drugu
prilikom pretvaranja računalni program generira međuslike
shape tween – jednostavnije promjene oblika u Flashu
![Page 17: Animacija 5](https://reader031.vdocuments.pub/reader031/viewer/2022013102/559913321a28ab98798b45b9/html5/thumbnails/17.jpg)
Page 17
Proces kreiranja animacije
1. kreiramo kadrove
2. dodamo zvuk
3. snimimo animaciju
4. provjerimo kako se animacija izvodi u nekom programu za reprodukciju
5. uključimo animaciju u multimedijsku ili hipermedijsku prezentaciju
![Page 18: Animacija 5](https://reader031.vdocuments.pub/reader031/viewer/2022013102/559913321a28ab98798b45b9/html5/thumbnails/18.jpg)
Page 18
Formati datoteka
animirani gif (.GIF)
Windows Audio Video Interleaved (.AVI)
QuickTime (.MOV)
Flash (.SWF)
Shockwave (.DCR)
Virtual Reality Modelling Language (.WRL)
![Page 19: Animacija 5](https://reader031.vdocuments.pub/reader031/viewer/2022013102/559913321a28ab98798b45b9/html5/thumbnails/19.jpg)
Page 19
Primjena animacije na Webu
najčešće: animirane GIF datoteke, Flash animacije
moguće i: animirani PNG format, programi u JavaScriptu, korištenje SVG vektorskog formata uz JavaScript skripte, Java appleti
prema HTML5 standardu animacija će se uključivati na web stranice pomoću SVG i JavaScripta
![Page 20: Animacija 5](https://reader031.vdocuments.pub/reader031/viewer/2022013102/559913321a28ab98798b45b9/html5/thumbnails/20.jpg)
Page 20
Animirani GIF-ovi
svaki kadar se kreira posebno kao bitmapa
na kraju se svi kadrovi objedine u jednu GIF datoteku
problem:
GIF format podržava komprimiranje unutar kadra, ali ne i među kadrovima
max 256 boja
nije moguće dodavanje zvuka
GIF datoteke prikazuje svaki Web preglednik
![Page 21: Animacija 5](https://reader031.vdocuments.pub/reader031/viewer/2022013102/559913321a28ab98798b45b9/html5/thumbnails/21.jpg)
Page 21
Flash animacija
za kreiranje animacije za Web: File Publish→ te odaberemo SWF format
preglednicima je potreban Flash plug-in
mogu se dodati interaktivni elementi i zvuk
koristi se vektorska grafika => manje datoteke
![Page 22: Animacija 5](https://reader031.vdocuments.pub/reader031/viewer/2022013102/559913321a28ab98798b45b9/html5/thumbnails/22.jpg)
Page 22
Literatura
Hoić - Božić, Nataša: Multimedijski sustavi, 8. poglavlje: Animacija, Rijeka, 2013. https://mudri.uniri.hr/file.php/1304/PDF_poglavlja_2013/8_animacija1.pdf (11.06.2014.)
http://automanga.sourceforge.net/Doc/node3.html (18.06.2014.)
http://marksotherstuff.blogspot.com/2012/04/huckleberry-hound-flip-book.html (18.06.2014.)
http://sajidmanzar.wordpress.com/ (18.06.2014.)
http://hosuronline.com/index.php/wife-morphs-mans-video-to-tarnish/morphing/ (18.06.2014.)