A Flash bemutatása A Flash egy vektorgrafikus animáció készítő szerzői rendszer, amely alkalmas kis fájlméretben, jó minőségű interaktív animációk készítésére. Az így készített animációk az Interneten is publikálhatók.
Alternatívák Az animáció elkészítéséhez alternatívát jelenthet az animációs GIF technika, amely az Internetről szabadon letölthető szerkesztőprogramokkal könnyebben elkészíthető ugyan, ám ez a mozgást pixelgrafikus képek egymásutánjával jeleníti meg, ami nemcsak nagy fájlméretet, de az esetleges nagyítás során minőségromlást is jelent. Az így lejátszott bitképek sorozatában interaktív funkciókat sem valósíthatunk meg. Vektorgrafikus animációt készíthetünk SGML nyelven, amely a három dimenziós lehetőségeken túl kameraállások, interakciók programozási lehetőségeit is nyújtja. Megfelelő beépülő modul (plugin) használatával az így készített animációk Internet böngészőben is lejátszhatók. Egyetlen, ámde jelentős hátrány, hogy jelenleg még nem létezik a nyelvhez igazán hatékony szerzői rendszer, így a fejlesztők az egyes rajzokat az XML formátumú forrásállomány szerkesztésével készítik el. A gyakorlatban ez azt jelenti, hogy egy alakzat megjelenítéséhez, annak koordinátáit, színét, pontosan le kell írni az animáció forrásállományában.
A Flash rövid története 1996-ban a FutureSplash fejlesztői olyan alkalmazást mutattak be amellyel az addig megszokott pixelgrafikus megoldások helyett a weboldalakba vektorgrafikus alakzatokat, nyomógombokat lehetett beépíteni. Ezt a technológiát vásárolta meg, és fejlesztette tovább a Macromedia. A Flash program 30 napos demo verziója letölthető a www.macromedia.com weboldalról.
A Flash fájlformátumai A Flash program alapvetően két fájlformátumot használ. Egyik az animációnk forrásállománya az fla kiterjesztésű állomány, a másik a lejátszásra optimalizált, csak a szükséges adatokat tartalmazó swf (Short Web Format) kiterjesztésű.
Abból, hogy a publikált és a szerkesztett állomány különbözik, következik, hogy az Interneten látható swf állományok nem szerkeszthetők, azaz azokat kizárólag lejátszani tudjuk. Az ilyen swf állományok lejátszására a böngészőprogramok beépülő modult (plugin) használnak. Ha böngészőn kívül szeretnénk megjeleníteni az animációnkat flash player programra lesz szükségünk, amely szabadon letölthető a Macromedia weboldaláról. A Flash program képes a lejátszót és az animációt is magában foglaló futtatható állományok, úgynevezett projektor fájlok készítésére is mind windows, mind macintosh platformra.
A Flash környezet A Flash vektorgrafikus rajzoló, vektorgrafikus animáció szerkesztő és bitkép kezelő program egyben. Aki ismer már valamilyen vektorgrafikus rajzolóprogramot, az a sok hasonlóság mellett néhány meglepő eltérést is tapasztalhat a megszokotthoz képest. Ennek oka, hogy a Flash, ellentétben a vektorgrafikus rajzolóprogramok többségével nem a precíz mérnöki alkalmazásokhoz, hanem a könnyed rajzoláshoz tervezték. Az eszközök tulajdonságai, viselkedése, inkább a rajzfilmkészítők, mint a mérnökök eszköztárához, rajzolási szokásaihoz igazodik. A Flash rendelkezik egy beépített programozási nyelvvel az ActionScript nyelvvel is, amely segítségével az animációnk eseményeit vezérelhetjük. A nyelv elemei számos lehetőséget nyújtanak az adatok kezelésén át az egyes objektumok vezérléséig. Az Interneten gyakran találkozhatunk Flash-sel készült játékokkal is.
Az animáció építőkockái Az animáció egyes kockái grafikus objektumokból épülnek fel. Ilyen objektumok lehetnek a zárt grafikus alakzatok, ellipszis, négyzet, vagy ezek kombinációja. A Flash program érdekessége, hogy az objektumok körvonalát és kitöltését külön kezeli. A fenti idomokat vonalak, görbék határolják, a vonalakat és görbéket pedig pontokkal írjuk le. Tehát a vektorgrafikus programokban minden grafikus objektumot pontok és jellemző tulajdonságok (szín, vonalvastagság, vonalstílus, stb.) határoznak meg. A fentiek alól a szöveg árnyalatnyi kivételt jelent, de erről a későbbiekben lesz szó.
Az animáció építőkockái • Rajz-objektumok o Körvonal o Kitöltés • Vonal • Görbe • Pont (sarokpont, görbepont) o Érintőkar • Szöveg
Grafikus objektumok tulajdonságai Grafikus objektumnak a valamilyen szempontból összetartozó, egységként kezelhető elemek együttesét értjük. Grafikus objektum lehet például egy kör, vagy egy fa rajza is. A lényeg, hogy az aktuális művelet során az objektum alkotóelemeit egységként, együtt kezeljük. A grafikus objektumokat pontjaikon kívül a következő tulajdonságok írják le. Vonalszín Vonaltípus Kitöltő szín Textúra, vagy színátmenet adatai Koordináták Referenciapont koordinátái Magasság Szélesség Átlátszóság A grafikus objektumokat jellemző pontjaikkal határozhatjuk meg egyértelműen. Összetett alakzatoknál nem csak a pontok koordinátája, hanem a pontok sorrendje is meghatározó. Az alábbi ábrán ugyanazon négy pont összekötésének lehetőségeit láthatjuk.
Görbék a Flash-ben A vektorgrafikus programok többsége a görbék leírásához Bézier módszerét alkalmazza. A Flash program azonban a kevésbé számításigényes négyzetes közelítés módszerével közelíti a kirajzolt íveket a pontokhoz. Ez a gyakorlatban azt jelenti, hogy egyes alakzatok rajzolása közben előfordulhat, hogy a Flash oda is pontot helyez, ahova mi magunk nem tettünk. Ez a közelítés tökéletesítése miatt van, a működés szempontjából teljesen természetes, bár néha kényelmetlenséget okoz.
Görbék pontjai: A Flash-ben előforduló alakzatok az alábbi ponttípusokkal írhatók le: Végpontok Sarokpontok Görbepontok Végpontok A görbe végpontjai. Összetett alakzatoknál akárhány ilyen lehet. Pl.: a kör végpontjainak száma:0
Sarokpontok Olyan pontok, ahol az adott pontba a görbéhez érintő nem húzható. (mert a „görbe” egyenes)
Görbepontok A görbék leírásának leghasznosabb eszközei a görbepontok. Az általuk meghatározott görbéhez az adott pontban szerkeszthető érintő. A görbepontokhoz érintőkarok tartoznak, amelyek hossza és iránya meghatározza a görbe ívét. Az érintőkarok használatával, kis gyakorlással elsajátíthatjuk tetszőleges alakzat megrajzolásának képességét.
Szövegek A vektorgrafikus rajzokban elhelyezett szöveg lehet fontkészleten alapuló, azaz a szöveg, mint betűk egymásutánja és a betűtípus leírása jelenik meg. Ez esetben a megjelenítéskor használhatjuk a rendszerben jelen levő fontkészletet, vagy a felhasznált betűcsaládokat, vagy annak egyes betűit az állományba ágyazzuk. Ha az első megoldást választjuk, előfordulhat, hogy a kiválasztott betűtípus nincs telepítve azon a gépen, ahol a megjelenítés történik, ez esetben a szövegünk a tervezetthez képest egészen eltérően jelenhet meg. Míg a másik megoldással ez a probléma kiküszöbölhető ám a fontkészlet hozzáadásával az állomány mérete jelentősen megnő. Mindezen problémák kiküszöbölésére a vektorgrafikus szöveget, annak elkészülte után célszerű görbékké konvertálni. Sajnos a művelet elvégzése után a szöveg már nem módosítható.
A Flash program eszköztára
Nyíl eszköz Elsősorban az egyes rajzelemek kijelölésére szolgál, ám számos más funkcióval is bír. Gumikeretként a rajzobjektumok egy részének kijelölésére is használhatjuk. Ilyenkor az objektumok automatikus vágása is megtörténik, azaz a kijelölt részt külön mozgathatjuk az eredeti objektumtól. Az objektumot határoló görbéket az egérmutatóval közelítve egy kis körív jelenik meg a nyíl alatt mutatva ezzel, hogy az eszköz segítségével az objektumot határoló görbéket alakíthatjuk. Hasonlóan, a határoló görbe meghatározó pontjait is elmozdíthatjuk. Ilyenkor az egérmutató alatt egy sarok jelenik meg. Kijelölés a nyíl eszközzel A már említett gumikeretes módszeren kívül a kijelölésre további lehetőségünk is van. A határoló görbére kattintva annak egy részét, duplán kattintva egészét jelölhetjük ki. Egy kattintással a görbe töréspontok közötti szakasza jelölhető ki. Ha a görbében nincs töréspont az egész görbe kijelölt lesz. Töréspont a sarokpont, vagy olyan görbepont, ahol az érintőkarok nincsenek egy egyenes mentén. A kitöltés felett egyszeres kattintással a kitöltés, dupla kattintással az egész objektumot kitöltést és körvonalat együtt jelölhetjük ki.
Részelemek kijelölése eszköz A subselection (fehér nyíl) eszközzel a rajzobjektumok részeit, pontosabban pontjait jelölhetjük ki és mozgathatjuk el. Több pont együttes kijelölésére a gumikeretes módszeren kívül választhatjuk azt a megoldást is, hogy a shift gomb folyamatos nyomvatartása mellett a kijelölni kívánt pontokat egyenként a kijelöltekhez adjuk. Vonal eszköz A rajzolóprogramokból már ismerős lehet ez az egyenes vonalak rajzolására alkalmas, rendkívül könnyen kezelhető eszköz. Ha fükkőleges, vagy vízszintes vonalat szeretnénk vele rajzolni, a használat közben tartsuk nyomva a shift billentyűt. Lasszó A lasszó segítségével szabálytalan alakú területeket jelölhetünk ki. Bonyolult bittérképes alakzatok kijelölése esetén jó szolgálatot tehet a varázspálca opció, melynek segítségével azonos színű területeket jelölhetünk ki. Ahhoz, hogy az importált bitképek részei kijelölhetőek legyenek a bitképet „szét kell törni” a modify menü break apart menüpontjával. Toll A toll (pen) eszközzel a vektorgrafikus rajzolóprogramokban megszokott Bézier görbék és egyenesek rajzolására szolgál. Egyenesek rajzolásához nem kell mást tennünk, mint az egyenesek végpontjainak helyére kattintanunk. A rajzolás befejezéséhez kattintsunk duplán, vagy kattintsunk a ctrl gombot lenyomva. A görbék rajzolása sem sokkal bonyolultabb. Az eltérés mindössze annyi, hogy a pont kijelölésekor az egér billentyűjét nem engedjük fel, hanem lenyomott egérgombbal, az egérkurzort mozgatva, az érintőkarok segítségével kijelöljük a görbe ívét. Zárt alakzat készítésekor az utolsó pontot az első fölé pozícionáljuk. A pontos illesztést jelzi az egérkurzor mellett megjelenő kis kör.
Ellipszist és négyzet rajzoló eszköz Ezek az eszközök általánosak minden grafikus programban. A Flash-ben is a megszokott módon, kattintás és húzás módszerével működik. Ha szabályos objektumot szeretnénk kreálni, a rajzolás művelete alatt tartsuk nyomva a shift billentyűt. Ha legömbölyített sarkú négyszöget szeretnénk, állítsuk be a rajzolóeszköz opciójánál annak sugarát. A nulla sugarú kör, a hegyes sarkú négyzetet jelenti. Ceruza eszköz A ceruza segítségével a szabadkézi rajzhoz hasonlóan az egér mozgatásával rajzolhatunk. Ilyenkor bizony jól jön a digitális rajztábla, de az opciók között a simítás bekapcsolása is jól jöhet. Ecset A ceruzához hasonlóan, szintén a szabadkézi rajzolást imitálja, ám a festés módját, az ecset alakját és vastagságát is beállíthatjuk az opciók fülön. A festés módját az alábbiak szerint állíthatjuk be: Paint normal módban az ecset mindent befed.
Paint fills módban kizárólag a kitöltéseket fogja be az ecset
Paint behind módban az objektumok mögé, pontosabban az üres területekre festhetünk
Paint selection módban egy adott -előzőleg kijelölt- terület kitöltésein jut csak érvényre ecsetvonásaink hatása.
Végezetül: A Paint inside mód arra szolgál, hogy egy adott kitöltés területén festhessünk. A kiválasztott kitöltés az lesz, ahol a festést elkezdjük.
Szabadkézi torzítás A Free transform eszköz segítségével a kijelölt objektumokat egyszerűen nyújthatjuk, dönthetjük, vagy forgathatjuk. Nyújtáshoz használjuk a fogantyúkat. A sarkok fogantyúit használva, vízszintes és függőleges irányban egyszerre nyújthatjuk az objektumunkat. Ha az arányait megtartva szeretnénk növelni, vagy csökkenteni az objektum méreteit, tartsuk nyomva a shift gombot a művelet alatt. Az objektumok döntését is megvalósíthatjuk az eszközzel, ha a megfelelő irányú körvonal fölé húzzuk az egérmutatót, a körvonalat az egérgomb lenyomásával megragadva dönthetjük az objektumot. A forgatás is könnyű. Közelítsünk az egérkurzorral kívülről a sarkok fogantyúihoz. Amikor az egérkurzor egy körbemutató nyíllá változik, lenyomott és nyomvatartott egérgombbal megkezdhetjük az objektum elforgatását. Ha nem saját középpontja körül szeretnénk elforgatni az objektumot, mozgassuk a forgatási középpontot jelző kis fehér kört a megfelelő helyre. A színátmenet beállításai Régi igényt elégítettek ki a Flash fejlesztői ezzel az eszközzel. Ha egy kitöltés színét színátmenetre állítottuk, az átmenet tulajdonságait könnyen beállíthatjuk az eszközzel. Tintásüveg A tintásüveg eszközzel az egyes kitöltések körvonalait állíthatjuk be. Egyszerűen csak kattintsunk az eszközzel a megváltoztatni kívánt körvonalú, vagy éppen körvonal nélküli kitöltésre.
Festékes vödör A festékes vödör működése hasonló a tintásüveghez, ám ez az eszköz a kitöltés színének megváltoztatására szolgál. Ha nem teljesen zárt alakzatnak szeretnénk kitöltést beállítani, lehetőségünk van arra, hogy az eszköz opcióinak beállításával kisebb-nagyobb kapuk ellenére is elvégezze a kitöltést a program. Pipetta eszköz A pipetta segítségével színt vételezhetünk a munkaterület tetszőleges részéről felhasználva azt más alakzatok kitöltéséhez. Radír A radír segítségével objektumok nemkívánatos részleteit tüntethetjük el véglegesen. Működésének beállításai megegyeznek az ecsetnél leírtakkal.
Az időszalag (timeline)
Az időszalag az animáció készítés legtöbbet használt eszköze. Segítségével szerkeszthetjük az animáció egyes kulcsképkockáit, és a képkockák közti animációt. A Flash programban az alábbi képkocka típusokat különböztetjük meg: Üres képkockák Ezek azok a képkockák, amelyeket még nem használtunk fel az animációkészítésben. Nem tartalmaznak semmit. Lejátszás során sem játszanak szerepet ugyanis az animáció mindig az utolsó nem üres képkockáig tart. Kulcsképkocka Az animáció meghatározó pontjai a kulcsképkockák. Az animációkészítés során, csak ezen képkockák tartalmát változtathatjuk, Az egyes kulcsképkockák közötti átmenetet, a program beállításaink alapján automatikusan generálja.
Ha egy kulcsképkockán semmilyen grafikai objektum, vagy szimbólumpéldány nem szerepel, az időszalagon egy üres kör jelenik meg az adott kockában. Ha a kulcsképkocka tartalmaz grafikát, a kulcsképkockát egy teli kör reprezentálja. Mozgásátmenet animáció A mozgásátmenet során a kezdeti-, és vég kulcsképkockában ugyanazon szimbólum egy-egy példánya szerepel. Az animáció során a szimbólumpéldány jellemző tulajdonsága például helyzete változik meg. Az alakzatátmenet során az alábbi tulajdonságok változtathatók: • Méret • Koordináták • Forgás • Magasság • Szélesség • Döntés • Színezet • Fényerősség • Átlátszóság Az animációban szereplő szimbólum maga is lehet MovieClip típusú, azaz tartalmazhat animációt. Alakzatátmenet animáció Az alakzatátmenet esetén az előbbitől eltérően a kezdő-, és vég kulcsképkockában egy-egy grafikai objektum áll. (Azaz nem szimbólumpéldány!) Ezen különböző objektumok, pontjait fogja egyikből a másikba vinni a program. A kívánt hatás elérése érdekében pontosan is megadhatjuk, hogy a kezdeti alakzat melyik pontját a hátsó kulcsképkocka melyik pontjává transzformálja a Flash. Előző kulcsképkockákat tartalmazó képkockák Az előző kulcsképkockákat tartalmazó képkockák, röviden képkockák viselkedése rendkívül egyszerű. Arra szolgálnak, hogy az őket megelőző kulcsképkocka tartalmát megjelenítsék. A funkció megvalósítására használhatnánk azt a megoldást is, hogy a kezdeti kulcsképkocka tartalmát új kulcsképkockákba másoljuk, ám ez a következő problémákat veti fel: Ha a kulcsképkocka tartalmát meg szeretnénk változtatni, azt minden másolaton el kell végeznünk. Ha a kulcsképkockán szereplő szimbólumpéldányokhoz interakciót rendelünk, például gomb lenyomása, akkor azt minden másolatnál meg kell valósítanunk.
Mindezek elkerülésére alkalmazzuk azt a módszert, hogy az animáció során állandó jelleggel megjelenő objektumokat egyetlen kulcsképkockával, és további képkockákkal reprezentáljuk. Lejátszófej Az animáció pillanatnyi állapotát az időszalagon található függőleges piros vonal, a lejátszófej mutatja. Az egér segítségével a lejátszófejet bárhova elmozdíthatjuk az időszalagon.
