Flex開発環境のflash Builder 一通りの使い方 | コンピューターの勉強会・研修ネタ

コンピューターの勉強会・研修ネタ

 コンピューターの勉強会や研修の元になりそうなネタの話を書きます。

Flexの開発について、これから書きます。


●はじめに


Flexは、

  ・Flash Builder(統合開発環境)を入れて開発する

  ・Flex SDKを入れて開発する

の2通りがあります。


後者のFlexSDKは無料です。

http://www.adobe.com/devnet/flex/flex-sdk-download.html

からダウンロードできますが、今回は、こちらを扱いません。


前者のFlash Builderは有償です。

http://www.adobe.com/jp/products/flash-builder/faq.html

が、体験版があります。

今回は、「Flex4プログラミングガイド 」の付録CD

を使います。Flash Builderの体験版は

https://creative.adobe.com/ja/products/flash-builder

から入手できるようです。


●「Flex4プログラミングガイド」付録CDからのインストール


付録CDの中のTrialを開くと



とあるので、このexeファイルをダブルクリックして実行します。

すると、ちょっと時間がかかって、なんかやって終わると思います。

これでインストール終わり・・・ではありません。

これは、デスクトップにコピーを作っただけです。


このあと、デスクトップに「Adobe Flash Builder 4 Installer」というフォルダを

作っているはずです。その中の「Adobe Flash Builder 4 Standalone」フォルダを開くと



Set-up.exeをダブルクリックしてください。


いくつかの画面が出ると思います。

何も考えずに「同意」とか「OK」とかをクリックしていけばよいのですが、

いくつか、悩むものについて・・

以下の画面が表示されることがある。



下の、「この製品を体験版としてインストールします」をクリックすれば、先に進みます。


次に悩むものとして、最後、完了したとき



ビデオチュートリアルを開くをクリックすると、サイトが開きます。

FBと書いてあるボタンをクリックすると以下の画面に行きます(FBはFaceBookではなく、Flash Builderの略)



「体験版を起動」をクリックすると



「この手順をスキップ」をクリックすれば、次の画面に行きます。

(インストール後も、この画面が出てきます)


●Flash Builderの起動~実行まで


Flash Builderを起動すると、以下の画面になります。

【手順 1】まず、プロジェクトを作成します。

「ファイル」→「新規」→「Flexプロジェクト」を選択

以下のダイアログが出ますので



適当にプロジェクト名を入れてください(上記はmyproject1)で「終了」をクリックすると



上図の画面になり、画面用のファイルができます。


【手順2】画面の作成

画面を作成します。MXMLで記述するのですが、MXMLを知らなくてもGUIで作成できます。

まず、上図の「デザイン」タブをクリックしてください。以下のように、ボタンなどが貼れる

画面になります(立ち上げ時はまっさらです。下の図は、ボタンを貼った状態)



左下の、コントロールから、ボタンなど貼りたいものを選択して(図の赤丸)それを、真ん中のレイアウトエリアにドラッグ&ドロップします。こんなふうに適当にはっていってください。


【手順3】イベントの記述

次に、ボタンが押されたあと、どうするかなどのイベントの記述を書きます。

これは、ActionScriptで記述します。

レイアウト中に配置したボタンをクリックすると、右側にプロパティが出ます。



「クリック時」の右横の雷マークをクリックすると、赤丸のように、「イベントハンドラーを生成」という

言葉が出てきます。それを選択します。すると、



上図のようにソースコードが出てきます(上図は、後の記述までしてしまった結果なので、実際には、赤線の部分がないものが出てくる)


今回は、ボタンが押されたら、HelloFlexというアラートが出てくるものとします。

アラートを出すためには、mx.controls.Alertをインポートする必要があります。そこで

   import mx.controls.Alert;

という行を書きます。


 そのあと、

    Alert.show("Hello Flex");

 を書きます。importをしていれば、Alert.と入力したところで、Alertがとりえるメソッドの一覧が

出てきます。なお、importとAlertをどこに書けばいいのかについては、上図を参照してください

(赤線の部分です)


【手順4】実行

ここまでできたら、実行します

「実行」→プロジェクト名「を実行」を選びます。

今回はプロジェクト名がmyproject1なので

「実行」→「myproject1を実行」を選択します。


すると、ブラウザが立ち上がり、以下の画面を表示します。



  

「ボタン」をクリックすると



とアラートが表示されました。


---------------------------


●まとめ


Flexを作成するには、プロジェクトを作成して

  ・MXMLで、画面まわりを記述して

  ・Action Scriptで、イベント時(クリック時等)の処理を書く

Flash Builderは、このへんを、GUIでやれる。