Edge Animateを試そう：スプライトシートを使ったアニメーション制作

Edge Animate CC （2014年06月公開） 対応

スプライトシートとは、パラパラ漫画のようなコマ送りのアニメーションの、その時々の状態をタイル状に配置した画像ファイルです。PhotoshopやFlash Professionalといったデザインツールで作成することができます

Edge Animate CC を使えば、HTMLページ内で、スプライトシートの表示領域を切り替えながらのコマ送りアニメーションの再生も、簡単に実現できます。

Edge Animate CC の体験版をダウンロード サンプルファイルをダウンロード

この記事では、スプライトシートを使ったアニメーションを Edge Animateで作成する手順について、解説します。

記事内で使用するサンプルのベースとなったコンテンツが公開されています。下のリンクをクリックするとご覧になれます。

スプライトシートを使ったアニメーションサンプルを見る

参考：Edge Animateの基本的な使い方は「Edge Animate入門」をご覧ください。

スプライトシートの準備

まずは、スプライトシートを用意しましょう。

この記事では、サンプルファイル内に含まれているヒヨコのスプライトシート（hiyoko.png）を利用していきます。もちろん、ご自身で制作されたデザインのスプライトシートを利用して頂いても大丈夫です。

ちなみに、Flash Professionalで制作したシンボルを、スプライトシートとして書き出す際に、書き出すデータ形式としてEdge Animateを指定すると、Edge Animateがスプライトシートの情報を管理するためのファイル（EASファイル）が同時に出力されます。これにより、手間をかけることなくスムーズに、Flash ProfessionalからEdge Animateにコンテンツを移行させることが可能になります。

この機能は2014年6月に公開されたFlash Professional CCから利用できます。

Edge Animateでのスプライトシート取り込み

それでは、実際にEdge Animateにヒヨコのスプライトシートを取り込んでみましょう。

スプライトシートは、Edge Animateのライブラリパネル内にある「シンボル」から取り込みます。「シンボル」と書かれた箇所の右にある「+」ボタンをクリックすると、メニューが表示されます。ここで、「スプライトシートを読み込み」を選択します。

スプライトシートは、ライブラリパネルの「シンボル」から取り込みます 「シンボル」の「＋」ボタンをクリックしてから、「スプライトシートを読み込み」を選択

ファイルを選択する画面が出てきますので、準備したスプライトシートを選択して、「開く」をクリックしましょう。

すると、「スプライトタイトルを定義」というパネルが表示され、取り込んだスプライトシートが表示されます。

「スプライトを定義」パネル。このパネルの中で、スプライトシートの扱い方を設定します

このパネル内の値を調節して、取り込んだスプライトシートのEdge Animate内での取り扱いを設定していきます。

アニメーションの情報を設定しよう

スプライトシートからコマ送りアニメーションを再生するには、各コマの位置と大きさ、再生する速度などの定義が必要です。

サンプルのスプライトシートは、縦に2コマありますので、「行数」に「2」を、そして、横に4コマありますので、「列数」に「4」を設定してください。また、アニメーションが1周する時間を、2秒に設定したいので、「アニメーション継続時間」に「00:02.000」と入力してください。

「スプライトを定義」パネルの設定例

上記の設定後、パネル上部に表示されているスプライトシートの各コマが、ズレなく均等に分割されているのを確認した上で、「アニメーションをプレビュー」をクリックして、実際の表示を確認しましょう。

デザインの動きはスムーズか、スピードが適切かを確認した上で、問題なければ、「アニメーションを停止」をクリックして、パネル下部にある、「読み込み」ボタンをクリックしましょう。

これでスプライトシートが、シンボルとしてライブラリに読み込まれます。ライブラリパネルの中の「シンボル」の箇所に、新たなシンボルが追加されていることに注目してください。

スプライトシートがEdge Animateに取り込まれると、ライブラリパネル内の「シンボル」に追加される

以上で、スプライトシートのEdge Animateへの取り込みは完了です。

ちなみに、前述のようにFlash ProfessionalでEASファイルを出力した場合、「スプライトを定義」パネルから読み込むことで、これらの設定の手間を省略することができるので、覚えておくと良いでしょう。

スプライトシートを利用したアニメーションの作成

それでは、取り込んだスプライトシートを、ブラウザ内で再生されるアニメーションとしてつくる手順を紹介します。

ステージ上への配置

早速、ライブラリパネルからシンボルをドラッグ＆ドロップして、ステージに設置してみましょう。

取り込んだスプライトシートは、ドラッグ&ドロップでステージ上に設置する

この状態で一度、ブラウザでプレビューをしてください。ブラウザでプレビューするには、アプリケーションメニューの「ファイル > ブラウザでプレビュー」を選択するか、または、キーボードショートカットで、Windowsなら「Ctrl + Enter」、Macなら「Command + Enter」を押します。

数秒間だけアニメーションが表示されて、その後は静止した状態になりませんでしたか？これは、スプライトシートのコマが最後のコマに到達して、そこでアニメーションが停止したためです。

ここでは、ヒヨコのアニメーションを止めずに、繰り返しアニメーションをループさせたいと思いますので、Edge AnimateのAPIを利用して、ループ処理を組み込んでいきましょう。

アニメーションをループさせよう

アニメーションをループさせる為に、コードを挿入します。まずは、シンボルのタイムライン画面を表示しましょう。

ステージ上のインスタンス、または、エレメントパネルかライブラリパネルの該当シンボルをダブルクリックしてください。すると、スプライトシートのシンボルのタイムラインが表示されます。そのタイムラインパネルには、先程「スプライトの定義」パネルに設定した内容が反映されています。

タイムラインパネルには、先程「スプライトの定義」パネルで設定した、“2秒間”のアニメーション継続期間の間に、等間隔でコマ送りアニメーションが再生されるよう、自動で設定されている

タイムラインパネルにある再生ヘッド（赤いライン）を、アニメーションの最後の位置に移動させます。

この位置に、アニメーションをループさせるためのスクリプトを追加しましょう。「トリガーを挿入」ボタンをクリックして、アクションパネルを表示させてください。

「トリガーを挿入」ボタンをクリックすると、再生ヘッドの位置にコードを挿入できる Edge Animate のアクションパネル。簡単に、複雑なスニペットを挿入できる

アクションパネル内の「アクションを選択」の欄の左側の列に表示されているのは、利用可能なアクションのカテゴリーです。まず、この列から「再生」をクリックします。すると、その右に、選択したカテゴリーに含まれるアクションのリストが表示されます。

今回は、「アニメーションが最後まで再生されたら、初めに戻って再度再生する」というループアニメーションを作成したいので、ここでは「再生」を選択します。これで実行するアクションが選択されました。

次に、「ターゲットの選択」の列から、ループさせたい要素（この図では「hiyoko_symbol_1」）を選択します。そうすると、パネル上部のコードビューに、挿入するコードのプレビューが薄いグレーで表示されますので、「Enter」キーを押して確定しましょう。「sym.play();」というコードが挿入されていたら、ループアニメーションの実装は完了です。

一度この状態で、ブラウザでプレビューをしてみましょう。先程とは違って、スプライトアニメーションがループしていることでしょう。

完了したら、「ステージ」パネル上部のパンくずナビゲーションから、「ステージ」のタイムライン画面に戻っておきましょう。

タイムラインアニメーションと組み合わせよう

最後におまけです。ヒヨコの歩くアニメーションに合わせて、ヒヨコをムーンウォークさせてみましょう。

先に述べたように、Edge Animateで取り込まれたスプライトシートは、「シンボル」として取り扱われます。そのため、他のシンボル同様に、タイムラインアニメーションの設定が可能です。

まず、ステージのタイムラインパネルで、再生ヘッドを、「0：00」に合わせた後、該当するスプライトシートのシンボルを選択した状態で、プロパティパネルから下記のように設定します。

設定すると、下の図のようにタイムラインに表示されます。

タイムラインアニメーション設定例 / アニメーション開始時点

その後、再生ヘッドを「0:05」に合わせた上で、プロパティパネルから下記のように設定します。

そうすると、下図のようにタイムラインにトランジションが生成されます。

これで、5秒かけてシンボルのX座標が12から421に変化します。つまり、シンボルがステージの左端から右端に移動することになります。

タイムラインアニメーション設定例 / アニメーション終了時点

ブラウザでプレビューしてみましょう。ヒヨコが歩きながら、後ろに移動するアニメーションができましたね。

このように、スプライトアニメーションとタイムラインアニメーションを組み合わせることで、アニメーションの表現の幅をさらに広げることが可能です。

Edge Animateでは、簡単な手順でスプライトシートを取り込んで、アニメーションを作成することが可能です。是非、ご自身でいろいろと試してみてください。