Tuesday, June 22, 2010

Spark image button

So skinning spark buttons with images isn't the same as skinning halo (mx) buttons with images.

It's a 3 part process.

components.ImageButton.as

package components
{
import spark.components.Button;

[Style(name="imageSkin",type="*")]
[Style(name="imageSkinDisabled",type="*")]
[Style(name="imageSkinDown",type="*")]
[Style(name="imageSkinOver",type="*")]

public class ImageButton extends Button
{
public function ImageButton()
{
super();
}
}
}



Script block

[Embed('assets/images/btnGoUp.png')]
[Bindable]
public var btnGo:Class;

[Embed('assets/images/btnGoOver.png')]
[Bindable]
public var btnGoOver:Class;

[Embed('assets/images/btnGoDisabled.png')]
[Bindable]
public var btnGoDisabled:Class;



MXML block

<components:ImageButton buttonMode="true"
imageSkin="{btnGo}" imageSkinDisabled="{btnGoDisabled}"
imageSkinDown="{btnGoOver}" imageSkinOver="{btnGoOver}"
skinClass="assets.skins.ImageButtonSkin"/>


Here's a sample with the view source enabled.

No comments: