AComponent part1 Icon付Button
色々なUIComponentを作る AComponents
part1 iconButton
DysplayObjectをアイコンとして設定できるボタン
/**
* Copyright shohei909 ( http://wonderfl.net/user/shohei909 )
* MIT License ( http://www.opensource.org/licenses/mit-license.php )
* Downloaded from: http://wonderfl.net/c/oQEA
*/
//色々なUIComponentを作る AComponents
//part1 iconButton
//DysplayObjectをアイコンとして設定できるボタン
package {
import flash.net.URLRequest;
import flash.display.Loader;
import flash.display.Sprite;
public class FlashTest extends Sprite {
private var loader:Vector.<Loader> = new Vector.<Loader>();
private var button:Vector.<AButton> = new Vector.<AButton>();
private var url:Array =[
"http://assets.wonderfl.net/images/related_images/0/09/09b5/09b5891806c4344023d6b3e40fafa90145d79b2e",
"http://assets.wonderfl.net/images/related_images/f/fe/fe3e/fe3ef73646ffaa04d3eb4b1798324e8f18b17165",
"http://assets.wonderfl.net/images/related_images/6/62/62ae/62ae8208669d2a98f012bddfd1d27d2fa4e3950a",
];
public function FlashTest() {
for( var i:int=0;i<url.length;i++ ){
loader[i] = new Loader();
loader[i].load(new URLRequest(url[i]));
loader[i].scaleX = loader[i].scaleY = 2;
button[i] = new AButton( loader[i], "button"+(i+1), 54, 54);
button[i].x=84*i+10; button[i].y=10;
addChild(button[i]);
}
button[2].toggle=true;
button[2].setText("toggle1");
button[2].selected=true;
button[3] = new AButton( null, "toggle2", 50, 50);
button[3].x=84*3+10; button[3].y=10;
addChild(button[3]);
button[3].toggle=true;
}
}
}
import flash.events.*;
import flash.geom.*;
import flash.text.*;
import flash.display.*;
//アイコンの付きButton
class AButton extends Sprite{
private var useIcon:Boolean=false,iconHeight:int,iconWidth:int,margin:int,w:int,h:int,rect:Rectangle,on:Boolean=false,face:String="normal";
private var text:TextField,icon:Sprite=new Sprite,back:Shape = new Shape(),window:Shape = new Shape();
public var click:Function,over:Function,out:Function;
public var toggle:Boolean=false;
//コンストラクタ
public function AButton(icon:DisplayObject=null, str:String="", width:int=40, height:int=40, textH:int=20, margin:int=4):void{
text=AStyle.textField("label");
iconWidth=width;iconHeight=height;
var face:Shape=new Shape();var mask:Bitmap = new Bitmap(new BitmapData(1,1));this.icon.mask=mask;
addChild(back);addChild(window);addChild(this.icon);addChild(mask);
this.margin=margin;setIcon(icon);setText(str,textH);drowFace();
mouseChildren=false;addEventListener("mouseOver",onOver);addEventListener("mouseOut",onOut);addEventListener("mouseDown",onDown);addEventListener("mouseUp",onUp);
}
//トグルボタンのオンオフを取得
public function get selected():Boolean{return on;}
//トグルボタンのオンオフを設定
public function set selected(b:Boolean):void{if(on!=b){onDown(null);onOut(null)}}
public function setIcon(icon:DisplayObject=null):void{
if(icon!=null){
useIcon=true;
while(this.icon.numChildren>0){this.icon.removeChildAt(0);}
this.icon.addChild(icon);
}else{ iconHeight=0; }
setSize(iconWidth,iconHeight,margin);
}
//iconのサイズを設定
public function setSize(width:int=40,height:int=40,margin:int=10):void{
icon.mask.scaleX=iconWidth;icon.mask.scaleY=iconHeight;icon.x=icon.y=icon.mask.x=icon.mask.y=margin;
if( iconHeight==0 || iconWidth==0 ){ window.graphics.clear();
}else{ AStyle.drawFace( "trans", window.graphics, new Rectangle(margin,margin,iconWidth,iconHeight) ); }
}
//テキストの設定
public function setText(str:String="", textH:int=20 ):void{
var nowH:int = margin + iconHeight;
if(str!="" && textH>0){
text.text=str; text.width=iconWidth;
text.height=textH; text.x=margin; text.y=nowH;
nowH+=text.height+margin;
addChild(text);
}
rect = new Rectangle(0,0,iconWidth+margin*2,nowH);
}
private function onOver(e:MouseEvent):void{ if(over!=null){over()}if(on){ face="down";drowFace() }else{ face="over";drowFace() } }
private function onOut(e:MouseEvent):void{ if(out!=null){out()}if(toggle && on){ face="select";drowFace() }else{ on=false;face="normal";drowFace()}}
private function onDown(e:MouseEvent):void{ if(click!=null){click()}on=(on==false);if(on){face="down";drowFace()}else{face="over";drowFace()} }
private function onUp(e:MouseEvent):void{ if(toggle==false){ on=false;face="over";drowFace() }}
private function drowFace():void{ AStyle.drawFace( face, back.graphics, rect ); }
}
class AStyle{
static public const faceType:Array = ["trans","normal","over","down","select"];
static public const textType:Array = ["label"];
static public var faceData:Object = {
"trans":{
round:0, thickness:1, lineColor:0x000000, lineAlpha:0.1, fillColor:0xFFFFFF, fillAlpha:0.2, lineGradient:false, fillGradient:false
},"normal":{
round:6, thickness:1, lineColor:0xAAAAAA, lineAlpha:0.2, fillColor:0xFF00FF, fillAlpha:1, lineGradient:false, fillGradient:true,
fillGradeData:["linear",[0x77DDFF, 0x3366FF, 0x3366FF, 0x002266],[0.1, 0.1, 0.1, 0.1],[128,140,240,255], new Matrix(0,0.00121,0.00121,0),"repeat", "linearRGB",0.0]
},"over":{
round:6, thickness:1, lineColor:0xAAAAAA, lineAlpha:0.5, fillColor:0xEEEEEE, fillAlpha:0.3, lineGradient:false, fillGradient:true,
fillGradeData:["linear",[0x77DDFF, 0x3366FF, 0x3366FF, 0x002266],[0.3, 0.3, 0.3, 0.3],[128,145,235,255], new Matrix(0,0.00121,0.00121,0),"repeat", "linearRGB",0.0]
},"down":{
round:6, thickness:1, lineColor:0xAAAAAA, lineAlpha:0.5, fillColor:0xEEEEEE, fillAlpha:0.3, lineGradient:false, fillGradient:true,
fillGradeData:["linear",[0xDD4400, 0xDD4400, 0xEE8833, 0xEE8833],[0.5, 0.5, 0.5, 0.5],[128,145,235,255], new Matrix(0,0.00121,0.00121,0),"repeat", "linearRGB",0.0]
},"select":{
round:6, thickness:1, lineColor:0xAAAAAA, lineAlpha:0.5, fillColor:0xEEEEEE, fillAlpha:0.3, lineGradient:false, fillGradient:true,
fillGradeData:["linear",[0xDD4400, 0xDD4400, 0xEE8833, 0xEE8833],[0.4, 0.4, 0.4, 0.4],[128,145,235,255], new Matrix(0,0.00121,0.00121,0),"repeat", "linearRGB",0.0]
}
}
static public var formatData:Object = {
"label":[ ["align","center"],["size",15],["color",0x666666] ]
}
static public var textData:Object = {
"label":[ ["multiline",true],["selectable",false],["wordWrap",true], ]
}
//ボタンなどの表面を塗る
static public function drawFace(type:String,g:Graphics,r:Rectangle):void{
g.clear();
var d:Object = faceData[type];
g.lineStyle( d.thickness, d.lineColor, d.lineAlpha );
g.beginFill( d.fillColor, d.fillAlpha );
if(d.lineGradient){
var ld:Object = d.lineGradeData;
var lm:Matrix=ld[4].clone;lm.translate(r.x,r.y);lm.scale(r.width,r.height);
g.lineGradientStyle(ld[0],ld[1],ld[2],ld[3],lm,ld[5],ld[6],ld[7])
}
if(d.fillGradient){
var fd:Object = d.fillGradeData;
var fm:Matrix=fd[4].clone();fm.translate(r.x,r.y);fm.scale(r.width,r.height);
g.beginGradientFill(fd[0],fd[1],fd[2],fd[3],fm,fd[5],fd[6],fd[7]);
}
g.drawRoundRect(r.x,r.y,r.width,r.height,d.round);
}
static public function textField(type:String):TextField{
var format:TextFormat = new TextFormat();setting(format,formatData[type]);
var text:TextField = new TextField();setting(text,textData[type]);
text.defaultTextFormat=format;
return text;
}
static public function setting(obj:Object,arr:Array):void{
for(var i:int=0;i<arr.length;i++){obj[arr[i][0]]=arr[i][1]}
}
}