おそらく、CS 製品の更新と、タイミングを合わせるのが目的ではないかと思われます。ということで、残念ながら、MAX 2012 は開催されないことになります。

MAX 2013 は、来年の 5 月 4 日から 8 日まで　Los Angels で開催予定とのことなので、日本は GW と多少被ることになりそうです。果たして MAX ツアーは無事開催されるでしょうか？

予定されているプログラム内容を見ると、次回の MAX では、以下の 4 つのトピックを中心にセッションが構成されるようです。

CS6 が出たばかりですが、更にその次 （CS7?） の方向性が伺えるようで、興味深いリストです。

今回から、日本語の UI が提供されるようになりました。今まで様子見だった人もそろそろ試し時かもしれません？ ダウンロードはこちらです。 （Edge@Labs Download）

ランタイムの API に若干変更があるようなので、以前のバージョンで制作したコンポジションはそのまま使わない方が良さそうです。

プレビュー 6 の主な新機能は以下のとおりです。

• ローカライズ：
  日本語を含む 6 カ国語をサポート。言語の変更は 「ヘルプ」 メニューの 「言語を変更」 から行う

更に、パフォーマンスの改善と、多くのバグ修正も行われています。

Toolkit for CreateJS は、Flash Professional CS6 に追加する、機能拡張として提供されます。そのため、Flash Pro をインストールした後に、別途ダウンロードしてインストールします。ダウンロード用の URL は、そのうちアドビサイト内に提供されることと思います。

インストールの際には、Extension Manager CS6 が必要です。通常はファイルをダブルクリックするだけでインストールが開始されますが、Windows 7 などでは、予め管理者権限で Extension Manager を起動しておく、という作業が必要になる場合があります。ご注意下さい。追加後は、Flash Pro の再起動をお忘れなく。

さて、

CreateJS は Flash とは無関係な JS フレームワークです。Flash Player の表示リストとよく似た API を提供しはしますが、開発にも実行にも Flash は一切必要としません。

同様に、Flash Professional CS6 も CreateJS をサポートしません。そもそも、オープンソースのフレームワークに、製品が依存するのは避けたかったことでしょう。例えば CreateJS のバグによる問題が起きたとしても、アドビが勝手に修正することはできないですし、それに、CreateJS がバージョンアップするごとに、Flash Pro のアップデートが公開されるのも、あまり嬉しくない気がします。

そこで両者を繋ぐのが Toolkit for CreateJS です。というわけで、Toolkit for CreateJS は 2 つの技術に依存します。実際、CreateJS は、Flash Pro CS6 で追加された新しい JSFL を使っているため、CS5.5 以前のバージョンでは使えません。

その一方で、Flash Pro と CreateJS は勝手に更新を行うことができます。Toolkit for CreateJS さえ対応してくれれば良いからです。

以上をふまえて、

想定されているワークフローは、

1. Flash Professional でプロトタイプ作成、評価
2. Toolkit for CreateJS を使って、アセットを CreateJS 用に書き出し
3. 好みのエディタで JavaScript コーディング、実際のコンテンツを開発

というものだと思われます。あくまでビジュアルアセット制作が役割、という割り切りです。HTML5 モーションデザインの統合環境を目指している Edge と比べると限定的です。

Toolkit for CreateJS を使っていると、「Flash Pro が JavaScript をもっと本格的にサポートすれば良いのに」 と思うようになってくるかもしれません。しかし、現状では、HTML 書き出し機能が Flash Pro 自体の機能では無いことを考えると、その方面の期待は薄そうです。 （使い勝手の向上の一貫としての改善はあると思いますが）

とはいえ、Flash コンテンツ制作のワークフローを持つ個人やチームにとっては、今後、スマホ向けにも、ほぼ同様の手順でコンテンツ制作が行えるようになるわけで、その点では大きな進歩だと言えそうです。

それから、従来は Flash Player などの実行環境が担当していたマルチプラットフォーム対応を、開発環境が担い始めた点にも注目です。

関連ビデオ

英語ですが、使い方の説明なので、見れば大体分かると思います。

• まず、ごく簡単な機能紹介：
  New Support for HTML5 in Flash Professional CS6
• 次に、書き出しの手順紹介：
  Exporting Flash Content as HTML in Flash Professional CS6
• タイムラインに JS を記述：
  Creating JavaScript in Flash Professional CS6
• 最後に、Grant Skinner による解説：
  Publish to HTML5 Using the Adobe Flash Professional Toolkit for CreateJS

英語でも大丈夫な人は最後のビデオだけで大丈夫だと思います。

まず概要を押さえてから Grant のビデオを見ようという人、あるいはとりあえず概要だけ分かれば良い人には、最初の 3 つをお勧めします。

ほぼ隔週で水曜日の夜 8 時半頃に放送開始の予定で、第 1 回は、発表されたばかりの CS6 製品の新機能紹介がテーマになる予定だそうです。

現在暫定サイトが公開中です。 （ADC OnAir）

今回のテーマは、HTML5 デザインツールとのことで、発表されたばかりの CS6 製品 （と一部出荷前の製品） の HTML5 関連の機能を中心にしたイベントです。

無償イベントですが、参加にはイベントサイトから事前登録が必要です。まだ準備中のようですが、すぐに更新されると思いますのでお忘れなく。 （ADC MEETUP ROUND05）

CS6 の新しいスイートのパッケージ情報はこちらです。（CS6 Design & Web Premium / 購入ガイド : 製品の比較）

また、既報のとおり、Creative Cloud によるサブスクリプションのライセンス制が導入されます。発売記念の、月 3,000 円のプランもあるようです。詳細はこちらです。 （Adobe Creative Cloud / 購入ガイド : メンバーシップ）

Creative Cloud メンバーシップの一環として、サービスもいくつか提供されるようです。（データの保管、共有、Typekit, Business Catalyst）

さて、Web 系の主な製品の主な新機能は以下のとおりです。

• 新しいランタイムのサポート
  • Flash Player 11.2 対応
  • AIR 3.2 対応
• プラットフォームの拡張
  • Stage3D サポート
  • HTML 書き出しに対応 （Tookit for CreateJS）
• AIR 開発支援機能の強化
  • ANE （AIRネイティブ拡張）を利用した開発への対応
  • AIRランタイムのパッケージ同梱に対応 （AIR Captive Runtime）
  • AIR SDK の管理機能、新バージョンの追加が容易に
  • AIR モバイルシミュレーター
• アニメーションの書き出し
  • スプライトシートの作成
  • PNGシーケンスの書き出し

Dreamweaver CS6 （製品ページ、HTML5 特設サイト）

• HTML5 / CSS3 関連
  • 可変グリッドレイアウト作成機能
  • CSS3 トランジションパネルの追加
  • マルチスクリーンプレビューの強化
• モバイル 対応
  • jQuery Mobile スウォッチの追加
  • PhoneGap:Build との連携
• その他
  • Web フォント対応
  • 画像の最適化機能
  • FTP の高速化
  • Business Catalyst サポート

Fireworks CS6 （製品ページ）

• CSS3 対応
  • CSS プロパティ
  • CSS スプライト
  • 塗りとストロークの不透明度スライダー
• jQuery Mobile テーマ作成機能
• ユーザビリティ改善
  • カラー選択
  • ストロークダイアログの位置ボタン
  • グラデーション／パターンハンドルの角度設定
  • Fireworks編集PNGの拡張子に 「.fw.png」をサポート

とは言っても、機能的には、既に以前からあった EaselJS の Container に TweenJS の Timeline を組み合せて、多少の API を追加した程度です。

その割に複雑なコードになっているので、開発者のためというよりは、Toolkit for CreateJS による Flash アセットの変換のために追加された、というのが近そうです。実際、EaselJS とは別パッケージで配布されているようです。

それから、現バージョンの MovieClip は tick ベースのアニメーションのみをサポートしています。Toolkit for CreateJS から書き出されたコードを、後から人手で修正する場合、この点には注意が必要そうです。

MovieClip(mode, startPosition, loop, labels) 

最初の引数には、以下の 3 種類の値のどれかが指定されます。

• MovieClip.INDEPENDENT；親とは独立してタイムラインを再生。親がポーズ時でも再生は継続される。デフォルト値
• MovieClip.SINGLE_FRAME；タイムラインにフレームを 1 つだけ持つ
• MovieClip.SYNCHED；親と再生を同期する。複数のパーツから構成されるアニメーションの再生時に使用

2 つ目以降の引数は、それぞれ、再生開始位置、再生の繰り返し、タイムライン上のラベル、を指定するのに使います。

インスタンスが生成されたら、タイムラインに Tween を追加します。この操作は、インスタンスの timeline 属性に対して行います。（基本的な Timeline の機能は、TweenJS の概要をご覧下さい）

this.timeline.addTween(Tween.get(this.child).to({x:0,y:0},20).wait(1));

この後、再生を開始すると、MovieClip 内の要素の属性が指定されたとおりに変化します。

再生の制御にはお馴染みの関数が用意されています。

gotoAndPlay( positionOrLabel ) 
gotoAndStop( positionOrLabel ) 
void play() 
void stop() 

gotoAndPlay() と gotoAndStop() の引数は、フレームの番号か、タイムライン上のラベル名のどちらかを指定できます。

http://johndunning.com/fireworks/mxp/Edge

MXP ファイルをダウンロードしてダブルクリックすると、Fireworks から利用可能になります。Fireworks を起動後、「コマンド」 → 「Edge」 → 「Export to Edge」 とたどると、Edge 用の HTML ファイルや JS ファイルが生成されます。

書き出し時には既存のファイルが上書きされるので注意が必要です。書き出したのをそのまま Edge で編集していた場合、再書き出しによりせっかくの修正作業が全て消えてしまうかもしれません。

書き出すフォルダの変更は、「Edge」 → 「Change Export Folder」 からできます。

• 回転してから拡大縮小した要素が正しく表示されない （拡大縮小と回転するのは OK）
• 中心以外の点の周りに回転させた要素が正しく表示されない
• X と Y 両方向に変形させた、あるいは変形後拡大縮小した要素が正しく表示されない
• 半透明の色をステージに指定できない （Fireworks に機能が無い）
• テクスチャ、パターン、グラデーションをそのまま保持するにはグループ化してビットマップとして書き出す
• テキストは位置が多少ずれることが多い

などが挙げられています。

以前お伝えした、Flash Professional から CreateJS にアセットを書き出せる Flash Professional Toolkit for CreateJS は、公開時期も公開方法も未発表のため、まだ、Flash オーサリング環境でつくったアセットをそのまま利用できる、という訳にはいきませんが、スクリプト開発者はそろそろ使い方を覚え始めてよさそうな感じです。

という訳で、久しぶりに CreateJS の使い方です。

前回の記事に書いたように、CreateJS のフレームワーク内で、マウスの移動やマウスから指が離れたことを知らせるイベント用のリスナを定義できるのは、onPress と onMouseDown イベントリスナの中だけです。 （少なくとも今のところ）

他の状況でも、マウスの位置を知りたいというような場合は、Canvas タグを利用します。下の例のように、必要なイベントのリスナを canvas に定義すると、ブラウザからマウスの操作状況を取得できるようになります。

var canvas;
// マウスの x 座標と y 座標を保持する
var _mouseX;
var _mouseY;
 
function init() {
  // canvas にイベントリスナを設定
  canvas = document.getElementById("canvas");
  canvas.onmousemove = mouseMove;
}
 
function mouseMove(e) {
  if(!e) { e = window.event; }
  // canvas 上の座標に変換
  _mouseX = e.pageX - canvas.offsetLeft;
  _mouseY = e.pageY - canvas.offsetTop;
}

ただし、ここで取得できる座標は HTML が表示されているウインドウを基準とする座標のため、そのままでは使いにくいかもしれません。ステージ （canvas） を基準とする座標に変換するには、上の例のように canvas の座標分、値を変更します。

座標変換その 2

ステージ上の座標は、DisplayObject の globalToLocal() メソッドにより、特定の DisplayObject の座標系に変換できます。

Point globalToLocal(x , y)

globalToLocal() メソッドの引数は、ステージ上の x, y 座標です。戻り値は、ローカル座標に変換後の値を持つ Point オブジェクトです。

例えば、上の例で取得したマウス座標は、以下のように変換できます。

var canvas;
var stage;
var shape;
 
var _mouseX;
var _mouseY;
var _lastPoint;
 
function init() {
  canvas = document.getElementById("canvas");
  stage = new Stage(canvas);
 
  // DisplayObject をステージに追加
  shape = new Shape();
  shape.x = 40;
  shape.y = 20;
  stage.addChild(shape);
 
  Ticker.addListener(window);
}
 
function tick() {
   // 既にマウス座標が取得されているものと仮定
  _lastPoint = shape.globalToLocal(_mouseX, _mouseY);
}

これで、ある点がオブジェクトに含まれるかを、簡単に判断できるようになります。

CreateJS の DisplayObject にはオプジェクトと点の重なりを判断する hitTest() メソッドが用意されています。このメソッドの引数には、判定するオブジェクトを基準とした座標系で位置を指定します。

// 座標を shape 基準に変換
_lastPoint = shape.globalToLocal(_mouseX, _mouseY);
 
// 重なりの判定
if (shape.hitTest(_lastPoint.x, _lastPoint.y)) {
  // 重なっていた場合の処理を記述
}

引数に指定された座標と重なっていると true が、重なっていなければ false が返されます。影などは重なりの判断に含まれません。

BitmapData.drawWithQuality

ビットマップの描画クオリティを引数に指定できるメソッドが追加されました。

これまでも、Stage.quality 属性を使って、描画の質を指定できましたが、これは全てのビットマップ描画に影響するものでした。新しく追加された drawWithQuality() メソッドを使えば、個々のビットマップに描画品質を指定できます。

これにより、例えば、デバイスのような CPU の性能に依存できない実行環境では、Stage の描画品質を low に設定して、パフォーマンス改善を図りつつ、きれいに見せたいときだけ、medium あるいは high を使う、といった手段が可能です。

（ちなみに、モバイル向けの AIR では、medium がデフォルト値です）

drawWithQuality(source:IBitmapDrawable, matrix:Matrix=null,
 colorTransform:ColorTransform =null, blendMode:String=null,
 clipRect:Rectangle=null, smoothing:Boolean=false,
 quality:String=null)

最後の quality に指定できる値は、StageQuality クラスに指定されています。

• StageQuality.LOW
• StageQuality.MEDIUM
• StageQuality.HIGH
• StageQuality.BEST
• StageQuality.HIGH_8X8
• StageQuality.HIGH_8X8_LINEAR
• StageQuality.HIGH_16X16
• StageQuality.HIGH_16X16_LINEAR

下の 4 つは今回追加された値で、Flash Player 11.3 以降のみで利用可能です。従来の HIGH と同じアルゴリズムを使いながら、アンチエイリアスに使用するピクセルを 4x4 から拡大したものです。名前の最後に LINEAR が付くものは、アンチエイリアスの計算を、リニア sRGB 空間で行います。

以下は、使い方の例です。

var ｔextField:TextField = new TextField();
ｔextField.text = "Hello World";
 
var ｂitmapData:BitmapData = new BitmapData(80, 20);
// StageQuality.HIGH を指定してテキストをビットマップ化
ｂitmapData.drawWithQuality(ｔextField, , , , , , StageQuality.HIGH);

BitmapData.encode

BitmapData.encode() メソッドは、BitmapData オブジェクトを PNG、JPEG、JPEG XR のいずれかのフォーマットにエンコードします。ネイティブの機能でエンコードが行われるため、高速に処理を行うことができます。特にデバイス環境では有効そうです。

BitmapData.encode() の定義は以下の通りです。戻り値は ByteArray です。

encode(rect:Rectangle, EncoderOptions:Object, bArray:ByteArray = null)

最初の引数は、BitmapData 内のエンコードする領域です。Rectangle オブジェクトで指定します。

2 つ目の引数は、エンコードのオブションを指定します。指定できるクラスは以下の 3 つです。エンコードしたいフォーマットに合ったものを選びます。

PNGEncoderOptions()
JPEGEncoderOptions(quality:uint=80)
JPEGXREncoderOptions(quantization:uint=20, colorSpace:String="auto",
 trimFlexBits:uint=0)

オプションによっては、引数をとるものがあります。例えば、JPEG の場合、引数に品質を 1 ～ 100 の間で指定します。

JPEG XR の場合はもう少し複雑です。JPEGXREncoderOptions のコンストラクタには 3 つの引数が用意されています。

最初の引数はデータの損失の度合いを 0 ～ 100 の間で指定します。0 であればデータロスが発生しません。20 を超えると画像が荒くなるため、10 当たりが良く使われるようです。

次の引数は、色空間変換のためのサンプリング方法の指定です。指定できる値は、BitmapEncodingColorSpace クラスに定義されています。

COLORSPACE_4_2_0
COLORSPACE_4_2_2
COLORSPACE_4_4_4
COLORSPACE_AUTO

通常はデフォルトの COLORSPACE_AUTO のままでよいようです。

3 つ目の引数は、量子化後のエントロピー符号化に使用するデータ量を指定します。通常は、画像の劣化を避けるためにデフォルト値を使います。

最後に、BitmapData.encode() のサンプルコードです。

var bitmapData:BitmapData = new BitmapData(640,480,false,0x00FF00);
var byteArray:ByteArray = new ByteArray();
var rectangle:Rectangle = new Rectangle(0,0,640,480);
// 標準の品質でJPEGにエンコード
bitmapData.encode(rectangle, new JPEGCompressOptions(), byteArray);
 
// 結果を表示する
var loader:Loader = new Loader();
loader.loadBytes(byteArray);

Shadow は、デスクトップ上の Chrome とネットワーク接続されたデバイス上の表示を自動的に同期させるツールです。利用方法はちょっとめんどくさいので、始めての方は以前の記事をご覧下さい。（Adobe Shadow の設定方法と注意点）

Shadow のプログラム一式はこちらからダウンロードできます。サポートされる環境はリリース 1 と同じです。デバイス用は iTune Store や Google Play に直接行った方が早いかもしれません。

なお、iOS 版 （1.0.184） はまだ公開されていないようでした。新しい iPad には、このバージョンが必要な様です。

さて、リリース 2 で追加された新機能は以下のとおりです。

その他の注意事項は、リリース 1 のままのようです。

ソースを覗いてみると、いろいろとアップデートされていて、予想通り EaselJS には MovileClip クラスが追加されています。 （CreateJS 発表当時の EaselJS の情報はこちら）

各フレームワークのバージョンは 0.x のままですが、createjs.com には、"OFFICIAL SITE: APRIL 16, 2012" の予告もあります。そろそろ正式な発表も近いのでしょうか？ 楽しみです。

ベータ版なので、仕様どおりに動かない場合もあると思いますが、その場合はバグのレポートをお願いします。

バックグラウンドでの動作

まず、iOS 上で、バックグラウンドでの再生時に利用できる機能が追加されています。

• AIR 3.2 ： マルチタスクへの対応、サウンドの再生
• AIR 3.3 ： 上記に加え、位置情報、ネットワークの利用と、OS がアプリを停止させる通知

これにより、マルチタスク関連ではネイティブアプリと同様の振る舞いが実現できるようになりそうです。

<iPhone>
  <InfoAdditions>
    <![CDATA[
      <key>UIBackgroundModes</key>
      <array>
        <string>location</string>
      </array>
    ]]>
    </InfoAdditions>
</iPhone>

UIBackgroundModes キーの値には、必要に応じて location と audio のどちらか、あるいは両方を指定できます。このキーが指定されていると、AIR アプリは、バックグラウンドにまわされると 4 fps で動作し続けます。 （ただし描画処理は一切行われません）

iOS の、10 分後には終了するらしいバックグラウンドタスク機能を使うには、以下のタグを iPhone タグ内に記述します。

<iPhone>
  <executeInBackground>true</executeInBackground>
</iPhone>

executeInBackground タグに指定できる値は　true か false です。true であれば、アプリはバックグラウンドタスクとして振る舞うようになります。

以上の変更に伴い、新しくイベントが追加されました。

これまでも、アプリケーションがバックグラウンドにまわされると、Deactivate イベントが発生していましたが、これだとアプリが停止したかまでは分かりません。そこで、iOS がアプリを停止させる際、直前に Suspend イベントがアプリに渡されるようになりました。

なお、バックグラウンドタスクとして実行される場合も、フレームレートは 4 fps におとされます。

シミュレーター向けのパッケージ

AIR 3.3 からは、iOS シミュレータ向けにアプリをパッケージできます。この場合、アプリのテストには、SDK だけダウンロードすれば、開発者証明書やプロビジョニングプロファイルは不要です。

シミュレータは iOS デバイスではなく、Mac 上で動作するため、AIR アプリはインタープリターモードでパッケージされることになります。

パッケージの際には、ADT コマンドのの -target に、以下のどちらかを指定します。通常のテスト用とデバッグ用があります。

• ipa-test-interpreter-simulator
• ipa-debug-interpreter-simulator

例えば、デバッグ用のパッケージをする場合は、以下のようなコマンドラインになります。

adt -package -target ipa-debug-interpreter-simulator -connect
 -storetype pkcs12 -keystore Certificates.p12 -storepass password
 My_ipa_name my_ipa-app.xml my_ipa.swf

パッケージされたアプリをシミュレータにインストールするには、以下のように記述します。-installApp オプションが （-uninstallApp と -launchApp も） -platform ios の師弟と一緒に使えるようになりました。

その他の変更点は、-platformsdk の追加のみです。-platformsdk の後には、実際にインストールされている SDK へのパスを指定します。 （例： /Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator5.0.sdk）

adt -installApp -platform ios -platformsdk path
 -device ios-simulator -package My_ipa_name.ipa

インストールされたアプリの実行は以下のような感じです。

adt -launchApp -platform ios -platformsdk path
 -device ios-simulator -appid My_ipa_name

その他、 シミュレータでもネイティブ拡張機能を使ったテストができるよう、extension.xml 内の platform タグに、iPhone-x86 が指定できるよう変更されています。

<extension xmlns="http://ns.adobe.com/air/extension/3.1">
  <id>com.test.extensions</id>
  <versionNumber>1</versionNumber>
  <platforms>
    <platform name="iPhone-x86">
      <applicationDeployment>
        <nativeLibrary>library.a</nativeLibrary>
        <initializer>TestNativeExtensionsInitializer</initializer>
        <finalizer>TestNativeExtensionsFinalizer</finalizer>
      </applicationDeployment>
    </platform>
  </platforms>
</extension>

USB 接続によるデバッグ

最後に、USB デバッグ機能です。

この機能を利用するには、パッケージの際、-listen オプションを指定します。これにより、アプリ起動時に fdb からの接続を待つようになります。target に指定できるのは ipa-debug-interpreter か ipa-debug のどちらかです。

adt -package -target ipa-debug-interpreter -listen
 my.mobileprovision -storetype pkcs12 -keystore Certificates.p12
 -storepass password My_ipa_name my_ipa-app.xml my_ipa.swf

デフォルトでは、fdb との接続に、ポート番号　7936 が使われます。パッケージの際、-listen の後に番号を指定して、任意のポートを使うこともできます。

adt -package -target (ipa-debug-interpreter | ipa-debug) -listen 16000
...

アプリケーションがパッケージされたら、ipa ファイルをデバイスにインストールして起動します。

アプリが実行されたら、ldb を使ってデバッグの準備をします。ldb は SDK フォルダの下の lib/aot/idb です。

-devices オプションを使って USB 接続されたデバイス名を表示させたら、

idb -devices

次に -forward オプションを使って、デバイスと fdb の中継を行うよう指示します。

idb -forward FDB_PORT 7936 デバイス名

-forward の後の最初の数値が fdb 側のポート番号、2 つ目の数値が アプリをパッケージする際に -listen で指定したポート番号 （デフォルトのままなら 7936） です。

以上で、デバッグを開始するのに必要な準備は整いました。そこで、下の例のように fdb を起動します。

 fdb -p FDB_PORT

-p の後には、ldb -forward で指定した fdb 側のポート番号を指定します。fdb が起動したら、r コマンドでデバッグセッションが開始されるかどうか確認してみてください。