MURASHIKI BLOG | ブログ 村式株式会社

HOME ALL INSIDE LEARN NEWS WORK 社長ブログ

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

Pocket

ポールスミスのサイトで使われているような、画像のマスクが移動していくアニメーションを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();
    }
}

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

この記事を書いた人

中川尚(メガネ)

東京生まれ。幼少期はサウジアラビアで世界各国の友人と過ごす。 早稲田大学・大学院では暗号の研究に従事。情報セキュリティの職を経て村式創業に参画。自然、宇宙、日本文化、音楽、芸術、数学、仏教、神道、テクノロジーなど人智を超えてそうなものに興味がある。 夜更けになると鎌倉の裏通りに繰り出し、地元の怪しい仲間たちと酒を酌み交わしている。

タグ一覧

ALL INSIDE LEARN NEWS TOP WORK 社長ブログ