Flashでカバーフローを作りたい(PART3) : 円運動の停止
Flashでカバーフローを作りたいの第3回目です。PART1,PART2は下記をご覧ください。
»Flashでカバーフローを作りたい(PART1)
»Flashでカバーフローを作りたい(PART2)はこちら
今回はステージに配置したムービークリップが45度回転したら停止します。
今回のファイル : coverflow2_1.swf
// 9フレーム目で停止
// ムービークリップは45度移動
// ステージの変数(_rootは省略可)
_root.stop = false;
_root.count = 0;
// グローバルメソッド
_root.onEnterFrame = function(){
_root.count += 5;
}
// ムービークリップブジェクト
function CreateClip(degree) {
/* プロパティ */
// 度数
this.degree = degree;
// 半径
this.radius = 100;
// 円中心
this.centerX = 150,
this.centerY = 150,
/* onEnterFrameイベントハンドラ */
this.onEnterFrame = function(){
if(!_root.stop&&_root.count != 45){
// 度数を弧度(ラジアン)へ
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)/2;
// 度数を増やす
this.degree += 5;
}
else {
_root.stop = true;
}
}
}
// ムービークリップの作成と配置
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]);
}
今回のファイル : coverflow2_1.swf
スポンサード リンク
2008/2/16 土 | cover_flow | 固定リンク | コメント (0)
Flashでカバーフローを作りたい(PART2) : 円の変形
前回(Flashでカバーフローを作りたい:PART1)の続きです。前回は円の上を動くムービークリップを作成しました。今回は円の形を変形します。
this._x = this.centerX +this.radius*Math.cos(radian);
//this._y = this.centerY +this.radius*Math.sin(radian);
// 振幅を縮小
this._y = this.centerY +this.radius*Math.sin(radian)/2;
今回のファイル : coverflow1_2.swf
前回のファイル : coverflow1.swf
スポンサード リンク
2008/2/16 土 | cover_flow | 固定リンク | コメント (0)
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); */
参考にさせていただいたサイト
»初心者のためのフラッシュレベルアップ講座
スポンサード リンク
2008/2/16 土 | cover_flow | 固定リンク | コメント (0)