昨日の 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 を使ったおなじみのワークフローでインタラクティブなコンテンツを制作できるようになりそうです。
AIR 3.2 から、デバイス向けのコンテンツでも Stage３D が利用できるようになります。明日のイベントでも紹介されると思いますが、相当性能はよいようです。
さて、AIR 3.2 の Stage3D をデバイスで使うには、今までになかった注意点がいくつかあります。以下、現在公開されている内容を説明します。
パブリッシュ時の SWF のバージョンは 15 を指定します。
Flash Playre 11.2 と AIR 3.2 の RC 版 （Release Candidate: 正式版の候補） が公開されました。
ほぼ、このまま公開される予定のバージョンです。ということで、公開日も近そうです。
ベータ版からの大きな変更点は、いよいよ AIR が、モバイル環境での Stage3D をサポートしたことです。iOS や Android 環境で GPU を活用したコンテンツを利用できるようになります。
ということで、今回から Android 版の AIR ランタイムもダウンロードできます。また、Flash Player のデバッグ用プレーヤやスタンドアローンのプレーヤも公開されています。
ダウンロードリンクは以下のとおりです。
ADC （Adobe Developer Connection） の Flash Player のロードマップが更新されました。今後 1 ～ 2 年の計画が書かれています。 （Adobe roadmap for the Flash runtimes）
公開されているロードマップは、あくまで現時点での考えであり、大きく変わる可能性があります。そのため、必要に応じて今後も更新されるそうです。最新版のロードマップには、adobe.com/go/flashplayer_roadmap からアクセスできるようになっています。
かなり長いので、今回は実行環境の方向性だけまとめます。全体を通してのポイントは以下の 2 点です。
Adobe と Google が共同で行っている、新しいブラウザプラグイン用の API に関連する情報が公開されました。 （Adobe and Google Partnering for Flash Player on Linux）
新しい API は Pepper というコード名で呼ばれています。Pepper の API すなわち PPAPI は、ブラウザや OS による実装の差を吸収することで、より高品質なプラグインをより効率よく開発できるようにすることを目的としています。
元々は、現在使用されている NPAPI の拡張として始まったものです。 （Flash Player と次世代のプラグイン用 API （NPAPI）） 当初は Netscape 主導でしたが、現在は Google 主導のプロジェクトになっているようです。
前回は、シンボル内の要素を利用する API をご紹介しました。jQuery オブジェクト、DOM 要素、Edge シンボルのインスタンス、が代わる代わる登場してややこしかったですね。
Edge は jQuery に完全に依存しているわけではありませんが、インタラクションが必要な場合は jQuery を避けて通るのは難しいかもしれません。今後 Edge の開発が進むにつれて、このあたり改善があるかもしれませんが。
さて、今回は、シンボル （sym） の外部の要素を取得する方法です。Edge には、同じコンポジション内の他のシンボルのインスタンスや、ページ内のコンポジションのインスタンスを取得する方法が提供されています。
Shockwave Player のセキュリティアップデートが公開されました。Windows 及び Mac 環境で利用されている 11.6.3.633 以前の全てのバージョンが対象です。
重要度は、一番高い "critical" とされており、全てのユーザにアップデートが推奨されています。
ダウンロードはこちらです。 （http://get.adobe.com/shockwave/）
Flash Player の新しいインキュベータ版が Adobe Labs に公開されました。 （Flash Player Incubator@Labs）
今回公開されたのは、保護モードの Flash Player を Windows 7 もしくは Vista 上の Firefox 4.0 以降で利用可能にするものです。既に Google Chrome では利用可能になっている機能です。
公開されているのは 32 ビット版のみです。バージョンは 11.2.300.130 です。
ダウンロードはこちらのページから。 （Flash Player Incubator Download@Labs）
インストール前に、既存の Flash Player のアンインストールが必要です。アンインストーラも上記リンクからダウンロードできます。アンインストーラは 32 ビット版と 64 ビット版があるので、インストールされている Flash Player に応じて選択できます。
前回の記事で書いたように、Edge のアクションが呼び出されると、引数に "アクションの定義されているシンボル" のインスタンスが渡されます。
function(sym, e)
{
// ここに必要な処理を記述する
}
ここで、具体的な例を確認しておきます。
例えば、MySymbol というシンボルのインスタンス MyInstance をステージ直下に配置して、MyInstance にアクションを定義した場合を考えます。
この場合、定義されたアクションは、ステージの定義の一部です （ステージもシンボルの 1 種でしたね）。 MySymbol の定義には含まれません。 従って、アクションの引数の sym が指すシンボルのインスタンスは、ステージ （stage） ということになります。
ちょっと紛らわしいでしょうか？ AS3 であれば、あるオブジェクトにイベントリスナを追加したとき、リスナにはそのオブジェクトの親オブジェクトが渡される、に近い状況です。
アクション内部では、sym すなわちシンボルのインスタンスを使って、様々な制御ができます。今回は sym から利用できる API をご紹介します。
コンポジション、シンボルに続いて、今回はアクションの話題です。アクションは、プレビュー 3 から追加された機能です。
Edge では、イベントの発生と紐付けて実行される処理を "アクション" と呼びます。一定の時間が経過したら表示を切り替えるとか、ユーザが画面にタッチしたら別の URL を開くとか、等の目的に使われます。
アクションはシンボルまたはシンボル内の要素に対して定義され、その実体は JavaScript で記述された関数です。通常は Edge のコードパネル内で記述することになると思われます。
記述されたアクションは、xxx_edgeActions.js ファイル内に保存されるため、後で別途修正することもできます。 コメントの削除は Edge の動作に影響するため避けましょう。
アクションを呼び出すイベントの発生元には、DOM、タッチ操作、タイムラインがあって、おのおの利用できるイベントが決められています。 Edge 内でアクションを定義する場合は、対象に応じて使用可能なイベントだけがリストされるので、いちいち覚えなくても大丈夫そうです。
Edge プレビュー 4 からサポートされた "シンボル" は、登場したばかりにもかかわらず、Edge コンポジションの中核を成す重要な要素です。
シンボルを作成するには、Edge ツール内でオブジェクトを選択した状態で ctrl-y を押して （あるいは右クリックして） "convert to symbol..." を選択します。
Edge では、"シンボル" を拡張したり組み合わせたりしてアニメーションを実現します。シンボルは、グラフィックス、タイムライン、アクション、などから構成されます。Flash のシンボルよりはちょっとシンプルな感じです。
それぞれのシンボルは、子のシンボルを持つことができます。子シンボルは、その状態を変化させてアニメーションに使われることから、"アクター" と呼ばれたりもします。
ということから分かるように、Edge のコンポジションは、ツリー構造をしています。ツリーの頂点は "ステージ" と呼ばれるシンボルです。Edge で新規にコンポジションを作成する場合は、まず、ステージだけの状態から始めることになります。
ステージ以外のシンボルは、コンポジション内で再利用可能 （複数インスタンスを使用できる） です。
Edge を使って制作するアニメーションを "コンポジション" と呼びます。Flash での SWF に相当するものです。
Edge で作ったコンポジションは、そのまま既存の HTML ファイルに組み込めます。もしくは、Edge で既存の HTML ファイルを開いて、その中にコンポジションを制作するという使い方もできます。
現時点の Edge プレビュー 4 では、複数のコンポジションを同時に扱うことができません。そのため、今のところ 2 つ以上の Edge のアニメーションをページに埋め込む場合は、個々にコンポジションを作成しておいて、HTML への組み込みは Dreamwaver なりテキストエディタなりで行うことになります。
さて、Edge でコンポジションを作成すると以下のファイルが作られます。
