2012.03.28.
9:28
Page 5
Bevezetõ Adobe Flash CS4 A forgalomban lévô kézikönyvek a Flash használatát a fejlesztô felhasználó rendelkezésére álló eszközök szigorú elemzésén keresztül mutatják be és általában olyan gyakorlatokat tartalmaznak, amelyek bemutatják ugyan a szóban forgó parancs mûködését, de közben nem nyújtanak olyan példákat, melyek a webhelyek által megkövetelt piaci igényeknek is megfelelnének. A következô Fejezetekben olyan növekvô nehézségû terveket találunk, amelyek gyorsan és gyakorlatiasan vezetnek be a program elsajátításába. Minden részben találhatóak olyan feladatok, amelyek nem csupán a bemutatott parancs mûködését illusztrálják, hanem a webhelyek által támasztott piaci igényeknek is megfelelnek. A Flash-t azért hozták létre és dolgozták ki, hogy segítségével az Interneten multimédiás termékeket lehessen terjeszteni. Multimédiás terméken olyan különbözô eszközök használatát értjük, amelyek egyidejûleg több érzékszervünk bevonásával közvetít üzenetet. Flash-ben lehetôségünk van olyan projekteket létrehozni, melyekben jelen van a mozgás, a hang és az interakció. A mozgás kétségkívül tervünk alapvetô eleme, amelynek segítségével egy sor olyan hatást tudunk elérni, amihez egy weboldal mostanáig nemigen szokott hozzá. A hang olyan elem, amit az új technológiáknak köszönhetôen a Web-re tervezett multimédiás projektekben is felhasználnak, míg a régi webes tervekben használata erôsen korlátozva volt, vagy egyenesen hiányzott. Jelenlétével még karakteresebbé tehetjük webes projektünket. Az interakció olyan elem, ami a HTML oldalakon is szerepel, mint hiperszöveg, vagy dinamikus animáció. A Flash kisfilm tervekben nem csupán újra elôjön, hanem új funkciókat is kap.
5
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:28
Page 6
Adobe Flash CS4 II. Jelen könyvhöz tartozik CD-ROM is, melyen számos gyakorlatot találunk.
6
Üdvözlet a Flash világában és jó munkát kívánunk!
2012.03.28.
9:28
Page 7
Bevezetõ Frequently Asked Question A Flash kisfilmek olyan kisméretû vektorgrafikai ábrázolások, melyeket gyorsan letölthetünk és a nézô képernyôjének méreteihez is igazodnak. Minden bizonnyal sokan láttak már Flash kisfilmet olyan webhelyeken, mint a Disney, The Simpsons és a Pepsi. Felhasználók milliói kaptak számítógépükhöz, böngészôjükhöz vagy rendszerszoftverükhöz Flash player-t, míg mások a Macromedia weboldaláról töltötték azt le. A Flash player helyi számítógépeken újra aktiválódik, ahol aztán a browserekben vagy a stand alone alkalmazásokban kisfilmeket játszik le. Amikor Flash-el dolgozunk, a Stage-en lévô rajzolt, vagy importált képek felhasználásával hozunk létre kisfilmet, melyeket az Idôvonal felhasználásával animálunk. A kisfilm interaktív is lehet, ha eseményekre válaszol és meghatározott módon változik meg. Amikor a kisfilm kész van, Flash player kisfilmként exportáljuk és vagy egy HTML oldalba illesztjük, vagypedig Web szerverre tesszük a HTML oldallal együtt. Azt tapasztaltuk, hogy azok a felhasználók, akik Flash-el kívánnak foglalkozni, egy sor olyan kérdéssel találják szemben magukat, amelyeket tisztázni kell, mielôtt érdemi munkába kezdhetnének. Mi összegyûjtöttük ezeket a kérdéseket, és biztosak vagyunk abban, hogy szerepelni fognak köztük a ti kérdéseitek is. A Flash olyan program, mint a FrontPage, vagy a Dreamweaver? A két program teljesen más, mint a Flash, mind az alapkoncepció, mind pedig a végeredmény szempontjából. A FrontPage, akárcsak a Dreamweaver, olyan program, ami nem igényli a felhasználótól a HTML nyelv és/vagy a Javascript rész-letes ismeretét ahhoz, hogy weboldalat tudjon létrehozni.
7
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:28
Page 8
Adobe Flash CS4 II. A kód egy ASCII szöveg, amely egy egyszerû szövegszerkesztô segítségével részben módosítható. A Flash-ben létrehozott dokumentumok ellenben igazi programok, amiket aztán éppen e célból létrehozott HTML oldalakhoz csatolunk. Ezeket általában movie kisfilmeknek hívjuk, de interaktív elemeket is tartalmazhatnak.
8
Léteznek olyan programok, melyek képesek webhelyet HTML-bôl Flash-be átírni? Nem. Sajnos egy HTML-ben létrehozott webhely a Flash-ben létrehozott webhelyhez képest teljesen más tulajdonságokkal rendelkezik (például a képek típusában). A kétverziós webhelyek (Flash-ben és HTML-ben) még ha meg is egyeznek grafikai project szerkezetükben és kezdeti struktúrájukban, teljesen másképpen kell létrehozni ôket és gyakran ugyanazon cégen belül is teljesen különbözô struktúrákból fejlesztik ki ôket. Tudom-e ellenôrizni a Hálón használt Flash dokumentumokban felhasznált kódot? Sajnos vagy szerencsére nem. A végeredmény, vagyis a hálóra rakott file olvasható ASCII kódban van, de valójában egy olyan program, amit a browser bináris kódként olvas és futtat. Nem kevésbé van ez így egy videónál, képnél vagy tömörített dokumentumnál. Ha aztán ennek a szövegnek a felhasználója ráadásul egy profi hacker, rögtön felfedi a bináris titkait. Mi a különbség a .FLA/.SWT és a .SWF kiterjesztésû dokumentumok kötött? Az elôbbiek „tulajdonos” formátumú dokumentumok, melyeket csak Macromedia Flash-el lehet létrehozni.
2012.03.28.
9:28
Page 9
Bevezetõ A *.SWF formátumot is Macromedia Flash-el hozzuk létre, de ez olyan formátum, ami lehetôvé teszi a termék végsô megjelenítését a legelterjedtebb böngészôkön keresztül. A Flash Authoring Tool által létrehozott .FLA és .SWF dokumentumok sokkal több információt tartalmaznak, mint egy átlag Flash movie .SWF, ebbôl kifolyólag nagyobb kiterjedésûek, a két dokumentum végeredménye viszont gyakorlatilag megegyezik. Ugyanezt tapasztaljuk, ha Adobe Photoshop-ban hozunk létre képet. A kidolgozás kezdeti szakaszában több szinten kell dolgoznunk és csak akkor tudjuk elmenteni munkánkat, ha a azt a Photoshop .PSD „tulajdonos” formátumában tesszük meg és csak a teljes kidolgozás után tudjuk elmenteni képünket különbözô lépéseken keresztül az Internetre is alkalmas .GIF és .JPG formátumban. El tudom menteni a Flash-el készült munkámat különbözô formátumokban is? A leggyakrabban használt formátum, amivel internetes felhasználáshoz exportálhatjuk munkánkat, az SWF formátum (Shock Wave Flash). Ez lehetôvé teszi számunkra, hogy megôrizzük az interaktív információkat. Ha viszont munkánkat kizárólag film formátumban kívánjuk megôrizni, átalakíthatjuk a Flash kisfilmeket más formátumokba is, mint például az animált GIF (animated GIF) vagy az AVI filmek. Léteznek olyan formátumok is, amelyek a különbözô programokban történô feldolgozásra alkalmasak (WMF sorozatok vagy EPS, stb). Léteznek-e olyan programok, amelyek segítségével Flash nélkül is létrehozhatunk SWF animációkat? Léteznek, és pont azért, mert a Macromedia Flash nem „tulajdonos” programja a .SWF formátumnak. Minthogy az Adobe Photoshop sem az egyedüli olyan program, amivel a hálóra (GIF és JPG) vagy kiadásra (TIF) alkalmas képeket lehet létrehozni.
9
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:28
Page 10
Adobe Flash CS4 II.
10
Ilyen programokat az Inteneten is találunk. Néhány közülük kizárólag szöveganimálással foglalkozik (www.swishzone.com) míg mások háromdimenziós objektumokhoz kötött animációval (www.erain.com). Ezenkívül a fejlesztôk rendelkezésére áll egy olyan eszköz, ami alkalmas plug-in (járulékos program) létrehozására, amit aztán a fô programba illeszthetünk. A plug-in és a szûrôk a késôbbiekben biztosan nagymértékben segítik majd munkánkat. A program kínálta lehetôségek jelentôsek, és ha követjük az utasításokat, nem is telik majd sok idôbe, hogy jártasságra tegyünk szert az új programban.
flashcs4_vs4_2.qxd
2012.03.28.
9:28
Page 11
1. FEJEZET
2012.03.28.
9:28
Page 13
1. Fejezet A Flash alapjai A Flash-t, mint azt már említettük azért hozták létre és dolgozták ki, hogy segítségével az Interneten multimédiás termékeket lehessen terjeszteni, az olyan programok mellett, amelyeket multimédiás feliratok létrehozására dolgoztak ki és amely programokat méretük miatt kizárólag CD-ROM-on lehet terjeszteni. Most nézzük meg részletesebben a program tulajdonságait, vagyis az Internetre készített tervek jellemzõit. Gyorsaság A létrehozott kisfilmek könnyedsége egyenesen következik a vektorgrafika használatából, ami sokkal könnyedebb, mint a bitmap grafika, vagyis az olyan képszerkesztõ programok által létrehozott grafika, mint amilyen a PhotoShop is. A tervbe illesztett képekhez és hangokhoz a program olyan fejlett tömörítõ algoritmusokkal rendelkezik, amelyek lehetõvé teszik, hogy azok minél kisebb méretûek legyenek. Ezt a streaming technológiának köszönhetjük, ami keskeny sávú telefonvonalon lehetõvé teszi a project download alatti megjelenítését. Interaktivitás Olyan korban élünk, amelyikben egy nyomógomb segítségével mindent megtehetünk: filmfelvételt irányíthatunk és beprogramozhatjuk házunk fûtési idejét. Szerencsére azért attól még messze állunk, hogy egyetlen hatalmas ujj legyünk, mint ahogyan azt a tudósok a következõ évezredre jósolják, de ennek ellenére nem nehéz észrevennünk azt, hogy tényleg a nyomógombok és az interaktivitás korában élünk, ha másért nem, hát azért, mert mind nagyobb teljesítményû szerkezetekkel együttmûködni azt az érzetet kelti bennünk, mintha irányíthatnánk a minket körülvevõ eseményeket.
13
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:28
Page 14
Adobe Flash CS4 II. A Flash-ben is megtaláljuk mindazokat az eszközöket, amelyek révén a felhasználó kapcsolatba léphet mindazzal a dologgal, amit pont neki hoztunk létre. Sokoldalúság A Flash különbözõ méretû és arányú munkákat tud kezelni. Alkalmas teljesen multimédiás webhely létrehozására is, vagy használhatjuk akár csak egyetlen navigációs sáv, vagy a webhely reklám címfeliratának létrehozására is, minthogy könnyen integrálható a HTML-el. Kreativitás A weboldalak mai formájukra évek alatt nõtték ki magukat; kezdetben csak egyszerû szövegek voltak, amik aztán az oldalak külsõ megjelenését és használhatóságát lényegesen feljavító eszközökkel gazdagodtak. A Flash ezzel szemben már a multimédiás termékek világában jött létre, ami már évek óta fejlett tördelési technikákat alkalmaz és ez gyakorlatilag lehetõvé teszi számunkra azt, hogy bármilyen projektet megvalósítsunk, amit csak akarunk.
14
Standard A HTML és a két konkurens böngészõ, a Netscape és az Internet Explorer számára létrehozott és optimalizált oldalak megjelenítésével kapcsolatos mindig is fennálló problémák: a Flash a létrehozott kisfilmek megjelenítéséhez saját tulajdonos plug-in-t használ, úgy, hogy biztosítja minden böngészõ számára egy megfelelõ egyedüli kód létrehozását.
2012.03.28.
9:28
Page 15
1. Fejezet
1. Lecke A grafikus felület Indítsuk el a programot és kezdõdjék a kaland! Elsõ megközelítésekor a tapasztalatlan felhasználó elveszhet a programban. Az elsõ szabály az, hogy mindig tartsuk ellenõrzés alatt cselekedeteinket, hogy mindig tisztában legyünk azzal, éppen milyen területen dolgozunk. A Flash elsõ futtatásakor egy kezdõlap jelenik meg (1. Ábra), ami lehetõvé teszi számunkra, hogy gyorsan hozzáférhessünk a megnyitott panelekhez és a leggyakoribb tevékenységekhez.
15
flashcs4_vs4_2.qxd
1. Ábra
flashcs4_vs4_2.qxd
2012.03.28.
9:28
Page 16
Adobe Flash CS4 II. Mint minden olyan programban, amelyet a Windows operációs rendszerre terveztek, az Adobe Flash-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). 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 ("Adobe PhotoShop", "Paint Shop Pro", vagy akár a "Paint"). Az Adobe immár minden alkalmazása ugyanolyan grafikai felülettel rendelkezik. Használat közben megláthatjuk, hogy mennyire ergonómikus, könnyen kezelhetõ és gyors a munka ezzel a programmal.
16
Igény és tetszés szerint át is rendezhetjük az ablakokat. Vigyük az egérkurzort a Fejléc sáv bal szélére és amikor a négyágú nyíl jelenik meg (2. Ábra), a kívánt pozícióba tudjuk vele húzni az ablakot. Ugyanezzel a módszerrel meg tudjuk változtatni az ablakok sorrendjét, ki tudunk emelni egyet az ablakok csoportjából, majd vissza is tudjuk helyezni azt akár egy új helyre. Amikor úgy döntünk, hogy visszahelyezünk egy ablakot a többi közé, vagy egyszerûen csak meg akarjuk változtatni a megjelenítés sorrendjét, az egér bal gombját csak abban a pillanatban kell felengednünk, amikor a cím körül megjelenik a fekete keret, különben az ablak szabadon álló marad.
2012.03.28.
9:28
Page 17
1. Fejezet
2. Ábra A Window (Ablak) menüben kiválaszthatjuk, hogy mely panelek jelenjenek meg. Minden ablak Fejléc sávja rendelkezik egy háromszög alakú gombbal (ez az ablak neve elõtt található), amivel az ablakot kicsinyíteni, vagy megnagyobbítani tudjuk. A fejléc sáv jobb oldalán láthatunk egy kis gombot, ami az ablak másodlagos menüjéhez való hozzáférést teszi lehetõvé. Ez különbözhet magára az ablakra vonatkozó egyszerû parancsoktól, egészen bonyolult funkciókkal is bírhat és a gomb csak akkor látható, ha az ablakot megnyitottuk. Ha lenyomjuk a Tabulátor billentyût, minden ablak megjelenítését inaktiválhatjuk vagy aktiválhatjuk, kivéve az Idõvonal-ét, jelenleg ez teszi lehetõvé a munkaterület legnagyobb felületû hozzáférését. A legérdekesebb újdonság, amit a Flash CS4 bevezetett, az a környezetre (kontextusra) érzékeny Properties (Tulajdonságok) ablak, ami az éppen kijelölt elem függvényében változtatja tartalmát.
17
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:28
Page 18
Adobe Flash CS4 II. Ez az ablak lesz az állandó hivatkozási pont: egyfajta õrtorony, ami gyakran automatikusan változtatja a többi ablak funkcióit.
18
Ne aggódjunk, ha úgy érezzük, hogy a Flash felülete csak zûrzavart keltett a fejünkben rend helyett és inkább egyetlen kezdõ layout-tal szeretnénk kezdeni a Flash-el való ismerkedést. Az Ablakok menübõl válasszuk a Panelcsoportok menüpontot, majd az Alapértelmezett layout-ot.
2012.03.28.
9:28
Page 19
1. Fejezet
2. Lecke Fejlesztési környezet Kevés Webre tervezett grafikus program büszkélkedhet olyan szintû munkafolyamat-ellenõrzéssel, mint a Flash. A legjobb eredmények elérésének a kulcsa a felhasználói felületben található (3. Ábra).
3. Ábra Mint ahogyan azt az elõzõ leckében elmondtuk, sosem téveszthetjük szem elõl munkánkat, a fejlesztési környezetet, ahol éppen dolgozunk. Éppen ezért ismerkedjünk meg a Flash különbözõ területeivel és emeljük ki azokat az elemeket, amelyek a kisfilmet és funkcióit tartalmazzák.
19
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:28
Page 20
Adobe Flash CS4 II. Amikor a Flash tartalmát elemezzük, három kulcsfontosságú elemet kell észben tartanunk: 1. a mozgást, 2. az idôt, 3. az interakciókat. Vegyük példának az autóvezetést: ahhoz, hogy egyik helyrõl a másikra menjünk, figyelnünk kell a mozgást és az idõt ha például keresztezõdésen hajtunk át. Ha pedig jelzõlámpa mûködik a keresztezõdésben, egy interaktív elemmel találjuk szemben magunkat.
20
Mint azt majd látjuk, egy kisfilm eleme térben is, idõben is és a viselkedésben is egy bizonyos pozícióval bír. E hármas tagolódás alapján három fô fejlesztési környezet van: – A Stage (színpad), ami az a terület, ahol az objektumok térben és egymás közti elhelyezésével összeállítjuk a kisfilmet; – Az Idôegyenes (Timeline), ami a menü és a Stage közé helyezett sáv és az idõ sorrendje alapján mutatja az objektumok elhelyezkedését; – A Könyvtár (Library) egy különálló ablakban látható. Ebben a környezetben tárolódnak az objektumokat alkotó Szimbólumok (késõbb még beszélünk róluk), mely objektumokat késõbb munkánkban felhasználhatunk (mint Példányszámokat) speciális tulajdonságokkal és magatartásokkal. Ezek mellett vannak az Eszközök (Tools) és az Idõegyenes mellett megfigyelhetjük a szintek (Layer) egymás utáni sorrendjét is. Nyissunk meg egy egyszerû animációt a File>Open menüpontokon keresztül az Oktató CD-rõl, a Flash _óraimunkák>Fejezet_1>Négyzet-animáció.fla nevû fájl-t.
2012.03.28.
9:28
Page 21
1. Fejezet Az elsõ mûvelet, amit el kell végeznünk, az a teljes animáció kipróbálása az Controll>Test Movie (Ellenõrzés>Kisfilm próba) parancssoron keresztül vagy a Ctrl+Enter billentyû kombinációval. Nagyon érdekes a négyzet mozgása, miközben változik a színe. Még korai azzal foglakoznunk, hogy megértsük az effektet, most inkább nézzük meg azt, hogy milyen objektumok (Gombok, animált Clippek és grafikonok) szükségesek az animáció megvalósításához. Ehhez elég az F11 billentyû megnyomásával vagy a Ctrl+L billentyû kombinációval a filmben lévõ Könyvtárba lépnünk. Ebben az egyszerû kisfilmben a könyvtárban csak egy grafikai szimbólumot találunk, a Négyzetet. A címkére kattintva nézzük meg grafikai megjelenését és tulajdonságait. A felsõ téglalapban ekkor megjelenik az elõzetes kép. (4. Ábra)
4. Ábra Ez csak egy kezdeti példa a szimbólumok tanulmányozásához és inkább arra való, hogy tisztában legyünk az egyes elemek grafikai megjelenésével. Figyeljünk rá, hogy a könyvtárban lévõ néhány szimbólum a fejlesztési szakaszban jött létre és nem kerül felhasználásra a kisfilmben.
21
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:28
Page 22
Adobe Flash CS4 II. Az Idõegyenes és a Stage között találjuk az Edit Symbols (Szimbólumok szerkesztése) gombot (5. Ábra) a ténylegesen használt szimbólumok listájával. Ha kiválasztunk egy szimbólumot, például a négyzetünket, a Stage-en megtekinthetjük és meg is szerkeszthetjük.
5. Ábra
22
A jelenethez való visszatéréshez használjuk az Edit Scene (Jelenet szerkesztése) (Szimbólumok szerkesztése melletti) gombot (6. Ábra). Néhány kisfilm több jelenetbõl áll. Ilyen esetekben a megfelelõ gombokra kattintva egyik jelenetrõl a másikra válthatunk (6. Ábra).
2012.03.28.
9:28
Page 23
1. Fejezet
6. Ábra Térjünk vissza az Idõegyenesre: azt látjuk, hogy szerkesztési igények alapján a kisfilm egy szintre tagolódik és bizonyos idõtartammal. Az elkövetkezõ fejezetekben az elemek részletesebb elemzése révén megpróbáljuk majd mélyebben is megismerni a program mûködését. Az, ami nyilvánvalónak tûnik a kisfilmek és a stage kapcsán az az, hogy a Flash a mozi világát idézi: magukat a Flash-el készített fájlokat is Movie-knak, illetve filmeknek nevezzük.
23
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:28
Page 24
Adobe Flash CS4 II.
3. Lecke Az Idõegyenes és a Színpad Egy kevésbé tapasztalt felhasználó számára a "kisfilmkészítés" kifejezés egy hálóra tervezett program kapcsán egy kicsit homályos lehet. Éppen ezért tisztáznunk kell mindenekelõtt néhány dolgot, mielõtt folytatnánk a programba történõ bevezetést. Úgy képzeljük el a Flash-el készített kisfilmeket, mint egy sor fotogramot (frame-et), amelyek úgy peregnek le egymás után szemünk elõtt, mint egy igazi film képkockái. Az Idõegyenes (7. Ábra) magában foglalja a teljes kisfilmet alkotó különbözõ képsorokat.
24
Minden létrehozott képsor itt fog szerepelni fotogramról fotogramra, vagyis képkockáról képkockára.
7. Ábra Gyakorlatilag ez az az elem, ami leginkább jellemzi azokat a programokat, amelyekben projekteket az idõ függvényében kibontakozó cselekmény szerint kell kidolgozni.
2012.03.28.
9:28
Page 25
1. Fejezet Ezt a cselekményt lineárisan kell elképzelnünk, mint egy folyamot: a szünetek és ismétlõdések (ciklusok) jeleken keresztül nyilvánulnak meg. Ezek beillesztését majd a késõbbi fejezetekben fogjuk megtanulni. A kisfilm eleje a sáv bal legszélén lesz, míg a vége jobbra található. Itt láthatjuk egy kisfilm idõtartamát és itt láthatjuk az õt alkotó elemeket is, mint például azoknak s szinteknek a számát, amelyen kibontakozik. Az Idõegyenest úgy kell elképzelnünk, mint egy könnyen áttekinthetõ rácsvonalat, ahol mind a fotogramok, mind pedig a szintek tulajdonságai láthatóak: – a sorokban helyezkednek el a Layer-ek vagy Szintek. Minden objektum, beleértve a jelenetet is, egy vagy több szinttel bír. A kisfilm megnyitásakor csak egy szint van (Layer1) a jelenetben (8. Ábra), de végtelen számút lehet készíteni belõle;
8. Ábra – az oszlopokban találhatóak a Fotogramok (Frames), melyek egy meghatározott pillanatban a Stage "fényképét" alkotják. Gyakorlatilag egy filmképsor fotogramjait követik. További három nagyon fontos elem: – az Olvasófej, mely egy kis piros négyszög, ami az adott pillanatban megjelenített fotogramot emeli ki;
25
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:28
Page 26
Adobe Flash CS4 II. – Fejléc (Header), mely a Timeline felsô része és a fotogramok növekvô számát jelöli; – A Frame állapota az Idôegyenes alatt van és néhány olyan speciális elemet jelenít meg, mint az aktuális fotogram száma, a kisfilm sebessége és az eltelt idô. Ezek az értékek természetesen arra a fotogramra vonatkoznak, amelyiken az Olvasófej épp elhelyezkedik.
26
A fotogramok gyakoriságát és az egymást követõ sebességüket mi magunk is beállíthatjuk, így a mozgás olyan lesz, mint amilyet mi szeretnénk. A sebességet "fps"-ben jelölik (fotogram per szekundum – frame per second). Ha például egy film 50 fotogramból áll és 5 fps sebességû, akkor a kisfilm teljes idõtartama 10 másodperc. Mindenesetre ez az animációnak csak egy része. Nem minden Flash kisfilm tartalmaz animációkat, míg mások úgy használják a fotogramokat, mint egy normális webhely a saját oldalait. Ezek mellett az elemek mellett balra található néhány hasznos, a fotogramok kezelésére és az elemek szerkesztésére szolgáló eszköz, de ezeket majd a következõ fejezetekben fogjuk részletesen tárgyalni. A Színpad, vagy ahogyan gyakrabban nevezik: Stage, a képernyõ közepén található terület, ahová animációink összes eleme kerül. Az itt elhelyezett bármilyen grafikus elem rögtön látható is lesz. Persze a Stage-en kívül is lehetnek elemek, ezeket a szürke területre, úgymond "off stage" helyezzük. A Stage-en az objektumok térben helyezkednek el, de mozdulatlanok, nem mozognak. Mindazonáltal meg van ennek az ablaknak is a jelentõsége, ugyanis megjeleníti az egyes elemek közti szinkronozást, mintegy lefényképezve az adott pillanatnyi állapotot.
2012.03.28.
9:28
Page 27
1. Fejezet Az Idõegyenes nélkül a Stage bármilyen grafikus rajzolóprogram munkaterülete is lehetne. A Stage kiszélesedhet, ha a megfelelõ paranccsal elrejtjük az idõegyenest. Az ablak minél jobb megjelenítéséhez létezik néhány rövid út is: Billentyûzetrõl: Ctrl+1: 100%-ra növeli a kész elemek és a színpad méretét; Ctrl+2: maximális ráközelítés a színpadra (ez az ablak számára elfogadható legnagyobb nagyítás); Ctrl+3: maximális ráközelítés az objektumra (ez az ablak számára elfogadható legnagyobb nagyítás).
27
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:28
Page 28
Adobe Flash CS4 II.
4. Lecke
28
Kisfilm beállítása Amikor megnyitjuk a Flash-t, egy olyan új terv elõtt találjuk magunkat, ami animációkat, képeket és gyakorlatilag a fejünkben megszületõ bármilyen ötletet képes befogadni. A képernyõ kezdeti mérete a programban alapértelmezett, nekünk csak annyit kell tennünk, hogy tervünket az elkészítendõ munkánknak megfelelõen állítsuk be. Egy jó szabó is a megvarrandó ruhadarab alapján vásárol anyagot. Mást egy dzseki és mást egy hosszú kabát számára. Mi se tegyünk másképp és végezzük el jelenetünk beállításait! A megvalósítandó terv/kisfilm tulajdonságait a Modify>Document (Kidolgozás>Dokumentum) parancsokon keresztül választhatjuk ki. A megjelenõ dialógusablakban (9. Ábra) választhatjuk meg: – a kisfilm méreteit mind széltében, mind pedig a magasságot tekintve; – a háttérszínt; – a másodpercenkénti fotogramszámot (fps – frame per second), ami a kisfilm lejátszásának sebességét határozza meg; – a vonalzók által használt méretegységet. Miután kiválasztottuk az új tulajdonságokat, kattintsunk az OKra, ezzel el is végeztük a film, illetve a terv környezetének beállítását.
2012.03.28.
9:28
Page 29
1. Fejezet
9. Ábra Trükk Ha duplán kattintunk a Frame Rate (Fotogramok gyakorisága) mezõre az Idõegyenes alatt (24 fps-en kellene lennie), megnyílik a Document Properties (Dokumentum tulajdonságai) ablak, ahol könnyen beállíthatjátok ezeket a paramétereket. Ugyanehhez a dialógusablakhoz jutunk a Properties (Tulajdonságok) panelrõl is. Munkánk egész ideje alatt tartsuk megnyitva ezt a panelt, minthogy a Stage-rõl és az ott lévõ elemekrõl tartalmaz információkat. Használjuk az animációk kidolgozása alatt történõ módosításához. Miután elindítottuk a programot, nyissuk meg az Oktató CD-n található matrix.fla dokumentumot (Oktató Cd>Flash_óraimunkák>Fejezet_1) és módosítsuk a fotogramok gyakoriságát 12-rõl 3-ra. Ezzel sokkal realisztikusabb lesz a Typewriter effekt. Mentsük el a módosításokat. Most nyissuk meg az Oktató Cd-n található egyszerû_ film.fla fájlt (Oktató Cd>Flash_óraimunkák>Fejezet_1). Miután megnyitottuk, állítsuk maximális méretûre a Stage-et. A Modify>Document (Kidolgozás>Dokumentum) parancsokon keresztül menjünk a tulajdonságokhoz és módosítsuk a dokumentum méretét 200x300 pixelre és állítsunk be új háttérszínt is.
29
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:28
Page 30
Adobe Flash CS4 II. Miután végeztünk a módosításokkal, elég az OK-ra kattintanunk és megtekinthetjük a végeredményt. Mint látjuk, a dokumentum méretei megváltoztak, de a Stage-en lévõ majom méretei változatlanok maradtak és egy része ki is lóg a Stage-rõl (10. Ábra).
10. Ábra
30
Most módosítsuk 600x400 pixelre a méreteket a Properties (Tulajdonságok) panelen. Amikor egy tervbe kezdünk bele a Flash-el, be kell állítanunk a lejátszás sebességét és a vízszintes és függõleges méreteket. Lényeges, hogy kész elképzelésünk legyen a tervrõl, mert a project félúton történõ megváltoztatása negatívan befolyásolná a kisfilm végeredményét. Ha a fotogrammok túl lassan követik egymást, az megállítja majd újraindítja az animációt; ha viszont túl gyorsan követik egymást a képkockák, az animáció részletei életlenek lesznek.
2012.03.28.
9:28
Page 31
1. Fejezet Ahhoz, hogy a weben a lehetõ legjobb hatást érjük el, válasszuk a 12 fotogramszámot másodpercenként. A QuickTime és az AVI kisfilmek általában 12 fps-re vannak beállítva, míg a képkockák standard gyakorisága 24 fps. Az animáció összessége és az animációt lejátszó számítógép gyorsasága befolyásolja a végeredményt. Próbáljuk ki ugyanazt az animációt más-más számítógépen és próbáljuk meg optimális fps-t beállítani! Minthogy az egész Flash kisfilmre egy fps érték vonatkozik, érdemes még az animáció megkezdése elõtt beállítani azt. Ha a megtervezendõ kisfilm egy webdokumentumban fog megjelenni, gondolnunk kell a browser által beállított méretekre, a kisfilm méretére és a képernyõ felbontására. SCHERMO 640x480 800x600 1024x768 1280x1024
IExplorer 620x318 780x438 1004x606 1260x862
Netscape 3.0 620x300 780x480 1004x588 1260x844
Netscape 4.7 620x302 780x422 1004x540 1260x846
Egy kisfilm minimális és maximális méretei 18x18 és 2880x2880 pixel tehát jóval fölötte vannak egy browser vagy egy olyan lejátszó, mint a Flash Player méreteinél.
31
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:28
Page 32
Adobe Flash CS4 II.
5. Lecke
A terv A sok elmélet után most már lássunk hozzá tervünk felépítéséhez! A "legjobb" webhely címért versengõ site-ok a nagy átlagtól eltérõ felülettel rendelkeznek és ez igazi pluszt jelent. A Flash segít nekünk mind a felület, mind pedig webhelyünk teljes tartalmának megalkotásában. A hangok, rollover-ek, legördülõ menük és animációk mind-mind az egyszerû és kellemes navigálás biztosítékai. Most olyan webhely alapjait fogjuk létrehozni, aminek a Flash irányítja navigációs rendszerét és tartalmát.
32
Indítsuk el a Flash-t és próbáljuk is ki rögtön az frissen tanult dolgokat:: Mindenekelõtt a felület néhány alapvetõ paraméterét kell definiálnunk, mint például a háttérszínt és a Flash munkaterületét. Mi a 600x400 pixeles méretet és fekete háttérszínt választottunk. Mentsük is el rögtön munkánkat Flash CS4 formátumban felület_terv néven. (11. Ábra).
2012.03.28.
9:28
Page 33
1. Fejezet
11. Ábra Jó, ha felületünk külsejét elõre megtervezzük, akár tollal és papírral. Ne kezdjünk soha üres képernyõvel úgy, hogy majd véletlenszerûen illesztünk be objektumokat. Miután eldöntöttük, hogy milyen legyen a külsõ, hozzáláthatunk a gombok és a tartalom kidolgozásához. Rendezett felületet tudunk készíteni néhány egyszerû formával is: felületünk grafikája 6 különbözõ méretû négyszögbõl áll, melyek hat különbözõ részt tartalmaznak. Grafikát létrehozni mindenesetre sokkal könnyebb vonalzók és vezetõk segítségével. A Flash-ben megjeleníthetjük a vonalzókat és vezetõket, amelyek segítségével pontosan elhelyezhetjük és igazíthatjuk dokumentumunkban az objektumokat. Ha kijelöljük a View>Rulers (Megjelenítés>Vonalzók) parancsokat, a Stage bal felsõ részén egy vízszintes és egy függõleges vonalzó jelenik meg (12. Ábra).
33
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:28
Page 34
Adobe Flash CS4 II. Ha a vízszintes vonalzó bármely pontjára rákattintunk és lefelé húzzuk, be tudjuk állítani a vízszintes vezetôket.
12. Ábra Ha a vízszintes vonalzó bármely pontjára rákattintunk és lefelé húzzuk, be tudjuk állítani a vízszintes vezetõket. Kattintsunk a vonalzóra és húzzuk lefelé addig, amíg el nem érjük a 10 pixeles vízszintes pozíciót. Jelöljünk be a 110, 120, 210, 220, 230, 330 és 390 pixelen is vezetõket.
34
Ugyanígy, ha a függõleges vonalzó bármely pontjára rákattintunk, függõleges vezetõket állíthatunk be. Kattintsunk a vonalzóra és húzzuk balra, amíg el nem érjük a 10 pixeles függõleges pozíciót. Jelöljünk be vezetõket 160, 170, 430, 440 és 590 pixelen. (13. Ábra) Amilyen egyszerûen megjeleníthetjük, olyan egyszerûen el is távolíthatjuk õket a View>Guides>Show Guides (Megjelenítés>Vezetõk>Vezetõk Beálítása) parancssoron keresztül, vagypedig egyszerûen a vonalzókra húzva azokat, amelyek már nem kellenek. (14. Ábra)
2012.03.28.
9:28
Page 35
1. Fejezet
13. Ábra
14. Ábra A vezetõk színét is beállíthatjuk a View>Guides>Edit Guides (Megjelenítés>Vezetõk>Vezetõk Szerkesztése) parancssoron keresztül és beállíthatjuk a hozzájuk kapcsolódó objektumok tulajdonságait is (15. Ábra).
35
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:28
Page 36
Adobe Flash CS4 II.
15. Ábra
36
Most, hogy elvégeztük a munkaterület beállításait, nem marad más hátra, minthogy megtanuljunk rajzolni, de ehhez tovább kell lépnünk a következõ fejezetbe és meg kell ismerkednünk az Adobe Flash CS4 kínálta rajzeszközökkel.
flashcs4_vs4_2.qxd
2012.03.28.
9:28
Page 37
2. FEJEZET
2012.03.28.
9:28
Page 39
2. Fejezet
1. Lecke A rajzeszközök Ha valaki szeret számítógépen mûalkotásokat létrehozni, biztosan használt már grafikai programokat az elkészítéséhez. Egészen más azonban Flash-el rajzolni, mint más grafikai csomaggal. Ha ecsethez és a Photoshop effektjeihez vagyunk hozzászokva, ugyanúgy el kell sajátítanunk a rajzolás alapjait Flashben, mint bármilyen más új felhasználónak. A Flash vektorképeken alapuló program, vagyis úgy lehet vele formákat létrehozni, hogy az nem megy a minõség rovására, ha például felnagyítjuk az alakzatot. Gyakorlatilag a legalapvetõbb dolgoktól kezdve tanulunk meg rajzolni vele. Minden Flash animáció, amit a hálón látunk, formák és vonalak együttese, melyhez egy csipet "trükköt" adva igazán testreszabott formákat lehet létrehozni. Ennek a fejezetnek az a célja, hogy megismertesse az Adobe Flash által kínált rajzeszközöket. A fejezet végén nem csak egy új programot fogunk ismerni, hanem egészen biztosan képesek leszünk olyan objektumokat és grafikus elemeket is megrajzolni, melyeket aztán projektjeinkben is könnyedén felhasználhatunk. Ezenkívül képesek leszünk megérteni egy terv létrehozásának mechanizmusát és azt, hogy hogyan kell eljárnunk, hogy tervünk minél áttekinthetõbb és összefüggõbb legyen.
39
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:28
Page 40
Adobe Flash CS4 II. A rajzeszközöket felvonultató sáv most a jobb oldalon helyezkedik el, de bármikor áthelyezhetjük, vagy áthúzhatjuk a kívánt helyre, sõt, még be is zárhatjuk (a Window>Tools – Ablak>Eszközök paranccsal tudjuk majd újra megjeleníteni). Az eszközök között, mint látjuk, egy sor olyan eszközt találunk, amit már ismerhetünk más programokból is.
40
A sáv négy különbözõ részre van felosztva: az elsõben találjuk az objektumok létrehozásához és módosításához szükséges Eszközöket – Tools, a másodikban a Megjelenítés – View eszközeit, a harmadikban a Színek – Colors beállításához szükséges eszközöket s végül a negyedik részben Opciók – Options név alatt a modifikátorokat. (16. Ábra).
16. Ábra Ez utóbbi a sáv felsõ részében kijelölt eszköz függvényében változik és lehetõvé teszi magának az eszköz tulajdonságainak a megválasztását és beállításait. A megfelelõ ikonra kattintva a Flash által kínált eszköz bármelyikével elkezdhetjük munkánkat.
2012.03.28.
9:28
Page 41
2. Fejezet Ne felejtsük el, hogy bármit, amit csinálunk, látható lesz a böngészõben. Éppen ezért a Stage szélére is tehetjük a formákat azért, hogy a hálón majd egyszerû körvonalképeknek látszódjanak. A következõ oldalakon részletesebben is fogjuk ezt még tárgyalni. Most azonban koncentráljunk a Vonalak megszerkesztésére! Állítsuk be a rácsvonal megjelenítését a View>Grid>Show Grid (Megjelenítés>Rácsvonal>Rácsvonal mutatása) parancssoron keresztül és aktiváljuk a Line Tool (Vonal) eszközt. Ez az eszköz sokszögek és szabálytalan formák rajzolására alkalmas. Tipp Az N betûvel azonnal elô tudjuk hívni ezt az eszközt. A rácsvonalak megjelenítése lehetõvé teszi számunkra, hogy könnyebben megrajzoljuk alakzatainkat (17. Ábra) a Stage-en.
41
flashcs4_vs4_2.qxd
17. Ábra Bármikor könnyedén megjeleníthetjük és eltüntethetjük a rácsvonalat, ha úgy érezzük, nincs már szükségünk rá: ehhez csak törölnünk kell a kijelölést az elõzõ menüpontban.
flashcs4_vs4_2.qxd
2012.03.28.
9:28
Page 42
Adobe Flash CS4 II. A View>Grid>Edit Grid (Megjelenítés>Rácsvonal>Rácsvonal szerkesztése) menüben még a rácsvonal méretét és színét is meghatározhatjuk és itt állíthatjuk be a hozzá kapcsolódó objektumok tulajdonságait is (18. Ábra).
18. Ábra
42
Jelenítsük meg a rácsvonalat és aktiváljuk a Vonal eszközt (N). A tulajdonságok panelen kiválaszthatjuk a vonal színét, vastagságát és stílusát. Rajzoljunk ezzel az eszközzel egy olyan "repülõgépet", mint amilyet a 19. Ábrán is láthatunk.
19. Ábra
2012.03.28.
9:28
Page 43
2. Fejezet
2. Lecke Egyszerû formák létrehozása Említésre való munkákat alapformák alkalmazásával is létre lehet hozni. Az Oval Tool (Ovális) eszközzel ellipsziseket és köröket tudunk rajzolni (a Shift billentyû lenyomva tartása közben szabályos kört rajzolhatunk). (20. Ábra)
20. Ábra Tipp Az O betûvel azonnal elô tudjuk hívni ezt az eszközt. Miután kiválasztottunk egy eszközt, a Properties (Tulajdonság) panelen (21. Ábra) megtaláljuk a rendelkezésünkre álló opciókat: a forma színét, vonalvastagságát, a körvonal stílusát és a kitöltõszínt.
43
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:28
Page 44
Adobe Flash CS4 II.
21. Ábra
44
A Rectangle Tool (Derékszög) eszközzel derékszögû formákat és négyszögeket tudunk rajzolni (a Shift billentyû lenyomása közben). (22. Ábra)
22. Ábra Miután a sáv alsó részén (Options – Opciók) kiválasztottunk egy eszközt, egy másik modifikátor, a Derékszög sugarának lekerekítése jelenik meg, ami segítségével ahhoz a dialógusablakhoz jutunk, ahol megválaszthatjuk a csatlakozó görbület sugarát (23-24. Ábra).
2012.03.28.
9:28
Page 45
2. Fejezet Tipp Az R betûvel azonnal elõ tudjuk hívni ezt az eszközt.
23. Ábra
45
flashcs4_vs4_2.qxd
24. Ábra
flashcs4_vs4_2.qxd
2012.03.28.
9:28
Page 46
Adobe Flash CS4 II.
3. Lecke Rajzoljunk majmot a webre! Ettõl a leckétõl kezdõdõen azt fogjuk megmutatni, hogyan kell majmot rajzolni egy olyan képregényhez, ami aztán majd a webre megy. Még ha nem is a legfõbb vágyunk az, hogy majmot rajzoljunk, arra kérünk, hogy kövessük lépésrõl-lépésre az utasításokat, mert hasznos fogásokat fogunk így elsajátítani. A terv, amit bemutatunk, pusztán egymásra helyezett oválisok felhasználásával készült el. Állítsunk be egy Új Flash Dokumentumot fehér háttérszínûre és 550x400 pixeles méretûre. Mentsük el dokumentumunkat az elõzõ fejezetben látott módon és adjuk neki a terv_majom nevet.
46
Az elsõ lépés a majom arcának megrajzolása lesz. Kattintsunk ehhez az Eszköztáron az Ovális eszközre. A vonal vastagságát állítsuk 4-re, színét pedig feketére. A kitöltõszín tetszõleges. Most pedig menjünk a Stage-re és rajzoljuk meg a formát. Ez az ovális az arc legfõbb formája lesz. Oválist rajzolni azért elég egyszerû dolog. Elég a forma kezdõpontjára kattintani és elhúzni az egeret. Ennél bonyolultabb dolog az, hogy megbizonyosodjunk a felõl, megfelelõ formájú és méretû lett-e az oválisunk (25. Ábra).
2012.03.28.
9:28
Page 47
2. Fejezet
25. Ábra Miután megrajzoltuk az alakzatot, jöhet a Nyíl eszköz (Arrow Tool) kipróbálása: – az alakzat szegélyére kattintva jelöljük ki és módosítsuk a vonalat; – a kitöltésre kattintva jelöljük ki és módosítsuk a kitöltést; – az alakzat bármely pontjára dupla kattintással hívjuk elõ a Properties – Tulajdonságok panelt és jelöljük ki, majd módosítsuk az alakzat vonalát, méretét és kitöltõszínét, – jelöljük ki és helyezzük át a kijelölt objektumot a munkakörnyezet minden részén. Dupla kattintással jelöljük ki az alakzatot és a Free Transform Tool – Szabad átalakítás eszközzel változtassuk meg méretét, hajlásszögét és elforgatását. A következõ oldalakon lesz még alkalmunk ezzel a nagyon fontos eszközzel foglalkozni.
47
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:28
Page 48
Adobe Flash CS4 II.
4. Lecke Boolen-i grafika és csoportosítás
48
Sok programban használják a Boolen-i grafikát összetett elemek létrehozására a geometriai formák egymás közti összeadásával és kivonásával. A Flash is beépítette ezt programjába. Van néhány összetett forma, amit nehéz lenne egyszerû deformálással létrehozni, kényelmesebb megoldás, ha inkább két egyszerû formát egyesítünk. Lássuk csak a majmunkat... Most, ugyanúgy, ahogyan az elõbb, az elsõ ovális forma belsejébe készítsünk még egyet. Ehhez adjunk egy picit sötétebb színt. Ne aggódjunk az ovális alsó része miatt, inkább arra ügyeljünk, hogy a felsõ rész szépen illeszkedjen az eredeti oválishoz. Ehhez azonban meg kell tanulnunk néhány aranyszabályt: – ha két egyforma színû alakzatot helyezünk egymásra, egyetlen alakzattá olvadnak össze – ha két különbözõ színû alakzatot helyezünk egymásra, az alsó alakzat kivágja a felsõt (26. Ábra) – ha viszont úgy szeretnénk egymásra helyezni két elemet, hogy ne olvadjanak egybe, ki kell jelölnünk az alakzatokat majd csoportosítanunk kell õket a Modify>Group (Kidolgozás> Csoportosítás) parancsokkal, vagy a Ctrl+G billentyûkombinációval.
2012.03.28.
9:28
Page 49
2. Fejezet
26. Ábra Így minden csoport elkülönül a másiktól, és sokkal könnyebben át tudjuk helyezni õket a stage-en belül. Ha duplán kattintunk a csoportra, a Tulajdonság panelen keresztül megváltoztathatjuk tulajdonságaikat. Módosítás után térjünk vissza a kiindulópontra a Scene-re kattintva (27. Ábra).
49
flashcs4_vs4_2.qxd
27. Ábra
flashcs4_vs4_2.qxd
2012.03.28.
9:28
Page 50
Adobe Flash CS4 II. Folytassuk terv_majom.fla fájl-ban a munkát.
50
Rajzoljuk meg a majom füleit: Változtassuk meg a kitöltõszínt és rajzoljunk a két oválistól egy bizonyos távolságra egy viszonylag kicsi kört. Ne felejtsük el, a tökéletes körhöz lenyomva kell tartanunk a Shift billentyût, miközben az egeret húzzátok. Nyomjuk le a Ctrl+C billentyûket, ezzel lemásoljuk a kijelölést. A Ctrl+V billentyûkkel pedig a beillesztést végezhetjük el. Húzzátok az új kört az elõzõ alá. Azért, hogy a majom minél élethûbb legyen, a füleit az arca mögé kell helyeznünk. Most húzzuk a két fület az arc mellé. A fülek legyenek lehetõleg egy vonalban (28. Ábra).
28. Ábra Mint látjuk, még mindig az arc elõtt vannak.
2012.03.28.
9:28
Page 51
2. Fejezet Jelöljük ki az arc összes elemét – a kijelölést a Shift gomb nyomvatartása mellett végezhetjük el (a fülek kivételével) és alakítsuk csoporttá a Modify>Group menü segítségével. Ezután válasszuk ki az Modify>Arrange>Bring to Front (Elrendezés>Elõre helyezés) parancsokat. Ezzel az arc került elõre! (29. Ábra)
29. Ábra Rajzoljuk meg a szájat tartalmazó ellipszist és használjuk hozzá a fülek színét! Ezután alakítsuk csoporttá és helyezzük rá az arcra. (30. Ábra)
51
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:28
Page 52
Adobe Flash CS4 II.
30. Ábra
52
Rajzoljuk meg a szájat, majd kattintsunk ezután a Vonal eszközre, vagyis használjuk a kis nyilat a száj átmodellezéséhez. Alakítsuk át a szájat mosolygóssá Alakítsuk át a mosolyt csoporttá és húzzuk az arcra. (31. Ábra).
31. Ábra
2012.03.28.
9:28
Page 53
2. Fejezet Válasszunk új kitöltõszínt és rajzoljuk meg a majom orrát. Ezután már csak a szemek maradnak hátra. Mielõtt azonban a szemek megrajzolásához hozzákezdenénk, a SHIFT billentyû segítségével jelöljük ki a száj területén az összes elemet és alakítsuk át õket egyetlen csoporttá. Így lehetõségünk lesz a szemeket az orr és a száj mögé helyezni. Rajzoljuk meg az egyik szemgolyót, színezzük fehérre, majd másoljuk le és illesszük be, így két egyforma szemgolyót kapunk. Végül készítsünk két fekete pupillát. Most, hogy túl vagyunk a munka oroszlánrészén, már csak a finomítások maradnak hátra, mint például a nem tetszõ színek megváltoztatása. (32. Ábra).
32. Ábra
53
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:28
Page 54
Adobe Flash CS4 II.
5. Lecke A Szabad Átalakítás Eszközei
54
Mint sok más vektorgrafikai szoftver, végre a Flash CS4 is rendelkezik a Free Transform Tool (Szabad átalakítás) eszközével (Q), amellyel különféle átalakításokat végezhetünk az objektumokon, mint például az átméretezés, elforgatás, torzítás és hajlítás, s mindezeket anélkül, hogy a Kidolgozás menübe kellene lépnünk. Nagyon kényelmes az eszköz használata és számos módozattal rendelkezik, melyeket egy billentyû lenyomásával és az egér vonszolásával érhetünk el. Nyissuk meg a minta_majom.fla fájl-t és alakítsuk át az elõzõ leckében megrajzolt majom fejét egyetlen csoporttá. Az objektum átméretezéséhez válasszuk ki a Free Trasnform Tool eszköz (vagy a Q) és húzzuk a sarkokat vagy az oldalakat a kis négyzeteknél fogva. Ha meg szeretnénk tartani az eredeti arányokat, nyomjuk le a Shift billentyût. Az objektum elforgatásához vigyük az egérkurzort a sarkokon lévõ fogókon picit kijjebb. Ekkor az elforgatás szimbóluma jelenik meg s ha elhúzzuk az egérkurzort, el tudjuk forgatni az objektumot középpontja körül, melyet egy kis köröcske jelöl és amit akár át is helyezhetünk a kívánt pozícióba (33. Ábra).
2012.03.28.
9:28
Page 55
2. Fejezet
33. Ábra A 34. képen látható ábrán a középpontot jelölõ kis kört a jobb felsõ sarokba vittük. Ha lenyomva tartjuk a Shift billentyût az elforgatás alatt, 45°-os elforgatásokat érünk el, a Ctrl billentyûvel 15°-osakat, az Alt billentyûvel pedig a fogóval szemben lévõ sarok körül valósul meg az elforgatás.
55
flashcs4_vs4_2.qxd
34. Ábra
flashcs4_vs4_2.qxd
2012.03.28.
9:28
Page 56
Adobe Flash CS4 II.
56
Ha a kijelölést jelzõ négyszög oldalához visszük a kurzort, dupla nyíl jelenik meg, aminek elhúzásával eltorzíthatjuk az objektumot és a szomszédos oldalak fogói körüli elforgatással perspektivikus hatást érhetünk el. Ha viszont úgy húzzuk el az oldalt, hogy közben lenyomva tartjuk az Alt billentyût, az elforgatás a szemközti oldal csúcsai körül valósul meg.
flashcs4_vs4_2.qxd
2012.03.28.
9:28
Page 57
3. FEJEZET
2012.03.28.
9:28
Page 59
3. Fejezet
1. Lecke A szín Miután megnéztük a vonalrajzolás alapvetõ eszközeit, ismerkedjünk meg azokkal az eszközökkel, amelyekkel a vonalak által behatárolt területeket színezhetjük ki. Nyissuk meg az Oktató Cd>Flash_óraimunkák>Fejezet_3> amerika.fla fájl-t, itt találjuk azt a kis repülõgépet, amit a második fejezet elsõ leckéjének a végén készítettünk. A Paint Bucket Tool (Festékeskanna) (K) eszközzel kiszínezhetjük a zárt alakzatok belsejét és a módosításhoz elég a grafikai elem bármely pontjára kattintani egyet. (35. Ábra).
59
flashcs4_vs4_2.qxd
35. Ábra
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 60
Adobe Flash CS4 II. Ennek az eszköznek tehát két funkciója is van: az egyik a létrehozás, a másik pedig a módosítás. A 36. Ábrán is látható Options-on keresztül beállíthatjuk az eszköz tulajdonságait, például azt, ha olyan tért kell kitöltenie, ahol a vonalak nem záródnak össze teljesen, vagy pedig olyat, ahol a vonal két végpontja közti távolság viszonylag nagy. Tipp Az K betûvel azonnal elõ tudjuk hívni ezt az eszközt.
60
36. Ábra Az Ink Bottle Tool (Festékesüveg) eszköz (S) is két funkcióval bír: egyrészt a körvonal tulajdonságait módosíthatjuk vele, másrészrõl pedig ha a színkitöltés bármely pontjára rákattintunk, körvonalat rendelünk hozzá ezzel, az alapértelmezett tulajdonságokkal. (37. Ábra). Tipp Az S betûvel azonnal elô tudjuk hívni ezt az eszközt.
2012.03.28.
9:29
Page 61
3. Fejezet
37. Ábra A Brush Tool (Ecset) eszközzel szabadkézzel rajzolhatunk az aktív szintre. Miután aktiváltuk, megváltoztathatjuk a kitöltés módját (38. Ábra) és az olyan tulajdonságokat, mint a méret és a forma. Az ezekhez tartozó ikonokat az Options-on belül találjuk (39. Ábra). Tipp Az B betûvel azonnal elô tudjuk hívni ezt az eszközt.
61
flashcs4_vs4_2.qxd
38. Ábra
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 62
Adobe Flash CS4 II.
39. Ábra
62
Ahogyan az Ecset, úgy az Eraser Tool (Radír) (E) is olyan eszköz, amivel a rajz csak egyes részeit tudjuk módosítani. (40. Ábra)
40. Ábra Felhívjuk figyelmet a Vízcsap opcióra, ami hasonlít a Festékeskanna és a Festékesüveg eszközre, ezzel viszont egy teljes körvonalat vagy kitöltést tudunk törölni egy egyszerû kattintással. (41. Ábra)
2012.03.28.
9:29
Page 63
3. Fejezet
41. Ábra Tipp Az E betûvel azonnal elô tudjuk hívni ezt az eszközt. Ha a színtáblán nem találunk megfelelõ színt, kattintsunk a Színkerékre. (42. Ábra)
63
flashcs4_vs4_2.qxd
42. Ábra
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 64
Adobe Flash CS4 II. Itt kiválaszthatjuk, hogy az egérrel állítjuk-e be a megfelelõ színt, vagy pedig RGB értékekkel akarunk új színt létrehozni. Kattintsunk a Hozzáadás az egyéni színekhez gombra. Ha az egérkurzorral a Csepegtetõ eszközre kattintunk, újra kijelölhetünk egy, a rajzban már felhasznált színt. Idõt spóroltok meg vele! Az Eyedropper Tool (Csepegtetõ) eszköz (I) a rajzunkban már korábban felhasznált színt hívja elõ. Ha a csepegtetõvel vonalra kattintunk, a kijelölt szín, mint Vonal szín kerül beállításra. Ha viszont a kitöltésre kattintunk, a kijelölt szín, mint Kitöltõszín kerül beállításra. Abban az esetben is rögzítõdik az átmenet minden tulajdonsága, ha kitöltõszínben árnyékolást választunk. Tipp Az I betûvel azonnal elô tudjuk hívni ezt az eszközt.
64
Már biztosan kipróbáltuk ezeket az eszközöket a kis repülôgépen, de gyakoroljunk még egy kicsit és állítsuk be a vonal színét feketére, a vastagságát pedig 2 pixelre, színei pedig legyen a kék és a piros (43. Ábra).
43. Ábra
2012.03.28.
9:29
Page 65
3. Fejezet
2. Lecke A gömb A gömb az egyik leggyakrabban felhasznált grafikai elem Flash animációkban. Ezzel az elemmel rengeteg effektet tudunk létrehozni, mint például objektumokat és nyomógombokat. Hozzunk létre egy üres animációt, a mérete és a háttérszíne legyen tetszõleges. Aktiváljuk az Oval Tool (Ovális) eszközt (O), menjünk a Properties (Tulajdonságok) ablakba és kattintsunk a Vonal színe szelektorra és a piros átlós kis négyzetre kattintva töröljük a színt. Kattintsunk a színkitöltés szelektorra és megnyílik a Színminták ablak. Az alsó négyszögben egy sor elõre beállított színárnyalatot találunk, mi válasszuk a pirosat. (44. Ábra). Húzzuk elemünket a stage-re és hogy tökéletes gömböt kapjunk, tartsuk lenyomva a Shift billentyût. A megjelenõ gömb még elég természetellenesnek hat, mivel a legfényesebb pontja pont középen van. Aktiváljuk a Gradient Transform Tool (Kitöltés átalakítása) eszközt (F), kattintsunk a gömbre. Ekkor megjelennek az eszköz fogói. Húzzuk a központi fogót átlósan a jobb felsõ részre (45. Ábra). A gömb máris háromdimenziósnak, s ezáltal sokkal természetesebbnek hat.
65
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 66
Adobe Flash CS4 II.
44. Ábra
•
-
~--·-
.o; ... .
··--- ---
...._,.
"
· ~-
!I... ,.
~ !,O.>J:?'
(.{..
• .. 66
m
45. Ábra
..
~
•"--~~. . b
~--"1
' ~ I
~·
S most nézzük meg, miket tudunk még csinálni a többi fogó segítségével: – A kitöltés magasságát és szélességét módosítani (a négyszögû fogó elhúzásával);
2012.03.28.
9:29
Page 67
3. Fejezet – Elforgatni a kitöltést (a kívánt sarokra húzva az elforgatás fogóját); – Fokozni a hosszanti árnyalást a négyszögletû fogó kitöltés szegélyének közepére húzásával; – A sugaras árnyalás sugarának megváltoztatása a kitöltés szegélyének központi kör alakú fogójának elhúzásával; – Kitöltést elhajlítani a felsõ részen, vagy a körvonal jobb oldali részén lévõ kör alakú fogók elhúzásával; – A kitöltés csökkentésével mozaikus Bitmap motívumot létrehozni. Ha mégsem lennénk elégedettek az alapértelmezett színkombinációkkal, nagyon könnyen kicserélhetjük õket. Aktiváljuk az Seletcion Tool (Nyíl) eszközt (V), a kijelöléshez kattintsunk a gömbre és nyissuk meg Színmixer panelt, ahol meg tudjuk változtatni az árnyalatok tulajdonságait. Ilyenkor az árnyalat jobb oldali mutatóját kell kiválasztanunk és a Színmixer 46. Ábrán látható nyilak által jelölt három terület egyikén megváltoztatnunk a színt.
67
flashcs4_vs4_2.qxd
46. Ábra A végeredményt megnézhetjük a Színmixer-en, vagy egyenesen a Stage-en lévõ gömbön. Próbáljuk ki nyugodtan, hogy milyen lehetõségeket rejt még magában a Színmixer.
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 68
Adobe Flash CS4 II.
3. Lecke Speciális rajzeszközök és szerkesztés Egy sor olyan eszközt láttunk eddig, amelyekkel egyszerû formákat lehet létrehozni és kiszínezni. Most pedig olyan eszközöket fogunk megnézni, amelyekkel többé-kevésbé bonyolult elemeket lehet létrehozni (például rajzfilmfigurákat) és amelyeket "speciális" módon fogunk kiszínezni, merthogy maguk a formák is "speciálisak" lesznek. Nem csak magukat a rajzfilmfigurákat, hanem az õket kitöltõ árnyékokat és foltokat is szabadkézzel kell megrajzolnunk. Lássuk csak, mirõl is van szó.
68
A Pencil Tool (Ceruza) eszközzel ugyanúgy rajzolhatunk, mint más vektorgrafikai programban. Az Options részben található modifikátorok segítségével igényeinknek megfelelõen állíthatjuk be az eszközt; ezzel munkánkat tesszük könnyebbé. (47. Ábra). Az elsõ gombbal a szabadkézzel rajzolt vonalat módosíthatjuk: Ha a Straighten (Kiegyenesít) gombra kattintunk, a program kiegyenesíti a kijelölt vonalakat és amennyire az lehetséges, szabályos geometriai formákat hoz létre. Ha a Smooth (Tompít) gombra kattintunk, azt láthatjuk, hogy a kijelölt vonalak nem lesznek sarkosak, hanem eltompulnak az élek.
2012.03.28.
9:29
Page 69
3. Fejezet Az Ink (Tinta) gombbal a kijelölt görbületeken minimális, alig észrevehetõ változtatásokat tudunk elvégezni.
47. Ábra A Properties (Tulajdonság) panelen késõbb aztán be tudjuk állítani a színt, a vonalvastagságot és a vonalstílust ugyanúgy, ahogyan azt az elõzõekben már láthattuk. Tipp Az Y betûvel azonnal elô tudjuk hívni ezt az eszközt. A Pen Tool (Toll) eszközt sokan úgy ismerik, mint Bézier eszközt: elsõsorban ezzel az eszközzel rajzolunk görbületeket. Aki használt már vektoros programokat, jól ismeri az eszköz használatát. Segítségével görbületeket tudunk rajzolni a sarkok módosításával, a fogókkal. Az eszköz elõnye az, hogy a más eszközzel megrajzolt vonalakon is mûködik (például amiket a Vonal, vagy a Négyszög eszközzel rajzoltunk). Az Edit (Szerkesztés) menüben az Edit>Preferences>Drawing (Pen Tool) (Szerkesztés>Beállítások) pontokon keresztül a rajzolás különféle módjait állíthatjuk be. A Preferences (Beállítások) ablakot a 48. Ábrán láthatjuk.
69
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 70
Adobe Flash CS4 II.
48. Ábra Ha kijelöljük a Show Pen Preview -t (Toll elõzetes kép megjelenítése), az a vonal jelenítõdik meg, amit éppen rajzolunk. Egyébként csak akkor jelenítõdik meg, ha a fogókat elhúzzuk. Ha a Show Solid Points-t (Szilárd pontok megjelenítése) választjuk ki, a rajzolt görbék sarkai telt négyszögekként jelenítõdnek meg.
70
Az utolsó négyzetben a kurzor formáját választhatjuk meg: legyen olyan, mint egy hagyományos tollhegy, ahogyan az más vektorgrafikai programokban is szerepel, vagy visszafogottabb és kevésbé "tolakodó" (ebben az esetben pipáljuk ki a Show Precise Cursor – Pontos kurzor megjelenítése pontot). Megjegyzés: A Caps Lock billentyû lenyomásával egyszerûen válthatunk egyik kurzorról a másikra. A Toll-al egyenes és görbe vonalakat is tudunk húzni. Ha egyenes vonalat akarunk rajzolni, elég egyszerûen egy pontra kattintanunk, a Shift billentyût meg lenyomva tartanunk, ha 45°-nál nagyobb szöget szeretnénk rajzolni.
2012.03.28.
9:29
Page 71
3. Fejezet Ha viszont kattintás után elhúzzuk az egeret, megjelennek a híres fogók és az egyenesbõl érintõ görbék lesznek. Ebben az esetben a kurzor nyíl alakú lesz. Ha elhúzzuk és elforgatjuk a fogókat, a görbe más alakot vesz fel, ami részben elõkészíti a következõ részt (49. Ábra).
49. Ábra Amikor be akarunk zárni egy görbét, elég kijelölnünk egy sarkot, a mutató sajátos alakzatot vesz fel. Amikor kijelöljük görbéket, módosíthatjuk is õket; a kurzor továbbra is egy tollhegy marad, de lesz mellette pluszban egy kis elem, ami funkciójára utal. Ily módon, ha egy pontra kattintunk, ez átalakul két egyenes által bezárt szöggé; – ha még egyszer rákattintunk, eltûnik a pont (elég egyszer, ha a pont szögben lévõ); – ha a görbe egy pontjára kattintunk, egy szög adódik hozzá, a mutató pedig egy + jelet mutat.
71
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 72
Adobe Flash CS4 II. A Selection Tool (Nyíl) eszköztõl jobbra található a Subselection Tool (Alkiválasztás) eszköz, amelyikkel a fogók révén a Bézier görbéket tudjuk elmozgatni és módosítani. Ha lenyomva tartjuk az Alt billentyût és a Subselection Tool (Alkiválasztás) elemmel operálunk, a szögpontok Bézier görbékké alakulnak és a fogókat külön is áthelyezhetjük. Ne felejtsük el azonban azt, hogy ha másik elemet használunk (mondjuk a Seletion Tool-t – Nyilat) a görbe módosul és automatikusan helyreáll, amikor újból a Pen Tool -t – Tollat jelöljük ki.
72
A Flash további két formamodifikátort bocsát a rendelkezésünkre a vonalakhoz: ezek akkor aktiválódnak, amikor a stage-en kijelölünk egy objektumot és úgy mûködnek, mint a Pencil Tool – Ceruza eszköz modifikátorai. Az elsõ a Smooth – Tompítás (ami a Modify>Smooth – Kidolgozás>Tompít parancssoron keresztül is aktválható) és sarkok tompítására, görbék finomítására szolgál. A második pedig a Straighten – Kiegyenesít eszköz (Modify > Straighten – Kidolgozás>Kiegyenesít), ami meg pont fordítva mûködik. Ha a Tompítás eszközt többször is alkalmazzuk egy nagyjából felvázolt alakzaton, csökken a vonalak száma, merthogy a szögek száma is csökken. Ezeknek a modifikátoroknak a Pencil Tool – Ceruza eszköz modifikátoraihoz képest megvan az az elõnyük, hogy akkor is mûködnek, ha a görbület ki van jelölve. Most, hogy már egyre több eszközt ismerünk, próbáljuk ki, mire vagyunk képesek! Rajzoljunk társakat a majomnak, vagy rajzoljuk meg a majom testét, de megrajzolhatjuk a kedvenc rajzfilmfigurákat is.
2012.03.28.
9:29
Page 73
3. Fejezet
4. Lecke Szintek használata Most, hogy az alapvetõ rajztechnikákat már megtanultuk, nézzük meg, hogyan kell több szinten dolgozni. Minthogy a Flash animációk készítésére alkalmas program, álló – kétdimenziós kép létrehozásánál bonyolultabb dolgokra is képesek vagyunk vele. Elõbb azonban el kell sajátítanunk néhány alapismeretet a képek megszerkesztésével kapcsolatban. Mint ahogyan azt az elõzõ fejezet negyedik leckéjében láthattuk, ha egy vagy több különbözõ formát helyezünk egymásra, veszíthetünk az alul lévõ elembõl. Nyissuk meg az Oktató Cd>Flash_óraimunkák>Fejezet_3> minta_majom fájl-t, majd rajzoljunk egy olyan négyszöget, ami részben eltakarja a figurát (50. Ábra). Mint láthatjuk, a majom arcát már nem lehet visszanyerni. A Flash ezen tulajdonságával mind egyszerû, mindpedig egészen rendkívüli alakzatokat létre tudunk hozni, de nem tudunk egyetlen szinten képet felhasználni.
73
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 74
Adobe Flash CS4 II.
50. Ábra
74
A Rétegek (layer) lehetõvé teszik azt, hogy darabonként alkossunk meg egy képet és az egyes darabokat egymástól elkülönítve "tároljuk". Ezt úgy kell elképzelnünk, mintha egy rajz különbözõ elemeit külön-külön átlátszó fóliára rajzolnánk meg, majd az egyes fóliákat mind egymásra helyeznénk. A Rétegek is pont így mûködnek. A Rétegek legnagyobb elõnye az, hogy bármikor módosíthatunk egy elemen úgy, hogy közben a többi elemhez nem kell hozzányúlnunk. Töröljük a négyszöget és az alábbi módszerek egyikével illesszünk be egy új réteget: 1. Módszer: Használjuk a rétegek felsorolása alatti New Layer (Új réteg) ikont; 2. Módszer: a jobb egérgombbal kattintsunk a már meglévõ rétegre és a megjelenõ menübõl válasszuk az New Layer (Új réteg) parancsot; 3. Módszer: használjuk az Insert>Layer (Beszúrás>Réteg) parancssort.
2012.03.28.
9:29
Page 75
3. Fejezet Az új réteg a már meglévõ szint fölé fog kerülni. Adjunk egy olyan nevet az új rétegnek (kattintsunk duplán a réteg nevére), ami utal tartalmára: legyen mondjuk "Háttér", így nem fogjuk késõbb más réteggel összekeverni. Most pedig hozzunk létre egy olyan négyszöget, aminek sarkai le vannak kerekítve és a mérete pedig nem haladja meg a színpad méretét. Mint ahogyan azt láthatjuk, eltûnt a majom; de ne aggódjunk emiatt. Arról van szó, hogy a négyszög egy, a majom feletti rétegen található. (51. Ábra)
51. Ábra Ezt a problémát könnyen megoldhatjuk, ha a rétegek listájában a "Háttér" nevû réteget a Majom rétege alá húzzuk. A négyszög így a majom arca alá kerül. Az elemek, mint látjuk, elkülönülnek és külön-külön bármikor módosíthatjuk õket. (52. Ábra)
75
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 76
Adobe Flash CS4 II.
52. Ábra A háttér beillesztése után szúrjunk be oldalunkra szöveget is! Hozzunk létre egy új réteget és nevezzük el "Szövegnégyzet"-nek. Helyezzük a már meglévõ két réteg közé, vagyis a háttér fölé, de a majom alá. Rajzoljunk egy olyan négyszöget, amilyet az 53. Ábrán is látható és ami olyan, mint amit a háttérnek is rajzoltunk.
76
Amint látható, hiába rajzoltunk a majom fölé a négyszöget, az mégis a majom alatt fog megjelenni. Ez persze a réteg elhelyezkedésétõl függ.
2012.03.28.
9:29
Page 77
3. Fejezet
53. Ábra
77
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 78
Adobe Flash CS4 II.
5. Lecke A Szöveg eszköz (Text Tool)
78
Mint ahogyan arra már az elõzõ leckében is utaltunk, szöveget is adhatunk a Flash kisfilmekhez. A szövegen olyan beállításokat tudunk elvégezni, mint a méret, a betûtípus, a térköz, a szín és az igazítás. Az Flash CS4 verzióban a szöveget mind vízszintesen, mind pedig függõlegesen elrendezhetjük és ebben a formában is megszerkeszthetjük a szöveget. Nézzünk egy példát. Nyissuk meg az elõzõ részben létrehozott fájl-t és hozzunk létre egy új réteget. A réteget nevezzük el "Monkey"-nak és helyezzük a "Szövegnégyzet" és a "Majom" réteg közé. Aktiváljuk a Text Tool (Szöveg) eszközt (T) ( az Eszköztáron 'A'val van jelölve). A Properties (Tulajdonságok) panelen (54. ábra) állítsuk be a betûméretet és a betûszínt. Kattintsunk a Szöveg irányának megváltoztatása gombra, válasszuk ki a nekünk tetszõ irányt, majd kattintsunk a Stage-re és írjuk be, hogy "MONKEY".
2012.03.28.
9:29
Page 79
3. Fejezet
54. Ábra Hozzunk létre egy új réteget és nevezzük el "Kiadvány"-nak. Végezzük el az elõzõ mûveleteket, csak most a "KIADVÁNY" szöveget írjuk be. A Nyíl eszköz segítségével igazítsuk a feliratokat az 55. Ábrán látható módon.
79
flashcs4_vs4_2.qxd
55. Ábra
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 80
Adobe Flash CS4 II. Amint azt a Szöveg eszköz használatakor láthattuk, a beírt szöveg mennyiségével egyenesen arányosan növekedett a négyzet mérete is. Ha nem csak egy egy-két szóból álló szöveget akarunk beírni (mint amilyen a mi példánkban is szerepel), hanem egy több sorból álló szöveget, azt javasoljuk, hogy elõbb a szövegmezõt alakítsuk a megfelelõ méretûre.
80
Próbáljuk ki egy új lapon: Kattintsunk a Szöveg eszközre és rajzoljunk egy négyszöget, amibe majd írni fogunk. A Flash a mobil szövegmezõ jobb felsõ sarkában egy kis kör alakú fogót jelenít meg, míg a fix méretû szövegmezõ jobb felsõ sarkában egy négyszögletû fogó jelenik meg. Az elsõ típusú szöveget fõként címekhez, feliratokhoz, vagyis nagyon rövid szövegekhez használjuk, míg a másikat hosszabb mondatokhoz és szöveghez. Egy meghatározott szélességû szövegmezõt bármikor átalakíthatunk mobil szövegmezõvé ha duplán kattintunk a négyszögletû fogóra.
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 81
4. FEJEZET
2012.03.28.
9:29
Page 83
4. Fejezet
1. Lecke Betûkészlet-behelyettesítés Flash kisfilmekben használhatunk Postscript®–et, Type1-et, TrueType®–ot és bitmap-et. Az egy bizonyos számítástechnikai környezetben authoring alatt létrehozott szöveg lehet hogy egy másik platformon helytelenül jelenik meg; de a hibátlan megjelenítéshez még ugyanazon a platformon belül is az kell, hogy a szöveg karakterei mindig telepítve legyenek. Flash fejlesztõk egymás közti dokumentumcseréje kapcsán gyakran lehet hallani a hiányzó betûkészlet problémájáról. Képzeljük el azt, hogy átadjuk kollégáinknak munkánkat, amelyben az Interneten annyit keresett legújabb Mátrix betûtípust használtunk. Munkatársunk megnyitja a forrásfájl-t és képernyõjén egy Dos 2.1 korabeli betûtípus jelenik meg. A Flash a _sans, _serif és a Typewriter betûtípusokat tartalmazza. Amikor szövegünkön alkalmazzuk e betûtípusokat, a Flash player a helyi számítógépen azokat a rendelkezésre álló karaktereket használja, amelyek legjobban hasonlítanak az adott betûtípusra. Az Adobe megoldotta, hogy a Flash CS4 praktikusan kezelni tudja a hiányzó betûket.
83
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 84
Adobe Flash CS4 II. Ha olyan dokumentumot nyitunk meg amely a mi operációs rendszerünkben nem található betûtípussal létrehozott felirat szerepel, akkor az Értesítés hiányzó karakterrõl dialógusablak jelenik meg. Minthogy a betûtípus valóban nincs installálva a gépünkön, kattintsunk a Helyettesítõ választása gombra és megjelenik a Karakterek megfeleltetése ablak. Ebben a dialógusablakban választhatjuk ki, hogy melyik karakter helyettesítse az éppen hiányzó betûtípust. Jelöljük ki a hiányzó betûtípust és a Helyettesítõ karakter melletti mezõben válasszuk ki a helyettesítõ betûtípust (ami lehet az Arial). A mûveletsor végén kattintsunk az OK-ra, majd a dokumentum már a behelyettesítõ karakterrel nyílik, meg és most már dolgozhatunk a dokumentumon, további szöveget vihetünk be.
84
Új betûtípust a vezérlõpulton keresztül telepíthetünk fel operációs rendszerünkbe.
2012.03.28.
9:29
Page 85
4. Fejezet
2. Lecke A Szöveg eszköz és funkciói A szövegeknél új funkciót találunk: a Modify>Break Apart (Kidolgozás>Felosztás) funkciót (Ctrl+B). Ez már a Flash 5.0 verziójában is szerepelt, most viszont a szöveg nem konvertálódik kitöltésbe, hanem teljesen szerkeszthetõ marad. Vegyük alapnak a korábban beírt "KIADVÁNY" szöveget és alkalmazzuk rajta a Modify>Break Apart (Kidolgozás>Felosztás) parancsot. Azt látjuk, hogy a szöveg annyi dobozra osztódik, ahány betû szerepel benne (56. Ábra).
85
flashcs4_vs4_2.qxd
56. Ábra
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 86
Adobe Flash CS4 II. Ez az opció gyakorlatilag testvére a Flash CS4 Modify>Timeline>Distribute Layers (Rétegekre tördelés) (Ctrl+Shift+D) új parancsának, ami egymás után következõ rétegekbe csoportosítja a betûket, objektumokat, Clippeket vagy gombokat. Nagyon hasznos funkciója ez a Flash-nek, amelynek segítségével jelentõsen lecsökkenthetõ a szöveganimáció kidolgozási ideje. Nézzük megint a saját példánkat és menjünk a Modify>Timeline>Distribute Layers (Kidolgozás >Rétegekre tördelés) menübe. A rétegek nevei automatikusan az egyes betûk lesznek (57. Ábra). A gombok és Clippek esetén a példány lesz a név, de errõl majd késõbb.
86
57. Ábra Az elõzõ fejezetekbõl megismert Free Transform Tool (Szabad átalakítás) eszközt szövegeken is használhatjuk ugyanazokkal a módozatokkal. A késõbbiekben leírt módozatokat azonban nem alkalmazhatjuk szimbólumokon, bitmap-en, video objektumokon, audio-objektumokon, árnyalatokon, objektum- vagy szövegcsoportokon.
2012.03.28.
9:29
Page 87
4. Fejezet Minthogy szövegen alkalmazva nagyon érdekesek, ezért a szöveget elõrelátásból alakítsuk át vektorrá. Gépeljük be azt hogy MONKEY, majd alakítsuk át vektorrá szövegünket. Ehhez kétszer kell alkalmaznunk az elõzõleg kijelölt szövegen a Modify>Break Apart (Kidolgozás>Felosztás) (Ctrl+B) parancsot. (58. Ábra).
58. Ábra Válasszuk a Free Transform Tool (Szabad átalakítás) eszközt. Objektum torzításához a Ctrl billentyû folyamatos lenyomva tartása mellett el kell húznunk a sarkokon lévõ egyik fogót. Ily módon szabadon áthelyezhetjük a sarkokat. Ha azonban a Ctrl+Shift billentyûkombinációt tartjuk lenyomva, egyidejûleg ugyanannak az oldalnak a sarkait helyezzük át (59. Ábra).
87
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 88
Adobe Flash CS4 II.
59. Ábra Amikor aktív a Free Transform Tool (Szabad átalakítás) eszköz, az Tools (Eszközök) panel alsó részén, az Options között megjelenik az eszköz négy legfontosabb beállítása: Forgatás és Döntés, Átméretezés, Torzítás és Csomagolópapír. A mód beállításához elég a megfelelõ gombra kattintanunk.
88
Próbáljuk ki a bemutatott eszközöket az elõzõ fejezetben bevitt szövegrétegeken.
2012.03.28.
9:29
Page 89
4. Fejezet
3. Lecke Rétegek kezelése Láttuk, hogy munkánk külseje a rétegek elrendezésétõl függ. A legfelül található réteg úgy fedi az alatta lévõ rétegeket, mint ahogyan az egymásra helyezett fólialapok fedik egymást. Egy egyszerû drag and drop-on keresztül (rákattint, elhúz és hagy leesni) bármelyik réteget kiválaszthatjuk és a kívánt helyre helyezhetjük. Mielõtt folytatnánk oldalunk kidolgozását, nézzünk meg néhány rétegkezelõ technikát (60. Ábra).
60. Ábra – A kijelölt réteg fekete színû és egy ceruza rajzát tartalmazza, ami azt jelöli, hogy az adott rétegen szabadon módosíthatunk és illeszthetünk be új objektumokat.
89
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 90
Adobe Flash CS4 II. Figyelem! Egy réteg elsõ fotogramja mindig üres kulcsfotogram, amit a réteg létrehozásakor egy üres kör jelöl, hisz nem tartalmaz semmilyen objektumot sem. Amikor a stage-en belül valamilyen alakzatot rajzolunk, a kör telivé válik. – A ceruza mellett találunk még két, fehér körrel jelölt elemet és egy olyan kis színes dobozt, ami az aktuális réteg színét jelzi. – A szem alatti kis kör azt jelzi, hogy a réteg látható: ha a kis körre rákattintunk, egy piros X jelenik meg, ami viszont azt jelzi, hogy a réteg nem látható. – A lakat alatti kis kör azt jelzi, hogy a réteg módosítható. Ha a kis körre rákattintunk, egy lakat jelenik meg, ami mindennemû módosítást meggátol. – A színes négyzet a réteg teljes láthatóságát jelzi: ha rákattintunk, a réteg csak részben lesz látható. Ez ahhoz hasznos, hogy helyesen elhelyezzük egymás közt az elemeket.
90
A rétegek listája alatt, az Idõegyenesen azt láthatjuk, hogy a New Layer (Réteg beszúrása) ikonon kívül egy másik gomb is a rendelkezésünkre áll: a New Layer Folder (Réteg mappa beszúrása) (61. Ábra), amivel új mappát illeszthetünk be. Gyakran, amikor a teljes animáción dolgozunk, nagyon hasznos a rétegek mappája, mert segítségével az összes hasonló réteget csoportosíthatjuk. Kattintsunk a New Layer Folder (Réteg mappa beszúrása) gombra és a mappát nevezzük el "Szöveg"-nek. Az egér segítségével, egy egyszerû húzással könnyedén telepakolhatjuk a mappát. A "Szöveg" mappába vigyük be a "Monkey" és a "Kiadvány" réteget (62. Ábra).
2012.03.28.
9:29
Page 91
4. Fejezet
61. Ábra
62. Ábra
91
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 92
Adobe Flash CS4 II. A mappa ikonja mellett egy kis lefelé mutató hármoszöget láthatunk. Ezzel nyithatjuk meg, illetve csukhatjuk be a mappát. Kattintsunk még egyszer a New Layer Folder (Réteg mappa beszúrása) és az új mappát nevezzük el "Négyzetek"-nek. Ide illesszünk be egy új réteget, aminek adjunk a "Négyzet1" nevet. Szúrjunk be egy kis fehér négyzetet. Ez az egyik olyan tipikus elem, amibõl még többet is be fogunk illeszteni animáció készítéskor és a rétegeknek ekkor kiemelkedõ jelentõsége lesz. (63. Ábra).
63. Ábra
92
Most jelöljük ki az imént létrehozott négyzetet és a Ctrl+C billentyûkombináció segítségével másoljuk le. Hozzunk létre a mappába új rétegeket (legyen összesen 10-11 ilyen négyzetünk) és nevezzük el õket növekvõ sorszámmal ellátva. A lemásolt négyzetet illesszük be (Ctrl+V) minden rétegbe (64. Ábra).
2012.03.28.
9:29
Page 93
4. Fejezet
64. Ábra Néha nehéz olyan rétegen dolgozni, ami több tíz másik forma és kép alatt található. Ha a többitõl függetlenül változtatnunk kell ezen a rétegen, ez a többi réteg jelenléte miatt nehéznek bizonyul. Feladatunk megkönnyítése érdekében a Flash lehetõvé teszi azt, hogy letiltsunk egy vagy több réteg megjelenítését. Elég csak a szemre kattintanunk minden olyan rétegnél, amit le akarunk tiltani. Néha viszont azért érdemes letiltanunk õket, nehogy véletlenül módosítsunk rajtuk valamit. A mappákat átnevezhetjük, blokkolhatjuk vagy el is rejthetjük, akárcsak bármelyik réteget. Sõt, a mappákon belül alkönyvtárakat is létrehozhatunk. Mappát törölni ugyanúgy kell, mint réteget: kattintsunk egyet a jobb egérgombbal és a megjelenõ menüben válasszuk a törlés opciót. Ha mappát töröltök, azzal a benne lévõ rétegeket is törlitek. A rétegek nem csak képek, vagy animációk létrehozásához szükségesek, hanem a képek módosításához is.
93
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 94
Adobe Flash CS4 II.
94
Segítségükkel sokkal könnyebben visszatérhetünk egy jelenetre és módosíthatjuk azt. Próbáljuk módosítani munkánkat úgy, hogy felcseréljük a majom és a szöveg, illetve a kis kockák helyét. A módosítás csupán néhány másodpercet fog igénybe venni.
2012.03.28.
9:29
Page 95
4. Fejezet
4. Lecke Árnyék hatás a szövegen A szövegeken eddig grafikus effekteket hoztunk létre. Most egyszerûen csak a rétegek felhasználásával próbáljunk meg grafikus effektet megvalósítani. Most már minden grafikai programban létezik egy olyan eszköz, amivel árnyékot adhatunk bármilyen beszúrt objektumhoz (legyen az kép vagy szöveg). A Flash-ben, egészen a CS verzióval bezárólag sajnos nincs meg ez a lehetõség, így egy kis hadicselhez kell folyamodnunk. Aki viszont Flash CS4-el dolgozik, már megtalálja ezt az opciót a Beszúrás>Idõvonal effektek>Effektek>Külsõ árnyék menüsoron keresztül. Nézzük meg, hogy hogyan kell manuálisan létrehozni a hatást. A minta_majom_4F_ 3L.fla fájlunkhoz adjunk még egy réteget, az "e-mail"-t és a jobb alsó sarokba írjuk be, hogy
[email protected] (65. Ábra) Minthogy a szövegnek, amin dolgozunk, árnyéka lesz, erre alkalmas színt kell választanunk. Jelöljük ki a szöveget és alakítsuk át vektorrá a Ctrl+B parancsok kétszeri kiválasztásával. Ezután alkalmazzuk a szövegen a Modify>Shape>Soften Fill Edges (Kidolgozás>Forma>Szél kitöltés árnyalás) eszközt, ami a kétdimenziós objektum széleinek áttûnését idézi elõ. (66. Ábra).
95
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 96
Adobe Flash CS4 II.
65. Ábra
96
66. Ábra Megjegyzés Ezt az eszközt bármilyen objektumon alkalmazhatjuk, háromdimenziós hatást érhetünk el vele olyan terven is, ami a Flash jellemzõi miatt eredetileg csak kétdimenziós. A Distance – Távolság-hoz írjuk be, hogy 6 pixel, így elég markáns lesz a hatás (67. Ábra).
2012.03.28.
9:29
Page 97
4. Fejezet
67. Ábra
68. Ábra Amikor rákattintunk az OK-ra, a program kiszámítja az objektum árnyalatát. Megjegyzés Több értéket is kipróbálhatunk a Távolság-hoz, egészen addig, amíg az optimális hatást el nem érjük. Ehhez elég az Edit>Clear (Szerkesztés>Törlés) parancsokon keresztül törölni az effektet, mert ha nem így teszünk, az utólag bevitt érték hozzáadódik az elõzõhöz. Az ebben a leckében bemutatott effektet sikeresen alkalmazhatjuk nyomógombokon is, amihez ráadásul az egér áthaladására érzékeny "rollover" effektet is hozzárendelhetjük. Ezt a feladatot azonban egy késõbbi fejezetben fogjuk megoldani, ahol is az interaktivitásról vagyis a gombok használatáról fogunk beszélni.
97
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 98
Adobe Flash CS4 II.
5. Lecke Villogó szöveg Az eljárás hasonló lesz az elõzõhöz. Nyissuk meg az elõzõ leckében elkészített fájl-t (Oktató Cd: minta_majom_4F_4L) és hozzunk létre két réteget: a "Fény"-t és a "Belépés"-t. A két réteget külön fogjuk majd kidolgozni. Elõször a "Belépés" réteget dolgozzuk ki. Vigyük be a "Belépés" szöveget a bal alsó sarokba a nekünk tetszõ tulajdonságokkal. Ha még nem tettük volna meg, vigyük a "Fény" réteget a "Belépés" réteg alá (68. Ábra).
98
A "Fény" rétegbe írjuk be ugyanazt a szöveget ugyanazokkal a tulajdonságokkal, de fehér színnel. Ezt a mûveletet elvégezhetjük úgy is, ha egy kattintással kijelöljük a "Belépés" réteget, majd a réteg elsõ fotogramjára egy jobb egérgomb kattintás, majd Copy Frames (Fotogram másolása). (69. Ábra)
2012.03.28.
9:29
Page 99
4. Fejezet
68. Ábra
99
flashcs4_vs4_2.qxd
69. Ábra Ezután egy jobb egérgomb kattintás a "Fény" réteg elsõ fotogramjára, majd Paste Frames (Fotogram beillesztése). Így érhetjük azt el, hogy a két szöveg tökéletesen egybeessen.
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 100
Adobe Flash CS4 II. Most kattintsatok az imént bevitt fotogramra és a Ctrl+B parancs kétszeri alkalmazásával alakítsuk át a szöveget vektorrá. Mivel villogó szöveget akarunk létrehozni, le kell másolnunk ezt a fotogramot a következõ négy fotogramba, most viszont ugyanazon réteg több fotogramján jön létre a mûvelet. A leggyorsabb eljárás az lesz, ha az egérrel kijelöljük a négy egymást követõ fotogramot, majd megnyomjuk az F6-ot, vagy a kattintunk egyet a jobb egérgombbal és az Insert KeyFrame (Kulcsfotogram beszúrása)-t választjuk. (70. Ábra)
100
70. Ábra Ha jól végeztük el a másolást, az olvasófej most az Idõegyenes 5-ös frame-jénél helyezkedik el, a Stage pedig teljesen üres. A Stage igazából nem üres, hisz szöveg van rajta, ami viszont nem látszódik, mert fehér színû és teljesen egybeolvad a háttérrel. Ahhoz, hogy minden elem megjelenítõdjön, még egyszer utoljára le kell másolnunk a fotogramokat.
2012.03.28.
9:29
Page 101
4. Fejezet Jelöljük ki aktív rétegjeink mind az 5 fotogramját, majd nyomjuk le az F6-ot. Ezzel a frame 1-et bemásoltuk minden réteg 5-ös frame-jébe és az animáció idõtartamát kivéve minden olyan lett, mint korábban. (71. Ábra)
71. Ábra Az animációhoz az egyes fotogramokban módosítanunk kell a szöveg árnyalatát, míg villogó hatást nem érünk el. Használjuk a Modify>Shape>Soften Fill Edges (Kidolgozás>Forma>Szél kitöltés árnyalás) parancssort. A különbség az egyes fotogramoknál választott Távolság lesz. Az 1-es és 5-ös fotogramban a távolság 2 pixel. A 2-es és 4-es fotogramokban a távolság 4 pixelre nõ, a 3-as fotogramban pedig 6 pixelre. (72. Ábra) Ha le akarjuk ellenõrizni, hogy jól mûködik-e az animáció, a Controll>Test Movie (Kontroll>Film próba) (Ctrl+Enter) paranccsal tudjuk lejátszani.
101
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 102
Adobe Flash CS4 II.
102
72. Ábra
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 103
5. FEJEZET
2012.03.28.
9:29
Page 105
5. Fejezet
1. Lecke Frame by frame animáció Flash-el dolgozni annyit tesz, mint dinamikus elemeket létrehozni, melyek valamilyen módon mozgást fejeznek ki. Kis képvagy szöveganimációk ezek, amik a Stage-en mozognak és a Stage-en lépnek egymással kapcsolatba. Az idõ múlásával a Flash egyre többet és többet tudott ezen a téren nyújtani, de alapjában véve az animáció ma is ugyanazokat a szabályokat követi, amelyeket a rajzfilmkészítõk lefektettek. Éppen ezért érdemes egészen az alapoktól kezdenünk. Az animáció frame by frame, vagyis az animáció fotogramról fotogramra – mint ahogyan azt az elõzõ fejezet végén láthattuk – az egyes képkockák külön-külön megrajzolásával, majd egymás utáni lejátszásával érhetõ el. Ezt használjuk animált GIF-ek készítéséhez is. Az elemek viselkedése és a film létrejötte képkockáról képkockára valósul meg. Megjegyzés: A Flash különféleképpen lehet a segítségünkre, ha ezzel a típusú animációval dolgozunk. Az egyes fotogramokat importálhatjuk külsõ képekbõl is a File>Import (File>Importálás) paranccsal. Ha az alakzatok elnevezése sorrend szerinti (pl.: figura1.gif, figura2.gif, figura3.gif), a program rákérdez, hogy sorrendben importálja-e õket és egymást követõ fotogramokként pakolja-e be õket. Ha az alakzat animált GIF, automatikusan frame by frame animációként importálja a program.
105
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 106
Adobe Flash CS4 II. Ha viszont teljesen a nullából kiindulva kell az animációt létrehozni, akkor jön segítségül az Onion Skin, ami a rajzfilmkészítõk hagyományosan használt technikája. Az Onion Skin szó szerint "hagymahéj"-at jelent és ugyanúgy mûködik, mint az egymásra helyezett fólialapok, melyek csak részben fedik az elõzõ fotogramok figuráit. Az animátorok így könnyedén át tudják másolni a rajzot és csak a mozgásban lévõ részeket kell módosítaniuk. Az Onion Skin-t az Idõegyenes alatt található gombokkal tudjuk aktiválni (73. Ábra).
106
73. Ábra Nyissuk meg az Oktató Cd>Flash_óraimunkák>Fejezet_5>Flash Baby.fla fájl-t. Kapcsoljuk be az Onion Skin funkciót. A Border rétegen ha például a 10-s fotogramra kattintunk, az épp aktuális fotogram és a vele szomszédos fotogramok jelennek meg. A hatás az áttûnéshez hasonlít és szemügyre vehetjük a többi szintet is (74. Ábra).
2012.03.28.
9:29
Page 107
5. Fejezet
74. Ábra Tanulmányaink során láttunk már frame by frame animációt, amiben a szövegeffektet úgy jellemezhetnénk, hogy írógép-, vagy terminál effekt.
107
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 108
Adobe Flash CS4 II.
2. Lecke A szimbólumok Mindezidáig a Flash alapelveivel ismerkedtünk meg, de egy alapelvet kihagytunk. Most pótoljuk ezt a hiányosságunkat és a Szimbólumokról, mint minden kisfilm lényegérõl fogunk beszélni. A szimbólum az animációkban jelenlévõ grafikus kép, nyomógomb vagy kisfilm. A szimbólumokat egy oldal olyan elemeiként kell elképzelnünk, amelyek egymással aktívan kapcsolatban vannak. Egy szimbólum és egy átlagos elem közti különbség pont ebbõl az interaktív kapcsolatból fakad. Egy grafikus kép lehet egy egyszerû vektoros rajz, ami nem tartalmaz szimbólumokat, de használatuk lehetõvé teszi számunkra, hogy könnyebben hozzunk létre animációkat, mivel közvetlenül a színpadra húzhatóak.
108
A Flash szimbólumok Könyvtárban elhelyezett elemek, melyeket tervünkben kedvünk szerint újrahasznosíthatunk anélkül, hogy ismétlésükkel befolyásolnánk az elkészült film "súlyát". Nyissuk ismét a felület.fla fájl-t. A Nyíl eszközzel az egyszer már aktivált körvonalra kattintsunk rá kétszer, menjünk a Flash Modify>Convert to Symbol (Kidolgozás>Szimbólummá konvertálás) menüjébe és válasszuk a parancsot (F8).
2012.03.28.
9:29
Page 109
5. Fejezet A megjelenõ ablakban (75. Ábra) elnevezhetjük az objektumot, például "Alapnégyszög"-nek és meghatározhatjuk azt is, hogy milyen típusú szimbólummá akarjuk konvertálni. A Szimbólumok olyanok, mint a fõfilmbe ágyazott másodlagos interaktív kisfilmek. Vannak saját szintjeik, fotogramjaik és tulajdonságaik; és három különbözõ magatartásuk lehet. Beszélhetünk grafikus elemekrõl, nyomógombokról és kisfilmekrõl (Movie clip). Az aktiváláshoz kattintsatok a Graphic (Grafikus) opció rádió gombjára és aztán az OK-ra.
75. Ábra A négyszögbõl szimbólum lett, vagyis egy Könyvtár objektum. Az F11 billentyû segítségével, vagy pedig az Window>Library (Ablak>Könyvtár) (Ctrl+L) parancssoron keresztül bizonyosodjunk meg afelõl, hogy a Könyvtár-ban van-e (76. Ábra).
109
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 110
Adobe Flash CS4 II.
76. Ábra
110
Bármikor a Stage-re húzhatjuk az "Alapnégyszöget", amikor csak szükségünk van rá és át is méretezhetjük az átvitel következményeinek megfelelõen. Átméretezéshez a Free Transform Tool (Szabad átalakítás) eszközt használjuk az Alt billentyûvel együtt és meglátjuk milyen könnyen megy minden. Ha egy szimbólumot Könyvtárból Flash dokumentumba húzunk át, Példány lesz belõle. Kész az alapmegjelenítés: hat különbözõ méretû négyszöget látunk, melyek a különbözõ részeket fogják magukba foglalni (77. Ábra).
77. Ábra
2012.03.28.
9:29
Page 111
5. Fejezet
3. Lecke Szimbólumok és Példányok Ez olyan objektum-programozású alkalmazásoktól kölcsönzött felosztás, mint amilyen a C++, Visual C vagy a Java és amit a Flash leegyszerûsített. Nézzük meg az elemeit: Nézzük meg az elemeit: 1. A Szimbólumok olyan grafikai vagy hang-elemek (vagy akár mindkettõ), melyeket speciális archívumokban, ún. Könyvtárakban õrzünk és bármikor felhasználhatunk; 2. A Példányok viszont a Stage-en elhelyezett közvetlenül hasznosítható "szimbólum-másolatok". A Szimbólumok és Példányok közti viszony és az objektumok hierarchiája alapján: – módosíthatunk úgy Példányt, hogy közben a Szimbólumon, amitõl függ, nem változtatunk. (Ezt már az elõzõ leckében is megfigyelhettük, amikor ugyanannak a szimbólumnak több példányát is a stage-re húztuk és úgy méreteztük át az egyes példányokat, hogy közben az "Alapnégyzet" szimbólum változatlan maradt); – módosíthatjuk úgy a szimbólumot, hogy közben minden tôle függô példányt is módosítunk. A Könyvtárak tehát "Szimbólumgyûjtemények", s késõbb majd látni fogjuk azt is, hogy léteznek belõle a program által
111
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 112
Adobe Flash CS4 II. nyújtott "elõrecsomagolt" gyûjtemények, melyeket az Window>Common Libraries (Ablak> Közös könyvtárak) menübõl érhetünk el. Ne felejtsük azonban el azt, hogy az aktuális terv Könyvtárát megjeleníthetjük, de akár el is rejthetjük az Window>Library (Ablak>Könyvtár) paranccsal, vagy a Ctrl+L billentyûkombináció lenyomásával. Ennek az eszköznek az az elõnye (és itt visszaköszön az objektum-programozás), hogy csökkenthetjük a film méreteit és így gyorsabb lesz a kidolgozás, a letöltésrõl már nem is beszélve. Kezdjünk ebben a részben egy új tervbe: hozzunk létre egy mozifilmes visszaszámlálást. Ennek a tervnek az a célja, hogy bevezetõje legyen mondjuk annak a webhelynek, aminek felületén éppen dolgozunk. Késõbb majd azt is megnézzük, hogy hogyan kell egy egyszerû weboldalon belül és egy több jelenetbõl álló összetettebb tervben felhasználni.
112
1. Fázis – A kisfilm elrendezése Miután elindítottuk a programot, kezdjük a megvalósítandó kisfilm tulajdonságainak megszerkesztésével. Ezt a Modify>Document (Kidolgozás>Dokumentum) parancscsal tehetjük, vagy pedig a Properties (Tulajdonság) panelen található Size (Méretek) pont mellett található Document Properties (Dokumentum tulajdonságai) gombra kattintva. A megjelenõ ablakban a szélességhez és a magassághoz írjuk be, hogy 120 pixel, háttérszínnek pedig válasszuk a feketét. A Fotogramok gyakorisága mezõben szerepeljen 12 fotogram másodpercenként (78. Ábra).
2012.03.28.
9:29
Page 113
5. Fejezet
78. Ábra A pontos rajzkészítéshez meg kell jelenítenünk a rácsvonalakat: elõször ellenõrizzük le a rácsvonalak térközét a View>Grid> Edit Grid (Megjelenítés>Rácsvonal>Rácsvonal szerkesztése) menüben és a megjelenõ ablakban mind a vízszintes, mind pedig a függõleges irányhoz írjunk be 10-10 pixelt. (79. Ábra).
79. Ábra Ha rákattintunk a View>Grid>Show Grid (Rácsvonalak mutatása) jelölõnégyzetre, a rácsvonalak automatikusan megjelennek a munkaterületen (80. Ábra). Ezzel el is rendeztük a terv környezetét. Mentsük el dokumentumunkat számláló_ film.fla néven és bele is vághatunk animációnk elkészítésébe.
113
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 114
Adobe Flash CS4 II.
80. Ábra
114
2. Fázis – Az alapelemek létrehozása Miután végeztünk a munkakörnyezet beállításával, elsõként azokat az elemeket kell létrehoznunk, melyek a végsõ tervet alkotják majd. A számokon kívül, amiket majd késõbb állítunk be, szükségünk lesz: – Kereszt formájú vonalakra, melyek majd a második szinten maradnak; – Egy körvonalra; – Egy olyan maszkra (lefedô mintára), ami részben elrejti majd a vonalakat és a kört. Majd csak késõbb fogjuk magát az animációt létrehozni, ami az idõ függvényében elrejti majd a kör egy részét és egymás után a számokat fogja mutatni
2012.03.28.
9:29
Page 115
5. Fejezet Megjegyzés: A kör és a vonalak mint szimbólumok fognak tárózódni a kisfilmben, így bármikor újból elõhívhatóak, amikor szükség van rájuk..
2a. Fázis – A Kör Minthogy már eldöntöttük, hogy a kör szimbólum lesz, egy kicsit másképpen fogunk eljárni, mint az elõzõ leckében. Mielõtt megrajzolnánk a kört, hozzunk létre egy új Szimbólumot, amelyikben majd az objektumunkat fogjuk rögzíteni. Aktiváljuk az Insert>New Symbol (Beszúrás>Új szimbólum) (Ctrl+F8) parancsot (81. Ábra).
81. Ábra A megjelenõ ablakba írjuk be névnek, hogy "Kör" és válasszuk a Grafikus típust. Amikor az OK-ra kattintunk, grafikus kidolgozási mód-ban találjuk magunkat. A Stage megváltozott (82. Ábra), most már csak a szimbólum érdekel minket.
115
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 116
Adobe Flash CS4 II.
82. Ábra
116
Azt is megfigyelhetjük, hogy a szimbólumunk neve a bal felsõ sarokban a Scene1 – "Jelenet1" mellett jelenik meg. A munkaterület közepére rajzoljunk egy 100 pixel átmérõjû kört, aminek szegélye fehér színû és 6 pixel-es. Kitöltés ne legyen (ezeket a jellemzõket a Properties – Tulajdonságok panelen állíthatjuk be). (83. Ábra)
83. Ábra
2012.03.28.
9:29
Page 117
5. Fejezet (Könnyebb úgy rajzolni, ha megváltoztatjuk a munkaterület megjelenítését: használjuk a Nagyító Eszközt, vagypedig az Idõvonal fölött a jobb felsõ részben található zoom mezõt, ahová írjátok be, hogy 200%.) Ha nem sikerül azonnal a kör, használjuk az Edit>Clear (Szerkesztés>Törlés) (Ctrl+Z) parancsot.
2b. Fázis – A vonalak Hozzunk létre az elõzõ elemmel megegyezõ tulajdonságokkal rendelkezõ grafikus szimbólumot és nevezzük el "Sorok"-nak. Középre rajzoljunk két vízszintes, 100 pixel szélességû és 3 pixel vastagságú fehér vonalat. Jelöljük ki és menjünk az Window>Transform (Ablak>Átalakítás) menübe. A Rotate (Elforgatás) mezõbe írjuk be, hogy 90°, aztán kattintsunk az Copy and Apply Transform (Átalakítás másolása és alkalmazása) gombra; ezzel lemásoltuk és 90 fokkal elforgattuk a vonalakat. A vonalak ezzel készen is állnak a végsõ tervhez. (84. Ábra).
117
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 118
Adobe Flash CS4 II.
84. Ábra Megjegyzés: A terv kidolgozása alatt létrehozott minden objektum a Könyvtárban tárolódik, ezt az F11 billentyû lenyomásával ellenõrizhetjük le.
118
Most már csak tervünk fõ elemét, vagyis a hirtelen elõtûnéseket kell animálnunk, melyek ciklikusan elrejtik az alattuk lévõ elemeket.
2012.03.28.
9:29
Page 119
5. Fejezet
4. Lecke Az animáció 2c. Fázis – Az animáció Az animáció az az elem, amivel az elõzõleg megrajzolt vonalakat és kört tudjuk bemutatni. Gyakorlatilag egy idõben változó Stencilt fogunk létrehozni. A Stencil olyan lyukas maszk, ami csak megnyitásokon keresztül engedi láttatni az alatta lévõ szinteket. Mi frame by frame típusú animációt fogunk kidolgozni. Hozzunk létre egy új grafikus szimbólumot és nevezzük el "Elõtûnések"-nek. (85. Ábra). Az 1-es szintet nevezzük át "Szektor"-nak. Rajzoljunk egy szegély nélküli négyszöget fehér színkitöltéssel. Magassága legyen 12 négyzetnyi, szélessége pedig 6 négyzetnyi. Húzzuk össze a jobb felsõ sarkot a bal alsó sarokkal (86. Ábra). Ez lesz a késõbb elkészült alakzat középpontja. A Csúcs áthelyezéséhez a Nyíl eszközt használjuk.
119
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 120
Adobe Flash CS4 II.
120
85. Ábra
86. Ábra Most jelöljük ki a második fotogramot és illesszünk be egy kulcsfotogramot. Ezt leggyorsabban az F6-os billentyûvel tehetjük meg.
2012.03.28.
9:29
Page 121
5. Fejezet Így megkaptuk a második elõtûnést, amit nyilvánvalóan a Nyíl eszközzel még módosítanunk kell: kattintsunk az objektumon kívüli munkaterületre – ezzel visszavontuk a kijelölést róla – majd vigyük a Nyíl eszközt a rézsútos oldalhoz, nyomjuk meg az Alt billentyût és húzzuk át a szegélyt az új helyre (a felsõ oldaltól számolva vízszintesen 6 négyzetnyi, függõlegesen 6 négyzetnyi). Az új fotogramokkal a következõket kell tennünk: 1. jelöljük ki a következõ fotogramot és illesszünk be egy kulcsfotogramot (F6); 2. az elõtûnésrõl vonjuk vissza a kijelölést, vigyük rá a Nyíl eszközt és nyomjuk le az Alt billentyût, 3. kattintsunk és húzzuk át az új helyre (lefelé 12 négyzetnyi). Megjegyzés: Ha egy fotogramot nem kulcsfotogramként definiálunk, nem tudunk a belsejébe rajzolni. Ahogy a fotogramokkal haladunk elõre, a 10-es fotogramnál végül bezáródik a forma. Álljunk az elsõ fotogramra és az Enter-t lenyomva megnézhetjük munkánk eredményét. Most, hogy elkészült a teljes torta, lehetõvé vált a kör teljes megjelenítése. A végcél érdekében azonban ismét el kell rejtenünk az alul lévõ objektumokat. Ezt kétféleképpen tehetjük meg: 1. 1. minden egymást követõ fotogramból kiveszünk egy elõtûnést, így a 20-as fotogramban egy már egészen kicsi elõtûnésünk lesz; 2. lemásoljuk a fotogramokat, beillesztjük õket, kattintunk egyet a jobb egérgombbal a kijelölésen és a Reverse Frames (Fotogram invertálása) parancsot alkalmazzuk.
121
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 122
Adobe Flash CS4 II. Megjegyzés: Az utolsó fotogramban elméletileg egy egyetlen sorból álló maszkot kellett volna készítenünk, de mivel ez nem lehetséges, egy nagyon pici elõtûnést kell létrehoznunk. A maszkoknak mindig kétdimenziós objektumokból (sokszögek, négyzetek vagy általános formák) kell állniuk. Ahhoz, hogy megnézzük az imént készített animációt, jelöljük ki az egérrel az elsõ fotogramot úgy, hogy a lejátszófej az animáció kezdetén legyen, majd nyomjunk egy Enter-t.
122
Az effekt a következõ: az elsõ tíz fotogramban a torta megnõ (emlékezzetek arra, hogy az elején 12 fps-re állítottuk be a kisfilmet), a következõ másodpercben pedig szeletenként tûnik el a torta. Mentsük el munkánkat és most foglalkozzunk az elemek egymásra helyezésével.
2012.03.28.
9:29
Page 123
5. Fejezet 2d. Fázis – Stencil effekt A "Szektor" szint alatt - amit késõbb majd maszkká alakítunk – kell elhelyeznünk a kört is és a vonalakat is. Kattintsunk az új szint létrehozásához szükséges gombra és nevezzük el az új szintet "Gyûrû"-nek. Most nyissuk meg a Könyvtárat és a "Gyûrû" szint elsõ fotogramjával húzzuk a "Kör" objektumot a munkaterületre. Így a korábban létrehozott szimbólum egy példányát kapjuk meg. A Példány lényegében a szimbólum másolata. Sok tulajdonságán tudunk változtatni, de alapvetõen ez az objektum azzal a szimbólummal marad szoros kapcsolatban, amelyikbõl származik. A következõ fejezetekben a Szimbólumok és Példányok közti kapcsolatról is beszélünk majd részletesebben. Hozzunk létre még egy szintet, vigyük a "Kör" szint alá és nevezzük el "Vonalak"-nak A Könyvtárból húzzuk bele a "Sorok" szimbólumot. Azért, hogy elkerüljük a különbözõ szintek elemeinek keveredését, az Idõegyenesen lévõ szem alatti kis jelre kattintva rejtsük el ideiglenesen a "Szektor" szintet. Ha késõbb ismét meg akarjuk jeleníteni a szintet, elég ugyanarra a pontra kattintanunk. Tipp Az így létrehozott vonalak túlságosan kitûnnek a háttérbõl. Ahhoz, hogy átlátszóak legyenek, módosítanunk kell tulajdonságain. A Nyíl eszközzel jelöljük ki a sorokat, majd a Tulajdonságok panelon a Szín mezõben válasszuk az Alfa 40%-os értéket.
123
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 124
Adobe Flash CS4 II.
124
Megjegyzés: Nyomjunk ismét egy Enter-t és megnézhetjük, hogy mozog a lejátszófej fotogramról fotogramra. Egy munkafázis még hátravan, amikor is a szintek tulajdonságain kell módosítanunk ahhoz, hogy a kívánt eredményt elérjük.
2012.03.28.
9:29
Page 125
5. Fejezet
5. Lecke A maszk szint 2e. Fázis – A maszk Most, hogy már minden objektum megvan, maszkká alakíthatjuk a "Szektor" objektumot: a jobb egérgombbal kattintsunk a szintre és a megjelenõ menübõl válasszuk a Maszk pontot. Ezután már csak a "Kör" szint lesz maszkolt, maszkolhatjuk a "Vonalak" szintet is. Kattintsunk rá a jobb egérgombbal és válasszuk a Properties (Tulajdonságok) pontot. A megjelenõ ablakban válasszuk a Masked (Maszkolt) pontot. Az eredményt megnézhetjük, ha a lejátszófejet az elsõ fotogramra visszük és lenyomjuk az Enter-t. Megjegyzés: Az effekt csak akkor látható, ha a lakattal minden szintet blokkoltunk. Ha módosítás miatt egyrõl visszavonjuk a blokkolást, az effektet már nem nézhetjük meg elõzetes megjelenítésben. Azt is érdemes megfigyelni, hogyan módosultak a szintek mellett lévõ szimbólumok.
125
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 126
Adobe Flash CS4 II.
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 127
6. FEJEZET
2012.03.28.
9:29
Page 129
6. Fejezet
1. Lecke A jelenet 3. Fázis – Az összeállítás Az összeállítás az utolsó hátralévõ munkafázis. Ez a fõjelenetben valósul meg (az egyetlenben, amit eddig létrehoztunk). A jelenet nevének módosításához használjuk a Window>Other Panels>Scene (Ablak>Jelenet) parancssort. Kattintsunk kétszer a Jelenet1 névre (Scene1) és írjuk be, hogy "Timer" (87. Ábra).
129
flashcs4_vs4_2.qxd
87. Ábra
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 130
Adobe Flash CS4 II. Megjegyzés: Erõltetettnek tûnhet a szójáték, de a Flash, a Director örökségeként a fejlesztési környezetet virtuális színháznak tekinti. A színészek által létrehozott elemeket a megfelelõ idõben a színpadra helyezzük s ezek az elemek a jelenetben lévõ többi elemmel interakcióba lépnek. A forgatókönyvet természetesen mi írjuk. Nevezzük át az 1. Szintet "Animált timer"-nek és a Könyvtárból húzzuk bele az "Elõtûnések" szimbólumot. Ezzel egy példányát készítettük el. (88. Ábra)
130
88. Ábra Egy igazi visszaszámláláshoz egy csökkenõ számsort kell bevinnünk, mondjuk 3-tól 0-ig. Minthogy ez a számsor összesen négy számjegyet foglal magában, a kész animációnak is legalább négy másodpercesnek kell lennie, ami egy 48 fotogramos animációnak és az imént létrehozott számláló két ciklusának felel meg. Ahhoz, hogy a két ciklushoz szükséges 4 másodpercben látható legyen az "Elõtûnések" példány, 2-tõl 48-ig új fotogramokat kell létrehoznunk.
2012.03.28.
9:29
Page 131
6. Fejezet Ehhez elég kijelölnünk a 48-as fotogramot és lenyomnunk az F5öt. (89. Ábra)
89. Ábra Tipp Az imént beillesztett példány, színpad közepén történõ elhelyezéséhez használhatjuk az Info (Információk) panelt, amit a Window (Ablak) menübõl érhetünk el (90. Ábra).
131
flashcs4_vs4_2.qxd
90. Ábra
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 132
Adobe Flash CS4 II. Hozzunk léte egy új szintet és nevezzük el "Számok"-nak. A Text Tool (Szöveg) eszközzel vigyük be belsejükbe a számokat, pontosan az 1-es, 13-as, 25-ös és a 37-es fotogramokba. Az elsõ fotogramban lesz a 3-as szám, a 13-asban a kettes, a 25-ösben az egyes és a 37-esben pedig a nulla. Vigyük be az elsõ számot: jelöljük ki az elsõ fotogramot, válasszuk ki a Szöveg eszközt, majd kattintsunk a munkaterületre és a Tulajdonságok panelen módosítsuk az egyes jellemzõket: a betûtípus legyen Verdana, a betûméret 40, a betûszín Fehér. És most írjuk be a 3-as számot. A 13-as számhoz szúrjunk be egy kulcsfotogramot, majd a Nyíl eszközzel kattintsunk duplán a szövegre és szúrjuk be a 2-es számot.
132
A többi számnál ugyanígy kell eljárnunk. Az animáció elõzetes megtekintéshez nyomjátok le az Enter-t.
2012.03.28.
9:29
Page 133
6. Fejezet
2. Lecke Tegyük a jelenetet még valósághûbbé! 4. Fázis – Karcolások a régi filmtekercsen Mielõtt összetettebb animációk készítésébe kezdenénk bele, egy, az eddigi munkánkon végzett kis változtatáson keresztül ismételjük át az eddig tanultakat. A Timer-re fogunk olyan effektet készíteni, mint ami a régi filmtekercsek karcolódásait idézi. A frame by frame technikával szúrjunk be egy új grafikai szimbólumot és nevezzük el "Karcolások"-nak: Illesszünk be 10 kulcsfotogramot (egytõl tízig). Minden egyes fotogramba rajzoljunk a Ceruza eszközzel kis vonalakat (a színük legyen fehér, vastagságuk pedig 0.5 pixel) (91. Ábra).
133
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 134
Adobe Flash CS4 II.
91. Ábra Menjünk vissza a fõ jelenetre és a "Számok" szint fölé illesszünk be egy új szintet, aminek "Zavar" legyen a neve. Ide húzzuk át az imént létrehozott szimbólumot.
134
Munkánk gyakorlatilag elkészült; a következõ leckékben azt fogjuk megnézni, hogy hogyan kell hangeffekteket hozzáadni, majd pedig publikálni.
2012.03.28.
9:29
Page 135
6. Fejezet
3. Lecke Hangeffektek Ebben a leckében azt nézzük meg, hogyan kezeljük a hangokat egy animáción belül. A hangok olyan elemek, amelyek megkülönböztetik a Flash animációkat a hálón felhasznált animált GIF-ektõl. Késõbb még egy kis filmzenét is el fogunk készíteni. Hangok Flash kisfilmben Nem is olyan régen az Internet világa még "csendes" volt: mentes volt a hangoktól, és színes, változatos külseje varázsolta "élõvé". A hangok felhasználásának korlátja a webes dokumentumok mérete volt. Ezeken az oldalakon ugyanis annyi és annyiféle grafikus elem és kép volt, ami már nem bírta volna el pluszban a hangok terhelését is. A Flash-nek és a vektorgrafikának köszönhetõen a korábban használatos rasztergrafikához képest jelentõsen csökkent a dokumentumok és kisfilmek mérete és így a hang is a dokumentumok meghatározó elemévé válhatott. A Flash lehetõvé teszi a hangok könnyedénvaló beillesztését, legyen szó a kisfilm gombjainak hangeffektjeirõl, vagy filmzenérõl. Ezenkívül lehetõvé vált a hangok, hangnyomok és a film közti összehangolás, ami gördülékennyé tette a lejátszást.
135
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 136
Adobe Flash CS4 II. Mi a hang? A hang közvetlenül nem jeleníthetõ meg, de grafikusan hullámvonalakkal ábrázolni tudjuk. A hanghullámnak van hosszúsága (ahol is a frekvenciát értékelhetjük) és szélessége (ami az erõsséget jelöli). A 92. Ábrán láthatunk egy hangábrázolást.
92. Ábra
136
A digitális hangok a számítógépünkön tárolódnak és hívhatók újból elõ. Ezeket a hangokat mintahangok jelölik. Ha egy fényképet beszkennelünk tárolás és újbóli megjelenítés céljából, a képet elõször egyszerû kis elemeire kell bontani, amelyek egymásutánisága teszi lehetõvé az eredeti elem másolatának elõállítását. Ugyanígy van ez a hangoknál is. A képek minõsége függ a felbontástól, vagyis az egységnyi területen lévõ (hüvelyk) pixel-számtól és a felhasznált színek mennyiségétõl. A hangok esetén hasonló a mechanizmus: ezeknek az elemeknek a minõsége és a mérete két alapvetõ tulajdonságtól függ:
2012.03.28.
9:29
Page 137
6. Fejezet A modellezés gyakoriságától és a felhasznált bitek számától. A modellezés gyakorisága az idõegység (másodperc) alatt tárolt jelek száma, a felhasznált bitek száma pedig az a mélység, amivel a minta ábrázolva van. Ez lehet 8 bit (256 lehetséges érték) vagy 16 bit (65.536) plusz a színezetek száma. A végsõ méretbeli kínálat függ e két értéktõl. Megjegyzés: Flash-be nem importálhatunk MIDI fájl-t, ezért Javascript-et kell használnunk. Most pedig nézzük meg, hogyan kell kisfilmben hang-fájl-t felhasználni. Menjünk vissza a tervünkhöz és a Adobe>FlashCS4 mappából a File>Import to Library (Importálás könyvtárba) paranccsal importáljunk egy tetszõleges hangot (93. Ábra).
93. Ábra Miután kijelöltük, kattintsunk a Megnyitás-ra, s ezzel a Könyvtárba is importáltuk. Innentõl kezdve a hang, mint szimbólum tárolásra került a Flash projektben és példányait annyiszor használjuk fel a filmünkben, ahányszor csak akarjuk.
137
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 138
Adobe Flash CS4 II.
4. Lecke Hogyan használjunk hangfile-t Flash-ben A hang importálása után meg kell határoznunk, hogy a filmen belül hogyan fogjuk a hangot felhasználni. Az alaphangokat illetõen a Flash egy kicsit másképpen viselkedik. Ezt a különbséget pont azért dolgozták ki, hogy a dokumentumok mérete minél kisebb maradjon és a letöltés is optimális legyen.
138
A Flash két csoportra osztja a hangokat: eseményekre és folyamokra. Ez utóbbi esetben a program streaming tulajdonságait használja fel. A hangeseményeket olyan események aktiválják, mint az egérrel való kattintás, vagypedig ha az idõegyenesen belül egy olyan kulcsfotogramhoz érünk, amelyikbe a hang be lett illesztve.
2012.03.28.
9:29
Page 139
6. Fejezet Megjegyzés Az esemény hangot teljesen le kell tölteni a lejátszáshoz. Szerencsére ha egy filmben ugyanaz hang többször ismétlõdik, csak egyszer kell letölteni. A folyam hangokat ellenben hangnyomokhoz is használhatjuk, valamint akkor, ha a hangot szinkronba kell hozni. Mivel ezek általában csak egyszer kerülnek lejátszásra, a súlycsökkentés érdekében lépésrõl lépésre kell lejátszani õket és streaming módban töltjük le. Megjegyzés Alaphelyzetben minden hang eseményként van beállítva, de módosíthatjuk õket folyammá, még ha ebben az esetben a "számlálónk"-hoz társítandó hangeffekthez nincs is rá szükségünk. Térjünk vissza tervünkhöz. A fõ jelenetben egy új szintet kell létrehoznunk, ezzel a szinttel fogjuk a hangot dokumentumunkba beilleszteni. Nem feltétlenül szükséges új szintet létrehozni, de a bennük található objektumok könnyebb kezelhetõségének érdekében mégis érdemes. A szintet nevezzük el "Hangok"-nak. Hasonlóan a "Számok" szinthez, szúrjunk be üres kulcsfotogramokat, melyeket majd hanggal fogunk feltölteni. A kulcsfotogramoknak tehát az 1, 13, 25 és 37-es fotogramokkal kell megegyezniük. Mielõtt feltöltenénk õket, meg kell bizonyosodnunk afelõl, hogy importáltuk-e a hangot. Ki kell választanunk az elsõ kulcsfotogramot, aztán a Properties (Tulajdonságok) panelen az Sound mezõben pedig a beillesztendõ hangot (ping.wav). (94. Ábra)
139
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 140
Adobe Flash CS4 II.
94. Ábra Megjegyzés Ha egyáltalán nem importáltunk a filmbe hangot, a Sound mezõben a None (Nincs) szó fog szerepelni. A Properties (Tulajdonságok) panelen lévõ Effect (Effektek) legördülõ menüjébõl a hanghoz társítható effektet is választhatunk.
140
Az effekteket a 95. Ábrán láthatjátok. Itt most nem fogjuk minden hang tulajdonságát felsorolni, nyugodtan próbáljuk ki õket. Megjegyzés Hangot beilleszteni úgy is lehet, hogy a Könyvtárból a színpadra húzzuk a hangot a kívánt fotogramba és szintbe. A hang természetesen nem látható, de a fotogramban, ahová beillesztettük, egy hullámvonal jelzi, ami kiterjeszkedik az idõvonal egy szakaszán (96. Ábra).
2012.03.28.
9:29
Page 141
6. Fejezet
95. Ábra
96. Ábra Ez alkalommal csak az Esemény típusú hangokat néztük meg, de a következõ fejezetekben a Folyam típusú hangokkal is foglalkozni fogunk.
141
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 142
Adobe Flash CS4 II.
5. Lecke Film publikálása Miután elkészültünk a film összeállításával, (amit eddig Flash tulajdonos formátumban mentettünk el és csak Flash-ben tudjuk szerkeszteni és megjeleníteni), most a világhálóra is alkalmas formátumba kell átalakítanunk a filmünket.
A „Timer.swf” létrehozása Az SWF formátumot a megfelelõ parancsok révén HTML oldalba illeszthetjük és a Flash kisfilm megjelenítõ-n keresztül bármikor megjeleníthetjük számítógépünkön, ha a fájl-ra duplán kattintunk.
142
Nyissuk meg a Számláló_ film_6F_4L.fla fájl-t. Ahhoz, hogy a dokumentumot SWF formátumban mentsük el, a File>Export Movie (Kisfilm exportálása) parancssort kell használnunk. A megjelenõ ablakban válasszuk ki a mentés helyét, az ezután megjelenõ ablak a film optimalizálására szolgál, errõl késõbb még lesz szó. Nekünk elég egyszerûen csak az OK-ra kattintanunk. Ezzel a mûveletnek vége, a dokumentumot elmentettük (97. Ábra).
2012.03.28.
9:29
Page 143
6. Fejezet
97. Ábra Nézzük meg a két fájl méretét: az eredeti Számláló_ film_6F_4L.fla dokumentum 325 Kbyte-ot foglal el, míg az exportált Timer.swf film csak 9 kByte-ot. Ez azért van így, mert ez utóbbi optimalizálása közben a program kiszûr minden olyan információt ami a tároláshoz és a futtatáshoz felesleges. Lehetõségünk van arra is, hogy az SWF filmen kívül annak a filmet tartalmazó HTML oldal létrehozását is kérjük. Ehhez a File>Publish (Publikál) parancsot kell használnunk. Ebben az esetben a két file neve megegyezik a Flash tervvel (Számláló_ film_6F_4L.html és Számláló_ film_6F_4L.swf). Megjegyzés A HTML oldalt a szükséges szövegek hozzáadásával késõbb is megszerkeszthetjük.
143
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 144
Adobe Flash CS4 II. A „Timer.gif” létrehozása Azon kívül, hogy lehetõségünk van egy teljesen vektoriális kisfilmet létrehoznunk (.swf), más formátumokba is exportálhatjuk a filmet. A vektoriális film és egy egyszerû animáció közti különbség elemzéséhez exportáljuk a filmet animált GIF-ként (Timer120.GIF). Amikor a Mentés gombra kattintunk, a megjelenõ ablakban optimalizálhatjuk az animáció színeit és méreteit. Mi hagyjuk meg az eredeti terv méreteit (120x120 pixel) és válasszuk a 32 színszámot.
144
Ne felejtsük el, hogy a film, amit ezzel a formátummal mentünk el, már nem vektoros, hanem bitmap, vagyis pixelekbõl áll, ezenkívül a színek száma erõsen befolyásolja a méretet. Most végezzük el ugyanezt a feladatot, csak kisebb méretekkel (60x60 pixel) (Timer60.GIF). Most nézzük meg a dokumentumok méretét. A dokumentumok közti különbség gyakorlatilag abból adódik, hogy a Timer-hez létrehozott objektum kevés volt, és a Flash film idõtartama nem számít a végsõ dokumentum méretének szempontjából. Ellenkezõen, az animált képekhez a fotogramok száma lényeges a méretek szempontjából. Egy sok fotogramból álló és nagyméretû film nem javasolt Internetre hacsak nem .swf formátumban.
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 145
7. FEJEZET
2012.03.28.
9:29
Page 147
7. Fejezet
1. Lecke Az animáció alapjai Most, hogy túlvagyunk a szimbólumok tárgyalásán is, nézzük meg tüzetesebben, mire is képes a Flash a mozgáseffektek és az interaktivitás terén. Mindezt azért tesszük, hogy felhasználásukkal minél vonzóbb legyen a filmünk. Ennek a fejezetnek az a célja, hogy bevezessen az animáció és a hozzá kapcsolódó szakkifejezések alapjaiba. Mint ahogyan azt az elõzõ fejezetekben már láthattuk, néhány animáció ún. frame by frame animációval készül, ahol is az alany minden mozdulatának egy-egy kulcsfotogram felel meg. A kulcsfotogramok ahhoz szükségesek elengedhetetlenül, hogy meghatározzuk, animációnk mely pontján kezdõdjön el egy mozgás. Vagyis egy film kulcsfotogramja az álló helyzetbõl a mozgásba történõ állapotváltozást jelöli. Az animáció egy sor különálló képen alapul. A megvalósítandó mozgás statikus, álló eredetû. Gyakorlatilag ez ugyanaz az elv, amin a tv-filmek is alapulnak: a képernyõ képkockáról képkockára továbbítja a képeket, melyek egymásutánisága a folyamatos mozgás hatását keltik a nézõben. Ugyanez a szabály érvényes a Flash animációkra is úgy, hogy úgy tudunk kisméretû dinamikus filmeket létrehozni, hogy az a navigálást közben nem lassítja le.
147
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 148
Adobe Flash CS4 II. Az animáció teljes játékideje a kisfilm idõtartamától függ. Ez utóbbit növelhetjük ha extra frame-eket adtok az Idõegyeneshez. Ennek az a leggyorsabb útja az, ha az Idõegyenesen kijelöljük a beillesztendõ fotogram helyét és a jobb egérgombbal rákattintunk. A megjelenõ menü segítségével annyi fotogramot szúrhatunk be és távolíthatunk el, amennyit csak akarunk. Megjegyzés Egy másik lehetõség az az, ha elhúzzuk a frame-et, amelynek kiterjedését növelni akarjuk egészen a végpontig, közben pedig lenyomva tartjuk az Alt billentyût. A mûvelet alatt egy + jelnek kell megjelennie. Mint azt láthatjuk, a pluszban hozzáadott frame-ekhez nem tartozik mozgás. Ez azért van így, mert hiányoznak a kulcsfotogramok. Ez azt jelenti, hogy a film megszakítás nélkül fog forogni. Az animáció növeléséhez a kulcsfotogramoknak elvileg arányosan kellene mozogniuk. Animáció létrehozásakor figyelnünk kell a végsõ film méretére: minél kisebb, annál jobb.
148
Ezt úgy ellenõrizhetjük, ha a film elindítása után (Ctrl+Enter) a View>Bandwidth Profiler (Megjelenítés>Sávszélesség profil) parancsra kattintunk (98. Ábra). A méretek Kilobyte-ban (KB) vannak megadva.
2012.03.28.
9:29
Page 149
7. Fejezet
98. Ábra
149
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 150
Adobe Flash CS4 II.
2. Lecke Mozgás utólagos beszúrása Egy animáció méretének csökkentésének legjobb módja az, ha – amennyiben az lehetséges – közbeszúrt animációkhoz folyamodunk. Így nem kell egy objektum minden mozgásához kulcsfotogramot beszúrnunk, hanem elég a kezdeti és az animáció végkulcsfotogramját beillesztenünk. A munka oroszlánrészét pedig elvégzi helyettünk a Flash.
150
A Flash animációk az egy adott idõtartam alatti képlejátszás elvén alapulnak. A közbeszúrások lehetõvé teszik, hogy a Flash egymaga létrehozza a kisfilmbe beillesztett objektumok formáját vagy mozgását egy kezdõ- és egy végpont felhasználásával, miközben kiszámítja a közbeesõ fotogramok változásait. A Flash két fõ csoportba osztja az animációkat: az egyik a mozgás közbeszúrás (motion Tween), ami lényegében arról szól, hogy szimbólumok vagy csoportok felhasználásával egy objektumot áthelyez A pontból B pontba. A másik pedig a forma közbeszúrás (shape tween), ami pedig a "morphing" eljáráson alapul. Ez azt teszi lehetõvé, hogy egy kép fokozatosan egy másikba alakuljon át. Habár a forma közbeszúrással meglepõ grafikai effekteket lehet megvalósítani, ennek a funkciónak az a hibája,
2012.03.28.
9:29
Page 151
7. Fejezet hogy elég nagy méretû fájlokat hoz létre és emiatt ritkábban használják. Szimbólumok közbeszúrásával: • mozgó objektumokat forgathatunk el, • mozgó objektumok méretét változtathatjuk meg, • objektumok színét módosíthatjuk, • egy objektum belépti, vagy kimeneti áttûnését hozhatjuk létre. A következõ leckékben a közbeszúrás alapjaival fogunk foglalkozni és bemutatjuk két fajtájának legjobb megjelenési formáit. Most viszont nyissuk meg a harmadik fejezetben készített háromdimenziós gömb forrásfálját. (Oktató Cd>Flash_óraimunkák>Fejezet_7>Gömb_3F_1L.fla) A gömb az elsõ szint elsõ fotogramjába helyezkedik el. Jelöljük ki az objektumot és az Modify>Convert to Symbol (Kidolgozás>Szimbólummá konvertálás) menüpontokon keresztül konvertáljuk szimbólummá, vagypedig nyomjuk le az F8-as billentyût. Ha ezzel megvagyunk, ellenõrizzük le, hogy gömb valóban a jelenet bal oldalán található-e. Jelöljük ki a 30. fotogramot és az F6-os billentyû segítségével szúrjunk be egy új kulcsfotogramot. Ellenõrizzük le, hogy valóban a 30. fotogramon vagyunk, majd vigyük az objektumot a jelenet jobb oldalának a legszélére. Ehhez használhatjuk a nyíl billentyû+SHIFT-et is. (99. Ábra)
151
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 152
Adobe Flash CS4 II.
99. Ábra
152
Most kattintsunk a jobb egérgombbal az egyik közbeesõ fotogramra és válasszuk a Create Motion Tween (Mozgás közbeszúrás létrehozása) pontra. (100. Ábra)
100. Ábra
2012.03.28.
9:29
Page 153
7. Fejezet Nyilvánvaló, hogy a Flash a közbeszúrással a két kulcsfotogram között üresen hagyott fotogramokat tölti fel. A nyíl az Idõegyenes azon szakaszát jelöli, ami az objektum mozgását kezeli. Az interpolációba bevont területek a mozgás interpoláció esetén sötétkék színûek, a forma interpoláció esetén pedig zöld színûek. Ha szaggatott nyíl jelenik meg, az azt jelenti, hogy a közbeszúrás még nem fejezõdött be és nem is fog helyesen futni. (Ilyenkor ismételjük addig a mûveletsort, amíg folyamatos nyíl képe nem jelenik meg. A hiba oka lehet a képek csoportosításának hiánya vagy a mi példánkban kért szimbólummá konvertálás hiánya.) Ellenõrizzük le, hogy a gömb objektum tényleg szerepel-e a Könyvtár-ban. (101. Ábra)
153
flashcs4_vs4_2.qxd
101. Ábra
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 154
Adobe Flash CS4 II. Ha probléma nélkül csináltuk meg a közbeszúrást, a Ctrl+Enter billentyûkombinációval tekinthetjük meg az elõzetes képet. (Ha nem mûködik lehet, hogy egy másik kulcsfotogramot szúrtunk be rosszul és ezért szakadt meg a mozgás. Ha így van, töröljük az egész szintet és kezdjük elölrõl.)
154
Most már tudjuk, hogy hogyan mûködik a közbeszúrás és hogy milyen egyszerûen lehet segítségével animációt készíteni anélkül, hogy egyenként kellene az egyes fotogramokat megrajzolni.
2012.03.28.
9:29
Page 155
7. Fejezet
3. Lecke Effektek hozzáadása Most, hogy a gömb animációjával készen vagyunk, adjunk hozzá néhány effektet, amitõl az alakzat mozgása még valósághûbb lesz. Amikor a gömböt rajzoltuk, amiatt aggódtunk, hogy megfelelõ helyen csillan-e meg rajta a fény. Ha viszont most nézzük meg azt a fénylõ pontot, azt látjuk, hogy az az egész animáció ideje alatt mozdulatlan marad, vagyis olybá tûnik, mintha a gömb nem forogna, hanem egy képzeletbeli síkon haladna. Lássuk csak, hogyan is javíthatjuk ki az animációt. Kattintsunk egy, az interpolációba bevont frame-re és a Properties (Tulajdonságok) panelen alkalmazzunk a gömbön a Rotate>CW (Elforgat>Óra járásával megegyezõ) irányba történõ elfordulást. (102. Ábra). A szomszédos mezõben azt is meghatározhatjuk, hogy a kép hányszor forduljon el jobbra: mi írjuk be, hogy 1, így mozgás közben legalább egyszer el fog fordulni az alakzat. A Menetet – Easy is a Tulajdonságok panelon állíthatjuk be: - minél kisebb a menet értéke (Bent – In), az objektum annál lassabban indul, utána viszont felgyorsul; - minél nagyobb a menet értéke (Kint – Out), az objektum annál gyorsabban indul, aztán viszont lelassul.
155
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 156
Adobe Flash CS4 II.
102. Ábra Olyan effektet is alkalmazhatunk, hogy a gömb mérete mozgás közben megváltozzon. Ehhez elég az utolsó frame-re mennünk, kijelölni a gömböt majd a Tulajdonságok panelon átméretezhetjük az objektumot. Ha viszont azt akarjuk, hogy a gömb a színét változtassa, akkor miután rámentünk a kulcsfotogramra, rá kell kattintanunk a példányra és a Tulajdonság panelon módosítanunk kell a színt (Color – Szín) (103. Ábra).
156
Ugyanezzel a módszerrel más mozgást is alkalmazhatunk az objektumon. Szúrjunk be egy kulcsfotogramot, vigyük az objektumot a Stagere és az Idõegyenesen megtekinthetjük a változásokat. Minden változtatási pontot egy-egy kulcsfotogram jelöl.
2012.03.28.
9:29
Page 157
7. Fejezet
103. Ábra Megjegyzés Ha a mûvelet közben növelni vagy csökkenteni kellene egy mozgás interpolációjának kiterjedését, le kell nyomnunk a Ctrl billentyût, a kurzort a fotogramcsoport kezdõ- vagy végpontjára kell vinnünk majd a bal egérgomb folyamatos lenyomása mellett elhúzni az egeret. Ekkor kétirányú nyíl jelenik meg.
157
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 158
Adobe Flash CS4 II.
4. Lecke A pattogás effekt A gömb mozgása még valóságosabbnak fog tûnni, ha ráadásul még pattog is.
158
Próbáljuk ki ezt az effektet is! Nyissuk meg az elõzõ leckében elkészített gömb.fla fájlt. Jelöljük ki az elsõ szint elsõ fotogramját, az F11-el nyissuk meg a Könyvtárat, és húzzuk a labdát a stage-en kívül esõ munkaterületre (X=600; Y=100). A szintet nevezzük el "Labdá"-nak. (104. Ábra)
104. Ábra
2012.03.28.
9:29
Page 159
7. Fejezet Szúrjunk be a 8-as fotogramhoz egy kulcsfotogramot és húzzuk át a labda példányát új pozícióba, ez alkalommal a Stage-re (X=338,9; Y= 284,6). A 8-as példánynál a labda pattogni fog. Definiáljunk egy új pozíciót a 12-es fotogramnak is (X=281,6; Y= 199,8). Most pedig illesszünk be az1-es és 8-as fotogram közé mozgás interpolációt. (kattintsunk a jobb egérgombbal az egyik közbeesõ fotogramra és válasszuk a Create Motion Tween (Mozgás közbeszúrás létrehozása) pontra). (105. Ábra)
105. Ábra Amikor munkánkat leellenõriznénk, vagyis lejátszanánk a kisfilmet, ne felejtsük el, hogy a Flash-nek van egy érdekes plusz funkciója is: a Stage-en egyszerre több fotogramot is meg tud jeleníteni. Ezt a megjelenítési típust Onion Skin-nek nevezzük. Ekkor gyakorlatilag minden fotogram rajza egyszerre jelenik meg.
159
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 160
Adobe Flash CS4 II. Ha alkalmazni szeretnénk ezt a technikát, kattintsunk az Onion Skin technika gombra (106. Ábra). Ez a kép az Onion Skin mutatókat is mutatja az Idõvonalon az összes szint fölött.
106. Ára Most pedig illesszünk be a 8-s és 12-es fotogram közé is mozgás interpolációt.
160
A színek az idõ múlásával változnak, a legszínesebb képek az elsõként megjelenített fotogramokat jelölik. Ha inaktiválni szeretnénk ezt a megjelenítési formát, kattintsunk ismét az Onion Skin techniká-ra. Aki csak a körvonalakat szeretné megjeleníteni, kattintson az Onion Skin Outlines (Onion Skin körvonalak) gombra. Munkánkat mentsük el!
2012.03.28.
9:29
Page 161
7. Fejezet
5. Lecke Árnyék közbeszúrás Szúrjunk be egy új szintet és nevezzük el "Árnyék"-nak (az elõzõ leckében elkészült fájlban dolgozzunk tovább – (Oktató Cd> Flash_óraimunkák>Fejezet_7>Gömb_7F_4L.fla) Az Insert>New Symbol (Beszúrás>Új szimbólum) parancssoron keresztül illesszünk be egy új szimbólumot. A megjelenõ párbeszédablakban írjuk be az "árnyék" nevet és állítsuk be a grafikus viselkedést. Az új szimbólum stage-én az Ovális (O) eszközzel rajzoljunk egy vízszintesen elnyúló szürke ellipszist. A forma legyen jó lapos, hogy minél inkább emlékeztessen egy labda árnyékára. (107. Ábra)
161
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 162
Adobe Flash CS4 II.
107. Ábra Miután ezzel elkészültünk, a megfelelõ gombra történõ kattintással menjünk a Scene1 – "Jelenet1"-re és az "árnyék" szint 3-as fotogramjához szúrjunk be egy kulcsfotogramot. Húzzuk az "árnyékot" a stage-re és határozzuk meg a méretet és a pozíciót (W=454,9; H=123,2; X=817,9; Y=367,1). Ebben a pozícióban adjunk a példányhoz átlátszó effektet (Tulajdonságok panel: Szín=Alfa 30%).
162
A 8-as fotogramhoz szúrjunk be egy kulcsfotogramot: ez a labda alatt lévõ árnyék felpattanásának pillanata (W=65,0; H=17,6; X=349,9, Y=315,4) (108. Ábra).
2012.03.28.
9:29
Page 163
7. Fejezet
108. Ábra A 12-es fotogramhoz szúrjunk be egy kulcsfotogramot: a felpattanás után az árnyék eltávolodik a labdától és meg is nõ (W=285,3, H=77,3; X=474,3; Y=350,7) (109. ábra). Ebben a pozícióban adjunk a példányhoz átlátszó effektet is (Szín=Alfa 30%).
163
flashcs4_vs4_2.qxd
109. Ábra
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 164
Adobe Flash CS4 II. Most pedig az "Árnyék" szint 1-es és 8-as fotogramja közé szúrjuk be a mozgás interpolációt. Ha még hangot is szeretnénk társítani a pattogáshoz, elég egy új szintet létrehoznunk, "Hang"-nak elneveznünk és a 7-es fotogramhoz kulcsfotogramot beszúrnunk. A Window>Common Libraries>Sound menübõl húzzunk egy tetszõleges hangot a stage-re és nézzük meg az elkészült filmet. (110. Ábra)
110. Ábra
164
Mentsük el munkánkat!
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 165
8. FEJEZET
2012.03.28.
9:29
Page 167
8. Fejezet
1. Lecke Forma interpoláció Most, hogy már gyakorlatra tettünk szert a mozgás interpoláció terén, próbáljuk ki a forma interpolációt is. A forma interpolációt egyik formából a másikba történõ morphing megvalósításánál és módosításánál használják animációkban. Ebben a formák és a színek fokozatosan alakulnak át. Ugyanúgy, mint a mozgás interpolációnál, a Flash itt is automatikusan hozza létre a közbeesõ fotogramokat. Figyeljünk azonban arra, hogy a forma interpolációegyszerû formákkal dolgozik és nem képcsoportokkal, vagy szimbólumokkal. A forma interpoláció ritkábban használatos animációs forma, mert jelentõsen megnöveli a film végsõ méretét. Háromféle morphing-ot lehet forma interpolációval létrehozni: - formából formába - formából szövegbe - szövegbõl szövegbe Kezdjük a formából formába morphing-al. Gyakran hasznunkra lehet egy objektum másik objektummá történõ átalakulása (például négyzet körré vagy hernyó pillangóvá).
167
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 168
Adobe Flash CS4 II. Már biztosan eszébe jutott mindenkinek néhány jó ötlet, de most mi kezdjük egy egyszerû példával: készítsünk olyan animációt, melyben egy kör csillaggá alakul. Az 1-es fotogramba rajzoljunk egy kontúr nélküli piros kört, a 20-as fotogramba pedig szúrjunk be egy kulcsfotogramot, majd töröljük a kört. Nyissuk meg az Oktató Cd-n lévõ Csillag.fla állományt (Oktató Cd>Flash_óraimunkák>Fejezet_8>Csillag.fla). 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. Illesszük be kijelölt csillagot a 20-as fotogramba. (111. Ábra)
168
111. Ábra 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 (Kidolgozás>Forma>Formajavaslat hozzáadása) (vagy gyorsabban: Ctrl+Shift+H).funkciót válasszuk ki ötször.
2012.03.28.
9:29
Page 169
8. Fejezet 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. (112. és 113. Ábra)
112. Ábra
169
flashcs4_vs4_2.qxd
113. Ábra
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 170
Adobe Flash CS4 II. Álljunk vissza az elsõ képkockára és egy Enter billentyût lenyomva indítsuk el az animációt. Az animációnál 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. A 0 és 20-as kulcsfotogramok közti terület zöld, ami azt jelzi, hogy forma interpolációt alkalmazunk. A 0 és a 20-as fotogram közt aktiváljuk az Onion Skin techniká-t és figyeljük meg, hogyan változik meg az alakzat formája és színe (114. Ábra).
170
114. Ábra Ha le akarjuk lassítani a forma interpoláció folyamatát és azt szeretnénk, hogy az átalakulás fokozatosabb legyen, a 20-as fotogramot el kell húznunk az Idõegyenesen. Ha a kisfilm hosszabb, az átalakulás is fokozatosabb lesz. Mentsük el munkánkat!
2012.03.28.
9:29
Page 171
8. Fejezet
2. Lecke Morphing irányítása A Properties (Tulajdonságok) panelrõl választva más effekteket is kipróbálhatunk. Ennél az interpolációnál is beállíthatjuk például az Ease-t (Menetet), ami, mint ahogyan azt korábban már láttuk, a haladás sebességét szabályozza, vagy a formák egyesülésének stílusát is meghatározhatjuk a Blend (Összeolvadás) legördülõ menüjében. Ha a Distributive (Szétoszlás) pontra kattintunk, az összeolvadás folyamata finom lesz, ha viszont az Angular (Szögletes) opciót választjuk, sokkal jobban megmaradnak a sarkok és az egyenes vonalak (115. Ábra).
171
flashcs4_vs4_2.qxd
115. Ábra
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 172
Adobe Flash CS4 II. Próbáljuk ki ezeket az opciókat és mindegyik esetben figyeljük meg a morphing folyamatát! A Properties (Tulajdonságok) panel segítségével módosítsuk az elõzõ fájlt. Vigyük a csillagot a stage-re a kör helyére, és állítsuk be ugyanakkora méretûre, mint amilyen a kör is. Ha lejátsszuk az animációt, azt látjuk, hogy a kör "leereszt" és megjelenik a csillag öt ágának csúcsa (116. Ábra).
116. Ábra
172
De mi lenne akkor, ha azt állítanánk be, hogy a kör legmagasabb pontja kerüljön a csillag jobb alsó sarkába? Az átalakulás már nem lineáris lenne, hanem nagyon is speciális. Ehhez Formajavaslatot (Hints) kell adnunk a körhöz: Modify >Shape >Add shape hint (Kidolgozás>Forma>Formajavaslat hozzáadása) (vagy gyorsabban: Ctrl+Shift+H).
2012.03.28.
9:29
Page 173
8. Fejezet Jelöljük ki az animáció elsõ fotogramját és nyomjuk le ötször a fent leírt billentyûkombinációt. 5 kis kör fog megjelenni (egymás fölött) a kör közepén. Húzzuk át a kis köröket a 116-os Ábrán látottak szerint, jelöljük ki az utolsó fotogramot és állítsuk be a köröcskéket az ábra szerint. Ha most játsszuk le az így módosított animációt, azt láthatjuk, hogy az teljesen eltér az elõzõtõl. A kis körök a kezdeti figura pontjain vannak és a csillag, vagyis a végsõ alakzat pontosan azon pontjaiba mennek át, ahogyan azt beállítottuk (117. - 118. Ábra).
117. Ábra
118. Ábra
173
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 174
Adobe Flash CS4 II.
3. Lecke Formából szöveg morphing Nyissuk meg az (Oktató Cd>Flash_óraimunkák> Fejezet_7>Gömb_7F_5L.fla állományt. Érdekes forma interpoláció lenne az is, ha labdánkat és árnyékát szöveggé alakítanánk át. Nézzük meg, hogyan is... Filmünkbe szúrjuk be az új szinteket: az elsõ neve "Flash" lesz, és a labda morphing-ját fogja tartalmazni, a másik meg legyen "Flashárnyék", ebben pedig az árnyék morphing-ja lesz benne. Másoljuk le a "labda" szint 12-es fotogramját és az Edit>Paste in Place (Szerkesztés>Pozícióba illesztés) paranccsal illesszük be a "Flash" szint 13-as fotogramjába (természetesen miután a kulcsfotogramot már beillesztettük).
174
Célunk elérésének érdekében a példányt formába kell konvertálnunk: ezt a Modify>Break Apart (Kidolgozás>Megosztás) paranccsal tehetjük meg.(119. Ábra)
2012.03.28.
9:29
Page 175
8. Fejezet
119. Ábra A 21-es pozícióba szúrjunk be egy üres kulcsfotogramot és a Szöveg eszközzel írjuk be, hogy "Flash". A labda pozíciója és arányai ne változzanak! A Modify>Break Apart (Kidolgozás>Megosztás) parancs kétszeri alkalmazásával konvertáljuk a szöveget egyszerû alakzattá. Ha akarjuk, ugyanazt a színkitöltést rendelhetjük a szöveghez, mint ami a labdának is van. Kattintsunk az Idõegyenes 12-es fotogramjára és a Properties (Tulajdonság) panelon és a Tween legördülõ menüjében válasszuk a Shape opciót. A 12-es és 21-es kulcsfotogramok közti terület most zöld, ami azt jelenti, hogy forma interpolációval van dolgunk (120. Ábra).
175
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 176
Adobe Flash CS4 II.
120. Ábra
176
Ha jól dolgoztunk a labda átalakul szöveggé. (121. Ábra)
121. Ábra
2012.03.28.
9:29
Page 177
8. Fejezet
4. Lecke Egyre nehezebb Hogy saját szemünkkel is lássuk, mire képes a Flash, próbáljunk ki bonyolultabb formákkal is a forma interpolációt. Ne felejtsük el azonban azt, hogy minél összetettebb egy kép, annál kevésbé látjuk elõre a végeredményt arról nem is beszélve, hogy a fájl mérete is jócskán megnõ. Nyissuk meg az elõzõ leckében elkészített fájlt és dolgozzuk ki a "Flashárnyék" szintet. Másoljuk le az "Árnyék" szint 12-es fotogramját és az Edit> Paste in Place (Szerkesztés>Pozícióba illesztés) paranccsal illesszük be a "Flashárnyék" szint 13-as fotogramjába (természetesen a kulcsfotogram beszúrása után). Mint az elõbb, most is formába kell konvertálnunk a példányt: Modify>Break Apart (Kidolgozás>Megosztás). A 21-es pozícióba szúrjunk be egy üres kulcsfotogramot és a Szöveg eszközzel írjuk be ismét, hogy "Flash". A szín maradjon. A Modify>Break Apart (Kidolgozás>Megosztás) parancs kétszeri alkalmazásával konvertáljuk egyszerû alakzatba a szöveget.
177
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 178
Adobe Flash CS4 II. Tükrözzük a szöveg árnyékát a Modify>Transform>Flip Vertical (Kidolgozás>Átalakítás>Függõleges tükrözés) parancscsal. A Free Transform (Szabad átalakítás) eszköz segítségével, a fogókkal döntsük a szöveget balra (122. Ábra).
122. Ábra
178
Kattintsunk az Idõegyenes 12-es pontjára. A Properties (Tulajdonságok) panelen a Tween legördülõ menüjében válasszuk a Shape opciót. Most pedig játsszuk le filmet. (123. Ábra)
2012.03.28.
9:29
Page 179
8. Fejezet
A ash
•
............... .... .......
123. Ábra
179
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 180
Adobe Flash CS4 II.
5. Lecke Szövegbõl szöveg morphing Ennek a fejezetnek a végén azt ismételjük át, hogy a Modify>Break Apart (Kidolgozás>Megosztás) parancs révén szöveget is átalakíthatunk egyszerû alakzatokká, vagyis nem csak objektumot tudunk szöveggé, hanem szöveget is tudunk egy másik szöveggé átalakítani. Nyissuk meg ismét az elõzõ leckében elkészített fájlt és alkalmazzunk morphing-ot a Flash feliraton. Ha animációnk egy részletére fel szeretnénk hívni a figyelmet, szüneteket iktathatunk be. Ha egy 12 fps sebességû animációba 1 másodperc szünetet szeretnénk beiktatni, 12 fotogramot kell az Idõegyeneshez hozzáadni.
180
Miután a labda felirattá alakult át, legalább egy 1 másodperces szünetet szeretnénk hagyni animációnkban. Ehhez a "Flash" és a "Flashárnyék" szint 34-es fotogramjához kulcsfotogramot kell beszúrnunk. A "Flash" szint 49-es fotogramjához is szúrjunk be egy új kulcsfotogramot és tetszõleges betûtípussal és színnel írjuk a stage-re, hogy "ViewAgain" (ismét megjelenít).
2012.03.28.
9:29
Page 181
8. Fejezet Mint ahogyan azt a késõbbi fejezetekben látni fogjuk, ez a felirat lesz a példa a felhasználóval történõ interaktivitásra. Ugyanis elég lesz a feliratra egyszer rákattintani és a felhasználó újból megtekintheti a kisfilmet. Most viszont hagyjuk az interaktivitást és alakítsuk át új szövegünket egyszerû alakzattá a Modify>Break Apart (Kidolgozás>Megosztás) parancs kétszeri alkalmazásával. A 34-es és a 49-es kulcsfotogramok közé szúrjunk be egy forma interpolációt. Mielõtt azonban lejátszanánk filmet, a "Flashárnyék" szinten is módosítani fogunk: a 39-es szinthez szúrjunk be egy kulcsfotogramot és vigyük az árnyékot a stage-en kívül úgy, hogy az animáció utolsó fotogramjai már ne legyenek benne a jelenetben és ide is szúrjunk be egy forma interpolációt (124. Ábra).
181
flashcs4_vs4_2.qxd
124. Ábra
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 182
Adobe Flash CS4 II. Most már lejátszhatjuk az animációt. Jelenleg a film úgy van beállítva, hogy automatikusan ismétlõdjön, vagyis nem a felhasználó az, aki a megfelelõ feliratra történõ kattintással újra elindítja a lejátszást. Ebben az esetben majd úgy kell elkészítenünk munkánkat, hogy az interaktív gombok befogadására is alkalmas legyen és a kisfilm az animáció utolsó fotogramjánál álljon le.
182
Még ha nem is kifejezetten lényeges, de szúrjunk be egy új szintet, a "esemény"-t, a 49-es fotogramhoz pedig egy üres kulcsfotogramot. A kijelölt 49-es fotogrammal a Window>Action (Ablak> Események) parancssoron keresztül aktiváljuk az Action Frame-t (Esemény Panel), vagy csak egyszerûen nyomjuk meg az F9-es billentyût. (125. Ábra)
125. Ábra Az Események Panel jobb oldalán találjuk a rendelkezésre álló eseményeket (néhány csak meghatározott objektum esetén mûködik).
2012.03.28.
9:29
Page 183
8. Fejezet Az Action>Movie Clip Control>Stop esemény az egész Action Script – a Flash programozási nyelve – egyik legegyszerûbb eseménye. Elég kétszer a Stop-ra kattintanunk az eléréséhez. Az Események panel jobb oldalán jelenik meg a fotogramhoz rendelt Action Script. Az Idõegyenesen az "action" szó "a" betûje jelöli azt, hogy az adott fotogramhoz eseményt rendeltünk (126. Ábra).
126. Ábra A Flash Action Script-jére még visszatérünk, most ellenõrizzük le, hogy a beszúrt esemény leállítja-e a filmet a szövegbõl szöveg morphing végén.
183
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 185
9. FEJEZET
2012.03.28.
9:29
Page 187
9. Fejezet
1. Lecke Egy nagyratörõ terv Most egy olyan projektbe kezdünk, amelyben a Csillagok Háborúja bevezetõ képkockáit fogjuk felidézni. A szöveg függõlegesen halad majd felfelé és mérete közben folyamatosan csökken. Ennek a gyakorlatnak az a célja, hogy az eddig tanult funkciókat egy összetettebb feladatban ismételjük át. A gyakorlat végén azt is megnézzük, hogyan kell egy egész animációt végigkísérõ háttérhangot is hozzáadni munkánkhoz. Mint mindig, most is kezdjük a színpad elrendezésével. A munkaterületet állítsuk be 300x200 pixelre, a hátteret pedig fekete színûre. Jelenítsük meg a rácshálót (10 pixeltõl). A fájlt mentsük el Starwars.fla néven. Írjuk be az elsõ szöveget, az "Episode IV"-t Verdana-val, 36-os betûmérettel és sárga színnel. (127. Ábra)
187
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 188
Adobe Flash CS4 II.
127. Ábra Minthogy mozgás interpolációval fogjuk animálni, ezt az objektumot azonnal szimbólummá kell alakítanunk. (F8). Most a színpadon van az animációhoz szükséges példány. Vigyük alulra, a munkaterületen kívül, hogy olyan hatást keltsen mint az olyan szöveg, ami a színpadra fog kúszni.
188
A 30-as fotogramhoz szúrjunk be egy kulcsfotogramot és csökkentsük 10%-ra a példányt (Modify>Transform>Scale and Rotate – Kidolgozás>Átalakítás>Átméretezés és Elforgatás) (128. -129. Ábra).
128. Ábra
2012.03.28.
9:29
Page 189
9. Fejezet
129. Ábra Vigyük a szöveget a képernyõ közepére és állítsunk be 10%-os homályosságot. A jobb egérgombbal kattintsunk a közbeesõ fotogramra és válasszuk a Create Motion Tween (Mozgás interpoláció létrehozása) pontot. Ezzel készen is vagyunk; nyomjuk meg az Enter-t és nézzük meg az animációt. A szöveg alulról a színpadra kúszik, mérete fokozatosan csökken és egyre fakul, pont úgy, ahogyan a moziban, mint amikor valami távolodik tõlünk. (130. Ábra)
189
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 190
Adobe Flash CS4 II.
130. Ábra
190
Most vigyük be a többi szöveget is, amelyek egyenként lépnek majd színre és távolodnak el egymás után. Azért, hogy a szinteket ne keverjük össze, minden alkalommal, amikor új szintet hozunk létre, a kis lakattal blokkolhatjuk az elõtte lévõ szintet. Minthogy a sorok közt egy bizonyos távolság is van, 10 üres fotogramot hagyjunk ki közöttük: Episode IV a long time ago in a galaxy far, far away... Az "a long time ago" animációja a 10-es fotogramnál kezdõdik és a 40-esnél ér véget. Az "in a galaxy far" animációja a 20-as fotogramnál kezdõdik és az 50-esnél ér véget. A "far away..." animációja pedig a 30-as fotogramnál kezdõdik és a 60-asnál ér véget (131. Ábra).
2012.03.28.
9:29
Page 191
9. Fejezet
131. Ábra Nézzük meg az animációt (Ctrl+Enter), majd mentsük el munkánkat! (132. Ábra)
191
flashcs4_vs4_2.qxd
132. Ábra
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 192
Adobe Flash CS4 II.
2. Lecke Bitmap képek Flash-ben Az elsõ fejezetben már láthattuk, hogy a Flash grafikája mennyire eltér az olyan programok grafikáitól, mint például az Adobe Photoshop-ja. Egyrészrõl a görbék (matematikai egyenletek) és kitöltések használatával kisebb a dokumentumok mérete, másrészrõl viszont a bitmap grafika tagadhatatlan elõnye az, hogy valóságos képeket és fényképeket lehet megjeleníteni vele. Épp ezért nem is kétséges, hogy a Flash azon volt, hogy ezt a hátrányát behozza.
192
A bitmap-ek lehetõvé teszik a Flash eszközökkel készített képektõl eltérõ természetû képek filmbe történõ beszúrását, mint például fotókat és szkenner segítségével készült képeket. Freehand (a 7. verzió és ami utána jön) fájlok és a Fireworks PNG fájlok is közvetlenül importálhatóak Flash-be úgy, hogy közben a formátumok saját jellemzõi is megmaradnak. Mivel a bitmap képek nagyszámú információt tartalmaznak, túlzott használatuk megnöveli a teljes film letöltési idejét. Mindenesetre lehetõség van arra, hogy optimalizálásával csökkentsük a méretét. A mi esetünkben háttérnek és különleges effektek kitöltéséhez fogunk bitmap képeket felhasználni és azt is megnézzük, hogyan kell bitmap képet konvertálni.
2012.03.28.
9:29
Page 193
9. Fejezet Csak a következõ formátumok alkalmasak arra, hogy Flash környezetbe importáljuk õket: *.BMP, *.JPG, *.GIF, *.PNG. Ugyanúgy, ahogyan a hangoknál, a képeknél is a File>Import to Library (Könyvtárba importálás) parancssort használjuk, majd a megjelenõ párbeszédablakban megkeressük, kijelöljük és megnyitjuk a kívánt dokumentumot. Megjegyzés: Az importált GIF és PNG képek megtartják az átlátszóságra vonatkozó beállításaikat. Most pedig nyissuk meg az elõzõ lecke Starwars.fla fájlját és importáljuk a könyvtárba az Oktató Cd-n található Starwars.jpg képet (Oktató Cd>Flash_óraimunkák>Fejezet_9) (133. Ábra).
133. Ábra
193
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 194
Adobe Flash CS4 II.
3. Lecke Bitmap képek optimalizálása és animálása
194
A bitmap képek minõsége a felbontástól, vagyis az egy hüvelykre esõ pixelek számától függ. Minél magasabb a dpi érték, annál nagyobb a dokumentum mérete is. Ezenkívül azt is szem elõtt kell tartanunk, hogy a képernyõ nem tud nagyon magas felbontású képeket megjeleníteni. A GIF és a JPG képek tartalmazzák a dokumentum méretének csökkentéséhez szükséges tömörítést. Ha más formátumban van a kép, importálás után optimalizálhatjuk azt. A jobb egérgombbal kattintsunk starwars.fla kisfilmünk Könyvtárába importált Starwars.jpg képre, és a megjelenõ menüben válasszuk a Properties (Tulajdonság) pontot. A Bitmap tulajdonságok párbeszédablak tartalmazza a képre vonatkozó beállításokat. A Tompítás engedélyezése azt befolyásolja, hogy hogyan jelenik meg a kép a Flash authoring fájl-jában. A Tömörítés legördülõ listájában beállíthatjuk, hogy milyen típusú tömörítést használunk majd a film exportálásánál. Megjegyzés: Minden képnek saját beállítása lehet.
2012.03.28.
9:29
Page 195
9. Fejezet Ha a Frissítés gombra kattintunk, az új beállítások alapján kerül a kép frissítésre. Képünkhöz válasszuk a Foto tömörítést (JPEG), majd a Próba gombra kattintva a kép a módosítások után kis méretben fog megjelenni az ablakban. (134. Ábra)
134. Ábra Most, hogy optimalizáltuk a fotót, próbáljunk meg egy elõtûnéses animációt létrehozni. Mint ahogyan szöveget már sikeresen animáltunk, most azt szeretnénk, ha a starwars.jpg kép szép lassan jelenne meg a képernyõn. Nyissuk meg újból a starwars.fla fájlt és hozzunk létre egy új szintet, a ""Starwars"-t. Az 50-es fotogramhoz szúrjunk be egy kulcsfotogramot és húzzuk a Könyvtárból a stage-re a starwars.jpg képet.
195
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 196
Adobe Flash CS4 II. Minthogy ezt a képet is úgy szeretnénk animálni, hogy fokozatosan tûnjön elõ, és fokozatosan váljék egyre élesebbé, a Modify>Convert to Symbol (Kidolgozás>Szimbólummá konvertálás) (F8) paranccsal grafikus szimbólummá kell átalakítanunk. (135. Ábra)
135. Ábra
196
Vigyük alulra, a munkaterületen kívül, hogy olyan hatást keltsen mint az olyan kép, ami a színpadra fog kúszni. A 80-as fotogramhoz szúrjunk be egy kulcsfotogramot és csökkentsük 10%-ra a példányt (Modify>Transform>Scale and Rotate – Kidolgozás>Átalakítás>Átméretezés és Elforgatás) Vigyük a szöveget a képernyõ közepére és állítsunk be 10%-os homályosságot. A jobb egérgombbal kattintsunk a közbeesõ fotogramra és válasszuk a Create Motion Tween (Mozgás interpoláció létrehozása) pontot.
2012.03.28.
9:29
Page 197
9. Fejezet Ezzel készen is vagyunk; nyomjuk meg az Enter-t és nézzük meg az animációt. (Ctrl+Enter a film levetítése – 136. Ábra)
136. Ábra
197
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 198
Adobe Flash CS4 II.
4. Lecke Bitmap háttérmintaként történõ felhasználása Az animáció kész van, de valami még hiányzik: az eredeti filmben csillagok is voltak, ugye? Talán feltûnt már, hogy elég monoton a munkánk háttere. Valamilyen képet kellene felhasználni, amivel a weboldal szerkesztõk által is igen kedvelt texture effektet hoznánk létre. Szerencsére erre is gondoltak a Flash megalkotói; az egyetlen probléma csupán az, hogy a hátteret nem lehet közvetlenül kiszínezni. Elõbb egy négyszöget kell rajzolni és azt kitölteni a megfelelõ mintázattal (texture).
198
A képet a terv fõ jelenetébe kell beszúrnunk. Természetesen meglehetõsen kisméretû mintázatot (texture) kell használnunk, olyat, aminek a mérete nem haladja meg a 120x120-as pixelt, ellenkezõ esetben ugyanis nagyon "súlyos" lesz a kész kisfilm. Nyissátok meg az eddig elkészített filmet, szúrjunk be egy új szintet, nevezzük el "Univerzum"-nak és vigyük a szintlista aljára. Rajzoljunk a szintre egy körvonal nélküli négyszöget. (137. Ábra)
2012.03.28.
9:29
Page 199
9. Fejezet
137. Ábra Az Oktató CD-n található univerzum.jpg fájlt (Oktató Cd>Flash_óraimunkák>Fejezet_9) importáljuk a könyvtárba és optimalizáljuk úgy, ahogyan azt az elõzõ leckében megtanultuk. Húzzuk le a Stage-rõl, vagyis a fõ jelentbõl, hogy láthatóvá váljék a háttérben lévõ négyszög is. Ha az imént beszúrt képen a Csepegtetõ eszközt alkalmazzuk, kiválaszthatunk a fényképbõl egy színt (persze nekünk most nincs sok választási lehetõségünk!). Ahhoz, hogy a bitmap-et le tudjuk másolni és háttérmintaként fel tudjuk használni, szét kell "robbantanunk" vagyis alapelemeire kell osztanunk. Ezt a Modify>Break Apart (Kidolgozás>Megosztás) parancscsal tehetjük meg. Ezután jelöljük ki a Csepegtetõ eszközt, majd kattintsunk a bitmap-re (univerzum képre).
199
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 200
Adobe Flash CS4 II. A Csepegtetõ eszköz kitöltésnek állítja be a bitmap-et és aktiválja a Festékesvödör eszközt (138. Ábra).
138. Ábra Most már elég csak az elõbb rajzolt négyszög belsejébe kattintani és a bitmap-el, mint kitöltéssel "kiszínezni" (139. Ábra). És már készen is vagyunk!
200
A bitmap-el kitöltött területen ezután alkalmazhatjuk a Free Transform Tool (Kitöltés átalakítása) eszközt, amivel elforgathatjuk, megdönthetjük vagy átméretezhetjük a texture bitmap-et (140. Ábra).
2012.03.28.
9:29
Page 201
9. Fejezet
139. Ábra
140. Ábra A színpad jobb felsõ részében található képet akár el is dobhatjuk, de arra ügyeljünk, hogy a Könyvtárban lévõ képet el ne dobjuk, mert akkor teljesen elvész a texture effekt.
201
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 202
Adobe Flash CS4 II.
5. Lecke Bitmap felosztása A bitmap felosztásával a kép pixeljei egymástól elkülönülve diszkrét területekre kerülnek, melyeket külön-külön is kijelölhetünk és módosíthatunk. Felosztás után a bitmap-et használhatjuk kitöltésnek (mint ahogy azt az elõzõ leckében láttuk) de a Flash színezõ- és rajzeszközeivel módosíthatjuk is. A Lasso Tool (Lasszó) eszközzel, a Magic Wand (Varázspálca) modifikátorral együtt használva egy felosztott bitmap kijelölt területeinek kitöltését tudjuk módosítani. Nyissunk meg Flash-ben egy új dokumentumot és mentsük el torony.fla néven.
202
Az Oktató CD lévõ torony_jpg képet (Oktató Cd>Flash_óraimunkák>Fejezet_9) pedig importáljuk a stage-re a File>Importálás parancssoron keresztül. (141. Ábra)
2012.03.28.
9:29
Page 203
9. Fejezet
141. Ábra Daraboljuk fel a képet a Modify>Break Apart (Kidolgozás>Megosztás) paranccsal és jelöljük ki a Lasszó eszközt. Kattintsunk a Magic Wand (Varázspálca) modifikátorra és a Magic Wand Settings (Varázspálca beállításai) modifikátorra. A Magic Wand Settings (Varázspálca beállításai) ablakban (142. Ábra) állítsátok be a következõ opciókat: A Threshold-hoz (Küszöb) írjunk be egy értéket 1-200-ig (a mi esetünkben próbáljuk ki a 30-at). Ezzel a szín hasonlóságának fokát határozzuk meg a szomszédos pixelek viszonylatában. A nagyobb szám szélesebb színválasztéknak felel meg.
203
flashcs4_vs4_2.qxd
142. Ábra
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 204
Adobe Flash CS4 II. Ha 0-t írunk be, az elsõ kijelölt pixellel tökéletesen megegyezõ színû pixelek kerülnek kiválasztásra. A Smoothing (Tompítás) a legördülõ menüjében azt határozhatjuk meg, hogy milyen mértékben tompítsuk a bitmap széleit.
204
Terület kijelöléséhez kattintsunk a bitmap-en például az égre. Kattintsunk tovább, ezzel további elemeket adunk hozzá a kijelöléshez. Most már ki is törölhetjük a területet, vagyis technikánkkal törölni tudjuk egy bitmap kép szegélyeit. Jelöljük ki a legmegfelelõbb kitöltést a bitmap kijelölt területének kitöltéséhez. Válasszuk a Színtartály eszközt és kattintsunk a kijelölés bármely pontjára. Ezzel el is végeztük a kitöltést. Próbáljuk meg importálni a korábban használt mintázatot. Importáljátok az univerzum.jpg fájlt és a derûs ég helyére illesszük be az éjszakai égboltot.
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 205
10. FEJEZET
2012.03.28.
9:29
Page 207
10. Fejezet
1. Lecke Bitmap kép vektoros objektummá alakítása Az Adobe Flash segítségével bármilyen bitmap képet vektoros képpé konvertálhatunk. A bitmap megjelenítés akkor kötelezõ, amikor fényképeken dolgozunk, viszont elég használhatatlan, amikor kevés színt vagy árnyalatokat tartalmazó rajzokkal dolgozunk. A vektoros megjelenítés közepes összetettségû képekhez, vagyis illusztrációkhoz és animációkhoz kiváló. A Modify>Trace Bitmap (Bitmap átírása) paranccsal bitmap-et konvertálunk vektorgrafikává, módosítható diszkrét színterületekkel. Ezt a parancsot kell használnunk, ha úgy akarunk a képekkel dolgozni, mintha vektorgrafikák lennének, vagy ha csökkenteni akarjuk a fájl méretét. Ha bitmap-et vektorgrafikába konvertálunk, a grafikus ábrázolás már nem fog a Könyvtár ablakban található bitmap szimbólumához kapcsolódni.
207
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 208
Adobe Flash CS4 II. Megjegyzés Ha az importált bitmap összetett formákat és sok színt tartalmaz, a konvertálás révén kapott vektorgrafikai fájl lehet, hogy nagyobb méretû lesz, mint az eredeti bitmap fájl. Éppen ezért érdemes a Control>Test Scene (Ellenõrzés> Jelenet próba) paranccsal az átírás elõtt és után végezhetünk egy összehasonlítást. A Control>Test Scene majd a View>Bandwidth Profiler (Megjelenítés>Sávszélesség profil) paranccsal pedig megtekinthetjük a dokumentum átírás elõtti és utáni méretét. A Trace Bitmap (Bitmap átírása) ablakban próbáljunk ki többféle beállítást, amíg meg nem találjuk azt a beállítási módot, amivel megfelelõ fájlméret mellett jó minõséget is kapunk. Nyissunk meg egy új Flash dokumentumot és mentsük el torony2.fla név alatt. A File>Importálás paranccsal importáljuk az Oktató Cd> Flash_óraimunkák>Fejezet_10>torony_jpg.jpg képet a stage-re.
208
Az aktuális jelenetben jelöljük ki a bitmap-et és válasszuk a Modify>Trace Bitmap (Bitmap átírása) parancsot. Megjegyzés Bitmap átírás csak olyan képeken lehetséges, melyek nem osztottak. A Color Threshold (Színküszöb): írjunk be majd egy értéket 1tõl 500-ig.
2012.03.28.
9:29
Page 209
10. Fejezet Két pixel találkozásakor ha az RGB színértékeiben a különbség kisebb, mint a küszöb, a két pixelt azonos színûnek tekintjük. A küszöb értékének növelése a színek csökkenésének felel meg. A Minimum Area (Minimum terület): írjunk be majd egy számot 1 és 1000 között. Ezzel a szín pixelhez adásakor tekintetbeveendõ környezõ pixelszámot állítjuk be. A Curve Fit (Görbe alkalmazása): a legördülõ menüben választjuk ki azt az opciót, ami meghatározza, hogy milyen fokú legyen a megrajzolt körvonalak tompítása. A Corner Threshold (Szögküszöb) legördülõ menüjében kiválasztott opció azt határozza meg, hogy a sarkok élesek maradjanak, vagy lekerekítettek legyenek. Olyan vektorgrafika létrehozásához, ami leginkább hasonlít az eredeti bitmap-hez, a következõ értékeket írjuk be: Színküszöb: 10 Minimum terület: 1 pixel Görbe alkalmazása: Pixel Szögküszöb: Sok szög (143. Ábra)
143. Ábra Mindenesetre érdemes néhány próbát tenni a végleges terv kialakítása elõtt. Most nézzük meg a Control>Test Scene majd a View>Bandwidth Profiler (Megjelenítés>Sávszélesség profil) paranccsal a dokumentum átírás utáni méretét is!
209
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 210
Adobe Flash CS4 II.
2. Lecke Videoklip importálása: a jelenet elkészítése Már régen úgy beszélnek a videóról, mint a Web, közeli határáról. A szélessávú csatlakozás sajnos még mindig luxusnak számít, de ára folyamatosan csökken. Éppen ezért sokan úgy gondolják, hogy a videó felesleges sávpazarlás. A Flash CS4 egy tökéletes megoldást nyújt, ami biztosan megváltoztatja az így vélekedõk véleményét.
210
A Flash CS4 képes hihetetlenül kicsi méretet biztosítani videoklipek számára és az ehhez szükséges lejátszó is kb. 1Mb nagyságú. A többi webes videolejátszó – mint a QuickTime, Real Player és a Windows Media Player – ennél sokkal méretesebb. A Flash CS4 új verziója lehetõvé teszi számunkra azt, hogy hatékonyan illesszük az ismert videoformátumok nagy részét kisfilmbe. A filmeket ugyanúgy összedolgozhatjuk, átméretezhetjük, torzíthatjuk, elforgathatjuk és maszkolhatjuk, mint bármilyen más Flash elemet, vagypedig, mint ahogyan azt majd látjuk, az action script révén interaktívvá is tehetjük õket. Kezdésképpen indítsuk el a Flash-t és nyissuk meg az Oktató Cd>Flash_óraimunkák>Fejezet_10>video_lejátszó fájlt.
2012.03.28.
9:29
Page 211
10. Fejezet A Stage-en már ott van a "videolejátszónk" felületét képezõ mobiltelefon. (144. Ábra)
144. Ábra A lejátszót meg is rajzolhatjuk, vagy ha akarjuk, használhatjuk a saját mobilunk fényképét is, persze miután az elõzõ leckékben megtanult módon már vektorossá alakítottuk át. Ha mi rajzoljuk meg, figyeljünk arra, hogy a videoklipet tartalmazó területnek legyen egy bizonyos fokú dõlése. Ennek azért van jelentõsége, mert majd magát a videoklipet is meg fogjuk dönteni. Jelöljük ki a kijelzõt alakító négyszöget (ehhez át kell lépnünk a telefon szimbólumra – ezt a telefonra való dupla kattintással érhetjük el) másoljuk le. Most már elmenthetjük és bezárhatjuk a video_lejátszó fájlt. Menjük a File menübe és új Flash dokumentum megnyitásához kattintsunk az Új pontra. Illesszük be a négyszöget és vigyük a képernyõ bal felsõ sarkába (145. Ábra).
211
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 212
Adobe Flash CS4 II.
145. Ábra
212
Nevezzük át a szintet "Display"-re ("Kijelzõ"). Ez a maszk fogja az importált videóklipet tartalmazni. Mentsük el ezt is: video.fla néven (Oktató Flash_óraimunkák>Fejezet_10>video.fla)
Cd>
2012.03.28.
9:29
Page 213
10. Fejezet
3. Lecke Animált GIF-ek használata Néha az animált GIF-ek is jól jönnek kisfilm "gazdagítására". Azért javasoljuk GIF importálását és filmes klipen belüli felhasználását, mert ezekkel megtartható az animáció függetlensége. Nyissuk meg a video_lejátszó.fla fájlt (Oktató Cd> Flash_óraimunkák>Fejezet_10>video_lejátszó_10F_2L) és szúrjunk be egy új szimbólumot, a "video web"-et. A Type – Típus-nál a Filmklip pontot jelöljük ki (146. Ábra).
146. Ábra Késõbb még lesz rá alkalmunk, hogy gyakoroljuk ennek a típusú szimbólumnak a használatát. A File>Importálás parancson keresztül importáljuk az Oktató Cd-rõl video_web.gif fájlt (Oktató Cd> Flash_óraimunkák>Fejezet_10>video_web.gif).
213
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 214
Adobe Flash CS4 II. Animált GIF importálásakor minden importált kép egy fotogramot fog az Idõegyenesen elfoglalni (147. Ábra). A GIF animáció lejátszási sebessége miatt a Flash külön pakolja az animáció kulcsfotogramjait és az álló fotogramokat.
147. Ábra
214
Megjegyzés A Flash minden, animációt alkotó képet a Könyvtárba helyez. Most menjünk vissza a Jelenet1-re és adjuk hozzá a "video web" logót. Jelöljük ki a "felület" szint elsõ fotogramját és húzzuk a logót a könyvtárból a munkaterületre. Helyezzük a bal felsõ sarokba és a Modify>Transform>Scale and Rotate (Átalakítás) ablakban csökkentsük méretét 50%-kal. (148. Ábra)
2012.03.28.
9:29
Page 215
10. Fejezet
148. Ábra A Properties (Tulajdonságok) panelon változtassuk meg a színét is úgy, hogy az a felület színeihez igazodjon (149. Ábra).
149. Ábra Most már elindíthatjuk az elkészült videót (Ctrl+Enter). (150. Ábra)
215
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 216
Adobe Flash CS4 II.
150. Ábra
216
Késõbb majd azt is látni fogjuk, hogy *.SWF és *.MOV filmeket is importálni lehet, de ezeknél mérlegelnünk kell a méreteket. A Flash filozófiája szerint az ismétlések nem befolyásolják a dokumentumok méretét. Egy animáció akkor is futhat, ha a fõ filmet közben leállítottuk.
2012.03.28.
9:29
Page 217
10. Fejezet
4. Lecke A Flash Video formátum Nyissuk meg ismét a video.fla (Oktató Cd> Flash_óraimunkák>Fejezet_10>video_10F_4L) fájlt és a Könyvtárból húzzuk a videoklipet a Stage-re. A stage-be beszúrt videoklipek hasonló Idõegyenessel rendelkeznek, mint más elem. A felhasznált fotogramok száma megegyezik a videó másodpercben mért idõtartamával szorozva a Flash dokumentum fotogram-sûrûségével. Ha a videoklip nagyobb kiterjedésû mint 60 fotogram, ami az Idõegyenes kezdeti alaphossza, egy üzenetpanel jelenik meg, ami arra figyelmeztet minket, hogy meg kell hosszabbítanunk az Idõegyenest. Az importált videoklip a Flash kisfilm könyvtárában, mint Csatolt videó, vagy Beillesztett videó jelenik meg (151. Ábra). Ugyanis kétféle mód létezik videoklip Flash filmbe történõ beillesztésére: vagy a filmben magában helyezzük el a videót, vagypedig linket készítünk a filmhez.
217
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 218
Adobe Flash CS4 II.
151. Ábra
218
Ha QuickTime formátumban, Mov kiterjesztéssel importálunk videoklipet (próbáljuk meg importálni például az Oktató Cd> Flash_óraimunkák>Fejezet_10>test1.mov fájlt) a program rákérdez, hogy Flash formátumban kívánjuk-e beilleszteni a videót, vagy inkább linket készítünk. (152. Ábra)
152. Ábra
2012.03.28.
9:29
Page 219
10. Fejezet A videoklip importálásának irányított eljárása csak akkor jeleníti meg e két opciót, ha a QuickTime fájlt Mov formátumban importáljuk, ugyanis egyedül ezekbõl lehet hivatkozásokat elõállítani. De mi most térjünk vissza a Stage-en lévõ videoklipünkhöz és az Transform (Átalakítás) segítségével állítsuk be a dõlés mértékét, úgy hogy a videoklipet és a maszk, vagyis a kijelzõ alakjához igazítsuk. Futtassuk a végére az Idõegyenest és a Display (képernyõ) szintjén nyomjuk meg az F5-ös billentyût. Ezzel az Idõegyenest a videoklip hosszúságára növeltük. (153. Ábra)
153. Ábra A jobb egérgombbal kattintsunk a képernyõ szintjére és a megjelenõ menübõl válasszuk a Maszk pontot. Ha még nem is illesztettük be a felületbe, teszteljük le videoklippet, vagyis a File menüben válasszuk az Exportálás pontot és hívjuk be a video.swf fájlt.
219
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 220
Adobe Flash CS4 II. Nézzük meg az Oktató Cd-n található maszkolt_animáció.fla és a ferde_interpoláció.fla fájl-okat. Ebbõl megérthetjük, hogy videokliphez ugyanúgy adhatunk hozzá kulcsfotogramokat és ugyanúgy animálhatjuk õket, mint bármelyik más objektumot. A mi példánkban megdöntjük a videoklipet (154. Ábra), de létezik még sok más olyan döntési effekt, amivel érdekes eredményeket érhetünk el.
220
154. Ábra Elkészíthetünk egy Szombat esti láz-ba illõ táncparkettet is, ahol videoklip "borítja"a parkettet. Az, hogy videóklipet Flash-be illeszthetünk és a hozzá kapcsolódó Plug-in széleskörû elterjedésének lehetõsége kétségkívül megnyitja a kapukat az ezzel a technológiával készített kis videoklipek elterjedése elõtt és új életet lehel néhány felkapottabb videoformátumba is.
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 221
11. FEJEZET
2012.03.28.
9:29
Page 223
11. Fejezet
1. Lecke Filmklip Most már feltehetjük a kérdést magunknak: mi történne, ha filmünkben többször, több helyen is egy bizonyos típusú animációt szeretnénk alkalmazni? Minden alkalommal lépésrõl lépésre újra kellene készítenünk? Hasonlóan ahhoz, ahogyan az objektumokkal is eljártunk (szimbólummá alakítottuk és példányait a filmben felhasználtuk), lehetõségünk van arra, hogy egy egész animációt szimbólumként mentsünk el és aztán másolataikat filmben felhasználjuk (melyeket ez esetben is "példányoknak" hívunk). A különbség az animáció és az objektum közt az, hogy meglévõ animációt nem lehet szimbólummá konvertálni, hanem elõbb egy üres szimbólumot kell létrehozni és aztán beszúrni oda az animációt. Nézzük, hogyan is kell ezt csinálni... Nyissuk meg ismét Starwars.fla kisfilmünk legutolsó változatát (Oktató Cd>Flash_óraimunkák>Fejezet_9>Starwars_9F_4L) és legyünk õszinték: a kilencedik fejezetben alkalmazott megoldás, amellyel kisfilmünk hátterét beállítottuk, minden bizonnyal nagyon gyors, fõleg ha a háttérmintázat - mint a mi esetünkbenmég a rendelkezésünkre is áll, de egészen biztosan nem a legmeggyõzõbb, ha azt nézzük, hogy nem érzékelteti az ûrben lévõ mélységet.
223
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 224
Adobe Flash CS4 II. Most nézzük meg azt, hogyan javíthatnánk fel animációnkat az "ûr-effekt" alkalmazásával. Mindenekelõtt hozzunk létre egy grafikus szimbólumot és nevezzük el "stars" ("csillagok")-nak. Az Ecset eszközzel rajzoljunk bele pici pontokat, vagyis csillagokat. A pontok mérete és színük tónusa legyen eltérõ, valamint elhelyezkedésük legyen szétszórt (155. Ábra).
224
155. Ábra Megjegyzés Bizonyosodjunk meg afelõl, hogy elegendõ számú pontot szúrtunk-e be, ami majd az egész movie-t befedi, amikor a fõ jelenetbe illesztjük. Most hozzunk létre egy filmklipet (movie clip) és nevezzük el "star tween"-nek (156. Ábra). Ebben lesz a növekvõ csillagok animációja.
2012.03.28.
9:29
Page 225
11. Fejezet
156. Ábra Menjünk az 1-es fotogramra és illesszük be a csillagok rajzát, az imént létrehozott "stars" szimbólumot. A 30-as fotogramhoz szúrjunk be egy kulcsfotogramot. Menjünk vissza az 1-es fotogramra és méretezzük át a csillagokat úgy, hogy egészen kicsik legyenek . Az 1-es és a 30-as fotogram közé szúrjunk be egy mozgás interpolációt és bizonyosodjunk meg róla, hogy az Átméretezés opció ki van jelölve. Ahhoz, hogy megnézzük, helyesen mûködik-e, nem elég az Enter-t megnyomnunk, hanem meg kell nyitnunk a Control (Ellenõrzés) menüt és ott a Test Scene (Lejátszás) pontra kattintanunk, vagypedig a Ctrl+Alt+Enter billentyûkombinációt lenyomnunk. Ha megnéztük a filmet, elég egyszerûen csak bezárnunk az ablakot.
225
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 226
Adobe Flash CS4 II.
2. Lecke Az egymásba ágyazás elve Már ennek a fejezetnek az elején tisztáztuk, hogy a filmklipek valójában szimbólumokban elmentett animációk, melyek ily módon többször is felhasználhatóak a fõ jelenetben, vagy akár egy másik filmklipben is. Most pedig nézzük meg, mi hogyan tudjuk tervünkben az egymásba ágyazás elvét felhasználni. Egy olyan filmklipet fogunk létrehozni, amiben a száguldó csillagok effektjét láthatjuk. Szúrjunk be egy új moziklip szimbólumot és nevezzük el "stars flying"-nak.
226
Szúrjuk be mi is a 157. Ábrán látható összes szintet. Az 1-es szint elsõ frame-jébe szúrjuk be az elõzõ leckében készített "star tween" filmklipet, igazítsuk a nézõkéhez és másoljuk le az egészet. Most minden szintre egymástól 5 fotogram távolságra (158. Ábra) használjuk a Pozícióba illesztés funkciót, ezzel azt illesztjük be, amit lemásoltunk.
2012.03.28.
9:29
Page 227
11. Fejezet
157. Ábra
158. Ábra Ha mindezzel megvagyunk, a 7-es szint 30-as pozíciójába illesszük be a csillagokat (stars).
227
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 228
Adobe Flash CS4 II. Megjegyzés: A Pozícióba illesztés parancs használata elõtt bizonyosodjunk meg arról, hogy kijelöltük-e a szintet és beillesztettük-e a kulcsfotogramot, mert ha nem, az egész a jelenet egy másik helyre fog kerülni és késõbb nehéz dolgunk lesz, ha ki akarjuk majd jelölni.
228
Teszteljük le az új filmklipet.
2012.03.28.
9:29
Page 229
11. Fejezet
3. Lecke Az Action Script Az Action Script a Flash-be épített programozási nyelv. Kétféleképpen használhatjuk: vagy egy fotogramban, ami azt jelenti, hogy amikor a visszajátszás (play back) feje arra a pontra ér, az utasítás végrehajttatik, vagy pedig nyomógomb-ba ágyazódik, ami pedig azt jelenti, hogy az utasítás csak akkor kerül végrehajtásra, ha a felhasználó a gombra kattint. Az elsõ esetben a kívánt fotogramba kell kulcsfotogramot (keyframe) beszúrni (ehhez az F6-os billentyût kell megnyomnunk). Menjünk a starwars.fla fájl "Stars flying" filmklipjébe (Oktató Cd>Flash_óraimunkák>Fejezet_11>Starwars.fla_11F_2L) A 35-ös pozícióba minden szinten szúrjunk be egy üres fotogramot. (159. Ábra) A 7-es szinten szúrjunk be egy üres kulcsfotogramot a 35-ös pozícióba és hagyjuk, hogy az Action Sript révén a film mindannyiszor visszatérjen a 20-as fotogramra, amikor a 35-ös fotogramhoz ér és az animáció újra lejátszódjék:
229
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 230
Adobe Flash CS4 II.
159. Ábra
230
Jelöljük ki a 35-ös fotogramot, nyissuk ki az Actions Frame ablakot. Itt a + jelet ábrázoló ikon használatával, megjelenik a Tevékenység kategóriák menüje. (160. Ábra)
160. Ábra
2012.03.28.
9:29
Page 231
11. Fejezet Ekkor beszúrhatjuk a kívánt script-et, ami akkor kerül alkalmazásra, ha a film a 35-ös fotogramhoz ér. Az Actions>Timeline Controll kategóriából válasszuk a Go to and Play funkciót és állítsuk be a 20-as fotogramot mint érkezési, majd pedig indulási fotogramot (161. - 162. Ábra).
161. Ábra
231
flashcs4_vs4_2.qxd
162. Ábra
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 232
Adobe Flash CS4 II. Nyilvánvaló, hogy az ilyen típusú script-ek nem interaktívak, céljuk az, hogy a film menetét módosítsák, eltekintve a felhasználóval megvalósuló interaktivitástól. Most menjünk a "small stars" ("kis csillagok") nevû szintre és 2 vagy 3 alkalommal tegyük a csillagok alapgrafikáját különbözõ pozíciókba, hogy minél valósághûbb legyen a hatás. Most minden számozott szinten jelöljük ki azt a fotogramot, amiben a csillagok vannak és forgassuk el õket egy kicsit. Ezt úgy csináljuk, hogy egy szinten se legyenek a csillagok ugyanúgy elhelyezve. Próbáljuk meg lejátszani a filmklipet. Most, hogy az "ûr effektünk" is megvan, visszatérhetünk a fõ jelenetbe, törölhetjük az "Univerzum" szintbe beszúrt fotogramokat és helyettesíthetjük õket az imént készített filmklip könyvtárából áthúzott fotogramokkal. Ha készen vagyunk akkor játsszuk le az egészet.
232
Ha elégedettek vagyunk az eredménnyel mentsük el, ha nem javítsunk még rajta.
2012.03.28.
9:29
Page 233
11. Fejezet
4. Lecke A filmzene Milyen egy mozgó grafika hang nélkül? Léteznek olyan kisfilmek, melyekhez nem kell hang: egy felület letöltése esetén elég zavaró lenne, ha minden letöltéskor valamilyen hang is járulna hozzá, vagypedig dobpergés szólna, amikor a felhasználó éppen egy opció kiválasztására koncentrál. Mindenesetre a hagyományos mozgó grafika design-jában (reklámfilmek, filmfõcímek) a hang fantasztikus dolog. Az elõzõ fejezetekben már láttuk, hogyan kell Flash projectbe hangot illeszteni, de mi csak azokba a kulcsfotogramokba szúrtuk be õket, amelyikben le is akartuk játszani õket. Ez alkalommal viszont egy valóságos kis filmzenét szeretnénk animációnkba beilleszteni. A hangsorok, eltérõen az egyes hang-effektektõl, méreteik miatt fájó pontjai lehetnek egy animációnak. Mint azt tudjuk, hangot kétféleképpen importálhatunk: úgy mint Esemény szinkront, vagy mint Stream-et (folyamot). Az elsõ esetben akkor "töltõdik le" a hang, amikor azt a program kéri, s fõként rövid hangok esetén.
233
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 234
Adobe Flash CS4 II. A második esetben viszont a program elõre gondoskodik a hang letöltésérõl, még azelõtt, mielõtt igazából szükség lenne rá, ezzel elkerülhetõ a lejátszás alatti ártalmas lelassulás. Ez hangnyomok esetén nagyon hasznos. Importáljuk az Oktató Cd-n található starwars.wav hangot (Oktató Cd>Flash_óraimunkák>Fejezet_11) Mint láttuk, kezdetben minden hang Esemény módban van beállítva. Most nézzük meg azt, hogyan módosíthatjuk õket Folyammá. Szúrjunk be egy új szintet és nevezzük el "filmzené"-nek, majd ide, az elsõ fotogramba helyezzük el az imént importált hangot.
234
A Properties (Tulajdonságok) panelon található Sync – a hangra vonatkozó részben konvertáljuk az esemény típusú hangot Stream típusúvá (163. Ábra).
163. Ábra
2012.03.28.
9:29
Page 235
11. Fejezet A Properties (Tulajdonságok) panel kiírja számunkra (163. Ábra), hogy hangsorunk 16 másodperces, de ha így hagyjuk a filmet, ahogy van, egészen biztosan félbeszakad. Hidaljuk át ezt a problémát úgy, hogy a "Starwars" szinten Ctrl billentyût lenyomva húzzuk az utolsó kulcsfotogramot egészen a 193-as fotogramig s ezzel meghosszabbítjuk a kép mozgás interpolációját. Az animáció most már tényleg 16 másodpercig fog tartani (164. Ábra).
164. Ábra A "Filmzene" szint 80-as fotogramjába is szúrjunk be egy üres kulcsfotogramot és ugyanúgy, ahogyan azt az elõbb tettük, húzzuk ezt is a 193-as fotogramig. Most, hogy ezzel készen vagyunk, nézzük meg, milyen lett a módosított animáció!
235
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 236
Adobe Flash CS4 II.
5. Lecke Hang tömörítés A hangok szorosan kötõdnek a Flash kisfilmekhez, de ugyanúgy, mint a bitmap képek, ezek is méretes fájlokat képesek létrehozni. Online reklám-környezetben a minõség és a fájl méreteinek mérlegelése mellett szinte minden multimédiás erõforrást optimalizálni kell. A Flash kiváló tömörítõ funkcióval bír, de néha nem kevés idõt vesz igénybe használatuk, hogy a legjobb összhatást érhessük el vele.
236
Flash-ben kétféleképpen tömöríthetünk hangot. Mindenekelõtt a tömörítés alapértelmezett értékeit állíthatjuk be a File>Publish Settings (Közzététel beállításai) paranccsal, ami a film hangjait tömöríti (165. ábra). Ez egyetlen hang, vagy több olyan hang tömörítéséhez jó, melyek ugyanabból a forrásból származnak.
2012.03.28.
9:29
Page 237
11. Fejezet
165. Ábra Gyakorta hallhatjuk azt a jó tanácsot, hogy exportálás közben kerüljük a hangok beállításának használatát, ugyanis ez a kisfilm összes hangjára ugyanazt az általános beállítást hozná létre. Érdemesebb az egyes elemeket külön-külön optimalizálnunk, így jobban az ellenõrzésünk alatt tarthatjuk õket. Ez ahhoz hasonló, mint amikor képeket hozunk létre webhelyhez: tartalmunk szerint más és más lesz az optimalizálásuk. GIF formátumot használunk a címekhez és nyomógombokhoz, míg JPG tömörítést a leíró képekhez. Tehát az egyes fájlokat külön-külön is optimalizálhatjuk. Ehhez kattintsunk kétszer a Könyvtárban lévõ hangra, és megjelenik a Hang tulajdonságok párbeszédablak. Vagypedig kattintsunk a jobb egérgombbal a hangra és válasszuk a Properties (Tulajdonságok) pontot.
237
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 238
Adobe Flash CS4 II. Vagy miután kijelöltük a hangot, a Könyvtár alsó szélén kattintsunk a Properties (Tulajdonságok) szimbólumára (166. Ábra).
166. Ábra
238
A Hang tulajdonságok párbeszédablakban (167. Ábra) megfigyelhetjük a hanghullám képe mellett lévõ aktuális tömörítési beállításokat és a fájl méreteit.
167. Ábra
2012.03.28.
9:29
Page 239
11. Fejezet A hangminõség leellenõrzéséhez kattintsunk a Test (Próba) gombra. Az Compression (Tömörítés) legördülõ menüjébõl jelöljük aki az MP3-at. Az MP3-as tömörítés zenéhez és a tartományon kívüli hangokhoz kiváló, viszont csak a Flash4 lejátszójával kompatibilis. Az ADPCM-et rövid hangeffektekhez tartanánk fenn, vagypedig olyan zenéhez, amelyiknél a fájlnak Flash3 lejátszóval kell kompatibilisnek lennie. Ha az ADPCM-et választottuk, aktiváljuk a Convert Stereo to Mono (Sztereo mono-ba konvertálása) jelölõnégyzetet, mert a monoba konvertálás csökkenti a fájl méretét. Kattintsunk a Test (Próba) gombra és hallgassuk meg, hogy az új tömörítési beállításokkal is elfogadható-e a hang. Kipróbálhatunk több tömörítési beállítást is, egészen addig, amíg meg nem találjuk azt a formát, ami a megfelelõ fájlméret mellett elfogadható hangminõséget is tud nyújtani. A végén kattintsunk az OK-ra. És még egy apró hasznos tanács: a Properties (Tulajdonságok) panelen rendeljünk filmzenénkhez Elhalkulás a végén effektet, ami révén zenénk az animáció végén "szertefoszlik".
239
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 241
12. FEJEZET
2012.03.28.
9:29
Page 243
12. Fejezet
1. Lecke Author Time megosztott könyvtárak Most már ügyesen tudjuk kezelni mind az alap- mind pedig a speciális animációs rajzeszközöket. Most azt fogjuk megnézni, hogyan kell összetettebb feladatokat megoldani és hogy energiánkat hogyan tudjuk a legmegfelelõbben optimalizálni. A forrásfájl szintjén (kiterjesztés.fla) egy kisfilm létrehozása közben lehetõségünk van elõzõleg más filmekben létrehozott szimbólumok újbóli felhasználására. Hozzunk létre egy üres filmet és mentsük el Felhasználó.fla néven. Nyissuk meg az Oktató CD-n található Archívum.fla fájlt (Oktató Cd>Flash_óraimunkák>Fejezet_12) és a File>Save As (Mentés másként) paranccsal mentsük a helyi merevlemezre. Aktiváljuk az Archívum.fla dokumentumot és az F11-es gombbal nyissuk meg a Könyvtár panelt. Jelöljük ki a "Macchia1", "Macchia2" és a "Momos" grafikus szimbólumokat, aktiváljuk az Felhasználó.fla dokumentumot és húzzuk a kijelölést a Stage-re. A három objektum automatikusan megjelenik mind a Stage-en, mind pedig a Könyvtár-ban (168. Ábra).
243
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 244
Adobe Flash CS4 II.
168. Ábra
244
Menjünk vissza az Archívum.fla fájl-hoz és változtassuk meg az objektumok színét és formáját. Kattintsunk kétszer a "Macchia1" grafikus szimbólum ikonjára, a stage-en változtassuk meg a kitöltõszínt és mentsük el a dokumentumot (169. Ábra).
169. Ábra
2012.03.28.
9:29
Page 245
12. Fejezet Ha megnyitjuk az Felhasználó.fla fájlt, azt láthatjuk, hogy a szimbólum nem aktualizálódott. Ez akkor lehet számunkra hasznos, ha egy már korábban létrehozott szimbólumot akarunk felhasználni, de az eredeti dokumentumot nem akarjuk módosítani. Egy másik módszer is létezik ugyanerre, anélkül, hogy meg kellene nyitnunk az Archívum.fla fájlt. Használjuk a File>Import>Open External Library (File>Külsõ könyvtár megnyitása) parancsokat, végezzük el a kijelölést és húzzuk a stage-re. Készítsük el azt a dokumentumot, amit majd a következõ leckében fogunk felhasználni. Hozzunk létre egy új Flash dokumentumot, a Properties (Tulajdonságok) panelen a Stage méretét állítsuk be 300x200 pixelre, a háttérszínt pedig sötétkékre. Mentsük el myorbit.fla néven a fájlt. Feltételezzük, hogy egyáltalán nincs kedvünk új gömböt rajzolni és úgy kiszínezni, hogy az háromdimenziós hatású legyen. Ezt a problémát könnyen megoldhatjuk a File>Import>Open External Library (File>Külsõ könyvtár megnyitása) paranccsal. Válasszuk ki az elõzõ leckékben felhasznált gömb forrásfájlját. Azt látjuk, hogy az elõzõleg használt Könyvtár nyílik meg. Húzzuk a gömb szimbólumát a stage-re és azt látjuk, hogy ez máris az új filmünk Könyvtárában is megjelenik. Készen is vagyunk!
245
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 246
Adobe Flash CS4 II. Változtassuk meg a gömb kitöltõszínt úgy, hogy az elõhívott könyvtárt változatlanul hagyjuk. (170. Ábra)
246
170. Ábra
2012.03.28.
9:29
Page 247
12. Fejezet
2. Lecke Frissítési módszerek Az elõzõ leckében láthattuk, hogy a megosztott szimbólumok nem aktualizálódnak automatikusan, de ha mégis szükségünk lenne rá, hogy ezt megtegyük, két mód van rá: Az elsõ szerint nyissuk meg az elõzõ leckében elkészített Felhasználó.fla fájlt (Oktató Cd>Flash_óraimunkák> Fejezet_12>Felhasználó_12F_1L). F11-el hívjuk elõ a szimbólumokat tartalmazó Könyvtárat, majd a jobb egérgombbal kattintsunk a "macchia1" (lila madár) szimbólumra, a megjelenõ menüsorból válasszuk az Update (Frissítés) pontot. (171. Ábra) Az Update Library Items (Könyvtár elemeinek frissítése) párbeszédablak jelenik meg elõttünk, ahol válasszuk ki az aktualizálandó grafikus szimbólumot, majd kattintsunk az Update (Frissítés) gombra. (172. Ábra)
247
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 248
Adobe Flash CS4 II.
171. Ábra
248
172. Ábra A "macchia" helyesen aktualizálódik. Az Archívum.fla módosításához használjuk az elõzõ leckében alkalmazott eljárást, a másik foltot viszont másképpen fogjuk frissíteni; egy sokkal automatizáltabb módszert fogunk alkalmazni, ami a különféle igényeknek is jobban megfelel. Nyissuk meg az Felhasználó.fla fájlt, és minthogy a foltot elõször nem aktualizáltuk, a Könyvtár-ban kattintsunk a jobb egérgombbal a második folt ikonjára és válasszuk a Properties (Tulajdonságok) pontot.
2012.03.28.
9:29
Page 249
12. Fejezet A Symbol Properties (Szimbólum tulajdonságai) ablak jelenik meg. (173. Ábra)
173. Ábra Ha az ablak takarékos módban van, teljes kiterjesztéséhez kattintsunk az Advenced gombra (174. Ábra).
174. Ábra A Source -nél (Forrás) pipáljuk ki a Publikáció elõtt mindig frissít jelölõnégyzetet, ellenõrizzük le a szimbólum File-ját és Name-jét és ha minden rendben van, kattintsunk az OK-ra. Az objektum nem aktualizálódott, de elég a Ctrl+Enter-rel az elõzetes kép módba mennünk a frissítéshez és az eredmény megtekintéséhez. Ez utóbbi módszer lehetõvé teszi, hogy publikáció elõtt mindig frissítve legyenek a Könyvtárból származó fájlok.
249
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 250
Adobe Flash CS4 II.
3. Lecke A vezérszint A Motion Tween (Mozgás interpoláció) technika nagy hiányossága abból származik, hogy egy objektum csak és kizárólag egy egyenes mentén mozdul el egyik pontból a másikba. És ha azt szeretnénk, ha az objektum egészen más pályát leírva mozogna? Nincs probléma: elég a ceruzával, vagy más rajzeszközzel megrajzolni azt a pályát, amely mentén szeretnénk, hogy objektumunk haladjon, s ezzel el is készítjük a Vezérszintet.
250
Ebben a leckében a körpálya létrehozásának egy egyszerû módját fogjuk bemutatni, vagyis azt, ahogyan egy objektum egy másik objektum elõtt és mögött elhaladva elliptikus pályát ír le. "Hozzávalók" a sikeres eredményhez: - egy gömb; - egy ellipszis; - egy álló objektum, amin keringeni fog a gömb. Nyissuk meg a Myorbit.fla fájlt (Oktató Cd> Flash_óraimunkák>Fejezet_12>Myorbit_12F_1L.fla). Alakítsuk át a háttérszínt pl: szürkére, majd nevezzük át "ElsõGömb"-nek azt a szintet, ahová a "gömb" példányt szúrtuk be és "felirat"nak azt a szintet, ahol majd létrehozzuk azt az álló objektumot, amelyen a gömb keringeni fog.
2012.03.28.
9:29
Page 251
12. Fejezet Írjunk a "felirat" szintbe bármit, amit akarunk (az effekt szempontjából ennek végül is nincs jelentõsége) (175. Ábra).
175. Ábra Az Idõegyenesen jelöljük ki a "felirat" szint 30-as fotogramját, kattintsunk rá a jobb egérgombbal, a megjelenõ menübõl pedig válasszuk a Kulcsfotogram beszúrása pontot, majd blokkoljuk a szintet. Jelöljük ki a "ElsõGömb" szintet és a rétegek alatt található Add Motion Guide (Vezetõ mozgás hozzáadása) gombra kattintva adjunk hozzá egy speciális típusú szintet, az ún. "Vezetõ"-t (176. Ábra). Aktiváljuk az Oval Tool (Ovális) (O) eszközt, majd a Properties (Tulajdonságok) panelon, a vonalszínt állítsuk be feketére, a vonalvastagságot 1 pixelre és kitöltõszínnek válasszuk a kitöltés nélküli formát.
251
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 252
Adobe Flash CS4 II.
176. Ábra Jelöljük ki a vezérszint elsõ fotogramját és rajzoljunk egy vízszintesen elfekvõ ellipszist. Aktiváljuk a Free Transform Tool (Szabad átalakítás) (Q) eszközt, jelöljük ki az ellipszist és forgassuk el kb. 45°-kal, majd méretét és elhelyezkedését igazítsuk a már meglévõ felirathoz.
252
A Radír (E) eszközzel töröljétek ki a 177. Ábrán látható pontot az ellipszisbõl és blokkoljuk a vezérszintet.
2012.03.28.
9:29
Page 253
12. Fejezet
177. Ábra Ez az ellipszis fogja irányítani a gömb mozgását. A Snap to Object (Objektumokhoz kapcsolás) opció aktívan tartása közben végezzük el az alábbi mûveleteket: Kapcsoljuk az ellipszishez a gömböt az indulóponton (a megszakítás egyik végén). A 30-as pozícióban hozzunk létre egy kulcsfotogramot és mozgassuk el a gömböt úgy, hogy végig az ellipszishez kapcsolódjék (vagyis a megszakítás másik pontjához érkezzen meg). Elhúzás közben a kör középpontjának megfelelõen egy kis kör jelenik meg s ha a mûveletet helyesen végeztük el, ez a kör fogja tökéletesen hozzácsatolni a vezérvonalhoz a gömböt. A 30-as és az 1-es fotogram közé szúrjunk be a mozgás interpolációt. Vetítsük le (Ctrl+Enter)! (178. Ábra)
253
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 254
Adobe Flash CS4 II.
178. Ábra
254
Mentsük el a munkánkat!
2012.03.28.
9:29
Page 255
12. Fejezet
4. Lecke Utolsó simítások Ha máshová helyezzük az Idõegyenes kurzorát, láthatjuk a gömb körpályán való mozgását. A gömb a 8-as fotogramnál tûnik a legközelebbinek és a 23-asnál a legtávolabbinak, ezzel kelti bennünk az eltávolodás érzetét. Az ElsõGömb szinten illesszünk be két kulcsfotogramot ezekbe a pozíciókba és tegyük ugyanezt a 15-ös és 16-os pozícióval is. Méretezzük át a gömböt a 8-as frame-nél 150%-kal, a 23-asnál pedig 75%-kal. A Properties (Tulajdonságok) panelen ellenõrizzétek le, nincs-e kijelölve az Orient to Path (Nyomvonal felé irányul) opció (179. Ábra). Minthogy úgy színeztük ki a gömböt, hogy háromdimenziós hatást keltsen, ennek az opciónak a kiválasztásával a gömb forogni kezd és a háromdimenziós hatás "sisteregne", próbáljuk ki (Ctrl+Enter)!
255
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 256
Adobe Flash CS4 II.
179. Ábra Most azt kell elérnünk, hogy a körpálya legtávolabbi szakaszán a gömb a felirat mögött haladjon el. A helyes hatás eléréséhez hozzunk létre egy új szintet, nevezzük el HátsóGömb-nek és vigyük az álló objektum Felirat szintje alá. Másoljuk le az ElsõGömb fotogramjait a 16-ostól és illesszük be a HátsóGömb 16-as fotogramjától kezdõdõen.
256
Megjegyzés Ha gyorsan akarunk másik szintbe vagy pozícióba mozgás interpolációt másolni, kattintsunk rá kétszer a kijelölésre és a rendeltetési helyre húzva egyszerûen másoljuk le. Töröljük az ElsõGömb szint fotogramjait 16-tól 30-ig (180. Ábra). Ha lenyomjuk a Ctrl+Enter billentyûkombinációt, megnézhetjük a teljes animációt.
2012.03.28.
9:29
Page 257
12. Fejezet
180. Ábra És most még valami! Hívjuk elõ a starwars.fla terv fájl-jának könyvtárát és importáljuk egy új szintre a "star tween" filmklipet. Ezzel az ûrbe helyezzük a bolygót. (181. Ábra)
257
flashcs4_vs4_2.qxd
181. Ábra Ne felejtsük el, hogy ugyanazon szint 30-as fotogramjához is szúrjunk be egy kulcsfotogramot.
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 258
Adobe Flash CS4 II.
5. Lecke Vezérelt szintek
258
Amikor mozgásvezetõkkel dolgozunk, van egy vezérszintünk és az alatt egy vagy több vezérelt szint. A vezérelt szinteket onnan ismerjük meg, hogy a szint ikonja enyhén beljebb van a vezérszint ikonjához képest. Amikor több vezérelt szintünk van, a Flash-nek gondot okozhat az, hogy felismerje, melyek a vezetõ alatti kapcsolódó vezérelt szintek és visszautasíthatja az útvonalat. Létezik egy egyszerû trükk: kattintsunk a jobb egérgombbal a vezéreltszint címkéjére, jelöljük ki a Tulajdonságok-at és állítsuk be a Vezérelt tulajdonságot (182. Ábra).
182. Ábra
2012.03.28.
9:29
Page 259
12. Fejezet Nyissuk meg az Oktató CD-n található repülõgépek.swf fájlt (Oktató Cd>Flash_óraimunkák>Fejezet_12). Most, hogy már megnéztük a vezérszint használatára vonatkozó technikákat, biztosan nem lesz nehéz a következõ film elkészítése. Nyissuk meg a repülõ.fla fájlt abban a formájában, ahogyan a harmadik fejezetben módosítottuk és miután szimbólummá alakítottuk, a vezérszint használatával készítsük el a repülõgép animációját! Azért, hogy a repülõgép pontosan kövesse majd röppályáját, el kell forgatnunk a repülõt orral a nyomvonal irányába. Vagyis miután beszúrtuk a mozgás interpolációt, ne felejtsük el a Properties (Tulajdonságok) panelon kipipálni az Orient to Path (Nyomvonal felé irányul) pontot. (183. Ábra)
259
flashcs4_vs4_2.qxd
183. Ábra Ahhoz, hogy az elsõvel megegyezõ, de mondjuk más színû kisrepülõt kapjunk, kattintsuk a jobb egérgombbal a repülõ szimbólumára és válasszuk ki a Copy (Lemásol) pontot.
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 260
Adobe Flash CS4 II. Ha duplán kattintunk az imént létrehozott szimbólumra, módosíthatjuk a kitöltõszínt. Ha a Scene1 (Jelenet1) pontra kattintunk, ismét a jelenethez térünk vissza.
260
Amikor a második repülõgép mozgását definiáljuk, érdemes egy idõre elrejtenünk az elsõ repülõt és aztán ugyanazt a mûveletsort megismételnünk: forgassuk el a repülõt, de most az ellenkezõ irányba. Az Orient to Path (Nyomvonal felé irányul) pont természetesen most is legyen kijelölve. Az Idõegyenesen lévõ szinteknek a 184. Ábrán látható módon kellene kinézniük.
184. Ábra Egyetlen útvonal felhasználásával tehát több szintet is vezérelhetünk egyidejûleg. Nézzük meg az animációt a Control>Test Movie (Ellenõrzés>Kisfilm próba) paranccsal.
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 261
13. FEJEZET
2012.03.28.
9:29
Page 263
13. Fejezet
1. Lecke Interaktivitás Ezen a ponton már nyugodtan szabadjára engedhetjük fantáziánkat és vonzó külsejû animációkat készíthetünk. Terveinkbõl azonban még hiányozni fog egy lényeges elem: az interaktivitás. Egy olyan gyakorlattal kezdjük majd, amiben a felhasználó irányíthatja a filmet, vagyis egérmozgásra érzékeny gombokat fogunk létrehozni, melyek az interaktív tartalomnak nélkülözhetetlen elemei. A repülõgépek.swf filmben megfigyelhettük, hogy az animációt nyomógombok révén irányíthatjuk is. Nyissuk meg a módosított repülõ.fla fájlt (Oktató Cd> Flash_óraimunkák>Fejezet_12>repülõ_12F_5L). Ha az animáció végére korábban stop-ot szúrtunk be, töröljük azt. A vezérszint fölé szúrjunk be egy új szintet, nevezzük el "Stop"nak és jelöljük ki az 1-es fotogramot. Flash-ben úgy készíthetünk a legegyszerûbb módon nyomógombokat, ha a programban már meglévõ szimbólumokat használjuk fel.
263
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 264
Adobe Flash CS4 II. Kattintsunk a Window>Common Libraries>Buttons (Ablak>Közös könyvtárak>Nyomógombok) menüpontokra A Nyomógombok-Könyvtár-ban a rendelkezésre álló kategóriák közül válasszuk ki azt a nyomógombot, amelyikkel dolgozni szeretnénk és húzzuk a jelenetbe. (185. Ábra).
185. Ábra Helyezzük el úgy és méretezzük át úgy, ahogyan szükségét látjuk.
264
Az Actions (Tevékenységek) panel megjelenítéséhez nyomjuk meg az F9-es billentyût. A gombhoz rendelendõ tevékenység hozzáadásához kattintsunk a + jelre, majd az On (dupla kattintás) hozzáadásához kattintsunk az Actions>Movie Clip Controll pontokra. Miután beszúrtuk a script területét, a nyomógomb lehetséges esemény-listája jelenik meg a képernyõn (186. Ábra).
2012.03.28.
9:29
Page 265
13. Fejezet
186. Ábra Megjegyzés Ha nyomógombhoz tevékenységet társítunk, a tevékenységet elindító egéreseményt is meg kell határoznunk. Dupla kattintással jelöljük ki a release -t, így a "felengedés" eseményekor a kattintás után rögtön megáll az animáció. Fejezzük be a script-et, menjünk a nyitott kapcsos zárójel mögé és az ActionScript 2.0 Classes>Movie>Button>Event Handler>onRelease menüvel adjunk hozzá egy stop-ot (187. Ábra).
265
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 266
Adobe Flash CS4 II.
187. Ábra Ezzel a tevékenységgel a repülõket abban a helyzetben állítjuk meg, amelyikben a kattintáskor éppen voltak.
266
A Szöveg eszközzel írjuk a gomb alá, hogy "Stop". Szúrjunk be egy új szintet és nevezzük el "Play"-nek, a Nyomógombok-Könyvtár ablakból húzzunk egy másik nyomógombot a munkaterületre és a Szöveg eszközzel írjuk alá, hogy "Play". Ezzel a nyomógombbal fogjuk újraindítani az animációt attól a pillanattól, amelyben leállt. Válasszuk ki a nyomógombot és az Actions (Tevékenységek) panelon kattintsunk kétszer az On-ra, válasszuk ki az egéreseményt, majd a Play-t (188. Ábra).
2012.03.28.
9:29
Page 267
13. Fejezet
188. Ábra Az animáció elsõ fotogramra való visszaugrásához szúrjunk be egy új szintet és nevezzük el "Kezdés"-nek. A Nyomógombok-Könyvtár ablakból húzzunk a munkaterületre egy másik nyomógombot és írjuk alá, hogy "Kezdés". Jelöljük ki a nyomógombot, az Actions (Tevékenységek) panelon válasszuk az on pontot, majd ha azt akarjuk, hogy az animáció automatikusan visszaugorjon az elsõ fotogramra kattintsunk kétszer a gotoAndPlay tevékenységre, vagypedig kattintsunk kétszer a gotoAndStop tevékenységre ha azt akarjuk, hogy az elsõ fotogramon maradjon az animáció és addig ne is induljon újra, amíg meg nem nyomjuk a "Play" gombot (189. Ábra). Végül meg kell határoznunk, hogy hányas számú fotogramra ugorjon vissza az olvasófej (a mi esetünkben az 1-esre). Most már nem maradt más hátra, mint elmenteni a filmet és letesztelni az animációt. (190. Ábra)
267
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 268
Adobe Flash CS4 II.
268
189. Ábra
190. Ábra
2012.03.28.
9:29
Page 269
13. Fejezet
2. Lecke A nyomógombok A nyolcadik fejezet végén befejezetlenül hagytuk az egyik projektünket, mivel arra vártunk, hogy több ismeretünk legyen a nyomógombokról, ami a mi esetünkben az lett volna, hogy ha a felhasználó a "ViewAgain" gombra kattint, elejétõl kezdve újra megnézheti a filmet. Nyissuk meg újból a gömb_8F_ 5L.fla fájlt (mentsük el flashgömb.fla néven) és nézzük meg, hogyan is tehetjük valóban interaktívvá kisfilmünket. Szúrjunk be a "Flash" szint 50-es fotogramjához egy kulcsfotogramot. Így most már az 50-es fotogramban is van egy másolatunk a "ViewAgain" feliratból (191. Ábra). A felirat egy egyszerû alakzat, de célunk elérése érdekében szimbólummá kell konvertálnunk. Az Insert>Convert to Symbol (Kidolgozás>Szimbólummá konvertálás) paranccsal rendeljük a felirathoz a Nyomógomb magatartást és a "viewAgain" nevet (192. Ábra).
269
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 270
Adobe Flash CS4 II.
191. Ábra
270
192. Ábra Megjegyzés A feliratot nem konvertálhatjuk közvetlenül a 49-es frame-ben szimbólummá, mert így elveszne a morphing, ami egyszerû formák használatát követeli meg. Ha az 50-es fotogramban alakítjuk szimbólummá a feliratot, azt közöljük a Flash-el, hogy a 49-es fotogram után tekintse a feliratot nyomógombnak.
2012.03.28.
9:29
Page 271
13. Fejezet A szimbólumoktól eltérõen, mint azt már láttuk, a nyomógombokhoz tevékenységet társíthatunk. Ez azt jelenti, hogy nyomógombokkal színt változtathatunk, hangot játszhatunk le, és ha rákattintunk egy nyomógombra, az egy másik oldalra mutató hivatkozásként is mûködhet. Minden nyomógomb négy speciális fotogrammal rendelkezik, melyekhez tevékenységet társíthatunk: Up - Fönt, Over - Rajta, Down - Lent és Hit - Lenyomva. Ezek az egérmutató helyzetének állapotai. Az Up - Fönt a nyomógomb azon alapértelmezett állapota, amikor a mutató nem rajta helyezkedik el. A Over - Rajta azt jelenti, hogy a mutató a nyomógombon helyezkedik el. A Down - Lent jelentése hasonló a Rajta állapotéhoz, azzal a kivétellel, ha a gomb le van nyomva. A Hit - Lenyomva állapottal az egérérzékeny nyomógomb körüli területet határozzuk meg. Most bemutatjuk, hogy hogyan kell ezeket a tulajdonságokat hozzáadni. A nyomógomb editor-jába való belépéshez kattintsunk kétszer új szimbólumunkra (193. Ábra).
271
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 272
Adobe Flash CS4 II.
193. Ábra
272
A nyomógomb másik három állapotához is szúrjunk be egy-egy kulcsfotogramot. A Over - Rajta állapotban a Free Transform Tool (Szabad átalakítás) eszközzel döntsük meg vízszintes irányban a feliratot. A Down - Lent állapotban változtassuk meg a színét (pl:piros) A Hit - Lenyomva állapotban rajzoljunk fölé egy a feliratot pontosan fedõ négyszöget (vagy csak annak kitöltését). Az Esemény szinten húzzuk a Stop-al társított utolsó fotogramot az 50-es fotogramig, mert ha nem így teszünk, az animáció félbeszakad még mielõtt a nyomógomb a jelenetben aktiválódna. Az, hogy miért rajzoltunk négyszöget a "Lenyomva" állapothoz, világosabb lesz számunkra, ha megnézzük az elõzetes képet. Teszteljük le a nyomógombokhoz rendelt tulajdonságokat! Az elõzõ leckében azt tanultuk meg, hogy hogyan lehet nyomógombokhoz tevékenységet társítani.
2012.03.28.
9:29
Page 273
13. Fejezet A fõ jelenetben jelöljük ki az 50-es fotogramban lévõ nyomógombot és az Actions (Tevékenységek) panelrõl rendeljük hozzá a 194. Ábrán látható tevékenységet.
194. Ábra És már készen is vagyunk! Ellenõrizzük le, hogy interaktív filmünk nyomógombjai valóban jól mûködnek-e.
273
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 274
Adobe Flash CS4 II.
3. Lecke Dinamikus menü
274
Most, hogy a nyomógomb szimbólumok nem rejtenek több titkot elõlünk, próbáljuk is ki õket egy legördülõ menü példáján keresztül! Nyissunk egy új Flash dokumentumot és állítsuk a stage-et 190x400 pixel méretûre és fekete hátterûre. Mentsük el dinamikus _menü.fla név alatt. Az 1-es szintet nevezzük át "Menü"-re és rajzoljunk bele egy négyszöget. A négyszöget Nyomógomb magatartással alakítsuk szimbólummá (195. Ábra).
195. Ábra
2012.03.28.
9:29
Page 275
13. Fejezet Menjünk be a szimbólum editor-jába és tetszés szerint módosítsuk az Over - Rajta, Down - Lent és Hit - Lenyomva állapotokat. (Például: Up - fehér szegély, világos kék kitöltés; Over - sötét kék szegély, kitöltés marad, Hit - sötét kék szegély, lila kitöltés) A nyomógomb szimbólumhoz szúrjunk be egy új szintet, nevezzük el "Szöveg"-nek és az Up - Fönt állapotba írjuk be, hogy "Menü". (196. Ábra)
196. Ábra Szükség szerint módosítsuk a többi állapotot is. Vigyük a munkaterület tetejére, középre. A legördülõ menühöz szükséges többi nyomógomb létrehozásához másoljuk le a már elkészített nyomógombot a jobb egérgombbal a "Menü" nyomógombra kattintva és a megjelenõ menübõl válasszuk a Duplicate Symbol menüpontot.
275
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 276
Adobe Flash CS4 II. Ezután a Könyvtárban nevezzük át a Menü Copy gombot a megfelelõ nyomógomb nevére (Home, Mûvészek, Közvéleménykutatás, Linkek). (197. Ábra)
197. Ábra
276
Menjünk be minden másolat editor-jába (dupla kattintás a nyomógomb nevére) és csak a "Szöveg" szintet módosítsuk. Ha így dolgozunk, akkor összesen öt nyomógomb lesz a Könyvtárunkban. (198. Ábra)
198. Ábra
2012.03.28.
9:29
Page 277
13. Fejezet Egy zenei weboldal framejébe szúrható menüt is elkészíthetünk, ugyanis a Könyvtárban találunk is hozzá megfelelõ nyomógombokat: HOME, MÛVÉSZEK, KÖZVÉLEMÉNYKUTATÁS, LINKEK. Szúrjunk be egy új Filmklip szimbólumot és nevezzük el "Nyomógombok"-nak. (199. Ábra)
199. Ábra Jelenítsük meg a rácshálót és nevezzük át az 1-es szintet "Home"nak. Vigyük középre a HOME gombot (a Ctrl+Alt+2 majd a Ctrl+Alt+5 billentyû kombinációval a középre igazítás egyszerû). A 10-es fotogramhoz szúrjunk be egy kulcsfotogramot, majd húzzuk el a nyomógombot kb. két kis négyzettel lejjebb. Alkalmazzunk mozgás interpolációt. (200. Ábra)
277
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 278
Adobe Flash CS4 II.
200. Ábra Szúrjunk be egy új szintet és nevezzük el "Mûvészek"-nek. Vigyük a már meglévõ szint alá.
278
Szúrjunk be egy kulcsfotogramot a 10-es fotogramhoz és ide szúrjuk be a MÛVÉSZEK nyomógombot az elsõ gomb alá. Úgy csináljuk, hogy ezek tökéletesen fedjék egymást. A koordinátákat a Properties (Tulajdonságok) panelen is leellenõrizhetjük. Mindkét szinten szúrjunk be a 20-as fotogramhoz egy kulcsfotogramot. Jelöljük ki a "Mûvészek" szint 20-as fotogramját és vigyük a nyomógombot alulra, hogy kb. egy kis négyzetre legyen az elsõtõl, majd alkalmazzuk a mozgás interpolációt. (201. Ábra)
2012.03.28.
9:29
Page 279
13. Fejezet
201. Ábra A Közvéleménykutatás és a Linkek nyomógombnál is végezzük el a fenti mûveleteket. (Közvéleménykutatás: Szúrjunk be egy új szintet és nevezzük el "Közvéleménykutatás"-nak. Vigyük a már meglévõ szintek alá. Szúrjunk be egy kulcsfotogramot a 20-as fotogramhoz és ide szúrjuk be a Közvéleménykutatás nyomógombot az elsõ gomb alá. Úgy csináljuk, hogy ezek tökéletesen fedjék egymást. Mindhárom szinten szúrjunk be a 30-as fotogramhoz egy kulcsfotogramot. Jelöljük ki a "Közvéleménykutatás" szint 30-as fotogramját és vigyük a nyomógombot alulra, hogy kb. egy kis négyzetre, legyen a másodiktól, majd alkalmazzuk a mozgás interpolációt.) (Linkek: Szúrjunk be egy új szintet és nevezzük el "Linkek"-nek. Vigyük a már meglévõ szintek alá. Szúrjunk be egy kulcsfotogramot a 30-as fotogramhoz és ide szúrjuk be a Linkek nyomógombot az elsõ gomb alá.
279
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 280
Adobe Flash CS4 II. Úgy csináljuk, hogy ezek tökéletesen fedjék egymást. Mind a négy szinten szúrjunk be a 40-as fotogramhoz egy kulcsfotogramot. Jelöljük ki a "Linkek" szint 40-as fotogramját és vigyük a nyomógombot alulra, hogy kb. egy kis négyzetre, legyen a harmadiktól, majd alkalmazzuk a mozgás interpolációt.) Az eredményt a 202. Ábrán láthatjuk.
280
202. Ábra A végén szúrjunk be egy új szintet és nevezzük el "tevékenységek"-nek. Az elsõ és az utolsó fotogramnál alkalmazzatok Stop tevékenységet (a Stop alkalmazása elõtt azonban ne felejtsünk el az utolsó fotogramba kulcsfotogramot beszúrni). A Window>Play (Enter) paranccsal teszteljük le az animációnkat.
2012.03.28.
9:29
Page 281
13. Fejezet
4. Lecke Belsõ filmklip letöltése Térjünk vissza legördülõ menünkhöz és nyissuk meg ismét a dinamikus _menü.fla fájlt. A Jelenet1-be szúrjunk be egy új szintet, nevezzük el "Nyomógombok"-nak és helyezzük el a "Menü" szint alatt. A Könyvtárból húzzuk a stage-re a "Nyomógombok" filmklipet és vigyük a már meglévõ nyomógomb alá úgy, hogy teljesen fedve legyen (203. Ábra).
281
flashcs4_vs4_2.qxd
203. Ábra
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 282
Adobe Flash CS4 II. Jelöljük ki a moziklipet a stage-en és a példányhoz rendeljünk egy nevet: a Properties (Tulajdonságok) panel Filmklip mezõjébe írjuk a "Nyomógombok" nevet. Jelöljük ki a "Menü" szint nyomógombját és alkalmazzuk a következõ action script-et: 1. Az Actions>Movie Clip Control (Filmklip ellenõrzése) kategóriából kattintsunk kétszer az on-ra és válasszuk a "release" egéreseményt; 2. Az Actions>Movie Clip Control kategóriából kattintsunk kétszer a gotoAndPlay-re és paraméternek írjuk be, hogy 1. (204. Ábra).
282
204. Ábra A With olyan action, ami a filmklipek közt kommunikál. A filmklip a fõ filmtõl különálló egység. Olyan, mint egy "almozi".
2012.03.28.
9:29
Page 283
13. Fejezet A With paranccsal lehet: - nyomógombot filmben lévõ olyan filmklip lejátszására használni (mint ebben az esetben), ami esetleg még messze is van magától a nyomógombtól; - amikor nyomógombot lenyomunk, megadhatjuk neki azt, hogy a filmklip melyik fotogramjára menjen és álljon meg, - nyomógomb fölötti egérelhaladásra lejátszani animációt, - a filmklip végén egy másik, vagy még sok másik filmet elindítani. Flash-ben a filmek nagyon egyszerû szerkezetûek, ami a merevlemez könyvtárainak és a fájlok szerkezetére vezethetõ vissza. A Star Wars "ûr" effektjének létrehozásakor azt már láthattuk, hogy filmklipet másik filmklipbe is ágyazhatunk, például movie clip-et szúrhatunk egy másik filmklip Idõegyenesébe. A könyvtár elvet megjelenítve az egész olyasmi lehet, mint amit a 205. Ábrán látunk.
205. Ábra Ha lépésrõl-lépésre jól követtük az utasításokat, legördülõ menünknek mûködnie kell. Ha mégsincs így, ellenõrizzük le, hogy a Script-be jól gépeltük-e be azt nevet, amit a jelenet1-ben a filmklip példányhoz rendeltünk.
283
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 284
Adobe Flash CS4 II.
5. Lecke Nyomógombok kapcsolása weboldalhoz A harmadik leckében azt mondtuk, hogy a készülõ legördülõ menü majd egy web site oldalsó frame-jéhez fog kapcsolódni. Tehát pont a mi menünk lesz az, ami azokat az elemeket szolgáltatja majd nekünk, amelyek lehetõvé teszik, hogy párbeszédet folytassunk a webhely oldalaival és megjelenítsük a HOME, MÛVÉSZEK, KÖZVÉLEMÉNYKUTATÁS és LINKEK oldalak tartalmát. Most nézzük meg, hogy hogyan kell menünk nyomógombjait weboldalakhoz kapcsolni. Nyissuk meg újból a dinamikus _menü.fla fájlt és a Könyvtárban lévõ szimbólumra történõ dupla kattintással menjünk a "Nyomógombok" filmklip editor-jába.
284
A leolvasófejet vigyük az utolsó fotogramra (40). Jelöljük ki a HOME nyomógombot és alkalmazzuk a következõ action script-et: 1. Az Actions>Movie Clip Control (Filmklip ellenõrzése) kategóriából kattintsunk kétszer az on-ra és válasszuk a "release" egéreseményt;
2012.03.28.
9:29
Page 285
13. Fejezet 2. Az Actions>Browser/Network (Browser/Hálózatok) kategóriából kattintsunk kétszer a getURL-re. URL-nek írjuk be a nyomógombhoz kapcsolódó oldal nevét kiterjesztéssel (pl. homepage.htm). Az Ablakhoz írjuk be a rendeltetési frame nevét (csak ha a webhely, amelyben a nyomógombok megjelenítõdnek, frame struktúrájú, például dx-nek hívják) (206. Ábra).
206. Ábra Hagyjuk nyitva az Actions panelt és kattintsunk a MÛVÉSZEK nyomógombra. Ne aggódjunk, ha a jobb oldalon megjelenített tevékenységek eltûnnek. A panel minden objektumhoz társított tevékenységet tárol. Alkalmazzuk ugyanezt a tevékenységet a MÛVÉSZEK nyomógombon és csatoljuk az mûvészek.htm fájl megnyitásához. Az ellenõrzéshez kattintsunk újból a HOME nyomógombra: a kód még mindig ott van.
285
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 286
Adobe Flash CS4 II.
286
A többi nyomógombot is kapcsoljuk URL-hez (ez esetben a közvéleménykutatás .htm és a linkek. htm oldalakhoz). A végén be is zárhatjuk a panelt, a scriptmentve van.Ha eddig még nem tettük meg, munkánkat mentsük el. Most már nem is olyan egyszerû az imént hozzácsatolt URLekmûködésének leellenőrzése. Azt tudjuk, hogy létezik a hivatkozás, de amíg nem publikáltuk a filmet, nem tudjuk,hogy hova vezet. Publikáláshoz kattintsunk a File>Publish settings (Publikál)parancsra, majd a Publish és OK nyomógombra. (Figyeljünk arra, hogy a htm állományok ugyanabban a mappában legyenek ahol az elkészült Flash állományunk is található). Most ellenőrizzük le a nyomógombok viselkedését.
Megjegyzés:A GetURL action- nel Internetes címekhez is kapcsolód-hatunk, elég beírni annak a webhelynek a nevét, amihez kapcsolódni kívánunk: getURL ("http://www.iecinfo.hu"); és kiválasztanunk, hogy az új URL abban az ablakban jelenjen-e meg, amiben dolgozunk ("_self"), vagy pedig új ablakban("_blank"). A mailto:
[email protected] karaktersor URL helyére történő beírásával a levelezőprogramot is elindíthatjuk. (A 15.Fejezet 3. leckéjében fogjuk használni.)
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 287
14. FEJEZET
2012.03.28.
9:29
Page 289
14. Fejezet
1. Lecke Terv elemeinek rendezése Az on-line munkák portfóliója a web design világában luxusból kötelességgé változott. A hagyományos mûvészek nem is gondolnak arra, hogy személyes book-juk nélkül dolgozzanak. Éppen ezért számunkra is van lehetõség arra, hogy olyan helyet hozzunk létre, ahol egy egyszeri látogatás alkalmával bárki megnézheti munkánkat. Egy a Dreamweaver-el létrehozott "galéria" gyorsan célba juttatna minket, de a minõség nem az lenne, amit elvárnánk. Úgy gondoltuk, Flash-el ez a vállalkozás is kivitelezhetõ. Ha a látogatók interaktív kapcsolatba léphetnek munkáinkkal, sokkal inkább elidõznek majd felettük. Ettõl a leckétõl kezdve az olyan tartalmakat fogjuk a felületbe beszúrni, melyek layout-ját az ötödik fejezetben definiáltuk. Nyissuk meg a felület.fla fájlt (Oktató Cd: Flash_óraimunkák> Fejezet_14>felület.fla), ez lesz on-line galériánk fõ felülete. Importáljunk egy, a webhelyet azonosító képet. Ha a webhely jellegét illetõen még bizonytalanok vagyunk, importáljuk az Oktató Cd-n található szem.jpg képet (Oktató Cd: Képek> Fejezet_14>szem.jpg) és szúrjuk be a jobb felsõ sarokban lévõ négyszögbe. (207. Ábra)
289
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 290
Adobe Flash CS4 II.
207. Ábra A felület alsó részén lévõ négyszögbe írjuk be, hogy "ON-LINE GALÉRIA".
290
Az importált kép alá készítsünk néhány nyomógombot, amelyek révén a felhasználó galériánk egyes részeibe juthat majd. Jelenítsük meg a rácshálót és következõ részek számára készítsünk egy nyomógombot (navigációs gombot): HOME PAGE, WEB DESIGNERS, PORTFOLIO, TERV1, TERV2, TERV3, KAPCSOLATOK: Elõször hozzunk létre egy négyszöget, ami a kijelölt részben lévõ nyomógomb helyét definiálja majd és ezt követõen pedig konvertáljuk Nyomógomb szimbólummá. A három állapot -Fönt, Rajta és Lent- megrajzolásával definiáljuk a nyomógombok tulajdonságait. A nyomógombok külseje minden állapotban legyen más és más. (208. Ábra)
2012.03.28.
9:29
Page 291
14. Fejezet
208. Ábra Készítsünk az elkészült nyomógombból másolatokat a következõ részek számára: HOME PAGE, WEB DESIGNERS, PORTFOLIO, TERV1, TERV2, TERV3, KAPCSOLATOK. (Az elõzõ fejezetben már készítettünk nyomógomb másolatot: Nyissuk meg a Könyvtárat (F11), majd a "Nyomógomb"-ra kattintsunk a jobb egérgombbal. A megjelenõ menübõl válasszuk a Duplicate utasítást, ezután adjuk meg az új nyomógomb nevét. Menjünk be minden nyomógombnak editor-jába és írjuk be a gomb nevét) (209. - 210. Ábra) Miután elkészültünk a navigációs gombokkal, helyezzük el õket a Könyvtár egy mappájában, a következõ módon: jelöljük ki az elkészített nyomógombokat, kattintsunk a jobb egérgombbal, majd a megjelenõ menübõl válasszuk ki a Move to New Folder parancsot. Ezzel létre hozzunk a "Nyomógombok" mappát és belekerülnek a kijelölt gombok. (211. Ábra).
291
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 292
Adobe Flash CS4 II.
292
209. Ábra
210. Ábra
2012.03.28.
9:29
Page 293
14. Fejezet
211. Ábra Ez biztosítja azt, hogy a hasonló vagy kapcsolódó nyomógombok csoportosítva legyenek. Most szúrjuk be a stage-re a nyomógombokat és bizonyosodjunk meg róla, hogy valóban a jelenleg egyetlen meglévõ "Felület" szint 1-es fotogramjában találhatóak-e. (212. Ábra)
293
flashcs4_vs4_2.qxd
212. Ábra
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 294
Adobe Flash CS4 II.
2. Lecke Navigálás a Felületen Most nézzük meg azt, hogy hogyan lehet a filmben navigálni és különbözõ tartalmait megnézni. Importáljunk legalább hat személy képét, õk fogják majd benépesíteni a Web Designers részt. Csoporttársaink fényképét is felhasználhatjuk. Ha sehonnan nem sikerült képet szerezni, találunk néhányat az Oktató Cd>Képek>Fejezet_ 14 mappában. A képeket kétféle méretben találjuk meg: egyszer mint 50x50-es kis ikonokat, másodszor pedig mint 140x140-es nagyobb képeket a stage-en lévõ Személyi állományhoz.
294
Az importált képeket tegyük be egy "People" nevû mappába. (213. - 214. Ábra)
2012.03.28.
9:29
Page 295
14. Fejezet
213. Ábra
214. Ábra Az Idõegyenesen menjünk a "Felület" szint 25-ös fotogramjára (adjunk hozzá egy kulcsfotogramot) és az elsõ fotogramra való visszaugráshoz szúrjuk be a gotoAndPlay(1) tevékenységet.
295
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 296
Adobe Flash CS4 II. Menjünk a "Felület" szint elsõ fotogramjára és jelöljük ki a stageen a WEB DESIGNERS nyomógombot, majd nyissuk meg az Actions panelt. Innen a következõ script-et rendeljük hozzá a nyomógombhoz: On (release) { GotoAndPlay(30), } A Web designers nyomógomb kiválasztásakor a film a 30-as fotogramra ugrik. Hozzunk létre egy új szintet és nevezzük el "Web Designers"-nek. A Web Designers részben hat beszúrást fogunk elvégezni: A 30-as fotogramnál hozzunk létre egy kulcsfotogramot és majd a hat kicsi képet helyezzük el a bal oldali négyszögben. Mivel a bitmap-eknek nincs tevékenységük, ezért szimbólumokká kell õket alakítanunk! A jobb egérgombbal kattintsunk az elõször konvertálandó képre, aztán válasszuk a Szimbólummá konvertálás parancsot. Az ugyanilyen nevû ablakban nevezzük el a szimbólumot, a név viszont utaljon a kép nevére, majd társítsuk hozzá Nyomógomb magatartást.
296
A többi öt nyomógombként felhasználandó képpel ugyanígy járjunk el. (215. Ábra)
2012.03.28.
9:29
Page 297
14. Fejezet
215. Ábra Ugyanúgy, mint elõzõleg, most is rendezzük mappába a nyomógombokat, legyen a mappa neve "People Nyomógombok" (216. Ábra).
297
flashcs4_vs4_2.qxd
216. Ábra
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 298
Adobe Flash CS4 II. Lényeges, hogy a helyes sorrendben adjuk hozzá a kulcsfotogramokat. 1. Menjünk a "Web Designers" szint 35-ös fotogramjára és adjunk hozzá egy kulcsfotogramot. Itt lesz majd az elsõ Személyi Állomány, ezért ide szúrjuk be az elsõ képet – people_01! 2. Most menjünk a 34-es fotogramra és adjunk hozzá egy kulcsfotogramot és gotoAndPlay tevékenységet, ami révén majd a 30-as fotogramra fog visszaugrani: gotoAndPlay(30); 3. Jelöljük ki a "Web Designers" szint 30-as fotogramját és jelöljük ki az elsõ kép Nyomógombot – people_01s. A Tevékenységek panelrõl írjuk be a következõ parancsot: on (release) { gotoAndPlay(35); }
298
Amikor rákattintunk a kis képre, a film a 35-ös fotogramra fog ugrani. Most arra használjuk a kulcsfotogramokat a Web Designers szinten, hogy minden személyi állományhoz szöveget és más információkat adjunk hozzá. Ezt ismételjük el mind a hat nyomógombbal úgy, hogy közben mindig 5-tel növeljük a fotogramok számát. (Pl: második személyi anyag esetén ez a következõ képpen alakul: 1. Menjünk a "Web Designers" szint 40-es fotogramjára és adjunk hozzá egy kulcsfotogramot. Itt lesz majd a második Személyi Állomány, ezért ide szúrjuk be a második képet people_02!
2012.03.28.
9:29
Page 299
14. Fejezet 2. Most menjünk a 39-es fotogramra és adjunk hozzá egy kulcsfotogramot és gotoAndPlay tevékenységet, ami révén majd a 35-as fotogramra fog visszaugrani: gotoAndPlay(35); 3. Jelöljük ki a "Web Designers" szint 35-as fotogramját és jelöljük ki a második kép Nyomógombot – people_02s. A Tevékenységek panelrõl írjuk be a következõ parancsot: on (release) { gotoAndPlay(40); } Amikor rákattintunk a kis képre, a film a 40-es fotogramra fog ugrani.) A többi fájl esetén is hasonlóan kell eljárni. (Ha mégis elakadunk, nyissuk meg az Oktató Cd: Flash_óraimunkák>Fejezet_14> Felület_14F_2L.fla állományt és nézzük meg az egyes fotogrammok beszúrási pontjait.) A filmhez írjunk be szöveget, de legalább a nagy képeket szúrjuk be az egyes fájlokba (217. Ábra).
299
flashcs4_vs4_2.qxd
217. Ábra
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 300
Adobe Flash CS4 II.
3. Lecke Terv szintjeinek rendezése Amikor már nagyon összetett egy projekt, és nagyon sok fotogrammot használtunk fel, a fotogramok beszúrása, eltávolítása vagy csak egyszerû áthelyezése veszélyes lehet és teljesen összekuszálhatjuk vele az események menetét. Ha a 35-ös fotogram Személyi Állományát valamilyen okból a tervezési fázisban áthelyezzük a 40-es fotogramhoz, az elsõ webdesigner kis képének "release" eseménye a második webdesigner Személyi Állományát adja vissza és ezt nem engedhetjük meg magunknak.
300
Ekkor hívhatók segítségül a "Címkék" ("Label"). Ezek lehetõvé teszik, hogy nevet adjunk annak a kulcsfotogramnak, amit nem szeretnénk a többivel összekeverni. Menjünk a 35-ös fotogramra és a Properties (Tulajdonságok) panelen rendeljük a 35-ös fotogramhoz az "FP 01"-es címkét, ami pont azt jelöli, hogy ebben a fotogramban van a 01-s személy Személyi Állománya). Az Idõvonal 35-ös frame-jénél egy kis piros zászló jelzi számunkra a címke helyes hozzárendelését (218. Ábra).
2012.03.28.
9:29
Page 301
14. Fejezet
218. Ábra Hívjuk elõ az elsõ kis fényképre vonatkozó nyomógombhoz rendelt tevékenységet és a 35-öt helyettesítsük az "FP 01"-el (idézõjelben). (219. Ábra)
301
flashcs4_vs4_2.qxd
219. Ábra
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 302
Adobe Flash CS4 II. Az összes Személyi Állományt tartalmazó fotogrammal végezzük el a fenti mûveletet.
302
Tökéletes! Felületünk most már interaktív és csak arra vár, hogy leteszteljük. Az ellenõrzéshez próbáljunk az Idegyenesen egy "címkézett" fotogramot áthelyezni (akár másik szintre). Azt láthatjuk, hogy a felület továbbra is tökéletesen mûködik.
2012.03.28.
9:29
Page 303
14. Fejezet
4. Lecke A választások irányítása Akárcsak a Visual Basic-el, a Macromedia Flash-el is beszúrhatunk olyan feltételeket, melyek a többmegoldásos eseményeket kezelik. Tegyük fel például azt, hogy a Személyi Állományokat tartalmazó rész csak Jelszóval érhetõ el. Ahhoz, hogy egy film, vagy a filmnek egy része csak jelszó beírása után legyen megtekinthetõ, 3 kulcsfotogramra van szükségünk, melyeket az egyszerûség kedvéért "Kérés"-nek, "Belépés"-nek és "Újrapróbál"-nak fogunk elnevezni (a sorrend nem számít). A "Kérés" fotogramba egy szövegdobozt szúrunk majd be, ahová a jelszót lehet beírni. Az "Újrapróbál" fotogramba egy hibaüzenetet és a "Kérés" fotogramhoz való visszatérési lehetõséget (ha nem jó a password). A "Belépés"-be pedig animációnkat fogjuk beszúrni. Nézzük meg, hogyan kell a felületet úgy módosítani, hogy az on-line galériánkat látogató felhasználó megértse kéréseinket és aszerint járjon el, hogy a tartalmakhoz hozzáférjen.
303
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 304
Adobe Flash CS4 II. A 30-as fotogramhoz rendeljünk egy "Kérés" címkét és egy "Stop"-ot, hogy a film addig ne induljon el, amíg be nem írtuk a helyes jelszót. Továbbra is a "Kérés" fotogramban jelöljük ki a Szöveg eszközt, a Properties (Tulajdonságok) panelrõl válasszuk az Input szöveg-et és felületünk központi négyszögébe rajzoljunk egy mezõt (220. Ábra).
220. Ábra
304
Menjünk vissza a Properties (Tulajdonságok) panelra. A Var: mezõbe írjuk be, hogy "Access", a Vonal típus mezõben válasszuk a Password-öt és kattintsunk a Szöveg körüli szegély megjelenítés-re (221. Ábra).
2012.03.28.
9:29
Page 305
14. Fejezet
221. Ábra Így az "Access" változót beviteli mezõnk neveként definiáltuk és "Password" tulajdonságot rendeltünk hozzá. Amikor valaki begépel valamit, a betûk és számjegyek helyén csillagok jelennek meg. Megjegyzés A változók a programozás alapjai, még egy olyan egyszerû nyelvnél is, mint az ActionScript. Egy változót úgy kell elképzelnetek, mint egy adattárolási módszert (mint például egy merevlemez). A tárolt értéket megváltoztathatjuk, számításokban felhasználhatjuk, stb. Az input mezõ mellett a már kész nyomógombok közül is szúrjunk be egyet: Window>Common Libraries>Buttons (Ablak>További panelek>Közös könyvtárak>Nyomógombok; Circle Buttons>Circle with arrow). Most azonban még ne rendeljünk hozzá semmilyen script-et sem. (222. Ábra)
305
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 306
Adobe Flash CS4 II.
222. Ábra
306
Az input mezõ fölé írjuk be, hogy "Írja be a jelszót:", de más szöveget is bevihetünk még, amibõl a galériánkat látogató felhasználó megérti, hogy mit és miért kérünk tõle (223. Ábra).
223. Ábra
2012.03.28.
9:29
Page 307
14. Fejezet A 31-es fotogramba szúrjunk be egy kulcsfotogramot és címkézzük föl "Újrapróbál" névvel. (224. Ábra)
224. Ábra Az "Írja be a jelszót:" mondat helyére írjuk be, hogy "Hibás jelszó, kérem próbálja újra!" (225.Ábra).
307
flashcs4_vs4_2.qxd
225. Ábra
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 308
Adobe Flash CS4 II. A nyomógombhoz rendeljük hozzá az újrapróbálkozást lehetõvé tevõ scrip-et (226. Ábra).
226. Ábra
308
Szúrjunk be kulcsfotogramot a 32-es fotogramba és címkézzük föl "Belépés" névvel. Töröljük mindent és írjunk be egy egyszerû üdvözlõ szöveget vagy a felületen való navigáláshoz rövid útmutatást.
2012.03.28.
9:29
Page 309
14. Fejezet
5. Lecke A jelszó-kérés kezelése Most nézzük meg azt, hogy hogyan kell egyszerûen csak a "Matrix" jelszó beírásával a "Belépés" fotogramhoz jutnunk és magához a filmhez hozzáférnünk. Töröljük a "Kérés" és az "Újrapróbál" fotogramokban a "People Nyomógombok"-hoz rendelt tevékenységeket, mert ha nem így teszünk, a password-kérést egyszerûen átugorjuk és így nem is lenne már rá szükségünk. Jelöljük ki a beviteli mezõ melletti nyomógombot és az Actions panelon rendeljük hozzá a következõ script-et (227. Ábra):
309
flashcs4_vs4_2.qxd
227. Ábra
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 310
Adobe Flash CS4 II. 1. az Actions>Movie Clip Control kategóriából kattintsunk kétszer az on-ra és válasszuk a "release" egéreseményt; 2. az Actions >Statements>Conditions/Loops kategóriában kattintsunk kétszer az if-re és mint feltételt írjuk be, hogy Access eq "Matrix" (a Matrix szó lesz az a jelszó, amivel megnézhetjük a filmet); 3. az Actions>Movie Clip Control kategóriában kattintsunk a gotoAndStop-ra és írjuk be, hogy "Belépés"; 4. az Actions >Statements>Conditions/Loops kategóriában kattintsunk az else-re, 5. menjünk vissza a Movie Clip Control kategóriába, kattintsunk a gotoAndStop-ra és írjuk be, hogy "Újrapróbál"; A Control>Test Movie (Ellenõrzés>Film próba) paranccsal teszteljük le munkánkat.
310
Ha a WEB DESIGNERS gombra kattintunk, a program kérni fogja a jelszót: ha a szövegmezõbe beírjuk, hogy "Matrix", a web designer-ek fotóira kattintva elolvashatunk néhány Személyi Állományt. Ha más szót írunk be a password helyére, a program hibaüzenetet küld nekünk és újra kéri a jelszót. A nyomógomb segítségével visszatérhetünk az üres beviteli mezõhöz és újrapróbálkozhatunk a jelszóval.
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 311
15. FEJEZET
2012.03.28.
9:29
Page 313
15. Fejezet
1. Lecke Szöveg beszúrása külsõ file-ból Tervünk kidolgozása során elõbb vagy utóbb szükségünk lesz egy olyan területre, amelyben a szöveg idõnként változik. Ahelyett, hogy állandóan módosítani kellene a filmet, a loadVariables tevékenység felhasználásával külsõ fájlból is importálhatunk szöveget. Nyissuk meg újból a felület.fla (Oktató Cd> Flash_óraimunkák>Fejezet_14>felület_14F_5L.fla) fájlt és hozzunk létre egy "Portfolio" nevû szintet. A 70-es fotogramhoz szúrjunk be egy kulcsfotogramot és rendeljünk hozzá "txt" címkét. (228. Ábra)
313
flashcs4_vs4_2.qxd
228. Ábra
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 314
Adobe Flash CS4 II. Menjünk a "Felület" szint 1-es fotogramjára, jelöljük ki a stage-en PORTFOLIO nyomógombot és nyissuk meg az Actions panelt. Innen a következõ script-et írjuk be a nyomógombhoz: on (release) { GotoAndPlay("txt"); }
314
A PORTFOLIO gomb lenyomásakor a film a "txt" fotogramra fog ugrani. A kijelölt "txt" fotogrammal aktiváljuk a Szöveg eszközt. Menjünk a középen lévõ négyszögbe és rajzoljunk egy akkora mezõt, amelynek mérete nagyjából megegyezik magának a Résznek a méretével. Jelöljük ki a Properties (Tulajdonságok) panelen a Dinamic Text-t (Dinamikus Szöveg). Válasszuk a _sans betûtípust, a 12-es betûméretet és a fehér betûszínt. A (Var:) változóhoz társítsuk a "szövegMezõ" nevet és a Vonaltípus legördülõ listájából válasszuk a Multiline-t (Többsoros) (229. Ábra).
229. Ábra
2012.03.28.
9:29
Page 315
15. Fejezet Nyissuk meg a Windows Jegyzettömbjét és hozzuk létre azt a szöveges fájlt, aminek a PORTFOLIO nyomógombon történõ "release" eseménykor kell letöltõdnie. Az most nem olyan lényeges, hogy mit írunk be szövegnek, inkább az az érdekes, hogy hogyan: az elsõ sor legelejére írjuk be, hogy "szövegMezõ=" (230. Ábra).
230. Ábra Mentsük el a szöveges fájlt példa.txt név alatt ugyanabba a mappába, amelyikben a felület.fla fájl is található. Most, hogy elkészültünk a txt fájllal, azt kell elérnünk, hogy a PORTFOLIO gomb "release" eseményére a szöveg a Dinamikus szöveg mezõbe töltõdjön. A még mindig kijelölt "txt" fotogramnál nyissuk meg az Actions panelt, jelöljük ki a Actions>Browser/Network kategóriát és kattintsunk kétszer a loadVariables-re. URL-nek írjuk be szöveges Fájl nevét ("példa.txt") (231. Ábra).
315
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 316
Adobe Flash CS4 II.
231. Ábra
316
Zárjuk be az Actions panelt és teszteljük le filmet. Kattintsunk a PORTFOLIO gombra, vagyis a dinamikus szöveget tartalmazó részre mutató hivatkozási elemre és már meg is tekinthetjük a példa.txt szöveges fájl tartalmát. Ha meg akarjuk változtatni a PORTFOLIO rész tartalmát, egyszerûen csak írjuk fölül a szöveget.
2012.03.28.
9:29
Page 317
15. Fejezet
2. Lecke Multimédiás tartalom beszúrása Azt már megtanultuk, hogyan hozzunk létre olyan alapfelületet, ami különbözõ tartalmakat mutat be és amelyben nyomógombok révén a film különbözõ részeivel léphetünk interaktív kapcsolatba. Multimédiás tartalommal fogjuk webhelyünket gyarapítani; és a korábban gyártott egyszerû rolloverek helyébe rollover hangeffekteket és animált nyomógombokat fogunk létrehozni. Mint minden Flash kisfilmnél, a letöltési idõ csökkentésének érdekében most is érdemes kisméretû fájlokkal dolgoznunk. A több tartalommal bíró filmklipek általában kisebbek mint az ugyanilyen grafikus objektumok. Az egyetlen probléma velük csak az, hogy a stage-en nem nézhetjük meg az elõzetes képet. Tehát ahhoz, hogy megnézzük jól mûködik-e a kisfilm, le kell játszanunk azt.
Rollover hangok Azt már tudjuk, hogyan kell fotogramhoz hangot hozzáadni. Ez alkalommal olyan rollover hangot fogunk létrehozni, ami egészen addig ismétlõdik, amíg az egér a nyomógombon található és csak akkor áll le, ha az egérmutató elhagyja a gombot.
317
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 318
Adobe Flash CS4 II. Nyissuk meg a felület.fla fájlt (Oktató Cd: Flash_óraimunkák>Fejezet_14>felület_15F_1L.fla) és menjünk a HOME Page nyomógomb editor-jába. A nyomógombhoz hozzunk létre egy új szintet és nevezzük el "hangok"-nak. Az Over - Rajta állapoton hozzunk létre egy kulcsfotogramot (232. Ábra).
232. Ábra
318
Az Oktató CD Hangok mappájából válasszunk egy hangot és importáljuk a Könyvtárba. Jelöljük ki az Over - Rajta állapotot és a Properties (Tulajdonságok) panelen jelöljük ki a kiválasztott hangot. A ciklikus ismétlõdés értékét állítsuk be 99999-re; így biztosan folyamatosan ismétlõdni fog a hang. Most állítsuk be a szinkronba hozást, ami azt mondja meg a filmnek, hogy mit csináljon a hanggal, amikor az egér a nyomógombon található: a Sync menübõl válasszuk a Start-t (Indítás). (233. Ábra)
2012.03.28.
9:29
Page 319
15. Fejezet
233. Ábra A hang akkor szólal meg, amikor az egér a nyomógombon van. Ha viszont lehúzzuk róla az egeret, a hang ugyanúgy szól. Ahhoz, hogy a hang elnémuljon amikor az egér már nincs a nyomógombon, ugyanazt a hangot az Up - Fönt-höz is hozzá kell adnunk. Itt viszont a Sync menübõl válasszuk a Stop-t. Próbáljuk ki, hogyan mûködik!
Animált gombok Filmkliphez ugyanúgy rendelhetünk tevékenységet, mint nyomógombhoz. Ez azt jelenti, hogy animált nyomógombokat is létrehozhatunk, amelyek sokkal élénkebbé teszik azt a filmet, ahova beszúrjuk õket. Példaként nézzük meg az Oktató Cd>Flash_óraimunkák> Fejezet_15 mappában található animált_nyomógomb.fla fájlt.
319
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 320
Adobe Flash CS4 II. Ezután menjünk vissza a felület.fla munkánkra, hozzunk létre egy új Filmklip Szimbólumot és a HOME billentyû rajzolatához alkalmas egyszerû animációt. Miután készen vagyunk, menjünk ismét a Home nyomógomb editor-jába, hozzunk létre egy új szintet, a "Klip"-et és húzzuk az 1-es szint fölé. Az Over - Rajta állapotba szúrjunk be egy kulcsfotogramot és szúrjuk be az imént készített klipet. Nézzük meg az effekt elõzetes képét.
Háttérhang Amikor a tizenegyedik fejezetben kisfilmünkbe beszúrtuk a Starwars filmzenéjét, azt mondtuk, hogy bizonyos hangok zavaróan hathatnak az éppen keresést végzõ felhasználóra. Egy halk háttérhangot viszont beszúrhatnánk a felületbe, amit aztán kedvünk szerint bármikor leállíthatnánk. Ugyanazzal a technikával, mint amelyet a rollover hangok szinkronba hozásánál alkalmaztunk, készíthetünk a fõ tervünktõl teljesen elkülönülõ dokumentumot is.
320
Példaként nézzük meg az Oktató Cd> Flash_óraimunkák>Fejezet_15 mappában található equalizátor.swf fájlt (234. Ábra).
2012.03.28.
9:29
Page 321
15. Fejezet
234. Ábra Nézzük meg a kisfilmet. A fájlban a Mátrix filmzenéjét használtuk fel, de nyugodtan választhatunk más zenét is. A következõ leckében azt fogjuk megtanulni, hogyan kell felületünkbe hangszínszabályozót beszúrni.
321
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 322
Adobe Flash CS4 II.
3. Lecke Külsõ Flash file beszúrása Most on-line Galériánk különbözõ részeibe fogunk belépni. Ha ezeket még nem készítettük el, válasszunk ki az elõzõ leckékben létrehozott tervek közül hármat. Hozzunk létre egy új szintet. Nevezzük el "Tervek"-nek és a 80-as fotogramhoz szúrjunk be egy kulcsfotogramot. Ezt címkézzük föl "terv1"-ként. Szúrjunk be egy kulcsfotogramot a 90-es fotogramhoz is, a címke itt legyen "terv2", majd a 100-as fotogramhoz, ahol a címke neve legyen "terv3".
322
Ezután a "Felület" szint 1-es fotogramjában minden nyomógombhoz rendeljünk tevékenységet úgy, hogy a film a Terv1 gomb lenyomásakor a 80-as fotogramra, a Terv2 gomb lenyomásakor a 90-es fotogramra és a Terv3 gomb lenyomásakor pedig a 100-as fotogramra ugorjon. Az Actions panel segítségével, rendeljünk a Kapcsolatok nyomógombhoz is egy tevékenységet. A nyomógomb neve azt sugallja, hogy az objektumon realizálódó "release" esemény az elõzõleg bevitt e-mail címmel elindítja a levelezõprogramot (235. Ábra).
2012.03.28.
9:29
Page 323
15. Fejezet
235. Ábra A Webhelyünkön való navigálást ezek a nyomógombok és az õket kísérõ kódok biztosítják. A kód minden részben közli a Flash-el, hogy a filmnek mikor és hova kell ugornia és hogy abban a bizonyos pontban melyik utasítás fogja a Flash-t vezérelni. Hogy filmünk mérete minél kisebb legyen, Flash filmet másik filmen belül is futtathatunk. Ugyanezt a technikát fogjuk alkalmazni terveink felületünkbe történõ betöltésére. Nyissuk meg a starwars.fla film legutolsó verzióját (Oktató Cd: Flash_óraimunkák>Fejezet_11>Starwars_11F_5L). Mentsük el Starwars.fla néven. A Properties (Tulajdonságok) panelen ellenõrizzük le a stage méretét (300x200 pixel) és a File>Export Movie paranccsal hozzuk létre SWF kiterjesztését.
323
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 324
Adobe Flash CS4 II. Mentsük el a Starwars.swf fájlt abba a mappába, amelyikben a felület.fla fájl is található. A "terv1" fotogramtól a felületnek módosulnia kell, hogy képes legyen a "nagy" terveket is befogadni. A "Felület" szint 80-as fotogramjába szúrjunk be egy kulcsfotogramot és töröljük a bal oldali két négyszöget. Így a középsõ négyszöget meg tudjuk növelni. A "terv1" fotogramba hozzunk létre egy 300x200-as kitöltés nélküli négyszöget és vigyük a középsõ négyszög közepére.
324
A négyszöget konvertáljuk Filmklip szimbólummá és nevezzük el "tárolódoboz"-nak. (236. Ábra)
236. Ábra A Properties (Tulajdonságok) panelen rendeljük a szimbólum példányához az "aKlip" nevet.
2012.03.28.
9:29
Page 325
15. Fejezet A Tervek szinten jelöljük ki a "terv1" fotogramot és nyissuk meg az Actions panelt. Szúrjuk be a loadMovie tevékenységet és az URL mezõbe írjuk be, hogy "Starwars.swf". Pozíció-nak írjuk be, hogy "aKlip" (237. Ábra).
237. Ábra A külsõ film akkor fog betöltõdni a végsõ filmbe, amikor lenyomjuk, majd felengedjük a Terv1 nyomógombot. A képernyõn látható animáció egy filmklipen belül kerül lejátszásra úgy, hogy közben a fõ Idõegyenes mozdulatlan marad. Teszteljük le a filmet. A többi tervnél is végezhetünk ugyanilyen mûveletsort. Térjünk rá on-line galériánk "gyöngyszemére", a háttérhangra: Az elõzõ mûvelet alapján létre tudunk hozni háttérhangot is. A "felület" szinten töröljük a 25-ös kulcsfotogramot. Hozzunk létre egy kitöltés nélküli négyszöget. és vigyük a két négyszögbe.
325
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 326
Adobe Flash CS4 II. A négyszöget konvertáljuk Filmklip szimbólummá és nevezzük el "hangdoboz"-nak. A Properties (Tulajdonságok) panelen rendeljük a szimbólum példányához az "hang" nevet. (238. Ábra)
238. Ábra
326
A Felület szint 1-es fotogramjához a következõ script-et írjuk be (239. Ábra):
239. Ábra
2012.03.28.
9:29
Page 327
15. Fejezet Ahhoz, hogy az equalizátor.swf (hangszínszabályozó) fájl is mûködjön, a fájlt felület.fla fájl-lal közös mappába kell raknunk. Teszteljük le az animációt és exportáljátok SWF-be. Ha filmklipbe szúrjuk be a hangszínszabályozót, mûködését a fõ jelenet Idõegyenestõl teljesen függetleníteni tudjuk, tehát a felhasználó a webhelyen akkor és oda megy, amikor akar és közben folyamatosan hallhatja a háttérzenét, de félbe is szakíthatja azt, ha a hangszóró rajzára kattint. A hangszínszabályozó a terveinkre vonatkozó részekben nem fog szerepelni, mivel azt szeretnénk, ha a látogató ott kifejezetten a mi munkáinkra koncentrálna.
327
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 328
Adobe Flash CS4 II.
4. Lecke Multimédiás lejátszó készítése webhelyünkhöz Ebben a leckében a tizedik fejezetben létrehozott felületet fogjuk felhasználni és multimédiás lejátszót fogunk készíteni webhelyünkhöz. Célunk az, hogy bemutassuk, hogyan lehet egy álló felületbõl teljesen animált webhelyet létrehozni. Nyissuk meg a video_lejátszó.fla fájlt a 10. fejezetben módosított formában (vagy Oktató Cd> Flash_óraimunkák> Fejezet_15>video_lejátszó.fla). Hozzunk létre egy új Filmklip szimbólumot és nevezzük el "tartódoboz"-nak. Ne adjunk hozzá semmit a filmkliphez, egyelõre üresen marad, s majd videoklipjeinkkel fogjuk õket feltölteni.
328
Hozzunk létre egy új szintet, nevezzük el "film"-nek és vigyük a "felület" szint alá. A View menüben jelöljük ki a Rulers-t (Vonalzók). Hozzunk létre két vezetõt: egy vízszinteset a képernyõ felsõ szegélyével párhuzamosan és egy függõlegeset, amit pedig a képernyõ alsó szegélyéhez kell igazítanunk. (240. Ábra)
2012.03.28.
9:29
Page 329
15. Fejezet
240. Ábra A "tartódoboz" filmklipet vigyük a két vezetõ metszési pontjába, mindjárt azt is megérjük, hogy miért éppen oda. Egy kis fehér kör jelenik meg (241. Ábra).
329
flashcs4_vs4_2.qxd
241. Ábra
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 330
Adobe Flash CS4 II. A példányt nevezzük el "movie"-nak. A Könyvtárban kattintsunk kétszer a play (lejátszás) gombra. Kattintsunk az Over - Rajta állapotra és az Idõegyenes kiterjesztéséhez nyomjuk meg az F6 billentyût. Kattintsunk a rajzra és a Properties (Tulajdonságok) panelen változtassuk meg a színét. A Down - Lent és Hit - Lenyomva állapothoz is hozzunk létre egy kulcsfotogramot. A Hit - Lenyomva állapotban rajzoljunk a nyomógomb közepébe egy oválist, ez lesz a klikkelhetõ terület. Ez láthatatlan lesz.
330
A Könyvtárból válasszuk ki a megfelelõ gombokat és a fenti módszerrel hozzuk létre a visszatekerés és a stop (leállítás) gombokat. (242. Ábra)
242. Ábra
2012.03.28.
9:29
Page 331
15. Fejezet Hozzunk létre egy új szintet, nevezzük el "Nyomógombok"-nak és a 243. Ábrán látható módon húzzuk a nyomógombokat a munkaterületre.
243. Ábra A könyvtárból húzzuk a "Nyomógombok" szinten belül a munkaterületre a menu_button1, menu_button2 és a menu_button3 nyomógombokat is. (244. Ábra)
331
flashcs4_vs4_2.qxd
244. Ábra
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 332
Adobe Flash CS4 II. Ez utóbbi három gomb már készen van, mindenesetre ha színt akarunk változtatni rajtuk, kattintsunk kétszer a "nyomógombrajz" grafikai szimbólumra és a Properties (Tulajdonságok) panelen végezzük el a szükséges beállításokat. Hozzunk létre egy új szintet, nevezzük el "Háttér"-nek és vigyük a szintlista aljára. A Vonal eszközzel rajzoljunk néhány vonalat, adjuk hozzá az "háttéranimálás" filmklipet és vigyük alulra. (245. Ábra)
332
245. Ábra
2012.03.28.
9:29
Page 333
15. Fejezet
5. Lecke Akcióra készen Az elõzõ leckében videólejátszót készítettünk a szükséges nyomógombokkal együtt, s most ezekhez a nyomógombokhoz tipikus funkcióikat szeretnénk társítani, vagyis dinamikussá szeretnénk tenni a videó tartalmát és azt szeretnénk elérni, hogy csak akkor töltõdjön le, ha a felhasználó azt úgy akarja. Így a felhasználónak nem kell feleslegesen kivárnia a különbözõ filmek letöltési idejét, mert megválaszthatja, hogy melyek legyenek azok, amelyeket meg akar nézni. Nyissuk meg a video_lejátszó.fla (Oktató Cd: Flash_óraimunkák>Fejezet_15>video_lejátszó_15F_4L) fájlt és a "Nyomógombok" szinten jelöljük ki balról az elsõ gombot. Ez a Visszatekerés gomb. Az Actions panel megjelenítéséhez nyomjuk meg az F9-es billentyût és írjuk be a szükséges ActionScript-et, ami az 1-es fotogramra viszi "movie" a nevû példányt (246. Ábra). A középsõ gomb a Stop gomb. Az Actions panelen vigyük be az ábrán látható kódot. Ez a mûvelet utasítja a "movie" példányt, hogy a nyomógomb lenyomásakor állítsa le a lejátszást (247. Ábra).
333
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 334
Adobe Flash CS4 II.
334
246. Ábra
247. Ábra Az utolsó nyomógomb a Play gomb. Ezzel a mûvelettel utasítjuk a "movie" példányt, hogy a nyomógomb megnyomásakor játssza le a videót (248. Ábra).
2012.03.28.
9:29
Page 335
15. Fejezet
248. Ábra Most azonban tényleg gondoljunk a videónkra és jelöljük ki a menu_button1 nyomógombot. Szúrjuk be a 249. ábrán látható tevékenységet, ami majd a video.swf videót fogja betölteni (249. Ábra).
335
flashcs4_vs4_2.qxd
249. Ábra
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 336
Adobe Flash CS4 II. Enek a script-nek köszönhetõen a Flash a videómenü elsõ gombjának lenyomásakor a "movie" példányba tölti be a video.swf fájlt. A teljesen üres "movie" példány lehetõvé teszi, hogy a videólejátszó gyorsan töltõdjön le s a klipek csak akkor fognak különkülön letöltõdni, ha a felhasználó ezt külön kér. Megjegyzés A "movie" példányt azért helyeztük a két vezetõ metszési pontjába, mert minden lehívott fájl bal felsõ sarka a filmklip középpontjával esik egybe (editing módban a kis kereszt a középpontot jelöli). A megismert technikák felhasználásával most már fantáziadúsabb és élénkebb webhelyeket tudunk Flash-ben készíteni és annyi videót szúrunk be, ahányat csak akarunk.
336
A tartalomra vonatkozóan van még egy ötletünk: a Flash kisfilmeket a File>Export paranccsal AVI formátumba is exportálhatjuk. Amikor kódolt filmet .avi-ba exportálunk, módosíthatunk rajta néhány jellemzõt: a film magasságát és szélességét, a képminõséget és a hangra vonatkozó beállításokat. Ne felejtsük azonban el, hogy a jobb minõség egyben hosszabb letöltési idõt is jelent.
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 337
16. FEJEZET
2012.03.28.
9:29
Page 339
16. Fejezet
1. Lecke Film optimalizálása Végezetül néhány jó tanáccsal szeretnénk szolgálni arra vonatkozóan, hogy hogyan lehet filmet optimalizálni.
Ahogyan a Flash dolgozik A Streaming A Flash a streaming-et a szerverrõl a kliens gépre történõ adatátvitelre használja. Állandó adatfolyamot hoz létre, mely a hivatkozástól vagy a szerverek elzáródásától függ. Film létrehozása közben arra is gondolnunk kell, hogy lesznek olyan felhasználók is, akik csak kis sebességû letöltéssel rendelkeznek. Példa: a Flash letölt, majd lejátszik egy kisfilmet s úgy tûnik, hogy minden jól megy, amikor egyszercsak BUMM!!! egy olyan fotogramhoz ér, ami nagyon "nehéz" animációt tartalmaz. Mi történik ilyenkor? A Flash megállítja a filmlejátszást, letölti a teljes animációt és újrakezdi a lejátszást. Ez persze hosszú letöltési idõvel és várakozással jár és munkánk megtekintése során a felhasználó már rögtön az elején akadályokba ütközik.
339
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 340
Adobe Flash CS4 II. A legjobb megoldás erre az, ha swf kiterjesztésû filmjeink méretét a lehetõ legjobban megpróbáljuk visszaszorítani anélkül, hogy ez annak, amit meg akarunk jeleníteni, hátrányára válna. Ne csak a film egészét vizsgáljuk meg, hanem minden egyes fotogramot is. Távolítsunk el minden felesleges vonalat (például a szegélyeket) valamint a fel nem használt szimbólumokat is. Optimalizáljuk a hangot, esetleg tömörítsük õket még jobban. Ahonnan csak tudunk, csípjünk le egy kicsit a méretekbõl s meglátjuk, a végeredmény látványos lesz.
Hogyan lehet a Kb-t alacsonyan tartani és gyors lejátszást elérni Elemek rajzolásakor vagy importálásakor töröljünk minden felesleges vonalat. Mikor Flash-el rajzolunk gyakran maradnak vissza felesleges vonaldarabkák. Töröljük õket, meglátjuk, nem csak a fájl mérete lesz kisebb, de mi is "tiszta" környezetben dolgozhatunk.
340
Bitmap kép importálásakor szinte minden alkalommal importálunk olyan részeket is, amelyek a megjelenítéskor nem is látszódnak. Nagyítsuk föl, nézzük meg közelebbrõl és töröljünk mindent, ami nem feltétlenül szükséges. A Modify (Kidolgozás) menüben találjuk a Smooth (Tompítás), a Straighten (Kiegyenesít) és az Optimize (Optimalizál) pontokat. Rajzainkat utólagosan ezekkel is tovább tömöríthetjük, tehát használjuk õket bátran.
2012.03.28.
9:29
Page 341
16. Fejezet A létrehozott szimbólumokat, amikor csak tudjuk, használjuk fel újra és újra. Minden alkalommal, mikor objektumot hozunk létre, legyen az akár egy egyszerû vonal, fájlunk méretét növeljük vele. Ha ezt a vonalat a filmben többször is felhasználjuk, alakítsuk át szimbólummá és változtassuk meg a tulajdonságait (méret, szín, elhelyezés) a jelenetben, ahol csak lehetséges és szükséges. Így a könyvtárban mindig a rendelkezésünkre fog állni, amikor szükségünk van rá. Kerüljünk túl sok animációt egyidõben. Az animációk nagyon megdolgoztatják a CPU-t. Ha túl sok animáció mozog a képernyõn, a Flash lelassul, mert hogy nem mindenkinek van Athlon-ja vagy P4-e a legfrissebb grafikai kártyával és jó sok RAM-mal felszerelve. - Kerüljük az Alfa használatát, ha ugyanazt a hatást a Színez paranccsal is el tudjuk érni. - Ne használjunk egyetlen filmfelvételben sem túl sok interpolációt. - Ne változtassunk túl sokszor színt egyetlen filmkockában. - Objektumot ne nagyítsunk meg nagyon magas százalékos értékekkel. - Feleslegesen ne használjunk kitöltést és lejtõsséget. - Ha az animáció nagy, a képeket töltsük le elõre. A képeket az animáció megérkezése elõtt elrejthetjük: elég beszúrni egy szintet, valami mögé el tudjuk helyezni és hozzá tudjuk adni a szükséges képeket. Amikor elérkezik az animáció ideje, a képek már le vannak töltve. - Az egész filmrõl készítsünk Preload -ot. - Az elérhetõ összes böngészõben teszteljük le filmünk összes verzióját. Ha lehet, próbáljuk ki eltérõ központi egységgel rendelkezõ számítógépeket. - Ha lehet, használjuk mindig ugyanazt a betûtípust. Minél többféle betûtípust használunk, annál nagyobb lesz a fájl mérete.
341
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 342
Adobe Flash CS4 II.
2. Lecke Egyszerû preload Amikor webhelyet készítünk, azt szeretnénk, ha weboldalainkat minél többen látogatnák.
342
A leggyakoribb hiba, amit a Flash-el dolgozó designer-ek elkövetnek az az, hogy hagyják, hogy a látogató kivárja, amíg a képek és animációk letöltõdnek és semmilyen vissszajelzés sem érkezik számunkra affelõl, hogy éppen mi is történik. Lehet, hogy animáció közben egy viszonylag nagy méretû képet is le kell töltenünk: ilyenkor az animáció leáll és csak akkor folytatódik, ha a teljes letöltés befejezõdött. Ez azt az érzetet keltheti a látogatóban, hogy megszakadt a kapcsolat vagy hogy a webhellyel van valami gond, mindenesetre elhagyja a webhelyet. Létezik egy megoldás erre a problémára és ez pedig a preloader, ami tájékoztatja a látogatót arról, hogy a letöltés folyamata jól mûködik-e és hogy mennyi van még hátra a letöltési idõbõl. Lejátszás elõtt elõször teljesen letöltõdnek az animációk és az animáció nem fog sem félbeszakadni, sem pedig hibás kapcsolat érzetét kelteni a felhasználóban. Nyissuk meg a felület.fla fájl legutolsó verzióját (Oktató Cd: Flash_óraimunkák>Fejezet_16>terv_felület.fla) és minthogy egy olyan animációt szeretnénk létrehozni, ami letöltés közben fog
2012.03.28.
9:29
Page 343
16. Fejezet futni, hozzunk létre egy új Jelenetet (Scene). Pontosan úgy, ahogyan egy vígjáték is több felvonásból áll, egy Flash kisfilm is állhat több "jelenetbõl", melyek egymás után kerülnek lejátszásra. Ezidáig mindig csak egyetlen jelentben dolgoztunk, ez pedig a "Jelenet1" (Scene1) volt. Új jelenet beszúrásához kattintsunk a Window>Other Panels>Scene (Ablak>Jelenet) menüpontokra, majd kattintsunk a + (Add Scene) jelre. Az új jelenetet nevezzük el "loader"-nek, a "Jelenet1"-et pedig "index"-nek (250. Ábra).
250. Ábra Hozzunk létre két szintet: egy "tevékenységek"-et és egy "elemek"-et. Az egyik a filmet fogja vezérelni, míg a másik az elemeket, az animációt fogja tartalmazni. Ebben a leckében nem fogunk új animációt készíteni, hanem a korábban létrehozottakból fogunk egyet felhasználni. Emlékezünk a hatodik lecke mozifilmes visszaszámlálójára? A File>Import to Library paranccsal importáljuk a Könyvtárba a timer.swf fájlt (Oktató Cd: Flash_óraimunkák> Fejezet_16>timer.swf). A fájl egyelõre a terv_ felület.fla könyvtár egy filmklipje.
343
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 344
Adobe Flash CS4 II. Húzzuk az "elemek" szint 1-es fotogramjába. Az "elemek" szinten hozzunk létre egy Frame-t (F5) az elsõtõl a második fotogramig. A "tevékenység" szinten a 2-es fotogramhoz szúrjunk be egy üres kulcsfotogramot (F7). Az 1-es fotogramhoz írjuk be a következõ tevékenységet: (251. Ábra) if (_root.getBytesLoaded()= =_root.getBytesTotal()) { gotoAndPlay("index", 1); }
344
251. Ábra Most már gyakorlott ActionScript programozók vagyunk, tehát az Actions panelen a kategóriák közül keressük ki a megfelelõ action-t. Ha még bizonytalanok vagyunk, nyissuk meg az Oktató Cd: Flash_óraimunkák>Fejezet_16 mappában található kód2.txt fájlt és másoljuk be a kódot.
2012.03.28.
9:29
Page 345
16. Fejezet Ez a módszer felhasználja a getBytesloaded és a getBytesTotal filmek tulajdonságait. Az elsõ a letöltött fotogramok számát adja meg, a második a film összes fotogramjainak számát. Az If ciklus ezt a két értéket veti össze. Megjegyzés ActionScript-ben a _root utasítás a film fõ Idõegyenesére vonatkozik. Minthogy mind a kód, mind pedig a szimbólumok tartalmaznak Idõegyeneset, nehéz lenne egyetlen példányra hivatkozni nevek nélkül. Ha valami a kódban nem mûködik, használjunk az objektumhoz abszolút útvonalat. Ezért van az, hogy sok filmben találunk _root.példánynév típusú kódot. A 251. Ábrán látható script-et a következõképpen fordíthatnánk le: HA a letöltött byte-ok mennyisége megegyezik az összmenynyiséggel, az "index" jelenet 1-es fotogramját mutatja. Fontos, hogy ez a tevékenység a preload elsõ fotogramjába legyen beszúrva és hogy ugyanebben a fotogramban szerepeljen a felhasználót a várakozási idõrõl értesítõ animáció is (például egy homokóra). A második kulcsfotogramba írjunk be egy olyan tevékenységet, ami lehetõvé teszi, hogy a film ciklusban forogjon (252. Ábra).
345
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 346
Adobe Flash CS4 II.
252. Ábra Ez az utasítás a filmet a kezdõ preload animációjának playbackjére viszi, ha a fõ film nem lett még teljesen letöltve.
346
Az animáció leteszteléséhez nyomjuk meg a Ctrl+Enter billentyûkombinációt. A letöltés szimulálásához kattintsunk a View>Streaming Graph pontra, kapcsoljuk be a View>Badwidth Profiler menüpontot is. (253. Ábra) Próbáljunk ki különbözõ Letöltési beállításokat (Debug menü) különbözõ letöltési sebességekkel. Az, hogy rakunk-e filmünkbe preload-ot, rajtunk áll. Mindenesetre minden 150Kb-ot meghaladó animációba érdemes beszúrni. Nem csak a film kisebb-nagyobb megszakításait kerülhetjük el vele, hanem egy kis fantáziával weboldalunkat is dinamikusabbá és esztétikusabbá tehetjük vele.
2012.03.28.
9:29
Page 347
16. Fejezet
253. Ábra
347
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 348
Adobe Flash CS4 II.
3. Lecke Preload százalékos növekedéssel Az elõzõ leckében készített preload csökkenti a várakozó felhasználó türelmetlenségét, viszont nem tájékoztat a helyes mûködésrõl s ha nem jelenne meg olyan felirat a képernyõn, mint a "loading", "A letöltés folymatban van", Kérem, várjon", "Wait", a felhasználó biztosan otthagyná weboldalunkat, ha a várakozási idõ több, mint amire számított. Most nézzük meg, hogy hogyan kell az elõzõ leckében létrehozott preload-ot úgy módosítani, hogy az azt is közölje a felhasználóval, hogy éppen mi történik.
348
Indítsuk el a Flash-t és töltsük be az elõzõ leckében elkészített terv_felület.fla fájlt (Oktató Cd: Flash_óraimunkák> Fejezet_16>terv_felület_16F_2L.fla). Elõször egy olyan sávot fogunk készíteni, ami a letöltés állapotát mutatja. Ez ahhoz hasonló, mint amit program installálásakor látunk számítógépünk képernyõjén. Hozzunk létre egy új Filmklip szimbólumot és nevezzük el "Letöltési sáv"-nak.
2012.03.28.
9:29
Page 349
16. Fejezet Rajzoljunk egy kitöltõszín nélküli fehér négyszöget a klip közepére. Állítsuk be a négyszög méretét 300 pixel szélesre és 20 pixel magasra. Az Idõegyenesen jelöljük ki a 100-as fotogramot és új fotogram hozzáadásához nyomjuk meg az F5-ös billentyût. Szúrjunk be egy "bar" filmklipet és rajzoljunk egy kis függõleges vonalat. A vonalhosszúság legyen 20 pixel, vastagsága pedig 1 pixel. A Letöltési sáv filmklipben adjunk hozzá egy új szintet és a 2.szintet húzzuk a 1.szint alá úgy, hogy ez utóbbi legyen a lista tetején. A szintlistában található kis lakatra kattintva blokkoljuk az 1.szintet. Jelöljük ki a 2.szint elsõ fotogramját és a Könyvtárból húzzuk a "bar" filmklipet a jelenetbe, a letöltési sáv elejére. Jelöljük ki a 100-as fotogramot és új kulcsfotogram létrehozásához nyomjuk meg az F6-os billentyût. Jelöljük ki a 100-as kulcsfotogramot, és a "bar" filmklippet húzzuk a letöltési sáv végére. A két fotogram közé szúrjunk be mozgás interpolációt. 100 fotogramnyi hossz ideális az animáció letöltési arányának ábrázolására. Menjünk a "Loader" jelenetbe és adjunk hozzá egy új szintet, a "letöltési sáv"-ot.
349
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 350
Adobe Flash CS4 II. A sáv filmklipjét vigyük a jelenet közepére a Timer alá. A Properties (Tulajdonságok) panelrõl rendeljük a példányhoz a "loader" nevet. Még mindig a sáv szintjén, jelöljük ki a Szöveg eszközt és a letöltési sáv alá rajzoljunk egy mezõt. A módot változtassuk Dinamikus szöveg-re. A Var dobozba írjuk be, hogy "százalék". Ez lehetõvé teszi, hogy a szöveg a "százalék" változó alapján változzon meg. Kattintsunk a "tevékenységek" szintre, töröljünk ki mindent, amit korábban beírtunk és vigyük be a 254. Ábrán látható kódot.
350
254. Ábra letöltve=_root.getBytesLoaded(); összesen=_root.getBytesTotal(); százalékarány = Math.round((_root.getBytesLoaded()/_root.get BytesTotal())*100) add "% letöltve"; _root.loader.gotoAndPlay(Math.round((_root.getBytesLoaded()/ _root.getBytesTotal())*100));
2012.03.28.
9:29
Page 351
16. Fejezet if (letöltve==összesen) { nextScene(); } (Ezt az Oktató Cd: Flash_óraimunkák>Fejezet_16 mappában található kód3.txt fájlban is megtaláljuk.) Az elsõ két sor nem más, mint változó-kijelentés: a letöltve változó a film letöltése során tárolt fotogramszámot számolja. Az összesen változó a film összfotogram számát számolja. A harmadik kódsor a letöltési százalékarány megjelenítéséhez szükséges számítást tartalmazza. A Math.round függvény a kódban leírt matematikai függvény értékét kerekíti: a letöltött byte-ok száma osztva a fájl méretével, szorozva 100-al egy olyan értéket ad, amit a Math.round még kerekíteni fog és ami végül a dinamikus szövegmezõben jelenik meg. A hatodik sorban lévõ script jelentése megegyezik a gotoAndPlay-el ("index",1), de annál általánosabb. Képzeljük el, hogy a Loader és az Index jelenet közt még egy jelenet van, mondjuk a Bevezet, ami egy másik bevezetõ animációt tartalmaz. Ezzel a script-el annyi jelenetet illeszthetünk még be, ahányat csak akarunk. Megjegyzés Weboldalakon egyre elterjedtebb az olyan bevezetõ képsorok használata, melyek hangeffekteket, zenét és némi animációt is tartalmaznak azért, hogy a webhelyet a többitõl megkülönböztessék. Mindenesetre érdemes "Ugrás", vagy "Bevezetés átugrása" nyomógombot beszúrnunk, hogy a rendszeres látogatók számára lehetõvé tegyük azt, hogy átugorják a már sokszor látott részeket.
351
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 352
Adobe Flash CS4 II. A második fotogramot hagyjuk változatlanul.
352
Az animáció leteszteléséhez nyomjuk meg a Ctrl+Enter billentyûkombinációt, majd a letöltés szimulálásához kattintsunk a View>Streaming Graph pontra, kapcsoljuk be a View>Badwidth Profiler menüpontot is, játsszuk le a kijelölt animációt.
2012.03.28.
9:29
Page 353
16. Fejezet
4. Lecke Sávszélesség profil használata Honnan tudjuk, hogy mennyire hatékony az elõletöltõ script? Láttuk már, hogy Flash-ben van egy View>Badwidth Profiler (Sávszélesség profil) nevû segédprogram, ami pont erre való (255. Ábra).
353
flashcs4_vs4_2.qxd
255. Ábra
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 354
Adobe Flash CS4 II. A sávszélesség profil lehetõvé teszi, hogy a legmegfelelõbb sávszélességet állítsuk be. Ezenkívül mind a streaming-et, mind pedig a leolvasófejet egyszerre is megjeleníthetjük úgy, hogy gyorsan mérlegelni lehessen, ha javítani kell. A sávszélesség profil ezenkívül a filmrõl is számos információt hordoz: a fájl méretét, és az elõletöltés idõtartamát, ami igen lényeges tényezõ.
354
Ha a Control>Test Movie (Ellenõrzés>Film próba) parancsot választjuk, a Flash .SWF kiterjesztésû fájlt hoz létre és azt a lejátszás környezetében futtatja. Válasszuk a View>Badwidth Profiler (Nézet>Sávszélesség profil) pontokat: a Flash olyan sávot rajzol, ami a streaming erõforrásait írja le. A piros vonal fölött lévõ elemek problémásak, mivel az erõforrások nagyobbak (a fájl nagyobb), mint amennyit a streaming könnyedén elbír. Válasszuk a View>Show Streaming -t (Megjelenítés>Letöltés szimulálása) (256. Ábra)
256. Ábra
2012.03.28.
9:29
Page 355
16. Fejezet Miközben megy a film, a zöld sávon a streaming állapotát látjuk. Az olvasófej pedig azt jelzi, hogy éppen melyik fotogramot játssza le. Ideális esetben a streaming mutató mindig egy kicsit elõrébb van mint az olvasófej, jelezve a lehetõ legrövidebb letöltési idõt. Az olyan eseteket kerüljük, melyekben az olvasófej eléri a streaming-et és más anyag letöltésére kell várnunk.
355
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 356
Adobe Flash CS4 II.
5. Lecke A méret jelentés létrehozása
356
Ha kitûzött célunkat nem sikerül elérnünk (a fájl streaming-je nem helyes, a fájl túl nagy), meg kell keresni a leginkább problémát okozó erõforrást és meg kell próbálni méretét lecsökkenteni. A film utólagos optimalizálására alkalmas eszköz a Méret jelentés, ami a Flash kisfilm exportálása közben jön létre. Méret jelentés létrehozásához a filmet swf fájl-ként kell importálnunk és a Flash Player exportálása ablakban a Méret jelentés létrehozása pontot kell kijelölnünk. Ugyanebben az ablakban jó, ha aktiváljuk a Védelem az importálástól opciót is, fõleg ha kereskedelmi forgalomban lévõ fájl-lal dolgozunk (257. Ábra).
257. Ábra
2012.03.28.
9:29
Page 357
16. Fejezet Amikor aktiváljuk ezt az opciót, a fájlt nem lehet a weben letölteni és szétbontani. Ez nem csak munkánkat, de klienseink tulajdonosi erõforrásait is védelmezi. Ha ezután az OK-ra kattintunk, a program swf formátumban elmenti a dokumentumot, a film jelentésével megnyílik az Output ablak majdpedig elmentésre kerül egy .TXT fájl-ban. Valamelyik szövegszerkesztõben nyissuk meg a Report.txt fájlt, ahol a film az exportált fájl neve, a mi esetünkben terv_ felület_ 15F_5L Report.txt. (258. Ábra).
258. Ábra Azt látjuk, hogy a méret jelentés egy olyan szöveges fájl, ami alapvetõ információkat tartalmaz: - fotogramról fotogramra a felhasznált byte-ok listáját - betûtípusokat, betûket, a felhasznált byte-ok számát - A Könyvtár felhasznált szimbólumait és méreteiket byte-ban - Minden hangot és bitmap képet a tömörítés elõtti és utáni méretekkel
357
flashcs4_vs4_2.qxd
flashcs4_vs4_2.qxd
2012.03.28.
9:29
Page 358
Adobe Flash CS4 II. Ha elemezzük a Jelentést, megtudhatjuk, hogy az egyes fotogramok hány byte-ot foglalnak el. Így fotogramról fotogramra megvizsgálhatjuk azt, hogy vannake benne olyan elemek, melyek akadályozhatják a lejátszást. "Nagy" terveink immár elkészültek.
358
Most már minden olyan technikát ismerünk, melyek segítségével az Interneten is publikálható animációt készíthetünk.
