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

Tweet

Pocket

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

Demo : 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); */

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