Button with label
========================================================
BtnWizLabel extends Sprite
自分用に作った、ラベル付きのカラフルでグラフィカルなボタンクラス。
デザインは Flex の UI を意識してます。
見た目だけです。あんなに高機能じゃないです。
ソースコードが汚いのは堪忍。
[CONSTRUCTOR]
public function BtnWizLabel(
labelText :String,
fontName :String = null,
fontSize :Number = 12,
colorHue :Number = 180,
borderThickness:Number = 3,
width :Number = NaN,
height :Number = NaN )
[PARAMETERS]
labelText:String
ボタンに刻み込むラベルのテキストです。複数行可。
唯一の必須パラメータです。
fontName:String = null
ラベルのフォント名です。
汎用デバイスフォント名を指定するのが無難。
汎用デバイスフォント名については、AS3コンポーネントリファレンス
ガイドの flash.text.engine.FontDescription クラス
fontName プロパティの項目が参考になります。
fontSize:Number = 12
ラベルのフォントサイズです。よしなに。
colorHue:Number = 180
ボタンの色相です。HSV色空間で言うところのHです。
デフォルトは180°でシアンっぽいかんじです。
彩度と明度、色を直に指定したりなどするのは良い実装が
思いつかないのでパス。
borderThickness:Number = 3
ボタンの枠線の太さです。よしなに。
width:Number = NaN
height:Number = NaN
ボタンの幅および高さです。
とりうる最小値はラベルに基づいて算出され、
それより小さい値を指定した場合は無視されます。
以上のパラメータ群は、ボタンを作った後も同名のインスタンスプロパティを
用いて再設定できま
/**
* Copyright matacat ( http://wonderfl.net/user/matacat )
* MIT License ( http://www.opensource.org/licenses/mit-license.php )
* Downloaded from: http://wonderfl.net/c/afev
*/
//========================================================
//
// BtnWizLabel extends Sprite
// 自分用に作った、ラベル付きのカラフルでグラフィカルなボタンクラス。
// デザインは Flex の UI を意識してます。
// 見た目だけです。あんなに高機能じゃないです。
// ソースコードが汚いのは堪忍。
//
//
// [CONSTRUCTOR]
// public function BtnWizLabel(
// labelText :String,
// fontName :String = null,
// fontSize :Number = 12,
// colorHue :Number = 180,
// borderThickness:Number = 3,
// width :Number = NaN,
// height :Number = NaN )
//
//
// [PARAMETERS]
// labelText:String
// ボタンに刻み込むラベルのテキストです。複数行可。
// 唯一の必須パラメータです。
//
// fontName:String = null
// ラベルのフォント名です。
// 汎用デバイスフォント名を指定するのが無難。
// 汎用デバイスフォント名については、AS3コンポーネントリファレンス
// ガイドの flash.text.engine.FontDescription クラス
// fontName プロパティの項目が参考になります。
//
// fontSize:Number = 12
// ラベルのフォントサイズです。よしなに。
//
// colorHue:Number = 180
// ボタンの色相です。HSV色空間で言うところのHです。
// デフォルトは180°でシアンっぽいかんじです。
// 彩度と明度、色を直に指定したりなどするのは良い実装が
// 思いつかないのでパス。
//
// borderThickness:Number = 3
// ボタンの枠線の太さです。よしなに。
//
// width:Number = NaN
// height:Number = NaN
// ボタンの幅および高さです。
// とりうる最小値はラベルに基づいて算出され、
// それより小さい値を指定した場合は無視されます。
//
//
// 以上のパラメータ群は、ボタンを作った後も同名のインスタンスプロパティを
// 用いて再設定できます。変更は即座に反映されます。
// つまり変更のたびにボタン用のあらゆるグラフィックが更新されるということ
// です。できれば初期値はすべてコンストラクタに渡しちゃってください。
//
// もうひとつ重要なプロパティに enabled:Boolean があります。
// これはインスタンスがボタンとして有効かどうかを表します。
// false を指定するとボタンがグレーになり、一切のマウスイベントを
// 無視するようになります。
//
//
// [やる気のない TO DO]
// BtnWizLabel は Sprite を拡張して作ったので addChild などで
// アイコンぽいのもつけられるけど、その時の width, height だとか
// 描画時のオフセットをどう扱えばいいかわからない。
// いっそ addChild できなくするとか。
//
//========================================================
package
{
import flash.display.Sprite;
import flash.events.MouseEvent;
public class ButtonTest extends Sprite
{
private var buttons:Vector.<BtnWizLabel> = Vector.<BtnWizLabel>([
new BtnWizLabel("label", null, 24, 0),
new BtnWizLabel("font", null, 24, 30),
new BtnWizLabel("size", null, 24, 60),
new BtnWizLabel("color", null, 24, 90),
new BtnWizLabel("border", null, 24, 120),
new BtnWizLabel("width", null, 24, 150),
new BtnWizLabel("height", null, 24, 180),
new BtnWizLabel("deactivate", null, 24, 210),
new BtnWizLabel("<-activate", null, 24, 240)
]);
public function ButtonTest()
{
for (var i:int = 0, len:int = buttons.length; i < len; i++) {
addChild(buttons[i]);
buttons[i].addEventListener(MouseEvent.CLICK, closure(i));
}
layOut();
function closure(j:int):Function
{
return function(e:MouseEvent):void
{
switch (j) {
case 0: buttons[0].labelText = "label was changed"; break;
case 1: buttons[1].fontName = "_typewriter"; break;
case 2: buttons[2].fontSize = 40; break;
case 3: buttons[3].colorHue = 30 * (len + 1); break;
case 4: buttons[4].borderThickness = 12; break;
case 5: buttons[5].width = 400; break;
case 6: buttons[6].height = 200; break;
case 7: buttons[7].enabled = !buttons[7].enabled; break;
case 8: buttons[7].enabled = true; break;
}
layOut();
};
}
}
private function layOut():void
{
var swz:Number = stage.stageWidth;
var osx:Number = 10;
var osy:Number = 10;
var mxh:Number = 0;
var k:int = 0;
for (var i:int = 0, len:int = buttons.length; i < len; i++) {
buttons[i].x = osx;
buttons[i].y = osy;
osx += 10 + buttons[i].width;
if (i < len - 1 && osx + buttons[i + 1].width > swz) {
for (var j:int = k; j < i + 1; j++) mxh = buttons[j].height > mxh ? buttons[j].height : mxh;
osx = 10;
osy += 10 + mxh;
mxh = 0;
k = i + 1;
}
}
}
}
}
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.filters.GlowFilter;
import flash.geom.Matrix;
import flash.text.TextField;
import flash.text.TextFormat;
class BtnWizLabel extends Sprite
{
private var lb:TextField = new TextField();
private var fm:TextFormat = new TextFormat();
private var up:Shape = new Shape();
private var ov:Shape = new Shape();
private var dn:Shape = new Shape();
private var ds:Shape = new Shape();
private var mx:Matrix = new Matrix();
private var gf:Array = [new GlowFilter(0xFFFFFF, 0.8, 8, 8)];
private var da:Array = [new GlowFilter(0x000000, 0.5, 4, 4)];
private var hu:Number, bd:Number;
private var wz:Number, hi:Number;
private var ul:Number, dl:Number;
private var os:Number, ep:Number;
public function BtnWizLabel(
labelText :String,
fontName :String = null,
fontSize :Number = 12,
colorHue :Number = 180,
borderThickness:Number = 3,
width :Number = NaN,
height :Number = NaN )
{
fm.font = fontName;
fm.size = fontSize;
fm.align = lb.autoSize = "center";
lb.defaultTextFormat = fm;
lb.text = labelText;
hu = colorHue;
bd = borderThickness;
wz = width;
hi = height;
makeStates();
ov.visible = false;
dn.visible = false;
ds.visible = false;
addChild(up);
addChild(ov);
addChild(dn);
addChild(ds);
addChild(lb);
this.mouseChildren = false;
this.tabChildren = false;
this.buttonMode = true;
switchActivation();
}
private function makeStates():void
{
var a:Number;
os = bd / 2;
ep = Number(fm.size) / 2;
wz = (a = lb.width + bd * 2, isNaN(wz)) ? a : (a > wz ? a : wz);
hi = (a = lb.height + bd, isNaN(hi)) ? a : (a > hi ? a : hi);
mx.createGradientBox(wz, hi, Math.PI / 2);
up.graphics.clear();
up.graphics.lineStyle(bd, hsv2rgb(hu, 0.8, 0.2), 0.4, true);
up.graphics.beginGradientFill("linear", [hsv2rgb(hu, 0.1, 1), hsv2rgb(hu, 0.3, 0.8)], [1, 1], [0, 255], mx);
up.graphics.drawRoundRect(os, os, wz, hi, ep);
ov.graphics.clear();
ov.graphics.lineStyle(bd, hsv2rgb(hu, 1, 0.5), 0.4, true);
ov.graphics.beginGradientFill("linear", [hsv2rgb(hu, 0.3, 1), hsv2rgb(hu, 0.5, 0.8)], [1, 1], [0, 255], mx);
ov.graphics.drawRoundRect(os, os, wz, hi, ep);
dn.graphics.clear();
dn.graphics.lineStyle(bd, hsv2rgb(hu, 0.9, 0.3), 0.4, true);
dn.graphics.beginGradientFill("linear", [hsv2rgb(hu, 0.4, 0.9), hsv2rgb(hu, 0.4, 0.7)], [1, 1], [0, 255], mx);
dn.graphics.drawRoundRect(os, os, wz, hi, ep);
ds.graphics.clear();
ds.graphics.lineStyle(bd, hsv2rgb(hu, 0, 0.2), 0.4, true);
ds.graphics.beginGradientFill("linear", [hsv2rgb(hu, 0, 1), hsv2rgb(hu, 0, 0.8)], [1, 1], [0, 255], mx);
ds.graphics.drawRoundRect(os, os, wz, hi, ep);
lb.x = (wz - lb.width) / 2 + os;
lb.y = ul = (hi - lb.height) / 2 + os;
dl = ul + Math.ceil(Number(fm.size) / 18);
}
private function switchActivation():void
{
if (this.buttonMode) {
this.mouseEnabled = true;
addEventListener(MouseEvent.ROLL_OVER, rollOver);
addEventListener(MouseEvent.ROLL_OUT, rollOut);
addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
addEventListener(MouseEvent.MOUSE_UP, mouseUp);
up.visible = true;
ds.visible = false;
lb.filters = null;
} else {
this.mouseEnabled = false;
removeEventListener(MouseEvent.ROLL_OVER, rollOver);
removeEventListener(MouseEvent.ROLL_OUT, rollOut);
removeEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
removeEventListener(MouseEvent.MOUSE_UP, mouseUp);
ds.visible = true;
up.visible = false;
ov.visible = false;
dn.visible = false;
lb.filters = da;
}
}
private function rollOver(e:MouseEvent):void
{
ov.visible = true;
up.visible = false;
lb.filters = gf;
}
private function rollOut(e:MouseEvent):void
{
up.visible = true;
ov.visible = false;
if (dn.visible) {
dn.visible = false;
lb.y = ul;
}
lb.filters = null;
}
private function mouseDown(e:MouseEvent):void
{
dn.visible = true;
ov.visible = false;
lb.y = dl;
}
private function mouseUp(e:MouseEvent):void
{
ov.visible = true;
dn.visible = false;
lb.y = ul;
}
public function set labelText(val:String):void { lb.text = val; makeStates(); }
public function get labelText():String { return lb.text; }
public function set fontName(val:String):void { fm.font = val; lb.setTextFormat(fm); makeStates(); }
public function get fontName():String { return fm.font; }
public function set fontSize(val:Number):void { fm.size = val; lb.setTextFormat(fm); makeStates(); }
public function get fontSize():Number { return Number(fm.size); }
public function set colorHue(val:Number):void { hu = val; makeStates(); }
public function get colorHue():Number { return hu; }
public function set borderThickness(val:Number):void { bd = val; makeStates(); }
public function get borderThickness():Number { return bd; }
override public function set width(val:Number):void { if (isNaN(val) || val > wz) { wz = val; makeStates(); } }
override public function get width():Number { return super.width; }
override public function set height(val:Number):void { if (isNaN(val) || val > hi) { hi = val; makeStates(); } }
override public function get height():Number { return super.height; }
public function set enabled(val:Boolean):void { this.buttonMode = val; switchActivation(); }
public function get enabled():Boolean { return this.buttonMode; }
public static function hsv2rgb(h:Number, s:Number, v:Number):uint
{
h = h >= 360 ? h % 360 : (h < 0 ? h % 360 + 360 : h);
s = s > 1 ? 1 : (s < 0 ? 0 : s);
v = v > 1 ? 1 : (v < 0 ? 0 : v);
if (s == 0) return (0xFF * v << 16) | (0xFF * v << 8) | (0xFF * v << 0);
var i:int = int(h / 60);
var f:Number = h / 60 - i;
var p:Number = v * (1 - s);
var q:Number = v * (1 - s * f);
var t:Number = v * (1 - s * (1 - f));
switch (i) {
case 0: return (0xFF * v << 16) | (0xFF * t << 8) | (0xFF * p << 0);
case 1: return (0xFF * q << 16) | (0xFF * v << 8) | (0xFF * p << 0);
case 2: return (0xFF * p << 16) | (0xFF * v << 8) | (0xFF * t << 0);
case 3: return (0xFF * p << 16) | (0xFF * q << 8) | (0xFF * v << 0);
case 4: return (0xFF * t << 16) | (0xFF * p << 8) | (0xFF * v << 0);
case 5: return (0xFF * v << 16) | (0xFF * p << 8) | (0xFF * q << 0);
}
return 0;
}
}