繰り返し複数のファイルを読み込み、UIを統合

続けて「PREVIOUS」「NEXT」といったボタンを読み込んでいこう。

筆者が使用したバージョンのCatalystは、一つのファイルを読み込むごとに一つのレイヤフォルダが生成される。その際ちょっとしたバグがあるようで、放っておくとレイヤのフォルダがどんどん入れ子になっていってしまう。従って、レイヤを調整したり、複数のレイヤをグルーピングしてイメージを扱いやすくしたり、といった作業が必要であった。

LAYERSビューでレイヤを調整

デザインをUIコンポーネントに変換して、インタラクションやエフェクトを追加

デザインが完成したので、あとはRIAとしてこのデザインが動作するよう、手を加えていくことにしよう。

このサンプルアプリでは、「NEXT」「PREVIOUS」ボタンが押されると写真が次々に切り替わる。しかし現在のところ、これらのボタンは、振舞いを持たない単なるデザインでしかない。これを「ボタン」たらしめるには、デザインを「UIコンポーネント」へと変換する必要がある。

コンポーネントは、ユーザの操作に応じてエフェクトやイベントハンドラを起動することの出来る、インタラクティブなUI部品だ。デザイナが意識する必要はあまりないが、Flexコンポーネントとも互換性がある。

イメージからコンポーネントへの変換は、「右クリック→Convert Selected Artwork to...」を選択するだけで簡単に行うことが出来る。あらゆるイメージをボタン、テキスト入力、スクロールバー等へと簡単に変換できるだけではなく、汎用的なカスタムコンポーネントへの変換も可能だ。

このサンプルでは、「NEXT」ボタンと「PREVIOUS」ボタンをボタンコンポーネントへと変換し、ボタンダウン時に簡単なエフェクトが発生するよう調整した。

まとめ

以上でデザイナにとって必要とされる作業は完了だ。PhotoShopやIllustratorを使用して作成したデザインのパーツを統合し、RIAに必要なインタラクションを追加する作業が、全てCatalyst上で行えることがおわかり頂けたかと思う。

さらにCatalystの優れた点は、こうしたデザイナの作業結果が、そのまま開発作業に対するインプットとなる点だ。最終回となる次回は、開発者の視点に立ち、今回作成されたデザインに対して、ボタンの振舞いを追加するという作業を行っていく。乞うご期待!