また、ActionScriptでボタンの習作を作ってみました。
　JAM -HTML5 and Flash Session3　『課題：思わず押したくなるボタンをつくってください』向けに、何か、おもしろいボタンを作りたいなあと思うのですが、こういうのって、難しいです。

　

　
　
　
　
　

20100110 Alternative content

---

package practice
{
	import flash.display.Sprite;

	[SWF(width = "400", height = "400", backgroundColor = "0x000000", fps = "30")]
	public class Button08 extends Sprite{

		public function Button08() {
			var id:int = 1;
			for (var i:int = 0; i < 8; i++) {
				var yy:Number = i * 50 + 10;
				for (var j:int = 0; j < 3; j++) {
					var b:Button = new Button(120, 30, "Button" + id.toString());
					id++;
					b.x = j * 130 + 5;
					b.y = yy;
					addChild(b);
				}
			}
		}

	}

}
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.GradientType;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.filters.BevelFilter;
import flash.filters.BlurFilter;
import flash.filters.GlowFilter;
import flash.geom.Matrix;
import flash.geom.Point;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.filters.BitmapFilterType;
class Button extends Sprite {
	private var base:Sprite;
	private var button:Sprite;
	private var matrix:Matrix;
	private var text:TextField;
	private var glow:GlowFilter;
	private var ct:Number = 0.0;
	private var isPress:Boolean = false;

	public function Button(w:Number = 120, h:Number = 30, str:String = "button"):void {
		base = new Sprite();
		glow = new GlowFilter(0xddddff, 1, 10, 10, 2, 1, false);
		base.filters = [glow];
		base.graphics.beginFill(0x111111);
		base.graphics.drawRoundRect(0, 0, w, h, (w + h) / 5, (w + h) / 5);
		base.graphics.endFill();
		addChild(base);
		button = new Sprite();
		matrix = new Matrix();
		matrix.createGradientBox(w, h, Math.PI / 2, 0, 0);
		button.graphics.beginGradientFill(GradientType.LINEAR, [0x111111, 0x444444, 0x000000], [1.0, 1.0, 1.0], [0, 100, 255], matrix);
		button.graphics.drawRoundRect(0, 0, w, h, (w + h) / 5, (w + h) / 5);
		button.graphics.endFill();
		button.filters = [new BevelFilter(16, 90, 0x444444, 1, 0x111111, 1, 8, 8, 1, 1, BitmapFilterType.INNER)];
		base.addChild(button);
		text = new TextField();
		var t:TextFormat = new TextFormat(null, 16, 0xffffff);
		text.defaultTextFormat = t;
		text.text = str;
		text.width = text.textWidth + 10;
		text.height = text.textHeight + 5;
		text.x = (w - text.width) / 2;
		text.y = (h - text.height) / 2;
		text.selectable = false;
		text.filters = [new GlowFilter(0xddddff, 1, 16, 16,2,3,false)];
		base.addChild(text);
		addEventListener(Event.ENTER_FRAME, update);
		base.addEventListener(MouseEvent.MOUSE_DOWN, down);
		base.addEventListener(MouseEvent.MOUSE_UP, up);
		base.addEventListener(MouseEvent.ROLL_OUT, out);
		text.addEventListener(MouseEvent.MOUSE_DOWN, down);
		text.addEventListener(MouseEvent.MOUSE_UP, up);
	}

	private function update(e:Event):void {
		ct = ct + 10;
		var ap:Number = 6 * Math.sin(ct / 360 * Math.PI) + 10;
		glow.blurX = glow.blurY = ap;
		base.filters = [glow];
		if (isPress) {
			if (base.x == 0) {
				var c:Circle = new Circle(x + width / 2, y + height / 2, 0.4, true);
				this.parent.addChild(c);
			}
			base.x = base.y = 1;
		}else {
			base.x = base.y = 0;
		}
	}

	private function down(e:MouseEvent):void {
		isPress = true;
	}

	private function up(e:MouseEvent):void {
		isPress = false;
	}

	private function out(e:MouseEvent):void {
		isPress = false;
	}

}
class Circle extends Sprite {
	private var r:Number=10;
	private var cx:Number;
	private var cy:Number;
	private var cont:Boolean;

	public function Circle(xx:Number, yy:Number,al:Number,c:Boolean) {
		cx = xx;
		cy = yy;
		alpha = al;
		cont = c;
		addEventListener(Event.ENTER_FRAME, update);
	}

	private function update(e:Event):void {
		graphics.clear();
		if (r < 2000) {
			r += 10;
			graphics.lineStyle(1, 0xeeeeff,1.0,true);
			graphics.drawCircle(cx, cy, r);
		}else {
			this.parent.removeChild(this);
		}
	}
}

Related posts:

1. ボタンの習作を作ってみた。(2) #AS3
2. ボタンの習作を作ってみた。(4) #AS3
3. ボタンの習作を作ってみた。(3) #AS3
4. ボタンの習作を作ってみた。#AS3
5. 数独