連載 :
  Flash×AIR

FlashデザイナだってAIR

2008年6月13日(金)
高澤 真人

FlashとAIR

 第1回ではAIRについて簡単に説明しました。今回はFlashとAIRの関係について解説してから、実際にアプリケーションを制作してみましょう。

 Adobe Flashは、Flashデザイナの皆さんがご存じのとおり、アニメーションやサウンドを駆使したリッチコンテンツを制作するためのソフトウェアです。Flashで作成されたコンテンツは、Flash Playerと呼ばれるランタイムをWebブラウザにプラグインとしてインストールすることで再生することができます。

 AIRは、Adobe AIRというランタイムをOSにインストールすることで、制作したコンテンツをデスクトップ上で動作させています。また、Adobe AIRにはHTMLを表示するためのエンジンと、Flashコンテンツを動作させるためのエンジンが内蔵されているので、Webブラウザやプラグインを意識せずに、制作したコンテンツをデスクトップ上で利用できるようになります。

 AIRは、次世代のFlash、別次元にステップアップしたFlashとも言われています。しかし、Flashは現在もバージョンアップを繰り返していて、今後、AIRに一本化されることなく独自に進化していくそうです。次期Flash Player 10が楽しみですね。

やっぱり「Hello world」

 まずは「Hello World!!」という文字を表示するシンプルなアプリケーションを5つのステップで作成してみましょう。

 ステップ1では、Flash CS3 Professionalを起動してステージを準備します。スタートアップスクリーンから「Flashファイル(Adobe AIR)」を選択すると「Adobe AIR オーサリングについて」というウインドウがポップアップしますので、「OK」ボタンを押します。これでステージの準備は完了です。

 スタートアップスクリーンに「Flashファイル(Adobe AIR)」が表示されいない場合は、Flash CS3 Professional用Adobe AIRアップデートのインストールが必要です。アップデータはAdobeのサイトからダウンロード(http://www.adobe.com/support/flash/downloads.html)できます。ページ内に、「Adobe AIR Update for Flash CS3 Professional」とありますので、その下のリンクから、お使いの環境にあったアップデータをダウンロードしてインストールしてください。

 ステップ2では、「テキストツール」を使用してステージの中央に「Hello World!!」を配置します。文字を表示するだけのアプリケーションなのでActionScriptは不要です。

 ステップ3では、ファイル名を指定して、保存してください。保存する際、パスやファイル名にスペースや2バイト文字(日本語)を含めないでください。

 ステップ4では、コマンドメニューから「AIR - AIRファイルを作成」を選択します。電子署名を設定するダイアログが立ち上がるので、証明書の「作成」ボタンを押し、電子証明書を作成してください。電子証明書の作成が終わると、電子署名のダイアログに戻ります。

 ステップ5では、アプリケーションを書き出します。設定したパスワードを入力し、「OK」ボタン押してください。「AIRファイルが作成されました」というダイアログが表示されたら完了です。Flashファイルを保存したフォルダに、AIRファイル(.air)が作成されます。作成されたAIRファイルをダブルクリックし、アプリケーションのインストールを行ってください。インストールが完了すると、自動的にアプリケーションが立ち上がります。

 以上の5つのステップで「Hello World!!」アプリケーションの作成は完了です。

 さて、次ページからは、「イメージスライドプレイヤー」を作成してみましょう。

株式会社ティーケーラボ
テクニカルデザイナ。ティーケーラボにて、数々の新規事業にテクニカルデザイナとして参加。マルチプラットフォーム対応のFLASHプロジェクトでは、大手メーカーから表彰を受ける。現在、AIRプロジェクトに専任で対応し、新規案件の公開を準備している。http://www.tk-lab.com/

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています