. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .




 
 
SEGÉDLETEK Flash alapok

Egyszerű interface készítése Flash MX-ben
  feltöltve: 2004.01.01 | szerző: Ducky | olvasva: 17985 alkalommal

 
 

Segédletemet azok számára készítettem, akik most kezdtek el kicsit jobban elmerülni a flash világában. Megtanulták az alapokat (MC-movie clip készítés,Buttons stb..) és most szeretnének valami összetettebb, de mégis egyszerű oldalt készíteni. Munkánk során egy alap Flash-weboldalt készítünk,amely rendelkezik háttérzenével, néhány hangefekttel, animált menüvel és tartalommal. Kiindulásnak szerintem ez megfelelő. Előre szeretném leszögezni, hogy nem vagyok tanár , ezért nem biztos, hogy minden ponton teljesen érthető leszek, ezért előre is elnézést kérek. A segédlet kiegészítése a forrás file, részletesen magyarázza az alaplépéseket, itt csak a fő pontokat vesszük át. Nem térek ki külön olyan elemekre, mint pl a gotoAndPlay() és más alapparancsok, mert ezekre szintén nagyszerű segédleteket találtok itt az SWF.hu-n. Az én véleményem az, hogy miközben olvassátok és csináljátok a segédletet, igyekezzetek grafikailag valami mást alkotni, bízzatok a kreativitásotokban, és ne egy az egyben ugyanazt készítsétek el, mint én. Ez is része lehet a tanulásnak. Mindenkinek jó munkát kívánok.

A kész művet ITT megtekintheted.

Háttér és alapok:

Készítsünk egy új animációt.Az alapvető paramétereket mindenki a saját meglátása szerint állítsa be, én a következőket használtam :

Dimensions : 800 px * 400px
Frame Rate : 20 fps (frame/sec)
Background Color : #000000 (fekete)
Ruler Units : Pixel

Ha beállítottunk mindent, jöhet a háttér elkészítése. Felső menü : Insert-New Symbol-Graphic-Neve lehet bármi, én háttérnek neveztem. Rajzoljuk meg a hátteret, vagy importáljunk be egy már kész rajzot, képet. Nem mindenki szeret Flash editorral rajzolni, én abban készítettem mindent.

Ha ezzel megvagyunk, készítsük el a loaderMC-t. Ez a movie fogja szabályozni a letöltést és formája, fajtája szerint kijelzi az aktuális állapotot. Erre a műveletre nem térek ki,mert a Segédletek-detektálás, preload címszó alatt található több verzió is erre a témára. A következő lépésben a főmozinkon csináljunk 2 Layert (réteget) és nevezzük el őket tetszőlegesen, pl.:loader és háttér. A loader első frame-jébe tegyük bele a loaderMC-t a másodikat hagyjuk üresen. A háttér layer első frame-je üres, a másodikba helyezzük bele a háttérMC-t és frame action-ban kapjon egy stop() ot. A harmadik layert én csak a magyarázatok miatt hoztam létre, nektek nem kell. Valahogy így néz ki:

Ettől a ponttol kezdve mindent a háttérMC-re pakolunk és nem a fömozinkba. Következő lépésben elkészítjük a menüMC-t . Ehhez csinálnunk kell gombokat, felső menü :insert-new symbol-button-neve bármi lehet, gomb. A gombokat animálhatjuk tetszésünk szerint, segédlet: gombok, menük-elgombolkoztató. Itt lehet tallózni. A menüMC-be helyezzük a gombokat, amennyit fel akarunk használni.Lehetnek a gombok az MC-ben egyetlen frame-en és akkor nem mozdulnak, de animálható is a mozgásuk, pl.: egyesével gördülnek be a színpadra vagy egyszerre a távolból, lehet variálni. A menüMC-t, ha elkészült helyezzük rá a háttérMC-re tetszőleges helyre, de arra ügyeljünk, hogy a majdan megjelenő tartalom lehetőleg ne takarja el a gombokat :). Ne felejtsük el azt , hogy minden MC-nek, amikor rátesszük a háttérre, adjunk instance-nevet, amivel a későbbiekben hivatkozhatunk rájuk. Ez természetesen vonatkozik a főmoziba helyezett HáttérMC-re is.Aki esetleg nem tudná, hogyan kell instance nevet adni annak: Ráteszed az MC-t a layerre kijelölöd az egérrel, properties(tulajdonságok)-Instance Name.. ott kell beírni a nevet.

Zene,efektek,összeállitás :

Készítsük el a zenei aláfestést, már persze ha valaki nem akarja, mert nem szereti, az ugorja át ezt a részt. Itt is már meglévő segédletekre kell hivatkoznom, hiszen nem lenne sok értelme kétszer leírni ugyanazt. a zene ki-be kapcsolását segédletek : hangok,zene-music on/off alatt találod. Az equalizert, ha akarod akkor elkészítheted az ugyanott található equalizer segédlet alapján, vagy maszkolással készíthetsz egy álanimációt, amit nem actionscript vezérel csak motion vagy shape. Ha elkészült a zeneMC, azt is helyezzük rá a háttérMC-re. Ezt is úgy tegyük, hogy ne legyen útban, vagy takarásban. Már csak a tartalomMC maradt hátra és az összetevői.

A tartalomMCben legyen annyi layer, ahány gombot használunk a menüben. A tartalomMC legelső frame-je maradjon üresen és tegyünk bele egy stop(); parancsot.igy amikor ráhelyezzük a háttérMC-re nem fog látszani addig amig valamelyik gombal meg nem hivjuk. A meglelenő tartalom animációját készítsük el pl gombnyomásra előugrik egy lap, akkor a lap mozgását készítsük el a második layeren és a mozgás kezdőframe-jének adjunk nevet, pl:menü1 a következő layeren készítsük el a menü2 mozgását és itt is nevezzük el a kezdőframe-t menü2-nek. Arra vigyázzunk, hogy a menü2 mozgása ott kezdődjön ahol a menü1-esé befejeződött, ne fedjék egymást az animációk. Minden mozgás utolsó frame-jére tegyünk egy stop() utasítást. Kattintsunk a frame-re, majd nyissuk meg az action panelt és ott tudjuk hozzáadni a stop-ot és más parancsokat, paramétereket.

A mozgás layerek fölött minden menü részére készítsünk még egy layert , ebben lesz a tartalom. A tartalom részére szintén készítsünk néhany MC-t , pontosan annyit, ahány menüpontunk van (gomb) . Írjuk bele a megjelenítendő szöveget, vagy import kép..stb. Ha kész, akkor tegyük rá a tartalomMC-re, abba a frame-be, amiben az előkészítő mozgás, (pl a lapka) animációja befejeződik. Valahogy így :

Ha elkészítettünk minden menüanimációt és a tartalmakat is rátettük,akkor helyezzük a tartalomMC-t a háttérMC-re és adjunk neki instance nevet pl: tartalom. Most nyissuk meg a menüMC-t és adjuk ki a gomboknak az utasítást. Első gomb, menü1 kijelöljük, majd megnyitjuk az action panelt és beírjuk a következőt :

on (release) {
_root.háttér.tartalom.gotoAndPlay("menü1");
}

Mit is jelent ez : amikor a gombot felengedjük (on release) meghívjuk a következő animációt-a főmoziban (_root) a háttér nevezetű instanceben (ez a háttérMC) található tartalom instance-t (ez a tartalomMC) és abban a menü1 nevezetű layeren a menü1 nevezetű frame-et ami az egyes menünk animációja + tartalma. A következő gomb a 2-es menü ugyanígy, az instance-k változatlanok csak a layer ás a frame neve más :

on (release) {
_root.háttér.tartalom.gotoAndPlay("menü2");
}

Így megcsinálunk minden gombot, majd leteszteljük a munkánkat, felső menü : control-test movie. Ha mindenben követtél és szorgalmasan olvasgattad a forrás file-t akkor működni fog. Ha mégsem, akkor gotoAndPlay a segédlet elejére és kezd újra. Ha valami még így sem tiszta, írj egy mailt.

Utószó:

Elérkeztünk a végére..huhh..megcsinálni sokkal könnyebb, mint elmagyarázni. Remélem tudtam segíteni kicsit, ha itt nem, akkor a forrásban. Ez a megoldás egy flash honlap elkészitésére a legegyszerübb, talán primitivnek is mondható, de kiindulásnak, és arra hogy kicsit ismerkedj az összetettebb munkával, arra jó. Aztán, ha elkészült a műved valahová tedd ki a netre és a flash fórum Kritikát kérek rovatában vélemények halmazát kapod majd rá :) Mindenkinek jó munkát és sok sikert.

 
 
 
 

© Devnet.hu. A segédletek semmilyen formában nem másolhatók, publikálhatók a Devnet.hu és a szerzők közös írásos engedélye nélkül.
 
. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .