Képjátékok — GIF mozgókép I.

2007 december

A kurzorral a képre állva beindul a "minifilm", akinek a böngészője pedig ezt nem engedi meg, az kattintson rá a képre.

Mozgókép mérete: 712 kB [Hogyan?]

Ha mozgóképet akarunk készíteni, akkor először is nem árt, ha legalább fejben készítünk egy forgatókönyvet, a későbbiekben enélkül ugyanis könnyen belezavarodhatunk a műveletekbe, különösen ha nincs még nagy gyakorlatunk. A fenti statikus képet szántam alapnak, de azt akartam, hogy önmagában már ez is egy mozgókép legyen. A GIMP 2.4.2 verziójában találhatók olyan funkciók, amelyekkel előre megadott típusú mozgóképek készíthetők.

Jelen esetben a Szűrők alatt a Torzítás menüből választottam ki az I-görbítés funkciót, hogy valamilyen, legalább hozzávetőlegesen a hullámzásra hasonlító mozgás képzetét keltsem. Az I-görbítésen belül lehet választani Animálást is. Ebben 20-as értéket állítottam be a képkockák számára, s a Pingpong, oda-vissza alakító módot választottam ki (ekkor kétszer annyi végső képkockára számíthatunk + az eredetire). A kiinduló kép már adva van, csak a másik végállapotot kell berajzolnunk. Többféle deformálási mód közül is választhatunk: most a növeléssel, csökkentéssel és az óramutató járásával ellentétes spirál irányú torzítással dolgoztam, hogy földagadó és fodrozódó hullámokat rajzoljak velük (már amennyire sikerült, de a GIMP sem tud segíteni azon, aki semennyire sem tud rajzolni).

Az eredménnyel megelégedve legyártattam a GIMP-pel a 41 rétegből álló képet, s ezt egy önálló mappába mentettem el alap_sok.xcf néven. Célszerű is minden mozgóképhez külön mappát nyitni.

1. ábra

2. ábra

Plug-in-ként alkalmazva a 2.2.2-es GAP-ot, az a GIMP eszközsorában jelenik meg a menüje "Video" címen. A kapott kép ablakából a Video alatt most kiválasztjuk a Split Image to Frames funkciót (a mellékelt 1. ábrán ugyan a Duplicate Frames van kijelölve, de ez ne tévesszen meg senkit: ez már a következő lépéshez tartozik), amely kockákra szedi a 41 rétegből álló képünket, és speciális fájlneveket ad a kockáknak, amelyeket azután a GAP felismer: ezek jellegzetesen _000001.xcf ...... _000041.xcf végződésűek, mert a mi esetünkben a 41-es lesz az utolsó, s ezt még külön el is kell mentenünk. A funkció meghívásakor felbukkanó ablakban (2. ábra) megadott beállításokat nyugodtan elfogadhatjuk, s lefuttathatjuk a műveletet (OK). (Olykor-olykor megesik, hogy a GIMP ötletszerűen nem akarja kockákra bontani a képünket, mondván, hogy az már amúgy is videokép, de a hibaüzenetben benne van a megoldás is: duplázzuk meg a képet, és mentsük el új név alatt. Ezt a Kép menüből a Kétszerezés funkcióval végezhetjük el. Az új képet már zokszó nélkül feldolgozza.)

3. ábra

A kész mozgóképből láthatóan azonban 41 kocka nem elég nekünk, mert ahhoz túl sok minden történik, s a betűk egyenkénti, és egy pontból sugárirányban kilövellő megjelenítése amúgy is sok kockát fogyaszt. Ezért az egész, 41 kockából álló képsorozatunkat mindjárt meg is duplázzuk: a Video menüből most a Duplicate Frames funkciót választjuk ki. A felbukkanó ablakban megadhatjuk, hogy hányas kockától (From Frame: 1) hányasig (To Frame: 41) akarjuk, és hányszor (N times: 1) megismételtetni a ciklusunkat. Mi az egész ciklust meg akarjuk duplázni, ezért 1-től 41-ig 1-szeri ismétlést választunk, s végeredményképpen így 82 kockát fogunk kapni.

4. ábra

5. ábra

6. ábra

Ha meg vagyunk elégedve az 1-es képkocka látványával, akkor nyomjuk le a jobboldali középső sávban az Edit Controlpoints (vezérlőpontok szerkesztése) alatt az Add Point (új pont hozzáadása) gombot. Ezután állítsuk vissza az eredeti 0-0 állásba az x-y koordinátákat, és a képméretet az eredeti 100-100-ra a Scale and Modify Width és Height alatt. Ekkor visszakapjuk az eredeti forrásrétegünk látványát, és ez kerül majd a képsorozat 4. kockájára, de most NE nyomjuk le az Add Point gombot! Ehelyett nézzük meg, hogy mit is csináltunk: erre szolgál a legalsó sorban jobbról a második, az Anim Preview gomb: nyomjuk le. Ekkor felbukkan a jobbra látható kép. Ha a háttér előtt akarjuk látni a mozgássorozatunkat, akkor az Exact object on frames lehetőséget jelöljük be. Erre a GIMP elkészíti az első 4 kockából álló részmozgóképet, és feldobja a lejátszás ablakot is, ahol meg is nézhetjük. Ha meg vagyunk elégedve az eredménnyel, akkor zárjuk be a lejátszás ablakát, és a Névtelenként feldobott segédképet is, amelyet nem kell elmentenünk, viszont nyomjuk le a Move Path ablakban az OK-t, mert akkor elkészül az első négy képkockánk a K-betűnkkel.

7. ábra

A második blokk második részében visszafelé kell ugyanezt megcsinálnunk (most jól jönnek az adatok, amelyeket felírtunk), csak most a 62-71 kockákra: ezeket kell beállítani a From Frame ... To Frame-nél. Ekkor természetesen a kinagyított és elhalványított "JÁTÉK" felirat beállítása után kell egyszer lenyomni az Add Point-ot, s utána visszaállítani az eredeti szövegnagyságot és átlátszatlanságot. Sohase felejtsük el ellenőrizni, hogy a megfelelő Mode, Handle, Stepmode beállításaink vannak-e! Az Instant Apply (azonnali alkalmazás) bejelölésével legalább azt láthatjuk majd, hogy a megfelelő forrásrétegen állunk-e...

Végül a második blokk harmadik harmada: az eredeti nagyságúra visszaállított és ismét teljesen átátszatlanná tett "KÉPJÁTÉKOK" feliratot most teljesen eltüntetjük a 72-82 kocka között: megint, immáron harmadszor is ezt a réteget választjuk ki a forrásrétegeink közül, a többi adatot is a megszokottra vesszük (Mode stb.), a Frame-től Frame-ig 72-t és 82-t állítunk be, a 72. kockánál fogadjuk el a 100%-os Opacity értéket (egyáltalán nem fog átlátszani a felirat), s ekkor nyomjuk le az Add point-ot, majd a 82 kockához vigyük le 0-ra az Opacity-t (teljesen átlátszó lesz a felirat), s ahogy már megszoktuk, megint ne nyomjuk le mégegyszer az Add Pointot, hanem Anim Preview-val ellenőrizzük az eredményt (persze csak ha akarjuk), majd OK-ézzunk a Move Path ablakban. Ezzel a szöveges műveletekkel végeztünk is.

Ezen a ponton, biztos, ami biztos, készítettem egy biztonsági mentést, hogy ha később valamit elrontok véletlenül, akkor ne kelljen megint a nulláról kezdenem az egészet. (Ezt hamarabb is megtehetjük, ahol csak kedvünk tartja. Sajnos a pesszimista jóslat itt be is teljesítette önmagát, ezután még kétszer el is rontottam a képet...)

8. ábra

Én a biztonsági mentést úgy készítettem, hogy képpé alakítottam az eddigi eredményt. Erre a Video menü alatt (l. 1. ábra) a Frames to Image funkció szolgál.

A program automatikusan a teljes, 1-től 82-ig terjedő sorozatot kínálta fel, s ez nekem meg is felelt, viszont a lejátszás sebességén egy kicsit csökkenteni akartam: eredetileg 41 ms késleltetéssel bukkant fel ez az ablak a Layer Basename (réteg alapnév) sorban. Ezt átírtam 55 ms-ra. A többi felkínált értéket elfogadtam, s lenyomtam az OK-t. Erre a program elkészített egy képet, amely névtelenként bukkant fel. Ezt meg is néztem: a Szűrők Menü alatt az Animációból a Lejátszás funkcióval. Mivel tetszett, a képet új néven (elsomozi.xcf) elmentettem, anélkül, hogy optimalizáltam volna GIF-re (majd később meglátjuk, mi ez), és .xcf kiterjesztéssel, hogy egy olyan rétegsorozatot kapjak, mint amilyen a kiindulási kép is volt, amelyet I-görbítéssel és Animációval állítottunk elő, akkor még csak 41 réteggel (ez volt az alap_sok.xcf). Ahogy abból kockasorozatot tudtunk készíttetni a GIMP-pel a Split Image to Frames funkcióval, ugyanúgy ebből is tudunk szükség esetén. (Csak ha majd ugyanebbe a mappába gyártatjuk le a sorozatunkat, akkor előtte ne felejtsük el kitörölni a régi kockáinkat _000001.xcf-től _000082.xcf-ig, vagy nyissunk új mappát! Ugyan nem próbáltam ki, mi történne, ha nem ezt tennénk, de így legalább nem lesz zűrzavar.)

Így már bátran belevághatunk az utolsó feladatba, azaz abba, hogy egy golyócskát mozgattassunk egy előre kirajzolt útvonalon a mozgóképünkben, az első képkockától kezdve az utolsóig. Ehhez kell a forrásképecske a golyóbisról. Ne felejtsük el, hogy a Move Path használatához meg kell nyitnunk a kívánt forrásképet, viszont csukjuk be az alap.xcf-et, amely a szöveges rétegeinket tartalmazta.

A lejjebb látható, 9. ábrán látszik, hogy egy betet_trans.xcf nevű forrásképpel dolgoztam. Az eredetileg ide szánt golyócskának betet.xcf volt a neve, s először azzal is készítettem el a mozgóképemet, de a golyó hibájából nem lett jó. A golyó körüli sötét háttér ugyanis takarta a betűimet, amikor azok felett haladt át, de ezt akartam a legfelső rétegnek, ezért átlátszó hátteret készítettem neki, s ezt betet_trans.xcf néven mentettem el. Az emiatt elrontott mozgóképemet tehát félre tettem, viszont mindjárt vissza is nyúltam a biztonsági elsomozi.xcf képemhez, hogy ezzel fejezzem be a munkát. Ebből másolatot készíttettem (Kép, majd Kétszerezés funkció), amelynek a masodikmozi.xcf nevet adtam, s ebből készíttettem kockasorozatot 1-től 82-ig a Video alatti Split Image to Frames funkcióval a korábban már elmondottak szerint. Természetesen ennek is a masodikmozi_000001.xcf kockájából folytattam a további műveleteket.

Első lépésként a GIMP Útvonalak (Path) funkciójával berajzoltam erre az első kockára azt az utat, amelyet a golyónak majd be kell járnia, s a vonal első és utolsó pontját összekötöttem, hogy zárt ciklust kapjak. Ezután természetesen megint a Move Path következett.

9. ábra

Láthatjuk, hogy a beállítások csaknem a szokásosak: a Mode Normal, a Handle Left Top, a Stepmode-ra itt is None-t kell beállítanunk, a forráskép/réteg (Source Image /Layer) pedig most értelemszerűen a golyóbis. A golyómozgást az egész tartományban akarjuk, úgyhogy a feldobott 1-82 Frame to Frame érték meg is felel. Ha bekapcsoljuk az Instant Apply-t (azonnali alkalmazás), akkor látjuk is a golyónkat. Az útvonal viszont csak akkor jelenik meg, ha a Shift gomb lenyomása mellett egyidejűleg lenyomjuk a "Grab Path" gombot is, mindjárt jobbra, a már ismert Add Point mellett. Erre kis idő múltán meg is jelenik a képünkön pirossal az útvonalunk, és a golyó annak a kezdőpontjára ugrik, azaz a programnak sikerült elkapnia az útvonalat (Grab Path).

Az x-y koordinátákat nem is kell nekünk beállítani: automatikusan beállítja maga a program, az útvonalunk kezdőpontjára. És most EGYSZER SEM KELL LENYOMNUNK AZ ADD POINT gombot! Ehelyett mindjárt meg is nézhetjük Anim Preview-val, mi fog látszani a végleges képen, és ha az tetszik, akkor OK-ézhatunk is a Move Path ablakban.

10-11. ábra

Most már csak az van hátra, hogy képpé alakítsuk a kockasorozatunkat: ehhez megint a Frames to Image funkciót használjuk, amelyet a 7. ábránál már bemutattam, a biztonsági kép készítésénél, csak most tovább folytatjuk a műveletet. Ha a pogram elkészítette a Névtelen címmel illetett képet, s azt megnéztük az ablakából meghívható Lejátszás funkcióval (Szűrők alatt az Animációból), és meg is vagyunk vele elégedve, akkor először, GIF képpé alakítása előtt felettébb célszerű optimalizálni, mert különben több MB nagyságú lesz, fölöslegesen. Az oldal tetején látható mozgókép optimalizálás nélkül 4 MB fölött volt, ezt sikerült levenni 712 kB-ra a minőségének szemmel látható romlása nélkül. Az optimalizálás funkció szintúgy a Szűrők menüjében az Animáció alatt található (Optimalizálás (GIF-hez)). Futtassuk le a Névtelen képünkön, majd az eredményt mentsük el tetszőleges címen, de .gif kiterjesztéssel. A programnak ehhez először exportálnia kell a sorozatot. Az erre a célra feldobott ablakban a Mentés animációként-t jelöljük be, majd nyomjuk le az Exportálás gombot. Várjunk türelemmel, amíg a program végez a feladattal, majd egy újabb ablakkal kínál meg, amelyben nyugodtan elfogadhatjuk az eleve beállított alapértékeket, s az OK-t lenyomva el is készült a GIF mozgóképünk, avagy az "animált GIF"-ünk.

Javítás, utólagos korrekció

12. ábra

Ha valamit elrontottunk, de alaposan, akkor nem feltétlenül kell egy biztonsági mentett képből kiindulnunk megint, mint ahogy az feljebb történt. Ki is lehet törölni az elrontott réteget, mint ahogy én tettem is a fenti golyómozgást tartalmazó rétegsorozattal (még a második golyókép sem bizonyult jónak, ezért készítettem egy harmadik változatot is) hogy egy újabb, egyben véglegesnek mondható mozgóképet kapjak. Ehhez a masodikmozi_000001.xcf képkocka ablakából a Video alatt (l. 1. ábra) meghívhatjuk a Frames Layer Delete (réteg kiejtése a képkockákból) funkciót (ez pedig balra látható).

Mivel a golyómozgás a teljes sorozaton végig húzódik, ezért nekem megfelelt az 1-től 82-ig kijelölés. Hogy biztosan a megfelelő réteget töröljük ki, nem árt, ha a Párbeszédablakokból megnyitjuk a Rétegek-et s ennek ablakában megnézzük, hogy is állunk. Mivel a golyós volt a legutoljára elkészített rétegünk, ezért ez került legfelülre, a Veremben (Layerstack) 0-ás sorszámmal, és ez is volt kijelölve. 1-es helyen a szöveges réteg volt, 2-es helyen pedig a barnás-feketés, bekeretezett háttér. Meghagytam a felkínált 0-ás értéket, mert éppen azt akartam kitörölni, és elvégeztettem a műveletet. Ezután a harmadik, végleges golyó forrásképpel megint elvégeztettem a Move Path ablakból kiindulva a kellő műveleteket (l. 9. ábránál elmondottakat), de most előtte nem kellett új útvonalat berajzolnom a masodikmozi_000001.xcf kockára, mert az a 2-es rétegmélységben feküdt, úgyhogy az abban tárolt útvonal információ megőrződött.

13. ábra

További változtatásokat, javításokat is megejthetünk a már elkészült GIF képünkön. Például az eddig ismertetett mozgóképünkön volt egy szembeszökő hiba: amikor a KÉPJÁTÉKOK felirat P betűje felbukkant, akkor szemmel láthatóan előtűnt egy arany színű pötty a később sorra kerülő Á betű talpának magasságában, s ez eléggé zavaró volt. Ezért előszedtem, rendes filmrendezőként, a forgatókönyvemet, s láttam, hogy a P-betűs kockák a 9-12 sorszámon találhatók. A megnyitott GIF képben tehát behívhatjuk a Párbeszédablakok alatt a Rétegeket. A 11. ábrán láthatóan bekapcsoltam a Háttér láthatóságát, és sorra néztem a 9-12. kockát egyesével bekapcsolva a láthatóságukat (ha egy réteg szem-ikonjára ráállunk a kurzorral, és a Shift gombot lenyomva tartjuk, miközben rákattintunk az ikonra, akkor ennek a rétegnek a láthatóságát kivéve az összes többi rétegé kikapcsolódik). Kiderült, hogy a 11. és 12. rétegen jelenik meg a hibás pötty. Ezt a környezet háttérszínére beállított ceruzával egyszerűen kifestettem (vigyázzunk ilyenkor, hogy ez a réteg is legyen kijelölve, és ne valamelyik másikba rajzoljunk véletlenül), és újra mentettem a képet. Az illusztráción már a javított állapot látható: eltűnt a P mellől az arany színű pötty. Mellesleg az is látható, hogy a feldolgozások során a program automatikusan megváltoztatta 60 ms-ra a késleltetést, amit eredetileg 55ms-ra állítottam be.

Ugyanitt változtathatnánk tetszőleges réteg késleltetésén is: a réteg sávjára állva jobb egérgombbal kattintva felbukkan a réteg tulajdonságainak szerkesztése ablak, s abban egyszerűen átírhatjuk az időt, pl. 1000ms-ra, ha azt szeretnénk, hogy egy réteg képe 1 mp-ig is látható legyen. A mostani példánkban az nem lenne célszerű, mert akkor az összes mozgás kimerevedne erre az időre, de készíthetünk olyan mozgóképet is, ahol van értelme ilyen utólagos beavatkozásnak is.

A kép készítéséhez GIMP for Windows 2.4.2 képfeldolgozó programot használtam a sourceforge.net jóvoltából, valamint GAP 2.2.2 Plug-in-t, JamesH jóvoltából.