お問い合わせ

ツール

マルチデバイスLab.で開発したアプリケーションやツールなどをご紹介します。

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

Posted on:
2012.2. 7
Posted by:
糸数昌史
Tag : :
,
,
,
,
,
swf_animation_converter_mainimage.png



去年公開させて頂きました、「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までよろしくお願いします!

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




このページのトップへ戻る