Flash Catalystで作成するインタラクティブな地図コンテンツ

その他の要件

このチュートリアルを効果的に学習するためには、

• Adore Flash Catalyst CS5
• Adobe Illustrator CS4、またはCS5

実際のサンプルファイルはこちらからダウンロードできます。
fxug_tour_2010_set.zip

内容としては、
.aiファイル
.fxpファイル
.swfファイル
があることを確認してください。

この記事ではAdobe Creative Suite 5から導入される新しいツール、Adobe Flash Catalystについて紹介します。
Flash Catalystはコーディングなしでアプリケーションインターフェースや、インタラクティブなコンテンツを迅速に作成するためのインタラクションデザインツールです。

このAdobe Flash Catalystを使用することで、IllustratorやPhotoshop、Fireworksなどのデザインツールで作成した静的な画面にインタ ラクションデザインを行い、Flash Playerで動作するWebアプリケーションやAIRで動作するデスクトップクライアントを簡単に作成することが出来るようになります。
このツールの導入によって、これまで静的なデザインが主の作業だったデザイナーがインタラクティブな動きのデザインまで担当できるようになり、コーディングで解決していたような複雑な形のコンポーネントもコーディングなしに作成することが可能になります。

本トピックスでは、筆者がFlex User Groupの全国ツアーの為にFlash Catalystを使用して作成した日本地図のナビゲーションをもとに、Flash Catalystが持つ機能について説明します。
実際にこの地図ナビゲーションはFlex User Group Japan Tourの告知サイトで見る事が出来ます。
http://tour.fxug.net/2010/

なお今回作成するアプリケーションは本番で使用されているものとは完全には一致していません、説明用に多少改良が施されています。

図：Flash Catalystで制作した日本地図ナビゲーション

この日本地図ナビゲーションを利用して、Flash Catalystでアートワークの読み込みから、インタラクションコンポーネントの作成、パブリッシュまでを取り上げます。
Flash Catalystでアプリケーションをパブリッシュするまでの過程にはいくつかの方法が用意されていますが、今回はAIでのアピアランスデザイン、FCでのインタラクションデザインで作成というワークフローを想定しています。

具体的な内容としては以下になります。

• アートワークの読み込み
• デザイン要素のコンポーネント化
• コンポーネントのステート作成
• コンポーネントのトランジションとインタラクション
• プロジェクトのパブリッシュ

リッチなコンテンツやアプリケーションには、アピアランスデザイン、インタラクションデザイン、データデザインという大まかに3つの要素からなっています。
これまでインタラクションデザインという役割は少なからずプログラミングという作業が必要となり、コーディングを苦手とするデザイナーにとっては敷居の高いものでした。

そのため、デザイナーによってはアピアランスデザインのみや、インタラクションデザインまでを担当としたりと人によって担当範囲が変わり、複数人での開発では各要素を担当する人同士のコミュニケーション能力などが、少なからずアプリケーション品質に影響を与えていました。
しかし、このFlash Catalystを導入する事でこれまで曖昧だったインタラクションデザインという役割をコーディングを苦手とするデザイナーでも担当することができ、コーディング担当者はビジネスロジックやデータロジックに注力し、適材適所での開発が可能となりアプリケーション品質の向上につながります。

本トピックスではそんな革新的なツールであるFlash Catalystを使って、どのようにインタラクションデザインを作成すれば良いかについて、説明していきたいと思います。

アートワークの読み込み

Flash Catalystは、IllustratorやPhotoshop、Fireworksなどで作成したアートワークを読み込むことが出来ます。
サポートされている形式は、aiファイル、psdファイル、fxgファイルなどがあります。

Flash Catalystでは、これらのファイルで作成したレイヤー構造を保ったまま読み込むことが可能なため、構成や状態ごとにレイヤー構造を整理しグループ化しておくと、読み込んだ後の取り扱いを容易にすることができます。
レイヤーごとアートワークを読み込めるため、設計時に重要になってくるのがステートという概念です。
ステートとは状態のことを意味していますが、設計段階からのアプリケーションの状態や、コンポーネントの構成や状態を意識し、これらのまとまりに対してレイヤーの定義を行っておくと後々の作業が楽になっていきます。

Flash Catalystでアートワークの読み込みはFlash Catalystを立ち上げた後のスタートメニューから行うことが出来ます。
デザインファイルから新規プロジェクトを作成のメニューから、読み込むファイルを選択します。

また、アートワークの読み込みはヘッダーメニューの”ファイル”→”デザインファイルから新規プロジェクトを作成”と選択することでも出来ます。

fxug_tour_2010.aiを読み込んでみましょう。
対象のaiファイルを選択すると、以下のような読み込みオプションを選択するメニューが表示されます。
ここではテキストを編集したいのでテキストフォームで”編集可能な状態を保持”を選択してOKを押下します。

Flash Catalystではプロジェクトの作業中でも、Ctrl + Enter（macはCommand + Enter）で動作を確認することが可能です。
読み込みが完了した時点で一度実行してみてください。

今回はaiファイルからの取り込みをしましたが、psdファイルからの読み込み時にはレイヤーカンプごとの詳細なレイヤー取り込みの設定が出来ます。

レイヤーカンプの詳細設定の機能はfxgやaiファイルからの読み込みでは使うことが出来ません。その他Flash Catalystでは、swfファイルやflvファイル、jpg、pngファイルなどのビットマップ画像なども取り込むことが可能です。

次に、この画面の各デザイン要素に対してインタラクションをつけていきます。
Flash Catalystでデザイン要素にインタラクションをつけるためには以下の3つの作業を行います。

1. デザイン要素（グループ）をコンポーネント化する。
2. コンポーネント化したグループにステートを作成し、各ステートの状態を定義する。
3. ステート間のトランジションのアクションを定義する。

ここからマップ全体のコンポーネント化と、マップの場所を表示するポイントのデザイングループをボタンとしてコンポーネント化を行います。
その後でステートを作成、状態を定義し、インタラクションを持たせていきます。

デザイン要素のコンポーネント化

まずはデザイン要素のコンポーネント化です。
Flash Catalystでは一つ一つの読み込んだデザイン要素をコンポーネント化をすることで、グループ化された要素のまとまりに対してステートの定義やインタラクションを適用できるようになります。

コンポーネント化の手段としては、プレーンなコンポーネントとして一から作成、つまりスクラッチで作成する方法と、ビルトインで用意されたコンポーネント定義から作成する方法があります。
両者利点がありますが、最初にスクラッチで作成する方法を見ていきましょう。

スクラッチでコンポーネント化する方法

コンポーネント化してまとめたデザイン要素は、そのまとまりでステートを定義する事が出来るようになります。
ここからmapレイヤーのデザイン要素をマップとしてコンポーネント化していきます。

レイヤーパネルからmapのレイヤーを選択して、フローティングパネルから"コンポーネントに変換"→”カスタム／汎用コンポーネント”を選択します。
この"カスタム／汎用コンポーネント"を選択することで、スクラッチでコンポーネントを作成することになります。

コンポーネント化を行うと、”mapCustomComponent”というコンポーネントがレイヤーパネルに表示され、コンポーネント化されたのが分かると思います。

これからマップコンポーネント内部の要素に対して編集を行っていきます。
アートボードからマップコンポーネントの領域をダブルクリックすると、編集状態にすることができます。

次はビルトインで用意されたコンポーネント定義を利用して、マップのポイントをコンポーネント化していきます。

ビルトインコンポーネントからコンポーネント化する方法

ビルトインで用意されているコンポーネントには以下のようなものがあります。
Flash Catalystではこれらを利用してコンポーネント化することが出来ます。

ここではビルトインで用意されているボタンコンポーネントを使って、マップのポイントを示すデザイン要素のコンポーネント化を行っていきます。

レイヤーパネルから、コンポーネント化するデザイン要素を選択し、右クリックで表示されるメニューから適切なコンポーネントを選択します。
マップのポイントはマウスオーバーした際にバルーンを表示させます、そのためこのバルーンもコンポーネントの内部に含めてコンポーネント化を行います。
先ほど作成したmapCustomComponentをダブルクリックして編集状態にした後で、balloonレイヤーとmapPinを選択し、フロートメニューから”ボタン”を選択します。

レイヤーパネルにボタンというコンポーネントが表示されます。
分かりやすさのために名前をsapporoPointに変更します、レイヤータブから変更したい要素をダブルクリックすることでテキスト編集画面になります。

各ポイントごとにそれぞれの情報を表示させるため、先ほど作成したsapporoPointを各ポイントのデザイン要素と置き換えていきます。
mapCustomComponentをダブルクリックして編集状態にした後で、sapporoPointを選択し、コピーアンドペーストします。
複製したsapporoPointを各ポイントごとの座標に配置し、適切な名前に変更します。
置き換えが済んだら、元々あったmapPinは不要になりますので、削除します。

全て完了すると、以下のようなレイヤー構成になっていると思います。

しかしこのままではテキストの内容が全て同一です、これは現段階でこのテキスト部分はただのデザイン要素として存在しているからです。
コンポーネントを編集しても、個別のテキストの内容に変更することは出来ません。

そこでコンポーネントのプロパティを利用します。
ボタンコンポーネントではテキスト部分をラベルコンポーネントにすることで、定義そのままにプロパティの内容を変更することが出来るようになります。

バルーンのテキスト部分をラベルコンポーネントに変換していきましょう。
アートボードからSapporoPointをダブルクリックしてコンポーネントの編集画面にします。
ちなみにここではSapporoPointを選択しましたが、このコンポーネント編集はコンポーネントの定義に対する変更なので、どのPointに対して行っても問題ありません。

コンポーネントの編集画面になったら、レイヤーパネルから"Sapporo 06/05"というレイヤーを選択します。
フローティングメニューの"ボタンのパーツに変換"から"ラベル"と選択することで、ボタンのパーツであるラベルコンポーネントに変換できます。

ラベルに変換できたら、レイヤーパネルの"Sapporo 06/05"を"label"という名前に変更し、labelのサイズをバルーンの中に表示されるように調整しておきます。

ここまで作業したら、mapCustomComponentの編集画面に戻ります。

レイヤーパネルからsendaiPointを選択します。
そしてレイヤーパネルの下の方にあるプロパティタブの"共通"の部分を見てください、”ラベル”という項目があるのが分かると思います。
このラベルプロパティを編集することで、個別にテキストの設定をすることが出来ます。

全てのPointの情報を変更していきます。

個別にラベルを設定することが出来ました。

ここではテキスト部分をラベルコンポーネントにしましたが、スクラッチでコンポーネントを作成した場合には用意されているパーツが存在しないため、パーツに変換する事ができません。
先ほども言及したように、プロパティではなくデザイン要素として編集する事になります。

この場合、コンポーネント定義自体の変更になってしまい、配置した全てのコンポーネントで同じ見た目になってしまいます。
このケースのように複数配置する必要があり、それぞれ一部分のみ変更する必要がある場合などでは、ビルトインで作成する方法をおすすめします。

コンポーネントの再利用

ここまでコンポーネントを作成した後でライブラリタブを選択すると、作成したコンポーネント定義がライブラリパネルに表示されているのが分かります。
ライブラリパネルに表示されているコンポーネントはドラッグアンドドロップなどでもアートボードに配置することが出来ます。

また、プロジェクト単位でライブラリパネルに作成されたコンポーネントは、ライブラリパッケージとしてひとまとまりにしておくことが出来ます。
ライブラリパッケージを作成しておくと、他のFlash Catalystプロジェクトでこのライブラリプロジェクトを読み込んで、ライブラリプロジェクトに包括されたコンポーネントを再利用することが出来るようになります。
ライブラリパッケージはfxplファイルという拡張子で保存されます。

他のプロジェクトからライブラリパッケージを使う場合には、ファイルメニューから"ファイル"→”読み込み”→”ライブラリパッケージ”とすることで読み込む事が出来ます。

次にステートの作成と定義です。
コンポーネント化作業には、カスタムで作成する方法と、ビルトインコンポーネントから作成する方法の二つがあると言いました。

前者のスクラッチでカスタムコンポーネントで作成する方法でインタラクションを持たせるためは、ステートの作成と、そのステートを切り替えるためのトリガーを用意する必要があります。

一方、後者のビルトインコンポーネントから作成する方法では、各コンポーネントのデフォルトステートと、そのステートを切り替えるトリガーがあらかじめ定義されています。
そのため各ステートにおけるコンポーネントのアピアランスを定義するのみとなります。

例えば、ボタンコンポーネントにはUp、Over、Down、Disabledというステートがあります。

ここで注意点があります。
ビルトインコンポーネントから作成する方法では、簡単に作成できるという利点がありますが、ステートの追加、削除は出来ません。
もし独自にステートやステート変更のトリガーを定義する場合には、カスタムで作成するのが良いでしょう。

ステート間でのプロパティの共有

mapCustomComponentから、sapporoPointをダブルクリックし、コンポーネントの編集状態にします。
画面上部のページ／ステートタブを見てください、4つのステートが作成されているのが分かります。

各ステートを良く見ると、先ほど変更したテキストのサイズが違います。
これは、先ほど行ったサイズ変更が全てのステートにおいて共有されていないためです。
各ステートでそれぞれ変更したものは、変更した段階では共有されません。

各ステートで行った変更はフローティングメニューにある”全てのステートに同じプロパティを適用”というボタンを押下することで共有する事が出来ます。
このボタンを押下して全てのステートでプロパティを共有しておきます。

次に、それぞれ各ステートにおけるバルーン自体の表示、非表示を編集していきます。

各ステートのプロパティの定義

ここから、各ステートを以下のように定義していきます。

• UPとはマウスがコンポーネント上にない状態です、MapPinだけを表示します。
• Overはマウスがコンポーネント上にある状態です、ロールオーバーした時にそのPinとその情報を表すバルーンを表示します。
• Downはマウスをそのコンポーネント上でマウスダウンした状態です、Over時と同様にします。
• Disableはコンポーネントに対する操作が無効の状態です、UP時と同様にします。

Flash Catalystでは、レイヤーパネルの目のマークを押下することで表示／非表示をコントロール出来ます。
各ステートでバルーンの表示／非表示を設定したら、以下のようになります。

各ステートを編集するときは自分が現在どのステートを編集しているか、意識しながら行ってください。

ここまで編集したら、一度実行してみます。
Pointにマウスを合わせたり、マウスを外したりするとバルーンの表示／非表示がコントロールされています。
今回コンポーネント定義の変更をしたため、プロパティの変更とは違い、他のPointにも同様にこの適用がされています。コンポーネントの編集は一度の編集でその定義を使う全ての対象が変更されることになります。

それぞれコンポーネント編集の内容によっても、スクラッチで作成する方法とビルトインで作成する方法のどちらが良いか考慮することが大切になってきます。

各ステートの状態が作成できたら次にステートのトランジションに対して編集をしていきます。
トランジションにアクションをつけることでステートのある状態からある状態への変化に対してエフェクトを適用し、滑らかな変化をつけることが出来ます。

ステート間のトランジションは、画面下部にあるタイムラインのタブから行います。
左パネルの一覧には、AステートからBステートへといったトランジションの単位で表示されているのが分かります。

真ん中のタイムラインでは適用できるアクションが表示されています。
アクションは各ステートの作成、定義を行った後、トランジション単位でプロパティに差分がある場合、自動で作成されます。
ここで作成されるアクションは、プロパティの種類によって変わります。

例えば、UP→Overのステートではバルーンの表示／非表示を行いました。
そのため、上記の画像ではフェードインエフェクトを適用させるためのアクションが表示されています。
もし、ステート間で表示するXY座標が違う場合などは、ムーブエフェクトのアクションが表示されます。

自動的にアクションが追加されるプロパティの対象としては、以下のようなものがあります。

• 表示／非表示
• 移動（XY座標）
• 回転
• サイズ

タイムライン上に表示されたアクションは、タイムライン上のバー、またはプロパティタブから編集することが出来ます。
編集したアクションは、再生ボタンを押す事で簡易的にプレビューすることが出来ます。

自動追加されたアクションに対しては、”滑らかなトランジション”を押下することで簡単にアクションの編集を行うことも出来ます。
この場合、一覧から選択した複数のトランジションに対して行うことが出来ます。

その他、自動的に追加されたもの以外で、アクションを追加することも出来ます。
その場合、アクションを追加したい対象をレイヤーパネルから選択して、タイムラインパネルの"アクションを追加"ボタンを押下します。

balloonレイヤーに対して、UP→Overのトランジションで3D回転のアクションをつけてみましょう。

UP→Overのトランジションでx方向の回転を加えます、開始角度を240、終了角度を360とします。
逆にOver→UPのトランジションにx方向の回転を加えます、開始角度を360、終了角度を240とします。

出来たらプレビューして確認します。
マウスをポイント上に当てると、バルーンが浮かび上がるように回転しながら表示されるのが分かると思います。

最後にプロジェクトのパブリッシュです。
Flash Catalystでは、WEB公開用のアプリケーションとしてパブリッシュする方法と、デスクトップ配布用のAIRアプリケーションとしてパブリッシュする二つの方法があります。

パブリッシュは、画面上部のメニューから"ファイル"→"SWF/AIRにパブリッシュ"を選択します。

パブリッシュメニューは、デフォルトだと、Web公開用のSWFをパブリッシュする設定になっています。
AIRアプリケーションをビルドの項目にチェックを入れることで、AIRアプリケーションとしてパブリッシュできます。

フォントを埋め込むの項目では、埋め込むフォントの詳細設定が出来ます。
フォントの埋め込みはアプリケーションのパフォーマンスに大きく影響します、必要であればここで調整しておきましょう。

まとめ

このようにFlash Catalystは、コーディングなしで簡単にインタラクションデザインを出来るツールとして設計されています。
ここでは紹介をしませんでしたが、デザインした内容をコードビューで確認する事ができ、コードを見て学ぶことも出来ます。

特にこれまでコーディングを苦手としてきたデザイナーにはとても強力なツールになるのではないでしょうか。
プログラマにとっても、特に難しい操作なしに複雑な形のスキンなどをコーディングなしで作成できることから、より本質のコードに専念することが出来ます。

また、ライブラリパッケージとして出力されたものは、コンポーネントのスキンとして再利用することも出来ます。
振る舞いをコードで定義して、見た目はFlash Catalystで作成するなどのフローも考えられます。
Flash Catalystはそのツールの便利さだけでなく、そのツールがあることによって改善される開発フローなど大きなインパクトをもつツールと言えるでしょう。