花火玉のデザインから色情報を配列にして収集する

ユーザーは「花火玉を作る」画面で花火玉の各「火薬」に色を塗ります。これを元に花火を再現していくわけですが、まず最初の工程として、火薬の色情報を配列として収集します。この時、取得する配列内の順番は火薬の位置によって決められます。

「花火玉を作る」画面にある花火玉の火薬は、スクリプトで生成・配置されており、中心から徐々に半径を拡張するように円を描きながら火薬の位置を決めています。このスクリプトでは、最初の円周で6つの火薬を等幅に配置し、半径を5つずつ増やしながら円を拡張し、次の円周で12個、18個、24個…と火薬の数を6ずつ増やしていきます。このように生成された火薬（MovieClip）の順番に沿って配列へ追加しています（図3）。

図3 花火玉の火薬の位置で配列の順番が決まっています

以下は、花火玉を生成するスクリプトです。

// HALF_SIZE : 花火玉全体の半径
// DEFAULT_COLOR : 塗りがないときの星の色
// selected_color : 選択中のRGBカラー
private function starCreate():void {
              
	var renge_length:uint = 5;
	var renge_margin:Number = ( HALF_SIZE  - 10 ) * 2 / ( renge_length * 2 - 1 );
	var renge:Number;
	var angle_length:uint;
	var angle_margin:Number;
	var angle:Number;
	var star_mc:Sprite;
	var rad:Number;
	var half:Number = renge_margin / 2;
	var color:uint = DEFAULT_COLOR;
              
	renge = 0;
              
	// 円周を増幅
	for ( var i:int = 0; i < renge_length; i++ ) {
                            
		angle_length = ( i == 0 ) ? 1 : 6 * i;
		angle_margin = 360 / angle_length;
		angle = 90;
                            
		// 円周の玉数を増幅
		for ( var k:int = 0; k < angle_length; k++ ) {
                                          
			// 花火の星を作る
			rad = angle * PI;
			star_mc = new Sprite();
			star_mc.graphics.beginFill( color );
			star_mc.graphics.drawCircle( 0 , 0 , half );
			star_mc.graphics.endFill();
			star_mc.x = Math.cos( rad ) * renge;
			star_mc.y = Math.sin( rad ) * renge;
			star_mc.buttonMode = true;
			star_mc.addEventListener( MouseEvent.MOUSE_DOWN , starClick );
			star_mc.addEventListener( MouseEvent.ROLL_OVER , starOver );
			star_mc.addEventListener( MouseEvent.ROLL_OUT , starOut );
			container_mc.addChild( star_mc );
                                          
			// 配列に追加
			star_arr.push( star_mc );
                                          
			// 角度を足す
			angle += angle_margin;
                                          
		}
                            
		// 半径を足す
		renge += renge_margin;
                            
	}
              
	// ボタンオーバーのときのライン
	overline_mc = new Sprite();
	overline_mc.graphics.lineStyle( 2 , 0x999999 );
	overline_mc.graphics.drawCircle( 0 , 0 , half );
	overline_mc.mouseEnabled = false;
              
}
// ボタンクリック
private function starClick( event:MouseEvent ):void {
	var target:Sprite = event.target as Sprite;
	setStarColor( target , selected_color );
}

// ボタンオーバー - ドラッグしながら色を塗る処理
private function starOver( event:MouseEvent ):void {
	var target:Sprite = event.target as Sprite;
	if ( event.buttonDown ) {
		setStarColor( target , selected_color );
	}
	overline_mc.x = target.x + HALF_SIZE;
	overline_mc.y = target.y + HALF_SIZE;
	addChild( overline_mc );
}

// ボタンアウト
private function starOut( event:MouseEvent ):void {
	if ( contains( overline_mc ) ) removeChild( overline_mc );
}

// 星にカラーを適応
private function setStarColor( star_mc:Sprite , color:String ):void {
	var color_trans:ColorTransform = new ColorTransform();
	color_trans.color = ( color != null ) ? Number( "0x" + color ) : DEFAULT_COLOR;
	star_mc.transform.colorTransform = color_trans;
}

また、getter/setterメソッドによって、図4のように61個の色情報が入出力されます。

getter/setterメソッドとは、プロパティの値を設定したり返したりするための専用メソッドで、クラス内にはメソッドとして定義しますが、クラスの外側からはプロパティとしてアクセスすることができます。

この場合のサンプルでは、「data」というgetter/setteメソッドを定義しています。dataプロパティを読み取ると、色情報の配列を返し、逆に色情報の配列をdataプロパティに指定すると花火玉の火薬の色が適応されます。

図4 dataプロパティによって花火玉の火薬の色を設定したり返したりします

以下は、花火玉の配列を入出力するスクリプトです。

// color_arr : カラー情報の配列
// 入力
public function set datas( color_arr:* ):void {
	var len:int = star_arr.length;
	var star_mc:Sprite;
	var color_str:String;
	var data:Object;
	for ( var i:int = 0; i < len; i++ ) {
		star_mc = star_arr[ i ];
		if ( color_arr != null ) {
			data = color_arr[ i ];
			color_str = data.color;
			setStarColor( star_mc , color_str );
		} else {
			setStarColor( star_mc , null );
		}
	}
}
// 出力
public function get datas():Array {
	var color_arr:Array = new Array();
	var len:int = star_arr.length;
	var star_mc:Sprite;
	var color:uint;
	var color_str:String;
	var data:Object;
	for ( var i:int = 0; i < len; i++ ) {
		data = new Object();
		star_mc = star_arr[ i ];
		color = star_mc.transform.colorTransform.color;
		color_str = ( color != DEFAULT_COLOR ) ? ( "000000" + color.toString( 16 ) ).substr( -6 , 6 ) : null;
		data.color = color_str;
		color_arr[ i ] = data;
	}
	return color_arr;
}

ページ 2 / 5

前のページ

次のページ