Rajzolás. Kijelöléshez használható eszközök:

Átírás

1 A könyv címe 1 Rajzolás Ebben a fejezetben a Flash rajzeszközei, és a színek használta kerül bemutatásra. A rajzoláshoz a szerkesztő baloldali panelján (Tools) található eszközök állnak rendelkezésünkre. Az ikonok nagy része egyértelműen jelöli az eszköz funkcióját, és közülük többel már más grafikai programokban is találkozhattunk, ezért ezek használatára nem térünk ki részletesen. Az adott eszközhöz tartozó plusz beállításokat, használatuk során az eszköztár alján található Options panelen találhatjuk meg, de a Properties panelon is lehetőségünk van bizonyos paramétereket módosítani. Kijelöléshez használható eszközök: Kijelölő eszköz: Ezzel az eszközzel tudjuk kijelölni a munkaterületen található elemeket, akár többet is egyszerre, ha használata közben nyomva tartjuk az egérgombot, és a megjelenő téglalappal körbekerítjük a kijelölni kívánt elemeket. Pontkijelölő eszköz: Az alakzatokat alkotó pontok kijelölésére és áthelyezésére használhatjuk. Az egérgomb nyomva tartását itt is ugyanúgy használhatjuk, ahogy az előző eszköznél. Lasszó eszköz: Segítségével egy, az egér kurzorral körberajzolt részt tudunk kijelölni. Az alakzatok kijelölését a terület pontozott mintázata jelzi, a csoportba foglalt rajzoknál és a szimbólumoknál, pedig kék keret jelenik meg. A SHIFT billentyű nyomva tartása mellett tudunk egyszerre több elemet kijelölni. Az ALT és a bal egérgomb nyomva tartásával a kijelölt elemekből másolatot tudunk készíteni. Rajzoláshoz használható eszközök: A rajzeszközök használatához tudnunk kell, hogy a Flash vektoros rajzai kétfajta elemből épülhetnek fel: vonalakból és kitöltésekből. Ezek külön kezelendőek, szerkesztésükre is külön eszközök vannak.

2 2 A könyv címe A vonal és ceruza eszközökkel csak vonal típusú rajzokat tudunk létrehozni. A vonalak vastagságát és stílusát a szerkesztő alján található Properties panelen tudjuk beállítani, a legördülő menükben. A hairline stílusú vonal mindig egy képpont szélességű vonalat eredményez, a nagyítás mértékétől függetlenül. Az ellipszis, téglalap eszközökkel körvonal és kitöltés is létrehozható. Ha valamelyiket nem szeretnénk hogy létre jöjjön, akkor a színbeállításnál a kívánt szín helyett a ikont kell választani. A színválasztó melletti ceruza ikon jelöli a vonalak színét, a festékes vödör melletti a kitöltések színét. A téglalap eszköznél lehetőségünk van a sarkok lekerekítésére. Ennek mértékét a téglalapot jelölő ikonra történő dupla kattintáskor, vagy az eszköz kiválasztása után az Options panelen megjelenő gomb lenyomását követően adhatjuk meg. A téglalap ikonján, ha nyomva tartjuk az egérgombot, akkor lehetőségünk van a sokszög eszközt kiválasztani, melynek segítségével megadott oldalszámú sokszöget tudunk rajzolni. A beállításait a Properties panelen megjelenő Options gombbal tudjuk módosímegjelenő panelon a Style feliratnál az alakzat típusát tudjuk kivá- tani. Az itt lasztani: a polygon, a szabályos sokszöget, a star a csillag alakzatot állítja be. A Number of Sides mezőben sokszög esetén az oldalak számát, csillag

3 A könyv címe 3 esetén a csillag ágainak számát adhatjuk meg. A Star point size csak csillag rajzolásakor lesz figyelembe véve, ekkor egy 0 és 1 közé eső számmal adhatjuk meg, hogy a csillag ágai a sugár hanyadrészénél kezdődjenek. Ha ez az érték 0, akkor a középponthoz nagyon közel kezdődnek, így vékony és hosszú szárakat kapunk, ha 0.5, akkor megszokott arányú csillagot rajzolhatunk, és ha 1, akkor már szabályos sokszöghöz hasonló alakzatot. Megjegyzés: Ez az eszköz, az MX 2004-es verzióban újdonságként megjelenő JSAPI segítségével készült, ami a Flash szerkesztő eszközeinek bővítésére ad lehetőséget. Ennek köszönhetően egyre több ilyen kiegészítés megjelenése várható a Macromedia oldalán, melyek megkönnyíthetik a szerkesztést. (Bővebben a További lehetőségek c. fejezetben) A toll eszköz segítségével Bézier-görbéket és általuk határolt alakzatokat tudunk létrehozni. Egy ilyen görbe a kezdő- és a végpontját meghatározó pontokon kívül további segédpontokat is tartalmaz, melyekkel a görbe ívét határozhatjuk meg. Ezek akkor jönnek létre, ha egy pont megrajzolásakor az egérgomb nyomva tartása mellett, valamelyik irányba elhúzzuk a kurzort. Később ezeket a pontokat a pontkijelölő eszköz segítségével módosíthatjuk. Az ecset eszköz használatakor szabadkezű rajz segítségével hozhatunk létre kitöltéseket. Az ecset méretét és alakját az eszköztár Options része alatt tudjuk módosítani.

4 4 A könyv címe Az eszköztár Options részén további beállítások találhatunk az ecset eszközhöz. A kék kör feletti piros vonalat ábrázoló gomb segítségével azt tudjuk megválasztani, hogy mely területeken fogjon az ecset: Paint Normal: Ez a normál beállítás, melynek használata esetén mindenhol megjelennek az ecset eszközzel rajzolt kitöltések. Paint Fills: Csak a meglévő kitöltéseken belül tudunk rajzolni. Paint Behind: A kitöltéseken kívüli területeken jelenik meg a rajz. Paint Selection: Csak a kijelölt kitöltésen belül jön létre az ecset eszközzel rajzolt alakzat. Paint Inside: Csak azon a kitöltésen belül fog az ecset amelyiken elkezdjük a rajzot, tehát egy mellette lévő újabb kitöltésbe már nem tudunk belerajzolni, csak ha felengedjük az egérgombot és azon belül kezdünk el rajzolni. Ha egy meglévő, kitöltéses alakzatnak akarunk körvonalat adni, akkor a tintásüveget ábrázoló eszközre van szükségünk. Ha egy körülhatárolt területet szeretnénk kitölteni, akkor a festékes vödör eszközt kell használnunk. A körbekerített területnek nem fontos teljesen zárt körvonalúnak lenni, ennek mértékét az Options panelen a megfelelő módon. ikonnal tudjuk beállítani, az ott megjelenő ábráknak Ugyanezzel az eszközzel módosítani is tudjuk egy meglévő kitöltés színét. Ha a később ismer-

5 A könyv címe 5 tetésre kerülő színátmentet szeretnénk létrehozni, akkor az egérgomb nyomva tartása mellett kell a színátmenet irányát és hosszát meghatároznunk. A kitöltés módosító eszközzel, az alakzatok színátmeneteinek irányát és méretét tudjuk módosítani. A középen megjelenő kis fehér körrel a színátmenet középpontját, a fehér négyzettel a szélességét, a harmadik ponttal pedig az elforgatása mértékét tudjuk meghatározni. A körkörös kitöltésnél a negyedik pont a kitöltés nagyságát állítja be. Törölni értelemszerűen a radír eszközzel tudunk, alapértelmezésként szabadkézzel. Ha a beállításoknál található, vízcsap ikonú gombot bekapcsoljuk, akkor törlődnek azok az elemek, amikre az eszköz használata során kattintunk. Ha a képernyőn található összes elemet törölni szeretnénk, akkor kattintsunk duplán a radírra. Tipp: A rajzeszközök többségnél a SHIFT billentyű nyomva tartása mellett szabályos alakzatokat hozhatunk létre. Így például a téglalap eszköznél négyzetet tudunk rajzolni, az ellipszis eszközzel kört. A munkafelületen történő navigálás eszközei: A baloldali eszköztár View felirattal ellátott részéről még nem esett szó. Az itt található két kis gomb a munkaterületen történő navigálást segíti: Ezzel az ikonnal a dokumentumot tudjuk mozgatni, hasonlóan a képernyő szélein megtalálható csúszkákhoz. További funkciója, hogy duplán rákattintva, a dokumentum akkora méretű lesz, hogy pont kitöltse a munkafelületet.

6 6 A könyv címe A nagyító eszközzel a flash-dokumentumot a munkafelületen nagyíthatjuk és kicsinyíthetjük, attól függően, hogy az Options részen található gombok közül melyik van bekapcsolva, a plusszal vagy a mínusszal jelölt. A szerkesztő jobb felső sarkában találhatunk még egy legördülő menüt, amiben szintén a nagyítás mértékét tudjuk beállítani, de itt százalékban, akár a listából kiválasztva, akár egy értéket beírva. Ebben a listában találhatunk három speciális méretezést: Show Frame: A dokumentumot akkorára méretezi, hogy az kitöltse a munkafelületet. Show All: Úgy állítja be a nagyítást, hogy a dokumentumban szereplő öszszes elem látszódjon. Tehát, ha például csak egy kis kör található a képernyőn, akkor a nagyítás mértéka akkora lesz, hogy ez ki fogja tölteni a rendelkezésre álló területet. Fit Window: Ezzel a funkcióval állandóan akkora méreten tarthatjuk a dokumentumot, hogy mindig kitöltse a munkafelületet. Példa: Egyszerű nyíl rajzolása Rajzoláskor ügyelnünk kell arra, hogy ha egy meglévő kitöltésre vagy vonalra rárajzolunk, akkor azok egyesülni fognak, és egy alakzatként fognak viselkedni. Ez a funkció sokszor jól jöhet, de más szerkesztőprogramokban nem igazán találkozhattunk vele, így először szokatlannak tűnhet, ezért nézzünk is egy példát, melyben egy egyszerű nyilat fogunk rajzolni: 1. Készítsük a következő képen látható téglalaphoz hasonlót.

7 A könyv címe 7 2. A sokszög eszközt kiválasztva, a beállításainál az oldalak számát, azaz a Number of Sides paramétert állítsuk 3-ra, így ezzel az eszközzel most háromszöget fogunk tudni rajzolni. Rajzoljunk is egyet a téglalapunk mellé, úgy hogy a SHIFT billentyű és a bal egérgomb nyomva tartása mellett, húzzuk jobbra az egeret, hogy a megfelelő irányba álljon a háromszög. Ezt kb. a téglalap magasságának felével egy vonalba tegyük, hogy a háromszög a téglalappal egy magasságba kerüljön. Most még lehetőségünk van kijelölni külön-külön a két elemet (a téglalapot és a háromszöget), mert még nem értek össze, de nézzük mi történik, ha egymásra helyezzük őket: 3. Jelöljük ki a háromszöget, majd húzzuk a téglalapra az egér segítségével, vagy ha pontosabban szeretnénk dolgozni, akkor az alakzat kijelölése után a kurzorbillentyűk segítségével léptessük a megfelelő irányba. (A léptetés mértékét a SHIFT billentyűvel tudjuk fokozni.) 4. Ha most a munkafelület üres részére kattintva a háromszög kijelölését megszüntetjük, akkor az egyesülni fog a téglalappal, és ezentúl egy alakzatként viselkednek. Ezt egy újbóli kijelölésnél észre is vehetjük. Az előbb csak a kitöltések viselkedését néztük meg, de hasonlóan hasznos funkciója van a vonalaknak is. Segítségükkel a kitöltéseket és akár a többi vonalat is fel tudjuk szeletelni. Ha egy kitöltésre rárajzolunk egy vonalat úgy, hogy a két vége túllógjon rajta, akkor mind a kettő felbontható lesz a metszéspontok mentén kisebb darabokra. Ilyenkor az egyes darabok külön kijelölhetőek és szerkeszthetőek. A vonalak esetében, ha az összetartozó részeket mégis egybe szeretnénk kijelölni, akkor ezt duplakattintással megtehetjük. A kitöltéseknek is van még további funkciójuk. Segítségükkel törölni is tudunk egy meglévő rajzból, csak ekkor más színűnek kell lennie, mint az eredeti alakzatnak, amire rárajzolunk. Ha rárajzolunk és megszüntetjük a kijelölést, majd egy újbóli kijelölés után töröljük a rárajzolt alakzatot, akkor az általa lefedet terület az eredeti rajzból törlődik. A következő képen a vonalas és a kitöltéses törlést is láthatjuk.

8 8 A könyv címe Színkeverő A szerkesztőben több helyen is találkozhatunk a színválasztó gombokkal. Ezekre kattintva csak egy előre beállított színpalettából választhatunk, illetve lehetőségünk van saját szín kikeverésére a jobb felső sarkukba található színkört ábrázoló gombbal, de ez nem tárolódik el a palettán. A színek kiválasztásánál érdemesebb a szerkesztő jobboldali paneljai közt található Színkeverőt (Color Mixer) használnunk. Itt a színek beállítása három módon történhet: kiválaszthatjuk a panel alsó részén a színskálából a megfelelő színt, megadhatjuk az RGB (piros, zöld, kék) értékeket, és lehetőségünk van a képernyő bármely pontján lévő színt is felvenni, ha a színválasztó gombon nyomva tartjuk az egérgombot és a kívánt színre esz- húzzuk. Ugyanezt tehetjük meg az eszköztáron található pipetta köz segítségével is.vagy Színátmenetek (Gradient) Lehetőségünk van még színátmenetek beállítására is. Ezt a panelon található kis legördülő menüből választhatjuk ki, a következők szerint: None: nincs kitöltés Solid: egy színből álló kitöltés

9 A könyv címe 9 Linear: több színből álló színátmenet (ez látható a képen) Radial: körkörös több színből álló színátmenet Bitmap: képpel való kitöltés (pl. ha famintás rajzot szeretnénk, betölthetünk egy ilyen mintát ábrázoló képet és azzal tölthetjük ki az alakzatot) A Flash-ben lehetőségünk van a színeknek átlátszóságot adni. Ezt százalékban adhatjuk meg az Alpha felirat melletti mezőben. A színátmeneteket, a színes sáv alatt található kis csuszkákkal állíthatjuk be. Ha új színt szeretnénk hozzáadni egy átmenethez, akkor a csuszkák közt található üres részre kattintsunk, majd állítsuk be a kívánt színt. Egy színátmenet maximum 8 színből állhat. Ha törölni szeretnénk egy színt a színátmenetből, akkor a kurzorral fogjuk meg az adott csuszkát és húzzuk lefelé, amíg el nem tűnik. Az átlátszóság beállítását az átmenetet meghatározó színeknél, itt is használhatjuk. Színminták (Color Swatches) A korábban említett színválasztó gombok lenyomásakor megjelenő színpaletta módosításához a Színminták (Color Swatches) panelt használhatjuk. Ez alapbeállításként nincs a panelok közt, ezért a felső menüsor Window menüpontjában található Design Panels-ben kell keresnünk, ahol a Color Swatches néven találhatjuk meg. Ekkor lebegő panelként jelenik meg, de a fejlécében található kis pontozott résznél fogva beilleszthetjük a többi panel közé, hogy kényelmesen elférjünk. Új színeket, a meglévő színek alatti üres részre kattintva adhatunk hozzá a készlethez. Ha színátmenetet szeretnénk elmenteni ide, akkor azt ugyanígy megtehetjük, de ezeknek egy külön rész található a panel alján, ezért hozzáadáskor ide kerülnek, és később itt is érhetjük el őket. Ha a minták közül törölni szeretnénk egy színt vagy színátmenetet a, akkor először ki kell jelölnünk, majd a panel fejlécének jobb oldalán található kis ikonra kattintva, a megjelenő menüben a Delete Swatch menüpontot kell választanunk. Itt érhetjük el a panelhoz tartozó többi beállítást is: Add Colors: a meglévő színekhez tölthetünk be plusz színeket fájlból Replace Colors: a meglévő színeket cserélhetjük le egy fájlból betöltött készletre Load Default Colors: az alapértelmezett színeket tölthetjük be vele Save Colors: ezzel menthetjük el az összeállított színkészletünket Save as Default: alapértelmezettként menti el a színeket

10 10 A könyv címe Clear Colors: törölhetjük a meglévő színmintákat Transzformációk Ha létrehoztunk egy alakzatot, akkor lehetőségünk van tovább alakítani a transzformáló eszköz segítségével. Ha kiválasztjuk ezt az eszközt, akkor a kijelölt rajz körül egy téglalap jelenik meg, aminek sarkain és élein kis négyzetek találhatóak. Ezek segítségével az alakzatok szélességét és magasságát tudjuk változtatni. Ha ezt egyenlő arányban akarjuk tenni, tehát úgy kicsinyíteni vagy nagyítani, hogy a kép ne torzuljon, akkor a SHIFT billentyű nyomva tartása mellett kell az egyik sarokpontnál fogva méreteznünk a képet. Ezzel az eszközzel az alakzatokat forgatni is tudjuk, ehhez a transzformáló téglalap, valamelyik sarkától kicsit távolabb kell vinnünk a kurzort, és ekkor megjelenik a felső képen látható görbe nyíl, amivel a fehér ponttal jelölt, középpont körül tudjuk elforgatni a rajzunkat. Ezt a pontot odébb is tehetjük, ha azt szeretnénk, hogy máshol legyen a forgatás középpontja. Az eszközzel lehetőségünk van még ferdén elnyújtani, amit úgy érhetünk el, hogy nem a sarkokon és éleken található pontokat használjuk, hanem a közöttük található vonalat, a transzformáló téglalap éleit. Az átalakító eszköznek, az Options panelen érhetjük el a további beállításait. A mágnes ikon után található két gombbal az előbb említett funkciókat érhetjük el, de az alattuk levő másik két gombbal további átalakítások válnak elérhetővé. Az elsővel, a gomb ikonján látható módon tudjuk a sarkpontoknál fogva nyújtani az alakzatot. A másik beállítással burkológörbék jelennek meg, amikkel lehetőségünk van az alakzatok további formálására. A transzformáció és info panel Ha a transzformáló eszközzel nem tudunk megfelelő pontossággal dolgozni, akkor a Transzformáció (Transform) panel segítségével, pontos értékek megadásával is módosíthatjuk az alakzatokat. A panelt a Window > Design Panels menüpont alatt érhetjük el a felső menüsorból. Az értékek megadása előtt ki kell jelölnünk a módosítandó elemet, csak ezután aktivizálódik a panel. Az első két beviteli mezővel az alakzat vízszintes és függőleges méretét tudjuk megváltoztatni, a jelenlegi mérethez

11 A könyv címe 11 viszonyított százalékos érték megadásával. Ha azt szeretnénk, hogy a méretváltozás mindkét irányba automatikusan ugyanakkora mértékben történjen, akkor a beviteli mezők mellet található Constrain feliratú jelölőnégyzetbe kell tennünk egy pipát. A Rotate és Skew kapcsolóval a fogatás és az elnyújtás közt választhatunk, melyek értékeit a mellettük található mezőkben adhatjuk meg: a forgatásét fokban, az elnyújtást pedig a vízszintes és a függőleges tengely mentén. A panel jobb alsó sarkában található első gombbal a módosításokat tudjuk érvényesíteni, a jobboldali gombbal pedig visszaállítani az eredeti állapotba. Az Info panel néhány plusz információval könnyíti meg a szerkesztést. A felső részén a kijelölt elem szélességét (W), magasságát (H) és pozícióját (X, Y) láthatjuk és módosíthatjuk. (Ugyanezekkel a beállításokkal találkozhattunk már a Properties panelon is). A panel bal alsó részén annak a pontnak a színét láthatjuk RGB (piros-zöld-kék) értékekben és átlátszóságát az A paraméternél, amelyik felett az egérkurzor van. A jobboldali X, Y érték az egérmutató koordinátáit mutatja (képpontban). Példa: Illusztráció készítése A jobboldali képen látható delfint fogjuk elkészíteni 10 egyszerű lépésben. Ehhez mindössze a Flash egy alakzatmódosító lehetőségével kell még megismerkednünk. Ez minden alakzatnál és vonalnál alkalmazható, mi most körökből kiindulva fogjuk használni. 1. Hozzunk létre egy új Flash dokumentumot, és mielőtt megrajzolnánk a kört, a korábban leírt módon kapcsoljuk ki a körvonal rajzolását, vagy ha már megrajzoltuk, akkor kijelölése után a DELETE billentyűvel tudjuk törölni. A kör kb. 150x150 pixel méretű legyen, nagyjából a munkaterület közepén, hogy kényelmesen tudjunk vele dolgozni. A kör méretét és egyéb tulajdonságait, kijelölése után lent, a Properties panelon módosíthatjuk számokkal megadva. Ha szabadkézzel szeretnénk beállítani a méretett akkor a korábban ismertetett transzformáló eszközzel a megjelenő pontoknál fogva ezt is megtehetjük. 2. Ha most az egérkurzort a kör széléhez visszük, akkor nyíl mellett megjelenik egy kis körív, a jobboldali képen látható módon. Ez jelzi a bemutatni kívánt funkció használatának lehetőségét. Fontos hogy előtte ne legyen kijelölve az alakzat, tehát ha ki volt jelölve, akkor kattintsunk a munkafelület egy üres részére, hogy

12 12 A könyv címe 3. A delfin testének elkészítéséhez a kör aljától kicsit jobbra kell megfog- nunk a szélét és felfelé betolni annyira, hogy a következő képen 2. lépéssel ábrázolt alakot kapjuk. megszüntessük ezt, és utána próbálkozzunk. Ha ez a kurzorikon jelenik meg, akkor lehetőségünk van az alakzat deformálására a bal egérgomb nyomva tartása mellett. Képünk megrajzolásának ez lesz az alapja. 4. Ezt követően hozzuk létre a farokuszony kialakításához szükséges ellipszist a meglévő alakzat jobboldalán, a kép 3. lépésének megfelelően, majd formáljuk azt is a megfelelő alakúra. Ha most módosítani szeretnénk az ellipszis méretét, akkor ezt már nem tehetjük meg, mint erre már korábban utaltunk, mert annak az alakzatnak a részévé vált, amire rárajzoltuk, ezt láthatjuk is, ha kijelöljük. 5. A következő lépésben, rajzoljuk meg többi uszonyt, először külön, hogy ne adódjon a meglévő alakzatunkhoz, majd illesszük azokat is a testrészhez. Ha nem sikerült a kívánt alakot elérnünk, a pontkijelölő eszközzel finomítani tudunk a rajzot alkotó pontokon. 6. A szem egy egyszerű ellipszisből áll, melynél be volt kapcsolva a körvonal rajzolása, ezt fehér színűre állítsuk, és az oválist forgassuk el, hogy olyan hatást keltsen, mintha tényleg oldalra nézne a szem. Csoportba foglalás és a rétegek Rajzolás közben általában, nem egy alakzattal dolgozunk, ezért szükségünk lehet a csoportosításukra és sorba rendezésükre aszerint, hogy melyik ábra kerüljön a háttérbe és melyik az előtérbe.

13 A könyv címe 13 Csoportok használata Az előző példánál megtehettük volna, hogy a rajz egyes elemeit (uszonyok, szem) külön csoportba foglaljuk, ekkor nem váltak volna közös alakzattá szerkesztés közben, hanem külön egységként maradtak volna meg. Ez például akkor lehet hasznos, ha később az egyes tesztrészeket külön-külön szeretnénk animálni. A következőkben elég lesz az egész delfin rajzot egyetlen csoportként kezelni. Ehhez mindössze annyit kell tennünk, hogy kijelöljük a csoportba foglalni kívánt rajzot, és megnyomjuk a CTRL+G billentyűkombinációt, vagy a felső menüsorból kiválasztjuk a Modify > Group menüpontot. Ekkor a csoport kijelölését már egy kék téglalap jelzi, és nem a kitöltéseknél és vonalaknál megszokott pontozás. Ha később úgy döntünk, hogy fel szeretnénk bontani egy korábban létrehozott csoportot, akkor azt is megtehetjük az ugyanitt található Ungroup funkcióval, vagy a CTRL+SHIFT+G billentyűkombinációval. Csoportok rendezése Ha több ilyen csoportunk van, akkor előfordulhat, hogy az egyik részben fedi, vagy el is takarja a másikat. Ekkor lehetőségünk van az előtérbe hozni, illetve a háttérbe küldeni a kívánt csoportokat. Ezt később majd a csoportokhoz hasonló, szimbólumoknál is használhatjuk. A rendezési funkciókat, a kijelölés után a Modify > Arrange menüpont alatt található parancsokkal tudjuk, a következők szerint elérni: Bring to Front: Az összes többi elem elé hozhatjuk a kijelölteket. Bring Forward: Egy lépéssel előrébb. Ha van három csoportunk egymáson, és a leghátsón hajtjuk végre, akkor ez kerül a másik kettő közé. Send Backward: Ugyanaz mint az előző csak hátra felé küldi az elemeket. Send to Back: Ez pedig az első parancs ellentétes megfelelője, mert ezzel leghátulra küldhetünk elemeket. Fontos tudnunk, hogy a nem csoportba foglalt elemeknél, tehát a kitöltéseknél és a vonalaknál, nincs ilyen előtér-háttér sorrend, mert ahogy azt korábban bemutattunk, ha egy meglévő kitöltés vagy vonal fölé egy másikat rajzolunk, akkor az egyesül az alatta lévővel, amint megszüntetjük a kijelölését. Éppen ezért az ilyen elemek mindig a (velük egy rétegen lévő) csoportba foglalt elemek mögött vannak. A rétegek Az előtér-háttér problémára, egy hatékonyabb és rendezettebb megoldás a rétegek 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.

14 14 A könyv címe 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őskála 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 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. Ú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. Példa: Háttér készítése 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é szeret-

15 A könyv címe 15 né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. Példa: 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 egyre sötétebb ár- nyalatai 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ó-

16 16 A könyv címe 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 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. 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. 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. 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á- Már csak a ki- 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. tö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% é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 el- menteni, ugyanis a gombok készítésénél még jól jöhet.

17 A könyv címe 17 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.

18 18 A könyv címe 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ésekor is 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.

19 A könyv címe 19 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 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 Libary-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 elemek találhatóak. A Flash által ismert fontosabb grafikus fájltípusok, (először a pixelgrafikus, majd a vektoros formátumok): JPEG: Az Interneten legelterjedtebb képi formátum, amit leginkább az általa használt tömörítéssel létrejött kis fájlméretnek köszönhet. GIF: Minősége nem éri el a JPEG-ét, de további két tulajdonsága miatt még ezzel is gyakran találkozhatunk az Interneten, ugyanis lehetőség van ilyen formátumban animációt is tárolni, illetve a képekben átlátszóságot is használhatunk. BMP: Tömörítetlen képformátum, ezért fájlmérete nagy, de a kép minősége jobb a tömörítetteknél. PNG: A két elsőhöz hasonlóan ez is egy tömörített képformátum, de emellett az átlátszóságban több fokozatot, azaz átmenetet is használhatunk. Gyakran használt vektorgrafikus képformátumok:

20 20 A könyv címe AI, EPS: Az Adobe Illustrator szerkesztőprogram formátumai. FH, FT: A Macromedia Freehand vektoros program formátumai. DXF: AutoCAD tervezőprogram formátuma, gyakran megtalálható más programok exportálási és importálási lehetőségként. PDF: Elterjedt dokumentum formátum, melynek importálása újdonság a 2004-es verzióban. Importáláskor a megjelenő panelon beállíthatjuk, hogy a dokumentum oldalai (Convert pages to:) külön jeleneteken, vagy külön képkockákon jelenjenek meg, valamint, hogy a PDF-ben használt rétegek (Convert Layers to:) a Flash-ben is külön rétegen (Layers), vagy képkockán (Keyframes) szerepeljen, vagy ne kerüljön szétbontásra (Flatten). A Which pages to import-nál az importálni kívánt oldalakat tudjuk meghatározni: az All opció választása az összes oldalt jelenti, az alatta levőnél pedig két mezőben megadhatjuk a kezdőoldal és az utolsó oldalszámát. A Flash által ismert összes fájltípus a könyv végén, a Függelékben megtalálható. Importált képek kezelése 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) jobbgombbal 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ére-

21 A könyv címe 21 tet. 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ázalé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. Ezen a panelon, a felső mezőben lehetőségünk van átnevezni, és az Import gombbal pedig lecserélni az aktuális képet. A későbbi fejezetben ismertetésre kerülő publikáció beállításainál, találkozhatunk majd egy JPEG Quality csúszkával, ami a beimportált BMP formátumú képek tömörítésének minőségét adja meg, ugyanis a Flash alapértelmezettként a tömörítetlen formában felhasznált képeket is tömöríti a végső animációban. Szerkesztés közben az importált képekkel tulajdonképpen ugyanúgy bánhatunk, mint akármilyen más alakzattal. Elvégezhetjük a rajtuk a korábban leírt transzformációk nagy részét, de vannak egyéb lehetőségeink is: 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,

22 22 A könyv címe 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. Ahhoz, hogy a jobboldalon látható kitöltést kapjuk, meg kell változtatnunk a kitöltés képének méretét a kitöltéstranszformáló eszköz ( ) segítségével. Ezt láthatjuk a felső képen is jobboldalt. 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: Példa: 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. 1. A kép kijelölése után, a menüben a Modify > Bitmap menüpont alatt érhetjük el, Trace Bitmap néven.

23 A könyv címe 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.