Bevezető:

Ebben a leckében a Macromedia Flash szerkesztőprogram szerkezeti felépítésével és az alapfogalmakkal fogunk megismerkedni. A különböző szerkesztőeszközök elhelyezkedését tekintjük át részletesen. Gyakorlati példákon keresztül tanulhatjuk meg az új dokumentum létrehozását, beállítását és a különböző panelek szerepét. Megismerünk néhány szerkesztőpanelt is, amelyek információkat nyújtanak, vagy szerkesztési lehetőségeket tartalmaznak. Megismerkedünk a jelenetek, szintek, rétegek és frame-ek szerepével is, amikből az egész mozi és a benne lévő animációk, elemek felépülnek. A flash library szerepét is megtanulhatjuk és még egy egyszerű animációt is elkészítünk.

A leckéhez tartozó fla források letölthetőek INNEN.

Az oktatás anyaga Flash MX verziótól felfelé minden flash szerkesztőn alkalmazható, hiszen az interface csak bővült, de különösebben nem változott. Az oktatásban szereplő példaprogramok megtekintéséhez Flash 8 player, vagy magasabb verzió szükséges. Aki még nem rendelkezik ezzel a verzióval, az letöltheti a lenti linkre kattintva.

[ Flash Player ].

Az Adobe/Macromedia oldaláról letölthető a flash mozik készítésére használt szerkesztő környezet, ami 30 napig korlátlanul működik.

[ Adobe Flash Szerkesztő ]

[ Macromedia Flash 8 szerkeszto ]

Flash szerkesztő szerkezete:

A flash szerkesztő elindítását követően látható lesz a szerkesztő alapértelmezett felépítése és a kezelőfelületek elhelyezkedése. A 11. ábrán látható a szerkesztő teljes képe: minden fő kezelői csoportot és részt más színnel kereteztünk be. Nézzük meg ezeket sorban.

1. Ábra: Flash szerkesztő

A szerkesztő első fő eleme a főmenü, ami a szerkesztő tetején helyezkedik el, a 11. ábrán piros kerettel jelölve. Ebből a főmenüből minden opciót, panelt és menüpontot el tudunk érni, amivel a flash szerkesztő rendelkezik. Sok opciónak van gyorsbillentyű parancsa, vagy elérhető panelekről, de a főmenüben kivétel nélkül mindent megtalálunk.

A következő a szerkesztő (Tools) panel, ami a képen zöld kerettel van jelölve. A szerkesztő panelen található minden olyan eszköz, amire a mozi elemeinek elkészítésekor és szerkesztésekor szükségünk lehet. A panel elemeinek részletes megismerése a második leckében lesz.

A harmadik fő rész az idősík (Timeline) - a képen narancssárga keret jelöli -, ahol a mozi animációinak folyamatát lehet nyomon követni. Minden szintnek saját idősíkja van, ezekről lejjebb fogunk beszélni. Az idősík frame-ekből épül fel és a mozi annyi frame-et jelenít meg másodpercenként, amennyit beállítottunk a mozi tulajdonságaiban (fps).

A negyedik fő rész a munkaasztal (Stage), ezt a képen lila kerettel jelöltük. A munkaasztalon belül látható fehér rész a színpad, ebben fog szerepelni minden összetevő, amit a mozi megjelenít. Ennek mérete és háttérszíne olyan, amilyet a mozi tulajdonságaiban megadtunk. Azok az elemek, amik a színpadon kívül szerepelnek, nem jelennek meg a moziban.

Az ötödik fő rész az alsó panelek csoportja, ezt kék kerettel jelöltük. Ebben alapértelmezésként a tulajdonságok és az action paletta szerepel. Később megláthatjuk, hogy hogyan lehet a panelek számát növelni, csökkenteni és tetszőlegesen testre szabni.

A hatodik és egyben utolsó fő csoport a jobb oldali panelek csoportja, ezt barna kerettel jelöltük a képen. Alapértelmezésben a színkeverő paletta, a könyvtár és az align panel jelenik meg rajta. A lenti panelcsoporthoz hasonlóan ez is módosítható és később megnézzük azt is, hogy hogyan.

Panelek megnyitása, mozgatása:

A szerkesztőben szereplő alapértelmezett paneleken kívül még sok más vezérlő és szerkesztő panelt lehet alkalmazni a munka során. Ezeket a paneleket azonban a használathoz meg kell nyitni. A panelek alkalmazásáról érdemes annyit tudni, hogy a szerkesztőfelületen csak azokat a paneleket szerepeltessük, amelyeket minden alkalommal rendszeresen használunk is. A felesleges, vagy ritkán használt paneleket szükségtelen a munkaasztal körül gyűjtögetni. Egy új panel megnyitásához válasszuk a főmenü Window menüpontját és a legördülő menüben kattintsunk a kívánt panel nevére. Ebben a főmenü pontban minden panelt meg tudunk nyitni, ami a szerkesztőben szerepel. Látható a képen, hogy azok a panelek, amik meg vannak nyitva, a menün belül ki vannak pipálva: így jelöli a program, hogy az adott panel már aktív. A képen látható még az is, hogy az egyes panelek megnyitásához billentyűkombinációkat rendeltek, amik segítségével könnyen és gyorsan lehet az adott panelt megnyitni a munka menete közben. Ezek a billentyűkombinációk szabadon módosíthatóak a főmenü Edit / Keyboard Shortcuts menüpont használatával, ha valaki esetleg saját, egyedi kombinációkat szeretne alkalmazni. Miután kiválasztottunk egy új ablakot és megnyitottuk, az ablak meg fog jelenni a szerkesztő területén, de nem pozícionálódik automatikusan. A panel használható úgy is, hogy nem helyezzük el panelcsoportban, hanem csak úgy szabadon lóg a szerkesztőben valahol, de a jobb átláthatóság kedvéért érdemesebb elhelyezni valamelyik csoportban.

A második ábra videó bemutatóiban látható, hogy hogyan kell a paneleket mozgatni, csoportokba helyezni, megnyitni, vagy eltávolítani a csoportból. A panel a megnyitás után a szerkesztőben szabadon van, tehát ahhoz, hogy a számunkra megfelelő helyre tudjuk tenni, mozgatnunk kell. A panel mozgatásához az egér mutatóval kattintsunk a panel felső fejlécére, majd az egér gombot nyomva tartva mozgassuk a panelt a megfelelő pozícióba.

Ha a panelt el akarjuk helyezni az alsó vagy az oldalsó panelcsoportban, akkor az egérmutatóval kattintsunk a panel fejlécének bal szélén látható halvány rovátkákra. A rovátkákat a harmadik ábrán bejelöltük egy piros kerettel. Az egérgombot nyomva tartva mozgassuk a panelt az alsó vagy az oldalsó panelcsoportra. Fekete keret fogja jelölni az éppen aktuális helyeket, ahol el lehet helyezni a panelt. Ha az egérgombot fölengedjük, akkor a panel arra a helyre ugrik, amit kiválasztottunk.

2. Ábra: Panelmozgató pont

Ha a panelt szeretnénk bezárni, vagy kinyitni a panelcsoporton belül, akkor egyszerűen kattintsunk a panel nevére a fejlécen, vagy mellé bárhová a fejléc területén. Ha a panelre már nincs szükségünk, akkor a panel fejlécén kattintsunk egyet a jobb egérgombbal és a megjelenő menüben válasszuk a Close panel group menüpontot, ami eltávolítja az adott panelt. Ha a panelt szeretnénk áthelyezni egy másik csoportra, akkor a csoportra helyezésnél megismert rovátkákat fogjuk meg és mozgassuk el a panelt a megfelelő helyre.

3. Ábra: Panelek kezelése

A panelek elrendezését és alkalmazását a szerkesztőn belül mindenki saját belátása és megszokása szerint rendezheti el, nincsenek kikötések, vagy optimális javaslatok ezen a téren. Az egyetlen javaslat az, amit már fentebb is leírtunk, hogy felesleges és nem használt paneleket ne tartsunk a munkaasztal körül.

Panelek bemutatása:

Nézzünk meg sorban néhány panelt azok közül, amiket a leggyakrabban fogunk használni a munkák során. A panelek pontos használatával a leckék során ismerkedünk meg.

• Timeline (idősík) panel: Ezen a panelen lehet szerkeszteni a moziban szereplő animációkat. Az idősík frame-ekből áll, amikre az objektumok, animációk kerülnek. Lehetőségünk van új rétegek létrehozására, frame-ek kezelésére és a rétegeket akár könyvtárakba is rendezhetjük.

  4. Ábra: Timeline (idősík) panel

• Tools panel: Ezt a panelt láthattuk a szerkesztő szerkezeti felépítésének bemutatásakor. Alapértelmezésként a szerkesztő bal oldalán helyezkedik el. Ezzel a panellel lehet elvégezni minden grafikai műveletet és szerkesztést, amire szükségünk lehet a flash mozi elkészítésekor.

• Library panel: Ez a panel jeleníti meg a mozi könyvtárát. Benne lesz minden objektum, amit a moziban használunk: movie clippek, gombok, videók, zenék, grafikák. Itt lehet beállítani egyes tulajdonságaikat, típusukat módosítani, vagy szükség esetén törölni, ami nem kell.

  5. Ábra: Library panel

• Properties panel: Ezen a panelen tudjuk figyelemmel követni, megadni, vagy módosítani a kiválasztott elemek tulajdonságait. Újabb flash szerkesztők esetében a panelen található még két másik egység is, a filterek és a paraméterek.

  6. Ábra: Properties panel

• Color panel: Ezen a panelen lehet megadni az egyes vektorgrafikus objektumok színeit. Keretszíneket, kitöltéseket, színátmeneteket egyaránt. A színkeverő segítségével tetszőlegesen egyedi színkompozíciókat állíthatunk össze, vagy akár bitképekkel is kitölthetünk egy objektumot. A color panelen van még a color swatches paletta is, ahol az alapértelmezett színek mellett elmenthetjük a projecthez tartozó egyedi színösszetételeket is.

  7. Ábra: Color panel

• Align & Info & Transform panel: Ezen a panelen tudjuk megadni az egyes objektumok elhelyezkedését a színpadhoz, vagy más objektumokhoz viszonyítva. Az infó részben nézhetjük meg az objektum pozícióját, méretét és színadatait. A méret és a pozíció itt is módosítható. A transform részben az objektum módosítható, torzítható értékeit nézhetjük meg és adhatjuk meg számszerűen. Ez az opció a tools panelen is elérhető.

  8. Ábra: Align & Info & Transform panel

• Actions panel: Ez a panel tartalmazza a flash saját beépített actionscript szerkesztő környezetét. Itt lehet script utasításokat megadni, amivel majd a mozikat vezéreljük, de ma már akár egyetlen frame-en több ezer soros programokat is írhatunk flash-ben.

  9. Ábra: Actions panel

• Movie explorer panel: Ezen a panelen követhetjük figyelemmel, hogy milyen objektumok szerepelnek a színpadon, melyik hol helyezkedik el és a vezérlő scriptek is itt követhetőek nyomon. Ki-be kapcsolhatjuk, hogy milyen elemeket akarunk megjeleníteni a listában és keresési lehetőség is van, ami összetettebb projectek esetében nagyon hasznos.

  10. Ábra: Movie explorer panel

• Scene panel: Ezen a panelen lehet beállítani az aktuális jelenet nevét. Egy mozi állhat több egymást követő jelenetből is, így lehetőség van a panelen a jelenetek létrehozására és törlésére is.

  11. Ábra: Scene panel

• History panel: Ezen a panelen lehet figyelemmel követni, hogy a szerkesztési folyamat közben milyen lépéseket és műveleteket végeztünk el. A panel lehetővé teszi, hogy az egyes műveleteket megismételjük vagy visszalépjünk a folyamat egy bizonyos részére.

  12. Ábra: History panel

Ezzel meg is ismertük azokat a paneleket, amikre leginkább szükségünk lehet a munkák során. Van még néhány panel, amit meg lehet nézni, és lesz néhány olyan is, amit majd menet közben ismerünk meg részletesebben. Most nézzük meg, hogy hogyan kell új flash dokumentumot létrehozni.

Új dokumentum megnyitása:

Ahhoz, hogy bármilyen flash mozit készíteni tudjunk, először létre kell hoznunk egy új flash dokumentumot a szerkesztőben. Indítsuk el a Macromedia Flash szerkesztő programot. Az indítást követően alapértelmezésként máris megjelenik egy dokumentum, de most nem ezt használjuk, újat hozunk létre, tehát az indításnál megjelenő új dokumentumot most zárjuk be.

13. Ábra: Flash dokumentum bezárása

Az új dokumentum létrehozásához válasszuk a főmenü File / New.. menüpontját. Flash Professional esetében több különböző dokumentumtípus és sablon közül választhatunk, míg a normál flash editor esetében simán megjelenik az új dokumentum. Flash Professional esetében válasszuk a legfelső lehetőséget: Flash Document.

14. Ábra: Új Flash dokumentum kiválasztása

A legalsó dokumentumtípus alkalmazásával (Flash Project) lehetőségünk van arra, hogy egy komplett projectet állítsunk össze, így minden összetevő és a project összes része egy helyen lesz rendszerezve. Ezzel a lehetőséggel is meg fogunk ismerkedni az oktatás alatt. A többi dokumentumforma, ahogyan a nevük is mutatja, különböző alkalmazásokat hoz létre: flash diavetítés, actionscript vagy javascript fájl, stb.. A templates rész alatt előre elkészített sablonokat találhatunk méretezve, ezeket is lehet alkalmazni az új dokumentum létrehozásakor.

A dokumentumot létrehoztuk. Van még a flash dokumentumnak néhány alaptulajdonsága, amit érdemes előre beállítani: szélesség, magasság, sebesség és háttérszín. Ezt a beállítást elérhetjük a főmenü Modify / Document menüpont segítségével. Újabb flash editoroknál a properties palettáról közvetlenül is el lehet érni ezt a panelt: ha a színpadra kattintunk mindkét elérés látható a lenti képen.

15. Ábra: Flash dokumentum tulajdonságainak beállítása

A megjelenő ablakban beállíthatjuk a mozi szélességét (width), magasságát (height), háttérszínét (background color), sebességét (frame rate) és a megadott méret mértékegységét (ruler units). Újabb flash szerkesztők esetében meg lehet még adni a flash mozi címét és rövid leírását is. A megadott magasság és szélesség lehet pixel, képpont, centiméter és milliméter egyaránt. A megadott sebesség mértékegysége fps, ez azt jelenti, hogy a mozi a megadott sebességnek megfelelő számú képkockát játszik le másodpercenként. A javasolt sebesség a mozi feladatától függően általában 24 és 40 fps közötti érték. A Make default gomb segítségével az éppen beállított értékeket tehetjük alapértelmezetté, ez azt jelenti, hogy a legközelebb megnyitott új flash dokumentum is ezeket a beállításokat veszi fel.

16. Ábra: Flash dokumentum tulajdonságai

Ezekkel a beállításokkal lehet tehát testre szabni az új flash dokumentumot, annak megfelelően, hogy milyen feladatot végzünk el a szerkesztés közben.

Vektoros és pixeles összetevők:

A flash mozik főleg vektoros rajzokból és pixeles képekből tevődnek össze. A vektoros rajzokat elkészíthetjük a flash szerkesztő saját eszközeivel is, amelyek minden egyes új verzióval egyre fejlettebbek lesznek. A Flash 8 megjelenésével már különleges szűrőket is hozzáadhatunk az elkészített vektoros elemekhez. Természetesen a vektoros rajzokat külső szerkesztő programok segítségével is el lehet készíteni, mint Ilustrator, Swift3D, CorelDraw stb. Majd ezeket beimportálva használhatjuk a munkák során.

A vektorgrafika kifejezés azt jeleneti, hogy az egyes képek vektorokból, azaz egyenes és görbe vonalszakaszokból és kitöltésekből épülnek fel. Ennek köszönhetően a minőség romlása nélkül tetszőleges mértékben kicsinyíthetők és nagyíthatók a grafikai elemek, vagy akár az egész kép együttesen. A kép fizikai méretét, azaz, hogy mekkora helyet foglal majd el a háttértárolón, a kép bonyolultsága és nem a mérete vagy a színösszetevőinek száma határozza meg.

A képpontokból álló képeket bitképes, pixeles, raster vagy bittérképes képeknek is nevezik. Ezeknek minden egyes képpontját el kell tárolni, aminek következtében egy nagyméretű színes kép, nagy fizikai mérettel is rendelkezik, azaz nagy helyet foglal el a számítógép merevlemezén. A bitképek minősége is állítható, tehát a minőség rovására elérhetünk optimálisan kisebb fizikai méretet, vagy lehet nagyon jó minőségű a kép, de akkor nagyobb lesz a mérete is.

A bitképek felhasználási mérete fix. Ez azt jelenti, hogy ha van például egy 300*300 pixel méretű képünk, akkor azt a képet csak ebben a méretben lehet torzulás nélkül alkalmazni. Ha a képet nagyítjuk, vagy kicsinyítjük, akkor a megjelenített kép láthatóan torzul. Ez annak köszönhető, hogy a 300*300 as képben összesen 90000 képpont, vagy pixel található és ezek mérete egy pixel széles és egy pixel magas. Ebben a méretben adják vissza az eredeti minőséget. Ha a képet nagyítjuk, akkor az egy pixel méretű képpont is nagyobb lesz, így a képpont tartalma és ezzel együtt az egész kép torzul. A lenti képen látható, hogy a vektoros kép nagyításkor nem torzul, de a bitkép igen.

17. Ábra: Vektor- és bitkép

A fentiek miatt tehát érdemes a felhasznált bitképeket előre leszerkeszteni és optimalizálni külső program segítségével, pl.: Photoshop, Fireworks, Gimp, stb. Az így elkészített és optimalizált bitképet importáljuk majd be a flash moziba és alkalmazzuk tetszőlegesen.

Jelenetek kezelése (scene):

Mint azt már megismerhettük, a mozi fő eleme a színpad, erre helyezünk el minden elemet, amit meg akarunk jeleníteni. Lehetőségünk van arra, hogy egy mozin belül több jelenetet (scene) hozzunk létre, amik vezérlés nélkül sorrendben egymás után kerülnek lejátszásra, de actionscript segítségével felállítható tetszőleges sorrend is. Több jelenet alkalmazása a flash mozin belül nem kötelező, ez teljes mértékig a fejlesztő szokásaitól függ. Vannak akik szeretik, és vannak akik soha nem használnak egynél több jelenetet. Új jelenetet létrehozni, elnevezni, vagy átnevezni és törölni a már megismert Scene panelen lehet.

Ha még nem tettük meg, akkor nyissuk meg a scene panelt. A főmenü Window / Other Panels / Scene menüpontjával, vagy a Shift+F2 billentyűkkel fog megjelenni ez a panel. Ha most megnézzük a panelt, láthatjuk, hogy jelenleg egyetlen scene, jelenet van a moziban. A jeleneteket meg lehet még nézni a timeline feletti fejlécen az Edit Scene gombra kattintva, ez látható a lenti ábrán.

18. Ábra: Edit Scene

A scene panel alsó részén három kis ikont láthatunk. Az első a duplicate scene, amivel már meglévő jelenetről készíthetünk másolatot, a benne található összes elemmel együtt. A második egy plusz jel, ezzel lehet új üres jelenetet létrehozni. A harmadik és utolsó egy kuka, amivel meglévő jelenetet törölhetünk. Ezzel együtt természetesen töröljük a jelenetben lévő elemeket is, de a példányosított elemek a könyvtárból újból elérhetőek. Kattintsunk a + jelre és hozzunk létre új jelenetet. Ekkor létrejön egy új jelenet scene néven és egy sorszámmal. Ha szeretnénk a jelenetnek saját nevet adni, akkor a panelen kattintsunk duplán a scene nevére és módosítsuk tetszőlegesen a feliratot.

19. Ábra: Scene átnevezése

Az alsó három gomb használatával gyakoroljuk a jelenetek kezelését. Hozzunk létre tetszőleges számú jelenetet, nevezzük át őket, majd töröljünk néhányat. Az oktatás során minden esetben csak egy jelenetet fogunk használni, de a bemutatott alkalmazásokat természetesen tetszőlegesen több scene alkalmazásával is el lehet készíteni. A színpadok kezelése megtekinthető a 20. ábra első bemutatójában.

20. Ábra: Színpad, réteg, frame kezelés

Rétegek kezelése:

A flash moziban minden szint rétegekből (layer) áll. A rétegek szerepe a mozikban az, hogy az egyes összetevőket tetszőlegesen egymás alá, vagy fölé tudjuk helyezni. A felsőbb rétegek tartalma el fogja takarni az alsóbb rétegek tartalmát, azaz fölötte fog elhelyezkedni. Ezen felül lehetőség van néhány speciális réteg létrehozására is, mint a maszk réteg, vagy az irányított mozgás, ezekről később a leckék során fogunk tanulni. A rétegeket a timeline panelen láthatjuk, és ott lehet létrehozni, átnevezni és törölni azokat. Alapban egy réteg lesz az új mozi fő idősíkján, ez látható a lenti képen. Az átnevezéshez kattintsunk kétszer a layer nevére. A rétegek kezelése megtekinthető még a 20. ábra második bemutatójában.

21. Ábra: Réteg átnevezése

A rétegek neve alatt van négy ikon, a fenti képen pirossal bekeretezve, ez kezeli a layereket. Az első ikon az Insert layer, ez létrehoz egy új réteget. Ezt az új réteget a fent megismert módon lehet tetszőlegesen elnevezni, ez azonban nem kötelező. A második ikon az Add motion guide, ez egy speciális réteget hoz létre, ami az irányított mozgáshoz kell majd. A harmadik ikon az Insert layer folder, ez könyvtárakat hoz létre, amiben csoportosíthatjuk az egyes szinteket. Akkor érdemes használni, ha sok réteget készítünk. A negyedik a Delete layer, ezzel lehet a meglévő rétegeket törölni. A réteg törlésekor itt is törlődik az adott rétegen lévő tartalom, de a példányosított objektumok megmaradnak a library-ban.

A kész rétegeket egymás alá vagy fölé lehet helyezni úgy, hogy megfogjuk az adott réteget a bal egérgombbal és elmozgatjuk a kívánt helyre. Van még néhány szerkesztő ikon a rétegeken, amik a réteg tartalmára vannak kihatással. A lenti képen láthatóak pirossal bekeretezve az eszközök. A működésük egyszerű. Ha a legfelső sorban a rétegek fölött kattintunk valamelyik ikonra, akkor az utasítás minden rétegre érvényesül. Ha a egy bizonyos rétegen kattintunk az ikonokkal egy sorban lévő pontokra, akkor a beállítás csak arra a rétegre érvényesül.

22. Ábra: Rétegek tartalomkezelői

A szem formájú ikon (Show/Hide All Layers) segítségével lehet megjeleníteni, vagy láthatatlanná tenni az egyes rétegek tartalmát, vagy akár az összes rétegét egyszerre. Nagyon hasznos lehet a szerkesztésekkor, ha amit éppen nem szerkesztünk, azt eltüntetjük. A lakat alakú ikon (Lock/Unlock All Layers) használatával lezárhatjuk a rétegeket. Ez azt jelenti, hogy ha egy réteg le van zárva, akkor semmilyen formában nem szerkeszthető a színpadról. Ezzel a módszerrel szerkesztés közben le tudjuk védeni a kész rétegeket, nehogy elrontsuk a kész munkákat. A négyzet alakú ikon (Show All Layers As Outlines) használatával a réteg tartalmának csak a körvonala jelenik meg. Látható még egy kis ceruza alakú jel az éppen kijelölt rétegen, ez azt jelzi, hogy a réteget kijelöltük szerkesztésre, lehet rá rajzolni.

23. Ábra: Rétegek takarása

A fenti képen látható, hogy a réteg 1 tartalma egy szürke téglalap és fölötte egy animáció van. Az animáció kitakarja a téglalapot, mert a kettes réteg az egyes fölött van. Minden szinten vannak rétegek, de ezeknek a hatása csak az adott szinten belül érvényesül. Egy szinten belül tetszőleges számú réteg hozható létre.

Frame-ek kezelése:

Fentebb megtanultuk, hogy a mozi szintekből áll, a szintek pedig rétegeket tartalmaznak. A rétegeken lesz lehetőség az animációk létrehozására és az objektumok megjelenítésére. Erre használjuk a frame-eket. A rétegen a frame-ek olyanok, mint a moziban a képkockák, folyamatosan lejátszva egy animációt, filmet kapunk. A film sebességét a már megismert frame rate tulajdonsággal szabályozhatjuk, ha pl.: 30 fps a mozi sebessége, akkor másodpercenként 30 képkockát, azaz frame-et jelenít meg a mozi. A frame-ek kezelése megtekinthető a 20. ábra harmadik bemutatójában.

Az idősíkon lévő rétegen alapban láthatóak az üres téglalapok, amik a frame-eket jelzik. Ezek meg is vannak számozva, így még könnyebb a szerkesztés folyamata. Ahhoz, hogy valamit el tudjunk helyezni egy frame-en, létre kell hozni egy kulcsframe-et (keyframe), vagy kulcskockát. Üres kulcsframe létrehozására jelöljünk ki egy frame-et és nyomjuk meg az F7 gombot, vagy jobb egérgombbal kattintsunk a frame-re és a legördülő menüben válasszuk az Insert keyframe menüpontot.

24. Ábra: Kulcsframe létrehozása

Az így létrejött üres kulcskockára ezután már tetszőlegesen tehetünk bármilyen objektumot. Az animálással később fogunk foglalkozni és akkor megismerjük azt is, hogy mikor és hol kell még kulcsframe-eket létrehozni. A frame-eknek is lehet nevet adni, a properties panelen. Jelöljük ki a kulcskockát az idősíkon, majd a properties panelen a Frame label mezőbe írjuk be a frame nevét.

25. Ábra: Kulcsframe elnevezése

Az elnevezett kulcskockában egy kis zászló jelöli, hogy a frame-nek van neve. A frame-eket lehet törölni, ha már nincs rájuk szükség, vagy esetleg többet hoztunk létre, mint amennyire szükségünk van. Jelöljük ki a törölni kívánt frame-et vagy frame-eket és kattintsunk rá a jobb egérgombbal. A megjelenő menüből válasszuk a Remove frames lehetőséget, ezzel töröljük az adott frame-et és vele együtt mindent, ami rajta van.

26. Ábra: Frame törlése

A frame-ekkel sok mást is lehet még csinálni, ezeket az animációk készítései közben meg fogjuk tanulni. Most készítsünk el egy egyszerű animációt. Az animáció hatvan frame hosszúságú lesz, motion tween alapú és három kulcskockát tartalmaz. A műveletet lépésről lépésre átnézzük. Az animációs típusokkal és lehetőségekkel egy későbbi leckében foglalkozunk, ez a példa csak a frame-ek használatának jobb megértését segíti elő.

Egy egyszerű animáció elkészítése:

A moziban szereplő animációkat az idősíkon hozzuk létre. Az animációk kulcskockákra épülnek. Az animációs típusokat egy későbbi leckében ismerjük meg. Az animáció minden esetben egy kulcskockával kezdődik és minden egyes változáskor és eseménykor kulcskockákat helyezünk el az animációban. Tehát ha pl.: egy objektum mozog a pontból b pontba, akkor az első kulcskocka a kezdés, majd a második a b pontba érkezés lesz. Ha a réteg tartalma nem változik az animáció során, akkor csak egyetlen kulcskocka kell a legelejére, de a legvégére már nem kötelező tenni, mivel maga a tartalom változatlan. Nézzünk tehát egy gyakorlati példát az egyszerű animáció készítésére.

Készítsünk egy új flash mozit, a beállításai a lenti képen láthatóak. Természetesen a beállítások tetszőlegesen módosíthatóak, de a példában mi most ezeket alkalmazzuk.

27. Ábra: Új mozi

Rajzoljunk a színpad egyetlen rétegének első frame-jére egy tetszőleges formát, például egy kitöltött kört. Ezután jelöljük ki a frame-et és kattintsunk rá a jobb egérgombbal. A legördülő menüben a lenti képen látható módon válasszuk a Create Motion Tween utasítást.

28. Ábra: Create Motion Tween

Ha ez megvan, akkor a frame enyhén el fog színeződni, ez jelzi, hogy motion tween-t készítünk. Most jelöljük ki a harmincadik frame-et és nyomjuk meg az F6 gombot, vagy kattintsunk rá a jobb egérgombbal és válasszuk az Insert Keyframe lehetőséget. Ekkor létrejön egy terület az első és a harmincadik frame között, ez az animáció motion tween folyamata és ebben egy nyíl is megjelenik a színezett háttéren, jelezve a lejátszás irányát.

29. Ábra: Insert Keyframe

Most fogjuk meg a kört az egér bal gombjával és helyezzük át a színpad másik végébe. Eközben ügyeljünk arra, hogy végig a harmincadik frame-en maradjunk. Miután áthelyezzük a kört, a Properties panelen válasszuk ki a Color mezőt és abban jelöljük ki az Alpha tulajdonságot. A csúszó gomb segítségével állítsuk az Alpha tulajdonságot 0 %-ra. Ettől a kör elhalványul, majd eltűnik.

30. Ábra: Harmincadik frame

Ezzel elkészült az animáció első része, amiben a kör az egyik oldalról a másikra csúszik és közben elhalványul. Folytassuk az animációt. Jelöljük ki a hatvanadik frame-et és a fentiekben megtanult módon nyomjuk meg az F6-ot, vagy jobb egérgomb és Insert Keyframe. A kört vigyük vissza a kiindulási pontra, ahol az animáció kezdetén volt, majd a Properties panelen az Alpha tulajdonságát állítsuk vissza 100%-ra.

31. Ábra: Hatvanadik frame

Ezzel el is készült az animáció. Ha a szerkesztőn belül szeretnénk folyamatában megnézni az animációt, akkor nyomjuk meg az Enter gombot, vagy válasszuk a főmenü Control / Play menüpontját. Ha a lejátszóban akarjuk megnézni az animációt, akkor használjuk Ctrl + Enter billentyű kombinációt, vagy válasszuk a főmenü Controll / Test Movie menüpontját. A flash rendelkezik saját szabvány beépített lejátszóval, ami megjeleníti az éppen szerkesztett mozinkat működés közben és kijelzi az esetleges hibákat. Így nem kell minden egyes szerkesztési folyamat után publikálni az alkotást, egyszerűen és gyorsan vissza lehet játszani az egész mozit.

Az animáció készítése közben nekünk, fejlesztőknek csak annyit kellett tennünk, hogy megadjuk a flash-nek, hogy kezdetben, majd a 30., végül a 60. képkockán hol és milyen legyen a kijelölt objektum. Ezek lettek a mozi kulcskockái. A köztes képkockákat pedig, ami maga az animáció folyamata, a program magától kiszámolta. Ha mindent jól csináltunk akkor ugyanazt kell kapnunk, mint ami a lenti moziban látható.

Láthatjuk, hogy a kör a színpad egyik végétől a másikig mozog és közben elhalványul, majd vissza. Ilyen egyszerűen is lehet animációkat készíteni a flash szerkesztőben. A flash mozi mérete nagyon kicsi lesz. Tulajdonképpen készítettünk egy animációt amit megjelentethetünk, közzétehetünk az interneten és a mérete még 1 kB sincs. Természetesen a mozik mérete annál nagyobb lesz minél összetettebb, de még így is sokkal kisebb a végeredmény mérete, mint ha bármilyen más mozi formátumot alkalmaznánk a weboldalunkon.

Mentsük el a megszerkesztett mozit pelda1 néven egy tetszőleges könyvtárba a merevlemezen (Főmenü File / Save). Ha most megnézzük a könyvtárat, akkor láthatjuk, hogy a mentés hatására létrejött egy pelda1.fla fájl. Ez a flash mozink forrása. Ennek segítségével tudjuk a későbbiekben átalakítani, tovább szerkeszteni a mozi tartalmát. Most publikáljuk a kész mozinkat. Erre azért van szükség, mert a közzétételhez a publikált flash mozi szükséges, a forrásra ott már nincs szükség. Publikálni a Shift+F12 billentyűzet kombinációval lehet a mozit, vagy válasszuk a főmenü File / Publish menüpontját.

32. Ábra: Publikálás

Ha most megnézzük azt a könyvtárat ahová a pelda1.fla fájlt mentettük, akkor láthatjuk, hogy még két fájl jött létre a publikálás hatására. Az egyik a pelda1.swf, ez a flash mozi. A másik a pelda1.html, ez lesz az a html fájl, aminek segítségével közzétehetjük a flash mozinkat az interneten. Ha most megnyitjuk a pelda1.html fájlt egy böngészőben, akkor megjelenik a html-ben a flash mozi.

33. Ábra: Fájlok

Ezzel az animációnk teljesen elkészült. Elmentettük a forrás fájlt és publikáltuk a mozit, így a közzétételhez szükséges fájlok is megvannak. Ha a mozinkat feltöltjük az internetre, akkor csak az swf és a html fájlra van szükség, az fla fájlt nem kell feltölteni, mivel az csak a mozi szerkeszthető forrása. Megtanultuk tehát, hogy milyen gyorsan és könnyen lehet egyszerű animációkat készíteni a flash szerkesztő segítségével. Hasonló megoldásokkal összeállíthatóak egyszerűbb mozik, például reklám bannerek.

Könyvtár (library):

A flah könyvtár, azaz library egy tárolóeszköz, amiben a flash fájlokban szereplő elemeket tudjuk rendszerezetten, strukturáltan eltárolni. A könyvtár panel megnyitása a Ctrl+L billentyű kombinációval történhet, vagy a főmenü Window / Library menüpont segítségével. A könyvtárban használt elemeket bármikor és többször felhasználhatjuk a mozi készítése során. A flash moziban csak az az egy példány létezik az adott elemből ami a könyvtárban van, így ha többször is felhasználjuk a szerkesztés során, nem fog jelentősebben megnőni a mozink mérete. Ebből következik, hogy a flash könyvtár használata segít megőrizni a mozik kis méretét és nagyban segíti majd a munkánkat. A könyvtár részletes megismerése egy későbbi lecke témája lesz, most csak az alapvető fogalmakat nézzük meg.

34. Ábra: Könyvtár

A könyvtárban szimbólumként szerepelnek azok az elemek, amelyeket eltárolunk benne. A könyvtárat használhatjuk a szimbólumok szerkesztésére, új szimbólumok létrehozására és a meglévő szimbólumok strukturált tárolására. A könyvtárnak van egy saját lejátszója, ami előnézeti képet biztosít a kiválasztott szimbólumról. Ha szimbólumban van animáció, akkor azt egyből le is tudjuk játszani, megnézve ezzel az animáció folyamatát. Ha a színpadon szerkesztjük valamelyik szimbólumot, ami a könyvtárban is szerepel, akkor azzal a könyvtárban lévő szimbólumot is szerkesztjük. A tárolás lényege az, amit már fentebb is említettünk: a szimbólumokat bármikor felhasználhatjuk. Csak megfogjuk a kiválasztott elemet és ráhúzzuk a munkaasztalra.

A könyvtárban kétszer rákattintva a kiválasztott szimbólum előnézeti képére, azonnal szerkeszthetővé válik az objektum és nem kell a színpadon keresgélni. A könyvtár használatával az oktatás végére mindenki nagyon meg fog barátkozni, mert praktikus, gyors és a kezelése egyszerű. A könyvtárban fogunk szinte mindent tárolni: grafikákat, movie clippeket, gombokat, videót, hangot, fontot, szinte mindent, ami az adott flash moziban szerepel. A New Symbol utasítással, amit a könyvtár menüjéből érhetünk el, lehetőségünk van új szimbólumot létrehozni és hozzáadni a könyvtár tartalmához.

Ha a könyvtárból egy szimbólumot a színpadra húzunk, az a szimbólum egy másolata lesz, azaz egy példány. Példányosításnak nevezzük még azt is, ha egy színpadon szereplő elemet grafikává, movie clippé vagy gombbá konvertálunk, ami ezáltal bekerül a könyvtárba. Minden alkalommal, amikor a könyvtárból egy szimbólumot húzunk a színpadra, akkor egy új példányt hozunk létre. Ügyeljünk arra, hogy ha a könyvtárban módosítjuk, átszerkesztjük a szülőszimbólumot, akkor az összes abból származtatott példány is vele együtt módosul. Ugyanez érvényes akkor is, ha a színpadon lévő egyik példányt módosítjuk.

35. Ábra: Mappa

A könyvtárban létrehozhatunk mappákat is, amelyekbe tetszőlegesen helyezhetjük el a szimbólumokat. Mappákat akár meglévő mappákon belül is készíthetünk, így még rendszerezettebb és áttekinthetőbb lesz a szimbólumok listája. Megfelelő elnevezéseket használva soha nem kell keresgélnünk, minden a helyén lesz és gyorsan elérhető, szerkeszthető.

A lenti videóbemutatókban megtekinthető a könyvtár használata. A Könyvtár - 1 nevezetű moziban a könyvtár megnyitása és mozgatása látható. A Könyvtár - 2 nevezetű moziban a mappák és szimbólumok megtekintése és átnevezése látható. A Könyvtár - 3 nevezetű moziban új mappák és szimbólumok létrehozását majd törlését mutatjuk be. A Könyvtár - 4 nevezetű moziban a szimbólumban szereplő animáció lejátszása és a szimbólumok kihelyezése a színpadra kerül bemutatásra. A Könyvtár - 5 nevezetű moziban a színpadról történő példányosítást lehet megtekinteni. Ez az öt mozi magába foglalja a könyvtárkezelés alapjait.

36. Ábra: Könyvtár kezelése

Flash mozi felépítése:

A flash mozik szerkezeti felépítése nagyon egyszerű, de azoknak, akik most ismerkednek a környezettel, kezdetben kicsit bonyolultnak tűnhet. Az egész mozi, függetlenül attól, hogy mennyi az összetevők száma, egyfajta faszerkezetben épül fel. A legfőbb szint, vagy szülő, a fő idősík (timeline) és azzal együtt a fő színpad. Ebből származik minden, ami a moziban megjelenik. Nézzünk egy egyszerű grafikai ábrát a jobb megértés kedvéért.

37. Ábra: Szerkezeti ábra

A fenti képen tehát látható, hogy a legfelső szint (root) az alapja mindennek, ez a fő idősík. A fő idősíkon a színpadra helyezzük el azokat az elemeket, amelyeket meg akarunk jeleníteni. A példában van egy menü mozi és egy zenelejátszó mozi, ami a fő idősík színpadára került. A két mozin belül van egy-egy gomb és szövegmező, amik már az adott mozikhoz tartoznak Nem a fő idősíkra kerülnek, hanem a mozikba, de mégis a fő idősík részei lesznek, hiszen a mozik, amiben elhelyeztük őket, az idősíkon vannak. Az elérésük tehát a root szintről vagy egy másik moziból a teljes eléréssel adható meg, pl.: _root.menu_mc.gomb . Azaz a fő idősík menü mozijának gombja.

Természetesen ha a gombot a menü moziból akarjuk elérni, akkor elég csak a gombra hivatkozni. A gombokon belül is van egy-egy elem, ezek már a gombok részei lesznek. Elérésük a fő idősíkról _root.menu_mc.gomb. effekt, de ha a menüből akarjuk az effekt mozit elérni, akkor elég a gomb.effekt kifejezést használni. Minden mozin belüli elem egy új szint, ami kezelés szempontjából egymástól független, de mind a fő idősík része, így épül fel a faszerkezet.

A mozin belüli újabb és újabb mozik a fő idősíkhoz hasonlóan ugyanúgy rendelkeznek saját idősíkkal, rétegekkel és frame-ekkel, így lehet egymásba ágyazni akár több animációt is, amik egymástól függetlenül kezelhetőek, szerkeszthetőek. Az egyes mozik is rendelkezhetnek saját elemekkel, amik csak az adott mozi részeit képezik. Ha ezek az elemek példányosítottak, azaz szerepelnek a könyvtárban is, akkor más mozikban is felhasználhatóak lesznek.

Ezzel el is érkeztünk a lecke végéhez. A flash szerkesztő alapfogalmait elsajátítottuk és már egy egyszerűbb kis animációt is el tudunk készíteni. A következő leckében a rajzolást és a statikus szövegmezőket fogjuk átnézni.

    Feladatok:

1. Hány fő részből áll a flash szerkesztő program?
2. Hogyan kell új panelt megnyitni?
3. Sorold fel a leckében bemutatott legfontosabb paneleket és azt, hogy melyik mire való.
4. Milyen beállítási lehetőségeink vannak a flash dokumentum esetében?
5. Mi a különbség a vektoros és a pixeles összetevők között?
6. Foglald össze a jelenetek kezelésének ismert műveleteit.
7. Foglald össze a rétegek kezelésének ismert műveleteit.
8. Foglald össze a frame-ek kezelésének ismert műveleteit.
9. Mire jó a library és mi a szerepe a flash szerkesztőben?
10. Hogyan épül fel a flash mozi?
11. Gyakorlat 1: A lecke egyszerű animáció elkészítése részének alapján készíts egy saját animációt. A mozi beállításai lehetnek tetszőlegesek (szélesség, magasság, sebesség, háttérszín). Egy tetszőleges alakzatot animáljunk a bal felső saroktól egészen a jobb alsó sarokig átlósan, majd vissza. A mozi forrását mentsük el és az animációt publikáljuk is.
12. Gyakorlat 2: A 35. ábra (video bemutató) alapján gyakoroljuk a flash könyvtár használatát. Hozzunk létre a könyvtárban új szimbólumokat, majd töröljünk párat. Hozzunk létre mappákat és helyezzük el benne a szimbólumokat. nevezzük át a meglévő szimbólumokat, szerkesszük őket a könyvtárból és húzzunk ki a színpadra pár elemet.