Programming | Other » A Macromedia Flash

Tartalomjegyzék TARTALOMJEGYZÉK . 3 1. BEVEZETÉS 5 2. ÁLTALÁNOS GRAFIKAI ÉS ANIMÁCIÓS LEHETŐSÉGEK 7 2.1 A GRAFIKAI ELEMEK FORRÁSA 7 2.2 VEKTORGRAFIKA 8 2.3 BITTÉRKÉPES GRAFIKA 9 2.4 AZ ANIMÁCIÓ ÉS A GRAFIKA KAPCSOLATA 11 2.5 AZ ANIMÁCIÓ TÍPUSAI 12 2.51 Állandó előtérrel készülő animáció 13 2.52 Állandó háttérrel készülő animáció 13 2.53 Objektum animáció 14 3. A MACROMEDIA FLASH BEMUTATÁSA 15 3.1 A FLASH RÖVID TÖRTÉNETE 15 3.2 A FLASH ÁLTALÁNOS BEMUTATÁSA 16 3.21 Flash program megtekintése, elérhetősége 17 3.3 A FLASH FEJLESZTÕI KÖRNYEZETE 18 3.31 A kezelő felület 18 3.32 Timeline (idősáv) 20 3.33 Controller (videó vezérlő) 23 3.34 Zoom Menu 23 3.35 Toolbar (eszköztár) 24 3.36 A felbukkanó ablakok 25 3.4 RAJZOLÁS 26 3.41 Flash-ben történõ rajzolás alapelvei 26 3.42 Rajzeszközök áttekintése 27 3.5 RÉTEGEK, FELSÕBB RÉTEGEK ÉS SZIMBÓLUMOK 30 3.51 Rétegek létrehozása, módosítása 31

3.52 Rétegek típusai 31 3.53 Felsõbb rétegek 32 3.54 Objektumok és szimbólumok 33 3.6 HANGOK 36 3.61 Hangok fajtái 36 3.62 Hangok importálása 37 3 4. FLASH SEGÍTSÉGÉVEL KÉSZÍTHETŐ ANIMÁCIÓK 39 4.1 AZ ANIMÁCIÓ KÉSZÍTÉS ALAPJAI 39 4.11 A képkockák jellemzői 39 4.12 Az animáció sebességének beállítása 42 4.2 ANIMÁCIÓ KÉPKOCKÁRÓL KÉPKOCKÁRA 42 4.21 Onion Skinning 43 4.22 Az animáció filmszalagként való nézete 44 4.3 ANIMÁCIÓ KÉSZÍTÉS MOTION TWEENING SEGÍTSÉGÉVEL 45 4.4 ANIMÁCIÓ KÉSZÍTÉS SHAPE TWEENING SEGÍTSÉGÉVEL 47 4.41 Shape Hints (objektumazonosító pontok) 48 4.5 ANIMÁCIÓ ELŐRE MEGADOTT PÁLYA MENTÉN 50 5. PÉLDA ANIMÁCIÓ KÉSZÍTÉSE, JELLEMZÉSE 52 5.1 A PRELOAD (ELŐTÖLTÉS) 52 5.2 AZ ANIMÁCIÓ 53 5.3 A MENÜ 54 6. ÖSSZEFOGLALÁS 56 7. ÁBRAJEGYZÉK 57 4 1. Bevezetés A számítógépek egyre nagyobb elterjedése magával hozta a különböző alkalmazások, programok fejlődését

is. A szoftverek kezdetben, a szűkös lehetőségek miatt nem tartalmaztak grafikai elemeket, általában valamilyen karakteres megjelenést támogattak. Az idő múlásával lehetővé vált a grafika felhasználása is, ekkor honosodtak meg a képek, animációk, mozik a felhasználói felületeken. Az animáció nem más, mint rajzolt képek oly módon történő megjelenítése, hogy az a mozgás érzetét keltse a nézőben. Az animáció jellemzője a másodpercenként megjelenített képek száma (fps – frames per second). Ennek az értéknek a folyamatos mozgás látványának eléréséhez kb. 14 és 18 között kell lennie. A gyors elterjedésben nagy szerepet játszottak a reklámok és az üzleti versengés kiélesedése, ebben a helyzetben a mozgás, a figyelemfelkeltés volt a legfőbb cél. Ez az Internet megjelenésével csak tovább fokozódott, fontos lett a jó, szép és igényes megjelenés, az egyre növekvő számú fogyasztói réteg kegyeinek elnyeréséhez.

Ugyanakkor a technika napjainkban lehetővé teszi, hogy az átlag felhasználó is képes legyen ennek elérésére. Az Internet születésekor jobbára a karakteres felület volt jellemző. Ez a korszak volt az FTP, a Telnet aranykora. Ekkoriban futott fel az elektronikus levelezés, s megjelentek az olvasói listák. Az Internet második forradalmát a Hypertext és a grafikus felület jelentette. A világhálón felbukkantak a képek, idővel pedig megjelentek a mozgóképek, animációk is. Ám még ezután is maradt éppen elég tennivaló A HTML-t ugyanis statikus weboldalak megjelenítésére (leírására) találták ki. Azért, hogy a weboldal mégis látványosabb legyen, a HTML kénytelen volt mankókra támaszkodni. Ilyen mankók (a teljesség igénye nélkül) a JavaScript, a Java, a Style Sheet, az Animated GIF, az ActiveX, a különböző Plugin-ek, és ide sorolható végeredményben a QuickTime, valamint a RealPlayer is. 5 Ezeknek köszönhetően a HTML oldalakon

megjelenhettek az - érinthető és nyomható - gombok, az animált logók, a mozgóképek (egy meghatározott területen belül), sőt, még platform független programokat is futtathattunk. A HTML-oldalak mégis reménytelenül statikusak maradtak. Valahol a horizont szélén persze már feltűnt a DHTML és a VRML is, ám ezek az érdekes "nyelvek" nem hódítottak meg igazán sok weboldalt. A HTML is fejlődik, újabb és újabb szabványok jelennek meg, megannyi lehetőséget kínálva a weboldalak "csinosítására". Gondot jelent azonban, hogy sokszor még a legelterjedtebb böngészők is másként viselkednek ugyanazon HTML kód mellett (esetenként még a legújabb böngészők sem ismerik teljesen az új HTML szabványokat). Ez még akkor is igen nagy probléma, ha mára egy-két böngésző vált dominánssá. Az Internet szinte kiált egy könnyen kezelhető, szabványos és dinamikus webeszközért. Egy olyanért, amelynek a segítségével könnyen

lehet (a weboldalt) programozni, amelyben az objektumok szabadon mozoghatnak, transzformálódhatnak, ahol a hang a képhez ütemezhető, a különböző elemek egymásra épülhetnek. Lehet, hogy ez az eszköz a Macromedia cég Flash nevű programja lesz? Sőt lehet, hogy már az is! 6 2. Általános grafikai és animációs lehetőségek A fejezetben bemutatásra kerülnek a multimédiában használatos grafikus és animációs lehetőségek, a kínálkozó nagy és gyorsan változó technikák miatt, a teljesség igénye nélkül, éppen csak annyira, hogy alapot adjanak, a későbbiekben ismertetendő Flash használatához. 2.1 A grafikai elemek forrása A multimédiás alkalmazásba ágyazott grafikus elemeket számos célra felhasználhatjuk. Ezek segítségével illusztrálhatjuk a szöveges részben ismertetett részeket, magyarázatként használhatjuk fel az egyes szövegrészekhez, vagy akár a multimédia alkalmazás külön részét is képezhetik. Grafikus elemeket

több forrásból hozhatunk létre: • Legkézenfekvőbb módszer, ha azokat magunk rajzoljuk meg valamelyik rajzolóprogram (pl.: Photoshop, CorelDraw) segítségével Ez a módszer azonban igen sok időt vesz igénybe, valamint szép rajzok készítése az átlagosnál nagyobb rajzolótehetséget igényel. • Lényegesen egyszerűbb módszer, ha olyan rajzokat, képeket építünk be a multimédiás alkalmazásunkba, amelyek már megtalálhatók egy fényképen vagy rajzon. Ekkor csupán be kell azokat olvasni egy lapolvasó (scanner) segítségével, majd az adott alkalmazás igényeinek megfelelő alakítás után fel is használhatjuk őket. • A lapolvasó használatához hasonló módszer, ha a kívánt képet egy videoszalagról kell megszereznünk. Ekkor a lapolvasó helyett egy videó digitalizáló berendezésre lesz szükség (videó digitalizáló kártya), amely a videoszalagon tárolt képeinket az általunk választott digitális formátumban rögzíti, így

azokat be tudjuk illeszteni a kívánt multimédiás alkalmazásba. 7 Bármelyik grafikát is használjuk, az mindig az alábbi két kategória egyikébe esik bele: • Vektorgrafika • Bittérképes grafika Mindkét típusnak vannak előnyei és hátrányai egyaránt. Ezek figyelembevételével kell azt kiválasztani, hogy melyiket akarjuk az adott multimédiás alkalmazásban felhasználni. Az alábbiakban e két típus ismertetése következik. 2.2 Vektorgrafika Amikor egy rajzolóprogram segítségével egy vektorgrafikával készült rajzot hozunk létre, akkor a rajzolóprogram egy láthatatlan hálóra rajzolja ki az általunk készített grafikát. Ezt a grafikát aztán utasítások halmazaként tárolja el a program egy állományban. Az utasítások pontosan leírják minden egyes grafikus alakzat (pont, vonal, kör stb.) pozícióját, méretét, színét, alakját és egyéb, a megjelenítéssel kapcsolatos jellemzőjét. Amikor ki szeretnénk rajzoltatni a

képernyőre az így tárolt grafikát, akkor a program végrehajtja a grafika állományában található utasításokat, és ezekből építi fel a képernyőn megjelenő rajzot. Tehát a vektorgrafikával készült rajz állománya nem a képet alkotó pontokat tárolja el, hanem az azok megjelenítéséhez szükséges utasításokat, amelyet aztán a megjelenítő program értelmez és hajt végre. A vektorgrafika előnyei is ebből származnak. Mivel a grafika minden egyes része külön-külön van tárolva a grafikus állományban, ezért lényegesen egyszerűbben lehet a grafikus kép egyes részeivel műveleteket végezni: kicsinyíteni, nagyítani, elforgatni, megdönteni azokat. Mivel ezek a műveletek csak a grafikus kép adott elemén hajtódnak végre, ezért a művelet elvégzése után sem keletkezik torzítás a grafikus képen. A vektorgrafikának a multimédia szempontjából igen nagy előnye, hogy az így létrejövő grafikus állományok kisebb méretűek, mint a

megfelelő bittérképes 8 állományok, hiszen nem tartalmaznak minden egyes képpontról információkat, hanem az egyes képelemek ínformációit hordozzák. 1. ÁBRA VEKTORGRAFIKUS KÉP A vektorgrafika azonban hátrányokat is hordoz magában. Minél összetettebb egy rajz, annál több utasítás szükséges annak leírásához, tehát annál tovább tart annak megjelenítése a képernyőn. Ez bizonyos esetekben alkalmazhatatlanná teszi a vektorgrafikát. A vektorgrafika másik nagy hátránya, hogy nem, vagy csak nehezen képes fényképminőségű képeket létrehozni. Nem alkalmazható a képernyő teljes felületét kitöltő képek megjelenítésére. Ezek az előnyök és hátrányok miatt a vektorgrafikával készült képeket egyszerűbb rajzok valamint CAD/CAM alkalmazások esetében érdemes használni. Ezeknél könnyű létrehozni a képet, a létrehozott kép állománya kis helyet igényel a háttértárolón, és a megjelenítés is gyors. 2.3

Bittérképes grafika A bittérképes grafika a képek megjelenítésének legegyszerűbb eszköze. A képet függőleges és vízszintes irányban pontokra osztja fel, és minden egyes pontról tárolja annak szín- és fényerősség információit. Megjelenítéskor a 9 képernyő egy-egy képpontjában jeleníti meg a tárolt kép egyes pontjait a megfelelő színben és fényerősségben. A tárolt szín- és fényerősség információk azonban igen sok helyet foglalhatnak el. Minél több színt, vagy minél többféle fényerősséget szeretnénk egy-egy képpontról tárolni, annál nagyobb helyet igényel a létrejövő állomány. Az emberi szem érzékelő képességét és a jelenleg használatos monitorok megjelenítő képességét figyelembe véve a 16 bit színinformációval rendelkező alkalmazások már minden igényt ki szoktak elégíteni. Bittérképes grafikát az alábbi módszerekkel hozhatunk létre: • megrajzolhatjuk őket egy rajzolóprogram

segítségével • meglévő képek, fényképek digitalizálásával • videoszalagról videó digitalizáló kártya segítségével A bittérképes grafika segítségével tehát igen jó minőségű képeket tudunk létrehozni. A képek minősége azonban együtt jár a képeket tartalmazó állományok méretének gyarapodásával: ez a bittérképes grafika használatának egyik hátrányát jelenti. 2. ÁBRA BITTÉRKÉPES KÉP 10 A bittérképes grafika másik hátránya az, hogy nehéz a képpel úgy műveleteket végezni, hogy a létrejövő új kép ne tartalmazzon torzítást. Ha például ki szeretnénk nagyítani egy bittérképes rajzot, akkor a létrejövő rajzon az egyes körvonalak csipkézetekké, szaggatottakká válnak. Hasonló az eset a rajz egy részletének kinagyításakor vagy elforgatásakor is. (Tudomásul kell venni, hogy a tárolt képhez tartozó képpontok száma a munkának ebben a fázisában már nem változtatható.) Az előzőek

figyelembevételével, tehát akkor célszerű bittérképes grafikát használni multimédiás alkalmazásunkban, ha a megjelenítendő kép összetettsége indokolja azt, vagy ha lapolvasóval vagy képdigitalizálóval rögzített képet kell megjelenítenünk és az a kép még nem került feldolgozásra. A bittérképes kép tárolásánál igen nagy méretű file-ok keletkeznek. 2.4 Az animáció és a grafika kapcsolata A megfelelően elkészített és kivitelezett grafikai elemek alkalmasak lehetnek a szerkesztő számára, hogy a napjaink magas követelményeit kielégítő animációkat hozhasson létre. Ezen animációk nagy előnye, hogy valóságos életet adhat az eddig csak grafikus képeket tartalmazó képernyőoldalainknak. Az animációk segítségével lényegesen több információt közölhetünk, mint az egyszerű grafikus oldalakkal, azonban a számítógép teljesítményét mégsem kell megnövelni olyan mértékben, mintha videó elemeket szeretnénk

megjeleníteni segítségével. Az üzleti életben és az Internet reklámok alkalmazásaiban igen mutatósak lehetnek a növekvő és csökkenő grafikonok, valamint a kisméretű animációk segítségével olyan eseményeket is létre lehet hozni, amelyeket videoszalagon nehéz lenne rögzíteni, vagy esetleg megoldhatatlan lenne. Az animációt tartalmazó oldalak jobban magukra vonják a figyelmet, a képernyő mozgó elemei kiemelik a közölni való információkat. 11 A következő pontokban rövid összefoglalás következik az animáció megvalósítási lehetőségeiről és az animációk fejlesztésekor előforduló problémákról. 2.5 Az animáció típusai Mindenképpen érdemes programunkba mozgó képsorokat ültetnünk. Ha alkalmazásunkba animációt tartalmazó elemeket szeretnénk beépíteni, két út között választhatunk: • Egy animációt szerkesztő program segítségével létrehozzuk az animációt tartalmazó állományokat (AVI, SWF,

FLC, Animált-GIF), amelyeket lejátszunk az alkalmazásunkkal. Ekkor az animációs képsorok egy külön állományban kapnak helyet, amely állományt akár az alkalmazásban, akár attól elkülönítve is lejátszhatjuk. Az animációt szerkesztő programok az állandó előterű vagy az állandó hátterű animációkat támogatják. • Objektum animáció segítségével saját magunk fejlesztjük ki és építjük be alkalmazásunkba az animációt tartalmazó elemeket. Ekkor az animáció egy vagy több elem mozgatását jelenti a képernyőn. Objektum animáció esetén az animációs képsorok az alkalmazás állományában kapnak helyet, és azokat csak az alkalmazásban tudjuk megjeleníteni, annak eszközeit felhasználva. Az animációt tartalmazó elemek lejátszási sebessége függ számítógépünk teljesítményétől és az animáció típusától is. Míg a hagyományos mozgóképek esetén mintegy 28-30 kép másodpercenkénti lejátszása teszi lehetővé a

mozgókép illúziójának fenntartását, addig az animációk lejátszási sebessége ennek a fele, másodpercenkénti 14-18 kép. Ez a lejátszási sebesség megfelelő minőséget ad az animáció lejátszásakor, és nem terheli meg a számítógép hardverét különösebben. 12 2.51 Állandó előtérrel készülő animáció Az alapötlet a régi stílusú pörgethető lapokkal egyezik meg, tulajdonképpen az állandó előtérrel készülő animációk úgy készülnek, mint régen. A lapok általában egy egyszerű rajzot tartalmaznak, például ahogyan egy ló fut. A kép háttere lapról-lapra csak egy kicsit változik, miközben az előtér változatlan marad, így amint gyorsan átpörgetjük a lapokat, a folyamatos mozgás illúzióját kelti bennünk. Az állandó előtérrel készülő animáció közel 60 évvel ezelőtti találmány. Ekkor még az animáció minden egyes lapját kézzel rajzolták meg az alkotók. Napjainkban számítógéppel segítik az ilyen

típusú animáció elkészítését is: az egyes lapokon levő objektumokat másolással viszik át a következő lapra, és a változó részeket is sokkal könnyebben szerkesztik. 2.52 Állandó háttérrel készülő animáció Az állandó háttérrel készülő animáció az állandó előtérrel készülő animáció folytatásaként keletkezett, kb. 50 évvel ezelőtt A szerzők abból indultak ki, hogy lényegesen egyszerűbb az állandó hátteret az animáció minden egyes lapjára felvenni, és utólag rárajzolni a változó előteret, mint fordítva. Az ilyen módon keletkezett animáció lépései megegyeznek az előző pontban említett animáció lépéseivel, csak az előtér és a háttér kezelésének módja különbözik. Itt az előtérben keletkező mozdulatokat kell apró részekre bontani, és rárajzolni az állandó háttérre. Mivel a háttér állandó, és ez teszi ki az egyes oldalak igen nagy részét, az így készülő animáció könnyebben és

gyorsabban hozható létre, mint az előző pontban említett társa. A számítógép alkalmazása itt is jelentősen leegyszerűsíti a rajzolási folyamatot. Az állandó hátteret csak egyszer kell megrajzolni, és ezután oldalróloldalra át lehet másolni Az előtérben keletkező mozgást ábrázoló képek részleteit pedig gyakran a számítógép hozza létre, a felhasználónak csak a kezdő és a végső állapotot kell megrajzolni. Ha például egy, a képernyőn átrepülő 13 madarat szeretnénk megrajzolni, akkor elegendő a madár kezdő és végső állapotát megrajzolni a képernyőn, a számítógép kiszámítja és berajzolja a közbülső elemeket. 2.53 Objektum animáció Az objektum animáció az egyik legalapvetőbb animációs technikát képviseli. Ahelyett, hogy az előző két pontban említett animációt tartalmazó állományt létrehoznánk, itt létrehozunk egy grafikus objektumot, amelyet egy program segítségével mozgatunk a képernyőn.

Az objektum animáció tehát egy előre elkészített grafikus objektumot mozgat a képernyő előre megadott útvonalán. Az animáció hatásának fokozásának érdekében lehetőség van arra, hogy a mozgatás közben az objektummal bizonyos műveleteket végezzünk (nagyítás, kicsinyítés, elforgatás), de az objektumnak mindvégig ugyanannak kell lennie. Lehetőség van arra is, hogy az objektum mozgatás közben változtassa az alakját (például körből négyszög legyen és vissza), azonban ezeket az alakváltozásokat is előre be kell állítanunk. Az objektum animáció segítségével, minimális munkával válthatunk ki igen nagy hatást a multimédiás alkalmazás felhasználójából. Mivel az objektum animáció nem igényel külső támogatást, és a mozgatandó rajz is csak egyszer szerepel a multimédia alkalmazás állományában, ezért kevés helyet igényel a memóriában, kevéssé köti le a számítógép erőforrásait, tehát igen szabadon

használható. 14 3. A Macromedia Flash bemutatása A számítógép egyik legnagyobb előnye, hogy olyan programokat lehet vele készíteni, amelyek nagyon látványosak és interaktívak. Ezeket különböző szoftverek felhasználásával érhetjük el, ilyen a Macromedia által készített Flash is, segítségével programunk tartalmazhat látványos animációkat, valamint olyan részeket, melyek képesek kommunikálni a felhasználóval. 3.1 A Flash rövid története 1996-ban egy FutureSplash nevű cég mutatta be a Flash-t. A technológia egy webes multimédia megoldásként keletkezett, amivel könnyen, gyorsan letölthető interaktív gombokat készíthettünk az Internetre. Amivel azonban igazán elbűvölt mindenkit az az, hogy vektor grafikát lehet vele készíteni. Az Adobe Photoshop segítségével készített pixeles grafikákkal ellentétben a vektor grafika ugyanis méretezhető. Ez azt jelenti, hogy a felhasználó rá tud közelíteni a képre, vagy a kép

egy részére, anélkül, hogy a kép minősége romlana. Rugalmasságot adhatunk képeinknek ezáltal A Macromedia továbbfejlesztette a technikát, és a Flash-t bitképes, audio támogatással bővítette. A Flash 3-as verziójánál jelent meg az átlátszóság (Transparency) és a morfózis (Shape Morphing) képessége. Valamint a Macromedia a Flash Asset Xtra-val áthidaló kapcsolatot hozott létre a Shockwave és a Flash között. A Macromedia Flash 4.0 megjelenése a web fejlődésében újabb nagy mérföldkő. A Flash ezen túl már nemcsak az egyik legjobb webes animációs megoldás - egyben az egyik legjobb megoldás webes multimédia-fejlesztéshez. A 4-es verzió újdonságai: MP3 audio, szerkeszthető szöveges mezők, újratervezett Library (könyvtár) ablak, bővített grafikus felület. Az Flash 5.0 új tulajdonságai megnövelt képességeket szolgáltatnak a különböző grafikák készítéséhez, a munkafolyamatokat egyszerűsítették és 15

bővítették az ActionScript felhasználásával készíthető interaktív munkák lehetőségeit. Az 5-ös verzió főbb újdonságai: kibővített color controls (szín beállítás) ablak, új kiemelő színek alkalmazása a jobb megkülönböztetés miatt, saját gyorsbillentyűk definiálásának lehetősége a kényelmes, gyors munka érdekében. 3.2 A Flash általános bemutatása Mennyivel nyújt többet a Macromedia Flash annál, amit már megszoktunk? Mennyivel tud többet a HTML-nél, a JavaScript-nél vagy az Animated GIFeknél? Először is, a weboldal interaktívvá válik. A benne lévő objektumok (képek, szövegek, gombok) mozoghatnak, foroghatnak, átszíneződhetnek, változhat a méretük, és mindez különböző eseményekhez köthető (például az egér mozgatása, lenyomott billentyű, eltelt idő stb.) S ami különösen lényeges: a kész Flash anyag kisméretű. Még egy komolyabb bevezető animációval indító weboldal is mindössze 200-300 Kbájt. Az

anyagunkhoz hangokat csatolhatunk, ezeket időzíthetjük, vagy feltételhez köthetjük (például csak akkor szóljanak, ha valaki megnyomja az egyik gombot). A hangokat a Flash MP3 formátumban tárolja (illetve ha az eredeti formátum más volt, akkor MP3-má konvertálja). A weboldalakat védhetjük (például nem lehet leszedni róla a képeket, linkeket, és a kész Flash programot a levédés után újraíráshoz sem lehet megnyitni). A Flash formátumát igen sok böngésző ismeri (Internet Explorer 5, Netscape Navigator 4), de könnyen telepíthető a lejátszó (pl. a StarOffice-hoz vagy az Operához), s nemcsak Windows (hanem például Linux) alá is, méghozzá ingyen. A Flash-el könnyen lehet komoly programokat írni, vagy bemutatókat készíteni. 16 3.21 Flash program megtekintése, elérhetősége Honnét és hogyan telepíthető a Flash lejátszó? Ha a szokásos böngészőnk nem ismeri a Flash-t, akkor vagy telepítsük újra úgy, hogy telepítéskor

válasszuk a Flash-t is (esetleg frissíthetünk egy újabb böngészőre, úgyis ingyenes), vagy a már említett webcímről is letölthetjük a telepítőprogramot (itt csak az operációs rendszert kell kiválasztanunk). Ezután nincs is más dolgunk a Windows alatt, mint futtatni a letöltött telepítőprogramot. Ha a böngészőnket nem találja meg, akkor meg kell adnunk a böngésző elérési útját. Ez tipikusan a C:Program Files\Plugins vagy valami hasonló, ahol a kipontozott rész általában a böngészőnk neve. Ha StarOffice-szal dolgozunk, akkor a C:Office51Explorer, ha Operánk van, akkor a C:Program FilesOperaPlugins. A Netscape-et a program megtalálja Ha Explorer fut a gépünkön (de régebbi, vagy telepítéskor kihagytuk a Flash-t), akkor le kell töltenünk a lejátszót, mégpedig az Internetről. Linux alatt csomagoljuk ki a letöltött anyagot, majd másoljuk a Netscape Plugins könyvtárába (a letöltött és kicsomagolt fájlok között találunk egy

részletes telepítési útmutatót is). A böngésző indítása után már működik is a Flash lejátszó. Miután kigyönyörködtük magunkat mások weboldalaiban, elképzelhető, hogy mi is szeretnénk ilyet készíteni. Ehhez szükségünk lesz a Flash szerkesztő próbaverziójára (sajnos csak Windows és Machintos változata létezik). Menjünk el a www.macromediacom/software/flash/trial webcímre, és töltsük le a szerkesztőt (24 Mbájt). Ha meg akarunk ismerkedni a Flash-sel, indítás után nézzük végig a Help/Lessons és a /Samples menüben lévő programokat (lesz itt mozi, számológép, dobókocka-szimulátor, minijáték stb.) Kattintásra a programok betöltődnek, a Ctrl + Enterre pedig elindulnak. Ekkor egy új ablakban kipróbálhatjuk őket. Ha meguntuk, akkor zárjuk be ezt az ablakot (különben a program futása nem szakad meg), majd nézzük meg a program struktúráját. 17 Alapesetben felül van a szokásos menürész, jobb oldalt pedig egy

másik. Ez utóbbi ikonjai, ha már használtunk rajzolóprogramot, nem lesznek ismeretlenek. Középen felül helyezkednek el a Layerek, a képernyő nagyobbik részében pedig a munkaasztal. A Flash egy magasszintű (emberközeli) programozási nyelv. Háromféle módon programozhatjuk. Készíthetünk animációkat a Layerekkel Az egyes Layereken belüli frame-eket (időpillanatokat) programozhatjuk, így nem kell futnia az animációnak, hogy "történjen" valami. Programozhatjuk a munkaasztalon lévő objektumokat (képek, szövegek, animációk stb.) is, például, hogy mi történjen egy gomb megnyomásakor. A legmegdöbbentőbb az egészben, hogy az elemek egymásra is épülhetnek. Ha például írtunk egy animációt vagy programot, akkor azt objektumként beilleszthetjük egy másik programba, mint mondjuk egy gombot, vagy mint egy másik animáció részét. 3.3 A Flash fejlesztõi környezete A következő fejezetetek megpróbálják bemutatni, hogyan is

kell használni a Flash-t, az egyszerű rajzoktól kezdve az animáció készítésig. Bemutatásra kerül, a fejlesztői környezet, (azaz mit-hol találunk meg a képernyőn) valamint az, hogy a rajzok és animációk készítéséhez milyen eszközök állnak rendelkezésünkre. 3.31 A kezelő felület A képernyő alapjában véve két fő részre osztódik. Az alsó része az ablaknak a Stage (szerkesztő), ahol az animáció aktuális képkockája látszik. A felső fele az ablaknak az Timeline (idősáv), melynek az egyik részén a Layer-ek (rétegek) találhatók, a másik pedig a hozzájuk tartozó Frame-ek (képkockák), ezekkel az animáció működését irányíthatjuk és meghatározhatjuk, hogy mi jelenjen meg a munkaterületen. 18 3. ÁBRA KEZELŐI FELÜLET Stage (szerkesztő): Minden objektum a szerkesztőn jelenik meg, az aktuális képkockához tartozó összes idősáv (Timeline) tartalmát, a grafikákat, a gombokat, objektumokat is tartalmazza. Két

részből áll: • Canvas (vászon): A vászon a képernyő közepén helyezkedik el a szerkesztőben, alapállapotban fehér háttérrel és fekete kerettel körülvéve jelenik meg. Ezen a területen a rétegek tartalma jelenik meg, minden objektum, grafika és gomb, ez csak akkor változhat, ha elrejtjük valamelyik réteget. Ebben a tartományban csak azok az objektumok láthatók, melyek a kész, exportálásra kerülő animációban is láthatóak lesznek. • Work Area (munkaterület): Ez egy szürke terület mely körülveszi a képkockát. Az objektumok melyek itt találhatók nem fognak megjelenni a kész, exportált animációban, de ennek ellenére az animáció indulhat erről 19 a területről is, olyan érzést keltve ezzel mintha a képen kívülről kezdődne. Ez rengeteg újszerű és érdekes megoldás alapja lehet (pl.: beúsztatás, begördítés, ki-be nagyítás). 3.32 Timeline (idősáv) Információt közöl az animáció egy bizonyos számú

képkockájáról. Az idősávhoz szorosan kapcsolódó fogalom a képkocka (Frame), mely az idősávon helyezkedik el és az animációnk aktuális (kiválasztott), képkockájáról ad információt. Az animációnkat úgy kell elképzelni, mint egy filmet, másodpercenként adott képkockát tartalmaz. Ezeket a képkockákat pedig egyenként kiválaszthatjuk és szerkeszthetjük. Az idősáv megmutatja még rétegeinek hierarchikus szervezettségét is. 4. ÁBRA TIMELINE (IDŐSÁV) Layres (rétegek): A rétegek az idősáv bal oldalán helyezkednek el, funkciójuk az, hogy a szervesen össze nem tartózó grafikákat, objektumokat elkülönítsék egymástól, ezáltal is megkönnyítik a tájékozódást és a szerkesztést. A rétegek neveit (Layer Name) bármikor megváltoztathatjuk, csak rá kell 20 kattintani a réteg nevére kétszer, majd beírni az új nevet. Az alsó állapotsorban a már meglévő rétegekhez újat tudunk hozzáadni (Add Layer), valamint

törölni is tudjuk őket (Delete Layer). A Guide Layer ikon segítségével bármelyik réteghez hozzácsatolhatunk egy úgynevezett segédréteget, mely az előre megadott pálya mentén történő animáció pályáját fogja tartalmazni (erre majd részletesebben az animáció készítésénél térek ki). A rétegeket egyenként el tudjuk rejteni (Hide Button), ez akkor hasznos, ha a szerkesztésre a többi réteg objektumai zavarólag hatnak. A (Lock Button) segítségével pedig le tudjuk zárni a rétegeket a szerkesztés elől, így elkerülhetjük a kész, vagy nem kívánt rétegek véletlen sérülését. Az (Outlines Button) a rétegeken lévő objektumok megkülönböztetésére szolgál. A program minden réteghez külön színt rendel, a réteg neve mellett aktiválhatjuk a megkülönböztetést, ekkor az adott réteghez tartozó objektumokat a gép a megfelelő színű kerettel látja el. Ez nagyon hasznos lehet, ha már sok objektummal dolgozunk. Jelölések

az idősávon: Az idősáv a rétegegeken lévő, különböző fajtájú képkockákat nagyon jól és áttekinthetően megkülönbözteti, ezzel is megkönnyítve a felhasználó dolgát. A. No Frame (nincs képkocka): Ebben a rétegben nem hoztunk létre képkockát, semmit sem tartalmaz, még üres képkockát sem. B. Empty Keyframe (üres kulcs képkocka): Itt a réteg már tartalmaz képkockákat, de ezek üresek, a képkockákban nincs semmilyen elem, azaz a rétegen nincs vizuális objektum. (Kis üres fekete kört tartalmaz fehér háttérben.) C. Single Keyframe (kulcs képkocka): A képkocka már tartalmaz elemet vagy elemeket. (Kis teli fekete kört tartalmaz szürke háttérben) D. Frame-By-Frame Animations (animáció képkockáról képkockára): Ez a réteg olyan animációt tartalmaz, melyet képkockáról képkockára rajzoltak, ezeken a képeken lévő apró változások eredményezték lejátszáskor a mozgás 21 látszatát. Mivel minden képen változás van,

mindegyik kulcs képkocka lesz (Minden képkocka kis teli fekete kört tartalmaz szürke háttérben.) E. Motion-Tweened Keyframe (animált képkocka): Átmeneti állapotot jelöl két kulcs képkocka közötti animációban. Ha általános animációt, objektummozgást készítünk, akkor ez fog megjelenni az idősávon. (Fekete nyilat tartalmaz világoskék háttérben.) F. Shape-Tweened Keyframe (alakváltozási képkocka): Átmeneti állapotot jelöl két kulcs képkocka közötti animációban. Ha olyan animációt készítünk, melyben az objektum alakváltozást végez, akkor ez fog megjelenni az idősávon. (Fekete nyilat tartalmaz világoszöld háttérben) G. Szaggatott vonal: Valamilyen problémát jelöl az animációban Timeleine Header (idősáv fejléc): Az idősávon a képkockák sorrendben, lineárisan helyezkednek el, hasonlóan a filmekhez. A fejléc feladata, hogy megmutassa, láthatóvá tegye az animáció képkockáinak rendezettségét. Pontos beosztást

tartalmaz minden egyes képkockákról (alapesetben 5 kockánként van beszámozva a fejléc), így ezek könnyen nyomon követhetőek az időben. Playhead (navigációs mutató): Aktuális képkocka jelzője. Megmutatja, hogy hol állunk az animációnkban. A rajta áthaladó függőleges piros vonal mutatja az időben lineárisan, hogy éppen hol tartunk, lejátszáskor ez a vonal is végighalad az animáción. Ha a réteg valamely képkockájára kattintunk, akkor azt magas fénnyel jelöli ki a Flash. Frame View Button (képkocka módosító gomb): Ezzel a gombbal illetve a legördülő menü segítségével a fejléc beosztását tudjuk módosítani. Beállíthatjuk, hogy egy képkocka mekkora legyen, mind a szélességét, mind a magasságát tetszésünk szerint alakíthatjuk. A képernyőn egyszerre látható kockák számán kívül megadhatjuk még, hogy a program beszínezze-e a képkockákat az animáció típusának megfelelően. 22 3.33 Controller (videó vezérlő)

Az animáció lejátszását lehet vele irányítani, legjobban egy átlagos videó lejátszójának vezérlőjére hasonlít, használata és működése is megegyezik vele. A Controller a képkockák közötti navigálásra is használható. 5. ÁBRA CONTROLLER (VIDEÓ VEZÉRLŐ) 3.34 Zoom Menu Ez a menü a vászon megfelelő nagyságának beállítására szolgál. A szerkesztés során sokszor van szükségünk a pontos, aprólékos munkára. Ezt a nagyítással és a kicsinyítéssel oldhatjuk meg. A menüből százalékos formában választhatjuk ki a nagyítás/kicsinyítés mértékét, de meg is adhatjuk úgy, hogy beírjuk a kívánt értéket az ablakba. Két fontos pontja van még a menünek Az egyik a Show All menüpont, ami a munkaterületen lévő objektumokra nagyít rá. A másik a Show Frame menüpont, ami a vásznat jeleníti meg a képernyőn, a lehető legnagyobb nagyításban úgy, hogy még minden látszódjon a képernyőn. 6. ÁBRA ZOOM MENU 23 3.35

Toolbar (eszköztár) Itt található az összes rajzoló és kijelölő eszköz Tools Box (Eszköztár doboz), valamint a legalul a hozzájuk tartozó eszköztár módosítók Options Box (eszköztár módosítók doboz), ezek a módosítók az eszköz kiválasztása után jelennek meg. Itt helyezkedik el még a View Box (nézet doboz), amely a gyors nagyítást/kicsinyítést és a mozgást teszi lehetővé a vásznon. Ezenkívül megtalálható még a Colors Box (Szín doboz), mely a színek különböző beállításait tartalmazza. (Az eszköztár részletes ismertetésére a rajzolás fejezetben térek ki.) 7. ÁBRA TOOLBAR (ESZKÖZTÁR) 24 3.36 A felbukkanó ablakok A Flash program használ néhány, úgynevezett, lebegő ablakot, melyek a gyakran használt funkciók gyors elérését segítik. Ezek mindig a szerkesztő területen jelennek meg. Color (szín ablak): A színek különböző beállításait tartalmazza, módosíthatunk, keverhetünk színt, valamint

színátmenetet is készíthetünk. Ezt a menüt az eszköztárban is elhelyezhetjük, így állandóan látható marad, mindig kéznél lesz, ha kell. Két fő állapota van: • A Solid (szolid, hagyományos színek): a színeket lehet módosítani, és újakat hozzáadni, melyekkel vonalakat lehet rajzolni, és alakzatokat kiszínezni. A színek listájában alapbeállításként az úgynevezett Internetbiztos (Web Safe) 216 szín jelenik meg, melyet miden böngésző probléma nélkül meg tud jeleníteni. • A Gradient (átmenet, két vagy több szín között): a színkeverékeket és színátmeneteket lehet beállítani, melyekkel a színezéseket, kitöltéseket lehet készíteni. 8. ÁBRA A SZÍN ABLAK SOLID ÁLLAPOTA 25 Library (könyvtár): Az aktuális animációhoz tartozó egyfajta lerakat, mely tartalmazza az összes felhasznált elemet, pl. szimbólumokat, bittérképeket, hangokat. Ezeket további alkönyvtárakba rendezhetjük a könnyebb átláthatóság

céljából. 9. ÁBRA A LIBRARY ABLAK 3.4 Rajzolás A programnak egyedülálló rajzolási lehetõségei vannak a többi vektorgrafikás programmal szemben. Használhatunk ecsetet, radírt, festékes vödröt, mintha csak egy ceruzát fognánk a kezünkben. Készíthetünk új képeket az animációnkhoz, vagy módosíthatunk, manipulálhatunk más programból átvett grafikákat. 3.41 Flash-ben történõ rajzolás alapelvei Három fontos aspektusa van a Flash-ben történõ rajzolásnak, amire késõbb jó lesz emlékezni: 26 • A rajzolás minden szöveg, csoport és szimbólum mögött történik. A rajzolás semmiféle hatással nincs a szövegekre, csoportokra, szimbólumokra egészen addig, amíg azokat szerkeszthetõ alakzatokká nem tesszük, a darabokra törés opcióval (Break Apart). • Az egyes rétegeken történõ rajzolás mindig a vászon szintjén történik. Ha egy kijelölt alakzatot mozgatunk egy másik alakzat felé, akkor az módosítani

fogja azt. Vagy hozzáadja magát, ha egyezõ színûek, vagy kivonja belõle magát, ha különbözõ színûek. • Ha egy vonalat egy másik fölé rajzolunk ugyan azon a rétegen, akkor azok egyesülni fognak egy alakzattá, ha ugyan olyan volt a színük és a típusuk. Ha egy vonal keresztezi saját magát, akkor zárt alakzattá válik 3.42 Rajzeszközök áttekintése A rajzeszközök az eszköztár legfelső részén helyezkednek el, a módosítók segítségével nagyon széleskörű a felhasználási területük, egyedülálló rajzokat és grafikákat készíthetünk, valamint más programból átvett grafikákat is módosíthatunk. Tekintsük át a rajzolásnál használt eszközök fajtáit: Tools Box (eszköztár doboz) Arrow (nyíl): Alakzatok kijelölésére és mozgatására való. Továbbá használható az alakzatok részeinek mozgatására, transzformálására, azok megfelelő lapjainak, oldalainak formálására, mozgatására. Subselection Arrow (kiválasztó

nyíl): Ez az eszköz szintén az alakzatok kijelölésére és mozgatására való, de az a különleges funkciója, hogy segítségével az alakzat bármely kezelőpontjai kiválaszthatók (a kezelőpontokat a program automatikusan generálja, mikor az alakzat szélére kattintunk) és ezek mozgatásával formája tetszés szerint változtatható. 27 10. ÁBRA AZ ESZKÖZTÁR ESZKÖZEI Line (vonal): Vonalak rajzolására alkalmazható. Lasso (lasszó): Alakzatokat, vagy azok részeit jelölhetjük ki tetszőlegesen. Nagy előnye még, hogy bármely alakzat körvonalát követhetjük és kijelölhetjük vele. Pen (toll): Akkor használjuk, ha precíz útvonalakat akarunk szerkeszteni. Alkalmazható egyenesek és görbék rajzolására, bármely görbe alakját elő tudjuk állítani vele. A rajzolásnál a vonal megjelenítése után a kezelőpontok segítségével tudjuk változtatni az egyenes alakját, hosszát és szögét. Text Tool (szöveg): Segítségével szöveg

objektumokat hozhatunk létre és módosíthatunk a felső rétegen. Egy teljesen üres területre kattintva új szöveget hoz létre, és ha egy már meglévőre kattintunk, megnyitja azt szerkesztésre. 28 Oval (ovális): Ovális alakzatok rajzolására alkalmazható. Rectangle (négyszög): Négyszög alakzatok rajzolására alkalmazható. Pencil (ceruza): Segítségével vonalakat és alakzatok körvonalait rajzolhatjuk meg a vászon szintjén. Brush (ecset): Színezett alakzatokat készíthetünk vele. Ink Bottle (tintatartó): A már megrajzolt vonalak színét, vastagságát, típusát változtathatjuk ezzel az eszközzel. Pain Bucket (festékes vödör): A még ki nem színezett alakzatok színezésére szolgál, vagy a már meglévő szín megváltoztatására. Eyedropper (színlopó): Megmutatja a kívánt alakzat színét, vagy a vonal típusát. Miután rákattintottunk egy alakzatra vagy vonalra automatikusan átáll a festékes vödör eszközre (ha színkitöltés

van kijelölve) vagy a tintatartóra (ha vonal van kijelölve). Eraser (radír): Szelektíven törölhetünk vele részeket vonalakból és alakzatokból. View Box (nézet doboz) Hand (kéz): A felnagyított vásznon a kéz segítségével tudunk mozogni, egyszerűen megfogjuk és elmozgatjuk a képet. Zoom (nagyítás/kicsinyítés): A szerkesztés pontos elvégzéséhez nélkülözhetetlen ez az eszköz, nagyíthatunk, vagy kicsinyíthetünk vele. Colors Box (szín doboz) Stroke Color (rajzoló szín): A rajzolás során a vonalak színét változtathatjuk meg vele, ha alakzatokat rajzolunk, akkor a keret színt jelöli. Fill Color (kitöltési szín): Az alakzatok rajzolásánál a kitöltési színt adhatjuk, illetve változtathatjuk meg itt. 29 Options box (eszköztár módosítók doboz) A Tool Modifiers (eszköztár módosítók), igen fontosak lehetnek a rajzolás során, a módosítóknak nagyon széleskörű a felhasználási területük, egyedülálló rajzokat

és grafikákat készíthetünk, valamint a más programból átvett grafikákat is könnyen és gyorsan módosíthatjuk. 3.5 Rétegek, felsõbb rétegek és szimbólumok A rétegek új dimenziókat adnak egy Flash animációnak: mélységet. Ez azért van, mert az első rétegen lévő rajzok közelebb vannak a nézőhöz, mint az alsó rétegen lévők, ezáltal olyan jeleneteket lehet készíteni, amelyeknek perspektívája van, és melyekben az objektumok egymás előtt mozoghatnak. A rétegeket (Layers) egymáson elhelyezkedõ átlátszó fóliákként kell elképzelni. Ha egyik rétegen nincsen semmi, akkor azon átlátva láthatjuk az alatta lévõ réteget. Ha új Flash animációt akarunk létrehozni, elõször csak egy réteg áll rendelkezésünkre. A szerkesztés során persze hozzáadhatunk új rétegeket. A létrehozott rétegek számának korlátja csak a számítógép memóriája A rétegek nem növelik a file méretét. Egy rétegen szerkeszthetünk, vagy

rajzolhatunk objektumokat anélkül, hogy az hatással lenne más rétegeken lévõ objektumokra. Ezek mellett a rétegek használata lehetővé teszi komplex jelenetek létrehozását és menedzselését. A rétegeknek külön-külön nevet lehet adni, melynek segítségével könnyebben meg lehet állapítani, hogy mi található rajta. El lehet rejteni vagy láthatóvá tenni, egy vagy akár az összes réteget is egyidejűleg. Nagyon gyorsan meg lehet változtatni a rétegeknek az egymáshoz viszonyított sorrendjét is, elég az egérrel a megfelelő helyre húzni a. A rétegek segítségével optimalizálni lehet az animáció lejátszását. Például, ha azokat az elemeket melyek nem változnak, egy rétegre rakjuk, azokat pedig melyek változnak mind egy külön rétegre kerülnek, akkor ezzel nagy mértékben csökkenthetjük azt a területet, melyen a változás történik. 30 3.51 Rétegek létrehozása, módosítása • Válasszuk az Insert>Layer pontot • Az

idõsáv alján válasszuk a New Layer (új réteg) ablakot. Az aktív rétegen (Active layer) rajzolhatunk, festhetünk. Hogy aktívvá tegyünk egy réteget, ki kell azt választanunk. Ilyenkor egy ceruza ikonja jelenik meg a réteg neve mellett és a réteg magas fényű lesz. Egyszerre csak egy réteg lehet aktív. Szerkeszthetünk objektumokat bármelyik látható, le nem zárt rétegen. A rétegeket le lehet zárni (Locked Layer), hogy megvédjük õket a változtatásoktól. Ezt egy kis lakat jelzi a réteg neve mellett. A rétegeket el is rejthetjük (Hidden Layer), hogy ne zavarjanak minket az animáció szerkesztése folyamán. Ezt egy kis piros X jelzi a réteg neve mellett. Valamint ha egy rétegen csak az objektum körvonalát (Outlines) szeretnénk látni, akkor a réteg neve mellett aktiválhatjuk megkülönböztetést, ekkor az adott réteghez tartozó objektumokat a gép a megfelelő színű kerettel látja el. Ez nagyon hasznos lehet, ha már sok objektummal

dolgozunk. Ha egy rétegnek a tulajdonságait szeretnénk módosítani, csak klikkeljünk duplán a rétegre. Ekkor megjelenik a Layer Properties ablak Itt adhatunk nevet a rétegnek, beállíthatjuk, hogy el legyen rejtve a réteg, vagy akár le is zárhatjuk azt. 3.52 Rétegek típusai • Az alap réteg típus a normal (normál), amelyre rajzolhatunk. • A guide (segéd) réteg, arra szolgál, hogy könnyítse a szerkesztést, de a végsõ animációban nem jelenik meg. • A mask (maszkolt) réteg használatával igen különös hatást érhetünk el. Nevezik spotlight effect-nek is (zseblámpa effektus), ugyanis ilyenkor létrehozhatunk egy lyukat, melyen keresztül láthatjuk a lejjebb elhelyezkedõ réteg tartalmát. 31 3.53 Felsõbb rétegek Itt kell még említést tennünk a felsőbb rétegekről, melyek a vászon szintjén lévõ vonalak és alakzatok felett találhatóak, ez is objektum szint, ennek neve felsõ szint. Ez tartalmazza a szövegeket, bittérképeket,

csoportokat és a szimbólumokat. A szimbólumok olyan objektumok melyek a Gyûjteményekben (Library Window) tárolódnak és többszörösen fel lehetnek használva az animációban. Ezen objektumok mindig a vászon szintjén levõ objektumok elõtt vannak, így figyelembe kell venni, hogy takarják azokat. Az elõbbiekben láthattuk, hogy a vászon szintjén minden kapcsolatba lép. A program megkeresi azokat az alakzatokat, melyek összeérnek és egyesíti azokat. A felsõbb szinteken ez másképp van. Itt nem lehet az objektumok körvonalát olyan könnyedén módosítani, viszont lehet õket úgy mozgatni, hogy azok nincsenek egymásra hatással. Az ezen a szinten lévõ objektumok használata kevésbé terheli meg az erõforrásokat. Használatukkal tehát olyan animációkat lehet készíteni, melyek letöltési ideje és lejátszása lényegesen gyorsabb. Bár a felsõbb rétegekben lévõ objektumokat lehet forgatni, mozgatni, méretezni, de nem lehet õket szerkeszteni,

egészen addig, amíg meg nem nyitjuk õket szerkesztésre, melyet a rajtuk történõ dupla kattintással, vagy az Edit menüpont Edit Selected vagy Edit Symbols menüpontjával érhetünk el. Természetesen ezeket az objektumokat vissza lehet juttatni a vászon szintjére, ha kijelöljük õket, és a Modify menü Break Apart pontját választjuk A szövegek és képek használata az egyik módja, amikor ezeken a rétegeken dolgozunk. Ezeket az objektumokat csoportba is lehet foglalni A csoportokban különbözõ típusú objektumok is lehetnek, például a vásznon lévõ alakzatok, szövegek, képek, szimbólumok. Azok az elemek melyek a vásznon lettek rajzolva, de csoportba lettek foglalva, a felsõbb réteg részévé vállnak és továbbá nincsenek rá hatással a vásznon tett módosítások. 32 Group (Csoportosítás): Az egyes daraboknak a csoportban nem kell érintkezniük egymással, lehetnek bárhol a munkaterületen. Ahhoz, hogy csoportosítani tudjuk õket, nem

kell mást tenni, csak ki kell jelölni õket, majd a Modify menü Group (csopostosít) pontját kell választani. Ha ezt fel szeretnénk bontani, akkor ugyanebben a menüben az Ungroup-ot kell választanunk. A felsõbb rétegeken lévõ objektumok sorba-rendezése: Mint ahogy azt már tudjuk a felsõbb szinteken lévõ objektumok nincsenek hatással egymásra, úgy mint a vászon szintjén. Ez azt jelenti, hogy az objektumok egymás elõtt és mögött helyezkednek el, így esetleg takarva egymást. Ezt a sorrendet lehet könnyedén kialakítani a Modify menü Arrange (rendez) pontjával. A kijelölt objektumot lehet egyesével elõre (Move Ahead), vagy hátra (Move Behind) mozgatni a szintek között, vagy egybõl legfelülre (Bring To Front), esetleg legalulra (Send To Back) küldeni. A legalsó szint alatt van a vászon. A felsõbb szinteken lévõ objektumok nem átlátszóak, így mindent eltakarnak, ami mögöttük van. 3.54 Objektumok és szimbólumok Szöveg objektum Bár

szövegeket, betûket a vászon szintjén is létre lehet hozni rajzolással, de sokkal könnyebb õket, a felsõbb szinteken, szöveg objektumként létrehozni. Ebben az esetben egyszerûen lehet módosítani a betû típusát, a betûk és a sorok közötti kihagyást, paragrafusokat adhatunk meg, akár csak egy szövegszerkesztõben. Ezeket természetesen ugyanúgy animálhatjuk, akárcsak a többi objektumot. De természetesen a már kész szövegünket ugyanúgy vissza tudjuk konvertálni a vászon szintjére és ott ezáltal tovább formázhatjuk azokat, egyedi betûtípusokat létrehozva. 33 Bittérképes objektum Sokszor lehet szükségünk a bittérképes objektumok használatára, bár a vektor grafika kisebb, gyorsabb animációt eredményez, mégis vannak esetek, amikor a bittérképes grafika használata elengedhetetlen. Például, sokkal egyszerûbb egy bonyolult grafikát ledigitalizálni (beszkennelni) és azt importálni a készülõ animációba, mint

megrajzolni nekünk vektorgrafikával, valamint ha fotókat akarunk használni, elkerülhetetlen a bittérképes grafika használata. 11. ÁBRA FLASH-BE IMPORTÁLHATÓ FILE TÍPUSOK Bittérképes grafika importálása: Ezeket a grafikákat többféle módon is fel lehet használni a Flash-ben. Minden módosítás nélkül használhatjuk 34 õket illusztrálás céljából, többszörözhetjük és módosíthatjuk õket, használhatjuk alakzatok kitöltésére. Ezek használata elõtt azonban a képet, vagy az animációt importálni kell. Ez a File menü Import pontjánál érhetõ el, ahol meg kell adni a file nevét (ha QuickTime4, vagy annál későbbi verzióval rendelkezünk, akkor több formátum közül választhatunk). Ezek után a program elhelyezi a képet az aktuális rétegen, melyet ezután tetszés szerint szerkeszthetünk, és automatikusan elhelyezi az animációhoz tartozó gyûjtemények között a Library ablakban. Ezek után ezt a képet több helyen is

felhasználhatjuk az animációban, csak a gyûjtemények közül ki kell vennünk és a munkaterületre húzni. Mindezt úgy tehetjük meg, hogy nem használunk több memóriát, mert ez nem a hagyományos másolásnak felel meg, ugyanis a kép csak a gyűjtemények között fog szerepelni, hiszen valójában csak egy hivatkozás fog a kép helyére kerülni az adott rétegen, és ez fog megjelenni a kész animációban. 12. ÁBRA QUICKTIME FELINSTALLÁLÁSA UTÁN IMPORTÁLHATÓ FILE TÍPUSOK 35 A szimbólumok és a gyûjtemény Az elõzõekben már láthattuk, hogy a bittérképes grafikák hogyan tárolódnak a gyûjteményekben. Ezek mellett még, az animációhoz felhasznált, szimbólumok, gombok és a hangok is itt tárolódnak. A szimbólumok az egyik legfontosabb (és legösszetettebb) része egy Flash animációnak. Mindegyik szimbólum tartalmazhat saját animációt, hangokat, gombokat, bittérképes grafikát, rajzolt részeket és akár más szimbólumokat

is. Ezek a szimbólumok csak egyszer lesznek letárolva a Flash által létrehozott file-ban, de a program többször is hivatkozhat rájuk, ahányszor csak szükséges a lejátszás során, mindezt a nélkül, hogy különösebben növelnénk a file méretét. A szimbólum maga is lehet animáció, az õt tartalmazó animáción belül, ezzel is leegyszerűsítve az animáció készítést, és a navigálást, tájékozódást a programon belül. Ha hosszú, terjedelmes programot, animációt készítünk, akkor annak terjedelme nagyon megnőhet, vagyis rengeteg, több ezer képkockából is állhat. Ezen belül egy bizonyos képkocka megtalálása maga a rémálom lehet, ennek elkerülését is meg tudjuk oldani a szimbólumok használatával. 3.6 Hangok A Flash-ben többféle lehetőség is van a hangok használatára. Felhasználhatjuk a hangokat úgy, hogy folyamatosan halljuk, függetlenül az idősávtól, vagy össze is hangolhatjuk az animációval. 3.61 Hangok

fajtái A Flash-ben kétfajta hang létezik, az Event Sound (esemény hang), és a Stream Sound (folyamatos hang). Az esemény hangnak először teljesen le kell töltődnie, és csak aztán kezdődhet, viszont utána bármikor felhasználhatjuk, akár több eseménynél is, elindulás után folyamatosan szól, amíg le nem állítják. A folyamatos hang rögtön elkezdődik, mihelyst elég adat letöltődik az első néhány képkockához és a hanghoz, majd az idősávhoz hangoltan szól tovább, 36 megoldható az is, hogy több folyamatos hangot kezeljen a program, és ezek közül a felhasználó szabadon választhasson. Ekkor nem töltődik le az összes folyamatos hang, hanem csak az, amelyik éppen szól. A hangokat felhasználhatjuk gombok (Buttons) készítéséhez is, ekkor meg tudjuk adni, hogy mikor szólaljanak meg a hozzárendelt hangok. Ha többállású gombokat használunk a különböző állásokhoz más-más hangokat adhatunk meg. Például, ilyen lehet az,

mikor az egér kurzort a gomb fölé visszük vagy az, mikor a gombot lenyomjuk. Ahhoz, hogy hangot kapcsoljunk egy animációhoz, létre kell neki hozni egy saját réteget. A tulajdonságait a Frame Properties>Sound panelben állíthatjuk be. 3.62 Hangok importálása A File>Import menü kiválasztásával hozhatunk a Flash-be AIFF, WAV vagy MP3 kiterjesztésű hang file-okat. Ugyanúgy importálhatjuk őket, mint a többi típusú file-t. A Flash a Library-ban tárolja a hangokat, a bitképekkel és a szimbólumokkal együtt. 13. ÁBRA HANGOK A LIBRARY ABLAKBAN 37 A hangok nagy helyet foglalnak el a háttértárolón, és nagy a RAM igényük is. Általánosságban, legcélszerűbb 22 kHz-es, 16-bites mono hangokat használni (A sztereo hangok kétszer annyi adatot használnak, mint a mono hangok.) A Flash azonban képes importálni 8- vagy 16-bites hangokat 11 kHz-en, 22 kHzen, vagy 44 kHz-en is. A szimbólumokhoz hasonlóan, hang file-okból is elég egy másolat,

ahhoz, hogy az animációnkban többféle módon felhasználhassuk a hangot. 38 4. Flash segítségével készíthető animációk A Flash legerősebb oldala az animációk készítése, a program nagyon jól használja ki a számítógép által nyújtott segítségeket, például az animációk két végpontja közti átmeneti képkockák kiszámításakor. Ugyanakkor a Flash tartalmazza a hagyományos, régi típusú képről képre történő animáció készítés lehetőségét is. Segítségével nagyon könnyen lehet mozgatni, akár előre definiált pályán is a különböző objektumokat. Egyszerűen és látványosan lehet méretét, vagy alakját változtatni az animált képsorok alkalmazásával. 4.1 Az animáció készítés alapjai Bármelyik rajzolóprogrammal lehet grafikákat készíteni, de azok nem tudják mozgatni õket. A Flash tartalmazza a hagyományos animációs lehetõségeket, mint például a Frame-By-Frame Animation (képrõl képre animációt).

Itt minden képkockát a felhasználónak kell megrajzolnia, és ezek egymás utáni gyors lejátszásával érhetõ el a mozgás folyamata. A másik lehetõség az úgynevezett Tweening. Ebben az esetben csak a kiinduló és befejezõ képkockát kell megadni, a köztük lévõ átmenetet a program számolja ki. 4.11 A képkockák jellemzői Minden egyes képkocka az idõsávon az idõ egy bizonyos pillanatát jelöli, ez általában 1/24 másodperc, az animáció sebességétõl függõen. Az animáció képkockái az idősávon megfelelő sorrendben követik egymást. Ez teszi lehetővé a gyors és pontos tájékozódást a képkockák között. Szerkesztés közben az animációt bármikor megnézhetjük, leellenőrizhetjük és ha hibát találunk benne, az adott helyen leállítva újraszerkeszthetjük. Három fajta képkocka van: Key (kulcs), Empty (üres), Tweened (animált). A kulcs képkocka olyan pontot jelöl az animációban, ahol változás történik, ez 39 lehet

méret, szín, vagy mozgásváltozás. Jelölheti még a Tweening-nél a kiinduló és a befejező képkockákat, melyek szintén kulcs képkockák. Az üres képkocka nem tartalmaz vizuális információt, vagyis nem történik változás az animációban, így ez alatt, az elõzõ kulcs képkocka tartalma látható. A Tweening-et tartalmazó képkockák a kiinduló és a befejezõ képkockákból vannak kiszámolva, az animáció átmeneti képkockái találhatóak meg itt. Az animáció sebességét a Modify menü Movie pontjában állíthatjuk a Frame Rate megadásával. Például, ha ez 10 fps-ra (képkocka/másodperc) van állítva és az animáció 100 képkockát tartalmaz, akkor 10 másodpercig tart majd a lejátszása. Az idõsáv minden egyes pontjában hozzáadhatunk képkockát az animációhoz. A képkockák hozzáadása megnöveli a lejátszás idejét Minden egyes új képkocka elõször üres képkockaként jelenik meg, majd elhelyezkedésétől

függően a program besorolja a képkockák közé, de akár mi is szerkeszthetjük, vagy megadhatjuk állapotát. Képkockák létrehozása: 1. Hozzunk létre egy új animációt Ez mindig egy üres képkockával jelenik meg (kis, üres kör a téglalapban). A képkocka utáni fekete vonal jelzi, hogy ezzel az első kockával véget is ér az animáció. 2. Ha a rajzeszközök segítségével valamit rajzolunk a vászonra, akkor a program lecseréli az üres kört egy kitöltöttre, jelezvén, hogy a képkocka vizuális elemeket tartalmaz. 3. Kattintsunk a jobb egérgombbal az idősávon hátrébb bármely képkockára és a legördülő menüből válasszuk az Insert frame-et vagy nyomjuk meg az F5 gombot (képkocka beszúrás). Most az animáció végét jelző fekete vonal az általunk kijelölt képkocka után van és kettőtől egészen az utolsó képkockáig üresek lesznek, azaz az első képkocka tartalmát jelenítik meg. 4. A bal egérgomb lenyomva tartása mellett húzzuk

végig a navigációs mutatót, azaz az aktuális képkocka jelzőt az első képkockától az utolsóig. 40 Mivel a 2. kockától csak üres képkockák vannak így azok lejátszása alatt is az első képkockán lévő rajz látszik. A navigációs mutatót, jelzi, hogy éppen melyik az aktuális képkocka a lejátszás során az animációban. Ahogy az animáció lejátszása egyre előbbre tart, úgy halad az is előre. Az animációban bárhol állunk, a már meglévő üres képkockákat bármikor átalakíthatjuk kulcs képkockává. Kulcs képkocka hozzáadása az animációhoz: 1. Mivel Az előbb létrehozott animációban jelöljük ki tetszőlegesen bármelyik képkockát az első és az utolsó között. 2. A jobb egérgomb megnyomásával hívjuk elő a menüt és válasszuk az Insert Keyframe (kulcs képkocka beszúrása) menüpontot vagy nyomjuk meg az F6 gombot. Ezzel nem tettünk be újabb képkockát, csak az állapotát változtattuk meg. Érdemes megfigyelni,

hogy az új kulcs képkocka előtt keletkezett egy fekete vonal mely az előző hatásának végét jelöli. 3. Ha az aktuális képkocka jelző az új kulcs képkockán áll, akkor jelöljük ki a rajzunkat és mozgassuk el. 4. Most mozgassuk a képkocka mutatót a kulcs képkocka körül, előre és hátra. elmozgattuk a rajzot, így most egy ugrás figyelhető meg az animációban. Abban az esetben, ha egy sok képkockát tartalmazó animációt szerkesztünk, előfordulhat, hogy az aktuális képkocka mutató eltolja az idősáv latható részét a képernyőn, ebben az esetben az idősáv állapotjelzőjének első ablakában láthatjuk, hogy melyik képkockán áll a mutató. 41 4.12 Az animáció sebességének beállítása Nem minden mozgásnak ugyanakkora a sebessége. Nagyon fontos része a természethű animációnak a gyorsítás és a lassítás. Ezek beállításához válasszuk a Tweening menüt. Majd az Easing-nél a mutatót húzzuk az In felé gyorsítás

esetén, illetve az Out felé lassítás esetén. 14. ÁBRA AZ ANIMÁCIÓ SEBESSÉGÉNEK BEÁLLÍTÁSA 4.2 Animáció képkockáról képkockára Ez az eljárás még a rajzfilmkészítés eső napjaira nyúlik vissza. Ekkor még minden egyes képkockát külön megrajzoltak, és az ezeken lévő apró változások eredményezték lejátszáskor a mozgás látszatát. A Flash-ban ezt Frame-By-Frame Animation (képrõl képre animációnak) nevezzük. Ha ilyen technikát szeretnénk alkalmazni a Flash-ben akkor minden egyes képkocka, amin változás van kulcs képkockaként fog megjelenni. Tehát első lépésként készíteni kell egy kulcs képkockákból álló folyamatot, mely 42 tartalmazza a mozgatni kívánt elemeket. Ezután képkockáról képkockára el kell elkészíteni a rajzokat, valamint azokon a kívánt változtatásokat. 15. ÁBRA FRAME-BY-FRAME KÉPKOCKÁK AZ IDŐSÁVON Frame-By-Frame Animation (képrõl képre animáció) készítése: 1. Nyissunk meg egy

új animációs munkaterületet Egérrel jelöljünk ki egy réteg nevet, ez lesz az aktuális réteg. Válasszuk ki azt a képkockát ahonnan az animációt kezdeni szeretnénk. 2. Ha az a képkocka még nem kulcs képkocka, akkor válasszuk az Insert>Keyframe-t, (F6) hogy kulcs képkockát kapjunk. 3. Készítsük el a képet az első képkockára Ehhez használhatjuk az eszköztárat, beszúrhatunk grafikát a képernyőről, vagy importálhatunk egy file-t. 4. Válasszuk ki jobbra ugyanabban a sorban a következő képkockát, és válasszuk újból az Insert>Keyframe-t. Ezáltal egy új kulcs képkockát kaptunk, melynek tartalma megegyezik az előző kulcs képkockával. 5. A munkaterületen változtassuk meg ennek a képkockának a tartalmát, hogy megkapjuk az animáció következő lépését. 6. Ismételjük meg a 4-es és 5-ös lépéseket, amíg el nem érjük a kívánt animációt. 7. Az animáció teszteléséhez üssük le az Enter gombot, vagy válasszuk a

Control>Play-t vagy a Play gombot a videó vezérlőn. 4.21 Onion Skinning Néha nagyon nehéz eldönteni, milyen nagyságrendû elmozdulás számít még megengedhetõnek egy animáció rajzolásánál. Az egyenletes, sima, folyamatos animáció elkészítése nem mindig könnyû. Ennek segítségére alkalmazható az 43 Onion Skinning eljárás, mely az egymás után következõ képkockákat teszi láthatóvá egyszerre, így szemléltetve a köztük lévõ elmozdulás mértékét. Ezt a lehetõséget úgy tudjuk használni, hogy az idõsáv alatti állapotsoron az Onion Skinning gombot benyomjuk és az idõsáv fejlécében megjelenõ két kis háromszöget arra a tartományra állítjuk be amelyet vizsgálni szeretnénk. 16. ÁBRA ONION SKINNING HASZNÁLATA 4.22 Az animáció filmszalagként való nézete Amikor képkockáról képkockára (Frame-By-Frame) technikával készítünk animációt, lehet, hogy az alap idősáv beállítás helyett, inkább egy vizuálisan

jobban átlátható beállítást szeretnénk látni. Erre többfajta lehetőség is van a Flash-ben. Bár lehet, hogy időigényes így nézni az idősávot, de például nagyon előnyös, ha egy vizuálisan jól megkülönböztethető képkockát keresünk. 44 Frame View Button (képkocka módosító gomb) használatával, illetve a legördülő menü segítségével a fejléc beosztását tudjuk módosítani. Beállíthatjuk, hogy egy képkocka mekkora legyen, mind a szélességét, mind a magasságát tetszésünk szerint alakíthatjuk. A képernyőn egyszerre látható kockák számán kívül megadhatjuk még, hogy a program beszínezze-e a képkockákat az animáció típusának megfelelően. Ha a képkocka módosító gomb (jobb oldalt) lenyomásának hatására legördülő menüből kiválasztjuk a Preview pontot, akkor a képkockán látható képet pontosan beleméretezi az idősávon latható kis négyszögbe a program. Ha viszont a Preview in Context pontot

választjuk, akkor a kép az egész képkockához viszonyítva lesz látható. 17. ÁBRA A RÉTEGMÓDOSÍTÓ GOMB LEGÖRDÜLÕ MENÜJE 4.3 Animáció készítés Motion Tweening segítségével Az előző eljárásnál minden egyes képkockánál nekünk kellett elkészítenünk a módosításokat. Az animáció készítésnek azonban létezik egyszerűbb módja is, ezt az eljárást nevezik Tweening-nek. Itt csak a kezdő és a befejező állapotot kell megadnunk a többi munkát leveszi a vállunkról a program. Az így készült 45 animációkat sokkal könnyebb módosítani, mert nem kell az összes képkockán újra végigmenni, elég csak a kezdő és a befejező képkockákat módosítani. A Flash-el készíthető Tweening animációk egyik lehetősége a Motion Tweening (mozgásváltoztatás), amikor is az idősáv egy kockájában definiáljuk egy csoport, vagy szimbólum tulajdonságait (pl.: pozíció, méret, elfordulás), majd pedig egy másik képkockában

megváltoztatjuk ezeket a tulajdonságokat, a program pedig a számítógép segítségével kiszámolja a közbülső képkockák változásait. 18. ÁBRA MOTION TWEENING KÉPKOCKÁK AZ IDŐSÁVON Készítése: 1. Válasszunk ki egy üres kulcs képkockát Rajzoljunk a munkaterületre egy tárgyat, vagy válasszunk egy szimbólumot a Library ablakból. 2. Válasszuk az Insert menüpontot, vagy klikkeljük az egér jobb gombjával a képkockára, majd ezután válasszuk a Create Motion Tweent-t. Ha úgy rajzoltuk a tárgyat, akkor a Flash automatikusan szimbólummá konvertálja azt. 3. Az Insert>Frame, vagy az F5 kiválasztásával szúrjunk be képkockákat az idősávban, addig amíg az animációnk tartani fog. 4. Mozgassuk el a munkaterületen lévő tárgyat vagy szimbólumot a célpozícióba. Ekkor az utolsó képkocka automatikusan kulcskép kockává válik. 5. A Tweening változtatások beállításához, klikkeljünk duplán az utolsó kulcs képkockára. Ekkor

megjelenik a Fram Properties menü, az itt megjelenő 46 ablakban beállíthatjuk a méretezést, az elforgatást, változtathatjuk az animáció sebességét, stb. 6. A szimbólum színeinek módosításához, kattintsunk duplán a szimbólumra, és akkor állíthatjuk be a színeket, vagy tehetjük áttetszővé, vagy átlátszóvá a szimbólumot. Ahányszor módosítjuk a szimbólumot, a Flash automatikusan új kulcs képkockát rendel hozzá. 4.4 Animáció készítés Shape Tweening segítségével A másik lehetőség a Shape Tweening (alakváltoztatás). Ebben az esetben az idősáv egyik képkockájában rajzolunk egy alakzatot, majd egy másik képkockában megváltoztatjuk ezt az alakzatot, vagy újat rajzolunk. A Flash a közbeeső képkockákra megszerkeszti az alakváltozást, létrehozva ezzel az animációt. 19. ÁBRA SHAPE TWEENING KÉPKOCKÁK AZ IDŐSÁVON Készítése: 1. Válasszunk ki egy üres kulcs képkockát Rajzoljunk a munkaterületre egy tárgyat,

vagy válasszunk egy szimbólumot a Library ablakból. 2. Az első kulcs képkocka után rögtön a második képkockára hozzunk létre egy újabb kulcs képkockát. Ekkor a második képkocka tartalma meg fog egyezni az elsőével. 3. Ezen a második képkockán változtassuk meg a kép vagy az objektum alakját, színét, méretét vagy pozícióját stb. 4. Majd jelöljük ki mind a két kulcs képkockát és válasszuk a Window menüponton belül a Panels>Frame menüpontot, itt a Tweening opciónál 47 jelöljük meg a Shape pontot. A program ezzel automatikusan megcsinálta az alakváltoztatást. Ha úgy rajzoltuk a tárgyat, akkor a Flash automatikusan szimbólummá konvertálja azt. 5. Az animációnk ekkor két képkockából áll, így a két kulcs képkocka közti animációból semmi sem látszik. A teendőnk nagyon egyszerű, az egérrel meg kell fognunk a második kulcs képkockát és az idősávon el kell húznunk addig, amíg megfelelő hosszúságú

animációt nem kapunk. 6. A Tweening változtatások beállításához, klikkeljünk duplán az utolsó kulcs képkockára. Ekkor megjelenik a Fram Properties menü, az itt megjelenő ablakban beállíthatjuk a méretezést, az elforgatást, változtathatjuk az animáció sebességét, stb. 7. A szimbólum színeinek módosításához, kattintsunk duplán a szimbólumra, és akkor állíthatjuk be a színeket, vagy tehetjük áttetszővé, vagy átlátszóvá a szimbólumot. Ahányszor módosítjuk a szimbólumot, a Flash automatikusan új kulcs képkockát rendel hozzá. 4.41 Shape Hints (objektumazonosító pontok) Az objektumazonosító pontokat akkor használjuk, ha komplex, bonyolult objektumoknak, rajzoknak, vagy alakzatoknak akarjuk megváltoztatni az alakját egy animációban. Az azonosító pontok segítségével meg tudjuk határozni, hogy az alakváltozás előtt és után az objektum egyes pontjai hol helyezkedjenek el. Az azonosító pontokat a Flash az abc kis

betűivel látja el a létrehozás sorrendjében (összesen 26 azonosító pontot használhatunk fel), így tudjuk azonosítani és beállítani a tárgy azonosító pontjait az animáció első és utolsó képkockáján. A Flash az azonosító pontokat a létrehozásnál piros színnel jelöli, ez azt jelenti, hogy nincsenek a megfelelő helyen a pontok. Ha a megfelelő helyre tesszük az azonosító pontokat, akkor az első kulcs képkockán sárga, az utolsó kulcs képkockán zöld színűvé válnak a pontok. 48 20. ÁBRA A SHAPE HINTS VÁZLATA Shape Hints (objektumazonosító pontok) használata: 1. Jelöljük ki az első kulcs képkockát a Shape Tweening (alakváltoztatásos) animációnkban. 2. Válasszuk a Modify>Transform>Add Shape Hint menüpontot Ekkor az első kulcs képkockán valahol az objektumon egy kis piros kör fog megjelenni, amit a Flash automatikusan kis “a” betűvel fog jelölni. 3. Mozgassuk ezt a pontot arra a helyre, amit meg akarunk

jelölni Az objektumnak ez a része fog mozogni az animáció során az utolsó képkockában megadott helyre 4. Válasszuk ki az utolsó kulcs képkockát Itt egy kis zöld kör benne “a” betűvel fogja jelölni az első azonosító pontunkat. 49 5. Mozgassuk ezt a pontot oda, ahova azt megjelölt pontot szeretnénk elmozogatni. 6. Ismételjük a 2-es ponttól az 5-ös pontig a lépéseket addig, ameddig a kívánt eredmény el nem érjük. Ekkor a Flash a következő pontokat automatikusan az abc további betűivel fogja ellátni a létrehozás sorrendjében. 4.5 Animáció előre megadott pálya mentén A Flash egyik leglátványosabb szolgáltatása az elõre definiált pálya mentén történõ mozgatás. Ezt az eljárást egy speciális réteg segítségével érhetjük el, melynek neve Motion Guide Layer. Ez a réteg semmi mást nem tartalmaz csak a megrajzolt útvonalat, melyet az objektumnak követnie kell. Ezt a réteget mindig csak egy másik réteghez

kapcsolódóan lehet létrehozni, és csak a hozzá kapcsolódó rétegen lévõ objektumok használhatják. 21. ÁBRA ANIMÁCIÓ ELŐRE MEGADOTT PÁLYA MENTÉN Útvonal megadása: Hozzunk létre egy új Tweened animációt. Válasszuk az Insert>Motion Guide-ot. A Flash a kiválasztott réteg felett létrehoz egy új réteget, melyet a réteg nevétől balra helyezkedő Motion Guide ikon jelöl. 50 A ceruza, vonal, kör, téglalap, vagy az ecset eszközök használatával rajzoljuk meg a mozgás pályáját. Ha kijelöljük a réteg tulajdonságok ablakban a Snap To Guide pontot, akkor a csoport, vagy szimbólum a kapcsolódási pontjával automatikusan a pályához csatlakozik. Az első képkockánál állítsuk a szimbólumot a pálya elejére, az utolsó képkockánál pedig a pálya végére. Hogy elrejtsük a pályát jelölő vonalat, és az animáció lejátszásakor csak a tárgy mozgása legyen látható, a Motion Guide rétegben jelöljük ki az Eye (szem)

oszlopát, amely elrejti az adott réteget. A csoport, vagy szimbólum az animáció lejátszásakor követni fogja a mozgási pályát. 51 5. Példa animáció készítése, jellemzése Ebben a fejezetben az általam készített Flash programot fogom bemutatni, mely három fő szerkezeti egységre tagolódik. Ezek a szerkesztésnek megfelelő fázisok, az első a Preloader (előtöltő), a második maga a bevezető animáció, a harmadik pedig egy menüt tartalmaz, amin keresztül bepillantást nyerhetünk a Flash által készíthető különböző kezelőfelületek és interaktív alkalmazások világába. A példa animációm a lemez-mellékleten található. A kiterjesztés swf és exe formátumban is megtalálható, az swf file futtatásához Internet Explorer 4.0 , vagy Netscape Navigator 4.5 verzióra telepített – a wwwmacromediacom –ról ingyenesen letölthetõ Shockwave plugin szükséges. Az exe file bármely gépen futtatható, ugyanis már tartalmazza a

futtatókörnyezetet is, ha nem elérhető Shockwave plugin érdemes ezt futtatni, nincs különbség köztük. 5.1 A Preload (előtöltés) Az előtöltés (Pre-Loading) lényege: Egy méretesebb flash-t egyelőre elég nehéz lenne úgy megcsinálni, hogy letöltés közben folyamatos legyen az animáció. Ennek fő oka az átviteli sebesség Az áthidaló megoldás az, hogy megvárjuk amíg az egész animáció letöltődik és csak akkor adunk utasítást az indítására. A várakozás ideje alatt általában egy ötletes ismétlődő animáció látható. A következőkben a lehető legegyszerűbb Preloading megoldást fogom bemutatni egy konkrét példán keresztül. Az általam készített Preloading is ezeknek az alapvető követelményeknek felel meg, erre alapozva bárki látványos és ötletes előtöltőt készíthet. Preloading készítése: • File>New, csináljunk 3 layert: szöveg, animáció, ellenőrzés • szöveg layer: 1 frame: ide jöhet a szöveg pl.: a

letöltés folyamatban 52 • animáció layer: ide egy ismétlődő animációt kell készíteni, pl. mozgó nyíl Fame1: a nyíl láthatatlan (color effect: Alpha 0%), pl. Frame30: a nyíl látható A frame30-ban egy utasításra is szükség lesz (Action): Goto and Play Frame1. Ha így elindítjuk az animációt az folyamatosan ismétlődni fog • ellenőrzés layer: most jön a lényeg. Egy paranccsal érzékeljük, hogy befejeződött a teljes animáció letöltése és kezdődhet-e a lejátszás. Bárhova a Frame1 és a Frame30 között készítsünk, egy üres Keyframe-et (F7: Blank Keyframe). Kattintsunk rá kétszer, Action > If Frame Is Loaded (Ha az adott frame tartalma betöltődött akkor.) Goto and Play következő scene, vagy Frame szám. • Az If Frame Is Loaded paramétereként az animációnk legutolsó Frame-jét kell megadni. Az a legcélszerűbb, ha új Scene-t csinálunk, pl nevezzük el tartalomnak. ide csináljuk meg az flash movie-t és a legvégére

helyezzünk el egy üres Frame-et, aminek adjunk egy label nevet, pl. end Ez azért jó, mert ha bármikor változtatunk valamit a movie-ben, akkor nem kell módosítani az If Frame Is Loaded-nál a frame számot, amit ellenőriz. Ezzel el is mondtam mindent, amit tudni kell a legegyszerűbb preloading technikáról. Ettől vannak sokkal jobb, de egyben bonyolultabb módszerek is, pl a Percentloader, magyarul a pontos százalék kijelzős előtöltés. Ennél a módszernél a Set Variable "percentloader"=Int (( framesloaded/ totalframes)*100) függvény segítségével vizsgáljuk, hogy az animációnkból éppen hány frame-t töltöttünk le, majd ezen értékek segítségével készíthetünk százalékos kijelzőt. 5.2 Az animáció Itt tulajdonképpen a bemutatkozó animációmat láthatjuk, mely pár szép és látványos ötletet tartalmaz. Az animáció egy visszaszámlálással kezdődik, amit Shape Tweening-el készítettem. A számok minden kulcs fázisban

különböző 53 háttérrel rendelkeznek a hatás növelésének érdekében. A kulcs fázisok közötti animált átmenetet a program számolta ki, készítette el. A következő részben különböző szöveges, text-animációkat készítettem, ebbe tartoznak bele a szövegen megjelenő színátmenetek és a szöveg egy részén végigfutó fény effektek is. A befejező rész pedig egy régi, talán mindenki által jól ismert TV-s jelenséget próbál szimulálni. Ez a régi fekete-fehér TV-k kikapcsolásánál oly gyakran megjelenő vizuális effektet próbálja utánozni. 5.3 A menü Ebben a részben megpróbálom bemutatni a Flash széleskörű felhasználási területeit, kezdve a különböző gombokkal, az animációs lehetőségeken át, egészen a háttérzene választhatóságáig, manipulálásáig. Ezeket a példákat a baloldalon elhelyezkedő menüsor segítségével érhetjük el, a gombokon lévő felirat utal a bemutatásra kerülő példa tartalmára. Ezen

kívül, ha az egér kurzorját a gomb fölé mozgatjuk, a jobboldalon előanimálódik a témakör pontos címe úgy, hogy nem kell rákattintanunk. A gomb lenyomásával aktiválhatjuk az adott példát, mely a jobboldalon fog megjelenni. A menüpontok: 1. Ha ezt a gombot aktiváljuk, megnézhetjük újra a bevezető animációt 2. Ez a pont a Flash által készíthető gombok három alapállapotát tartalmazza, melyeket röviden ki is fejtettem, ezeket a jobboldalon elhelyezkedő példa gombbal lehet kezelni. 3. Itt az előzővel felépítésében teljesen azonos gomb található, annyi különbséggel, hogy a statikus képek cseréje helyett ez a gomb animálódik a állapotok között. 4. Ez a gomb már komolyabb munkát igényelt, egyrészt a három dimenziós hatást keltő kinézete, másrészt az animált átmenetek elkészítése miatt. 54 5. Ez a menüpont egy a valós környezetben is előforduló effektet tartalmaz A különböző optikai lencsék fénytörését

modellezi le a Lens Flare effekt. Gyakran láthatunk ilyet a TV-ben, mikor a nap megtörik a kamera lencséin. 6. Ez a pont magáért beszél, a program alatti háttérzenét manipulálhatjuk Ha a háromféle zene közül választottunk, beállíthatjuk a számunkra legmegfelelőbb hangerősséget, vagy akár ki is kapcsolhatjuk a háttérzenét teljesen. 55 6. Összefoglalás A Macromedia Flash 5.0-ás verziója új mérföldkõ a web-es grafika fejlődésében, különleges képességeket nyújt a különböző grafikák készítéséhez, a munkafolyamatok pedig kibővíthetőek az ActionScript felhasználásával készíthető interaktív munkákkal. Záró dolgozatomban én az animáció készítés témakörét jártam körül, de a Flash nemcsak a legjobb webes animációs megoldás, hanem egyben a multimédiás és interaktív programok fejlesztésre is talán a legjobb megoldásokat nyújtja. Nagyon sok kitűnő lehetőséget foglal magában, kezdve az egyszerû

rajzolástól, a bonyolult, interaktív programok készítéséig. A Flash legnagyobb előnye, hogy a többi programhoz képest sokkal többet nyújt, weboldal interaktívvá válik, a benne lévő objektumok (képek, szövegek, gombok) mozoghatnak, foroghatnak, átszíneződhetnek, változhat a méretük, és mindez különböző eseményekhez köthető (például az egér mozgatása, lenyomott billentyű, eltelt idő stb.) Az egyik legérdekesebb dolog, amit egy számítógéppel lehet csinálni, valami olyan dolog készítése ami kommunikál a felhasználóval. A mûvészet egyik legalapvetõbb tulajdonsága, hogy megpróbál valamiféle hatást gyakorolni az emberekre. S ami különösen lényeges: a kész Flash anyag kisméretű, a legmegfelelőbb az Internetes animációk, programok készítéséhez. Az anyagunkhoz hangokat csatolhatunk, ezeket időzíthetjük, vagy feltételhez köthetjük (például csak akkor szóljanak, ha valaki megnyomja az egyik gombot). A hangokat a

Flash MP3 formátumban tárolja, így ez szintén a lehető legkisebb helyet igényeli. A Flash-t azoknak ajánlom, akik egy könnyen és gyorsan tanulható webes grafikai programot szeretnének megismerni. Segítségével mindenki egyszerűen, saját kedve szerint formálhatja honlapját, de ha érez egy kis elhivatottságot, akár komolyabb multimédiás programokat is készíthet vele. 56 7. Ábrajegyzék 1. ÁBRA VEKTORGRAFIKUS KÉP 9 2. ÁBRA BITTÉRKÉPES KÉP 10 3. ÁBRA KEZELŐI FELÜLET 19 4. ÁBRA TIMELINE (IDŐSÁV) 20 5. ÁBRA CONTROLLER (VIDEÓ VEZÉRLŐ) 23 6. ÁBRA ZOOM MENU 23 7. ÁBRA TOOLBAR (ESZKÖZTÁR) 24 8. ÁBRA A SZÍN ABLAK SOLID ÁLLAPOTA 25 9. ÁBRA A LIBRARY ABLAK 26 10. ÁBRA AZ ESZKÖZTÁR ESZKÖZEI 28 11. ÁBRA FLASH-BE IMPORTÁLHATÓ FILE TÍPUSOK 34 12. ÁBRA QUICKTIME FELINSTALLÁLÁSA UTÁN IMPORTÁLHATÓ FILE TÍPUSOK 35 13. ÁBRA HANGOK A LIBRARY ABLAKBAN 37 14. ÁBRA AZ ANIMÁCIÓ SEBESSÉGÉNEK BEÁLLÍTÁSA 42 15. ÁBRA

FRAME-BY-FRAME KÉPKOCKÁK AZ IDŐSÁVON 43 16. ÁBRA ONION SKINNING HASZNÁLATA 44 17. ÁBRA A RÉTEGMÓDOSÍTÓ GOMB LEGÖRDÜLÕ MENÜJE 45 18. ÁBRA MOTION TWEENING KÉPKOCKÁK AZ IDŐSÁVON 46 19. ÁBRA SHAPE TWEENING KÉPKOCKÁK AZ IDŐSÁVON 47 20. ÁBRA A SHAPE HINTS VÁZLATA 49 21. ÁBRA ANIMÁCIÓ ELŐRE MEGADOTT PÁLYA MENTÉN 50 57