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


 
 
SEGÉDLETEK Komponensek

Flash MX 2004 UI Komponensek - I. rész
  feltöltve: 2005.05.20 | szerző: sgabe | olvasva: 4201 alkalommal

   
 

Button komponens

Talán a legegyszerűbb komponens a Button (gomb) komponens. Sok változáson ment keresztül a Flash MX óta, most sokkal pofásabban néz ki és a 2. verzió eseménykezelése szerint működik. Többé nem lehetséges a setClickHandler() függvény használata például. Helyette be kell állítanunk egy figyelő objektumot és az addEventListener eljárást használnunk, hogy beállítsuk a "kattintás" események figyelését. A következő példa jól mutatja, hogy egyszerűbb az alkalmazása, mint amilyennek hangzik.

  1. Kezdjünk egy új Flash mozit! (File > New vagy Ctrl+N)
  2. Helyezzünk el egy Button komponenst a munkaterületen!
  3. Nevezzük át a rétegünket "button" névre!
  4. A Properties panelen adjuk a "myButton" nevet a gombnak! Ezt a nevet fogjuk használni, amikor ActionScriptben erre a gombra szeretnénk majd hivatkozni. Állítsuk be a gomb címkéjét, a következőre "a flash portál"!

  5. Most következik a művelet meghatározása, ami majd akkor fut le, amikor a gombra kattintunk. Hozzunk létre egy új réteget és nevezzük el "actions" néven! A réteg első képkockáját kiválasztva helyezzük el az alábbi kódot az Actions panelen.

    myButtonListener = new Object();
    myButtonListener.click = function() {
        trace("swf.hu - a flash portál");
    };
    myButton.addEventListener("click", myButtonListener);
     

  6. Teszteljük le a mozit! A gombra kattintva az Output ablakban megjelenik a scriptben leírt üzenet (swf.hu - a flash portál). Természetesen bármilyen függvény lefuttatható.

A fenti kód a példánkban nagyon egyszerű. Először létrehozunk egy objektumot, ami egy eseményre vár, pontosabban a kattintásra. Ahhoz, hogy ezt elérjük egy komponenst kell hozzárendelnünk ehhez az eseményhez, amit az addEventListener() eljárással állítunk be, amivel minden komponens rendelkezik. Az első, amit meg kell határoznunk, hogy milyen eseményt akarunk figyeltetni.

Más komponensek esetében több eseményt is definiálhatunk, a Button komponenstől eltérően. Például egy közönséges gomb esetében meghatározhatunk egy click és egy mouseOver eseményt is, viszont a Button komponens csak a click eseményt támogatja.

A 2. verziós Button komponensnél már nincs megkötve a kezünk szöveggel címkézett gombok készítésekor, mint az 1-es verzióban! Sőt most már különböző ikonok is használhatóak a gombok csinosítására.

  1. Importáljuk a flash mozinkba a használni kívánt ikont! Javaslom, hogy mindenképp átlátszó PNG formátumú képeket használjunk! Nem számít melyik rétegre kerül most a kép, később miután szimbólummá alakítottuk eltávolításra kerül a munkaterületünkről. (FileImport > Import to Stage vagy Ctrl+R)

  2. Válasszuk ki az importált képünket, majd konvertáljuk szimbólummá! A megnyíló párbeszédablakban jelöljük be a Movie clip opciót és nevezzük el "icon" néven a szimbólumot! (Modify > Convert To Symbol vagy F8)

  3. Az imént létrehozott mozi klipünket linkelhetővé (linkage) kell tenni, hogy meghatározhassuk a Button komponensnek, hogy mely mozi klipet használhatja ikonként, így majd hivatkozhatunk rá ActionScriptben. Nyissuk fel a Library panelt (Window > Library vagy Ctrl+L) és válasszuk ki az "icon" mozi klipet. Kattintsunk felette jobb egérgombbal és válasszuk a Linkage menüpontot a megjelenő menüből.

  4. A felbukkanó Linkage Properties ablakban az Identifier lesz az ikon hivatkozási neve, ami most legyen simán "icon". Ellenőrizzük, hogy az Export for ActionScript és az ...in first frame jelölőnégyzetek be vannak jelölve!

  5. A következő lépésben be kell állítanunk a Button komponensünket, hogy az imént létrehozott mozi klipet alkalmazza ikonként. Az első képkockán elhelyezett ActionScriptet az alábbi sorral kell kibővíteni.

    myButton.icon = "icon";
     

  6. Teszteljük a mozit! Amint a képen is látható az ikonunk megjelenik, viszont a gomb nem méreteződik automatikusan, hogy körülfogja az ikont. Ez ugyancsak igaz a címkére. A gomb nem méreteződik automatikusan, hogy az általunk megadott címke megfelelően megjelenjen. Tehát mindenképpen utólag kell állítanunk a gomb méretein és elhelyezkedésén is, hogy az megfelelően jelenjen meg! Remélhetőleg a következő verziókban már nem így fog működni ez a komponens.

  7. Utolsó lépésben beállítjuk a gomb méreteit a setSize() eljárás segítségével, hogy megfelelően jelenjen meg az ikon és a címke is. A címkét a label tulajdonság segítségével határozzuk meg, így nem számít, hogy szerkesztés közben a Properties panelen mit adtunk meg az előzőekben. Tehát az alábbiak szerint egészítsük ki az első képkockán elhelyezett ActionScriptet!

    myButton.icon = "icon";
    myButton.setSize(200, 50);
    myButton.label = "a flash portál";
    myButtonListener = new Object();
    myButtonListener.click = function() {
        trace("swf.hu - a flash portál");
        getURL("http://www.swf.hu",_blank)
    };
    myButton.addEventListener("click", myButtonListener)

Ahogy lentebb is látható a végeredmény már sokkal szebben néz ki! Természetesen több lehetőség is rejlik ebben a komponensben, amelyekre most nem térünk ki. Ezek a legalapvetőbbek melyek ismeretében már könnyedén alkalmazható a Button komponens a különböző munkák során.

 
   
 
 

© 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 >>> : .. .