Flex 2: Programming the Visual Experience（フレックス2）/ 講座ダイジェスト

Flex 2: Programming the Visual Experienceは、Adobe Flex 2（アドビ フレックス2）を習得するアドビ認定トレーニングプログラムです。アプリケーションの開発をFlexですでに行っている、またはこれから行おうとする方向けの講座となっています。この講座を習得することにより、Flexが標準で持つ視覚コンポーネントでは表現できないような、見栄えのよいリッチなアプリケーションを制作できるようになります。

業務アプリケーションのような機能重視のアプリケーションではなく、見た目が重視されるコンシューマー向けのアプリケーションを開発する際に、非常に役立つ基礎技術を習得できます。

また、Adobe Flash（アドビ フラッシュ）やAdobe Photoshop（アドビ フォトショップ）で作られた素材を、Flexで利用するためのワークフローも学びます。これらの連携はデザイナーとFlex開発者（デベロッパー）との「タスクの分担」が重要となりますので、仕事や作業を効率的に進める上でも重要な知識となります。

Flexのデザイン要素を学ぶ学習サイクル

このトレーニングコースでは、デザイン要素を2つの側面から変更していきます。

• プログラムだけでデザインを変更する。
• デザイナーが制作した画像データやFlashデータなどを取り込む。

本トレーニングコースは、10のユニットから構成されています。

以下の学習サイクルをユニット内で身につけることによって、必要な要素を習得していきます。

Adobe Flex 2（アドビ フレックス2）のデザイン要素を実習でマスター

コンポーネント（クラス）からの継承

Flexの標準のパネルコンポーネントには、サンプルコンテンツのような右上のボタンはありませんし、背景が透けて見えるようにもなっていません。しかし、デフォルトのPanelクラスを継承したサブクラスをカスタマイズすることで実現できます。

Flashを使ったコンポーネントのカスタマイズ

画面右上にあるコンボボックスは、Adobe Flash Professional上でデザイン的に編集を行ったスキンを適用したものです。

さまざまな画像要素の取り扱い

パネル右側のボタンは、Adobe Flash Professionalで作成したSWFファイルのほか、描画APIを用いてプログラム的に描かれた要素も表示されています。 このトレーニングコースでは、このようなさまざまな画像要素の取り扱いを習得します。

ブレンドやフィルターで文字も美しく

タイトルの文字は画像ではありません。Flexアプリケーションに埋め込んだフォントデータ（TTF）を利用して表示しています。また表示させた文字列には、Adobe Flash Professionalでも設定できる、ブレンドとフィルターと呼ばれる視覚効果を適用しています。

ダイナミックに動くRIAインターフェース

パネル内のサムネール画像は、マウスカーソルをロールオーバーすると少しだけ拡大して、合わせて画像名が表示されます。

このサムネールはタイルコンポーネントを使っているように見えますが、今回のようにマウス操作でサイズを変更するような場合に使用すると、レイアウトが崩れる可能性があります。そこで、別の方法でサムネール画像の配置を行う必要があります。

またサムネール画像をクリックすると、ポップアップパネルがフェードアウトしながら移動して開きます。これは、Panelクラスを継承して定義したサブクラスで作成しています。RIAらしいダイナミックな動きです。

複数コンポーネントに適用したトランジションによる画面遷移

パネル右上のボタンをクリックすると、左側のパネルが画面外に移動し、右側のサムネールパネルが横に拡大します。トランジションによりスムーズな画面遷移を実現することができますが、思い通りの動きを指定するためにはコツが必要です。

ドラッグ&ドロップ

そのほか、上記以外のサンプルを使用した制作実習も行います。その中のひとつに、ドラッグ＆ドロップの実装があります。

データグリット間のシンプルなドラッグ＆ドロップのほか、DragManagerを使用した実装も取り扱います。

実践で使えるカタチに

ご紹介したのは、講座のごく一部分です（詳細は講座目録等をご参考ください）。実際には、もっと多くのことを学習します。

しかし、このサンプルをご覧頂いただけでも、「これ使えそう！」とか、「これやってみたかったんだよね！」という部分があったのではないでしょうか。このような内容を、「実践で使えるカタチ」で、短期間でもたっぷりお伝えするのがこの講座の特長です。

Flex 2: Programming the Visual Experienceから、Flexをはじめてみませんか！