CLOSE OPEN

ENT TECH LAB.

TAGSTAGS

Flash Professional Toolkit for CreateJS


Flash Professional Toolkit for CreateJS

注:音がでます

Flash Professional CS6から、Canvasに書き出せるようになったので試してみました。
とはいっても、FlashPlayerがいらなくなるなんて事ではなく、「Canvasでアニメーション作るのが楽になる」レベルですが。

尚、Canvas側のフレームワークは「CREATEJS」です。

関連リンク

書き出し

詳細は他のサイトにお任せしたいと思いますが、簡単に手順を。

Flash Professional CS6に「Toolkit for CreateJS」拡張機能をインストール(上記リンクより)

Flash Profesionalでアニメーション作成

拡張機能のインストールで書き出しパネルが装備されるので、「パブリッシュ」ボタンを押す

書き出し完了。簡単です。

パブリッシュすると、必要なものが全て書き出されます。

サンプル

※Canvasが見られるブラウザのみ

試しに作成したものは、Flashでよく見るメインバナーっぽいものです。
ビジュアル部にシェイプのタイムラインアニメーション、下にナビっぽいものがあり、ロールオーバーでアルファアニメーション、音声を鳴らします。

尚、残念なことに、

でした。

※音声はOggファイルで改善できることがあるみたいです

タイムラインスクリプティング

ロールオーバーでフレームを移動したりを「タイムラインスクリプティング」で行っています。
Flashのタイムラインに、コメント形式で書きます

サンプルでは、メインタイムラインの2フレーム目に以下のスクリプトを書いています(1フレーム目では案の定ダメでした)。

まあ、要するにボタンインスタンスでマウスのイベントをハンドルしているだけです。
3行目のstage.enableMouseOver()は、マウスオーバーやマウスアウトを有効にしています。
ボタンごとに異なる処理を書くときは、各ボタン内のタイムラインで

とでもして、スイッチさせればいいでしょう。
しかし、スクリプトがASライクですね。詳しくはここにドキュメントがあります。

以下、試してみた上でのメモ。

モダンブラウザでも動作が期待できなかったり、マスクが使えなかったりと制限はかなりありますが、「Toolkit for CreateJS」はどんどん拡張されていくとのことですので期待したいと思います。

サンプルのflaファイル置いておきます。test.fla.zip

関連記事
BACK TO TOP