MACROMEDIA FLASH 5. BEVEZETÉS MIÉRT PONT FLASH? Mára a flash olyannyira elterjedt, hogy szinte két csoportra oszthatók, mind az internetes oldalak, mind az azokat készítők: akik használnak, és akik nem használnak flasht. De általában mindenki hallott már a flashről ezt-azt. Egyre több internetes oldalt, rajzfilmet, animációt – ez alatt most a művészfilmeket értem- játékokat készítenek flash-el. Népszerűségét, sikerét mi sem bizonyítja jobban, mint a versenyek nagy száma, ahol a legnagyobbak is megmérettetnek. De van valami, amiért kezdőknek is ajánlom: nem kell hozzá profinak lenni, hogy egy egyszerű animációt elkészíts. Pár perc, és már kész is egy reklámcsík ( banner )! KORTLÁTOK E jegyzet terjedelménél fogva nem képes bemutatni a program minden lehetőségét, de igyekszik átadni azokat az ismereteket, amivel már bátran neki lehet állni saját ötletek megvalósításának. A következő felsorolás pár olyan oldal címe, amelyek messze túlmutat ezen az ismertetőn. Oktatofilmek, tanpéldák, technikai források www.swf.hu www.edhanson.com www.flashplanet.com www.flashlite.net www.were-here.com www.flashguru.co.uk www.flashkit.com
–magyar, minden amire szükség lehet, -forrásfájlok, flash5 példák -oktatóanyag, forráskód, flash4 anyagok -flash5 segédlet -flash5 példák, erőforrások, -flash5 actionscript
Audio fájlok www.flashkit.com www.were-here.com www.webdevelopersjournal.com www.creativepro.com www.sitetracks.com www.panic.com www.loopz.com
-flash5 nyitott forráskódok, hangfájlok -hangok: wav formátumban -swf fájlok,segédprg-k:mp3kereső, zeneszerkesztő -flash5 infók -letölthető hangok -saját Audion prg letöltése,használata -hangok:1dollar/db
Tippek és technikák www.moock.org www.canada.cnet.com www.flaxfx.com www.macromedia.com
-kerdés-válasz,példák -how to -szöveg effektek -no comment
Forráskódok
1
MACROMEDIA FLASH 5. www.flashkit.com www.were-here.com www.sapphire-innovation.com www.macromedia.com www.flashpro.nl www.flashguru.co.uk
-flash5 arena: actionscript -előtöltőtől a bevásárlókocsiig minden -flash4-5 szimbólumok -flash5 filmek, kódok -flash kódok: ütközés, random generátor
Említésre érdemes flash filmek www.macromedia.com/showcase-site www.digitalorgasm.com www.flashplanet.com -site check www.were-here.com www.shop4software.com -igényes www.altpick.com -the idea exchange oldala www.dvhandbook.com www.portfolios.com -interaktiv portfoliók… -profiknak www.creativepro.com Bővítmények www.macromedia.com/downloads
OPERÁCIÓS REDSZEREK Fontos megjegyeznem, hogy a Macromedia Flash 5-ös verzióján szemléltetem a példákat. Ennek létezik Macintosh változata is, de itt csak a Windowsos verzió menüjét és billentyűzetkiosztásait ismertetem. A Macintoshos felhasználóktól elnézést kérek, de csak Windowsos verzióval rendelkezem. VEKTORGRAFIKA KONTRA BITTÉRKÉPEK A flash vektor grafikát használ. Hogy mi is ez?Erről már mindenki tanult. Bittérképekes ábrázolás esetén a kép minden egyes pontjának színét eltároljuk, addig vektor grafikánál ez egészen másként működik. Itt a képet egyszerű elemekre bontva (kör, vonal,…), azok tulajdonságait: típusát, színét, méretét,… tároljuk. Ez miért jó? Gondoljunk bele: pl. egy 50 pixel sugarú kört szeretnénk ábrázolni. Bittérképes módban ehhez minimum 100*100 pont színét kell tárolni –a háttér színét is tudnunk kell. Ugyanez vektorosan: eltárolunk egy négyzet típusú elemet háttér színnel, 100*100-as mérettel, (50,50)-es koordinátákkal, és egy kört az adott színnel, 50-es sugárral, és (50,50)-es koordinátákkal. Ugye mennyivel kevesebb adat, mennyivel kisebb fájl méret!
2
MACROMEDIA FLASH 5. Bittérképes grafika Nagyobb fájlméret Jó választás fényképekhez Nehéz vonalakat és alakzatokat szerkeszteni A böngészők alapban ismerik, nem kell hozzá bővítő modul (plug-in), pl.: jpeg, gif képek Nem a legjobb animációk készítéséhez Egyszerűen elkészíthető Nagyításkor torzul
Vektoros grafika Kisebb fájlméret Fényképek esetén rossz hatásfokú A vonalak és alakzatok könnyen szerkeszthetők Régebbi böngészőkhöz plug-in kellett, IE.4-től tartalmazzák a megjelenítő modult Legjobb választás animációkhoz Nehezebben elsajátítható a készítésük Nem torzul nagyításkor
1. ábra Raszteres és vektorgrakikus kép nagyítása során a vektoros minősége változatlam, míg a raszteres a nagyítás mértékében torzul
Ugyanaz a kép raszteres és vektoros esetben ábázolva jelentős minőségbeli különbséget mutat TERVEZÉS •
•
Mielőtt nekilátunk egy feladatnak előtte érdemes tervet készíteni, amivel később sok időt spórolhatunk meg, az utólagos javítások és módosítások elkerülésével. Először tisztázzuk magunkban mit is szeretnénk megvalósítani. Ehhez milyen erőforrások kellenek(hangminta, bitmap,… ), honnan szerezzük be azokat. Mi az amit nekünk kell előállítanunk. Másik fontos dolog, ki kell dolgozni a látványtervet: mi, milyen sorrendben jelenjen meg a színen, mennyi ideig tartózkodjon ott, mi történjen vele. Ezt eseménytáblának (storyboard)is szokták hívni. Ez jó arra is, hogy lássuk, hol tartunk a munkánkban, mit kell még csinálni.
3
MACROMEDIA FLASH 5.
2. ábra Eseménytábla
•
A harmadik szempont, hogy hova szánjuk a kész művet: internetre, ekkor a kis méret a legfontosabb, vagy CD-re, bemutatóra, ekkor a minőség, a nagy színmélység, a tiszta hangok, a kidolgozott alakzatokon van a hangsúly.
OPTIMALIZÁLÁS A flash segítséget nyújt nekünk az optimalizálás terén is. Ha filmünket lejátszuk, akkor a lejátszó VIEW menüjében találjuk a BANDWIDTH PROFILERT. Ez segít abban, hogy a film sávszélesség igényét ill. a kockák letöltődésének idejét nyomon követhessük. BANDWIDTH PROFILER Ha a saját gépünkön teszteljük a filmet, akkor az meglehetősen gyorsan fog lejátszódni. Amikor viszont az internetről füttatjuk, akkor a sávszélesség szűk kereszmetszete miatt szaggatott lehet a lejátszás, és a kép és a hang szinkronja is torzulhat. Ennek a problémának az elkerülésére nyújt segítséget a BANDWIDTH PROFILER, melyet a lejátszó VIEW/BANDWIDTH PROFILER menüponttjával érhetünk el. Ekkor megjeleik egy új, két részből álló ablak, melynek bal oldalán a film általános tulajdonságait mutatja, mint a méretét (Dim), a képkockasebességet (Fr Rate), az swf fájl méretét, a film hosszát képkockákban, és másodpercben (Duration), valamint az előtöltési időt (Preload), jobb oldalán pedig a képkockák méretével arányos nagyságú sötét és világos kockák vannak elrendezve egymás mellett (STREAMING) vagy egymáson (FRAME BY FRAME). Beállíthatjuk, hogy milyen adatátviteli sebességen teszteljünk. A DEBUG menü tartalmaz 3 előre definiált értéket, de magunk is létrehozhatunk ettől eltérőt. Igaz a 14,4k-s modemek már lassan eltünőben vannak, de ha azt szeretnénk, hogy minél több emberhez eljusson a munkánk érdemes azokra is gondolni, akiknek régi modemjuk van. 4
MACROMEDIA FLASH 5.
A VIEW/FRAME BY FRAME ponttal tudjuk megnézni a kockák sorozatát. Az egymás melletti négyzetek szemléltetik az egyes pozíciópan lévő kockákat. A függőleges skála a méret bájtokban ill. kilobájtokban. A legalsó piros vonal azt a méretet jelzi, ami alatt a lejátszás folyamatos. Az ennél nagyobb méretű kockák a lejátszás egyenetlenségét, akadozását okozzák.
3. ábra Frame by frame graph 14,4k-s modemmel
A kockák letöltődését a streaming graph mutatja, amit a VIEW/STREAMING GRAPH menüponttal jeleníthetünk meg. Ekkor a jobb oldalon a vizszintes skála a letöltési időt mutatja. Itt a méretet jelölő kockák egymáson helyezkednek el, szemléltetve a letöltést, azaz az egységnyi idő alatt letöltött képkockákat. Ha a képkockák elég kis méretűek, akkor egy oszlopban több is előfordűl, ha viszont tulságosan nagy, akkor átlóghat egy vagy több másik oszlopba is. Általános szabály az, hogy egy kocka letöltési ideje sose legyen nagyobb a lejátszási sebességnél. Ezzel biztosítható a folyamatos lejátszás.
4. ábra Streaming graph 56,6k-s modemmel
FLASH FELHASZNÁLÓI FELÜLET Tehát, a terv megvan, már csak meg kell valósítanunk. Az első, hogy indítsuk el a programot! 5
MACROMEDIA FLASH 5. Lássuk, mit és hol találunk a képernyőn! idősáv
panelek
menü rétegek
eszközök
Felhasználható terület
szerkesztő Látható terület
gyorsindító 5. ábra Felhasználói felület
szerkesztő: A képernyő legnagyobb területét a szerkesztő foglalja el. Itt lehet megrajzolni az egyes jelenetek hátterét, megszerkeszteni a felhasználandó objektumokat, ill. összeállítani magát a látványt. Két részből áll: a látható (megjelenített) és a felhasználható terület. A felhasználható terület, az amelyre rajzolhatunk. Ez nagyobb, mint az a terület amit a flash megjelenít (látható terület). Ez különösen akkor jön jól, ha pl. egy objektumot akarunk beúsztatni a szín széléről. Ilyenkor az animációt a látható területen kívülről indíthatjuk. gyorindító: a felület legalján balra helyezkedik el. Segítségével könnnyebben érhetők el a leggyakrabban használt panelek. Sorban a következők: info -általános informáciokat mutatja: szélesség, magasság, koordináták, mixer -színválasztó, character –szöveg módosító panel, instance –viselkedés, név, effektek,..., movie explorer –navigációs 6
MACROMEDIA FLASH 5. eszköz, nagy klippek esetén nélkülözhetetlen, action –az egyes objektumorhoz ill. kulcsképkockákhoz rendelt action scripteket jeleníti meg, ill. módosítani is itt lehet és a library –szimbólum könyvtár.
6. ábra Gyorsindító
menü:
Az általános műveletektől kezdve a precíz beállításokig minden megvalósítható a megfelelő menüponttal. FILE: fájl műveletek, mint pl.: megnyitás, mentés, ill. export, import és a publikálás (ezekről később még részletesen tárgyalunk) EDIT: másolás, beillesztés, kivágás, ... VIEW: nagyítás, vonalzó, vezetők megjelenítése, elrejtése, ... INSERT: új objektum, réteg, képkocka, kulcsképkocka beillesztése ...
idősáv:
Az idősávot leginkább, mint egymásra helyezett filmtekercseket lehet elképzelni. Minden egyes tekercs egy rétegnek felel meg. A legfelső tekercsen lévő objektum takarja az alatta lévőt, az pedig az ő alatta lévőt, ... Minden réteg képkockákra van osztva, minél távolabb vagyunk az első kockától annál több időnek kell eltelnie, hogy az animáció az adott pozícióba érjen (feltéve, hogy nem alkalmazunk hurkokat, ill. ugrásokat – erről majd egy kicsit később) A rétegek sorrendje megegyezik az idősávbeli sorrendjükkel: a felsőbb réteg takarja az alatta lévő rétegeket. (pl. az ábrán a 0. az 1-et, az 1. a 2-at, ... ) A rétegeknek érdemes valami jellegzetes nevet adni, hogy a későbbiek során könnyebb legyen megtalálni, hogy egy adott objektum éppen melyik rétegen van. Jó megoldás, ha a gombokat egy „gomb” nevű rétegre rakjuk, ugyan így a hangeffektusokat a „hang” rétegre, stb. Munka közben jól jöhet, ha azokat a rétegeket, amelyek csak zavarnának egyszerűen kikapcsoljuk a láthatóság gombbal. Amennyiben szükséges, hogy lássuk a többi réteget is, de zavar a zsúfoltság, válasszuk a kontúros megjelenítést. Ilyenkor az objektumoknak csak a körvonala látszik. Ha egy réteggel készen vagyunk, akkor érdemes azt leblokkolni (lezárni), megvédve így a véletlenszerű módosításoktól.
rétegek:
7
MACROMEDIA FLASH 5.
7. ábra Rétegek
A rétegek sorrendje bármikor megváltoztatható a munkánk során, ehhez nyomjuk le az egér jobb gombját a réteg neve felett , és húzzuk a kívánt pozícióba, majd engedjük fel a gombot. eszköztár: az itt látható eszközök segítségével hozhatjuk létre / rajzolhatjuk meg alakzatainkat, háttereinket.
8
MACROMEDIA FLASH 5.
8. ábra Eszközök
Nyíl:
segítségével módosíthatjuk az objektumok alakját, ill. kijölhetjükegyet kattintva annak belsejét,duplán kattintva a körvonalával együtt.A kijelölt alakzatot az adott rétegen belül mozgathatjuk , ha a kijelölt területen lenyomjuk ismét az egér bal gombját, és nyomva tartva a célhelyre húzzuk. Vonal: egyenes vonal rajzolható vele, melynek színe és stílusa is beállítható. Nyomjuk le az egérgombot, (ez adja a vonal kezdő pontját) lenyomva tartva húzzuk a végpont helyére, és engedjük fel. A <SHIFT> lenyomásával a vonal irány 45°-os ill. annak egész számú többszöröse lesz. Toll: a toll segítségével egymás után elhelyezett pontoka összekötő vonalakat, görbéket húzhatunk, és azok görbületét később meg is változtathatjuk. Ellipszis: segítségével ellipsziseket, ill. a <SHIFT> lenyomásával köröket szerkeszthetünk Ceruza: a szabadkézi rajzolás eszköze. Tetszőleges alakzatot rajzolhatunk vele. Az így keletkezett alakzat vonalszínét a tintásüveg, kitöltő színét a festékesvödörrel lehet megváltoztatni. Tartsuk lenyomva az <SHIFT> -et, ha azt akarjuk, hogy a vonal iránya 45°-os ill. annak egész számú többszöröse legyen. A ceruza eszközt kiválasztva az eszköztár alján megjelennek a opciók: Egyenes(straighten): ebben a módban a vonal egyenes szakaszokból, és azokat összekötő egyenesekből áll Simított(smooth): ezzel simított, vonalakat húzhatunk, melyen nem lesznek töréspontok
9
MACROMEDIA FLASH 5. Tinta(ink): szabadkézi rajzoláshoz ez a legmegfelelőbb, ilyenkor nem módosítja a flash az vonalakat (elsősorban digitális ceruza alkalmazása, ill. jó kézügyességgel rendelkezők részére hasznos)
Tintásüveg: a tintásüveg segítségével a vonalak színét, ill. tulajdonságait tudjuk megváltoztatni. A vonal stílusának beállításához nyissuk meg a WINDOWS/PANELS/STROKE menüponttal a következő panelt:
itt beállítható a vonal vastagsága, színe, illetve típusa: folytonos, szaggatott, stb. Miután beállítottuk a vonal jellemzőit, kattintsunk a módosítandó alakzaton a bal egérgombbal. Pipetta: a pipetta segítségünkre lehet akkor, mikor nem tudjuk pontosan egy már korábban használt színről, hogy melyik is az, vagy csak nem akarjuk a palettáról keresgélni. Ilyenkor sok időt spórolhatunk meg azzal, hogy ezt az eszközt kiválasztva kattintunk a kívánt színen, és innentől ez lesz az aktuális előtérszín, amivel dolgozhatunk. Rész kijelölés: ezzel az objektum alakján finomíthatunk. Ha kijelöljük valamely alakzatunkat, annak kuntúrja kulcspontokkal szakaszokra bontva jelenik meg, mintha a toll eszközzel rajzoltuk volna. Egy pontot kiválasztva a ponthoz tartozó két szakasz görbületét szabályozhatjuk a megjelenő karok segítségével.
Lasszó:
ez egy speciális kijelölő eszköz, melynek segítségével tetszőleges részét választhatjuk ki a képünknek. A módosítok segítségével lehetőségünk nyílik szögletes (polinom) alakzat kijelölésére. 10
MACROMEDIA FLASH 5. Szöveg:
hosszabb szövegek feliratok készítét segíti. Hasonlóan, mint bármely office alkalmazásban itt is állítható a betük színe, vastagsága, mérete, alakja színe,... ikonjával, ill. A A Character panelen (előhívható a gyorsindító WINDOW/PANEL/CHARACTER menüvel is) beállíthatók a felnt említett tulajdonságok.
9. ábra Betütípus beállító panel
A paragraph fülre kattintva a szövegtörzsek, bekezdékes tulajdonságaitmódosíthatjuk. Ilyenek az igazítás: balra-, jobbrazárt, középre igazított és sorkizárt. Állíthatóa bekezdések közötti távolság ill. a margók nagysága is.
10. ábra A paragraph panel
A Flashben a szövegnek 3 típusát lehet választani a TEXT OPTION panelen a legördülő menü segítségével. Statikus: ezt akkor használjuk, amikor valami információt akarunk közölni. A panel két jelölő négyzete a beépített betük használatának engedélyezését és a kiválaszthatóságot teszi lehetővé. A beépített készlet segítségével csökkenthetjük a fájl méretet, hisz nem kell egy külső karakterfájlt csatolni a klipphez.
11. ábra Statikus szöveg
Input: a mozink interaktivitását növeli, ha input szövegmezőket használunk. Ennek segítségével futási időben kérhetünk be adatot a felhasználótól. Azt egy változóban eltárolva, amit szintén a 11
MACROMEDIA FLASH 5. panelen adunk meg bármikor felhasználhatjuk. Lehet egy vagy több soros. Megaddható a maximálisan bevihető sztring hossza.
12. ábra Beviteli mező
Dinamikus: hasonló beállításokat tartalmaz, mint az input mező. Legfőbb eltérés az, hogy míg az input mezőt a felhasználó, addig a dinamikusat a szerző módosítja. A megadott változó tartalmát jeleníti meg, ami lehet akár egy külső fájlban is, vagy egy input mező értéke. Jól alkalmazható hírlevelek, ill. gyakran változó tartalmú internetes oldalak esetén, ahol csak a tartalom változik, a forma nem.
13. ábra Dinamikus szöveg
A szöveget egy egységként kezeli a Flash, így ha azt szeretnénk, hogy a betük ne csakszavanként, hanem azokon belül is változzanak egy kicsit ravaszabbnak kell lenni. Fel kell darabolni a szöveget betükre: MODIFY/BREAK APART menüpont segítségével. Ez viszint azzal jár, hogy nem lehet többé a megszokott módon váltotatni a tulajdonsgait, de cserébe nagyobb szabadságot kapunk.
14. ábra Tetszölegesen ódosítható az összes betű: elforgatható, kicsinyíthető, sarkosítható, torzítható színezhető. Teljesen az alkotó fantáziájától függ, hogy milyen is lesz valójában.
12
MACROMEDIA FLASH 5.
1. feladat [akvárium] • Először is állítsuk be a film paramétereit a MODIFY/MOVIE menüpont segítségével: o a képkockasebességet hagyjuk 12-n, o a film méretét: 600*400-ra (Dimensions), o a film hátterét: fehérre a lenyíló négyzet segítségével (Background Color) • az idősávon a „Layer 1” réteget nevezzük át „Akvárium”-nak (dupla kattintás a néven, majd beírhatjuk az új nevet) • rajzoljuk meg az akvárium üveget: o állítsunk be előtérszínnek egy világoskék színt, háttérszínnek pedig egy árnyalattal világosabbat, majd rajzoljunk egy kört. • Most vágjunk le a kör tetejét: o változtassuk az elötérszínt feketére o rajzolunk egy vonalat, ami elmetszi a kört ( a flash innentől a kört két teljesen független darabként kezeli: vonal alatti és feletti rész ) o
15. ábra Vágjuk el az akváriumot
o jelöljük ki a nyíl segítségével a felső részt duplakattintással, majd a
billentyűt lenyomva töröljük azt. Hasonló módon töröljük a fekete vonalat is. • Az akvárium már kész is, csak az a gond, hogy csurig van. Messük megint egy fekete egyenessel. Most szimplán kattintsunk a felső részen, üssük le a gombot, töröljük a fekete egyenest, és már kész is. • Már csak egy szépség hibája van: meg kell rajzolni a felső peremet. A pipetta segítségével vegyünk mintát az üveg kontúrjából (kiválasztjuk a pipettát, rávisszük az üveg kontúrjára, és lenyomjuk a balgombot). Rajzoljunk egy vízszintes egyenest ezzel a színnel az ív két végpontja között. Kész is az akvárium.
16. ábra Kész is az akvárium
SZIMBOLUMOK
13
MACROMEDIA FLASH 5. A szimbólumok a flash alapelemei. Ezek segítségével lehet mozgóvá ill. interaktívvá tenni filmjeinket. 3 fajtája van: Mozi klipp: kis filmrészlet, mely teljesen önállóan vezérelhető (irányítható, torzítható,...) Olyanok, akár egy külön kis mozi, hiszen saját idősávjuk van. Tartalamazhatnak bármilyen más obbjektumot: gombot, grafikát, másik mozi klippet vagy akár skriptet is. Gomb: vezérlőelem, scripteket rendelhetünk hozzá, mellyel a filmet befolyásolhatjuk. 4 megkülönböztetett képcockát tartalmaz, melyek akár moziklippeket is tartalmazhatnak. Így animált gombokat is könnyedén hozhatunk létre. UP: a gomb felengedett állapotát mutatja, OVER: ha az egeret a gomb fölé húzzuk, akkor ezt látjuk, DOWN: a lenyomott állapotot tartalmazza, HIT: a gomb érzékelési tartományát lehet megadni: annak a területnek a nagyságát és alakját, ami fölé húzva az egeret, a gomb aktiválódik.
17. ábra A gombok megkülönböztetett kulcsképkockái
Grafika :
Igen mókás gombok hozhatók létre úgy, ha az érzékelő terület és a gomb nem egy helyre esik, vagy ha nem rajzoljuk meg a felengedett állapotot ( láthatatlan gomb). statikus objektum, szerepe leginkább a többszöri felhasználás memória csökkentésében van. Álltalában bitmapeket tartalmaz. Ezek azonban nagymértékben növelik a fájl méretét. Célszerű tehát a lehető legtömörebb formátumot használni, pl: gif, jpg ill. png. Van még egy lehetőség: a bitmapeket le lehet redukálni (threshold), azaz csökkenteni lehet a felhasznált színek számát. Ehhez jeöljük ki a bitmepet a színen, majd válasszuk a MODIFY/TRACE BITMAP menüpontot.
18. ábra Trace bitmap panel
Itt beállíthatjuk a redukálás nagyságát, azt hogy egy pont mekkora sugarú környezetét vegye figyelembe a új szín választása során, és hogy milyen legyen a z ívek és sarkok módosítása.
14
MACROMEDIA FLASH 5.
19. ábra Leredukált bitmap
2. Feladat [hal] Bővítsük ki az előbb elkezdett filmet: • Készítsünk egy új réteget hal néven erre fogjuk majd a halat helyezni. • hozzunk létre egy új mozi klippet az INSERT/NEW SYMBOL segítségével o Név legyen hal, viselkedése (behavior):mozi klip • Egyből a szerkesztő nézetbe jutunk. Nevezük el az egyetlen rétegünket testnek: dupla kattintás az eredeti néven, és irjuk be test, majd üssük le az <ENTER>-t. • Rajzoljunk egy halacskát (amilyent csak szeretnénk)
20. ábra A könyvtár: tartalmazza a klippben szereplő összes objektumot. Előhívható a gyosrindítóból, ill. a WINDOW/LIBRARY mnüponttal. Két részből áll: a felső rész a villámnézet, ahol a moziklippek ill. a hangminták le is játszhatók, az alsó rész pedig a könyvtár, az elemek listája.
15
MACROMEDIA FLASH 5. •
Az idősáv felett a Scene 1-re kattintva visszajutunk a filmünkhöz.
21. ábra Scene 1: vissza a főidősávra
•
A libraryban válasszuk ki a hal objektumot, és a képre kattintva húzzuk egyszerűek az akvárium fölé.
22. ábra Most itt tartunk
•
+<ENTER>-el vagy a CONTROL/ TEST MOVIE –vel le is játszhatjuk a filmet.
3. feladat: Nos, ez így elég szép, de még nem mozog. Bírjuk mozgásra a halat! • Jelöljük ki a halat, majd az INSERT/CREATE MOTION_TWEEN menüpontot • Hozzunk létre egy kockát az akvárium 10-es pozíciójában (), és egy kulcsképkockát () a Hal réteg 10-es pozíciójában. • Jelöljük ki a halat, és húzzuk át az akvárium másik oldalára. • Ha mindent jól csináltunk, megjelent egy lila nyíl, mely a köztes mozgást jelenti. A köztes mozgás az, amikor egy mozgás kezdő és végső pozícióját adjuk meg, a többit pedig a gép számolja ki. Ezzel sok időt és helyet spórolunk meg, hiszen nem kell minden egyes képkockát külön megrajzolni, és eltárolni.
23. ábra Ha minden sikerült, ezt látjuk
16
MACROMEDIA FLASH 5. •
+<ENTER>-el vagy a CONTROL/ TEST MOVIE –vel már nézhetjük is a halacskát, ahogy úszik.
4. feladat: Az előző feladatban a hal még elég egyszerű mozgást végez, ami ráadásul nem is valami szép. Sokkal jobb lenne, ha mondjuk körbe- körbe úszkálna. • Jelöljük ki a hal réteget, majd a jobb gombbnyomásra megjelenő menüből válasszuk az ADD GUIDE LINE pontot. Ekkor a hal réteg felett megjelent egy új: GUIDE:HAL nevü réteg, mely a hal útvonalát fogja ábrázolni. • Az új rétek első kockájába rajzoljunk egy ellipszist.
24. ábra Az ellipszis határozza majd meg a hal úítvonalát
•
hogy valóban útvonal legyen az meg kell szakítani a görbét. Pl.: a jobb oldalán beleradírozunk. Így már meg is van a kezdő és a végpont.
25. ábra Megszakítva a görbét kapjuk a kezdő és végpontot
•
• • •
Fogjuk meg a halat, és húzuk rá a görbe egyik végpontjára. Egy kis kör jelenik meg mozgatás közben, ami az objektum referencia pontját jelöli, azaz azt a pontot, aminél fogva az a görbét követni fogja. Ha elég közel viszük a görbéhez akkor magához vonzza a halat.Ez a start pozíció. Jelöljük ki a halat, INSERT/CREATE MOTION TWEEN menüponttal hozzunk létre egy köztes animációt. Készítsünk képkockát az Akvárium és a Guide:Hal rétegek 40-as pozíciójában. A Hal rétegben pedig szintén a 40-esben egy kulcskockát. Az így létrehozott kulcskockában húzzuk a halat a görbe másik végpontjába.
17
MACROMEDIA FLASH 5.
26. ábra Ha eddig mindent jól csináltunk, akkor most így néz ki az idősávunk.
• • •
Ha most leteszteljuk a filmet azt tapasztaljuk. Hogy a halacska előre megy, aztán visszatolat. Nos, hát ez még nem az igazi. Hozzunk létre kulcskockákat a 10-es, 20-as és 30-as pozíciókban. Ahhoz hogy a hal ne tolasson a 20-as és 30-as kockában meg kell fordítani: MODIFY/TRANSFORM/FLIP HORIZONTAL menüpont segítségével. Hogy még élethűbb legyen a 10-es kockában nagyítsuk, a 30-asban kicsinyítsuk egy kicsit, ezáltal érzékeltetve a teret.
5. feladat: Az igaz, hogy most már térben úszik a hal, de csak mint egy csónak, nem mozognak az uszonyai. Animáljuk meg egy kicsit! • Jelöljük ki a halat a LIBRARYBAN, kattintsunk duplán a nevén, hogy szerkeszthetővé váljon. • Hozzunk létre egy új réteget az eddigi felett, és nevezzük el Uszonynak • A nyíllal jelöljük ki a hal uszonyait, száját és a szemgolyóját (<SHIFT>-et lenyomva különálló részeket is kijelölhetünk egymás után, úgy hogy azt a Flash egy egységként fogja kezelni), és másoljuk át az Uszony rétegre: + és + szokáros billentyű kombinációkkal. Majd töröljük az eredetit. • A test téteg 5-ös pozíciójában hozzunk létre egy üres képkockát (). Ez csak azért kell, hogy a hal teste is látszódjon az egész animáció alatt. • Az Uszony rétegben pedig a 2, 3, 4 és 5-ös rétegben is hozzunk létre egy-egy kulcs képkockát (). • Az 1-5 ös kockákban rajzoljuk meg az uszonyok, ill. a szem száj mozgását. Ezt a fajta animálást képkockákkénti animációnak (frame by frame) hívják. A rajzfílm készítők használják ezt a megoldást, amikor karaktereik finom mozgását szeretnék bemutatni. Sajnos ez nagyon aprólékos, és helyigényes eljárás, de a minőséget nagyban emeli. • Ha most lejátszuk a filmet a halacska már valóban úszni fog. 6. feladat: • Már csak egy dolog hiányzik ahhoz, hogy valóban teljes legyen a film: a hang. • Ehhez hozzunk létre egy új réteget a fő idősávban Hangok néven. Ebbe a rétegbe fogjuk helyezni a hangmintát. • A FILE/IMPORT menüpontban tudunk külső fájlokat importálni filmünkbe. Válasszuk ki a patak.mp3 fájlt. Ha sikerült akkor a LYBRARYBAN megjelenik Patak néven. Ezt a villámnézet ablakban lévő lejátszó gombbal el is indíthatjuk (jobbra mutató háromszög) • Jelöljük ki a Hangok réteg első képkockáját, nyomjuk le az egér bal gombját a hangminta villámnézetablakán és húzzuk rá a színre. A hely lényegtelen, mivel nem fog látszani lejátszáskor.
18
MACROMEDIA FLASH 5.
27. ábra Beillesztett hanghullám a Hangok rétegben
7. feladat: • Addjunk a filmünkhöz egy kis tájékoztatót! Ehhez a film előtt létre kell hoznunk egy kis helyet, ahova azt helyezzük. • Jelöljük ki az eddig meglévő képkockákat, majd az egér segítségével húzzuk 2 kockával balra az idősávon. • Hozzunk létre egy új réteget Háttér néven, és az első 3 rétegébe tegyün egy-egy kulcskockát. • Az 1-es kockában hozzunk létre egy statikus szöveget, melyben kérjük a látogatót, hogy addja meg a nevét.
28. ábra A szöveg mezők
•
Közvetlenül alatta pedig egy input mezőt, ahova beírhatja a nevet. Ehhez a Text Option panelen állítsuk át Input Texté, változó név legyen nev. Jelöljük be a Border/Brg opciót, hogy az input mező körül legyen keter, ezzel tájékoztatva a felhasznáól, hogy hova kell beírnia a nevét.
29. ábra Input mező definiálása a név tárolásához
•
Ha most lejátszanánk a filmet, nem látnánk semmit ebből, mivel a film egyből tovább lépne a 2. kockára. Ezért meg kell állítani a fimlet. Ehhez jelöljük ki ezt a kockát az idősávon és nyomjuk le a jobb egérgombot. Válasszok az Action feliratot. Ekkor 19
MACROMEDIA FLASH 5. megjelenik az action panel, melyen a képkockához rendelhetünk utasításokat. A jobb oldali részben található a felhasználható utasítások listája. Ebből válasszuk ki a stop() utasítást, ami megálítja a filmet az adott kockánál. A kijelölt utasítást áthúzással vagy dupla kattintással tudjuk érvényesíteni. Az érvényes kód a panel jobb oldali részén látható.
30. ábra Action panel
• •
•
A 2. képkockában szintén hozzunk étre egy stop utasítást. Ezután jöhet az üdvözlés ill. a leírás. Helyezzünk egy statikus szöveget a színre ’Kedves’ tartalommal, majd közvetlenül mellé egy input textet, aminek legyen nev a változója, hogy az előző kockában megadott név jelenjen meg ebben a mezőben is, majd emellé szintén egy statikus boxot, amiben egy felkiáltó jel legyen. Ahhoz hogy szép legyen egyvonalba kell rendezni ezeket. Jelöljük ki mind a három szövegmezőt, és a WINDOW/PANELS/ALIGN menüponttal előhívható panelen válasszuk ki a függőleges igazítást.
31. ábra Align panel. Vizszintes, függőleges igazításhoz, távolsághoz méret igazításhoz
20
MACROMEDIA FLASH 5. • •
Hozzunk létre e három alatt egy újabb szövegdobozt, amiben ismertetjük a film részleteivel. A 3. kockában töröljünk ki mindent, hogy ne zavarjon a továbbiakban.
8. feladat: • Ez íg nagyon szép, csak az a gond, hogy nem lép tovább az 1-es kockáról a film. Ehhez használjunk gombot. • Az INSERT/NEW SYMBOL segítségével hozzunk létre egy Gomb nevű gombot. Rajzoljuk meg a felengedett, az érzékeny, a lenyomott és a reakció területeket. • Térjünk vissza a színre. Húzzuk a gombot az input mező mellé. Jobb gombbal előjövő menüből válasszuk ki az Action pontot. • Válasszuk ki a goto utasítást a listából. Ekkor alul megjelenik a paraméter listája.
32. ábra A gombhoz rendelt skript
• • • •
Jelöljük ki az első sort. Ekkor a gomb akciók közül lehet választani: lenyomás, felengedés, távoli felengedés, föléhúzás, lehúzás,... Válasszuk a lenyomást (Press). Jelöljük ki a következő sort, és a kockaszámnak írjuk be a 2-t. Így a gomb megnyomására a film a 2-es kockára ugrik. Húzzunk egy gombot a 2-es kockára is, annak goto utasításában viszont a 3-at írjunk, hogy a film tovább futhasson. Egyetlen gond van most már csak. Amikor a halacska teljesen körbe ér, újra az első kockára ugrik a film. Ez nekünk nem jó, mivel azt szeretnénk, hogy a 3. kockától ismétlődjön. Ehhez jelöljük ki az utolsó kockát, és rendeljünk hozzá egy goto utasítást, ami a 3. kockára juttatja a filmet.
21
MACROMEDIA FLASH 5.
OPTIMALIZÁLÁS Filmünk elkészítésekor minding törekedjünk arra, hogy a lehető legkisebb legyen a fájlméret. Ez leginkább akkor fontos, ha munkánkat az internetre szánjuk. Nem mindegy meddig kell várnia a felhasználónak az oldal letöltésére. Lehet, hogy meg se várja! A kis fájl méretet segíti: • Csoporttá alakítás • Képkockánkénti animáció helyett motion- vagy shapetween ( köztesmozgás, alakváltozás) használata, ha lehetséges • A többször előforduló ( ismétlődő ) alakzatokat nem külön-külön rajzoljuk meg, hanem szimbólumot hozunk létre, és abból több példányt használunk a megfelelő hely(ek)en • Bitmap-ek használatát minimalizáljuk: minél kevesebbszer ill. a lehető legkisebb méretben • A szükségtelen, felesleges üres képkockékat távolítsuk el • Optimalizáljuk az alakokat: MODIFY/OPTIMIZE CURVES menüpont segítségével • Beágyazott (-a saját betütípust a Flash belefordítja az swf fájlba ) betütípus helyett használjuk a beépítetteket • Lehetőleg minél kevesebb színátmenetet használjunk (gif-ként exportálva igen szembetűnő a méret különbség) TESZTELÉS Ha végre elkészült a remekmű, egy dolog van már csak hátra, mielőtt szélnek eresztenénk: TESZTELNI KELL!!! És ez talán az egyik legnehezebb feladat, hiszen rengeteg felhasználó kezébe eljuthat a munkánk. Nyílván való, hogy nem minden felhasználó rendelkezik csúcskategóriás géppel. Vannak akik nem is tudnak swf fájl-t lejátszani, nekik lehet, hogy animáltgif-ként tudjuk csak elérhetővé tenni a munkánkat. Ezért lehetőleg minél több konfiguráción (proci, RAM,…), minél több beálltással (felbontás, színmélység,…) kell tesztelni. És ha azt szeretnénk, hogy tényleg minél többen láthassák, figyeljünk a különböző formátumokra is, mint pl. gif,… EXPORT/PUBLIC Ha az animációnk készen van, nem kell mást tenni, mint exportálni/publikálni azt. Ehhez használjuk a FILE/EXPORT vagy a FILE/PUBLIC menüket. A különbség, hogy public esetén nagyobb szabadságot kapunk a beálltásokba, különböző valamint lehetőség van villámnézetre (preview) is. Ami kényelmesebb, mint minden egyes exportálás után, ha az nem megfelelő újra elölről kezdeni. Nagyon sok formátumba képes exportálni ill. publikálni a program: swf, gif, png,avi , mov, wmf, ... Képes akár képkockákként is elmenteni az animációt, így mást programokban is felhasználhatjuk azt, végezhetünk rajta utómunkálatokat.
22
