Flash ProからHTML5 Canvasへの書き出しを試す

Flash Pro CCでは、HTML5 Canvas書き出し向けのプロジェクトが作成できるようなので、どういうふうに使えるものか、ちょっとだけ試してみました。画面上に表示された青い丸は、マウスのドラッグで場所を変えられます。（IEでうまくドラッグできないときは、丸の中心より右下あたりをつかむとイイみたいです。なんでだろ？ｗ）






具体的にどんなことをやったのかというと、Flash Proで「HTML5 Canvas」用プロジェクトを作成し、画面に描画するシンボルをステージ上に作成してライブラリに登録。で、一旦ステージ上からはインスタンスを削除して、タイムラインの1番最初に「アクション」としてJavaScriptを記述。プログラム的に20個のインスタンスを作って、マウス操作用のイベントリスナーをくっつけてstage上に表示…といった感じ。

ActionScriptで書いたアクションは、自動ではJavaScriptに変換されないので、中身を見ながら随時書き換えていくという作業が必要になります。ただ、シェイプのインスタンスに収めるシンボルやそのほかの素材を、Flashのドローツールで作ったり、配置したり、ライブラリで管理したりできるのは便利かも。ルートが「Stage」、その下のタイムラインが「exportRoot」というインスタンス名になるほか、ライブラリに入っているシンボルは「lib.」で呼び出すとか、プロパティは「this.」を付けて操作するとか、ActionScriptの時には意識しなくてよかった部分に気を配りつつコードを書く必要はありますが、そもそもActionScriptの時からドキュメントクラスをバリバリ使ってムービー書いていたような人ならすぐに理解できるかもしれません。