public
Created — forked from pixels4nickels/ImageButton.as

Flex Spark Image Button component with rounded corners. Wraps the Image control and takes same source for image. .

  • Download Gist
ImageButton.as
ActionScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102
/**
* @authors Michael Ritchie, Ken Rogers
* @twitter @thanksmister, @pixels4nickels
* @version Dec 9, 2011
* */
package
{
import flash.events.Event;
import mx.events.FlexEvent;
import mx.graphics.BitmapScaleMode;
import spark.components.Button;
import spark.primitives.BitmapImage;
public class ImageButton extends Button
{
private static var IMAGE_BORDER:Number = 2;
private var _cornerRadius:Number = 22;
[Bindable]
public var source:Object;
[SkinPart(required="false")]
public var imageDisplay:BitmapImage;
public function ImageButton()
{
super();
// set our custom skin class
setStyle("skinClass", ImageButtonSkin );
}
[Bindable]
public function get cornerRadius():Number
{
return _cornerRadius;
}
 
public function set cornerRadius(value:Number):void
{
_cornerRadius = value;
}
 
override protected function partAdded(partName:String, instance:Object):void
{
super.partAdded(partName, instance);
if(instance == imageDisplay) {
// for AIR 3.1 use BitmapScaleMode.ZOOM
imageDisplay.scaleMode = BitmapScaleMode.STRETCH;
imageDisplay.source = source;
}
}
override protected function partRemoved(partName:String, instance:Object):void
{
super.partRemoved(partName, instance);
if(instance == imageDisplay) {
imageDisplay.source = null;
}
}
override protected function commitProperties():void
{
super.commitProperties();
 
if(imageDisplay)// commit gets called once before create children so let's check for imageDisplay
{
if(width == 0 && height != 0)//did the user set the height but not the width on the tag?
{
if(height == imageDisplay.sourceHeight)// the height was set but it happens to be the same as the source
{
width = Math.round((imageDisplay.sourceWidth * height) / imageDisplay.sourceHeight);
}
else
{
width = Math.round((imageDisplay.sourceWidth * height) / imageDisplay.sourceHeight);
}
}
else if(height == 0 && width != 0)//did the user set the width but not the height on the tag?
{
if(width == imageDisplay.sourceWidth)// the width was set but it happens to be the same as the source
{
height = Math.round((imageDisplay.sourceHeight * width) / imageDisplay.sourceWidth);
}
else
{
height = Math.round((imageDisplay.sourceHeight * width) / imageDisplay.sourceWidth);
}
}
else if(height != imageDisplay.sourceHeight && width != imageDisplay.sourceWidth)
{
// custom width and height
}
}
}
}
}
ImageButtonSkin.mxml
XML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
alpha.disabled="0.5" xmlns:local="*">
<fx:Metadata>[HostComponent("ImageButton")]</fx:Metadata>
<fx:Script fb:purpose="styling">
<![CDATA[
import spark.components.Group;
static private const exclusions:Array = ["labelDisplay"];
/**
* @private
*/
override public function get colorizeExclusions():Array {return exclusions;}
/**
* @private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
]]>
</fx:Script>
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">
<s:fill>
<s:SolidColor color="0xFFFFFF"/>
</s:fill>
</s:Rect>
<s:Rect id="background" left="0" right="0" top="0" bottom="0" radiusX="{hostComponent.cornerRadius}" alwaysCreateDisplayObject="true">
<s:fill>
<!-- @private -->
<s:SolidColor id="bgFill"/>
</s:fill>
</s:Rect>
<s:BitmapImage id="imageDisplay" left="0" top="0" right="0" bottom="0" mask="{background.displayObject}" />
 
<s:Rect id="border" left="0" right="0" top="0" bottom="0" radiusX="{hostComponent.cornerRadius}">
<s:stroke>
<s:SolidColorStroke weight="2" color="0x0055CC" color.over="0xFF0000" color.down="0xFF0000"/>
</s:stroke>
</s:Rect>
</s:SparkSkin>
Main.mxml
XML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:local="*">
<s:layout>
<s:VerticalLayout/>
</s:layout>
 
<local:ImageButton id="imageButton"
source="http://news.nationalgeographic.com/news/2006/02/images/060217_kiwi.jpg"
height="200"
cornerRadius="10"
/>
<local:RoundedImage id="roundedImage"
source="http://news.nationalgeographic.com/news/2006/02/images/060217_kiwi.jpg"
height="200"
cornerRadius="10"
/>
</s:WindowedApplication>
RoundedImage.as
ActionScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61
/**
* @authors Michael Ritchie, Ken Rogers
* @twitter @thanksmister, @pixels4nickles
* @version Dec 9, 2011
* */
package
{
import mx.graphics.BitmapScaleMode;
import spark.components.Image;
public class RoundedImage extends Image
{
[Bindable]
public var cornerRadius:Number = 10;
public function RoundedImage()
{
super();
// set our custom skin class
setStyle("skinClass", RoundedImageSkin );
// for AIR 3.1 use BitmapScaleMode.ZOOM
scaleMode = BitmapScaleMode.STRETCH;
}
 
override protected function commitProperties():void
{
if(imageDisplay)// commit gets called once before create children so let's check for imageDisplay
{
if(width == 0 && height != 0)//did the user set the height but not the width on the tag?
{
if(height == imageDisplay.sourceHeight)// the height was set but it happens to be the same as the source
{
width = Math.round((imageDisplay.sourceWidth * height) / imageDisplay.sourceHeight);
}
else
{
width = Math.round((imageDisplay.sourceWidth * height) / imageDisplay.sourceHeight);
}
}
else if(height == 0 && width != 0)//did the user set the width but not the height on the tag?
{
if(width == imageDisplay.sourceWidth)// the width was set but it happens to be the same as the source
{
height = Math.round((imageDisplay.sourceHeight * width) / imageDisplay.sourceWidth);
}
else
{
height = Math.round((imageDisplay.sourceHeight * width) / imageDisplay.sourceWidth);
}
}
else if(height != imageDisplay.sourceHeight && width != imageDisplay.sourceWidth)
{
// custom width and height
}
}
}
}
}
RoundedImage.mxml
XML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
alpha.disabled="0.5" >
<fx:Metadata>[HostComponent("RoundedImage")]</fx:Metadata>
<fx:Script>
<![CDATA[
]]>
</fx:Script>
<s:states>
<s:State name="uninitialized"/>
<s:State name="loading"/>
<s:State name="ready" />
<s:State name="invalid" />
<s:State name="disabled" />
</s:states>
<s:Rect id="background" left="0" right="0" top="0" bottom="0" radiusX="{hostComponent.cornerRadius}" alwaysCreateDisplayObject="true">
<s:fill>
<!-- @private -->
<s:SolidColor id="bgFill"/>
</s:fill>
</s:Rect>
<!--- Primary image display skin part. -->
<s:BitmapImage id="imageDisplay" left="0" top="0" right="0" bottom="0" mask="{background.displayObject}" />
<!--- Progress indicator skin part. -->
<s:Range id="progressIndicator" skinClass="spark.skins.spark.ImageLoadingSkin" verticalCenter="0" horizontalCenter="0" includeIn="loading" layoutDirection="ltr" />
<!--- Icon that appears in place of the image when an invalid image is loaded. -->
<s:BitmapImage id="brokenImageIcon" includeIn="invalid" source="@Embed(source='Assets.swf',symbol='__brokenImage')" verticalCenter="0" horizontalCenter="0" mask="{background.displayObject}"/>
</s:Skin>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.