Pentingnya penggunaan ScaleGrid pada pembuatan Flex Skin

Ketika kita membuat Skin untuk komponen Flex, maka kita perlu memperhatikan Scale Grid. Scale Grid  adalah garis pemandu yang berfungsi untuk pembatasi suatu Flex Skin yang dibuat. Scale Grid memiliki garis pemisah Atas, Bawah, Kiri dan Kanan, atau yang disebut scaleGridLeft, scaleGridTop, scaleGridRight, scaleGridBottom.

Nah, lalu apa yang menjadi penting dari scale Grid ?. mari kita lihat contoh dibawah. . 

Nah, terlihat sudah perbedan menggunakan ScaleGrid dengan Tidak.
Ketika kita menggunakan ScaleGrid maka Flex tidak akan menarik atau merusak kawasan yang terdapat didalamnya. Oleh sebab itulah Skin yang dibuat bisa terlihat tidak pecah walaupun ditakir dari ukuran sebenarnya.

Teknik ini adalah wajib bagi para pembuat UI.
Cara memberikan ScaleGrid pada Skin adalah mudah.

Buka file CSS anda

 Kemudian Klik pada tombol Edit Scale Grid

Jika sudah anda bisa langsung menentukan posisi GridScale yang sesuai dengan Skin yang anda pakai.
Jika sudah, lihat file CSS anda. Maka akan terlihat penambahan atribut CSS.

Button

{

  upSkin: Embed(source="aset/Button_upSkin.png",scaleGridRight="60",scaleGridLeft="5",

scaleGridTop="5",scaleGridBottom="24");

      overSkin: Embed(source="aset/Button_overSkin.png",scaleGridRight="58",scaleGridLeft="5",

scaleGridTop="5",scaleGridBottom="22");

      downSkin: Embed(source="aset/Button_downSkin.png",scaleGridRight="60",scaleGridLeft="5",

scaleGridTop="5",scaleGridBottom="24");

      disabledSkin: Embed(source="aset/Button_disabled.png",scaleGridRight="60",scaleGridLeft="5",

scaleGridTop="5",scaleGridBottom="24");

      color: #FFFFFF;

      textRollOverColor: #FFFFFF;

      textSelectedColor: #FFFFFF;

}