ADOBE DESIGN MAGAZINE

連載の６回目は、Flash Catalystとの連係について紹介します。

サンプルダウンロード

Flash Catalystとは、Adobe Creative Suite 5 Design Premiumに同梱されるアプリケーションです（CS5 Web Premium、CS5 Product Premium、CS5 Master Collectionにも同梱）。名前にFlashが入っていますが、IllustratorとFlashBuilderによるFlex開発の間に入るツールで、皆さんおなじみのFlash Proffesionalとの関係性はそれほどありません。本来はFlash Builderとの連係ツールとしての位置づけですが、Flash CatalystからSWFファイルを書き出せます。IllustratorでSWFファイルの外観をデザインし、Flash Catalystで動作を設定してSWFファイルに書き出すというワークフローが可能になるわけです。今回は、右に表示されている、Webページのトップに表示されるSWFファイルによるシンプルなバナー制作を通して、IllustratorとFlash Catalystの連係の概要を説明します。

※右のPAGE01，PAGE02，PAGE03ボタンをクリックすると、メイン画像が入れ替わります

※サンプル　AICS5_6th01.ai

SWFファイルの元になっているIllustratorファイルを開きます。このアートワークは、右側のボタンが「Button」フォルダに、左側の大きなコンテンツエリアのオブジェクトは「Page1」「Page2」「Page3」の各レイヤーに保存されています。レイヤーパネルで、「Page1」「Page2」「Page3」の表示状態を変更すれば、各ページのコンテンツエリアだけを表示できる構造です。また、わかりやすいように、各オブジェクトはグループ化して名称を付けてあります。ちなみにこのファイルは、新規ドキュメント作成時に「Flash Catalyst」プロファイルを選択して作成してあります。このファイルをFlash Catalystに読み込んで、動作の設定をしていきます。

サンプルファイルを開いたところ。ボタンとコンテンツエリアのオブジェクトは、レイヤーに分けて保存してあります

では、IllustratorファイルをFlash Catalystに読み込んで加工しましょう。
Flash Catalystを起動します。「ファイル＞デザインファイルから新規プロジェクトを作成」を選択し、サンプルのIllustratorファイルを開きます。「Illustrator読み込みオプション」ダイアログボックスが開くので、そのまま「OK」ボタンをクリックしてください。

Flash Catalystを起動し、「ファイル＞デザインファイルから新規プロジェクトを作成」を選択します。

Flash Catalystを起動し、「ファイル＞デザインファイルから新規プロジェクトを作成」を選択します

サンプルのIllustratorファイルを開きます

「Illustrator読み込みオプション」ダイアログボックスは、初期設定のまま「OK」ボタンをクリックします

Flash CatalystにIllustratorファイルが読み込まれました。Flash Catalystの画面構成は、右側にツールパネルや各種設定パネルが並び、左側にオブジェクトを操作するアートボードが表示されます。左下には、タイムラインが表示され、時間軸による動作設定できるようになっています。アートボードに読み込まれたオブジェクトは、Illustratorのオブジェクトと同じ状態です。選択ツールでオブジェクトを選択したりサイズ変更なども可能で、長方形ツールなどの描画ツールを使えば簡単な図形も描画できます。ただし、ダイレクト選択ツールは、グループ内のオブジェクトを選択するためのもので、ベジェを操作することはできません。

オブジェクトの操作をするアートボード

ツールの選択

各種パネル

タイムラインの設定パネル

Flash Catalystに読み込まれたIllustratorのデータ

右側のレイヤーパネルを見てください。Flash Catalystのレイヤーパネルは、Illustratorのレイヤーパネルと同じ操作で内容の展開表示、表示／非表示、ロック／ロック解除が可能です。読み込んだIllustratorファイルのレイヤー構造は、Flash Catalystでもレイヤー名やオブジェクト名を含めてそのまま保持されます。

複数アートボードのあるIllustratorファイルの場合
複数アートボードのあるIllustratorファイルを読み込んだ場合、アートボードが１つのレイヤーとして読み込まれます。

左はFlash Catalystのレイヤーパネルを展開した状態。右はIllustratorのレイヤーパネルを展開した状態。Illustratorのレイヤー構造はそのまま保持されています

Flash Catalystで作業を続けます。はじめに、ボタンを押した時に表示される状態を作成します。レイヤーパネルで、「Page2」「Page3」を非表示にします。これが「PAGE1」ボタンを押した時に表示されるPage1の状態となります。レイヤーパネルは、Illustratorとほぼ同じなので違和感なく操作できると思います。

レイヤーパネルで「Page2」レイヤーと「Page3」レイヤーを非表示にしてPage1の状態を作成します

「PAGE2」ボタンを押した時に表示されるPage2の状態を作りましょう。「ステートを複製」ボタンをクリックしてください。現在選択しているステート（ここではPage1）がPage2として複製されます。「ページ／ステート」パネルの上部に「Page2」が追加されます。

「ステートを複製」ボタンをクリックして、現在選択しているステートを複製します

「Page2」が選択されている状態で、レイヤーパネルで「Page1」レイヤーを非表示にして「Page2」レイヤーを表示します。アートボードがPAGE2が表示された状態に変わります。

レイヤーパネルで「Page2」レイヤーを表示、「Page1」レイヤーと「Page3」レイヤーを非表示にして、Page2の状態を作成します

同じ手順でステートを複製して「Page3」を作成し、レイヤーパネルで「Page3」レイヤーを表示、「Page1」「Page2」レイヤーを非表示にして、Page3の状態を作成します。

ステートを複製して「Page3」を作成し、レイヤーパネルで「Page3」レイヤーを表示、「Page1」レイヤーと「Page2」レイヤーを非表示にして、Page3の状態を作成します

Flash Catalystでは、このようにレイヤーの表示状態からページを作成できます。まったくの空白のページを作成し、そこにIllustratorのオブジェクトをコピー＆ペーストしたり、Flash Catalystの図形ツールを使って描画することとも可能です。しかし、Illustratorとの連係を使うには、サンプルのようにページごとにオブジェクトをレイヤーに分けておき、Flash Catalystでレイヤーの表示・非表示を変更するだけでページを作成したほうが効率的です。