Created

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

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

View ImageButton.as
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
/**
* @authors Michael Ritchie, Ken Rogers
* @twitter @thanksmister, @pixels4nickles
* @version Dec 9, 2011
* */
package
{
import flash.events.Event;
import mx.events.FlexEvent;
import spark.components.Button;
import spark.primitives.BitmapImage;
public class ImageButton extends Button
{
private static var IMAGE_BORDER:Number = 2;
[Bindable]
public var source:Object;
[SkinPart(required="false")]
public var imageDisplay:RoundedImage
public function ImageButton()
{
super();
// set our custom skin class
setStyle("skinClass", ImageButtonSkin );
}
override protected function partAdded(partName:String, instance:Object):void
{
super.partAdded(partName, instance);
if(instance == imageDisplay) {
imageDisplay.source = source;
imageDisplay.addEventListener(FlexEvent.READY, imageDisplay_readyHandler);
}
}
override protected function partRemoved(partName:String, instance:Object):void
{
super.partRemoved(partName, instance);
if(instance == imageDisplay) {
imageDisplay.removeEventListener(FlexEvent.READY, imageDisplay_readyHandler);
imageDisplay.source = null;
}
}
override protected function commitProperties():void
{
super.commitProperties();
}
private function imageDisplay_readyHandler(event:Event):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) + IMAGE_BORDER;
}
else
{
width = Math.round((imageDisplay.sourceWidth * height) / imageDisplay.sourceHeight) + IMAGE_BORDER;
}
}
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) + IMAGE_BORDER;
}
else
{
height = Math.round((imageDisplay.sourceHeight * width) / imageDisplay.sourceWidth) + IMAGE_BORDER;
}
}
else if(height != imageDisplay.sourceHeight && width != imageDisplay.sourceWidth) // custom width and height
{
// do nothing
}
}
}
}
}
View ImageButton.as
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
<?xml version="1.0" encoding="utf-8"?>
<s:SparkButtonSkin 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();
}
/**
* @private
*/
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
{
var cr:Number = getStyle("cornerRadius");
if (cornerRadius != cr)
{
cornerRadius = cr;
fill.radiusX = cornerRadius;
border.radiusX = cornerRadius;
}
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
private var cornerRadius:Number = 2;
]]>
</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>
<local:RoundedImage id="imageDisplay" left="2" top="2" height="{this.height}" width="{this.width}" horizontalCenter="0" verticalCenter="0"/>
 
<s:Rect id="border" left="0" right="0" top="0" bottom="0" radiusX="2">
<s:stroke>
<s:SolidColorStroke weight="2" color="0x0055CC" color.over="0xFF0000" color.down="0xFF0000"/>
</s:stroke>
</s:Rect>
</s:SparkButtonSkin>
View ImageButton.as
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<?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:Group height="100" width="100%">
<local:ImageButton id="imageButton" source="image.png" height="100" cornerRadius="10" top="20" left="20"/>
<local:RoundedImage source="image.png" height="100" cornerRadius="10" top="140" left="20" />
</s:Group>
</s:WindowedApplication>
View ImageButton.as
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
<?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[
import mx.events.FlexEvent;
import mx.events.ResizeEvent;
private var cornerRadius:Number = 10;
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
{
var cr:Number = getStyle("cornerRadius");
if (cornerRadius != cr)
{
cornerRadius = cr;
background.radiusX = cornerRadius;
}
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
]]>
</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>
View ImageButton.as
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
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.