ちょっと前の話になってしまいますが、ちょうど 1 ヶ月ほど前に CreateJS の各ライブラリが更新されました。重要度の高いバグへの対応などが含まれています。もうすぐ公開されるはずの Flash Pro CC にも、こちらのバージョンが同梱されてくるものと思われます。
この更新では、一部の API の整理が行われたり、簡単な機能の追加が行われたライブラリもありますが、基本的には、バグの修正をはじめとするライブラリの品質向上が主な目的とされました。
その一環として、ドキュメントやチュートリアルも大幅に強化されています。しかし、
という理由で、現在進行中のドキュメント日本語化プロジェクトは、特に対応をとらず、従来どおりに進めることとなりました。 （というわけで、もうすぐ完了しそうです）
CreateJS ドキュメントの翻訳も、ご協力いただいた皆様のお陰で、既に 8 割以上が終了しています。
Grant Skinner もとても喜んでいるようで、MAX で会った際に、CreateJS の T シャツを持ってきてくれました。なかなかかわいい T シャツです。
これまで翻訳にご協力頂いた皆様の分は確保しましたので、日本に帰ったらお渡ししたいと思います。お楽しみにお待ちください。
一緒に、CreateJS のポスターも貰いました。（CreateJSポスター）
こちらは、有川さんが一足早く日本に持って帰ってくれるはずですので、今週金曜の勉強会に参加される方は、実物が見れることと思います。
日本のユーザーの活動のシンボルとして、使ってもらえればとのことでした。
Toolkit for CreateJS は、Flash Professional から CreateJS 用のアセットを書き出す機能拡張です。その最新版である Toolkit for CreateJS 1.2 が公開されました。
Flash Pro CS6 に対応しています。ダウンロードはこちらです。
新機能は以下のとおりです。
その他、バグ修正もたくさん行われたそうです。是非インストールしてお試しください。
Grant Skinner の協力により、CreateJS のドキュメントを日本語にローカライズするための仕組みが整いました。翻訳作業に協力していただける方向けに、作業の手順をご説明します。
基本的なステップは以下のとおりです。
翻訳作業の対象は、クラス定義が記述された js ファイル内のコメントと、チュートリアル、およびエラーメッセージです。CreateJS のドキュメントは、js ファイル内のコメントからツールを使って生成されているため、ドキュメントではなく、js ファイル内のコメントを翻訳する方が楽だろうという結論になっています。
先日公開された Flash Pro CS6 のアップデート 2 では、CreateJS の最新版に対応したことになっていましたが、実際には CreateJS に含まれる EaselJS の最新版 （0.5.0） とは動作しないことが報告されていました。これは、EaselJS フレームワークが変更されたために発生していた問題とのことです。
この問題に対応するため、新しい EaselJS プラグインが公開されました。利用するには、ダウンロードしてから手動でファイルを置き換える必要があります。
上の ZIP ファイルを展開すると JSFL ファイルが含まれています。これを以下の場所にある同名のファイルと置き換えます。
Flash Professional で制作したコンテンツを CreateJS 用に書き出せるツールキットの新しいバージョンが公開されたようです。
例によって、Flash Pro CS6 の機能拡張として提供されています。ダウンロードはこちらです。
のわりに、実際にダウンロードしてみると旧バージョンのままだったりしますが、ドキュメントは更新されている様なので、とりあえずその内容をご紹介しておきます。先月アップデートされた CreateJS の新しい機能にも対応しているようです。
まず、新しいバージョン 1.1 は、クラッシックトゥイーン以外のトゥイーンに対応しました。新しいモーショントゥイーンもシェイプトゥイーンも、フレーム毎に分解して書き出されます。 （なので、CreateJS ランタイムが対応したわけでは無いようです）
CreateJS には、スプライトシートを簡単に扱えるように、SpriteSheet というクラスが提供されています。
スプライトシートは、アニメーションを構成する 1 つ以上のフレームを、1 つの画像ファイルにまとめたものです。例えば、幅と高さが 100 ピクセルのフレーム 4 つを横一列にぴったり並べると、幅が 400 ピクセル、高さが 100 ピクセルのスプライトシートになります。
スプライトシートをアニメーションとして扱うためには、SpriteSheet クラスが、「どのスプライトシートの」「どの領域を」「何番目に再生すれば良いのか」、を知らなければなりません。そのため、SpriteSheet のコンストラクタには、以下の 3 種類の情報を渡します。
Flash Professional CS6 と CreateJS の連携と言えば Toolkit for CreateJS ですが、その他にも Flash Pro CS6 のスプライトシート生成機能を使って、Flash Pro CS6 から CreateJS 用にコンテンツを書き出すという手があります。
その際、アニメーションがビットマップ化されるため （スプライトシートになるので当然ですが）、Toolkit を使用した場合と比べて、ファイルサイズや実行時のメモリ使用量は増えそうです。また、ベクタ図形のような、自由な拡大縮小も難しいでしょう。
Flash Professional で制作したタイムラインアニメーションやムービークリップを CreateJS 用のアセットに変換する Adobe Flash Professional Toolkit for CreateJS （以下 Toolkit for CreateJS） が発表されました。
Toolkit for CreateJS は、Flash Professional CS6 に追加する、機能拡張として提供されます。そのため、Flash Pro をインストールした後に、別途ダウンロードしてインストールします。ダウンロード用の URL は、そのうちアドビサイト内に提供されることと思います。
インストールの際には、Extension Manager CS6 が必要です。通常はファイルをダブルクリックするだけでインストールが開始されますが、Windows 7 などでは、予め管理者権限で Extension Manager を起動しておく、という作業が必要になる場合があります。ご注意下さい。追加後は、Flash Pro の再起動をお忘れなく。
最新の CreateJS には MovieClip クラスが追加されています。
とは言っても、機能的には、既に以前からあった EaselJS の Container に TweenJS の Timeline を組み合せて、多少の API を追加した程度です。
その割に複雑なコードになっているので、開発者のためというよりは、Toolkit for CreateJS による Flash アセットの変換のために追加された、というのが近そうです。実際、EaselJS とは別パッケージで配布されているようです。
それから、現バージョンの MovieClip は tick ベースのアニメーションのみをサポートしています。Toolkit for CreateJS から書き出されたコードを、後から人手で修正する場合、この点には注意が必要そうです。
Flash Player の 表示リストに良く似た API で HTML5 の Canvas コンテンツを制作するフレームワーク CreateJS が公開されて、ダウンロードできるようになりました。
以前お伝えした、Flash Professional から CreateJS にアセットを書き出せる Flash Professional Toolkit for CreateJS は、公開時期も公開方法も未発表のため、まだ、Flash オーサリング環境でつくったアセットをそのまま利用できる、という訳にはいきませんが、スクリプト開発者はそろそろ使い方を覚え始めてよさそうな感じです。
という訳で、久しぶりに CreateJS の使い方です。
Flash Professional から HTML5 アセットを書き出すツールキット CreateJS で使われているフレームワークが、まとめて github.com/CreateJS に移されたようです。
ソースを覗いてみると、いろいろとアップデートされていて、予想通り EaselJS には MovileClip クラスが追加されています。 （CreateJS 発表当時の EaselJS の情報はこちら）
各フレームワークのバージョンは 0.x のままですが、createjs.com には、"OFFICIAL SITE: APRIL 16, 2012" の予告もあります。そろそろ正式な発表も近いのでしょうか？ 楽しみです。
EaselJS の DisplayObject には、いくつかマウスイベントを扱うためのメソッドがあります。今回は、それらを利用したマウス操作への対応方法を紹介します。
利用できる関数は以下の 5 つです。名前も使い方も AS2 のイベント処理に良く似ています。
見てのとおり、Flash Player のマウスイベントと比べると数は少ないです。もっとも、この辺りの仕様は、CreateJS が出荷されるときには変わっているかもしれません。
EaselJS から提供される Ticker は、一定間隔で tick イベントを他のオブジェクトに伝える機能を持っています。これと TweenJS を組み合わせてアニメーションを実現するのが CreateJS の基本です。
前の記事でも触れたように、CreateJS に MovieClip が追加される可能性があるため、アニメーション制作の手段は、更に増えるのかもしれません。ともあれ、今回は TweenJS の使い方をご紹介します。
なお、現在公開中の TweenJS のバージョンはまだ 0.1 で、Readme にもアルファ版であることが明記されているので、CreateJS が登場する時には、仕様が変わっているかもしれません。その点はご注意下さい。
まず、Ticker の使い方です。フレームレート （もしくはイベントの間隔） を指定して、定期的に時間の経過を通知するオブジェクトを登録する、という使い方をします。
前の記事で紹介した Flash Professional Toolkit for CreateJS は、CreateJS と呼ばれるオープンソースのフレームワーク群の使用を前提としています。そのため、Flash Pro から書き出された html ファイルと js ファイルは、Canvas の API を利用する代わりに CreateJS の API を呼び出します。
デモビデオ内で紹介されたコードは、こんな感じでした。
(lib.shadow2 = function() {
this.initialize();
this.shape = new Shape();
...
ということで、書き出されたコンテンツの編集をするには、CreateJS の使い方を学ばないとダメそうです。 （単純なタイムラインアニメーションは別として...）
ただし、これは、AS3 の知識がある人には、むしろ良い話かもです。というのは、CreateJS の API は Flash Player の API を意識して設計されているからです。
そこで、今回は CreateJS の中心となるフレームワーク EaselJS の概要を紹介します。
昨日の FITC Amsterdam のキーノートセッションで、Flash Professional から HTML5 コンテンツを書き出す Adobe Flash Professional Toolkit for CreateJS （長い！） が公開されました。
Flash Professional Toolkit for CreateJS （以下 CreateJS） は、Flash オーサリング環境内で作成したタイムラインアニメーションを、ボタン一発で HTML5 キャンバス上で動作するコンテンツに変換します。書き出されたコードは容易に編集可能なため、既存の Flash アセットを HTML5 用に変換する機能としても利用できます。
これで、iOS などの Flash Player を利用できない環境でも、Flash Professional を使ったおなじみのワークフローでインタラクティブなコンテンツを制作できるようになりそうです。
