A Adobe Flash CS4 grafikus felülete

Átírás

1

2 Bevezető Az Internet valódi sikerét a W W W (World Wide Web - Világháló) hozta, és a grafikák megjelentek a publikált oldalakon. Pontosan úgy, mint a száz évvel ezelőtti fénykép esetében, ma már nem elégszünk meg az Interneten statikus képekkel. Ma már animációra, filmekre vágyunk! Ez az új elvárás igazolja az olyan termékek, mint amilyen az Adobe Flash CS4 létrejöttének jogosultságát. Vele végre tetszés szerint készíthetünk animációkat internetes publikáláshoz és terjesztéshez megfelelően tömörített formátumban.

3

4 A Adobe Flash CS4 grafikus felülete Mint minden olyan programban, amelyet a Windows operációs rendszerre terveztek, az Adobe Flash CS4-ben is megtalálható egy címsor (ami azonosítja a felhasznált programot, valamint a dokumentumot, amiben éppen dolgozunk), egy menüsor (amelyben minden rendelkezésre álló funkció megtalálható), és néhány eszközsor (amelyek, mint köztudott, a leggyakrabban használt funkciókat használatra kész gombokként tüntetik fel). (1. Ábra) 1. Ábra. Első ránézésre azonnal felfigyelhetünk arra, hogy a munkaterület egy fehér lapból és azokból a jellegzetes rajzolóeszközökből (ceruza, ecset, egyszerű alakzatok, festékesvödör

5 stb.) áll, amelyeket minden olyan grafikai programban megtalálunk, amelyhez díjmentesen hozzáférhetünk az operációs rendszerünkben ("Paint Shop Pro", vagy akár a "Paint"). Egyetlen egy dolog tehát biztosnak látszik: az Adobe Flash CS4-el úgy fogunk tudni rajzolni, mint a Painttel! Na de akkor mitől is új ez a termék? Vegyük egy kicsit jobban szemügyre a grafikus felületet, és azonnal észre fogjuk venni, hogy a fehér lap alatt van egy beosztásos sor (olyan, mint egy vonalzó), valamint egy másik sor, ami sok apró egyforma kis kockára van osztva (ezek a "fotógrammok", azaz "frame-ek", képkockák). Ez az időegyenesnek (Timeline) nevezett elem az igazi újdonság a többi, már ismert grafikai programhoz képest. Az Adobe Flash CS4-el tehát tulajdonképpen pillanatról pillanatra módosíthatjuk rajzlapunkat. A rajzfilmek technikájával élve (amelyek, mint köztudott, képkockára rajzolt képekből állnak) igazi animált történeteket gyárthatunk majd, pontosan ezzel a módszerrel: képkockánként megrajzolva. A következő fejezet célja, hogy megismerkedjünk az Adobe Flash CS4 rajzeszközeinek használatával, és elkészítsünk - természetesen ezeknek az eszközöknek a segítségével - egy kis animációt a rajzfilmkészítés technikájával élve, tehát képkockáról képkockára. Indítsuk el az Adobe Flash CS4-et az ismert eljárással (Start>Programok>Adobe>Adobe Flash CS4).

6 2. ábra Lecke Egyszerű alakzatok készítése A számítástechnikában, ha problémába ütközünk, jó stratégiának ígérkezik a probléma sok kis alproblémára történő osztása. Miután minden egyes alproblémát megoldottunk, az eredeti kérdést is megválaszoltuk. Ezért célszerűnek tűnik először egyszerű alakzatok rajzolásának gyakorlásával kezdenünk. Egész biztos, hogy sok olyan trükkre jövünk rá, amelyek jól jönnek még a későbbiekben. Jelöljük ki az eszköztárból az `ellipszis" (Oval Tool) objektumot (2. ábra), aminek következtében meg fog jelenni a Properties panelen (3. ábra) néhány olyan gomb, amelyek segítségével módosíthatjuk az "ellipszis" tulajdonságait: kiválaszthatjuk a színét, a vastagságát, körvonalának stílusát, valamint a kitöltő színt.

7 3. ábra Rajzoljuk meg az ellipszisünket a munkalapon úgy, hogy a bal egérgombot lenyomva tartjuk, és magát az egeret elkezdjük valamelyikirányba húzni. Figyeljük meg, hogy amint a rajz egy kör alakzatát veszi fel, úgy érezzük, mintha a kurzor ellenállásba ütközne. Valójában ezzel segít egy teljesen szabályos kör megrajzolásában. Ismételjük meg többször ezt a gyakorlatot (változtassunk a vonal és a kitöltés tulajdonságain) úgy, hogy az egyes próbálkozások között a "visszavonás" paranccsal (Edit>Undo Oval) (4. ábra) segítségével "letisztítjuk" a rajzlapot.

8 4. ábra Most végezzük el ugyanezt a műveletet a "téglalappal" (Rectangle Tool) (5. Ábra) 5. Ábra. Hadd jegyezzük meg, hogy a Properties panelen beállíthatjuk a Rectangle Options-nél, a saroklekerekítés mértékét (Pl.: a corner radius" értéke legyen 20). (6. Ábra) 6. Ábra

9 Most gyakoroljunk egy kicsit a vonalrajzoló (Line Tool) eszközzel is, hogy megnézzük, úgy viselkedik-e, ahogy azt az ellipszis esetében láttuk. (7. ábra) 7. Ábra Snap To Objects-nak hívjuk a kurzornak azt a tulajdonságát, hogy hozzárendelődik különféle helyzetekhez, ami az egyszerű alakzatok megrajzolásához nyújt segítséget. Úgy győződhetünk meg e tulajdonság hatékonyságáról, hogy először kikapcsoljuk (View>Snapping>Snap to Object) menüpontra kattintunk (8. Ábra) majd megpróbáljuk az összes előzőekben elvégzett műveletet megismételni. Hamarosan rájövünk, hogy egyszerűen lehetetlen szabályos kört vagy téglalapot, vízszintes vagy akár függőleges vonalat húznunk. 8. ábra

10 A kérdéses funkció, sokkal hatékonyabb annál, mint amit első pillanatban feltételezhettünk volna róla. Kapcsoljuk be, majd kíséreljünk meg egy óriási téglalapot rajzolni, és egy olyan vonalat, amely a téglalap egy tetszőleges belső pontjából kiindulva annak széle felé mutat. Szinte a csodával határos módon, a vonal külső vége tökéletesen oda fog tapadni a téglalap széléhez. Még látványosabb, ha a téglalap egyik tetszőleges oldalának közepe felé vagy egy sarkának a közelébe megyünk, mert az az érzésünk lesz, hogy ezek a kitüntetett pozíciók mintha magukhoz szívnák a vonalat. Bármilyen helyzetben és bármely alakzattal a Snap To Objects lehetővé teszi a vonalak tökéletes illeszkedését a legfontosabb pozíciókba (tehát pontosan azokba, amelyeket a leggyakrabban célba veszünk, és megpróbálunk elérni). Végül jelenítsük meg a segédrácsot (grid) (View>Grid>Show grid), ismételjük meg még egyszer az összes előzőekben elvégzett gyakorlatot, majd figyeljük meg még egyszer a " Snap To Objects" funkció hatását. Észre fogjuk venni, hogy a segédrács rengeteget segít a képek helyes elhelyezésében, pontosan úgy, ahogy egy rácsozott papír segít a szabadkézi rajzoknál.

11 Lecke Objektumok kijelölése, áthelyezése és törlése Mielőtt még tovább haladnánk, és a többi eszközt is szemügyre vennénk, álljunk meg egy pillanatra, és elemezzük azt, hogy hogyan kezeli az Adobe Flash CS4 az előzőekben rajzolt képeket. Vegyünk egy teljesen üres Flash dokumentumot, és rajzoljunk egy téglalapot fekete szegéllyel, ami "folyamatos" (azaz solid a grafikus felületen), 4 pont a vastagsága és belül pirosra van festve. Válasszuk ki az Selection Tool gombot (9. Ábra), majd kattintsunk egyszer a téglalap belsejében egy tetszőleges pontra. 9. ábra

12 Figyeljük meg, hogy így csak a téglalapkitöltést jelöltük ki. Ha erről meg kívánunk győződni, vegyük a kijelölt részt, húzzuk ki az egérrel a téglalapból, vagy töröljük ki a billentyűzeten található "Delete" billentyűvel. Ezek után azonnal vonjuk vissza az elvégzett műveletet a szokásos parancsgombbal, hogy visszanyerjük a belső színezést. Most próbáljunk meg a téglalap szegélyére kattintani, hátha valami nem várt dolog fog történni: a szegélynek csak egy részét jelöltük ki (saroktól sarokig). Egy dupla kattintás felér egy varázsütéssel: a téglalap egész szélét kijelöltük. Miért van szükség erre? Igyekszünk mindezt egy olyan példával megvilágítani, ami minden kétséget eloszlat. Egy tiszta lapon rajzoljunk egy kört és egy olyan vonalat, ami körülbelül félbe vágja a kört, de túllóg a kör szélein. Most próbáljuk meg kijelölni a vonalat az egyik kiálló végén. (10. Ábra) 10. Ábra

13 Hopplá! Csak a kilógó részt jelöltük ki, a körvonalon belül lévő vonalszakasz érintetlen maradt. Így eltávolíthatjuk a számunkra felesleges részeket anélkül, hogy teljesen újra kellene rajzolnunk az objektumokat. (11. Ábra) 11. Ábra Konklúzió: az Adobe Flash CS4 minden objektumra két különböző részként tekint: ez a körvonal és a kitöltés. Ezen túl, úgy tekint a körvonalra, mint egy sor egymásra tapadó vonalra, amelyeket egyenként is kijelölhetünk. Két vonalszakasz között egy másik vonallal való találkozás határozza meg az elválasztást; ez utóbbi lehet a kérdéses vonal része vagy sem. Még egy utolsó példával fogjuk illusztrálni az eddigi leírást, hogy ezt az alapvető koncepciót tisztázzuk. Rajzoljunk egy kitöltetlen téglalapot (ehhez elég, ha a kitöltő színtáblán fehér színt választunk ki), és vágjuk el két ferde vonallal. Ezek után jelöljük ki egyenként az összes vonalszakaszt, és nézzük meg, hogyan viselkednek. (12. Ábra)

14 12. Ábra Ha ügyesek vagyunk, észre fogjuk venni, hogy összesen tizennégy, külön-külön kijelölhető szakasz van. A vonalak minden "kereszteződésben" kettétörnek, de ettől függetlenül továbbra is megőrzik formájukat és helyzetüket.

15 Lecke Ceruza A `ceruza" (Pencil Tool) eszközzel szabadkézi vonalakat készíthetünk, pontosan úgy, ahogy a normális vektoros programok esetében szokás. Ugyanakkor az Adobe Flash CS4 rendelkezésünkre bocsát egy sor olyan funkciót, ami fontos segítséget nyújt, és megkönnyíti munkánkat. Kezdjük azzal, hogy megfigyeljük, hogy mi történik a "ceruza" eszköz kijelölésekor (13. Ábra). 13. Ábra

16 Az alsó eszközgombok alatt azonnal újak jelentek meg (pontosan úgy, ahogy az előzőekben használt eszközök esetében). Ezek igen nagy segítséget jelenthet a vonalak rajzolásánál. (14. ábra) 14. ábra Próbáljuk ki mindhárom felkínált lehetőségét, nézzük meg, mire használhatjuk őket! A "Straighten" kiegyenesíti a megrajzolt vonalakat, és amikor lehetséges, geometriai alakzatokat készíthetünk segítségével.

17 A "Smooth" elsimítja a megrajzolt vonalak szögletes részeit, lekerekíti őket. Az "Ink" a görbe vonalakra hat, de csak minimálisan, gyakorlatilag ugyanolyanok maradnak, mint amilyenek voltak. Ahhoz, hogy ténylegesen meg tudjunk győződni a "Straighten" hatékonyságáról, próbáljuk ki, azaz próbáljunk egy téglalaphoz vagy egy ellipszishez hasonló, nem teljesen szabályos rajzot készíteni. Figyeljük meg, hogy a kész alakzatok teljesen szabályosak lesznek, pontosan úgy, mintha a megfelelő eszközökkel rajzoltuk volna őket. Most rajzoljunk görbe vonalakat úgy, hogy először bekapcsoljuk a "Smooth", azután az "Ink" gombot. Látni fogjuk, hogy a megrajzolt görbe kiálló részei többé-kevésbé, de határozottan lekerekednek.

18 Lecke Ecset Most, hogy minden, a vonalak rajzolásához használatos eszközt ismerünk, és élni tudunk azokkal a funkciókkal, amelyeket az Adobe Flash CS4 dolgunk megkönnyítése végett bocsát rendelkezésünkre, itt az ideje, hogy a vonalak által körbehatárolt területek kiszínezésére használatos eszközöket is megismerjük. Annyit megígérhetünk, hogy egy vonallal lezárt terület automatikus kitöltésénél (ami minden kétséget kizáróan igen kényelmes, hasznos, de kissé korlátolt eszköz) egy kicsit többről lesz szó. Kezdjük a "ecset" (Brush Tool) eszközzel! Segítségével sza bad-kézzel festhetünk a rajzunkon (15. Ábra). 15. Ábra

19 Először is nézzük meg, hogy, miután kijelöltük az ecsetet, az eszköztár alatt megjelennek különféle kellékek (16. Ábra). 16. ábra Egy szelektort is láthatunk (17. Ábra), amely segítségével az ecsetvonás típusától függően (ezt hamarosan elemezni fogjuk), kiválaszthatjuk a megfelelő színt; az egyik legördülő menüből kiválaszthatjuk az ecset méretét, egy másikból a formáját. 17. ábra Végül ott egy igen különleges gomb, amire a lecke végén még visszatérünk. Rajzoljunk a lap közepére egy "4"-es vastagságú, fekete szegélyű téglalapot, és töltsük ki piros színnel. Jelöljük ki az "ecset" eszközt, és a színtábláról jelöljük ki a kék színt. Döntsük el, hogy mit akarunk kiszínezni, vagyis azt, hogy hogyan kívánjuk felhasználni az ecsetet.

20 Lehet, hogy a téglalap felső részét szeretnénk lefesteni, mint-egy kiradírozva azt, de az is eltervezhető, hogy a téglalap körül lévő területet festjük be, anélkül, hogy a téglalap szélét kitörölnénk. Azt is választhatjuk, hogy csak a téglalap belsejét vagy külső részét festjük le, teljesen vagy csak egy kis részét. (18. Ábra) 18. ábra Ilyenkor hívhatjuk segítségül a `festés típus" szelektorát. Hogy azonnal megértsük, milyen különbségről van pontosan szó az öt változat között, elég szemügyre vennünk az alábbi ábrákat (19. Ábra). 19. Ábra

21 Nézzük meg a képeket sorrendben: 1. Eredeti kép 2. Paint normal (mindent lefestünk a festékkel) 3. Paint behind (az objektumokat csak hátul festjük le) 4. Paint fills (csak a színes részeket festjük ki, a vonalakat nem) 5. Paint selection (csak az általunk előzőleg kiválasztott részét festjük ki a rajznak) 6. Paint inside (az egyes objektumoknak csak a belső részét festjük ki Végezetül vizsgáljuk meg az alul található utolsó gombot egyikét (Lock Fill), amivel kiválaszthatjuk, hogy miképp tölthetünk ki területeket ecsettel úgy, hogy elmosódó, árnyalt hatást keltsen. Hogy pontosan megértsük, miről van szó, lássunk egy példát. Jelöljük ki az ecset eszközt, és az árnyaló kitöltést feketéből a pirosba. Először húzzunk két-három ecsetvonást a lapunkra úgy, hogy nem kapcsoljuk be a "Lock Fill" funkciót; aztán töröljük tisztára a rajzlapot, kapcsoljuk be a funkciót, majd húzzunk ismét néhány ecsetvonást a lapra. Azonnal észre fogjuk venni, hogy míg az első esetben az ecsetvonásoknak mind azonos az árnyalata, addig a második esetben az árnyalatok különbözőek. A második esetben úgy képzeljük el, mintha az egyetlen árnyalat a fehér lap alá lenne rejtve, és az egyes ecsetvonásokkal fednénk fel a különböző részeit.

22 Tintatartó Lecke Már többször említettük, hogy az Adobe Flash CS4-el rajzolt objektum két fő részből á11, és mindkettőt perszonalizálhatjuk, azaz testre szabhatjuk. Ez a két fő rész a körvonal és a kitöltés. Az előzőekben már láttuk, hogy a körvonalat és a kitöltést még az objektum tényleges létrehozása előtt módosíthatjuk, de mit tehetünk az objektum elkészítése után? Módosíthatunk-e egy objektum fő részein, miután már megrajzoltuk? Természetesen módosíthatunk, mégpedig a "tintatartó" (Ink Bottle Tool) és a "festékeskanna" (Paint Bucket Tool) eszközök segítségével. Rajzoljunk egy ellipszist normális, 2-es vastagságú szegélylyel, és töltsük ki zöld színnel. Ha készek vagyunk, jelöljük ki a "tintatartót" (20. Ábra).

23 20. Ábra A vonalhoz jelöljük ki a 4-es vastagságot, és a piros színt, majd próbáljuk meg "felborítani a tintatartót", hogy a tinta ráfolyjon az előzőekben rajzolt ellipszisre. Lám-lám, az ellipszis körvonalát ezzel a művelettel az általunk kiválasztott beállítások szerint automatikusan módosítottuk. Most rajzoljunk egy téglalapot, aminek fekete a szegélye, l- es vastagságú, és egyáltalán nincs kitöltve. Osszuk fel soksok vonallal, és próbáljuk meg a tintatartó tartalmát ismét kiborítani a vonalak különféle részeire. Azt fogjuk látni, hogy a vonalak ismét "megtörnek" a kereszteződési pontokban, a módosításokat az egyes szakaszokra tudjuk alkalmazni. (21. és 22. Ábra)

24 21. és 22. Ábra

25 Lecke Festékeskanna Amint azt már előzőleg említettük, van még egy eszköz, amivel az objektumokat megrajzolásuk után módosíthatjuk, ez a `festékeskanna" (Paint Bucket Tool). Jelöljük ki a `festékeskanna" (23. Ábra) eszközt, és vizsgáljuk meg a megjelenő kellékeket. Van olyan, amit már ismerünk, ilyen például a színtábla (a színtábla segítségével kijelölhetünk egy olyan színt, ami a kezdetben használttól eltér, és "ráboríthatjuk" objektumunkra), vagy ilyen a "Lock Fill". Ez utóbbi funkciója jelen esetben egy kicsit különbözik attól, amit az előzőekben láttunk. 23. ábra

26 Lecke Radír Minden általunk rajzolt objektum esetében előfordulhat, hogy valamit eltévesztünk, így aztán az is könnyen előfordulhat, hogy szeretnénk kitörölni, kiradírozni, teljesen vagy részben. Mint minden grafikai program, az Adobe Flash CS4 is rendelkezésünkre bocsát egy kényelmes eszközt (a radírt) (24. ábra). Bár azt hihetnénk, jól ismerjük, ez az eszköz is tartogat számunkra néhány meglepetést. 24. Ábra

27 Térjünk vissza az előző rajzunkhoz (a lekerekített sarkú téglalaphoz, amit egy árnyalt színnel töltöttünk ki), de a "tintatartó" segítségével válasszunk neki egy kontúrszínt (például valami szép pirosat), majd kezdjünk hozzá a "radír" eszköz kellékeinek elemzéséhez. (25. Ábra) Megjelenik a szokásos legördülő lista, amelyen megváltoztathatjuk radírunk méretét és formáját. (26. Ábra) 25. Ábra 26. Ábra Az Eraser Mode ikonnal (27. Ábra) kijelölhetjük, hogy milyen módon kívánjuk a rajz kiradírozását elvégezni (csak a körvonalát radírozzuk ki, vagy csak a kitöltést stb.). Ez a gomb pontosan úgy működik, ahogy azt az ecsetnél láttuk (e célból nézzük meg a 4. leckét). 27. Ábra

28 Végül felfedezünk egy új gombot is, melyet "Faucet"-nek hívnak (28. Ábra). 28. Ábra A "Faucet" gombnak páratlan és valóban igen hasznos funkciója van: segítségével kitörölhetjük egy objektum valamely részének egészét (tehát a körvonalat vagy a kitöltést). A lekerekített szegélyű téglalapunkon próbáljunk meg meggyőződni a radír tényleges működéséről!

29 Lecke Alakzatok csoportosítása Most már olyan jól tudunk objektumokat készíteni, hogy spontán felmerülhet bennünk az igény arra, hogy a különféle egyszerű alakzatokat közelebb hozzuk egymáshoz, természetesen azzal a céllal, hogy egy kicsit bonyolultabb rajzokat is készíthessünk. Az első probléma, amibe azonnal beleütközünk, a következő: nem lehet elmozdítani egy teljes objektumot, mivel a körvonal és a kitöltés két külön dolog. A felvetett problémára jó megoldásnak ígérkezik a következő eljárás: kijelöljük a körvonalat, megnyomjuk a "shift" billentyűt, és kijelöljük az objektum kitöltését. Ezzel a művelettel mindkét részt kijelöltük. Azonban ahányszor visszavonjuk objektumunk kijelölését, mindig ugyanabban a zavarba ejtő helyzetben találjuk magunkat: a rajzlapunkon egy sor egymástól külön álló egyszerű alakzatot fogunk látni.

30 Lehetséges lenne, hogy nem tudjuk őket összecsoportosítani? Természetesen megnyugtató választ kapunk a problémára. Abból kell kiindulnunk, hogy a komplex rajzok elkészítéséhez az egyszerű alakzatoktól vezet az út. Rajzoljunk egy ellipszist és egy téglalapot, majd győződjünk meg róla, hogy ténylegesen két külön részből állnak. Jelöljük ki az ellipszis körvonalát és kitöltését, majd nyissuk meg a "módosít" (Modify) menüt, és jelöljük ki a " csoportosit" (Group) opciót. Az ellipszis egy csapásra egyetlen egy objektummá változott, amit most már könnyedén mozgathatunk ideoda (valójában az ellipszis is objektumok "csoportja"). (29. Ábra) 29. ábra Végezzük el ugyanezt a műveletet a téglalapra, hogy két jól elkülöníthető objektumcsoportot kapjunk. Most minden ismert eszközt felhasználva (radír, ecset) próbáljuk meg módosítani az objektumcsoportokat. Egyszerűen nem lehet! Létezik olyan objektumcsoport, amely azzal a hihetetlen tulajdonsággal rendelkezik, hogy összetörhetetlen!

31 Az egyetlen megengedett művelet az, hogy kijelöljük az objektumcsoportot, és a billentyűzeten található "DEL" billentyű segítségével kitöröljük, kiradírozzuk. Ahhoz, hogy az objektumcsoportunk egy részét módosítani tudjuk, duplán rá kell kattintani (mire a lap többi része ki fog fakulni, ezzel jelezve, hogy nem módosítható), és ismét különböző darabokban találjuk az objektumunkat. A módosítás befejezéséhez és ahhoz, hogy visszatérhessünk az objektumcsoporthoz, a kifakult terület egy tetszőleges pontján ismét duplán kell kattintanunk. Hogyan szedhetünk szét egy csoportot? A válasz egyszerű: jelöljük ki és hajtsuk végre a következő parancsokat: "Modify" > "Ungroup", ezzel máris visszatérhetünk a kezdeti állapothoz. Utolsó információként talán érdemes megjegyezni, hogy az objektumcsoportokat is csoportosíthatjuk.

32 Lecke Időegyenes Megérkeztünk a fejezet legfontosabb pillanatához, lassan ugyanis itt az ideje, hogy megismerkedjünk az idegyenessel. Ettől a pillanattól fogva egy objektumot "létezésének" különböző pillanatában rajzolhatjuk meg. Kezdésként vizsgáljuk meg alaposabban az "idegyenest" (Timeline), nézzük meg, hogyan épül fel. Lényegében egy sor üres képkockával van dolgunk; ha megtöltjük őket, animációhoz jutunk. (30. Ábra) 30. Ábra Próbáljuk meg kijelölni az ötös képkockát (de azt is vegyük észre, hogy az elsőben van egy fehér golyó), és a munkalapunkra rajzoljunk egy ellipszist. Mi történt?

33 Az ellipszis továbbra is ténylegesen jelen van a munkalapunkon, azonban az első képkockában látjuk! Vegyük észre, hogy a fehér golyó feketévé változott, és az ötös képkocka kijelölése eltűnt. (31. Ábra) 31. Ábra Ez azért van, mert csak az úgynevezett "kulcsképkockába" (keyframe) lehet rajzolnunk, vagyis egy olyan képkockába, ami "ki van jelölve" a többihez képest (mindez tulajdonképpen nem is olyan különös; gondoljunk csak bele: már az alapfokú tanfolyamon elejétől kezdve mindig azt hangoztatjuk, hogy csak akkor tudunk egy objektumon valamilyen műveletet elvégezni, ha kijelöljük). Vonjuk vissza az utolsó műveletet (így aztán ismét tiszta lappal kezdhetünk a munkának), és próbáljuk meg a képkockákat megfelelő módon használni: jelöljük ki az 1-es képkockát (az egyetlen, amely rendelkezik keyframe-mel) rajzoljunk egy négyzetet majd jelöljük ki a 2-es képkockát és szúrjunk bele egy üres keyframet (Insert >Timeline> Blank Keyframe). (vagy kattintsunk a képkockára jobb gombbal, és Insert Blank Keyframe)

34 Erre - ha minden igaz - azt fogjuk látni, hogy az 1-es képkockában feltűnik egy fekete, míg a 2-es képkockában egy fehér golyó. Most rajzoljunk egy téglalapot, és azt fogjuk látni, hogy a második golyó is feketévé válik. Ekkor, ha felváltva kijelöljük az első és a második képkockákat, azt tapasztaljuk, hogy mindegyikükben csak egy rajz van. Most láttuk a rajzfilmtechnika egyik alapelvét: ha megrajzolunk néhány képkockát, és gyorsan elkezdjük őket egymás után görgetni, mozgóképet kapunk.

35 Lecke Rövid animáció készítése képkockánként Zárjuk be az összes eddig elkészített dokumentumot; ezek azt a célt szolgálták, hogy az Adobe Flash CS4 egyes funkcióinak működését ellenőrizhessük. Mostantól kezdve komolyan fogunk dolgozni. Kezdjük a munkát azzal, hogy elkészítünk 10 üres képkockát: Ezekre a mozink egyes részeit fogjuk rárajzolni. A művelethez célszerű az "F7" gyorsbillentyűt segítségül hívni. Jelöljük ki egyenként az első tíz képkockát úgy, hogy minden egyes képkockánál lenyomjuk az "F7" billentyűt (ezek a még nem használt kulcsképkockák). Rajzoljunk egy piros kört az 1. képkockára, majd radírozzuk ki a körvonalát. Másoljuk át, és illesszük be a tíz kulcskép-kockába úgy, mintha a kör egy meghatározott utat követne. (32. Ábra)

36 32. ábra A végén menjünk rá az 1. képkockára, és nyomjuk le az "Enter" billentyűt; erre látni fogjuk, hogy a kör gyorsan áthelyeződik a munkalapunkon. Megfigyelés: Ahhoz, hogy a bemutatott effektussal láthassuk a mozi fejlődését, meg kell nyomnunk az `Átlátszóság" (Onion Skin) gombot (33. Ábra), ugyanis ennek segítségével az elkészített képkockákat egymásra helyezve láthatjuk. 33. Ábra Elkészítettük első animációnkat! Tény, hogy talán egy kicsit egyszerű, gyönyörűnek is csak hatalmas túlzással nevezhetnénk, ráadásul elég kezdetleges, de a lényeg a lényeg: működik!

37

38 Továbblépés a mozi készítés alapjai felé Most, hogy már tökéletesen tisztában vagyunk az Adobe Flash CS4 alapvető rajzeszközeinek használatával, rátérhetünk a kifinomultabb rajz- és animációs technikák elemzésére. A most következő fejezetben azt fogjuk megtanulni, hogyan hozhatunk létre komplex objektumokat. Ezen kívül meg fogjuk látni, hogyan tárolhatjuk objektumainkat úgy, hogy újrafelhasználhatóak legyenek mozijainkban, és hogyan kezelhetjük a szövegeket. Végül azzal fogjuk a fejezetet zárni, hogy bemutatjuk, hogyan készíthetünk animációkat úgy, hogy csak az első és az utolsó képkockából indulunk ki.

39 Lecke Torzítás, átméretezés és forgatás Különféle téglalapok és ellipszisek rajzolásában már óriási gyakorlatra tettünk szert. Tudjuk, hogy a körvonalat és a kitöltést külön is kezelhetjük, és azt is megtanultuk, hogyan módosíthatjuk az egyiket vagy a másikat. Egyelőre azt azonban még nem tudhatjuk, hogy bármilyen egyszerű alakzatot kedvünk szerint eltorzíthatunk, mégpedig egyszerűen úgy, hogy "fülön ragadjuk". Kezdjük azzal, hogy rajzolunk egy körvonal nélküli téglalapot (ha nem emlékeznénk, hogyan kell egy ilyet megrajzolni, azonnal menjünk vissza az 1. Fejezethez!). Válasszuk Id a kijelölést eszközt (Selection Tool). (34. ábra) 34. ábra

40 Most próbáljuk meg az egérkurzort a téglalapnak az egyik oldalához vagy az egyik sarkához közelíteni úgy, hogy ne jelöljük ki. Figyeljük meg, hogy a kurzor mellett néhány apró kis szimbólum sorakozik fel, amelyek közlik velünk, hogy ha akarjuk, eltorzíthatjuk az alakzatunkat. Próbáljuk ki, mi történik mindkét esetben, húzzuk az egeret, és nézzük meg, milyen hatást érhetünk el vele. Ha a téglalapot az egyik oldalánál ragadjuk meg, és elkezdjük ide-oda húzni, a téglalap kérdéses oldalát fogjuk eltorzítani; ha pedig az egyik sarkánál ragadjuk meg, akkor a sarkát fogjuk eltolni valamerre, amiből természetesen az következik, hogy magát a téglalapot is eltorzítjuk. ( ábra) 35. ábra 36. ábra Ugyanazokat a módosításokat bármely más alakzaton is elvégezhetjük, és minden tökéletesen működik akkor is, ha a rajzolt ábrának meghagyjuk a széleit. Ha nagyon odafigyeltünk, talán észrevettük, hogy az elvégzett művelet közben a "Snap" funkció bekapcsolva maradt.

41 M egyszerű alakzatokat másképpen is módosíthatjuk, mégpedig úgy, hogy magukat a formákat lekerekítjük, vagy kiélezzük. Talán jobb, ha egy konkrét példával illusztráljuk, mi is ennek az állításnak a jelentése. Rajzoljunk egy ellipszist, és változtassuk át "babszemmé". Ehhez a művelethez meg kell ragadnunk az egyik hosszabb oldalát. Ha idáig megvagyunk, jelöljük ki az ábrát, majd kattintsunk a "Smooth" vagy a "Straighten" gombra (37. ábra), amelyeket a "Selection Tool" kellékeként találhatunk meg. 37. ábra Most pedig nézzük meg alaposan, mi is történik az objektumunkkal. Az egyszerű alakzatokat még könnyebben eltorzíthatjuk, ha magát az alakzatot felnagyítjuk, lekicsinyítjük vagy elforgatjuk. Rajzoljunk egy négyzetet (vigyázzunk, hogy szabályos négyzet legyen!), jelöljük ki. Kattintsunk a következő két gomb (38. ábra) egyikére: " Forgat" (Rotate and Skew), vagy Átméretez - Felnagyít" (Scale).

42 38. ábra Vegyük észre, hogy feltűnik néhány "Fogantyú" (forgató vagy méretező kocka), és pontosan ezek lesznek a segítségünkre, ha el kívánjuk forgatni, vagy át akarjuk méretezni a kijelölt objektumot (vagy objektumcsoportot).

43 Lecke Alakzatok kivágása és összeolvasztása (összerakása) Nem mindig sikerül úgy eltorzítanunk egy alakzatot, hogy a kívánt eredményre jussunk. Sokszor előfordul, hogy olyan nehézségekbe ütközünk, hogy már nem tűnik kényelmes megoldásnak az objektumok ilyen rendszerű átváltoztatási módja. Például: próbáljunk meg egy egyszerű "kulcslyukat" készíteni (mint amilyen az ábrán is látható), és azonnal rájövünk, hogy vannak olyan esetek, amikor sokkal könnyebbnek tűnik két egyszerű alakzatot összeilleszteni, mint egyet eltorzítani ahhoz, hogy a kívánt eredményre jussunk. (39. ábra) 39. ábra

44 Szerencsére az Adobe Flash CS4 ezt a lehetőséget is tálcán kínálja, ráadásul - kivételesen - egyszerűen elvégezgető műveletről van szó. Az egyetlen szabály, amire emlékeznünk kell majd, a következő: ha két, ugyanolyan színű egyszerű alakzatot egymásra helyezünk, egyetlen alakzattá olvadnak össze. Ehhez hasonlóan, ha két különböző színű alakzatot helyezünk egymásra, az, amelyik elfedi a másikat, mintegy ki fog vágni egy darabot az alsó alakzatból saját formájával. Győződjünk meg saját szemünkkel ezekről a lehetőségekről. Rajzoljunk egy piros kört (körvonal nélkül), valamint egy ugyanolyan színű téglalapot (ugyancsak körvonal nélkül), ami részben eltakarja a kört. Most próbáljuk meg kijelölni ezeket az alakzatokat, és meg fogjuk látni, hogy nem tudjuk őket többé szétválasztani. Rajzoljuk meg ugyanezeket az alakzatokat, és próbáljuk ki mindezt fordítva, úgy, hogy az alakzatoknak legyen különböző a színük (például legyen a kör piros, a téglalap pedig zöld). Ezúttal azt fogjuk tapasztalni, hogy a két színnek csak az egyikét tudjuk kijelölni, és észre fogjuk venni, hogy a zöld alakzat (tehát amit utoljára rajzoltunk), mintha kivágta volna a saját formáját a pirosból, és szó szerint "bekebelezte" az eltakart részt. ( ábra)

45 40. ábra 41. ábra Most már nem tűnik bonyolult feladatnak egy kulcslyuk elkészítése, amiről a lecke elején is szó volt. Elég, ha két különböző alakzatot készítünk, és a végén egyesítjük őket. Végül még azt is megtehetjük, hogy a rendelkezésre álló eszközeinkkel eltorzítjuk egy kicsit, így legalább teljesen élethű lesz.

46 Lecke Szimbólumok és példányok (objektumok) többszöri felhasználása Megtanultuk, hogyan hozhatunk létre objektumokat rajzeszközök segítségével Azt is megtanultuk, hogyan készíthetünk egyszerű animációkat az objektumaink felhasználásával. Előfordulhat azonban, hogy egy animációban többször is be kell szúrnunk ugyanazt az objektumot (ha egy rétre tíz százszorszépet szeretnénk rajzolni, jó lenne, ha nem kellene tízszer lerajzolnunk ugyanazt a százszorszépet!). Óhatatlanul is felmerül a kérdés mindenkiben: miért ne használhatnánk a "Másol és Beilleszt" eszközt egy objektum többszöri alkalmazásához? Valójában a multimédiás animációk létrehozásánál sokszor előfordul, hogy egy előzőleg elkészített rajzot többször is fel kívánunk használni, ezért az Adobe Flash CS4 egy igen hatékony objektumkezelő eszközzel lát el bennünket.

47 Tegyük fel, hogy egy asztalt kell rajzolnunk, amit négy szék vesz körül (42. ábra). 42. ábra Kezdjünk hozzá! Először rajzoljunk egy kört, ami az asztalt fogja ábrázolni, majd két különböző szélességű téglalapot, aminek lekerekítjük a sarkait. Ez utóbbi a széket fogja ábrázolni (hogy el ne veszítsük a szék darabjait félúton, javasoljuk, hogy mindenki csoportosítsa össze a szék alkotóelemeit - csoportosítás: 1. fejezet-8. lecke). (43. ábra) 43. ábra Ha idáig kész vagyunk, valószínűleg senki sem szeretne még három széket rajzolni szabadkézzel, hiszen ezzel csak az időt fecsérelnénk, ráadásul könnyen előfordulhat, hogy még egyformák sem lesznek.

48 Jelöljük ki az egész széket (ha előzőleg elvégeztük a csoportosítást, akkor ehhez a művelethez elegendő egy szempillantásnyi idő), nyissuk meg az "Modify" menüt, és jelöljük ki a "Convert to Symbol" menüpontot. (Másik lehetőség: Jelöljük ki az egész széket, kattintsunk rá jobb egérgombbal, és válasszuk a Convert to Symbol" lehetőséget.) A bejelentkező ablakba írjuk be a "Szék" szót, jelöljük be a Graphic opciót, majd nyomjuk meg az "OK" gombot. Erre az objektumunk közepében most megjelenik egy kis kereszt. Remek, ez azt jelenti, hogy a székünket "Szimbólummá" alakítottuk, vagyis egy olyan objektummá, amit többször is felhasználhatunk. Ezt a fogalmat érdemes alaposabban körüljárni, ezért érdemes egy konkrét példán bemutatni, miről is van tulajdonképpen szó. Tegyük fel, hogy egy olyan irodában dolgozunk, ahol egy számítógép sincs (bár hihetetlennek tűnik, de léteznek még ilyen irodák). Gyakran fordul elő, hogy egy űrlapot kell készítenünk, amire személyi adatok kerülnek, amelyeket természetesen kézzel kell beírnunk. A legjobb, ha írógéppel elkészítünk egy mintaűrlapot, és üresen hagyjuk a kitöltendő rovatokat. Eltesszük a mintaűrlapot, gondosan megőrizzük, és ahányszor csak szükség van rá, annyiszor készítünk róla fénymásolatot. Arra vigyáznunk kell, hogy mindig az eredetit őrizzük meg

49 (a közigazgatási hivatalokban már mindenki szerzett arra vonatkozóan tapasztalatot, hogy milyen is egy másolatnak a másolata: mindig borzasztó minőségű). Nos, az a szimbólum, amit az imént készítettünk, nem más, mint egy eredeti "mintaűrlap", a munkalapunkon megjelenő szék pedig nem más, mint az első másolat. Mindannyiszor, amikor egy ilyen székre lesz szükségünk, elég lesz, ha "kivesszük" a szimbólum egy újabb másolatát, és rátesszük a munkalapunkra. De hová lett az eredeti székünk (a "szimbólum")? Az Adobe Flash CS4 gondoskodott arról, hogy megfelelő helyre tegye: eltette a filmünkhöz rendelt "könyvtárba" (ugyanis minden egyes filmhez tartozik egy könyvtár). Ha le akarjuk kérni, elég megnyitnunk a "Window" menüt, és kijelölnünk a "Library" (könyvtár) menüpontot. (44. ábra) 44. ábra De mit tegyünk, ha újra fel szeretnénk használni a szimbólumot?

50 Mindössze annyit kell tennünk, hogy a kérdéses menüpontot a könyvtárból az egér segítségével áthúzzuk a munkafelületre. Meg fog jelenni az adott szimbólumunk újabb "ismétlődése", "példánya" (így nevezzük a másolatot; angolul "instance"). Remek! Húzzuk át háromszor a "Szék" szót a könyvtárból a munkaterületre, és egészítsük ki az asztalunkat a többi székkel. Egy apró jótanács: a székek pontos elforgatásához: a "Modify" menüben keressük ki a "Transform/Scale and Rotate" almenüt. Be fog jelentkezni egy ablak, amelynek segítségével egy objektumot a kívánt százalék közvetlen beírásával nagyíthatunk fel ("Scale") vagy a kívánt szög értékének beírásával forgathatunk el ("Rotate"). Mentsük el munkánkat a következő néven: Asztal székekkel"

51 Példányok és szimbólumok módosítása Szimbólumok létrehozása és azok másolatának (példányainak) felhasználása sokkal több dologra alkalmazható eszköz, mintsem gondolnánk. Ennek az objektumkezelő rendszernek az az előnye, hogy egy adott animációban egy szimbólumnak egyenként is módosíthatjuk az egyes példányait (például, ha egy nagyobb vagy más színű széket szeretnénk kapni); ugyanakkor közvetlenül a szimbólumot is módosíthatjuk, így minden olyan példányt, ami a munkaterületen jelen van, automatikusan módosítunk. Nyissuk meg az Asztal székekkel" filmünket (45. ábra), és jelöljük ki a jobb oldali széket. (46. ábra) 45. ábra

52 46. ábra A Properties (Beállítások) panelen meghatározhatjuk a szimbólum tulajdonságait. (47. ábra) 47. ábra A Color Effect pontban a legördülő menüből válasszuk a "Tint" menüpontot. Határozzuk meg, hogy milyen százalékban kívánjuk az adott színt módosítani (óvatosan bánjunk a színmennyiséggel, mert a módosítása szék szegélyét is érinti).

53 Ismételjük meg a műveletet mind a négy székre, úgy, hogy mindegyiknek más és más legyen az árnyalata. Ha idáig megvagyunk, alakítsuk át az asztalt is szimbólummá. Módosítsuk az asztal Alpha tulajdonságát - "alfa csatornáját" (ami az objektum átlátszóságát határozza meg). Ezt a következőképpen érjük el: Válasszuk a Properties>Color Effect menüben az "Alpha" menüpontot, változtassuk meg az értékeket pl. 75 %-ra). Amint kész vagyunk ezzel a művelettel, próbáljuk meg az egyik széket betolni az asztal alá. Ez utóbbit átlátszónak fogjuk látni. (48. ábra) 48. ábra Végül próbáljuk ki a "Properties" panel többi parancsát is, hogy lássuk, milyen hatást érhetünk el velük az egyes példányokon. De mit tehetünk, ha egyenesen a szimbólumot szeretnénk módosítani?

54 Kattintsunk a jobb egérgombbal az egyik (bármelyik) székre, és a legördülő menüből jelöljük ki az "Edit" opciót. Erre egy szék kivételével minden el fog tűnni a munkaterületünkről. Mindez azért történik, mert elhatároztuk, hogy módosítani fogjuk a "Szék" szimbólumot. Töröljük ki a szék egyes komponenseinek csoportosítását ("Modify > Break Apart"), majd módosítsuk a szék támlájának színét, hogy kétszínűvé váljon. Ezek után az "Control" menüből jelöljük ki az "Test Movie" menüpontot, és térjünk vissza az eredeti állapothoz. Látni fogjuk, hogy az összes szék kétszínű lett. (49. ábra) 49. ábra A történtekre az ad magyarázatot, hogy módosítottuk az eredeti szimbólumot, vagyis közöltük az Adobe Flash CS4- el, hogy nekünk a szimbólum nem felelt meg úgy, ahogy volt. Ebből következik, hogy a példányok sem feleltek meg, így aztán ezeket is az új változattal kellett helyettesíteni. Képzeljük csak el, ez ugyanaz a helyzet, mintha az irodában a géppel írt űrlapot módosítottuk volna, és ezzel minden egyes fénymásolatot is módosítanunk kellene.

55 Bitmap képek importálása és vektoros képpé alakítása Ha már idáig eljutottunk, valószínűleg mindenki fejében megfordult a kérdés, hogy vajon az Adobe Flash CS4-el csak olyan animációkat hozhatunk-e létre, amelyeket a rendelkezésre álló rajzeszközökkel készítünk, vagy esetleg már létező képeket is felhasználhatunk. Természetesen már létező képekből is kiindulhatunk. Az Adobe Flash CS4-el importálhatjuk a legelterjedtebb grafikai formátumokat (az animált gif-ek is idetartoznak), ráadásul még azt is megtehetjük, hogy egy bitmap képet vektoros formába konvertálunk. Egy kép vagy egy film importálása sokkal könnyebb, mint azt bárki is gondolná. Mindössze a következőket kell tennünk hozzá:

56 Megnyitjuk a "File" menüt, kijelöljük az "Import>Import to Stage" menüpontot, és megkeressük az importálandó fájlt (a kép a munkaterületen fog rendelkezésünkre állni, és a könyvtárba lesz elmentve, de nem szimbólumként). Ha ezzel megvagyunk, máris úgy kezelhetjük a bitmap képet, mintha egy olyan rajzról lenne szó, amit magunk készítettünk. A képek esetében azonban egy kissé komplikáltabb ügyről van szó, mint az egyszerű alakzatok kezelése esetében, de az Adobe Flash CS4 két érdekes eszközzel is segíteni fog bennünket. A tankönyvhöz tartozó CD-ROM Flash Tutorial mappájából importáljuk a Logo.JPG képet. Jelöljük ki a képet, és kattintsunk a "Modify" menü "Break Apart" menüpontjára. Egyelőre a kép egy egyszerű és nagy alakzat, ezért nyugodtan körbevághatjuk ugyanennek a fejezetnek a 2. leckéjében látott eszközökkel, valamint a "Lasso Tool" kijelölő eszköz segítségével (50. ábra). 50. ábra

57 Ezzel az eszközzel ugyanis szabadkézzel, sokszögekként vagy színhasonlóság alapján kijelölhetjük egy objektum bármely részét, pontosan úgy, ahogy ezt minden grafikai programban megtehetjük. (51. ábra) 51. ábra Importáljuk ugyanezt a képet, és jelöljük ki a "Modify" menüből a Bitmap" > "Trace Bitmap" menüpontot. Az ablak első megjelenő mezőjébe ("Color Threshold') egy 0-tól (maximális pontosság) 500-ig (minimális pontosság) terjedő számot adhatunk meg. Ésszerű megoldásnak tűnik az 50-es érték megadása. Így alakítjuk "vektorossá" a képet, tehát tulajdonképpen az Adobe Flash CS4 egyszerű alakzataiba fogjuk konvertálni. (Ha minderről szeretnénk megbizonyosodni, elegendő, ha a képünkön lévő összes különböző színű objektumot egyenként kijelöljük).

58 Lecke Szövegbevitele, módosítása, egyszerű alakzatokba történő konvertálása Az objektumok létrehozásával kapcsolatos utolsó téma, amivel foglalkozni fogunk, nem más, mint a szövegek kezelése. Ami a bevitelt illeti, az nincs különösebb szabályhoz kötve, elegendő, ha kijelöljük a "Text Tool" eszközt (52. ábra). 52. ábra

59 Kijelöljük a munkaterületen azt a pontot, ahol szeretnénk elkezdeni írni (a jobb felső sarokban egy kis üres téglalap fog megjelenni egy körrel), és máris elkezdhetjük bevinni a szöveget (mire a téglalap a megfelelő méretre kiszélesedik). Próbáljuk meg beírni a következő mondatot: "Üdvözlünk mindenkit" a "Times New Roman" karakterkészlettel, "24"-es méretben. Jelöljük ki a "Selection Tool - Nyíl" eszközt, és próbáljuk meg a mondatot áthelyezni a munkalap egy másik, tetszés szerinti pontjára. Láthatjuk, hogy minden pontosan úgy megy, mintha egy normális objektumcsoportról lenne szó. (53. ábra) 53. ábra Hagyjuk kijelölve a mondatot, és kattintsunk újból a "Text" eszközre. Tapasztalni fogjuk, hogy a kérdéses szöveget kedvünk szerint módosíthatjuk (típusát, méretét, színét, a karakterek színét). Most próbáljuk meg a jobb felső sarokban látható kis kört ide-oda húzni úgy, hogy a szövegdoboz méretét lecsökkentsük. Észre fogjuk venni, hogy a kis kör kis négyzetté fog átalakulni, és a szöveg annak a mezőnek a formájához alkalmazkodik, amelyben megtalálható (a mi esetünkben, mivel

60 a szövegdoboz túl szűknek bizonyult, a szöveg a következő sor elejére ugrott). (54. ábra) 54. ábra Ez az általános szabály, tehát, ha a szövegdoboz jobb felső sarkában van egy kis kör, akkor a mező fog a beírt szöveg méretéhez alkalmazkodni. Fordított esetben, tehát ha egy kis négyzetet látunk ugyanott, maga a szöveg fog a szövegdoboz hosszúságához igazodni. Kattintsunk duplán a kis négyzetre, és figyeljük meg, ahogy visszatér a kis kör, és a szövegdoboz ismét a szöveg hosszúságához fog igazodni. Végül az Adobe Flash CS4 által felkínált egyik érdekes lehetőségre hívjuk fel a figyelmet. Jelöljük ki az imént begépelt szöveget a " Selection Tool - Nyíl" eszközzel (ellenőrizzük, hogy minimális mérete "36" legyen), majd kattintsunk a "Modify" menü "Break Apart" menüpontjára. A szöveg nem szöveg többé, egyszerű alakzatok halmazára bomlott szét, így az egyes betűket ide-oda mozgathatjuk, kiszínezhetjük, különféle színekre festhetjük, a "Paint

61 Bucket Tool - Tintatartó" eszközzel szegélyt készíthetünk nekik, de tetszés szerint el is torzíthatjuk őket. (55. ábra). 55. ábra Ha az eredeti szövegünket vissza akarjuk kapni, akkor a visszavonás gombot használjuk.

62 Lecke Automatikus animáció két kulcsképkockából kiindulva Most ismét az animáció a téma. Az 1. fejezet végén sikerült sok apró képkockából álló mini-filmet készítenünk. Kezdetnek nagyszerű teljesítmény volt, de most már többre vágyunk, hiszen az Adobe Flash CS4 lehetőségeivel élve ennél jóval többre lehetünk képesek. A leggyorsabb és legrugalmasabb módja az animációk létrehozásának a következő: elkészítjük az első és az utolsó képkockát, majd átadjuk a terepet az Adobe Flash CS4-nek, és hagyjuk, hogy a filmünkhöz szükséges összes közbülső képkockát Ő készítse el. Rajzoljunk egy piros négyzetet körvonal nélkül a munkaterület bal oldalán egy tetszés szerinti helyre. Alakítsuk át szimbólummá (a szimbólumot hívjuk "Négyzetnek'). Jelöljük ki a 20-as számú képkockát, és kattintsunk az "Insert>Timeline" menü "Keyframe" menüpontjára, hogy

63 beszúrhassuk a kulcsképkockát, ami ugyanazt a négyzetet fogja tartalmazni, mint az 1. képkocka. Most a 20. képkocka négyzetét helyezzük el a jobb oldali munkaterület egy tetszés szerinti pontján, és módosítsuk a színt sárgára a Properties panel Color>Tint menüpontjának segítségével (ne felejtsük el, hogy egy példánnyal dolgozunk). Kattintsunk a jobb egérgombbal az egyik tetszőleges közbülső képkockára (a 2.-tól a 19.-ig bármelyik megfelel), és a megjelenő helyi menüből válasszuk a Create Motion Tween menüpontot (automatikus animáció készítése két képkocka között). Erre egy kék színű csík fog feltűnni, amelyen egy nyíl látható, ami az képkockáig tart. (56. ábra) 56. ábra Jelöljük ki az 1. képkockát, és nyomjuk meg az "Enter" billentyűt, hogy elindítsuk az animációt. Megfigyelhetjük, hogy az Adobe Flash CS4 nemcsak elkészítette az animációhoz szükséges képkockákat, de arról is gondoskodott, hogy megfelelő átmenet legyen a pirosból a sárga színbe. Jól jegyezzük meg: a " Create Motion Tween"-nel történő animáció készítésénél az első és az utolsó képkockában található objektum ugyanannak a szimbólumnak az ismétlődése kell, hogy legyen!

64 Most már elmondhatjuk, hogy az Adobe Flash CS4-ben rejlő képességeket kihasználva tettük le az animáció készítés alapjait. Nézzük meg, mi fog történni, ha az egérgombbal az animáció egyik közbülső képkockájára kattintunk. A Properties panelen számos beállítási lehetőséget figyelhetünk meg. (Ezzel most egy kis ízelítőt kapunk abból, ami hamarosan következik.). A Properties panelen a "Rotate" (forgatás) beállításánál jelöljük ki a "Clockwise" CW (az óramutató járásával megegyező irányban) vagy a "Counterclockwise" CCW (az óramutató járásával ellentétes irányú) opciót, majd a felette jobb oldali mezőbe szúrjuk be az "1"-es értéket, és nyomjuk meg az "Enter" billentyűt (57. ábra) 57. ábra Ezzel a művelettel testre szabtuk az animációt, és az objektumot teljesen megfordítottuk mozgás közben.

65 Lecke Rétegek (Layers): Objektumok külön rétegeken történő elhelyezése munkánk leegyszerűsítéséhez Mi történik, ha nem egy, hanem több tárgyat szeretnénk animálni? A megoldáshoz vezető út a könyv első mondatai között olvasható: "amikor egy probléma bonyolulttá válik, célszerű felosztani al-problémákra. Miután minden al-problémát megoldottunk, a nagy és komplex problémát is megoldottuk." Tehát, ha a makro-problémánk az, hogy három különböző objektumot (például egy négyzetet, egy téglalapot és egy kört) szeretnénk animálni, a megoldás az lesz, hogy három olyan al-problémára osztjuk, amivel már könnyedén megbirkózunk:

66 Négyzet animálása. Téglalap animálása. Kör animálása. Mindehhez három különböző munkalapot fogunk felhasználni, és ezeket "Rétegeknek" vagy "Layer"-eknek fogjuk hívni. (Ha a valós életben próbálunk valamilyen párhuzamot keresni, gondolhatunk például arra, hogy minden objektumot egy külön, átlátszó lapra rajzolunk fel, és a végén egy-másra fogjuk helyezni a három lapot, így megkapjuk a komplex képet). Először is nyissuk meg az "Inert" menüt, és jelöljük ki a Timeline">"Layer" menüpontot. (Ismételjük meg még kétszer ugyan-ezt a műveletet, hogy megkapjuk a három különböző szintet.) (58. ábra) 58. ábra Most nevezzük át: A "Layer 1"-et "Négyzet"-nek (ehhez elég, ha duplán kattintunk a réteg nevére), A "Layer 2"-t "Téglalap"-nak A "Layer 3"-t pedig "Kör"-nek.

67 Ezek a mi egymásra helyezett, három átlátszó lapunk (a "Kör" réteg van legfelül). Mostantól fogva egymástól elválasztva dolgozhatunk rajtuk, ehhez elég lesz kijelölnünk őket. (59. ábra) 59. ábra Most rajzoljunk: egy kék színű négyzetet a "Négyzet" réteg-re egy zöld színű téglalapot a "Téglalap" rétegre egy piros kört a "Kör" rétegre. Ne felejtsük el, hogy mindegyik objektumot át kell alakítanunk szimbólummá. Ha ezzel elkészültünk, próbáljuk meg kijelölni egyik-másik objektumot, és figyeljük meg, hogy az objektum kijelölése egyben a réteg kijelölését is jelenti (ha kijelöljük a kört, egyben a "Kör" réteget is kijelöltük, és így tovább). Helyezzük a kört a téglalapra, és vegyük észre, hogy ez utóbbit letakartuk (a legalsó lesz). Most próbáljuk meg a "Kör" réteget a "Négyzet" réteg alá

68 húzni (ehhez elégséges a réteg nevét áthúzni, ezzel az egész réteget megmozgatjuk). Láthatjuk, hogy most a négyzet takarja el a kört. Nagyszerű, akkor most ismét rájöttünk egy általános szabályra: a rétegek fölülről lefelé vannak elrendezve úgy, hogy a felső réteg eltakarja az alsó réteget; ezen kívül, minden réteget áthúzhatunk oda, ahová akarjuk, tehát a többi alá vagy fölé. Itt az idő, hogy végre minden réteg számára automatikus animációt készítsünk, és ezzel megoldjuk az eredeti problémánkat. Készítsük el a kör animációját: Válasszuk ki a Kör" réteget, jelöljük ki az 1. képkockát. Jelöljük ki a 20-as számú képkockát, és kattintsunk az "Insert" menü Timeline">"Keyframe" menüpontjára, hogy beszúrhassuk a kulcsképkockát, ami ugyanazt a kört fogja tartalmazni, mint az 1. képkocka. Most a 20. képkocka kör helyezzük el a jobb oldali munkaterület egy tetszés szerinti pontján. Ezt a képkockát is alakítsuk át szimbólummá (Köri) és módosítsuk a színt sárgára a Properties panel Color>Tint menüpontjának segítségével. Kattintsunk a jobb egérgombbal az egyik tetszőleges közbülső képkockára (a 2.-tól a 19.-ig bármelyik megfelel), és a megjelenő helyi menüből válasszuk a Create Motion Tween menüpontot (automatikus animáció készítése két képkocka között).

69 Erre egy kék színű csík fog feltűnni, amelyen egy nyíl látható, ami az képkockáig tart. Jelöljük ki az 1. képkockát, és nyomjuk meg az "Enter" billentyűt, hogy elindítsuk az animációt. Ezután következhet a négyzet, majd a téglalap animációja is. Befejezésképpen következzék néhány technikai megjegyzés a rétegekre vonatkozólag: minden egyes réteget elrejthetünk (tehát annak érdekében, hogy jobban tudjunk a többivel dolgozni, láthatatlanná tehetjük) (60. ábra) 60. ábra Minden egyes réteget blokkolhatunk, azaz lezárhatunk (ez azt jelenti, hogy látható, de nem módosítható). (61. ábra) 61. ábra Minden egyes réteget részben elrejthetünk (nem teljesen), (62. ábra). 62. ábra

70 (Ez azt jelenti, hogy a rétegeken lévő objektumoknak csak a körvonalát fogjuk látni.) Ezeken túl, ha egy animációnak minden képkockáját kijelöljük (például, tételezzük fel, hogy kijelöljük a négyzet összes képkockáját), és elkezdjük jobbra húzni, olyan hatást érünk el, mintha késleltetnénk egy animációt a többihez képest.

71 Lecke Egyszerű alakzatok, automatikus animálása, avagy alakzatok csodával határos átváltozása Ennek a fejezetnek a 7. leckéjében tanult automatikus animációkat csak szimbólumokon végezhetjük el, és csak olyan mozgást érhetünk el velük, amelyek nem torzítják el az objektumokat. Azonban sokszor lehet még szükségünk arra, hogy az animáció során az objektumunkból egy másik objektum legyen (például képzeljünk el egy négyzetet, amiből kör lesz, vagy egy hernyót, amiből lepke lesz). Ezt a fölöttébb izgalmas "effektust" úgy érhetjük el, hogy az animációt nem szimbólumokon, hanem egyszerű alakzatokon hozzuk létre.

72 Rajzoljunk egy piros négyzetet körvonal nélkül az 1. képkockába, bármely rétegre, majd szúrjunk be egy "Keyframe"- et (Kulcsképkockát) a 20. képkockába, és ez utóbbira rajzoljunk egy sárga kört (ugyanúgy körvonal nélkül). Ne felejtsük el kitörölni a négyzetet. Jelöljünk ki tetszés szerint egy közbülső képkockát. Az Insert legördülő menüből jelöljük ki a "Shape Tween" menüpontot, majd zárjuk be az ablakot. Indítsuk el az animációt, és látni fogjuk, ahogy a négyzet körré változik, csodával határos módon, de mégis varázslat nélkül. Figyeljük meg az áttűnés közbülső színeit is!

73 Lecke Alakzatok módosításánál fix pontok kijelölése Azok, akiknek a figyelme a legapróbb részletre is kiterjed, már kérték volna, hogy az átváltozás során egyes pontok bizonyos utat járjanak be, tehát kérték volna, hogy irányítsuk magát az átváltozást is. Például, készítsünk egy animációt, amely során egy kör csillaggá változik, és figyeljük meg, hogy pontosan mi is történik. Látni fogjuk, hogy a kör "leereszt", és feltűnik a csillag öt pontjának rétege lineáris módon. De mi történne, ha azt szeretnénk, hogy a kör legfelsőbb pontja a csillagtól jobb oldalra lévő legalsó ponton legyen? Az átváltozás nem lenne többé lineáris, hanem igen különleges. Ahhoz, hogy ezt elvégezhessük, a körnek "Alakzati javaslatok"-at kell adnunk ("Hint"). (Nyissuk meg a CD-ROM Flash ltutorial mappájában lévő Csillag.fla állományt.)

74 Indítsuk el az animációt. Az utolsó képkockán lévő csillag alakzatot jelöljük ki, majd a Ctrl + C billentyűkombináció lenyomásával vigyük vágólapra. Készítsük el mi is ezt az animációt. Nyissunk meg egy új állományt, rajzoljunk egy kört körvonal nélkül az első képkockába, majd szúrjunk be egy "Keyframe"-et (Kulcs-képkockát) a 20. képkockába. A kulcs-képkockán töröljük ki a kört és helyette illesszük be a vágólapról a csillagot. Jelöljük ki az animáció első képkockáját és a Properties panelon a Tween tulajdonságot állítsuk be: Shape-re. Hogy az átalakulást irányítani tudjuk a "Modify >Shape >Add Shape Hint" funkciót válasszuk ki ötször. Erre a kör közepében öt golyó fog (egymás fölött) megjelenni Rendezzük el a golyókat úgy, ahogy az ábrán látjuk, jelöljük ki az utolsó képkockát, majd az ábrán látottak szerint rendezzük el a golyókat az egér segítségével, mindkét objektumon. Álljunk vissza az első képkockára és egy Enter billentyűt lenyomva indítsuk el az animációt. Ez az animáció teljesen más lett, mint az előző, mert a golyók meghatározzák, hogy a kezdő alakzat pontjai hová tartsanak (egyenes vonalat követve), és pontosan az utolsó alakzat pontjain kell kikötniük.