JAM HTML5 and FlashのSession3が始まりました。
　今回のお題は、「思わず押したくなるボタンをつくってください」というものです。
　なんか良いネタないかなと考えてみたけれど、浮かばず。とりあえず、何か作ってみようと思い、勉強がてら、ロボット的ボタンを作ってみました。
　しかし、こういうのって、やっぱセンスが必要だなあーと思う、今日この頃。
　
　
　
　
　
　

package practice
{
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import flash.text.TextFieldType;

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

		public function Button01() {
			for (var i:int = 0; i < 10; i++) {
				var b0:Button = new Button(100, 30,"TEST");
				b0.x = 15;
				b0.y = 20+i*45;
				addChild(b0);
				b0 = new Button(100, 30, "TEST");
				b0.x = 130;
				b0.y = 20+i*45;
				addChild(b0);
				b0 = new Button(100, 30, "TEST");
				b0.x = 245;
				b0.y = 20+i*45;
				addChild(b0);
				b0 = new Button(100, 30, "TEST");
				b0.x = 360;
				b0.y = 20+i*45;
				addChild(b0);
			}
		}
	}
}
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.BlendMode;
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.DropShadowFilter;
import flash.filters.GlowFilter;
import flash.geom.ColorTransform;
import flash.geom.Matrix;
import flash.text.TextField;

import org.flashdevelop.utils.FlashConnect;
class Button extends Sprite {
	private var text:TextField;
	private var w:Number;
	private var h:Number;
	private var str:String;
	private var col:uint = 0xe6e6e6;
	private var onMouse:Boolean = false;
	private var isPress:Boolean = false;
	private var isFlow:Boolean = false;
	private var sp:Sprite;
	private var bitmap:Bitmap;

	public function Button(w:Number, h:Number,str:String):void {
		this.w = w;
		this.h = h;
		this.str = str;
		init();
	}

	private function init():void {
		text = new TextField();
		text.text = str;
		text.textColor = 0x777777;
		text.x = (w - text.textWidth) / 2;
		text.y = (h - text.textHeight) / 2;
		text.selectable = false;
		addChild(text);
		var rr:Number = (h - 4) / 2-2;
		var c:Circle = new Circle(rr);
		c.x = rr + 5;
		c.y = h / 2;
		addChild(c);
		c = new Circle(rr);
		c.x = w-(rr + 5);
		c.y = h / 2;
		addChild(c);
		addEventListener(Event.ENTER_FRAME, draw);
		addEventListener(MouseEvent.ROLL_OVER, over);
		addEventListener(MouseEvent.ROLL_OUT, out);
		addEventListener(MouseEvent.MOUSE_DOWN, down);
		addEventListener(MouseEvent.MOUSE_UP, up);
		bitmap = new Bitmap(new BitmapData(w, h, true, 0x00000000));
		sp = new Sprite();
		addChild(sp);
		sp.addChild(bitmap);
		bitmap.filters = [new BlurFilter(2, 2, 1)];
	}

	private function draw(e:Event):void {
		sp.graphics.clear();
		graphics.clear();
		graphics.beginFill(0xe6e6e6);
		graphics.drawRoundRect(0, 0, w, h, w / 5, w / 5);
		graphics.endFill();
		if (isPress) {
			z += ( 15 - z) * 0.4;
			var xx:Number = 0;
			var yy:Number = h*Math.random();
			var th:Number = Math.random()*2 +1
			sp.graphics.moveTo(xx, yy);
			while (yy < h && xx < w) {
				yy += 10*Math.random() -5;
				xx += 10*Math.random() + 4 ;
				sp.graphics.lineStyle(th,0xffff99,1);
				sp.graphics.lineTo(xx,yy);
			}
		}else if (onMouse) {
			z += ( -15 - z) * 0.1;
		}else {
			z += (0 - z) * 0.1;
		}
		var cash:BitmapData = new BitmapData(w, h, true, 0x00000000);
		cash.draw(sp, null, new ColorTransform(1,1,1,0.9), BlendMode.ADD);
		bitmap.bitmapData = cash;
	}

	private function over(e:MouseEvent):void {
		onMouse = true;
	}

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

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

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

}

class Circle extends Sprite {
	private var px:Number;
	private var py:Number;
	private var rr:Number;

	public function Circle(r:Number) {
		px = 0;
		py = -r / 2;
		rr = r;
		var blur:BlurFilter = new BlurFilter(2, 2, 2);
		this.filters = [blur, new BevelFilter(4, 45, 0xaaaaaa, 1, 0x444444, 1, 6, 6, 1, 4)];
		addEventListener(Event.ENTER_FRAME, draw);
	}

	private function draw(e:Event):void {
		graphics.clear();
		var ang:Number = Math.atan2((stage.mouseY - (parent.y + y)), (stage.mouseX - (parent.x + x)));
		px = -( -rr / 2) * Math.cos(ang);
		py = -( -rr / 2) * Math.sin(ang);
		graphics.lineStyle(1, 0x444444);
		graphics.drawCircle(0, 0, rr);
		graphics.beginFill(0xbbbbff);
		graphics.drawCircle(0, 0, rr);
		graphics.endFill();
		graphics.lineStyle(0, 0xeeeeff);
		graphics.beginFill(0xeeeeff, 0.8);
		graphics.drawCircle(px, py, rr/2.5);
		graphics.endFill();
	}
}

Related posts:

1. カラフルなアニメーション
2. Flash時計
3. 色相環
4. ミサイルコマンダーもどき
5. flash on 2010-5-24