PR

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

2008年7月2日(水)
高橋 義博

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デザイナーが使う必要があるかについて、紹介します。お楽しみに!

制御機器メーカーでソフト開発やWebマスターの業務を経て、2007年からフリーランスとして、Webサイト制作、Flashコンテンツ制作を行っている。また、WebスクールでWebデザイン、Flash制作の講師などを担当し、経験を生かして幅広い指導を行っている。

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

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