takoyaki10000氏作のMain Buttonを参考に、AS3で高品位なデザインボタンの習作を作成してみました。
作成に辺り、参考にしたサイトは、以下のとおりです。
ActionScriptだけで、かなりきれいなボタンが作れることを再確認。
- 保存版！クリックしたくなる「ボタン」デザインのPhotoshop用無料PSDファイル42個まとめ
- ｊksdo.it:takoyaki10000 – Main Button
- HTML5 CanvasのarcToをarcで実装してみた
20100110Alternative content
|
package practice
{
import flash.display.Sprite;
[SWF(width = "450", height = "450", backgroundColor = "0x000000", fps = "30")]
public class Button03 extends Sprite{
public function Button03() {
var b:Button = new Button();
b.x = b.y = 300;
addChild(b);
var b2:Button = new Button();
b2.x = b2.y = 50;
b2.scaleX = b2.scaleY = 0.2;
addChild(b2);
var b3:Button = new Button();
b3.x = b3.y = 130;
b3.scaleX = b3.scaleY = 0.5;
addChild(b3);
}
}
}
import fl.motion.BezierSegment;
import flash.display.GradientType;
import flash.display.Graphics;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.filters.BlurFilter;
import flash.filters.GlowFilter;
import flash.geom.Matrix;
import flash.geom.Point;
import org.flashdevelop.utils.FlashConnect;
class Button extends Sprite {
private var button:Sprite;
private var isPress:Boolean = false;
private var switchOn:Boolean = false;
public function Button():void {
drawOuterShadow1();
drawOuterShadow2();
drawOuterShadow3();
drawOuter();
drawInnerLine();
button=drawInner();
drawFig1(switchOn);
drawFig2(switchOn);
drawLuster();
drawLuster2();
button.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
button.addEventListener(MouseEvent.MOUSE_UP, mouseUp);
addEventListener(Event.ENTER_FRAME,update);
}
private function update(e:Event):void {
if (isPress) {
button.scaleX = button.scaleY += (0.95 - button.scaleX) * 0.2;
}else {
button.scaleX = button.scaleY += (1.0 - button.scaleX) * 0.2;
}
}
private function mouseDown(e:MouseEvent):void {
FlashConnect.trace("123");
isPress = true;
switchOn = !switchOn;
while (button.numChildren > 0) button.removeChildAt(button.numChildren-1);
drawFig1(switchOn);
drawFig2(switchOn);
}
private function mouseUp(e:MouseEvent):void {
isPress = false;
}
private function arc(g:Graphics, xx:Number, yy:Number, rr:Number, s:Number, e:Number, n:int):void {
var da:Number = (e-s) / n;
for (var i:int = 0; i < n; i++) {
var an:Number = s + da * i;
var px:Number = rr * Math.cos(an);
var py:Number = rr * Math.sin(an);
g.lineTo(px + xx, py + yy);
}
}
private function arcTo(g:Graphics, p0:Point, p1:Point, p2:Point, rad:Number, n:int):void {
var a1:Number = p0.y - p1.y;
var b1:Number = p0.x - p1.x;
var a2:Number = p2.y - p1.y;
var b2:Number = p2.x - p1.x;
var mm:Number = Math.abs(a1*b2 - b1*a2);
if (mm === 0 || rad === 0) {
if (a1 === 0 && b1 === 0) {
g.lineTo(p1.x, p1.y + 0.1);
} else {
g.lineTo(p1.x, p1.y);
}
} else {
var dd:Number = a1 * a1 + b1 * b1;
var cc:Number = a2 * a2 + b2 * b2;
var tt:Number = a1 * a2 + b1 * b2;
var k1:Number = rad * Math.sqrt(dd) / mm;
var k2:Number = rad * Math.sqrt(cc) / mm;
var j1:Number = k1 * tt / dd;
var j2:Number = k2 * tt / cc;
var cx:Number = k1 * b2 + k2 * b1;
var cy:Number = k1 * a2 + k2 * a1;
var px:Number = b1 * (k2 + j1);
var py:Number = a1 * (k2 + j1);
var qx:Number = b2 * (k1 + j2);
var qy:Number = a2 * (k1 + j2);
var ang1:Number = Math.atan2(py - cy, px - cx);
var ang2:Number = Math.atan2(qy - cy, qx - cx);
g.lineTo(px + p1.x, py + p1.y);
arc(g, cx + p1.x, cy + p1.y, rad, ang1, ang2,n);
}
}
private function drawBezier(g:Graphics, p0:Point, p1:Point, p2:Point, p3:Point):void {
var bezier:BezierSegment = new BezierSegment(p0, p1, p2, p3);
var numSplit:int = 30;
var i:int;
var t:Number = 1 / numSplit;
var drawPt:Point;
for (i = 1; i <= numSplit; i++) {
drawPt = bezier.getValue(t * i);
g.lineTo(drawPt.x, drawPt.y);
}
}
private function drawOuterShadow1():void {
var s:Sprite = new Sprite();
s.graphics.beginFill(0xaaaaaa);
s.graphics.drawCircle(0, 0, 140);
s.graphics.endFill();
var glow:GlowFilter = new GlowFilter(0xaaaaaa, 1, 16, 16);
s.filters = [glow];
addChild(s);
}
private function drawOuterShadow2():void {
var s:Sprite = new Sprite();
s.graphics.beginFill(0x777777);
s.graphics.moveTo(0, 0);
arc(s.graphics, 0, 0, 140, 80 / 180 * Math.PI, 50 / 180 * Math.PI,16);
s.graphics.endFill();
var glow:GlowFilter = new GlowFilter(0x777777, 1, 6, 6);
s.filters = [glow];
addChild(s);
}
private function drawOuterShadow3():void {
var s:Sprite = new Sprite();
s.graphics.beginFill(0x999999);
s.graphics.moveTo(0, 0);
arc(s.graphics, 0, 0, 140, 265 / 180 * Math.PI, 205 / 180 * Math.PI,16);
s.graphics.endFill();
var glow:GlowFilter = new GlowFilter(0x999999, 1, 8, 8);
s.filters = [glow];
addChild(s);
}
private function drawOuter():void {
var s:Sprite = new Sprite();
var matrix:Matrix = new Matrix();
matrix.createGradientBox(300, 300, Math.PI/4, -150, -150);
s.graphics.beginGradientFill(GradientType.LINEAR, [0x888888, 0x1d1d1d, 0x555555], [1.0, 1.0, 1.0], [0, 126, 255],matrix);
s.graphics.drawCircle(0, 0, 139);
s.graphics.endFill();
addChild(s);
}
private function drawInnerLine():void {
var s:Sprite = new Sprite();
s.graphics.beginFill(0x000000);
s.graphics.drawCircle(0, 0, 103);
s.graphics.endFill();
var glow:GlowFilter = new GlowFilter(0xaaaaaa, 1.0, 2, 2);
s.filters = [glow];
addChild(s);
}
private function drawInner():Sprite {
var s:Sprite = new Sprite();
var matrix:Matrix = new Matrix();
matrix.createGradientBox(300, 300, Math.PI/4, -150, -150);
s.graphics.beginGradientFill(GradientType.LINEAR, [0xaaaaaa, 0x0d0d0d, 0x777777], [1.0, 1.0, 1.0], [0, 126, 255],matrix);
s.graphics.drawCircle(0, 0, 100);
s.graphics.endFill();
addChild(s);
return s;
}
private function drawFig1(flg:Boolean):void {
var s:Sprite = new Sprite();
s.graphics.lineStyle(1.5, 0x999999);
var matrix:Matrix = new Matrix();
matrix.createGradientBox(200, 250, Math.PI / 2, -150, -150);
if (flg) {
s.graphics.beginGradientFill(GradientType.LINEAR, [0x017bae, 0x06fefe, 0x023b58], [1.0, 1.1, 1.1], [0, 126, 255], matrix);
}else {
s.graphics.beginGradientFill(GradientType.LINEAR, [0xdddddd, 0xffffff, 0xdddddd], [1.0, 1.1, 1.1], [0, 126, 255], matrix);
}
s.graphics.moveTo(-7, -84);
drawBezier(s.graphics, new Point(-7, -84), new Point(-7, -95), new Point(7, -95), new Point(7, -84));
s.graphics.lineTo(7, 3);
drawBezier(s.graphics, new Point(7, 3), new Point(7, 14), new Point(-7, 14), new Point(-7, 3));
s.graphics.lineTo(-7, -84);
s.graphics.endFill();
button.addChild(s);
}
private function drawFig2(flg:Boolean):void {
var s:Sprite = new Sprite();
s.graphics.lineStyle(1.5, 0x999999);
var matrix:Matrix = new Matrix();
matrix.createGradientBox(200, 250, Math.PI/2, -150, -150);
if (flg) {
s.graphics.beginGradientFill(GradientType.LINEAR, [0x017bae, 0x06fefe, 0x023b58], [1.0, 1.1, 1.1], [0, 126, 255], matrix);
}else {
s.graphics.beginGradientFill(GradientType.LINEAR, [0xdddddd, 0xffffff, 0xdddddd], [1.0, 1.1, 1.1], [0, 126, 255], matrix);
}
s.graphics.moveTo(-35, -60);
drawBezier(s.graphics, new Point(-35, -60), new Point(-52, -50), new Point(-70, -28), new Point(-70, 0));
arcTo(s.graphics, new Point(-70, 0), new Point(0, 4850), new Point(70, 0), 70, 36);
s.graphics.lineTo(70, 0);
drawBezier(s.graphics, new Point(70, 0), new Point(70, -28), new Point(52, -50), new Point(35, -60));
drawBezier(s.graphics, new Point(35, -60), new Point(20, -65), new Point(23, -50), new Point(28, -48));
drawBezier(s.graphics, new Point(28, -48), new Point(42, -40), new Point(56, -25), new Point(56, 0));
arcTo(s.graphics, new Point(56, 0), new Point(0, 4850), new Point(-56, 0), 56, 32);
drawBezier(s.graphics, new Point(-56, 0), new Point(-56, -25), new Point(-42, -40), new Point(-28, -48));
s.graphics.lineTo(-28, -48);
drawBezier(s.graphics, new Point(-28, -48), new Point(-22, -50), new Point(-25, -65), new Point(-35, -60));
s.graphics.endFill();
button.addChild(s);
}
private function drawLuster():void {
var s:Sprite = new Sprite();
s.alpha = 0.9;
s.graphics.beginFill(0xbbbbbb);
s.graphics.drawCircle(-70, -70, 15);
s.graphics.endFill();
s.graphics.beginFill(0x999999);
s.graphics.drawCircle(50, 85, 10);
s.graphics.endFill();
var blur:BlurFilter = new BlurFilter(30, 30, 1);
s.filters = [blur];
addChild(s);
}
private function drawLuster2():void {
var s:Sprite = new Sprite();
s.alpha = 0.8;
s.graphics.beginFill(0xffffff);
s.graphics.drawCircle(2, -95, 10);
s.graphics.endFill();
var blur:BlurFilter = new BlurFilter(12, 12, 1);
s.filters = [blur];
addChild(s);
}
}