iPhone風のボタンをFlexで

id:nitoyonさんのAS3 で iPhone 風ボタンを描画をを変更して、勉強会の資料として使わせてもらう事にしました。
やっぱり見た目が良いので、インパクトがあると思うのです。

とりあえずの部分までアップ

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="iPhoneButton()">
<mx:Script>
<![CDATA[
import flash.display.*;
import flash.filters.*;
import flash.geom.*;
import mx.core.*;

private const SIZE:int = 60;
private const ROUND:int = 20;

public function iPhoneButton():void
{
	canvas.removeAllChildren();
	var matrix:Matrix = new Matrix();
	matrix.createGradientBox(SIZE, SIZE, Math.PI / 2);

	var base:UIComponent = new UIComponent();
	base.graphics.beginFill(cp.selectedColor);
	base.graphics.drawRoundRect(0, 0, SIZE, SIZE, ROUND, ROUND);
	canvas.addChild(base);

	var border:UIComponent = new UIComponent();
	border.graphics.lineStyle(1, 0xffffff, 1);
	border.graphics.lineGradientStyle("linear", [0xffffff, 0xffffff, 0xffffff], [1, 0.3, 1], [0, 128, 255], matrix);
	border.graphics.drawRoundRect(1, 1, SIZE - 2, SIZE - 2, ROUND, ROUND);
	border.blendMode = BlendMode.OVERLAY;
	canvas.addChild(border);

	var glowTop:UIComponent = new UIComponent();
	glowTop.graphics.beginGradientFill("linear", [0xffffff, 0xffffff], [1, 0.2], [0, 128], matrix);
	glowTop.graphics.drawEllipse(-SIZE / 2, -SIZE / 2, SIZE * 2, SIZE);
	glowTop.blendMode = BlendMode.OVERLAY;
	canvas.addChild(glowTop);
	var mask:UIComponent = new UIComponent();
	mask.graphics.beginFill(0);
	mask.graphics.drawRoundRect(0, 0, SIZE, SIZE, ROUND, ROUND);
	canvas.addChild(mask);
	glowTop.mask = mask;

	var glowBottom:UIComponent = new UIComponent();
	glowBottom.graphics.beginGradientFill("linear", [0xffffff, 0xffffff], [0, 1], [224, 255], matrix);
	glowBottom.graphics.drawRoundRect(0, 0, SIZE, SIZE, ROUND, ROUND);
	glowBottom.blendMode = BlendMode.OVERLAY;
	canvas.addChild(glowBottom);

	var filter:DropShadowFilter = new DropShadowFilter(2, 90, 0x000000, 0.7);
	base.filters = [filter];
}
]]>
</mx:Script>
<mx:Panel title="ボタン作成">
<mx:Canvas id="canvas" width="60" height="60"/>
<mx:HBox>
<mx:ColorPicker id="cp" showTextField="true" selectedColor="0x1960CA" change="iPhoneButton()"/>
<mx:Label text="左のカラーピッカーで色を選択してください"/>
</mx:HBox>
</mx:Panel>
</mx:Application>