AdobeのヘルプにあったHTML Canvas ドキュメントの生成とパブリッシュを眺めてみます。
作り始めは簡単です。
大まかな流れは、
新規作成、HTML5 Canvasを選びます。これだけで、開始できます。
JavaScriptを使ってコードは記述します。
this.（ドット）と書いた時点で、コードヒントがでます。ちょっと助かります。
あとはパブリッシュすれば、完成です。
なんて、そんな簡単にはいかないのですけどね。
まずはFlashの使い方のリハビリです。
AdobeのPinch InのFlash 入門を参考に概要を知ることとします。
第１回 様々なシーンで活用できるFlashコンテンツ
第２回 タイムラインを使ったアニメーション
この辺りはそのまま、HTML5 + JavaScriptで書き出す事ができました。
第３回 MCを使ったアニメーションの”入れ子”
これはどうなるのでしょうか？
新規シンボルを作成して、ムービークリップを作成。そこにテキストを配置。１フレーム目に”１”、２フレーム目に”２”を表示するようタイムラインで作成。
それをステージに配置した時にFlashに注意されました。
LineType は、HTML5 Canvas ドキュメントではサポートされていないので、テキストのインスタンスで MultiLineNoWrap に変換されました。
そもそも、テキストを使ってサンプルを作成する場合はパブリッシュの際に以下のようなメッセーが表示されます。
警告 :
テキスト関連機能のサポートは制限されています。通常は、テキストを HTML エレメントとして含めることを推奨します (DOMElement を参照)。
EaselJS のフレーム番号は 1 ではなく 0 から始まっています。これは gotoAndStop や gotoAndPlay などのメソッドの呼び出しに影響します。
なんて事を言われますが、いまは気にしません。
結果は、ムービークリップを処理してくれて、アニメーションします。
第４回 マスク機能を使ったアニメーション
さて、マスク。それはどうなんでしょう。早速やってみます。
マスクの設定の仕方が分かりませんでしたが、タイムライン上のレイヤー名を右クリック、マスクを選択すれば、マスクとして機能してくれます。
実際にパブリッシュしたところ問題なく動作しました。
なかなか、強力です。
第５回はフィルター機能とブレンド機能
シンボル化して、ぼかしをかけてみました。Flashからはこんな警告が
フィルターは非常に負荷が高く、適用すると更新されません。フィルターが適用されると、「ビットマップとしてキャッシュ」が自動的に有効になります。これにより、アニメーションが更新されるのを防ぐことができます。
ですが、ぼかしは表示されました。
色気を出して、色の変化に挑戦してみたところ、
サポート範囲外の機能が使用されています : ベベル、グラデーショングローおよびグラデーションベベルのフィルターです。
モーショントゥイーンはフレームアニメーションとしてパブリッシュされます。可能な場合はクラシックトゥイーンを使用してください。
というエラーが表示されました。
フィルター効果にたいするアニメーションはまだ無理のようでした。
ブレンド機能も使う事は可能でしたが、乗算しかありませんでした。
第６回 ActionScriptでアニメーションを制御する
使用するスクリプトはJavaScript。
簡単にテストすることとして、１フレーム目で止まって、ボタンを押すと２フレーム目に移動するという仕様にします。
スクリプトは
this.stop()
this.BTN00.addEventListener('click',function() {
exportRoot.gotoAndStop(1);
});
で、１フレーム目に飛んでくれました。CreateJSでは0フレームからはじまるので、Flashのタイムラインフレーム-1で狙ったフレームに飛んでくれます。
スクリプトは何かと引っかかりそうです。
なにか作りながら、悪戦苦闘する事になりそうですが、アニメーションを作るのは非常に楽しそうです。
