Prezentacija o animaciji za ponavljanje, za kolegij Multimedijski Sustavi na Odjelu za informatiku Sveučilišta u Rijeci. Ak. god. 2013/2014

1. ANIMACIJA
Luka Mikec, Multimedijski Sustavi
2013/2014

2. Uvod
 Animacija = niz crteža koji se slijedno (i brzo)
izmjenjuju

3. Podjela (1/3)
 S produkcijske ih strane možemo podijeliti na:
 Skriptirane animacije (npr. tweening)
 Oblici se definiraju eksplicitno
 Transformacije se definiraju implicitno, npr.
tradicionalno u računalnoj grafici matricama linearnih
transformacija
x
2 0
0 2
=
Izvorni objekt Matrica 2x uvećanja (Potpuno) transformirani objekt

4. Podjela (2/3)
 S produkcijske ih strane možemo podijeliti na:
 Ručno se definira sličica-po-sličici, s mogućnošću
korištenja više slojeva
 Odaberemo slojeve
 Objekte i transoformacije definiramo eksplicitno
Izvorni objekt (Potpuno) transformirani objekt

5. Podjela (3/3)
 S korisnikove ih strane možemo podijeliti na:
 2D - sličice ne stvaraju dojam dubine
 3D – sličice stvaraju dojam dubine
 Računalne igre, iako se obično ne klasificiraju kao
animacije, imaju zanimljivu opisnu definiciju:
“interaktivne animacije”
 Naime, računalne igre su skriptirane animacije, no čije
transformacije imaju varijable – npr. matrica translacije ima
različite vrijednosti ovisno o pritisnutoj tipki.

6. U praksi (1/2)
 Odabir alata bitno ovisi o odabranom tipu
animacije
 Neinteraktivne animacije
 Bez skriptiranja (sličica-po-sličica)
 GIMP, Photoshop, ...  izradi se niz sličica
 AVI/MPEG/... kompresor, ili APNG, GIF, ... alati za
povezivanje sličica u spremničke formate
 Sa skriptiranjem
 Blender, PowerPoint, Adobe Flash  varijante
tweeninga

7. U praksi (2/2)
 Interaktivne animacije
 Vizualni pristup
 Flash – najpopularniji pristup i brzi rezultati
 Kombinacija vizualnog i programskog pristupa
 Npr. Blender – vizualno modeliranje i timeline, no za
većinu animacija nužno poznavanje Pythona
 Čisto programski pristup
 Rijetko se koristi
 Npr. nekad popularna
Telnet Star Wars
 WebGL, DirectX, shaderi...

8. Distribucija (1/4)
 U prošlosti je tip animacije bio direktno vezan uz
način distribucije
 Npr. skriptirane su animacije tražile runtime
environmente
 Danas okruženja za prikaz vektorskih prijelaza
imaju dovoljno dobre kompresore za rasterske
prijelaze
 Vektorske animacije uzimaju bitno više memorije
kad su renderirane u niz rastera, ali to se ponekad
i namjerno radi kako bi se uštedilo na
procesorskim resursima (npr. “cutscene” u
računalnim igrama)

9. Distribucija (2/4)
 Danas je odluka o načinu distribucije većinom
uvjetovana statistikama dostupnosti softvera
 Zbog velikog broja novih arhitektura, manje je
mjesta closed-source platformama poput
Flasha ili open-source ali vlasničkim
platformama poput Office Open XML-a
 Stoga se autori multimedijskih platformi okreću
univerzalnijim formatima

10. Distribucija (3/4)
 Flash se odnedavno može transkompilirati u
HTML5/CSS3/JavaScript – podršku za to daje
sam Adobe
 Flash je i dalje najbolji izbor za razvoj
određenog tipa animacija – Adobe ništa ne
gubi (runtime je bio besplatan, IDE je ostao
komercijalan

11. Distribucija (4/4)
 Za jednostavnije animacije, koristi se GIF, koji je
dobar za svoju svrhu i dovoljno proširiv (npr. često
se vjeruje da na jednoj sličici mora biti do 256
boja; to je dijelom točno – jedan segment može
imati jednu 8bitnu paletu, no jedna sličica nema
granice na broj segmenata)
 Iako se rijetko koristi, većina preglednika
podržava APNG (Animated PNG)
 Za kompleksnije animacije se preporučaju
složeniji kompresori; u krajnjem slučaju se mogu
koristiti video kompresori poput Theore
(kompresor obično pohranjen u OGG
spremnicima)

12. Resursi
 Plan prezentacije prema:
 N. Hoić-Božić, Multimedijski sustavi, priručnik
pripremljen za učenje putem MudRI sustava za
učenje. http://mudri.uniri.hr/ (pristupljeno 17. 6.
2014).
 Telnet Star Wars djelo je
 telnet://towel.blinkenlights.nl (postoji redirect na HTML)
 Više o detaljima implementacije skriptiranih
animacija:
 https://courses.edx.org/courses/BerkeleyX/CS184.1x/20
13_Spring/syllabus/