アクセシビリティ
デベロッパーリソース

Flash記事

 

AIRチュートリアル Flash 第５回 より効率的に開発しよう！～Flexを利用したASのインクルードとはじめてのMXML～


目次

  1. はじめに
  2. 第一部
  3. FlashのActionScriptをFlexにインクルードしよう
  4. Flex Builder 3 をインストールする（Macintosh版もあるよ）
  5. FlexでAIR用のプロジェクトを作成する
  6. FlashのメインタイムラインのActionScriptを移行する
  7. FlexでActionScriptを記述してみる（FlashのActionScriptクラスを移行する）
  8. アプリケーションの実行
  9. AIRファイルへの書き出し
  10. 第二部
  11. はじめてのMXML
  12. はじめてのMXMLアプリケーション
  13. デザインモードでレイアウトを行う
  14. MXMLおよびActionScriptの追加
  15. おまけ
  16. おわりに

本記事の構成

第一部　FlashのActionScriptをFlexにインクルードしよう

  1. Flex Builder 3 をインストールする（Macintosh版もあるよ）
  2. FlexでAIR用のプロジェクトを作成する
  3. FlashのメインタイムラインのActionScriptを移行する
  4. FlexでActionScriptを記述してみる（FlashのActionScriptクラスを移行する）
  5. アプリケーションの実行
  6. AIRファイルへの書き出し

第二部　はじめてのMXML

  1. はじめてのMXMLアプリケーション
  2. デザインモードでレイアウトを行う
  3. MXMLおよびActionScriptの追加
  4. おまけ
  5. おわりに

第一部　FlashのActionScriptをFlexにインクルードしよう

第一部では、開発環境である「Adobe Flex Builder 3 Professional」をインストールし、開発に必要な準備を行います。
次に、これまでFlash側で作成したActionScriptをFlexに移行すること（インポート）、そして、Flex BuilderではじめからActionScriptを記述することも行います。
第一部の目的は、「Flex Builder がActionScriptエディタとして使える！」ということを感じていただくこと、「Flashで作成したものを生かして、Flexを新たな開発環境として使う可能性」を感じていただくことです。「Flex Builder がActionScriptエディタとして使える！」という部分に関しては、FlashクリエイターでActionScriptコーディングを中心にされている方々の間でひそかに流行っている使い方のようです。Flexは、コード中心で記述することから、FlashのActionScriptエディタと比較した場合、コードを効率よく記述するための環境がよりよく考慮されています。

それでは、早速手順に入りましょう。

Flex Builder 3をインストールする（Macintosh版もあるよ）

今回の主役である開発環境「Adobe Flex Builder 3 Professional」をインストールします。ライセンスをお持ちでない方は、以下のページで無償体験版（60日間）をダウンロードできますので、ぜひインストールして、すばらしいFlexの世界を体験してください！（Adobe IDおよびそのパスワードが必要です。未登録の方は、画面の指示に従って登録してください。）
また、Windows版だけでなくMacintosh版も用意されていますので、Macintoshユーザーの皆さま、デザインワーク中心の皆さまも気軽に試してみてください。

画面を進めるとダウンロードする製品を選択するコンボボックスが表示されますので[[Flex 3]を選択し、隣の[Go]ボタンをクリックします。

画面01

Adobe IDおよびそのパスワードを入力すると、「Adobe Flex Builder 3 Professionalのダウンロード」のページが表示されますので、お好きなエディションのFlex Builderを選択して、ダウンロードを行ってください。

ダウンロードを行ったあとは、インストーラーの指示に従い、インストール作業を行ってください。

FlexでAIR用のプロジェクトを作成する

では、次にFlexの準備を行います。
Flex では、アプリケーションの開発単位である「プロジェクト」を作成します。この「プロジェクト」には、アプリケーションのソースコードや、必要なアセットファイル（画像や、XMLデータなど）、そして、プロジェクトやアプリケーションの設定情報を格納します。

  1. Adobe Flex Builder 3を起動します。（Windowsの場合[スタート]メニューから、[プログラム]、[Adobe]、[Adobe Flex Builder 3]と選択します）
    画面02
  2. [ファイル]メニューから、[新規]、そして、[Flexプロジェクト]と選択します。
    （※左上部「Flexナビゲータ」ビューを、[右クリック]、[新規]そして、[Flexプロジェクト]と選択しても同様の操作が行えます）
  3. 「新規Flexプロジェクト」ダイアログボックスで、次の設定を行います。設定後、[終了]ボタンをクリックします。
    プロパティ名 設定値 説明
    プロジェクト名 Chapter5 プロジェクトの名前を指定します。好きな名前を指定してもかまいません。
    プロジェクトの場所・デフォルトの場所を使用する チェックを入れる（デフォルト） これでデフォルトの場所にプロパティ名と同じ名前のフォルダが作成され、プロジェクトの用法やソースファイルが格納されます。（デフォルトのプロジェクトが作成されるフォルダは、「ワークスペース」と呼ばれるフォルダの直下になります。）デフォルトでは、階層の深いフォルダに作成されるので、好きなフォルダを指定してもかまいません。このときは、「デフォルトの場所を使用する」のチェックを外し、「フォルダ：」で任意のフォルダを指定します。
    アプリケーションの種類 [デスクトップアプリケーション（Adobe AIRで実行）]を選択する。 今回作成するAIRアプリケーション用のプロジェクトを作成します。[Webアプリケーション（Flash Playerで実行）]を選択すると、WebブラウザのFlash Playerで実行されるFlashアプリケーションを作成するためのプロジェクトとなります。
    サーバーテクノロジー・アプリケーションサーバーの種類： なし（デフォルト） LiveCycle Data ServicesやColdFusionなどのサーバーとデータ通信および連動するアプリケーションを構築する場合に選択します。今回のようなアプリケーションでは設定の必要はありません。

    画面03
  4. 元のFlex Builderの画面に戻ります。画面左上部の「Flexナビゲータ」ビューには、今作成したプロジェクトと、そのソースコードなどが作成されています。
    画面04

一番下の「src」フォルダは、開発したソースコードなどを格納するフォルダです。「bin-debug」フォルダは、コンパイルしてできたSWFファイルなどを格納するフォルダです。いろいろあるので迷ってしまいますが、とにかくこれから作成するものは、「src」フォルダの下に格納するようにしてください。

画面右側には、「chapter5.mxml」ファイルが開かれている状態になっています。この画面は、「エディタビュー」と呼ばれるもので、実際の開発作業を行っていくところです。「.mxml」というファイルにアプリケーションのコードをMXMLと呼ばれる言語と、ActionScriptを組み合わせて記述していきます。

画面05

自動的に挿入されている「<?xml version=・・・・」の部分や、「<mx:WindowedApplication xmlns:mx=・・・」の部分は、削除したり、変更したりしないで、そのままそっとしておいてあげてください。

簡単にソースコードの中身を解説します。

2行目：「<mx:WindowedApplication xmlns:mx=・・・」の部分が、MXMLの書き出し部分になります。

  • MXMLは、タグベースの言語でXMLをベースにしたものですが、誤解を恐れずにいうならば「HTML感覚」で記述していけるものです。「<mx:WindowedApplication xmlns:mx=・・・」の部分は、HTMLでいうところの「<HTML>タグ」のようなもので、AIRアプリケーションの場合必ずルートに存在する必要があります。そして、その間に、ボタンやテキストなどのフォーム要素や、レイアウトを行う「視覚要素」のMXMLのタグを記述していきます。 MXMLの名前空間の指定「xmlns:mx="http://www.adobe.com/2006/mxml"」が入っていますが、これも自動挿入されたままにして、通常記述を変えたり削除したりしません。「お約束のもの」という感じでとらえてください。 次の「layout="absolute"」は、 <mx:WindowedApplication>と</mx:WindowedApplication> の間に記述するMXMLタグで指定された「視覚要素」のレイアウトを決定するものです。MXMLでは、このように必要な設定がある場合は、各MXMLタグの開始タグで「プロパティ」として記述します。また、プロパティは複数入れることができます。（HTMLと似ていますよね？）。プロパティは必要でなければ記述する必要はありませんので、「layout="absolute"」は必要がなければ削除したり、値を変更したりしてもかまいません。

1行目：1行目に戻ります。MXMLは「XMLのシンタックス」をベースにしたものなので、いわゆる「XMLの宣言」にあたるものです。これも勝手に書き換えたり、削除したりせず、お約束で入れておくもの、という感じにとらえてください。

以上で、開発環境の準備は終わりです。次に、「FlashのメインタイムラインのActionScriptをFlexに移行する」ことを行っていきましょう。

ページ 2 / 9
前のページ
次のページ