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




 
 
SEGÉDLETEK Komponensek

Flash CS3 komponens skin-elés
  feltöltve: 2008.02.06 | szerző: jadezoole | olvasva: 864 alkalommal

 
 

Ezen segédlet a beépített Flash CS3 komponenseinek újraskinelését szeretné röviden bemutatni. A Flash CS3-ban lévő komponensek pedig már jobb teljesítményt tudhatnak magukénak, ami folytán érdemes megismerkedni velük.

A Flash CS3 az új komponensei sokat fejlődtek az elődeikhez képest, nézzük meg röviden, hogy milyen téren történtek változtatások:

  • Méret és teljesítmény (25-40%-kal csökkentett méret, optimalizált teljesítmény)
  • Egyszerű skinelés
  • Bővíthetőség (jobban bővíthetők a komponensek az igényeknek megfelelően)
  • Tudás, használhatóság (használhatóság tekintetében nem lett bonyolultabb a felhasználók számára az előző verziókhoz képest)

A fenti változások közül mi az új skinelési lehetőségek közvetlen (statikus) módját fogjuk átvenni, ugyanis lehetőség van dinamikus (real-time) skinelésre is Actionscript 3 segítségével.

Kezdjünk is bele és nézzük meg példaként egy ComboBox skinelési folyamatát, láthatjuk majd, hogy mennyivel egyszerűbb, mint az előző verziókban.

Készítsünk egy új Actionscript 3.0 FLA fájlt Flash-ben. Nyissuk meg a komponens ablakot.
Menü > Window > Components. Válasszuk ki a számunkra szükséges komponenst és húzzuk a Stage-re.

Ezek után vessünk egy pillantást a Library-nkre, ahol megjelenik a ComboBox komponensen kívül a List és a TextInput komponensek is, mivel ezek összetevői a ComboBox-nak (a TextInput akkor ha aktiváljuk a beleírási lehetőséget), valamint egy Component Assets könyvtár, ahol az egyes komponensek elemei vannak tárolva:


Kattintsunk az ComboBox komponensre a Stage-n és látni fogjuk, hogy hogyan épül fel.

Általában minden komponens esetében van, egy Up, egy Over, egy Down és egy Disble skin, amelyek az általános megjelenésű (Up), az egérrel rajta álló (Over), az egérrel lenyomott (Down) és az inaktív (Disble) állapotokat jelentik. Ezeket egyenként tudjuk módosítani azáltal, hogy egyszerűen rájuk kattintunk és a szokásos rajzeszköztárral módosítjuk őket, hogy pontosan melyik komponensrészt szerkesztjük azt a timeline alatti Head részben tudjuk követni:

Válasszuk ki példaként a ComboBox Over Skin-jét és módosítsuk. Alapvetően innentől ugyanúgy kezelhetjük a grafikát, mint bármely vektoros grafikát, kedvünk szerint színezhetjük és alakíthatjuk. Fontos még az is, hogy ne illesszünk ide bitmap-et, mivel azt a komponens nem tudja kezelni, kizárólag vektorgrafika használható. Az egyetlen többlet, hogy itt meg kell adnunk, hogy méretezésnél a grafika melyik részeit húzza szét.

Ezt pedig a szaggatott vonalak beállításával tehetjük meg. Egyszerűen ráállunk a szaggatott vonalra és kedvünk szerint beállíthatjuk, arra viszont érdemes figyelni, hogy a grafika melyik része esik a szaggatott vonalak közé, mert ha nem jól állítjuk be, akkor igen furcsa dolgok jöhetnek ki. Vegyük a következő beállítást:

Ebben az esetben, ha a Stage-en átméretezem a komponenst, az alapértelmezett 100x22 pixelről pl. 100x40-re akkor tesztelésnél a következőt fogjuk kapni:


Ez azért van, mivel a nyújtandó szektorba (két szaggatott vonal közti terület) belekerült a nyíl is, amit a Flash nyújtandó grafikai részként értelmezett.

Ha módosítottuk az egyes komponens összetevőket, ahogyan a lenti ábrán is látható, akkor már kész is skin-elésünk és egy kis Actionscript segítségével tesztelhetővé tehetjük a mozinkat.


Az Actionscript-et a main timeline első frame-ébe kell beilleszteni:

import fl.controls.*;
import fl.data.DataProvider;

var testArray:Array=new Array();
testArray.push("1");
testArray.push("2");

var dp:DataProvider=new DataProvider();
testComboBox.dataProvider=dp;

for (var i:Number=0; i<testArray.length; i++)
{
dp.addItem( { label: "Dolog"+i,data: testArray[i] } );
}

testComboBox.addEventListener(Event.CHANGE,traceEvent);

function traceEvent(event:Event):void {
var cb:ComboBox = event.currentTarget as ComboBox;
trace(cb.selectedItem.data);
}


A script ellátja label-lel és adattal a ComboBox-unkat, és egy eseménykezelő segítségével kiválasztásnál ki is fogja trace-elni az adatokat.

Ezek után már tesztelhetünk is. Kellemes komponens skinelést!

 
 
 
 

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