Flash を HTML5に変換するアプリ 「SWF Animation Converter」 を利用して、キーボード操作できるキャラクターアニメーションを作成する

去年公開させて頂きました、「SWF Animation Converter」 (以下SAC) がお陰様で多くDLいただき有難い限りの糸数でございます。

しかし、
「アプリで変換はできたけど、マウスアクションとか付けられないの？」
「キーボード操作したいけどどうすれば？」
などの質問をよく受けます（受けるということにしておいて下さい）。
確かにそういうケース多々ありますよね。

しかしそこはご安心を！

実は、SACにはJSのAPIが用意されており、ただflashアニメーションを変換するだけでなく、変換後に比較的自由にカスタマイズできるよう設計されています（したつもりです）。

今回はSACの出力ファイル（スプライトシート等）を利用し、
キーボード操作できるキャラクターアニメーションを作成する方法をご紹介し、最終的にこのようなHTMLサンプルを作成する手順を書いていこうと思います。

---

ますはswfを変換しよう！

まずは、アプリのダウンロードとベース素材を用意。

[1] SACのダウンロード

SWF Animation Converter | マルチデバイスLab.

[2]サンプルflaをダウンロード (CS4形式)

sample4_api.zip

上記がそろったら下記の動画を参考に、変換してみて下さい。




できましたでしょうか？

ここまでがSACの基本的な役割で、スプライトシートとJSを吐き出しています。

SACは特にこのように、「Flash Proで設定したラベル名を、JSに変換し、サクッとアニメーション制御ができる」ので、簡単なゲームやインタラクションを作成するのに、お役に立てる（？）かと思います。

---

カスタマイズする！

結論から言うと、SAC自体はシンプルなDIVなので、それにユーザーイベントを付加すればカスタマイズできるという事になります。

SAC化したいDIVを用意しクラス名をつけ、SWFACObjectの第一引数に渡してやればOK！（ここでは SACArea）
第二引数には画像パス。第三以降は初期値なので無視してもらってOK

クリックイベントを付加してみる

例えば、SACにクリックイベントを付加するサンプルはこうです。
[SAMPLE] クリックイベント

というように、クラス名に対して、カスタマイズしてやればよいわけです。

---

SACの JS API を利用し タイムラインを操作する

SACで書き出した index.html 内 23行目あたり、下記の部分は、再生スタートの命令です。


このようにSACインスタンスには様々なメソッドが用意されています。

どんなメソッドがある？

[1] flashライクに再生/ストップ

[SAMPLE] gotoAndPlay() / gotoAndStop()

[2] flash側で設定したフレームラベルを再生

[SAMPLE] gotoLabel()
gotoLabel() は第二引数に
true を渡すとラベルをループ。
false でラベルを1回だけ再生。
と指定出来ます。

[3] コールバック関数

たとえば画像のロード完了をまってから1フレーム目で静止したい場合は
コールバック関数、setLoadCompleteCallbackを利用し下記のようにします。
[SAMPLE] setLoadCompleteCallback()
その他、ループ時、エンターフレイム時、ラベル再生完了時など、さまざまなコールバックが用意されています

その他

[4] フレームレートを変更したい場合、

[5] divの幅、高さを取得したい場合、

などなど
すべての機能は、APIドキュメントにありますので参照してみてください。
※SACで吐き出されたindex.htmlを開くと、APIのサンプルコードが、 下部にコメントアウトされているので参考にしてみてください。

---

SACファイルにキーイベントを付加するサンプル

では実際冒頭のサンプルファイルのカスタマイズ例を解説します。

画像ロードコールバック登録

まず、画像のロード完了コールバックで、walkアニメーションを設定します

キーイベント設定

次に、jQueryでキーイベントを取得し「A、←、↑、→」キーの押下イベントを取得しそれぞれアクションをつけていきます。

パンチ動作

パンチ動作の終了で、walk動作に自動で戻りたいため、
setLabelCompleteCallback() 関数に、終了時のアクションを登録します。
これはラベルアニメーションの再生がストップしたときに呼ばれる関数です。
同様に、移動や、ジャンプも設定していきます。

最終的には下記のコードを参考にして見てください。
SACキーイベントカスタマイズサンプル

---

以上、SACのカスタマイズのご紹介でした。
ご意見ご質問は@md_labまでよろしくお願いします！

最後まで読んでいただきありがとうございました!

---