Adobe AIRで作るデスクトップアプリケーション

第9回Flash CS3による開発

アップデータのインストール

去る8月21日、Adobe LabsにてAdobe AIR update Beta 1 for Flash CS3 Professionalが公開されました。このアップデータをFlash CS3に適用すれば、ようやくFlashでもAIRアプリケーションが開発できるようになります。早速インストールして開発手順を見ていきましょう。

アップデータは上記のページからダウンロードできます。Flash CS3の日本語版を使っている場合は「Japanese」というリンクを辿って日本語版のアップデータを入手しましょう。もっとも、日本語版と言っても「日本語版のFlash用」という意味で、インターフェース自体は英語です。このアップデータをダブルクリックしてインストールするとFlash CS3にAIRの開発環境が追加されます。

Flash CS3日本語版に対応したアップデータが用意されている
ファイルやフォルダのアイコンを取得できるFlash CS3日本語版に対応したアップデータが用意されている

ファイルの新規作成

アップデート後のスタートアップスクリーンには、⁠Flash File(Adobe AIR)」という新規作成項目が追加されています。これを選択すると、AIR用にパブリッシュ設定された新規ドキュメントが開きます。今回のアップデータ(以下、Beta 1)では、[ファイル]メニューからの新規作成には対応していません。

スタートアップスクリーンからAIR用の新規ファイル作成が可能
スタートアップスクリーンからAIR用の新規ファイル作成が可能

ファイルを新規作成すると、⁠About Authoring for Adobe AIR」というダイアログが表示されます。ここには、AIRアプリケーションの設定が[コマンド]メニューからできることや、ムービープレビュー時にAIRの実行環境でアプリケーションが起動されることなどが書かれています。通常は「Don’t show me again(次回から表示しない⁠⁠」にチェックを入れたいところですが、Beta 1では機能せず毎回表示されます。

ファイルの新規作成時に表示される概要ダイアログ
ファイルの新規作成時に表示される概要ダイアログ

スタートアップスクリーンから新規作成する以外にも、既存のファイルのパブリッシュ設定を変更することでAIR用の書き出し設定にできます。アップデート後のパブリッシュ設定ダイアログでは、[Flash]タブの[バージョン]で「Adobe AIR 1.0」が選択できるようになっています。

AIR用のパブリッシュ設定が追加されている
AIR用のパブリッシュ設定が追加されている

Flashでのオーサリング

では、せっかくなので何かアプリケーション化してみましょう。手元にあるSWFファイルを読み込んで表示するのが手っ取り早そうです。読み込むSWFファイルはActionScript 1.0や2.0を使っていても構いません。AIR APIに直接アクセスすることはできませんが、ムービーの再生自体は可能です。ここではFlash 8で作った時計(clock.swf)を利用することにします。

システムクロームは使わずに背景を透過させましょう。その場合、マウスドラッグによる移動処理を明示的に組み込む必要があります。また、終了時の位置を記録して、次回起動時に同じ位置に現れたほうがアプリケーションらしくなります。以上を踏まえて、メインタイムラインの第1フレームにスクリプトを記述します。

import flash.filesystem.*;
var _prefs:File;
var _loader:Loader;
init();
readData();
loadClip();
function init():void {
  registerClassAlias("flash.geom.Rectangle", Rectangle);
  registerClassAlias("flash.geom.Point", Point);
  _prefs = File.applicationStorageDirectory.resolve("prefs");
}
function loadClip():void {
  _loader = new Loader();
  _loader.contentLoaderInfo.addEventListener(Event.INIT, loadInitHandler);
  _loader.load(new URLRequest("clock.swf"));
  addChild(_loader);
}
function loadInitHandler(e:Event):void {
  stage.window.addEventListener(NativeWindowBoundsEvent.MOVE, boundsMoveHandler);
  _loader.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
}
function boundsMoveHandler(e:NativeWindowBoundsEvent):void {
  this.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}
function mouseDownHandler(e:MouseEvent):void {
  stage.window.startMove();
}
function mouseUpHandler(e:MouseEvent):void {
  stage.window.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
  writeData();
}
function readData():void {
  if (_prefs.exists) {
    var stream:FileStream = new FileStream();
    try {
      stream.open(_prefs, FileMode.READ);
      stage.window.bounds = stream.readObject();
    } catch (error:IOError) {
      trace(error.message);
    } finally {
      stream.close( );
    }
  }
}
function writeData():void {
  var stream:FileStream = new FileStream();
  try {
    stream.open(_prefs, FileMode.WRITE);
    stream.writeObject(stage.window.bounds);
  } catch (error:IOError) {
    trace(error.message);
  } finally {
    stream.close( );
  }
}

コードの大まかな流れは次の通りです。まず、ウィンドウ位置の保存データがあれば読み込んでその位置に移動し、続いて外部SWFファイルを読み込みます。その後、マウスダウンイベントとウィンドウ移動イベントを監視します。マウスダウン時にウィンドウの移動を開始し、ウィンドウが移動したならばマウスアップイベントの監視を行います。そしてマウスアップ時(つまり移動終了時)にウィンドウ位置の保存を行います。ウィンドウの移動中だけマウスアップイベントを監視するのがポイントです。

外部SWFの読み込み部分はLoaderクラスを使った一般的な処理で、AIR特有のものではありません。それ以外の処理については、これまでの連載で解説したウィンドウやファイル関連のAPIを使っています。詳細はバックナンバーを参考にしてください。Beta 1ではAIR API関連のコードヒントやカラーリングには対応していませんが、以上のようにFlashから直接AIRの機能にアクセスできます。

既存のSWFファイルをアプリケーション化した
既存のSWFファイルをアプリケーション化した

アプリケーションのテスト

アプリケーションの動作確認は、通常のFlashムービーと同じくムービープレビューで行います。ただし、実際のAIR実行環境で再生される点が異なります。ムービープレビューを行うと、SWFファイルと一緒にアプリケーション記述ファイルが作成され、それがADLに渡されます。なお、ムービープレビュー中は、trace()メソッドによる出力確認はできません。trace()を使いたいときは、[デバッグ]メニューの[ムービーのデバッグ]で動作確認します。また、アプリケーションとして書き出す際にSWFファイルは作成されないため、事前にテストを兼ねてSWFファイルを書き出しておく必要があります。

アプリケーションの設定と書き出し

[コマンド]メニューから「AIR - Application and Package Settings」を選択すると、設定ダイアログが開きます。ここでアプリケーション記述ファイルの内容とパッケージングの設定を変更できます。

アプリケーションおよびパッケージングの設定ダイアログ
アプリケーションおよびパッケージングの設定ダイアログ

設定項目は以下の通りです。アプリケーション記述ファイルの詳細等はバックナンバーもあわせて参考にしてください。

アプリケーションの設定
File nameインストール時のファイル/フォルダ名
Nameインストーラ等に表示されるアプリケーション名
AIRファイルの名前にも使われる
IDアプリケーションの識別に使われるユニークID
Versionアプリケーションのバージョン
Descriptionアプリケーションの説明
Copyrightアプリケーションに対するコピーライト表記
Window styleウィンドウクロームの指定
Iconアプリケーションアイコンの指定
アプリケーション記述ファイルの設定
Use custom application descriptor file既存のアプリケーション記述ファイルを使う場合にチェックし、ファイルを指定する
インストーラの設定
Destination folderAIRファイルの保存先(Mac版のBeta 1では変更ができない)
Included FilesAIRファイルに同梱するファイル

今回のサンプルではWindow styleは「Custom Chrome(transparent)」を選択して透過背景にします。また、外部SWFを使っているため、忘れずにIncluded filesに追加しておきます。設定が完了したら、[Package]をクリックしてAIRファイルを書き出しましょう(書き出しは[コマンド]メニューの「AIR - Package AIR File」でも可能です⁠⁠。その際、パスやファイル名にスペースや2バイト文字を含めないようにしてください。

なお、Mac版のBeta 1では設定ダイアログで[OK]をクリックしても設定内容の大半が保存されません。設定後そのまま[Package]で書き出す必要があるので注意してください。しかし、毎回最初から設定を入力するのは面倒です。いったんアプリケーション記述ファイルが書き出されたら、以降は[Use custom application descriptor file]でそれを指定した上で、必要に応じて残りの設定を行うとよいでしょう。

おすすめ記事

記事・ニュース一覧