A világhálóhoz természeténél fogva hozzátartozik a dinamizmus. Az óriási információáradatban pillanatok alatt váltogatjuk a virtuális helyszíneket, egyik honlapról a másikra ugrunk, tekintetünk villámgyorsan száguld az oldalakon, cikázik a kurzor, futnak a szövegtömbök. A mozgalmasság a net vizuális világában is tükröződik, nem csak mi változtatjuk a helyünket, a háló is egyfolytában mozog.
A szörföző körül hullámzik, kavarog, habzik az óceán. A grafikai elemek ide-oda siklása, forgása, vibrálása, a rövid filmecskék sokasága ma már természetesnek tűnik, a világhálón azonban nem volt mindig ekkora a „nyüzsgés". Az Interneten alkalmazott animáció látványos fejlődése az utóbbi tíz évben kezdődött, és a mai napig töretlen. A webre szánt mozgóképek készítői mindig is két fő problémával küszködtek: az egyik a sávszélesség, amely soha nem elég nagy, a másik a különböző böngészőfajtákkal (és ezek más-más verzióival...) való kompatibilitás kérdése. Ez a két alapvető gond rányomta a bélyegét a technikákra, webanimációs szoftverekre is: minél kisebb méretű, könnyen lejátszható, maximális számú felhasználó számára megjeleníthető állományok létrehozása volt a cél. A két legelterjedtebb netes animációfajta, a GIF és a Flash-technika is ehhez igazodott.
GIF
A GIF (Graphic Interchange Format) tulajdonképpen képek rögzítésére szolgáló, rasztergrafikus állománytípus. Mozgókép tárolására az teszi alkalmassá, hogy BMP, JPEG, TIFF, PNG nevű társaitól eltérően nem csak egyetlen képet, hanem képek sorozatát képes elmenteni, és megnyitáskor egymás után megjeleníteni. Ha az egymást követő képek között csak kis eltérések vannak, és elég gyors a lejátszás ritmusa, agyunk és szemünk összefüggő folyamattá olvasztja össze a képeket, létrejön a mozgás illúziója. A GIF lehetővé teszi, hogy az egyes képkockák lejátszáskor különböző időtartamokig legyenek láthatók, tehát a videoállományoktól eltérően a szemünk előtt másodpercenként lepergő képek száma nem rögzített. A GIF LZW tömörítést használ, amely veszteségmentes, és főként nagy, egyszínű felületeket tartalmazó képek esetében működik eredményesen. A GIF képes átlátszóságot tárolni, áttetszőséget viszont már nem. A méret csökkentése érdekében a palettája 256 színre korlátozódik, ez a kevés színt tartalmazó és a monokróm képeknek kedvez – egy részletgazdag, színes fénykép igencsak megsínyli a CIF-fé való átalakítást. Hátránya tehát az alacsony képminőség, ráadásul hangot sem tud tárolni, és a sok korlátozás dacára sem csökkenti eléggé az állomány méretét. Hiányosságai ellenére a weben bizonyos célokra kiválóan alkalmas, és nagy előnye, hogy szinte minden böngésző támogatja. Rövid, kisméretű mozgóképek, bannerek, lógók, egyszerű történetek megjelenítésére tökéletesen megfelel. A weben látható GIF-animációk gyakran ciklikus folyamatokat jelenítenek meg, és lejátszásuk végtelenített (pl. forgó földgolyó, lobogó zászló stb.).
Programok
Se szeri, se száma a GIF-animációk készítésre szakosodott kis programocskáknak (pl. Gif Movie Gear, Gif Builder, Gif Construction Set, Gif Mation, MS Gif Animator). Ezek valamilyen grafikai programmal előzőleg létrehozott képek GIF-fé alakítását teszik lehetővé. (Többnyire maguk is rendelkeznek képszerkesztő eszközökkel, de ezek inkább a már meglévő képkockák retusálására és különböző méretcsökkentő eljárásokra – optimalizálásra – használatosak). Lényegük ugyanaz: az animáció képkockái (az importált képek) a kívánt lejátszási sorrendbe rendezhetők, másolhatók, törölhetők, átméretezhetők, módosíthatók, és ami nagyon fontos: mindegyik esetében külön-külön beállítható, hogy lejátszáskor mennyi ideig legyen látható.
Az Adobe programcsalád webgrafikák létrehozására szolgáló tagja, az ImageReady kiválóan alkalmas GIF-animáció készítésére. A program felépítése és működése nagyon hasonlít az Adobe Photoshopéra. Nagyjából azonos képszerkesztő eszközökkel rendelkezik, és ugyancsak layerekkel (rétegekkel) dolgozik. (A layereket elképzelhetjük úgy, mint a képernyő síkjával párhuzamos, egymás fölé helyezett fóliarétegeket. Az egyes layerek képelemeket és átlátszó részeket is tartalmazhatnak, külön-külön módosíthatók és elrejthetők.) Az ImageReady egyébként szorosan együttműködhet a Photoshoppal: a mindkettőjük szerszámpalettájának (1. ábra) alján megtalálható gomb közvetlen átjárást biztosít a két program között.
Az animációnkhoz használt képek módosítására bármikor átugorhatunk a Photoshopba. Vagy fordítva: egy Photoshopban létrehozott munkát, átküldve az ImageReadybe, animációvá alakíthatunk. Az ImageReady kezelőfelületének legfontosabb része az Animation ablak (2. ábra). Itt sorakoznak az animáció képkockái, mindegyik alatt megjelenik a módosítható időtartam másodpercben kifejezve. A képkockákat drag-and-drop módszerrel rakosgathatjuk, így módosítható a sorrendjük. A kijelölt kockák törölhetők, másolhatók. Új képkockát mindig egy már meglévő másolataként hozhatunk létre. Az ablak bal alsó sarkában található gombbal beállíthatjuk, hogy az animáció lejátszása hányszor ismétlődjön. A képkockákat többféleképpen hozhatjuk létre. Importálhatunk valamilyen más grafikai programmal készített képeket, ezeket célszerű előzőleg külön könyvtárba menteni, mert a File | Import | Folder as frames parancsra az ImageReady behozza a kiválasztott könyvtárban található összes képállományt, és ábécésorrendben felsorakoztatja őket az Animation ablakban. így hozhatunk be legegyszerűbben külső képeket az ImageReadybe. A másik út a layerekben rejlő lehetőségek kihasználása, az ImageReadyben ugyanis a képkockák tartalmát tulajdonképpen a layerek határozzák meg.
A Layers ablakban (3. ábra) beállítható, hogy az éppen kijelölt képkockán mely layerek legyenek láthatók. Egy réteg akkor látható (feltéve, ha tartalmát nem fedi teljesen el a fölötte levő layer), ha a neve melletti első négyzetben megjelenik a szemet ábrázoló ikon, ha nem, akkor láthatatlan, tehát nem vesz részt a kijelölt képkocka felépítésében. Egy nagyon egyszerű példa: a 2. ábrán látható emberke szájmozgásának fázisrajzai külön layereken találhatók (3. ábra). Minden képkockában közös a fejet tartalmazó legalsó layer, míg a száj fázisait ábrázoló layerek közül az egyes képkockákban mindig csak az egyik látható. Layerekből felépített képet a Photoshopból hozhatunk át, de az Image-Readyben is létrehozhatunk layereket. A layerek „láthatósági állapotán" kívül az ImageReady az egyes képkockák esetében megjegyzi a layerek pozícióját is, amit a Move eszközzel módosíthatunk. Ha viszont egy layer tartalmához hozzárajzolunk, az minden olyan képkockán megjelenik, amelyben az illető layer látható. Ezért, ha egy képkockához hozzá szeretnénk adni valami újat, hozzunk létre új layert, erre rajzoljunk. Fontos megemlíteni még az Animation ablakban található tween-gombot. Segítségével automatikusan ékelhetünk be tetszőleges számú átmeneti képet két egymás melletti képkocka közé. Ilyen módon hozhatunk létre finom átalakulásokat (például áttűnéseket). Az ImageReady a köztes képek létrehozásához három dolgot vehet figyelembe: a layerek átlátszóságát, elmozdulását és a rájuk alkalmazott effektusokat, ezek tehát mind automatikusan animálhatok a tween segítségével.
FLASH
A Flash ma kétségkívül a legnépszerűbb webanimációs technika. Internetes oldalak animált gombjaitól kezdve lineáris vagy interaktív kisfilmeken keresztül a teljes honlapokig, multimédiás bemutatókig vagy éppen játékokig bármi készíthető vele. Első verzióját 1996-ban bocsátotta ki a Macromedia cég. A fejlesztők leleményes megoldásokat találtak a bevezetőben említett problémákra: egy mindenki számára könnyen és gyorsan letölthető plug-in – a böngészőkbe beépülő FlashPlayer – révén nagyszámú felhasználó részére biztosították a weboldalakba ágyazott Flash-animációk lejátszását, amelyek vektoriális alapon működtek. A vektorgrafika alkalmazása komplex tartalmú, mégis rendkívül kis méretű állományok létrehozását tette lehetővé. A rasztergrafikus eljárásokkal szemben, amelyek a képet pixelek összességeként kezelik, a vektorgrafikus mód egyenletek és geometriai adatok segítségével írja le a kép elemeit, ez pedig sokkal kisebb helyet igényel, mint minden egyes pixel színének és egyéb jellemzőjének tárolása. Ráadásul a vektoriális képek korlátlanul nagyíthatók minőségromlás nélkül. (A vektorgrafikus eljárás azonban csak bizonyos esetekben jobb a pixelgrafikus képrögzítésnél. Fotók, részletgazdag, sok árnyalatváltozatot tartalmazó képek esetében az utóbbi az ideális tároló, a vektoriális eljárások pedig éles körvonalakkal határolt grafikai elemeket tartalmazó képek létrehozására és kezelésére a legalkalmasabbak.) Bár alapvetően vektoriális program, a Flash különböző raszteres képállománytípusok, sőt a legismertebb videoformátumok importálására is képes. (Csak zárójelben jegyzem meg, hogy a Flash-animációk természetesen hangot is tartalmazhatnak.) Beépített programozási nyelve, az ActionScript révén – a kellő szakértelem birtokában a legbonyolultabb elképzelések is megvalósíthatók. 1996 óta a Flash folyamatosan fejlődött, újabb és újabb lehetőségekkel bővült. Egyik nemrégiben kifejlesztett segédprogramja, a Swift3D például már mozgó 3d-grafikák készítését és Flash-állományokba való beillesztését is lehetővé teszi.
Példa a Flashanimáció-készítésre
Ismerkedjünk meg a Flashsel való animáció-készítés néhány alapvető lehetőségével egy konkrét példán keresztül! Tegyük fel, hogy a Piroska és a farkas című produkció egyik jelenetét kell elkészítenünk: Piroska az ösvényen mendegél, miközben a gonosz farkas egy fatörzs mögül leskelődik. A hátteret, a fát meg a két szereplőt a Tools ablakban található képszerkesztő eszközökkel rajzolhatjuk meg, de kívülről is behozhatjuk őket. A Flashben az animációnk elemei layerekre kerülnek, amelyek átlátszó fóliákként viselkednek, akárcsak az Adobe programokban. Egy layer tartalmát itt is anélkül módosíthatjuk, hogy más layereken levő elemeket befolyásolnánk. Éppen ezért jó, ha a farkas, Piroska, a fa, valamint a háttér más-más layerre kerül. A layerek nevei az Animation ablakban (4. ábra), rétegződési sorrendben egymás fölött láthatók. Mindegyiknek megfelel egy-egy saját idősáv, ezek párhuzamosan futnak. Az idősávokon képkockák (frames) sorakoznak. Ezek a nekik megfelelő réteg tartalmának időbeli változását rögzítik. (Nem szabad összetévesztenünk velük a teljes, végső animáció képkockáit, hiszen azokat több layer pillanatnyi állapota, tehát több frame határozza meg, kivéve azt az esetet, amikor egyetlen layert használunk.)
A képkockák természetesen áthelyezhetők, másolhatók, törölhetők, kivághatok, újra beilleszthetők. A Flashben a hagyományos képről képre animáció (frame-by-frame animation – az animáció minden fázisát a felhasználó készíti el) mellett a tweening is használható. Egy folyamatnak megadhatjuk a kiinduló és a befejező képkockáját, vagyis a kulcskockákat (keyframes), a köztes kockák kiszámítását pedig a programra bízhatjuk. Ezzel a lehetőséggel az Image-Readynél már találkoztunk, de míg ott az átmeneti képkockák rögzített és független képek voltak, a Flashben ezek tartalma automatikusan igazodik a kulcskockákban történt változásokhoz. A két kulcskocka közötti mozgás sebességének változása, azaz a gyorsulás a kulcskockák Ease paraméterével szabályozható. A Flashben alakváltozásokat (shape-tween), méretváltozásokat, térbeli elmozdulásokat (motion-tween) és színváltozásokat jeleníthetünk meg tweeninggel. Ahhoz például, hogy a farkas kidugja a fejét a fa mögül, elegendő két kulcskockát létrehozni: az egyikben még az orra hegye sem látszik, a másikban a feje teljesen kint van. Ha az első kulcskockát kijelölve beiktatjuk a motion-tweent, a program kiszámolja a köztes kockák tartalmát. Piroska mozgását egyedül ezzel a módszerrel már kicsit nehezebb megvalósítani. Nagyon sok köztes kulcskockát kellene beiktatnunk ahhoz, hogy az ösvényt kövesse, és ne „légvonalban" haladjon. Ehelyett Piroska layeréhez egy ún. segédlayert (Motion Guide) illeszthetünk, amely lehetővé teszi az előre definiált pályamentén való mozgatást. Csak a kívánt útvonalat kell belerajzolnunk. Piroska ezt követve most már szabályosan közlekedik, de azt szeretnénk, hogy lépegessen, esetleg a kosarat is lóbálja. Ez a szimbólumok tulajdonságainak köszönhetően könnyen megoldható.
A szimbólumok sajátos Flash-objektumok, mindegyik saját idősávval rendelkezik, és több layert tartalmazhat (sőt, további szimbólumokat is), tulajdonképpen külön animációt képezhet az animáción belül. Ha az előzőleg szimbólummá konvertált Piroskát kettős-klikkel kijelöljük, rajta kívül minden más elhalványodik, és a teljes animáció idősávja helyett a szimbólum saját idősávja jelenik meg (5. ábra). Erre helyezhetjük a Piroska járásának fázisait tartalmazó kulcskockákat. A fázisrajzok elkészítését megkönnyíti az onion skin opció, amely halványan megjeleníti az éppen kijelölt képkockát megelőző és az azt követő képkockák tartalmát. Mivel a lábak és a kosár mozgása ciklikus, elegendő lenne ezt a néhány fázisképet többször ismételni. Ezt elérhetjük úgy is, hogy a meglévő képkockákat sokszorosítjuk, de jobb, ha az Action-Scripthez fordulunk, amelynek segítségével (sok egyéb lehetőség között) az animációnk lejátszását szabályozhatjuk képkockákra alkalmazott utasításkódokkal. Tulajdonképpen az a célunk, hogy a képsor lejátszásakor az utolsó kulcskocka után mindig visszaugorjunk az elsőre, ezért az ezt követő kockát kijelölve az Actions ablakban kikeressük a goto kulcsszót, a megfelelő cellába pedig beírjuk az egyest. A teljes animációhoz visszatérve láthatjuk a végeredményt1: a szimbólum a neki megfelelő layer képkockáinak és a segédlayernek köszönhetően az ösvény mentén mozog, ugyanakkor saját belső idősávjának megfelelően is változik. Piroska lesétál a vászonról, és ezzel bevezetőnk végéhez érkeztünk.
1 Ha Movie Clip típusú szimbólumot használunk, csak a végleges Flash-animációban lesz látható a szimbólumon belüli mozgás. A Movie Clip szimbólumot interaktív alkalmazások esetében használják (ebbe külön animációként ékelődik be), lineáris animációk esetében célszerű a Graphic típusú szimbólumot alkalmazni, ennek belső ideje párhuzamosan halad a főanimáció idejével, és már munka közben is látható a mozgása.
Néhány izgalmas webhely:
- www.dopeawards.com – díjazott profi Flash-honlapok hetente frissített gyűjteménye
- www.swf.hu – a magyar Flash-portál
- www.atomfilms.com – órási animációs adatbázis, külön Flash-részleggel
