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>