Flex Builder 3って何ができるの？

Flex Builder 3に触れてみよう！

　まずは、Flex Builder 3で簡単な文字表示だけのSWFコンテンツを作成してみたいと思います。

　Flex Builder 3で、コンテンツを作成する際には、ファイルではなくプロジェクト単位で作業を行いますので、まずは新規プロジェクトを作成します。作業手順は以下の4つのステップで進めていきます。

　ステップ1として、メニューの「ファイル→新規→Flexプロジェクト」を選択します（図3）。

　ステップ2として、プロジェクト名を入力します。今回は「firstProject」とし、「次へ」ボタンを押します（図3）。また、「プロジェクトの場所」が作成するファイルの保存場所になりますので、きちんと把握しておいてください

　ステップ3として、「出力設定」の場所はそのままで、「次へ」ボタンを押します。

　ステップ4として、「Flexプロジェクトを作成します」で、「終了」ボタンを押すと終了となります。

　画面中央に、「ソース」と「デザイン」のタブがありますので、「デザイン」をクリックしてください。こちらは、Dreamweaverの「コードビュー」と「デザインビュー」のような位置づけの機能になります。

簡単な文字表示SWFコンテンツを作成しよう

　文字表示をするために、「ラベルコンポーネント」を使ってみたいと思います。

　図3にありますように、画面左下にある「コンポーネント」パネルから「コントロール→Label」を、画面中央の「デザインエリア」にドラッグ＆ドロップします。配置した「ラベルコンポーネント」をダブルクリックしますと、文字編集が行えますので、お好きな文字を入力してください。この記事では、「Flex Builder 3」と入力しています。

　文字サイズや文字色を変更するには、画面右側にある「Flex プロパティ」パネルの「フォントファミリ」や「フォントの色」から変更することができますので、自由に変更してみてください。

　では、作成した文字表示コンテンツを実行してみましょう。実行するには、「実行ボタン」もしくは、「Ctrlキー + F11キー」から実行することができます。この方法から実行しますと、「保管して起動」ダイアログが表示されますので、「OK」ボタンを押してください。ブラウザが起動して、先ほど作成した文字が表示されます。この表示されているコンテンツが作成したSWFファイルとなります。

　作成したSWFファイルは、作成した「プロジェクトの場所」の中にありますbin-debugフォルダの中にあります。Windows Vistaでの初期設定では、「C:\Users\ユーザ名\Documents\Flex Builder 3\firstProject\bin-debug\ firstProject.swf」がファイルの場所となります。

　以上が、Flex Builder 3 の起動からコンテンツ作成の流れになります。次回では、Adobe Flex Builder 3はWebデザイナーが使う必要があるかについて、紹介します。お楽しみに！