Created — forked from pixels4nickels/ImageButton.as

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 93 94 95 96 97 98 99 100 101 102 103 104 105 106
/**
* @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) {
imageDisplay.addEventListener(FlexEvent.READY, imageDisplay_readyHandler);
// 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();
}
 
private function imageDisplay_readyHandler(event:Event):void
{
if(imageDisplay)// commit gets called once before create children so let's check for imageDisplay
{
if(width == IMAGE_BORDER && 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 == IMAGE_BORDER && 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)
{
//trace(this.id + " width and height are custom.");
}
}
}
}
}
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
<?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>
View ImageButton.as
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>
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
}
}
}
}
}
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
<?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>
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.