FindxFine

Flashでカバーフローを作りたい(PART1) : 円運動

Flashを勉強し始めました。なんとかAppleやAmazonなどで利用されているカバーフローのような作品を作りたいと思っています。健忘禄の意味もこめて記事を書いていきます。

本記事までのファイル : coverflow2.swf
現在までのファイル : coverflow1.swf

本記事の健忘禄

• 動的にムービークリップをステージに配置
• 配置したムービークリップが規則的な円を描く

動的にムービークリップをステージに配置

attachMovie(sinbol,name,depth,prop);

配置したムービークリップが規則的な円を描く

動的に配置したムービークリップのonEnterFrameイベントハンドラに円運動を記入します。

var degree = 0;

ムービークリップ.onEnterFrame(){
	// 円運動の中心点
	var centerX = 中心のX座標;
	var centerY = 中心のY座標;
	// 円の半径
	var radius = 円の半径;
	// 度数を弧度(ラジアンへ)
	var radian = Math.PI/180*degree;
	// 三角関数で円上の位置を取得し、自身の位置に設定
	this._x = this.centerX + radius*Math.cos(radian);
	this._y = this.centerY + 100*Math.sin(radian);
	// 度数を増やす
	degree += 5;
}

coverflow1.swfのソース

// クリップ作成オブジェクト
function CreateClip(degree) {

	/* プロパティ */
	// 度数
	this.degree = degree;
	// 半径
	this.radius = 100;
	// 円中心
	this.centerX  = 150,
	this.centerY  = 150,

	/* onEnterFrameイベントハンドラ */
	this.onEnterFrame = function(){
		// 弧度
		var radian = Math.PI/180*this.degree;
		// 位置
		this._x = this.centerX +this.radius*Math.cos(radian);
		this._y = this.centerY +this.radius*Math.sin(radian);
		this.degree += 5;
	}

}

// インスタンスの生成と配置
var deg = 0;
var obj = new Array();
for(var i=0; i<8; i++){
	obj[i] = new CreateClip(deg);
	deg += 45;
	attachMovie('clip','clip'+i,i,obj[i]);
	trace(i);
}

/*
var obj1 = new CreateClip(0);
var obj2 = new CreateClip(45);
var obj3 = new CreateClip(90);
var obj4 = new CreateClip(135);
var obj5 = new CreateClip(180);
var obj6 = new CreateClip(225);
var obj7 = new CreateClip(270);
var obj8 = new CreateClip(315);
attachMovie('clip','clip1',1,obj1);
attachMovie('clip','clip2',2,obj2);
attachMovie('clip','clip3',3,obj3);
attachMovie('clip','clip4',4,obj4);
attachMovie('clip','clip5',5,obj5);
attachMovie('clip','clip6',6,obj6);
attachMovie('clip','clip7',7,obj7);
attachMovie('clip','clip8',8,obj8); */

参考にさせていただいたサイト
»初心者のためのフラッシュレベルアップ講座

このページの上へ移動

      Google   

2008/2/16 土 | cover_flow | 固定リンク |

このページの上へ移動