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(); } }