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.
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
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).
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.
2. ábra
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.
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
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
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.
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
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
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)
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.
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
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.
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.
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
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.
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
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.
Lecke Tintatartó 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).
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, les 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)
21. és 22. Ábra
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
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
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
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!
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.
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!
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.
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?
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)
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.
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)
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!
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.
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
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. (35. - 36. á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.
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).
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).
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
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. (40. - 41. ábra)
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.
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.
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.
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
(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?
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"
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
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).
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?
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 CS4el, 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.
„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á:
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
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).
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
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
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
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.
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
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 1- 20. 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!
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.
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:
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.
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á
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).
Erre egy kék színű csík fog feltűnni, amelyen egy nyíl látható, ami az 1- 20. 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 animációja is.
a
négyzet,
majd
a
téglalap
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 teljesen), (62. ábra).
62. ábra
részben
elrejthetünk
(nem
(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.
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.
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!
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.)
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.
Komplex animáció készítés Idáig már mindent megtanultunk, amit tudni kell az alapfokú és haladó rajztechnikával kapcsolatban, és az automatikus animáció-készítés alapjait is elsajátítottuk. Ami most következik, az nem más, mint ennek továbbfejlesztése: komplex animációk készítése. Meg fogjuk látni, hogyan tehetünk "interaktívvá" egy mozit az Adobe Flash CS4-ben található egyszerű, de igen hatékony objektumokra vonatkozó programnyelv segítségével.
Lecke
Objektumok mozgási vonalának meghatározása mozgásvezető-réteg segítségével Térjünk vissza egy pillanatra az automatikus animációkhoz ("Create Motion tween"). A bemutatott technika korlátja, hogy az objektum egy ponttól egy másikig kizárólag egy egyenes mentén mozoghat. Hogyan lehetne azt megoldani, hogy az objektum valamely más pályán közlekedjen? Természetesen erre is van megoldás: Mindössze annyit kell tennünk, hogy megrajzoljuk ceruzával azt az útvonalat, amit szeretnénk, ha az objektumunk követne, és ezzel tulajdonképpen elkészítettük azt, amit mostantól fogva "mozgásvezető-réteg"-nek hívunk.
Készítsük elő a szokásos "Négyzet" szimbólumot körvonalak nélkül. Ezúttal egy egyszerű animáció készítéséhez fogjuk felhasználni (pontosan úgy, ahogy a 2. fejezet 7. leckéjében tettük). Jelöljük ki a négyzetet és nyissuk meg az "Insert" menüt, és jelöljük ki a "Convert to Symbol" menüpontot. A bejelentkező ablakba írjuk be a `Négyzet" szót, a Type: legyen Graphic majd nyomjuk meg az "OK" gombot. Erre az objektumunk közepében most megjelenik egy kis kereszt. Remek, ez azt jelenti, hogy megtörtént a szimbólummá alakítás. 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 kulcs-ké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. Ha ezzel elkészültünk, kattintsunk az 1. képkockára, majd jobb egérgombbal a felhasznált réteg nevére, majd a helyi menüből jelöljük ki az "Add classic motion guide" (Mozgásvezető hozzáadása). Ezzel a művelettel egy új típusú réteget fogunk létrehozni, amelyet "vezetőréteg"-nek fogunk hívni, és amelyre szabadkézzel rárajzolhatjuk a négyzet tervezett mozgási útvonalát. (63. Ábra)
63. Ábra. Ezen a rétegen jelöljük ki az animáció első képkockáját, és addig húzzuk a négyzetet, míg annak középpontja egybe nem esik a segédvonal kezdőpontjával (a művelet megkönnyítése érdekében éljünk a "Snap" funkció adta lehetőséggel, kapcsoljuk tehát be, és blokkoljuk, tehát rögzítsük a vezetőréteget). Ismételjük meg a műveletet az utolsó képkockára is. Ebben az esetben a négyzet középpontjának a vezetőréteg végével kell majd egybeesnie. Az első és utolsó képkockán a Properties panelben állítsuk be a Tween tulajdonságot Motion-ra, valamint kapcsoljuk be az Options-nál az Orient to path-t. Ez utóbbi biztosítja, hogy a négyzetet a segédvonalra irányítjuk.
Végezetül rejtsük el a vezetőréteget (64. Ábra), és indítsuk el az animációt. Figyeljük meg a négyzet mozgását! Látni fogjuk, hogy a négyzet a vezetőrétegre rajzolt segédvonal mentén mozog.
64. Ábra A Properties panel "Ease" menüjében lelassíthatjuk az animációt az elején ("In") vagy a végén az "Out" beállításával, és ezzel jópofa gyorsulási vagy lassulási effektust produkálhat.
Lecke Szimbólumokba és példányokba elmentett animációk (MovieClip) Hogyan használhatunk fel egy adott animációt többször is animációnk különböző pontjain? A dolgok jelenlegi állása szerint minden egyes alkalommal újra el kellene készítenünk, lépésről lépésre. Az objektummal elvégzett művelethez hasonlóan (szimbólummá alakítottuk át, és példányait többször is felhasználhattuk) azt is megtehetjük, hogy egy teljes animációt mentünk el szimbólumként, hogy aztán filmünkben felhasználhassuk a róla készült másolatokat (amit továbbra is mindig példányoknak hívunk). Az objektumtól eltérően azonban nem konvertálhatunk már létező animációkat szimbólummá. Először mindig létre kell hoznunk egy üres szimbólumot, aztán abba beszúrhatjuk az animációt. Nyissunk meg egy új állományt, majd válasszuk ki az "Insert" menüt, és jelöljük ki a "New Symbol" menüpontot, majd a bejelentkező ablakba gépeljük be az
"Színátmenet" nevet, és jelöljük ki a "Movie Clip" menüpontot. Végül nyomjuk meg az "OK" nyomógombot. Ezzel a művelettel értesítettük az Adobe Flash CS4-t, hogy egy film típusú szimbólumot kívánunk létrehozni. (65. Ábra)
65. Ábra Nyomjuk meg az F7-et négyszer. Most készítsük el a "Kör" szimbólumot az 1. kockán, ehhez rakjunk ki egy piros szegély nélküli kört a lap közepére. Ahhoz, hogy a rajzolást könnyebben elvégezhessük, kapcsoljuk be a segédhálót View>Grid>Show Grid és a segédhálóhoz igazítása View>Snapping>Snap to Grid funkciót. Majd alakítsuk át szimbólummá (Modify > Convert to Symbol > Graphic). Az 5. kép-kockát alakítsuk át kulcskép-kockává, majd szúrjunk be egy példányt a Kör szimbólumból ebbe a kockába, majd a 3. kockába a Kör szimbólumnak egy sárga példányát. Ehhez, amikor a 3-ik kockában állunk és már beszúrtunk egy példányt a Kör szimbólumból, akkor az Properties
panel Color menüből válasszuk ki a Tint lehetőséget és váltsuk át a szimbólum színét sárgára. Szúrjunk be két automatikus animációt a közbülső kockákba ("Insert > Motion tween"), és ellenőrizzük, hogy a kör pirosról sárgára és aztán megint pirosra "villog"-e. Térjünk vissza az animáció szerkesztéséhez a Scenel-re kattintva, majd a Window >Library menüpontra kattintással megjelenő ablakból húzzuk át az egérrel a "Színátmenet" szimbólumát a munkaterületre. Ezzel tulajdonképpen beszúrtuk a teljes filmet egyetlen egy kockába. Ahhoz, hogy ellenőrizni tudjuk, jól működik-e, ezúttal nem lesz elég az "Enter" billentyű leütése. Meg kell nyitnunk a "Control" menüt, és a "Test Movie" menüpontra kell kattintanunk, vagy a "Ctrl+Enter" billentyűkombinációt kell lenyomnunk. (66. Ábra)
66. Ábra A film megtekintésének befejezéséhez elég lesz azt az ablakot bezárnunk, amiben a film fut.
Lecke Egéráthaladásra érzékeny nyomógombok készítése Az utolsó szimbólum-típus amit elkészíthetünk a "Kattintható nyomógomb", vagyis egy olyan nyomógomb, ami az egér áthaladásánál alakot változtat (elég 10 percig szörföznünk az Interneten, máris rengeteget láthatunk belőle). Az ilyen típusú objektumok létrehozása az Adobe Flash CS4-el szinte banálisnak tűnhet. Próbáljunk meg elkészíteni egy sötétkék színű nyomógombot, amely az egér áthaladására világoskékké, megnyomásra pedig pirosra változik. Haladjuk tovább, és készítsünk egy új szimbólumot ("Insert> New Symbol"), majd nevezzük el "Nyomógomb "-nak. Természetesen mindezt a "Button" kijelölésével, majd az "OK' nyomógomb megnyomásával.
Figyeljük meg az időegyenest (timeline), amely ezúttal csak négy kockát tartalmaz. Az "Up" azt jelzi, milyennek kell lennie a nyomógombnak pihenőhelyzetben. Az "Over" azt jelzi, milyen legyen a nyomógomb, amikor az egér áthalad rajta. A "Down" azt jelzi, milyen legyen a nyomógomb, amikor rákattint a felhasználó. A "Hit" pedig azt jelzi, melyik a nyomógombhoz tartozó érzékeny terület (az a terület, amin ha átmegy az egér, a nyomógombot "Up"-ról "Over" helyzetre változtatja. (67. Ábra).
67. Ábra Most jelöljük ki az "Up" kockát, és rajzoljunk a munkaterületre egy kört sötétkék színben, fekete szegéllyel. Jelöljük ki a szegélyével együtt és készítsünk róla egy másolatot (Ctrl+C, majd Ctrl + V). Ezt a másolatot transzformáljuk kisebbre (Modify > Transform > Scale) és helyezzük el a másik kör közepébe. (68. ábra)
68. Ábra Haladjunk tovább, és szúrjunk be egy "Kulcsképkockát" az "Over" kockába úgy, hogy a körnek csak a belső részét színezzük világoskékre.
Egy másik "Kulcsképkockát" a "Down" kockába úgy, hogy a körnek csak a belső részét színezzük pirosra. Végül egy utolsó "Kulcsképkockát" a "Hit" kockába, egyszínű kékre hagyva. Szúrjunk most be egy nyomógombot a munkaterületre: térjünk vissza az animáció szerkesztéséhez a Scenel-re kattintva, majd a Window> Library (vagy Ctrl+L) szimbólumkönyvtárból húzzuk át a szimbólumot a „színpadra" (lapunkra). Ezután győződjünk meg arról, hogy jól működik, miközben elindítjuk a filmet a "Ctrl + Enter" billentyűkombinációval. Maga a tökély! Létrehoztunk egy olyan nyomógombot, ami érzékeny lesz az egér áthaladására, és annyiszor használhatjuk fel, ahányszor csak akarjuk, mindössze annyi dolgunk lesz vele, hogy a filmünkbe beszúrjuk egy példányát. Mivel még szükségünk lesz erre az objektumra, a könyv szerzőinek tanácsára mentsük el a dokumentumot egy direkt erre a célra létrehozott mappába. Na jó, de mi célt szolgál az a nyomógomb, amire ha rákattintunk, az égvilágon semmi sem történik? A következő lecke során meg fogjuk látni, hogyan lehet egy filmet tényleg interaktívvá változtatni. Ezzel kapcsolatban meg fogunk ismerkedni egy egyszerű, de igen hatékony programozó nyelvvel.
Lecke Nyomógombok működőképessé tétele Az Adobe Flash CS4 egy igen hatékony objektumorientált programozó nyelvvel rendelkezik, ami nagyon hasonlít a Visual Basicre. A továbbiakban bemutatandó nyelv segítségével úgy készíthetünk különféle programokat, hogy a grafikus felületre rajzolunk, majd a megrajzolt objektumoknak definiáljuk bizonyos tulajdonságait, és a későbbiekben kezeljük azokat az eseményeket (event), amelyek az objektumokon előfordulhatnak (a klasszikus példa éppen az imént tárgyalt kattintás egy nyomógombra). Nyissuk meg a 3. leckében készített dokumentumot (az egéráthaladásra érzékeny nyomógombot) (69. Ábra).
69. Ábra. Szúrjunk be egy második "Kulcsképkocká"-t az előző mellé. Jelen pillanatban két külön nyomógombpéldányunk van a timeline (időegyenes) első két kockájában. Az első nyomógomb alá szíójuk be az "1. képkocka" feliratot, míg a második alá a "2. képkocka" felirat kerülhet. (70. Ábra).
70. Ábra
Most lépjünk vissza az első kulcsképkockára, majd a jobb egérgombbal kattintva megkapjuk a helyi menüt, válasszuk ki az Actions menüpontot. (71. ábra)
71. ábra A bal oldali Actions>Timeline Control listából válasszuk ki a stop-t, és duplán kattintva rajta, helyezzük a „törzs" részbe. (72. ábra)
72. ábra Ismételjük meg ezt a második képkockára is.
Most kattintsunk az első nyomógombra a jobb egérgombbal, és nyissuk ki a "Actions" panelt. A bejelentkező ablakban "Actions Button" mindent megtalálunk, ami magán a nyomógombon esetlegesen előforduló események kezeléséhez szükséges. (73. Ábra)
73. ;On Különféle gombeseményt válthatunk ki az egérgombbal. Azt, hogy melyik esemény hatására következzenek be az akciók Actions>Movie Clip Control, on utasítás paraméterei határozzák meg. Alapértelmezésben a Release (felengedés) van beállítva. Press — lenyomás, Release - felengedés, Release Outside — felengedés a gombon kívül, Key Press — adott billentyű lenyomása, Roll Over — föléhúzás, Roll Out - kihúzás a gomb területéről, Drag Over — lenyomás, kihúzás, majd föléhúzás, Drag Out — lenyomva kihúzás. Ha nem akarjuk meghagyni a Release beállítását, akkor az on-ra duplán kattintva változtathatunk (mindig ez kell először beállítani).
A mi példánkban maradjon az eredeti beállítás. Válaszuk ki az Actions>Timeline Control >gotoAndStop parancsát. A Frame mezőben levő 1est írjuk át 2-esre (mivel azt szeretnénk, hogy az első nyomógomb megnyomására a 2. kocka ugorjon elő). A Go to and Play helyett a Go to and Stop-t válasszuk (mivel azt szeretnénk, hogyha a 2. nyomógombra ugrottunk akkor ott álljon meg.) (74. ábra)
74. ábra Zárjuk be az ablakot és ellenőrizzük a működést ("Ctrl+Enter"). A második nyomógombra is ismételjük meg az imént elvégzett műveleteket azért, hogy ha majd a 2. kocka nyomógombjára kattintunk, visszatérhessünk az 1. kockához.
Most kattintsunk a jobb egérnyomógombbal az első kulcs-képkockára, jelöljük ki az "Actions" menüpontot, majd szúrjuk be az "Actions>Timeline Control>"Stop" akciót, hogy ezzel megállíthassuk a filmet az első képnél. Ellenőrizzük a működést a ("Ctrl+Enter") billentyűkkel, és gondoljuk át a helyzetet: a "Go to" funkcióval elérhetjük, hogy ha az egyik nyomógombra kattintunk, az animáció egy újabb kockára ugorjon. Ez az eszköz egyszerűen fantasztikus, lehetővé teszi, hogy "interaktívvá" változtassunk egy filmet. Képzeljünk el egy több választ tartalmazó kérdőívet (mint amilyet a jogosítvány megszerzéséhez kell kitöltenünk). Egyszerűen elkészíthető: beírjuk a kérdést és a három választ az 1. kockába, majd a válaszok mellé beszúrunk három olyan nyomógombot, amelyek három különböző kockára hivatkoznak. Ezekbe azt írjuk be, hogy "Helyes" vagy "Helytelen". Ne felejtsük el elmenteni az imént elkészített filmet, mert hamarosan ismét szükségünk lesz rá.
Lecke Címkék és megjegyzések; Rétegek szervezése Amikor a filmek kezdenek bonyolulttá válni, és a felhasznált kockák száma egyre nő, a "Go to" funkció kockázatos lehet (képzeljük csak el, mekkora zűrzavart keltenénk, ha egy téves kockára ugranánk!). Ráadásul, ha beszúrunk vagy kiveszünk egy-egy kockát, meg fog változni a számuk, ezért az előző események kezelése teljesen tévessé válhat. Ha már szóba került mindez, nyissuk meg az előző leckében létrehozott dokumentumot, és győződjünk meg az előbb elmondottakról személyesen is. Jelöljük ki az 1. kockát, és szúrjunk be kilenc üres kockát utána ("Insert > Timeline >Frame" vagy F5); ugyanezt ismételjük meg a második kulcs-képkockával is (ami most a 11. kockában található) A film ugyanolyan marad, mint az előbb, kivéve azt a tényt, hogy most minden egyes képkocka 10 kockát foglal el.
Ennek igazán súlyos következménye a két nyomógombra történő "Kattintás" esemény kezelésénél lesz (próbáljuk meg elindítani az animációt, hogy lássuk, mi történik pontosan). (75. ábra)
75. ábra És valóban: előzőleg az első nyomógombhoz rendeltük az "Ugrás a 2. kockához" akciót, de ott most semmi sem fog történni, csak a nyomógomb lesz ott. Mivel a filmkészítés során könnyen előfordulhat, hogy kockák elcsúsznak, ezért egy ilyen helyzetet jobban kell tudnunk kezelni, mint ahogy azt az előző leckében tettük. Apropó! Pontosan ilyen esetekben segítenek a "Címkék" ("Label"), mivel segítségükkel elnevezhetjük azokat a kulcs-képkockákat, amelyek érdekelnek, így a félreértés lehetőségét kiküszöbölve azonosíthatjuk be őket.
Kattintsunk a jobb egérnyomógombbal a két képkocka közül az elsőre (az első tíz kocka közül az egyikre), és nézzük meg a Properties panel Frame pontját. A Frame pontnál található a Label Name feliratú ablakba írjuk be: "Nyomógomb l ". Hasonlóképpen, a második kulcs-képkockának adjuk a "Nyomógomb2" címkét (mire kis vörös zászlók fognak megjelenni a címkék neveivel). A címkéken kívül megjegyzéseket ("Comment") is beszúrhatunk az egyes kulcs-képkockákra. A megjegyzés nem más, mint egy szó vagy akár egy mondat, amely az animációt készítő segítségére lehet, hogy el ne felejtse, mire is használ egy bizonyos kulcs-képkockát.
Lecke Feltételek, a választások irányítása Hasonlóan ahhoz, amit a Visual Basic-kel is lehet tenni, az Adobe Flash CS4-el is megtehetjük, hogy feltételeket szúrunk be több megoldásos események kezeléséhez. Gondoljunk itt például arra a helyzetre, amikor egy olyan filmet szeretnénk készíteni, amiben egy bizonyos ponton a jelszót (password) kéri tőlünk ahhoz, hogy a film egy újabb részéhez hozzáférhessünk. Nyissunk meg egy új fájlt, majd kezdjük azzal, hogy a les, a 10-es, a 20-as és a 30-as kockába beszúrunk egy-egy kulcs-képkockát (F6), és kulcs-képkockákat a következő szavakkal címkézzük meg: "Engedélykérés', "Belépés', "Újra" (a sorrend nem lényeges). (77. Ábra)
77. ábra
Az "Engedélykérés" kulcs-képkockába rajzoljunk egy szöveg-bevitelre alkalmas mezőt (Text Tool-t). A beviteli szövegmezők esetében megadhatjuk a maximálisan elfogadható karakterek számát, típusát (teljes betűkészlet, számok, nagybetűk, kisbetűk, írásjelek, illetve egysoros, többsoros, jelszó). Az "Engedélykérés" kulcs-képkockába megrajzolt szövegmező jelszó bekérésére lesz alkalmas. A "Szöveg" eszközzel megrajzoljuk a beviteli mező helyét, majd a Properties panelen állítsuk be a szövegdoboz tulajdonságait: Input Text (beviteli szövegmező), illetve a Properties panel Paragraph pontjánál a Behavior legyen Password (jelszó) (78. Ábra). A szövegbeviteli mező lehetővé teszi számunkra, hogy egy film lejátszása alatt szúrjunk be szöveget.
78. Ábra Alá írjuk be a következő mondatot: "Jelszó bevitele", ne feledjük el visszaállítani a Szöveg eszköz tulajdonságait normál szövegre (Static Text).
Szúrjunk be egy nyomógombot (kész nyomógombokat a ("Window> Common Libraries> Buttons" menüben találunk). (79. ábra)
79. ábra Csak egyszerűen húzzuk át a nekünk tetsző nyomógombot a képkockára. (80. Ábra)
80. Ábra
A "Belépés" kulcs-képkockába írjuk be a következő mondatot: "Üdvözöljük! ", míg az "Újra" kulcs-képkockába írjuk a következőt: "Téves jelszó, próbálkozz ismét!" (81. Ábra), és szúrjunk be egy nyomógombot, amihez kapcsoljuk az előző leckében tanultak alapján a következő akciót: on(release) { gotoAndPlay(„Engedélykérés "); } (82. Ábra).
81. ábra
82. ábra
Most térjünk át a jelszó lekérésének kezelésére. Kattintsunk a jobb egérgombbal az "Engedélykérés" képkockára, és szúrjuk be a Actions>"Stop" akciót, hogy a film várja meg a jelszót, ne peregjen tovább egyedül a végtelenségig. (83. ábra)
83. ábra Most kattintsunk a szövegbeviteli mezőre, és a Properties panelen állítsuk be a tulajdonságait: A "Variable" ("Változó") mezőbe írjuk be a „belep" szót, jelöljük ki a "Password" tulajdonságot, hogy a gépelés során kis csillagok jelenjenek meg a betűk vagy számok helyett, és ahhoz hogy látszódjon a beviteli szövegmezőnk kerete, kapcsoljuk be a Show border Around Text nyomógombot. (84. ábra)
84. Ábra Kattintsunk a nyomógombra a jobb egérgombbal és az Actions menüt indítsuk el. Állítsuk be a következő kódokat (az on utasítást az Actions> Global Functions> Movie Clip Control , a goto utasítást a Actions> Global Functions> Timeline Control pontban találhatjuk, az if és az else utasításokat pedig a Actions> Statements> Conditions/Loops pont tartalmazza. Az utasításokat ki kell jelölni, majd dupla kattintással rakhatjuk be a listába, figyeljünk az egyes utasítások beállításaira - az előző leckében már használtuk!): on (release) ( if (belep== "1234 ") gotoAndStop(„ Belépés `); else gotoAndStop(„ Újra "); j
Miután végeztünk a művelettel, a 85. ábrán látható módon fog megjelenni.
85. Ábra. Az animációt befejeztük, indítsuk el, és próbáljunk meg valamilyen szót beírni, hogy ellenőrizhessük, valóban megtagadtuk-e ilyen esetekre a hozzáférést. Ezek után írjuk be, hogy "1234", és győződjünk meg arról, hogy a helyes jelszóval léptünk-e be.
Lecke Akciók a nyomógombokon; Akciók a képkockákon Akik nagyon figyeltek, valószínűleg észrevették, hogy az előző lecke során egyszer csak bevittünk egy olyan akciót, amit nem egy nyomógombra, hanem közvetlenül egy képkockára szúrtunk be (ez a "Stop" akció volt, amely leállítja a mozit a jelszó elkéréséhez). Valójában ezzel akár zűrzavart is kelthettünk volna, mivel az Adobe Flash CS4 mindig ugyanazt az ablakot használj a az akciók beszúrásához (attól függetlenül, hogy ezek esetleg más és más kontextusra utalnak). Két fő esetet különböztethetünk meg: akciók nyomógombokra történő és képkockákra történő beszúrását. Nyomógombok esetében — ez a gyakoribb — lehetővé válik, hogy kezeljük azokat az eseményeket, amelyek a film egy bizonyos részénél egy nyomógomb megnyomására jönnek létre (így maga a film is interaktívvá válik).
Képkockák esetében, ami sokkal ritkábban fordul elő, különleges események kezelése válik lehetővé. Képzeljük el, mi történik egy animáció elindításakor. Az Adobe Flash CS4 elkezdi bemutatni az összes képet egymás után, sorban, anélkül, hogy bármikor is leállna. Előfordulhat azonban - mint a jelszó esetében — , hogy anélkül nem kellene a lejátszásban tovább mennie, amíg nem következik be valamely esemény. Ilyen esetekben van szükség a különleges események kezelésére, amely nem más, mint: "az animáció lejátszása elérte az x kockát".
Lecke Hangok: eseményhangok alkalmazása A hangoknak fontos szerepük van az Adobe Flash CS4ben: hangulatosabbá, élethűbbé varázsolják az animációt. Mindannyian ismerjük azt a jellegzetes hangot, amit a nyomógombokra való kattintáskor hallunk (gondoljunk az egérrel történő kattintás hangjára). Az előző példákban nem hallottunk ilyet, a filmünkből hiányzott a valóság egy jellegzetes darabja. Hangokat úgy illeszthetünk be, hogy importáljuk őket a megfelelő animációba (pontosan úgy, ahogy azt a bitmap képekkel tesszük), majd egy bizonyos eseményhez rendeljük. Rajzoljunk egy nyomónyomógombot, vagy használjuk fel a már kész nyomógombok egyikét (endow > Common Libraries > Buttons). Most kattintsunk a jobb egérgombbal a nyomógombunkra, és jelöljük ki az "Edit" menüpontot, hogy közvetlenül módosíthassuk a szimbólumot. (86. ábra)
86. ábra Ezek után importáljuk a tankönyvhöz tartozó CD-ROM Flash (Tutorial mappájából a "Camera.wav" fájlt: (File >Import> Import to Library). (87. ábra)
87. ábra
Szúrjunk be egy új réteget, az Insert>Layer segítségével. Most döntsük el, hogy mikor legyen a "Camera.wav" fájl lejátszva. Lehetőleg ne akkor szólaljon meg, ha áthaladunk egy nyomónyomógombon, hanem akkor, ha rákattintunk nyomógombra. Azonosítsuk be a bennünket érdeklő kulcs-képkockát (lépjünk rá), ami jelen esetben a Layer Triangle rétegen a "Down" lesz (ami a nyomógomb kattintásának felel meg) Álljunk a Down képkockánál és keressük meg a Properties panelen a Sound ablakot. Nyissuk meg a "Sound" legördülő menüt, és jelöljük ki a "Camera" hangot (ez az importált fájl neve) (88. Ábra).
88. Ábra
Ctrl + Enter billentyűk lenyomásával próbáljuk ki, jól működik-e a nyomógombunk. Fantasztikus, ugye? Az imént leírt eljárással bármilyen eseményhez rendelhetünk hangokat! Ha nem akarunk zűrzavarba keveredni, fogadjuk meg a könyv szerzőinek tanácsát, és helyezzük a hangokat egy külön rétegbe. További hangokat találhatunk a Window > Common Libraries > Sound könyvtárban is. Azonnal szembe fog tűnni, hogy milyen sokféle szimbólum tárolására képes: vannak köztük rajzok, animációk, nyomógombok és hangok. Mindegyiket egy jellegzetes ikon ábrázol.
Lecke A hangok: zenei aláfestés alkalmazása Előfordulhat, hogy egy mozihoz aláfestő zenét kívánunk társítani, tehát egy olyan zenét, ami az animáció végéig, vagy csak egy bizonyos pontjáig hallható. A vezérlést a következőképpen készíthetjük el. Jelöljük ki azt a kulcs-képkockát, amiben a zene indítását tervezzük (legyen ez most az 1. képkocka) Hang fájlt importálhatunk vagy a Window > Common Libraries > Sounds könyvtárból is választhatunk. Mindkettőt próbáljuk ki: File> Import> Import to Library válasszuk most a Zene hang-fájl-t. (89. ábra)
89. ábra
Válasszunk a Window> Common Libraries> Sounds könyvtárból is egy hang-fájlt és húzzuk át a lapunkra. (90. ábra)
90. ábra Ezt követően kattintsunk újra az 1. képkockára, majd a Properties panel a Sound ablakban jelöljük ki azt a hangfájlt, amit be kívánunk illeszteni (Zene vagy az Animal Dog Bark -ot.). Azt is meg kell adnunk a Sound ablakban, a Loop mezőben, hány alkalommal szeretnénk lejátszani - Loop legyen p1:5. (91. Ábra)
91. Ábra
Hallgassuk meg mit készítettünk: Ctrl+Enter. Egyszerűbb speciális effektusok alkalmazására is lehetőségünk nyílik Ehhez az "Effect" legördülő menüből kell kiválasztanunk a számunkra legmegfelelőbbeket. Lássunk néhányat! Left Channel: Csak a bal csatorna szól Fade Left to Right: Átmenet balról jobbra Fade Right to Left: Átmenet jobbról balra Fade In: Fokozatosan felhangosodik az elején Fade Out: Fokozatosan elhalkul a végén Az egyetlen dolog, amire ügyelnünk kell, hogy a zene ne legyen hosszabb az animációnál, mivel ez esetben az Adobe Flash CS4 tovább folytatná a zene lejátszását a film vége után is. Próbáljunk meg elkészíteni egy egyszerű, körülbelül 20 képkocka hosszúságú animációt, és zenei aláfestés gyanánt illesszük be a mellékelt CD-ROM-ról a "camera.wav" hang-fájlt. A Loops mezőbe adjunk meg egy nagyobb számot. Az Effect melletti Edit sound envelope gombbal szerkeszthetjük is zenénket. Ha szeretnénk elkerülni, hogy a zene drasztikusan érjen véget itt az Edit menüben is szerkeszthetjük (vagy az Effect legördülő menüből válasszuk ki a megfelelőt). Kattintsunk magára a függőleges jelre, a kis négyzetet, ami megjelent, fogjuk meg, és húzzuk lefelé, így a zene fokozatosan fog elhalkulni ("lekeverés"). (92. ábra)
92. ábra A "Sync" legördülő menüből kiválasztjuk a "Stream" opciót. Így a zene az animációval együtt ér véget, mert ezzel az utasítással az animációhoz igazítjuk a hangot (a hanghullámot ábrázoló grafikán egy kis fekete függőleges jel fogja jelezni azt a pontot, ahol az animáció véget ér).
Lecke Jelenetek: a film felbontása egyszerűbb egységekre Ezt a fejezetet egy olyan eszköz bemutatásával zárjuk, amelyet a Adobe Flash CS4 azért bocsát rendelkezésünkre, hogy — mint már ahhoz hozzászokhattunk — egy problémát olyan al-problémákra oszthassunk, amelyeknek egyszerűbb lesz a megoldása. Ahogy egy dráma több jelenetből áll, az egyes Adobe Flash CS4 filmeket is jelenetekre bonthatjuk, amelyeket egymás után sorban játsszunk le. Eddig mindig egyetlen jeleneten dolgoztunk ("Window> Other panels>Scene"), amit "Scenel"-nek hívhatunk. Újabb jelenetek beszúrásához a "Scene" ablakban található Add Scene gombbal élhetünk. (93. ábra)
93. ábra
A jeleneteket ezen túl a "Go to" akció objektumaként is felhasználhatjuk (tehát, ha rákattintunk egy nyomógombra, a lejátszófej átugorhat egy másik jelenetre). Ezt talán nem árt egy kicsit jobban körüljárni, és egy példával illusztrálni. Képzeljük el a jelszó példáját! A filmet feloszthattuk volna három jelenetre, és ezeket elnevezhettük volna az alábbiak szerint: "Engedélykérés", "Belépés" és "Újra". A jelszó lekérésének kezelését tulajdonképpen a "Go to scene -Belépés" vagy "Go to scene -Újra" akciónak köszönhettük. Így a filmünket modulárisan építhettük volna fel. Az első jelenetben (Scene] lett volna) csak a jelszó lekéréséhez szükséges grafikus kezelőfelület megszerkesztését végeztük volna el. A második jelenetben (Scene2) arra a filmre koncentráltunk volna, amit a helyes jelszó bevitelénél kellett volna lej átszani A harmadik jelenetben (Scene3) arra, amit akkor kellett volna lejátszani, ha a jelszó hibás. (Még azt is megtehettük volna, hogy kiadjuk a három jelenet elkészítését három különböző személynek, és a végén összevágjuk őket!).
Kapcsolódás az Internetre Az itt következő — utolsó - fejezetben néhány Adobe Flash CS4-el készült animációt fogunk elemezni, a legfontosabb mozzanatokra összpontosítva figyelmünket. Megtanuljuk, hogyan tehetünk közzé egy filmet az Interneten (hogyan publikálhatjuk), és hogyan hozhatunk létre úgynevezett "előképek"-et, vagyis olyan rövid klippeket, amelyek megelőzik a főfilmet, és amelyek gyakorlati - szervezési haszna mindössze annyi, hogy az animáció letöltésének ideje alatt elszórakoztatja a nézőket.
Lecke Maszkok Az Adobe Flash CS4-el történő animációk készítéséhez igen hasznos segédeszköznek tekinthetők a maszkok. Meg fogjuk látni, gyakran előfordul, hogy el kell rejtenünk néhány rajzot, hogy aztán a megfelelő pillanatban előtűnjenek (pontosan úgy, ahogy a színházban, amikor a reflektor a jelenet egy részét megvilágítja, míg a másikat sötétben hagyja).
Kezdjük azzal, a Layer1 (Maszk rétegnek fogjuk majd elnevezni) rétegnek készítünk egy 20 képkockából álló animációt, ami egy olyan (egyszínű, szegély nélküli) kört ábrázol, ami a munkaterületen a korábbiakban tanultak alapján balról jobbra mozog. [Rövid emlékeztető az animáció elkészítéséhez (2. Fejezet / 7. Lecke): Rajzoljunk egy piros kört 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 "Kör'). 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 kulcs-képkockát, ami ugyanazt a kört fogja tartalmazni, mint az 1. képkocka. 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, ami az 1- 20. 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. A Properties panelen a Rotate (forgatás) beállításánál jelöljük ki a CW (Clockwise, az óramutató járásával megegyező irányban) opciót, majd a jobb oldali mezőbe szúrjuk be az "l"-es értéket, és nyomjuk meg az "Enter" billentyűt. (94. ábra)
94. ábra
A rétegre kattintva a jobb oldali egérgombbal a menüből válasszuk a Properties menüt és a megjelenő ablakban állítsuk be a réteg tulajdonságait. Adjuk a rétegnek az új nevet: Maszk, Type legyen Mask, az Outline Color legyen piros. (95. Ábra)
95. ábra A következő lépés, hogy létrehozunk két új réteget (az előző alatt), és úgy hívjuk őket, hogy: "Ahol van", és "Ahol nincs". (96. ábra)
96. ábra Az "Ahol nincs" rétegre írjuk rá 48-as karaktermérettel, félkövér vérvörös (Arial) betűkkel a következő mondatot: "Maszk próba". (97. Ábra)
97. Ábra Kattintsunk duplán az „Ahol van" réteg ikonjára. Ekkor kinyílik a Rétegtulajdonságok (Layer Properties) ablak. Válasszuk a Type (Típus) listából a Mask opciót, és zárjuk be az ablakot az OK gombbal. Kattintsunk a jobb egérgombbal az "Ahol van" réteg első képkockájára (csak az elsőre), és jelöljük ki a "Copy frames"-t a réteg másolásához. (98. Ábra).
98. ábra
Kattintsunk a jobb egérgombbal az "Ahol nincs" réteg első képkockájára, és jelöljük ki a "Paste frames"-t, hogy be tudjuk illeszteni az előzőleg kimásolt képkockát. Cseréljük ki feketére ennek a feliratnak a színét. Most két ugyanolyan feliratunk van (eltekintve a színüktől), amelyek két rétegen találhatók. A "Maszk" réteg a következő kritérium alapján fogja az egyik vagy a másik alsóbb réteget mutatni: ahol van szín (esetünkben a kör belsejében), ott az "Ahol van" réteg tartalma lesz látható, ahol nincs jelen szín, ott az "Ahol nincs" réteg tartalma lesz látható. Teszteljük a munkánkat a Control> Test Movie menüpontot elindítva.
Lecke Legördülő menü létrehozása A most következő leckében elkezdjük az eddig bemutatott eszközöket profi külsejű animációk létrehozására felhasználni. Ugye mindenki elgondolkozott már azon, vajon hogyan készülnek a legördülő menük? Ebben a leckében megtanuljuk, hogy a nyomógombokra vonatkozó ismereteinket miképpen használhatjuk fel több választást felkínáló menük készítésére. Jó lenne elkerülnünk, hogy minden egyes szimbólumot, amire szükségünk lesz, újra elkészítsünk. Nyissuk meg egy új fájl-t. Készítsünk négy réteget, és nevezzük el őket az alábbiak szerint: "Címkék", "Vonalak", "Almenü" és "Menü'. (99. Ábra)
99. Ábra Készítsük el a következő 5 szimbólumot (Times New Roman, 16-s betűméret, fekete színű): 1. Name: Text: item; Type: Graphic. Ezután a Text Tool eszközt használva a szövegmezőbe írjuk be: item 2. Name: Text: 1; Type: Graphic. Ezután a Text Tool eszközt használva a szövegmezőbe írjuk be: 1 3. Name: Text: 2; Type: Graphic. Ezután a Text Tool eszközt használva a szövegmezőbe írjuk be: 2 4. Name: Text: 3; Type: Graphic. Ezután a Text Tool eszközt használva a szövegmezőbe írjuk be: 3 Ezeket a szimbólumokat fogjuk a menü rétegben használni. (100. ábra)
100. ábra
A tervezésnél munkánkat segíti, ha a vezetőrácsokat és a vonalzót bekapcsoljuk (View > Grid> Show grid, View >Rulers). A "Menü" rétegre húzzuk rá a következő szimbólumokat a Window>Library menüből: "Text: Item", "Text: 1", "Text: 2", "Text: 3". Valamint a "Window>Common Libraries>Buttons" könyvtárból a "Classic buttons>Playback>gel Right" szimbólumokat úgy, mint ahogy azt a 101. Ábrán látjuk.
101. ábra Most szúrjunk be (még mindig a Menü rétegen vagyunk) négy kulcs-képkockát a 10., 20., 30. és a 40. képkockákba. A "Címkék" rétegen szúrjunk be 4 kulcs-képkockát ugyanazokba a képkockákba, és lássuk el címkével az első négyet a következőképpen: "Start", "Címkel", "Címke2", "Címke3" (a 40. képkockába tett kulcs-képkockát nem kell címkével ellátnunk).
Mindegyikbe szúrjuk be a "Stop" akciót. (102. Ábra)
102. Ábra A másik két rétegen is szúrjunk be 4 kulcs-képkockát, és folytassuk, ahogy szoktuk. Jelöljük ki az "Almenü" réteg 10. kulcskockáját, és húzzuk rá a következő szimbólumokat: "Text: Item", "Text: 1", valamint a "Window > Common Libraries > Buttons" könyvtárból a "gel Right" szimbólumokat. Az "a", "b", "c" szimbólumokat készítsük el mi magunk a korábbiakban tanultak szerint és tegyük fel ezeket is úgy, ahogy azt a 103. ábrán látjuk.
103. ábra Ismételjük meg a műveletet a 20. és 30. kulcs-képkockákra, ezekben a szimbólumok közül a "Text 1" helyett mindig a megfelelő sorszám legyen. A "Vonalak" réteg megfelelő kulcs-képkockáiba (10, 20 és 30) rajzoljuk be az összekötő vonalakat úgy, ahogy azt a 104. Ábrán látjuk.
104. Ábra
Ha idáig kész vagyunk, jelöljük ki a "Menü" réteg" 1. kulcs-képkockájában az "Item3"-hoz tartozó nyomógombot, és rendeljük hozzá a "Go to Címkel" akciót (105. Ábra).
105. ábra Az "Item2" és "Item3"-hoz tartozó gombokat is lássuk el olyan címkékkel, mint az elsőt, csak a "Címkel", illetve a "Címke3"-ra mutassanak (vigyázzunk, hogy ne keltsünk zűrzavart, és ne felejtsük el, hogy az akciót a nyomógombokhoz, nem pedig a kulcs-képkockákhoz rendeljük!). Ezzel minden számba jöhető esetre felkészültünk. Már csak a Start oldalra való visszatérést kell megoldanunk. Ehhez tegyünk a 10., 20. és 30. kulcs-képkockába egy "gel Left" szimbólumot, szövegként írjuk ki mellé, hogy "Vissza a főmenübe" (106. Ábra).
106. Ábra Ha idáig kész vagyunk, jelöljük ki a "Menü" réteg" 10. kulcs-képkockájában az "Vissza a főmenübe" felirathoz tartozó nyomógombot, és rendeljük hozzá a "Go to Start" akciót. Végezzük el ezt a műveletet a 20. és a 30. kulcsképkockánál is. Nem maradt más hátra, mint elindítani az animációt ("Control>Test Movie"), és ellenőrizni, hogy az interaktív menünk tökéletesen működik-e. Fejezzük be azzal a megfigyeléssel, hogy az almenü minden egyes nyomógombjához rendelhetünk olyan akciókat, amelyek új jelenetekre hivatkoznak. Így, attól függően, hogy melyik menüpontot jelöltük ki a menünkben, a honlapunk különböző részei felé küldhetnek bennünket.
Lecke Összefoglaló példa az animáció készítésre A következőkben egy olyan hallatlanul izgalmas film példáját fogjuk elemezni, amely az Adobe Flash CS4 összes rendelkezésre álló animációs eszközét felhasználva készült. Másoljuk át a "Flash\Filmek Minták\Skywriting.fla" fájlt a tanfolyami CD-ROM-ról a winchesterre, innen nyissuk meg és indítsuk el a "Ctrl+Enter" billentyűkombináció leütésével, és máris megtekinthetjük a végeredményt. Egy repülőt fogunk látni, ami elég látványosan a "FLASH" füstfeliratot hagyja maga után. Az animáció lejátszásának befejezése után végezzük el az elemzést. A film öt rétegre van osztva, plusz a vezetőréteg. Ha felülről indulunk, megfigyelhetjük, hogy az első két réteg (a vezetőréteget beleértve) a repülő mozgásának elkészítését szolgálják. A három következő réteg a felirat elkészítéséhez szükséges (az első réteg az "FL/" részről gondoskodott, a második az
"\SH" részről, míg a harmadik a "—" részről, vagyis a három választóvonalról, amelyek az F-et, az A-t és a H-t egészítik ki). Az utolsó réteg kizárólag a kék ég, vagyis a háttér elkészítéséhez kellett, amin a jelenet játszódik. (107.Ábra)
107. Ábra Most próbáljuk meg elrejteni az összes réteget, kivéve azt, amelyik a repülőgép animálásával kapcsolatos ("Layer: Biplane movement"), és elemezzük az animációt képkockánként, úgy, hogy az idővonalra a piros sávot gördítjük. A repülőgép mozgatásához egy sor automatikus animációt használtak fel, amit egy vezetőréteg határol körbe (ha felfedezzük a vezetőréteget, láthatjuk azt a hosszú segédvonalat, ami a repülőgép mozgását irányítja). Folytassuk tovább három, felirat elkészítésével kapcsolatos réteg elemzésével. Ez esetben az animációt képkockánként készítették rajzfilmtechnika segítségével. Vizsgálódásainkat fejezzük be a "Background" réteg megfigyelésével. Vegyük észre, hogy a háttér tulajdonképpen egy téglalap, amin a színáttűnés kékből fehérbe megy át. És a repülő? Az biztos, hogy szimbólum, de ha ezt ellenőrizni kívánjuk a könyvtárban, rájövünk, hogy nem is akármilyen szimbólum.
A repülőgép egy "Movie clip" (Filmklipp), vagyis olyan kis animáció, ami többször is felhasználható (és valóban, a repülőgép propelleres, és a propellerek forognak, miközben a repülőgép köröket ír le). Ha meg akarunk minderről győződni, kattintsunk kétszer a könyvtárban található "Biplane"-ra, és figyeljük meg, miből áll: Van egy csomó réteg, a repülőgép minden egyes részének jut egy, és csak az első kettőben van még egy képkocka, ami a propellerek forgó hatásáért felelős. (108. Ábra)
108. Ábra Ez nagyszerű példa volt arra, hogyan lehet mindössze két szimbólumból álló könyvtár felhasználásával komplex animációt készíteni. Ugyanezzel a technikával készült a CD-ROM-on lévő "Flash\Filinek Minták\Writing pen.fla" dokumentum. Próbáljuk meg az előzőekben tapasztaltakhoz hasonlóan elemezni!
Lecke Összefoglaló példa az interaktivitásra Most elemezzünk egy interaktív animáció példáját, vagyis egy olyan animációét, amely a felhasználó által kibocsátott erős impulzusra reagálni fog. Másoljuk át a "Flash\Filmek_Minták\Ripples.fla" fájlt a tanfolyami CD-ROM-ról a winchesterre, innen nyissuk meg és indítsuk el a "Ctrl+Enter" billentyűkombináció leütésével. A felirat szerint, ha a képernyő egy tetszőleges pontjára kattintunk (akár többször is), olyan kis, koncentrikus hullámokat fogunk látni, mint amik akkor keletkeznek, ha egy tükörsima tóba beledobunk egy kavicsot. (109. Ábra)
109. Ábra
Vizsgáljuk meg, hogyan készült ez az animáció. Bizonyára meg fogunk lepődni, hogy mennyire egyszerű az egész. Először is nyissuk meg a Window>Library könyvtárat, és vegyük szemügyre a négy, benne lévő szimbólumot. Egy dupla kattintással elkezdhetjük elemezni a "Ripple graphic" szimbólumot, ami nem más, mint egy ellipszis, ami egy automatikus, "Shape tween" típusú animáció segítségével kitágul. Most figyeljük meg a "ripple movie clip" szimbólumot! (Dupla kattintás a könyvtárban lévő szimbólumon.). Rejtsük el az összes réteget, kivéve felül az elsőt, és elemezzük, hogyan szerkesztették: az 1. kulcs-képkockába beszúrták a "ripple graphic" szimbólumot, majd elkészült egy animáció, ami gondoskodik arról, hogy a gyűrű, ahogy tágul, egyre átlátszóbbá váljék. (Jól jegyezzük meg: a gyűrű magától tágul ki, az animáció csak arra szolgál, hogy fokozatosan átlátszóvá tegye.) Ezek után az animáció minden képkockáját átmásolták a másik három rétegre, de úgy, hogy minden egyes beillesztés egy képkockával balra eltolva történt. Így keletkezett a négy koncentrikus kör effektus. Az utolsó, még hátra lévő részletek a következők: a "DRIP.WAV" hang-fájl beillesztése, és a "Stop" akció első képkockába való be-szúrása, ami addig blokkolja a mozi animációját, amíg nincs rá ténylegesen szükség. (110. Ábra)
110. ábra De mikor kell elindítani az animáció lejátszását? Elemezzük az utolsó, alsó réteget. Az első képkockába be-szúrtak egy világoskék színű nyomógombot (a könyvtárban jelen lévő objektumok közül ez a második). Kattintsunk a jobb egérgombbal a nyomógombra, és meg fogjuk látni, hogy melyik akciót rendelték hozzá. Ez egyszerűen a "Play" akció, ami azt jelenti, hogy a film az 1. képkockában marad (a képkockában van egy "Stop" akció) egészen addig, amíg valaki nem kattint rá a kérdéses gombra. Érdemes azonban felfigyelnünk arra, hogy jobbra (az akciók ablakában) a "Press", és nem a "Release" opció van kijelölve, mégpedig azért, mert a csepp animációjának nem akkor kell indulnia, amikor kiengedjük az egérgombot, hanem akkor, amikor lenyomjuk.
A végeredmény úgy jött létre, hogy rengeteg "Ripple movie clip" példányt szúrtak be a munkaterületre, és úgy szétszórták őket, hogy teljesen elfoglalják a rendelkezésre álló helyet (ilyen esetekben a segédrácshoz való igazodás nagyon sokat segít). A mozi lejátszása alatt bárhová is kattintunk, ott lesz egy nyomógomb, ami pontosan azon a ponton fogja elindítani az animációt!
Lecke
Új URL-re ugrás Az egyik olyan eszköz, amelyre feltétlen szükségünk lesz weboldalak létrehozásához, a különböző URL-ekre való ugrás. Sőt, mondhatnánk, hogy ez az egyetlen rendszer, amely a rendelkezésünkre áll egyszerű HTML nyelvvel készült webhely interaktívvá tételéhez. Az Adobe Flash CS4 felhasználásánál már láttuk, hogy egyik jelenetről átugorhatunk egy másikra, de mindig a kezdeti címnél maradtunk. De hogyan küldhetnénk a felhasználót egy másik webhelyre? A megoldáshoz ismét az akciók sietnek segítségünkre. Egy másik URL-re való ugrást úgy érhetünk el, hogy az animációnk egyik nyomógombjához vagy egy képkockához egy különleges akciót rendelünk. Másoljuk át a "Flash\Filmek_Minták\Flash Guy.fla" fájlt a tanfolyami CD-ROM-ról a winchesterre és indítsuk el a lejátszást, lássuk, hogy viselkedik.
Egy egyszerű honlapról van szó, amely hat, az egér áthaladására érzékeny nyomógombot tartalmaz (acélgerenda formájában). Ha rájuk kattintunk, egyáltalán nem működnek (mégpedig azért, mert a "Click" eseményhez még nincs hozzárendelve akció). (111. Ábra)
111. Ábra Tételezzük fel, hogy ennek a honlapnak a felhasználót további, összesen hat különböző webhely felé kell irányítania (minden egyes nyomógombra jut egy webhely). Gyakorlatilag minden egyes nyomógomb click eseményéhez a megfelelő Internet címre történő áttérést kell rendelnünk. Kattintsunk az egérrel a 31-es számú képkockára (ha jól megfigyeljük, a 26-tól 31-ig terjedő, különböző rétegeken lévő képkockák tartalmazzák a szóban forgó nyomógombokat), és a jobb egérgombbal kattintsunk a munkaterületen az első, felül található nyomógombra.
Kérjük le a nyomógombhoz tartozó akció ablakot (Action menüpont - már tudjuk, hogyan lehet ilyet készíteni!), és jelöljük ki a következő akciót Action>Global Functions>Browser/Network: "get Un". (112. Ábra)
112. ábra A getUrl függvényünk első paraméterének azt az Internet címet kell megadnunk, amivel össze kívánunk kapcsolódni. Második paraméter a Window, azaz el kell döntenünk, hogy az új URL abban az ablakban legyen megtalálható, amelyikben dolgozunk („_self"), vagy inkább egy új ablakban („_blank"). Ha az első paraméter, azaz URL helyére beírjuk a következő stringet: "mailto:cím@kiszolgáló", elindíthatjuk a levelező programot is.
Most jó lenne ellenőrizni, hogy működik-e a dolog, át tudunk-e valóban ugrani egy másik URL-re. Ehhez azonban némi türelemre van szükség, meg kell várnunk a következő lecke végét, amelyben azt fogjuk megtanulni, hogyan tehetjük közzé az Interneten a filmünket. Tehát azt tanuljuk meg, hogy hogyan készíthetjük el az animációnkat tartalmazó HTML fájl-t.
Lecke Film publikálása Vegyük újra elő az előző leckében készített dokumentumot, és ellenőrizzük az imént elvégzett módosításokat. Ehhez azonban át kell alakítanunk a filmünket egy HTML dokumentummá. Ezt a műveletet úgy hívják, hogy: "Film publikálása". Először is, mentsük el a dokumentumot egy üres mappába, hogy követni tudjuk az összes lépést. Ha ezzel megvagyunk, nyissuk meg a "File > Publish settings" menüt, és jelöljük ki a "HTML" lapot. (113. ábra) Az ablak legérdekesebb részeit az alábbi táblázatban láthatjuk a megfelelő magyarázatokkal együtt: Dimensions (Match movie, Pixels, Percent): Lehetővé teszi az animáció méreteinek meg-változtatását a publikáció során (filmhez igazít, pixelre módosít, százalékra módosít). Quality (Low > Best): A film lejátszásának minősége javítható (bár ehhez le kell lassítani), és alacsony minőségről kiválóra hozható. HTML alignment: A film igazításának beállítása a HTML oldal belsejében.
113. ábra Scale (No Border, Exact fit, No scale): Lehetővé teszi szegélyek nélküli animációk elhelyezését, vagy a HTML dokumentumhoz tökéletesen odaigazítja. Miután befejeztük a beállításokat, kattintsunk a "publish" nyomógombra, és ezzel elindítjuk a szó szoros értelmében vett publikációs folyamatot. Ha minden jól ment, a munkánkat megtekinthetjük az Internet Explorer böngészőben. Kicsinyítsük ikonná az összes ablakot, és nyissuk meg azt a mappát, amelybe az Adobe Flash CS4 animációt elmentettük.
A "fla" kiterjesztésű fájlon kívül (ami az általunk készített eredetire utal) még két fájlt találunk, ezekből az egyik teljesen normális HTML fájl, a másiknak pedig ".swf' a kiterjesztése. A fájlok neve azonos. (114. ábra)
114. ábra A publikációval tehát két fájlt generáltunk. Az első egy egyszerű HTML fájl, amelybe beleszúrtuk a második dokumentumot, ami maga az animáció. Most próbáljuk meg elindítani a HTML fájlt, és figyeljük meg, mi történik. Itt az egész animációnk! (115. ábra) Ha az első „nyomógombra azaz acélgerendára" kattintunk a beállított Internet oldal is megjelenik.
115. ábra Tehát a HTML fájl nem más, mint egy "tároló", melynek belsejébe a ".swf " kiterjesztésű fájl kerül. Ahhoz, hogy egy böngésző meg tudja jeleníteni a dokumentumot, rendelkeznie kell "Plugin"-nel (minden újabb változat rendelkezik vele), amely letölthető a www.adobe.com webhelyről.
Lecke
Egyéb publikációs formák Az előző leckében látott eljárás nem az egyetlen filmkészítő eljárás. Lehetséges olyan filmet is előállítani, amelynek nem ".swf" a kiterjesztése. Ha megnyitjuk a "File > Publish settings" ablakot, és kijelöljük a "Formats" beállítást, megjelenik egy lista azokról a lehetséges formátumokról, amelyekben publikálhatjuk munkánkat. Vigyázzunk azonban arra, hogy ezek közül néhány grafikai formátum, és ezekkel képeket ugyan elmenthetünk, de filmet nem. (116. Ábra) .GIF:Animált GIF-ek Adobe Flash CS4-el képkockánként megrajzolt létrehozásának beállítása. .JPG: Az aktív képkockában jelen lévő rajz JPG képként való elmentésének beállítása. .PNG: Az aktív képkockában jelen lévő rajz PNG képként való elmentésének beállítása.
116. Ábra. Windows projector : Animáció alkalmazás fájlként való elmentésének beállítása Mackintosh projector: Animáció alkalmazás fájlként való elmentésének beállítása. Quick time (.MOV): Animáció Quick time filmként való elmentésének beállítása (elvész az interaktivitás). Összefoglalásként: A film publikálásának jó alternatívája lehet a film exportálása ("File>Export>Export movie/Export image"). A publikáláshoz képest az a különbség, hogy az exportálással egyetlen egy fájlt kapunk, míg a publikációval az animáció lejátszásához szükséges fájlok összességét (mint például a HTML fájl, és a benne lévő .swf fájl). Nagy vonalakban úgy foglalhatjuk össze, hogy minden olyan esetben, amikor csak egy fájlt szeretnénk kapni (statikus vagy animált képet), érdemes az exportálást választanunk. Amikor HTML fájlként kívánunk egy interaktív animációt publikálni, célszerű a publikációt választanunk (és ezzel közvetlenül elkészíteni a szükséges fájlokat).
Lecke A film optimalizálása Befejezésként érdemes megismerkednünk néhány olyan trükkel, amely meggyorsíthatja az Adobe Flash CS4-el létrehozott animációk betöltését. A program a publikálás szakaszában maximálisan összetömöríti az animációba importált képeket és hangokat. Ehhez a művelethez, ha mi magunk még nem tettük volna meg, a leginkább összetömörített formátumokat használja fel (.JPG, .MP3 stb.). Mindazonáltal, ha néhány dologra odafigyelünk, a maximálisan elérhető eredményt fogjuk kapni a lejátszás szakaszában: 1. Ha lehet, használjunk egymásba kapcsolódó animációkat. 2. Ezek kevesebb megterhelést jelentenek, mint egy sorozat képkocka. 3. Korlátozzuk a különleges vonaltípusok számát, például a szaggatott vonalakét, a pontozottakét, és más, nem szabályos vonalakét. 4. Az egységes vonalak kevesebb tárhelyet foglalnak el. 5. A Ceruza eszközzel készített vonalaknak kevesebb memóriára van szükségük, mint az ecsettel készült vonalaknak.
6. Az animáció során változó elemek és az animáció során változatlanul maradó elemek szétválasztásához használjunk rétegeket. 7. Használjuk a "Modify >Shape > Optimize" utasításokat annak érdekében, hogy minimálisra csökkentsük a formák leírására használt szétválasztott vonalak számát. 8. Korlátozzuk a karakterek számát, és a karakterek stílusát. 9. Az MP3 a legkisebb méretű hangformátum. Használjuk minél többet. 10. Kerüljük a bitmap elemek használatát az animáláshoz; háttérként vagy statikus elemekhez használjunk bitmapeket. 11. Minden képkockában korlátozzuk a változás területét. 12. Gondoskodjunk róla, hogy az akció a lehető legkisebb területre kerüljön. 13. Amennyire csak lehet, csoportosítsuk az elemeket. 14. Egy szimbólumnak készítsük el minél több színes példányát (minél kevesebb a szimbólum, annál nagyobb lesz a sebesség). 15. Mérsékeljük a színáttűnések használatát. Egy terület színáttűnéssel való kitöltése körülbelül 50 byte-tal több tárhelyet foglal el, mint a homogén színű kitöltés. 16. Ne illesszünk be nagy hangfájlokat, hanem — ha lehetséges —használjunk inkább kisebb dallamokat, amelyek lejátszását ciklikusan ismételtethetjük az animáció lejátszása közben. Tekintsük általános szabálynak, hogy minél kisebb egy könyvtár, annál gyorsabb lesz az Adobe Flash CS4 animáció letöltése.
A tankönyv szerzői, munkájuk végére értek. Most rajtunk a sor! Minden olyan mesterfogással megismerkedtünk, ami egy Interneten publikálandó animáció létrehozásához szükséges. Ennek már csak a fantáziánk szabhat korlátot.
