Flash Flash Flash mozgás hang interakci mozgás hang interakció Flash

Átírás

1

2 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.

3 Jelen könyvhöz tartozik CD-ROM is, melyen számos gyakorlatot találunk. Üdvözlet a Flash világában és jó munkát kívánunk!

4 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.

5 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. 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.

6 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.

7 Ilyen programokat az Inteneten is találunk. Néhány közülük kizárólag szöveganimálással foglalkozik ( míg mások háromdimenziós objektumokhoz kötött animációval ( 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.

8 1. FEJEZET

9 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.

10 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. 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.

11 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. 1. Ábra

12 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. 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.

13 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.

14 Ez az ablak lesz az állandó hivatkozási pont: egyfajta õrtorony, ami gyakran automatikusan változtatja a többi ablak funkcióit. 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.

15 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.

16 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. 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.

17 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.

18 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 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).

19 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.

20 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. 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.

21 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;

22 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. 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.

23 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).

24 4. Lecke 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.

25 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.

26 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 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.

27 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 IExplorer Netscape 3.0 Netscape x x x x x x x x x x x x x x x x846 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.

28 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. 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).

29 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).

30 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. 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)

31 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).

32 15. Ábra 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.

33 2. FEJEZET

34 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.

35 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. 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.