2010.12.29

画像のマスクが移動するアニメーション(Flash AS3)

村式ブログ

ポールスミスのサイトで使われているような、画像のマスクが移動していくアニメーションをActionscript3で作ってみました。

下図のように、湖の画像に台形のマスクをかけてそれを動かすことで
その下にある草原の画像が現れていく、という仕組みです。
左側がマスクの動き、右側が実際の見え方です。
ps.jpg

まず、マスクを作ります。
Shape::graphics で台形を作り、黒で塗ってBitmapDataにします。
(ソースコードはわかりやすさのためにいろいろ省いています。原理に注目してください。)

function createMask(){
    var shape = new Shape();
    var g = shape.graphics;
    g.lineStyle(1, 0x000000, 0);
    g.beginFill(0x000000, 1.0);
    g.moveTo(0, 0);
    g.lineTo(WIDTH, 0);
    g.lineTo(WIDTH + DELTA, HEIGHT);// DELTAは台形の長辺と短辺の長さの差
    g.lineTo(DELTA, HEIGHT);
    g.endFill();

    var mask:BitmapData = new BitmapData(WIDTH + DELTA, HEIGHT, true);
    mask.draw(shape);
    return mask;
}

画像をマスクするために BitmapData::copyChannel()を使います。
まず画像をBitmapdataにロードしておいて、上で作ったBitmapなマスクデータのREDチャネルを画像のALPHAチャネルにコピーします。
(マスクは黒(#000000)で作ったのでREDでなくBLUEでもGREENを使っても同じことになります)
これで画像がマスクされます。

次に、このマスクを移動する処理を書きます。
BitmapData::copyChannel()ではコピーする開始点の座標を指定できるので、この座標を徐々に変えることでマスクが動いているように見せることができます。
この例ではx座標を左にずらしていきます。下の例では簡単のため20pxずつ固定で移動させていますが、実際はここで加速度をつけるといいでしょう。
上のレイヤーの画像を完全にマスクし終えたら、マスクの位置を巻き戻して一つ下のレイヤーの画像に同じ処理をします。

function moveMask(e:TimerEvent){

    // マスク処理
    // ※photosは写真のBitmapdataの配列
    photos[index].copyChannel(
        mask,
        mask.rect,
        new Point(pos_x, 0),// マスクを横に移動する
        BitmapDataChannel.RED,
        BitmapDataChannel.ALPHA
    );

    if(pos_x <= -1 * DELTA){
        // マスクが移動しきったら巻き戻して次の画像へ
        pos_x = WIDTH;
        index++;

        removePrev(); // 前の画像の削除、メモリ解放
        loadNext();   // 次の画像をロードする
    }else{
        // マスクを少しずつ左にずらしていく
        pos_x -= 20;

        timeObj = new Timer(8, 1);
        timeObj.addEventListener(TimerEvent.TIMER, moveMask);
        timeObj.start();
    }
}

これを繰り返すことでアニメーションが出来上がります。

この記事を書いた人

中川尚（メガネ）