A rétegek

Az előtér-háttér problémára, egy hatékonyabb és rendezettebb megoldás a rétegek (Layers) alkalmazása. Egy rétegen belül is nyugodtan használhatjuk a csoportba foglalást, de ha már túl sok ilyen csoportunk van, akkor már nem fogjuk tudni könnyen kezelni a sorrendjüket. A rétegek azt határozzák meg, hogy a rajtuk lévő elemek egymáshoz képest, előrébb vagy hátrébb legyenek a jelenetben.
Tulajdonképpen olyan, mintha a valóságban külön fóliákra rajzolnánk az alakzatokat, és a fóliákat egymásra raknánk a kívánt sorrendben. A szerkesztőben felül, az időegyenes (Timeline) részeként, találhatjuk a rétegek kezelésére szolgáló felületet. Jobboldalon található kis kitöltött téglalapok egy képkockát (Frame) jelölnek. Ezeknek az animációknál lesz még fontos szerepük, most elég csak annyit tudni róluk, hogy ezeken helyezhetjük el rajzainkat. Egy új réteg létrehozásakor, lényegében egy újabb sort hozzunk létre a képkockáknak. Így válik lehetővé, hogy feljebb található képkockák rajzai elkülönüljenek a mögöttük megjelenő, lejjebb lévő képkockákétól.

Rétegek létrehozása, törlése, csoportosítása

Új réteget a bal alsó részen található ikonnal tudunk létrehozni, ami mindig a kijelölt réteg fölé jön létre. Rétegek törlésére az alattuk jobboldalon található szemetest ábrázoló gombot használhatjuk. Ha már sok réteggel dolgozunk, és nem tudunk eligazodni köztük, akkor a gomb segítségével mappákba csoportosíthatjuk őket. Ekkor az éppen nem használt mappákat becsukhatjuk, és a bennük található rétegek erre az időre eltűnnek. Ez persze csak a szerkesztés alatt érvényes, a végleges animáció tartalmát nem befolyásolja. Azt, hogy egy réteg a mappában van-e, az jelzi, hogy kicsit jobbra beljebb van. Egy réteg akkor kerül a mappába, ha az egér segítségével ráhúzzuk, vagy akkor is, ha már van egy réteg a mappában, és az alá húzzuk. Ez utóbbi kellemetlen lehet, ha az egész mappa alá szerettük volna helyezni a másikat, és ehelyett a mappába kerül legalulra. Ekkor az a megoldás, hogy nem a réteget húzzuk a mappa alá, hanem a mappát a réteg fölé, így a kívánt eredményt kapjuk. A rétegmappák használatának megértése azért is fontos, mert a későbbiek során, az animációknál további két speciális réteggel is megismerkedünk majd, amik hasonlóan mappaszerkezetűek. Ez a két réteg a maszkréteg és a segédvonal réteg lesz.

Rétegek szerkesztése

Több réteg használata esetén oda kell figyelnünk, melyik rétegen dolgozunk éppen. Az éppen szerkesztés alatt álló réteg sorának elején a ikon látható.
Amennyiben nem szeretnénk, hogy valamelyik réteg tartalma megjelenjen a munkaterületen, kikapcsolhatjuk a megjelenítését a gombra kattintva.
Egy rétegen található objektumok szerkeszthetőségét megakadályozhatjuk a gomb segítségével.
Rétegeinknek neveket is adhatunk, ez a későbbiekben megkönnyítheti munkánk áttekinthetőségét.

Feladat: Háttér készítése a delfint ábrázoló rajzunk mögé.

A rétegek használatával az előző példát folytatva fogunk a gyakorlatban is megismerkedni, a meglévő delfin rajzunknak fogunk egy egyszerű hátteret készíteni:

1. A Layer 1 jelenti az egyes réteget, ami mindenképp létrejön egy új dokumentum létrehozásakor. Jelenleg ezen található a delfin rajzunk is, ezért nevezzük át ezt a réteget "delfin"-re a Layer 1 feliratra való kattintás után.
2. Szükségünk lesz még egy rétegre, amin a háttér lesz, ezért a bal alsó sarokban található kis gombbal hozzunk létre egy újat. Ez a meglévő réteg fölött fog létrejönni Layer 2 néven. Mivel mi a delfin mögé szeretnénk a plusz réteget ezért a bal egérgomb nyomva tartása mellett, húzzuk ezt az új réteget "delfin" réteg alá, és nevezzük át "hatter"-re.
3. Hagyjuk kijelölve az új réteget, hogy arra rajzoljuk meg a hátteret. Ez egy egyszerű színátmenet lesz, ami a tengert és az eget hivatott majd ábrázolni. Hozzunk létre, egy egész dokumentumot kitöltő téglalapot, majd a színek használatánál leírt módon töltsük ki valami hasonló színátmenettel mint ami képen látható. Az árnyalatok alulról indulva: sötétkék, világoskék, közvetlen mellette fehér, és legfelül egy fehérhez közeli világoskék szín.

Feladat: Gombok rajzainak készítése

A következő példánkban az átlátszó színek és a rétegek előnyeit fogjuk kihasználni. A célunk az lesz, hogy egy olyan gomb rajzát készítsük el melynél, ha meg szeretnénk változtatni a gomb színét, akkor egyetlen alakzat színét kell csak megváltoztatnunk, és közben a "gombhatás" megmarad.

1. Hozzunk létre egy szürke háttérszínű új Flash dokumentumot.
2. A meglévő (Layer 1) rétegre rajzoljunk egy élénk színű kört, ez lesz a gomb alapszíne. Nevezzük is el ezt a réteget "alapszin"-nek.
3. Szükségünk lesz még egy ugyanekkora körre, ezért jelöljük ki a meglévőt, és a CTRL+C billentyűkombinációval (vagy jobbgomb > Copy) másoljuk. Hozzunk létre egy új réteget a meglévő fölé, nevezzük el "belso_arnyek"-nak, majd nyomjunk egy CTRL+SHIFT+V billentyűkombinációt (vagy jobbgomb > Paste in Place). Ezzel egy új rétegre, az eredetivel megegyező pozícióba készítettünk egy másolatot a korábban létrehozott körből.
4. Ennek a körnek csak a kitöltését fogjuk megváltoztatni a következők szerint: Jelöljük ki a kört, majd a Színkeverő (Color Mixer) panelen állítsuk át a kitöltés módját a legördülő menüben kör alakú átmenetre, azaz Radial-ra. Állítsuk a csúszkáknál mindkét színátmenet színét feketére, de a baloldalinál az átlátszóság 0% legyen, a jobboldalinál 40%. Ekkor a kör közepétől az alapszínünk árnyalatai jelennek meg. Ha az alapszínünket szeretnénk újból látni és módosítani, akkor láthatatlanná tehetjük ezt a réteget a "belso_arnyek" réteg felirata mellett található első kis pontra kattintva, a szemet ábrázoló ikon alatt. Ekkor ez piros X-re vált, újabb kattintással, pedig újból láthatóvá válik a réteg tartalma. A mellette található lakat ikonnal, pedig a szerkeszthetőségét lehet letiltani, ha nem szeretnénk, hogy véletlenül megváltoztassuk az adott réteg tartalmát. Ez a két funkció csak a szerkesztőben érvényes, hiszen a szerkesztés megkönnyítésére vannak, ezért az elkészített animációra semmilyen hatással sincsenek.
5. Az előbbi módszerhez hasonlóan hozzunk létre még egy másolatot valamelyik körből egy új rétegen, a réteg neve legyen "feny". Ez szintén kör alakú kitöltéses legyen, de most mindkét szín fehér legyen, a baloldali átlátszósága megint 0% és toljuk a csuszkát a skála kb. háromnegyedéhez. A jobboldali szín átlátszósága pedig 60% legyen.
6. Az előbb elkészített kitöltésen egy kicsit módosítanunk kell, hogy elérjük a kívánt hatást. A kitöltések módosítására a baloldali eszköztáron a ikonnal jelölt eszközt tudjuk használni. Kattintsunk rá, és utána a körre. Ekkor megjelenik egy körvonal és néhány vezérlő pont. A körvonal jelzi a színátmenet végét, tehát ezen a területen kívüli már nincs színátmenet, hanem egyszínű lesz a kitöltés.
7. A középső fehér ponttal a színátmenet középpontját tudjuk módosítani. A kör szélén található kis fehér négyzettel a kör alakú kitöltést szét tudjuk nyújtani, ezt tegyük is meg a képen látható módon. Így ovális alakú lesz a fényhatás, és így a körön belül csak kétoldalt fog megjelenni. A következő ponttal a kör alakú kitöltés méretét tudjuk változtatni, de erre most nincs szükségünk. A legalsó ponttal, pedig forgatni tudjuk a kitöltést, ezt tegyük is meg, a képnek megfelelő módon kb. 45 fokos szögben.
8. Még egy kis árnyékot csinálunk a gombnak és készen is vagyunk. Ismét készítsünk egy új réteget, és rá egy másolatot a körből, de ez legyen a legalsó réteg, hogy a gomb mögött legyen az árnyék. Ennek egy kicsit nagyobbnak kell lennie a többi körnél, ezért jelöljük ki és menjünk a felső menüben a Modify>Transform>Scale and Rotate...-re ahol számokkal tudjuk megadni a méretezés és az elforgatás értékét. Az utóbbira most nem lesz szükségünk, de a méretezésnek (Scale) adjunk meg 120%-ot értéknek. Már csak a kitöltés színét kell megváltoztatni, hogy árnyéknak hasson. Ehhez a kör alakú kitöltés két színét feketére kell állítani és a jobboldali átlátszóságát 0%-ra, a baloldaliét 50%-ra, és ez utóbbit toljuk egészen közel a jobboldali csúszkához.

Most ha az "alapszin" rétegen lévő kör színét megváltoztatjuk, akkor a "gombeffekt" megmarad, csak a gomb színe változik. Érdemes ezt a rajzot elmenteni, ugyanis a gombok készítésénél még jól jöhet.

Alakzatok bővítése, zsugorítása és az élek lágyítása

Ez a három funkció kitöltéseken hajtható végre. Hogy jól látszódjon a hatásuk ezért, érdemesebb egy kicsit összetettebb alakzaton kipróbálni, mint például a korábbi példában megrajzolt nyíl. A rajz kijelölése után a Modify>Shape>Expand Fill menüpont alól érhetjük el az alakzat bővítésére, illetve zsugorítására használható funkciót. E két mód közt a megjelenő ablakban válthatunk, az Expand (bővítés) és az Inset (zsugorítás) kapcsolók segítségével. A felettük lévő, Distance feliratú mezőben a bővítés vagy zsugorítás mértékét tudjuk megadni pixelben. Hatásuk a következő képen látható:

Lényegében a nagyításhoz és a kicsinyítéshez hasonló, de a képen észrevehetjük a különbséget, hogy a bővítésnél és a zsugorításnál a belső, illetve a külső élek lekerekedtek. Az élek lágyítására használható effektet is ugyanennél a menüpontban találhatjuk meg. Tehát az alakzat kijelölése után menjünk újból a Modify>Shape menüre, és itt most a Soften Fill Edges funkciót válasszuk, aminek hatására előjön egy ablak az effekt beállításaival. Ebben a következő paraméterek találhatóak:

• Distance: az élek elmosásának nagysága
• Number of Steps: az elmosás részletessége
• Direction (Expand, Inset): Az előző effektben már megismert kiterjesztés és zsugorítás közt választhatunk, ami itt az elmosás irányát adja meg.

Próbaképp a Distance értékének adjunk meg 20 px-t, a részletességnek 10-et és az irány legyen Expand-on. Ekkor nagyjából a következő képen látható változás jön létre az alakzatunkon.

Ha közelebbről megnézzük a rajzot, akkor láthatjuk, hogy hogyan is jön létre ez az éllágyítás, és könnyebben megérthetjük, hogy a paraméterek közt mit is jelent a részletesség. Amint azt a nagyított képen láthatjuk, a Flash úgy éri el az élek lágyítását, hogy az alakzat közepétől kifelé haladva egyre inkább átlátszó körvonalakat rajzol. Ezeknek a lépéseknek a számát adhatjuk meg a részletesség paraméternél. Mivel ezeknek különböző az átlátszóságuk, így külön alakzatként is kezelendőek. Kijelöléskor ez zavaró lehet, ha kihagyunk egy ilyen körvonalat, ezért érdemes csoportba foglalnunk a korábban leír módon, így legközelebb már egyetlen kattintással ki tudjuk jelölni, és nem kell külön az átmenetet alkotó körvonalakat is kijelölni.
Ez az effekt jól használható például árnyékok vagy fényudvar létrehozására. Például úgy, hogy az eredeti rajzból készítünk egy másolatot, és egy alatta lévő rétegre az elmosott szélű változatát.

Alakzatok szabályos elrendezése

Rajzolás közben sokszor szükségünk lehet arra, hogy az alakzatokat egymáshoz vagy a Flash dokumentum széleihez képest szabályosan helyezzük el, például egymástól egyenlő távolságra vagy az animáció közepére. Erre nyújt lehetőséget az Igazítás (Align) panel, amit a felső menüből a Window > Design Panels > Align menüponttal tudunk elérni. Ekkor egy lebegő panel jelenik meg, de ezt is ugyanúgy betehetjük a többi panel közé jobboldalra, a korábban leírt módon, hogy kényelmesen tudjunk dolgozni.
Az Align felirat alatt, az első sorban található gombok: a vízszintes (balra, középre és jobbra) és függőleges (következő három ikon: fel, középre, és lentre) rendezésre használhatóak, ahogy az ábrák is jelzik. Ezek egy és több elem kijelölésekoris használhatóak.
A következő sorban a Distribute felirat alatt, az olyan igazítások találhatóak, amiket egyszerre több alakzat kijelölésekor használhatunk, és a köztük lévő távolságokat tudjuk egyenlővé tenni sorban a következő módon: Az első hármas gombcsoport az alakzat felső széléhez, a középpontjukhoz, vagy az alsó széléhez képest teszi egyenlővé a köztük lévő függőleges távolságot. A következő hármas csoport, ugyanezt teszi csak a vízszintes távolságra vonatkozóan: a balszélükhöz, a középpontjukhoz és a jobbszélükhöz képest.
A következő három gomb a panel alján, a Match size felirat alatt, az alakzatok méretének egyenlővé tételére alkalmas. Közülük az első kettővel a szélességek és a magasságok egyeztethetőek, míg a harmadikkal mindkettő egyszerre.
Az utolsó két gomb a Space felirat alatt, ugyancsak - a Distribute-hoz hasonlóan - a több elem közti távolságok egyenlővé tételére használható, de itt az egymást követő objektumok alsó-felső és a bal-jobb széléhez képest történik az igazítás. Ez akkor használható, ha a másik módszernél egymásra lógnának az alakzatok a különböző méretük miatt.
A jobboldalon a To stage: felirat alatt található gomb benyomásával, azt tudjuk elérni, hogy az igazítások a munkaasztalhoz képest történjenek. Ennek bekapcsolásakor tudjuk például a felső sorban található ikonokkal, a dokumentum széleihez vagy középéhez igazítani az elemeket, míg kikapcsolt állapotban több elem kijelölése szükséges, mert ekkor egymáshoz képest történik az igazítás, nem a dokumentumhoz.
Érdemes néhány egymástól különböző téglalapon kipróbálnunk ezt a lehetőséget, hogy későbbiek során, ha szükségünk lesz rá, ne okozzon gondot a használata.

Képek importálása

Ha egy Flash animációba, külön fájlban lévő képeket szeretnénk beilleszteni, akkor ezt a File menü Import menüpontja alatt található funkciókkal érhetjük el. Az Import to Stage... paranccsal a közvetlen a munkafelületre importálhatjuk a kiválasztott képet, az Import to Library-val pedig, a később részletesebben bemutatásra kerülő, könyvtárba, ahol az animációban felhasznált, és később felhasználni kívánt objektumok találhatóak.

Lehetőleg csak akkor használjunk pixelgrafikus képeket, ha vektoros formában nem megoldható, mert az ilyen képek jelentősen megnövelhetik a végső fájlméretet. Ha mégis ilyen képet kell használnunk, például fénykép felhasználásakor, akkor lehetőségünk van a fájlméret csökkentésére a tömörítés megfelelő beállításával. Ez rontja ugyan a kép minőségét, de meg lehet találni az optimális beállítást, aminél még kevésbé látszik a minőségromlás, de már megfelelő a fájlméret. Ezt a lehetőséget a kép beimportálása után, a könyvtárban (CTRL+L) jobb-gombbal rákattintva a kép nevére, a Properties... parancs kiválasztása után megjelenő panelon tudjuk beállítani. Itt kétfajta tömörítés közül választhatunk a legördülő menüben: a veszteséges (Photo (JPEG)) és a veszteségmentes (Lossless(PNG/GIF)). Az utóbbinál csak kismértékben csökken a fájlméret, de a kép minősége nem változik (veszteségmentes tömörítés), a JPEG-nél viszont a minőség rovására csökkenthetjük igen jelentősen a fájlméretet. Alapértelmezettként a Use imported JPEG data ki van pipálva, ami azt jelenti, hogy jelenleg JPEG tömörítésnél az eredeti fájl tömörítési beállítását használja a program. Ha kikapcsoljuk ezt az opciót, akkor alatta lehetőségünk lesz megadni a tömörítés mértékét egy 0 és 100 közti számmal, külön erre a képre vonatkozóan. A 0 a legrosszabb minőséget eredményezi, de kis fájlméretet, a 100 a legjobb minőséget, de nagyobb mérettel. Az optimális érték beállításához kezdjük a kettő közti 50-es értékkel, majd nyomjuk meg a Test gombot, ami a baloldali mezőben található előnézeti képen végrehajtja a tömörítést. A tömörítés fájlméretre való hatását alul láthatjuk kb-ban megadva: az original után található érték az eredeti fájlméretet, a compressed utáni a tömörítettét, és a száza-lékban megadott érték, pedig a kettő közti arányt mutatja. Ezen adatoknak és az előnézeti kép minőségének megfelelően, néhány érték kipróbálása után könynyen meghatározhatjuk a tömörítés ideális értékét.

Példa: Képek használata kitöltésként

Most azt fogjuk megnézni, amikor egy alakzatnak, nem a megszokott egyszínű vagy színátmenetes kitöltés adjuk meg, hanem egy betöltött képet.

1. Első lépésként be kell importálnunk a felhasználni kívánt képet a File>Import>Import to Libary paranccsal. Azért ezzel, mert nincs szükségünk arra, hogy megjelenjen maga a kép az animációban, csak el kell tárolnunk a könyvtárba (Libary) további felhasználás miatt. Ha egy tetszőlegesen kiválasztott képet betöltöttünk, akkor a CTRL+L lenyomása után megjelenő könyvtárban láthatjuk is azt.
2. Ezek után, ha a színkeverőnél (Color Mixer) a kitöltés típusát Bitmap-re állítjuk, akkor a betöltött képünk kicsiben megjelenik a panel alján található mezőben. Ezt kiválasztva a rajzolt alakzat kitöltése ez a kép lesz.
3. Rajzoljunk is egy alakzatot, hogy kipróbáljuk rajta ezt. Rajzolás után előfordulhat, hogy a következő képen baloldalt látható kitöltéshez hasonlót kapunk, amin ugyan a választott kép a kitöltés, de a mérete túl kicsire van állítva, ezért sokszor ismétlődve „tapétaként” jelenik meg. A kitöltés képének méretét a kitöltéstranszformáló eszköz segítségével változtathatjuk meg.

Ha egy importált képen végre hajtjuk a korábban már használt Break Apart (CTRL+B) funkciót, akkor egy olyan téglalappá alakul, aminek a kép a kitöltése. Így akár ki is törölhetünk bizonyos részeit a radír eszköz segítségével.

Képek vektorossá alakítása

A következőkben bemutatni kívánt funkcióval a szerkesztőbe importált pixelgrafikus képeket alakíthatjuk vektorossá. Ez a funkció is használható a pixelgrafikus képek által okozott fájlméret növekedés csökkentésére, ha megelégszünk a létrejövő képminőséggel, és nem túl összetett a létrejövő vektoros kép, mert túl sok pont esetén jelentősen terhelheti a számítógép processzorát.

A kép kijelölése után, a menüben a Modify>Bitmap>Trace Bitmap menüpont alatt érhetjük el az átalakító funkciót.

A megjelenő panelon négy beállítást találhatunk, melyek a parancs eredményeként létrejövő vektoros kép minőségére lesznek hatással. A színküszöbbel (Color threshold) azt tudjuk megadni, hogy a képen található színek árnyalatai mekkora mértékben legyenek megkülönböztetve. Például, ha van két képpont, ami hasonló színű, de a megadott értéken belül különböző árnyalatú, akkor ezt a vektoros eredményben egyszínű területként fog megjelenni. A Minimum area a kép részletességéért felel, ahol azt tudjuk megadni, hogy hány képpontonként vizsgálja a pixeles képet a program, a vektoros előállításához. A Curve Fit-tel az élek részletességét, a Corner Treshold-dal a sarkok lekerekítését tudjuk beállítani.

A beállításnál vigyáznunk kell, hogy ne adjunk meg túl alacsony értékeket, mert sokáig tarthat a kép átalakítása, és az eredmény is használhatatlan lesz, ugyanis túlságosan leterheli a szerkesztőt, a létrejövő képet alkotó túl sok pont kezelése és megjelenítése.