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