アニメーションを活用しよう1

PR TIMESエンジニアの山田です。
アニメーションを組み込んで動きのあるサイトを作成する場合、どのような手法を使っているでしょうか。jQuery・CSS3アニメーション… 様々な手法がありますが、今回はスプライトシートアニメーションを解説してみることにします。

スプライトシートとは

アニメーションの連続した動きを1枚の画像ファイルに並べたものです。例えば以下の画像ファイルは、チェックマークのアニメーションを横4コマ✕縦3コマに並べました。（わかりやすいように背景を黒くしてあります）

スプライトシートの作成

1コマずつ作成してPhotoshopなどを使い1枚に統合することももちろん可能ですが、結構な手間がかかります。そこでFlashCCなどのツールを使うと楽にスプライトシートを作成できるでしょう。
手順は単純で、まずMovieClip内にアニメーションを作成。この時背景にアニメーション全体を覆うように透明の四角を配置すると、書き出す時に均等な大きさで並べてくれます。

アニメーション作成後、ライブラリからムービークリップを右クリック→スプライトシートを生成を選択で書き出し。これだけです。

他にもCreateJS用のツールZOËを使うとSWFをスプライトシートに変換することができます。

アニメーション

スプライトシートが作成できたら、リッチコンテンツ制作用のJavascriptライブラリCreateJSを使って画像をアニメーション再生してみましょう。

スクリプト解説

まずinit内でページが読み込まれたら、画像を読み込みます。

function init() {
    stage = new createjs.Stage(document.getElementById("testCanvas"));

    var manifest = [
        { src: "http://jsrun.it/assets/x/D/b/M/xDbMj.png", type:"image", id: "checkimage" }
    ];

    queue = new createjs.LoadQueue(false);
    queue.loadManifest(manifest,true); 
    queue.addEventListener("complete",loadComplete);
}

画像の読み込みが完了したら、いよいよアニメーション。
今回のスプライトシートは1コマ32✕32の大きさで均等に並べてあるので、framesで大きさを指定します。
またsetFPSではfps（1秒間に再生するコマ数）を設定できます。
それらをCanvasに書き込み再生すると、望み通りの動きになるでしょう。

function loadComplete(evt){
    var ss = new createjs.SpriteSheet({
        "images": [queue.getResult("checkimage")],
        "frames": {"height": 32, "width": 32, "regX": 0, "regY": 0, "count": 9},
        "animations": {"checkanimation": [0, 8, ""]}
    });

    var check = new createjs.Sprite(ss, "checkanimation");
    check.x = 20;
    check.y = 20;
    stage.addChild(check);
    createjs.Ticker.setFPS(24);
    createjs.Ticker.addEventListener("tick", stage);
}

このようにスプライトシートを使うとFlashを使わなくても複雑な動きを取り入れられるので、効果的に使って目を引くサイトを作成しましょう。