Flash記事

AIRチュートリアル Flash　第１回 AIRアプリをはじめてみよう ～環境を設定する～

はじめに

Flashユーザー待望のアプリケーション実行環境であるAIR（Adobe Integrated Runtime）がリリースされました。FlashによるWebコンテンツの開発と同様の方法で、WindowsやMacintoshで実行するネイティブアプリケーションを作成でき、Flashによるコンテンツ開発を経験されたことがある方ならどなたでも容易に開発することができます。本チュートリアルでは、FlashによるAIRアプリケーションの開発に必要な開発環境やAIRアプリケーション実行環境の準備、簡単なアプリケーションの作成から実行までの一連の流れをご紹介します。

Flashで作るAIRアプリケーションの開発の必要構成

この記事を読み進める前に、次のソフトウェアをインストールする必要があります。

ソフトウェア
Flash CS3 Professional

• 体験版
• 購入

OS

• Windows XP／Vista、Mac OS 10.4以降

Flashで作るAIRアプリケーションの開発フロー

1. 実行環境・開発環境のインストール
2. AIRアプリケーション開発用のFlashドキュメントの作成
3. FlashによるAIRアプリケーションの開発
4. AIRファイルの作成
5. AIRアプリケーションのインストールと実行

実行環境・開発環境のインストール

AIRアプリケーションの開発を行うためには、実行環境および作成環境を用意する必要があります。
まずは、実行環境となる Adobe AIR（英語版）をダウンロードしてインストールします。
AIRベータ版をインストールしている場合は、アンインストールをしてから上記の動作を行ってください。

【Adobe AIR 1.0】

ダウンロードしたAdobeAIRInstallerファイルをダブルクリックして、インストーラー画面の指示に従いインストールしてください。

次に開発環境を準備します。
Flash CS3は、標準インストールのままではAIRアプリケーションを作成できません。アップデータを適用することで、機能が追加されます。
アップデータが適用されていると、Flash CS3起動時に表示されるスプラッシュウィンドウの「新規作成」部分に、「Flashファイル（Adobe AIR）」が追加されます。

もし、上記のようになっていない場合は、[ヘルプ]メニューの[アップデータ...]を選択し、「Adobe Updater」 を起動してください。画面の指示に従い、アップデートを実行してください。

（※「Adobe Updater」の実行には、インターネットへの接続が必要です。）

ここまでが、AIR開発を行うための事前準備です。
準備ができたら早速、AIRアプリケーションを作成してみましょう。

AIRアプリケーション開発用のFlashドキュメントの作成

Flash CS3 Professionalを起動します。
スプラッシュウィンドウの「新規作成」から[Flashファイル（Adobe AIR）]をクリックします。
新規にFLAファイルが作成されますので、ここでは「MyClock.fla」というファイル名をつけて、デスクトップに保存をします。

FlashによるAIRアプリケーションの開発

まずは、ステージサイズの高さを200程度に設定してください。
次に、ステージ上部に静止テキストで「Adobe AIRの世界へ、ようこそ」という文字列を入力します。
また、その下部にダイナミックテキストを追加して、インスタンス名を"time_txt"とします。（フォントサイズを大きめにしましょう。）

次に、1フレーム目を選択してアクションパネルを開き、以下のコードを入力します。

var time:Date;
addEventListener(Event.ENTER_FRAME, changeTime);
function changeTime (event:Event) {
 time = new Date();
 time_txt.text = time.getHours() + ":" + time.getMinutes() + ":" +time.getSeconds();

それでは、ムービープレビューを行ってみましょう。
以下のようなアプリケーションが実行されます。

プレビュー中のアプリケーションは、確認が終わったら、ウィンドウ右上の[×]ボタンをクリックして閉じてください。

AIRファイルの作成

それでは次に、このアプリケーションを配布できるように設定を行い、AIRファイルへの書き出しを行います。

[コマンド]メニューの [AIR - アプリケーションとインストーラーの設定]を選択します。

以下、設定内容を説明します。

• ファイル名：
  アプリケーションの実行ファイルのファイル名。初期状態では、FLAファイルにつけたファイル名が表示されますが、自由に変更できます。ただし、使用できる文字はASCIIキャラクターのみで、ファイル名の最後にピリオドを使用することはできません。
• 名前：
  ユーザーがアプリケーションをインストールする際に、インストールウィンドウに表示される名前。初期状態では、FLAファイルにつけたファイル名が表示されますが、自由に変更できます。なお、文字の使用に制限はありません。
• ID：
  作成したアプリケーションに割り振る固有のID。初期状態では、Flash自動でIDを割り振りますが、自由に変更できます。IDに使用できる文字は、英数字と「ドット（.）」、「ダッシュ（-）」です。
• バージョン：
  アプリケーションのバージョンを指定します。
• 説明：
  ユーザーがアプリケーションをインストールする際に、インストールウィンドウに表示されるアプリケーションの説明文を指定することができます。
• 著作権：
  MacintoshにインストールされたAdobe AIRアプリケーションのAbout情報に表示される著作権の表記です。この情報はWindowsにインストールされたアプリケーションには使用されません。
• ウィンドウスタイル：
  アプリケーション実行時の、使用するウィンドウスタイルを指定します。
  • [システムクローム] 標準ウィンドウで表示します。
  • [カスタムクローム（不透明）] OSの標準ウィンドウ枠を非表示にします。
  • [カスタムクローム（透明）] ページに透過情報を追加します。
• アイコン：
  アプリケーションのアイコンに使用する画像を選択（初期状態では、Adobe AIRのロゴが使用されます）。[アイコン画像を選択]ボタンをクリックすると、「アイコン画像」ダイアログボックスが開き、各サイズで使用する画像を指定します。このアイコンに使用できる画像の形式はPNGのみです。また、画像ファイルは、アプリケーションのフォルダ内に置く必要があります。
• 詳細：
  作成したファイルタイプの関連づけ、初期ウィンドウサイズ、インストール先フォルダなどを指定します。[設定...]ボタンをクリックして、開かれる「詳細設定」ダイアログボックスで設定を行います。

• カスタムアプリケーション記述ファイルを使用：
  自分で定義したアプリケーション記述ファイルを使用する場合にチェックを入れて、そのファイルを指定します。
• 電子署名：
  電子証明書を指定します。AIRアプリケーションでは書き出しにはこの設定が必要です。
• 保存先：
  作成したAIRアプリケーションの保存先を指定。初期状態では、FLAファイルを保存したディレクトリとなっており、右側の「フォルダと虫眼鏡の図」のアイコンのボタンをクリックして任意の場所を指定することができます。
• 含まれるファイル：
  AIRファイルに含めるアセットファイルなどを指定することができます。初期状態では、アプリケーション本体であるSWFファイルと、アプリケーションの設定を行うアプリケーション記述ファイル（XML）が含まれます。

最終出力の前に、AIRアプリケーションの作成には、電子署名を使用しますので、その設定も行います。

※電子署名は、アプリケーションの作成後にコードの変更が行われていないことや、コードが破損していないことを保証するためのものです。AIRアプリケーションを配布し、ほかのユーザーが利用できるようにするには、必ずこの電子署名が必要となります。この電子署名には、商用の証明書だけでなく、アプリケーション制作者自身が発行する自己証明書を使用することができます。なお、後で電子証明書を追加するという前提で一時的に署名なしでアプリケーションファイルを作成することもできます。以下の手順で電子署名を設定します。

※電子証明書は、Acrobatなどで使用されている電子署名ファイル（拡張子.pfxや.p12）と同じ形式です。

• 商用の証明書を使用するには、[参照...]ボタンをクリックして証明書を選び、パスワードを入力して[OK]ボタンをクリックします。
• 自己証明書を作成するには、[作成...]ボタンをクリックして「自己署名の電子証明書を作成」ダイアログボックスを開き、各項目を入力します。「種類：」ではセキュリティのレベルを設定します。[2048-RSA]は、[1024-RSA]にくらべ複雑な暗号化を行います。

ここでは、新規に電子証明書を作成してみましょう。「電子署名：」の右側の[設定...]ボタンをクリックします。開かれた「電子署名」ダイアログボックスで、[作成...]ボタンをクリックします。 「自己署名の電子証明書を作成」ダイアログボックスで、電子証明書の内容を入力し[OK]ボタンをクリックします。

[OK]ボタンをクリックしたときに、以下のような画面が表示されれば電子証明書の作成は完了です。

ここで[OK]ボタンをクリックして、「電子署名」ダイアログボックスに戻ります。

「電子署名」ダイアログボックスに戻ったら、「証明書：」のところで、先に作成した電子証明書が選択されていることを確認してください。また、「パスワード：」のところに、先の電子証明書の作成時に指定したパスワードを入力します。
パスワードを記憶させておきたいときは、「このセッションのパスワードを保存」のチェックボックスをオンにします。最後に[OK]ボタンをクリックします。

最後に「AIR - アプリケーションとインストーラの設定」ウィンドウに戻り、ウィンドウ下部の[パブリッシュ]ボタンをクリックします。

以下のように表示されれば、AIRファイルの作成が完了です。

デフォルトでは、FLAファイルを保存したディレクトリ（今回はデスクトップ）にAIRファイル（.air) が作成されます。

AIRアプリケーションのインストールと実行

（※インストールには、使用しているコンピューターの管理者権限が必要です）

今作成されたMyClock.airをダブルクリックすると、AIRのインストーラーが起動します。インストーラーの指示に従って、AIRアプリケーションのインストールを行います。

インストール完了後、アプリケーションが自動的に実行されます。

このAIRアプリケーションを終了させる場合は、AIRアプリケーション（MyClock）ウィンドウの［×］ボタンをクリックします。
また、このAIRアプリケーションをアンインストールする場合は、OSのアンインストール機能（Windows Vistaの場合は、コントロールパネルの「プログラムと機能」）から行うことができます。

もっと学ぶには

Flashの基本しっかりとおさえたい方にオススメのトレーニングコースです。
基本となる制作方法や、環境設定、アニーション、ユーザーインターフェース、画像の挿入、テキスト、ナビゲーション、サウンド、ビデオなど、Flashコンテンツの制作に欠かせない要素を多数ご説明します。

このコースでは、操作方法の習得だけでなく、Flash制作における概念知識もしっかりとマスターすることができ、実務の活用にも結びつけることができます。

• Flash CS3：Fundamentals

Flashの基礎はマスターされた方で、ActionScriptを初歩から習得したい方はこちらのトレーニングコースがおすすめです。
ActionScriptの用語の説明や書き方などの基礎的な部分から、実践で使えるスクリプトまで、ハンズオン形式で習得します。
文系のためのActionScript入門講座

• http://m-school.biz/training/actionscript_beginner.htm

さらに上級のActionScriptを習得されたい方におすすめのトレーニングコースはこちらです。
Flashコンテンツの制作をおこなう上で必須となる知識を、総合的に学習できます。ActionScript 2.0の基本的な概念をより深く理解することにより、表現の幅はぐっと広がり、さまざまなFlashコンテンツを作れるようになります。

• Flash CS3: ActionScript NextStep

著者について