リプタクのもう覚えられません
Google
Web サイト内
topmemo ▶ 吹き出し描画サンプル

ActionScript

吹き出し描画サンプル

吹き出しをスクリプトで描画するサンプル。

JavaScriptを有効にし、最新のFlashPlayerをインストールお願いしますGet Adobe Flash player



as3コード(吹き出し描画部)

var kage:Shape = new Shape();//陰
var sen:Shape = new Shape();//線
var nuri:Shape = new Shape();//塗
addChild(kage);
addChild(sen);
addChild(nuri);

func_set_hukidasi(131.7,37.3);//幅131.7,高さ37.3の吹き出しを作成

//吹き出し作成(幅,高さ)
function func_set_hukidasi(w0:Number,h0:Number){
	
	//描画消去
	func_clear_hukidasi();
	
	//色設定
	nuri.graphics.beginFill(0xffffff);//塗
	sen.graphics.beginFill(0x333333);//線
	kage.graphics.beginFill(0x000000,0.3);//陰,透明度
	
	//塗り寸法
	var w1:uint = uint(w0) + uint(w0) % 2;//幅は偶数に切り上げ
	var h1:uint = uint(h0);//高さ
	var r_kadomaru:uint = 10;//角丸幅
	var sankaku_h1:uint = 16;//三角形高さ
	var sankaku_w1:uint = 14;//三角形幅_偶数指定
	
	//線の太さ
	var sen_w:uint = 2;
	
	//陰のオフセット量
	var kage_offsetX:uint = 3;
	var kage_offsetY:uint = 2;
	
	//角丸矩形_x座標,y座標,幅,高さ,角丸半径
	nuri.graphics.drawRoundRect(-w1/2,-h1-sankaku_h1,w1,h1,r_kadomaru);//塗
	sen.graphics.drawRoundRect(-w1/2-sen_w,-h1-sankaku_h1-sen_w,w1+2*sen_w,h1+2*sen_w,r_kadomaru+sen_w);//線
	kage.graphics.drawRoundRect(-w1/2-sen_w+kage_offsetX,-h1-sankaku_h1-sen_w+kage_offsetY,w1+2*sen_w,h1+2*sen_w,r_kadomaru+sen_w);//線
	
	//逆三角形描画(塗り)
	nuri.graphics.moveTo(0,0);
	nuri.graphics.lineTo(sankaku_w1/2,-sankaku_h1);
	nuri.graphics.lineTo(-sankaku_w1/2,-sankaku_h1);
	nuri.graphics.lineTo(0,0);
	nuri.graphics.endFill();
	
	//逆三角形描画(線)
	sen.graphics.moveTo(0,sen_w);
	sen.graphics.lineTo(sankaku_w1/2+sen_w,-sankaku_h1+sen_w);
	sen.graphics.lineTo(-sankaku_w1/2-sen_w,-sankaku_h1+sen_w);
	sen.graphics.lineTo(0,sen_w);
	sen.graphics.endFill();

	//逆三角形描画(陰)
	kage.graphics.moveTo(0+kage_offsetX,sen_w+kage_offsetY);
	kage.graphics.lineTo(sankaku_w1/2+sen_w+kage_offsetX,-sankaku_h1+sen_w+kage_offsetY);
	kage.graphics.lineTo(-sankaku_w1/2-sen_w+kage_offsetX,-sankaku_h1+sen_w+kage_offsetY);
	kage.graphics.lineTo(0+kage_offsetX,sen_w+kage_offsetY);
	kage.graphics.endFill();
}

//描画消去
function func_clear_hukidasi(){
	kage.graphics.clear();
	sen.graphics.clear();
	nuri.graphics.clear();
}
last update 2011.10.13
参考・出典等
「特に無し」

▲page top

topmemogalleryblogtestaboutlinksmail
Copylight(C)2008-2011 Riptac. All Rights Reserved.