Posted By

GunnarHKarlsson on 08/29/11


Tagged

actionscript flash button Flex skin as3 mxml 30 Skinning


Versions (?)

Skinning of mxml button with png graphics


 / Published in: MXML
 

Don't set size of button in declaration e.g. width="80". It will distort the graphics.

  1. /**
  2. *Main.mxml
  3. */
  4.  
  5. <?xml version="1.0" encoding="utf-8"?>
  6. <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
  7. xmlns:s="library://ns.adobe.com/flex/spark"
  8. xmlns:mx="library://ns.adobe.com/flex/mx">
  9. <fx:Style>
  10. @namespace s "library://ns.adobe.com/flex/spark";
  11. @namespace mx "library://ns.adobe.com/flex/mx";
  12.  
  13. s|Button {
  14. skinClass: ClassReference("skins.ImageButtonSkin");
  15. }
  16.  
  17. </fx:Style>
  18.  
  19. <s:Button id="diamondBtn" horizontalCenter="0" verticalCenter="0"/>
  20.  
  21. </s:WindowedApplication>
  22.  
  23.  
  24. /**
  25. * ImageButton.as
  26. */
  27.  
  28. package components
  29. {
  30. import spark.components.Button;
  31.  
  32. [Style(name="imageSkin",type="*")]
  33. [Style(name="imageSkinDisabled",type="*")]
  34. [Style(name="imageSkinDown",type="*")]
  35. [Style(name="imageSkinOver",type="*")]
  36.  
  37. public class ImageButton extends Button
  38. {
  39. public function ImageButton()
  40. {
  41. super();
  42. }
  43. }
  44. }
  45.  
  46.  
  47. /**
  48. *ImageButtonSkin.mxml
  49. */
  50.  
  51. <?xml version="1.0" encoding="utf-8"?>
  52. <!-- http://blog.flexexamples.com/2010/03/24/using-a-bitmap-image-skin-in-a-spark-button-control-in-flex-4/ -->
  53. <s:SparkSkin name="ImageButtonSkin"
  54. xmlns:fx="http://ns.adobe.com/mxml/2009"
  55. xmlns:s="library://ns.adobe.com/flex/spark"
  56. xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
  57. minWidth="21" minHeight="21"
  58. alpha.disabled="0.5">
  59. <!-- states -->
  60. <s:states>
  61. <s:State name="up" />
  62. <s:State name="over" />
  63. <s:State name="down" />
  64. <s:State name="disabled" />
  65. </s:states>
  66.  
  67. <!-- host component -->
  68. <fx:Metadata>
  69. [HostComponent("spark.components.Button")]
  70. </fx:Metadata>
  71.  
  72. <fx:Script fb:purpose="styling">
  73. <![CDATA[
  74. /* Define the skin elements that should not be colorized.
  75. For button, the graphics are colorized but the label is not. */
  76. static private const exclusions:Array = ["labelDisplay"];
  77.  
  78. override public function get colorizeExclusions():Array {
  79. return exclusions;
  80. }
  81.  
  82. override protected function initializationComplete():void {
  83. useChromeColor = true;
  84. super.initializationComplete();
  85. }
  86. ]]>
  87. </fx:Script>
  88.  
  89. <s:BitmapImage source="@Embed('assets/images/blackDiamonds.png')"
  90. source.over="@Embed('assets/images/blueDiamonds.png')"
  91. source.down="@Embed('assets/images/purpleDiamonds.png')"
  92. left="0" right="0" top="0" bottom="0" />
  93.  
  94. <!-- layer 8: text -->
  95. <s:Label id="labelDisplay"
  96. textAlign="center"
  97. verticalAlign="middle"
  98. maxDisplayedLines="1"
  99. horizontalCenter="0" verticalCenter="1"
  100. left="10" right="10" top="2" bottom="2" />
  101.  
  102. </s:SparkSkin>

Report this snippet  

You need to login to post a comment.