Flash Professional CS5.5で[プロジェクト]パネルの機能が強化され、複数のflaファイル間でアセットを共有できるようになりました。本記事ではアセット共有機能の概要とその使い方について解説します。

新しくなったFlashプロジェクトとアセット共有

[プロジェクト]パネルを使うと、エクスプローラー(Windows)やFinder(Mac)に切り替えずとも関連するファイルを開くことができ、Flashアプリケーション内で複数のflaファイルやスクリプトを管理することができます。

Flash Professional CS5.5では、[プロジェクト]パネルの新機能として「アセット共有」が搭載されました。これは、複数のflaファイル間でシンボルを共有したい場合に役立つ機能です。例えば、マルチデバイス展開のため複数のflaファイルが存在し、これらのファイルの間で同一のシンボルを利用している場合、1つのflaファイルでそのシンボルを修正してパブリッシュし直すと、全てのflaファイルの同一シンボルで修正内容が反映されます。

実際にFlash Professional CS5.5でアセット共有機能を試してみましょう。

新規プロジェクトの作成とアセット共有の設定

まず、Flash Professional CS5.5を起動し、次の手順で新規プロジェクトを作成します。

  1. メニューバーから[ファイル]→[新規]→[一般]タブの[種類]から「Flash プロジェクト」を選択します。
  2. [プロジェクト]パネルで[新規プロジェクトを作成]ウィンドウが表示されるので、次の表を参考に入力/設定してください。
プロジェクト名 任意のプロジェクト名を入力します。
ルートフォルダー プロジェクトファイルを格納するフォルダーを指定します。[参照]ボタンをクリックして任意のフォルダーを指定します。
デフォルトドキュメントを作成 flaファイルを作成する場合はチェックを入れます。
デフォルトドキュメント名 flaファイルの名前を入力します。今回は「sampleA.fla」と入力しました。
Player 作成したいFlash Playerのバージョンを指定します。通常のFlahs Playerのバージョン以外に、AIR(デスクトップ・iOS・Android)やFlash Liteも指定できます。
スクリプト 利用したいActionScriptのバージョンを選択します。
クラステンプレート [スクリプト]設定と同じバージョンを指定します。
  1. [プロジェクトを作成]ボタンをクリックすると、[プロジェクト]パネル内に設定したflaファイルが作成されます。

アセット共有は2つ以上のflaファイルがプロジェクト内に存在する場合に役立つ機能なので、もう1つflaファイルを作成します。

  1. [プロジェクト]パネルで[新規作成]ボタンをクリックし、新しいflaファイルを作成します。
  2. [ファイルを作成]ウィンドウでは、次の表を参考に入力/設定してください。
ファイル名 flaファイルの名前を入力します。今回は「sampleB.fla」と入力しました。
ファイル形式 作成したいファイル形式を選択します。flaファイルを作成したいときは「Flashドキュメント」を選択します。
Player 作成したいFlash Playerのバージョンを指定します。通常のFlahs Playerのバージョン以外に、AIR(デスクトップ・iOS・Android)やFlash Liteも指定できます。
スクリプト 利用したいActionScriptのバージョンを選択します。
  1. [ファイルを作成]ボタンをクリックすると、[プロジェクト]パネル内に設定したflaファイルが作成されます。

上記の手順により、プロジェクト内にはsampleA.flaとsampleB.flaの2つのflaファイルが作成されました。アセット共有で共有可能なアセットは、「ムービークリップ」「グラフィック」「ボタン」の3つのシンボルです。続いて、グラフィックを描いてアセット共有を設定していきましょう。

  1. はじめにsampleA.flaを開き、新しいムービークリップシンボルを作成し、任意のグラフィックを描きます(グラフィックはサンプルファイルstep_1_1を参考にしてください)。[ライブラリ]パネルの鎖アイコンの列にあるチェックボックスが、アセット共有を使用するための[ファイル間でシンボルを共有]チェックボックスです。複数のflaファイルでシンボルを共有したい場合は、ここにチェックを入れます。
  1. sampleB.flaにこのシンボルを持って行きましょう。sampleA.flaの[ライブラリ]パネルでシンボルを選択し、右クリックメニューから[コピー]し、sampleB.flaに[ペースト]します。ペーストした側のsampleB.flaで[ライブラリ]パネルを確認すると[ファイル間でシンボルを共有]にチェックが入っていることが確認できます。
  1. 次にsampleA.flaを開き、グラフィックを編集し、flaファイルを保存します(編集後のflaファイルはサンプルファイルstep_1_2を参考にしてください)。flaファイルを保存しないとアセット共有が行われないので、必ず保存するようにしてください。今回は白いだるまを赤いだるまになるように色を修正しました。
  1. sampleB.flaを開いて確認すると、その修正が同様に適用されていることがわかります。

これがアセット共有です。シンボルの共有にチェックを入れるだけで、複数のflaファイルでアセットの同期が取れるようになりました。もし同期を外したい場合は、[ファイル間でシンボルを共有]のチェックを外します。また、ムービークリップ内に記述したフレームアクションも複数のflaファイルで変更を共有することができます。なおデフォルトでは、プロジェクト生成時に自動的に作成されるAuthortimeSharedAssets.flaファイルに共有シンボルが保持されています。

プロジェクトのパブリッシュ

[プロジェクト]パネルの便利な機能の1つとして、複数のflaファイルを一斉にパブリッシュすることができます。同時に複数のflaファイルをパブリッシュしたい場合は、[プロジェクト]パネル内の[ファイルをパブリッシュリストに追加]にチェックを入れ、[オプション]プルダウンメニューから[プロジェクトをパブリッシュ]を選択します。パブリッシュリストに追加されたflaファイルが全て一斉にパブリッシュされ、swfファイルが作成されます。

マルチデバイスでのアセット共有(実践編)

マルチデバイス向けにコンテンツを提供する場合、同じアセットを複数のflaファイルで共有することが多々あると思います。同じデザインを異なるサイズのflaファイルで使い回したい場合などにもアセット共有機能が役立ちます。ここではマルチデバイス向けに作成したサンプル「MonoImageApp」(サンプルファイルstep_2_1)を使って、アセット共有のコツを紹介します。

サンプルプロジェクトの紹介

MonoImageAppサンプルは、写真を読み込みモノクロ写真にして保存するシンプルなアプリケーションです。Flash Professional CS5.5からパブリッシュ可能になったAdobe AIR 2.6で作成しており、デスクトップ、Android、iOSの3つのデバイスを対象に展開しています。いずれも異なる解像度で作られていることに注目ください。

デスクトップ、Android、iOS向けにデプロイできるように、デスクトップ向けのdesktop.flaと、AIR for Android向けのandroid.fla、AIR for iOS向けのios.flaがプロジェクトのファイルとして格納されています。

異なるサイズのflaファイル間でシンボルを共有するコツとして、パーツはベクターグラフィックで作成します。ベクターグラフィクは拡大・縮小に強いので、サイズの変更を伴う使い回しには柔軟に対応できます。また、角丸などのエッジを保持したい場合には9スライスを利用したり、直接シンボルの共有ができないTextFieldやビットマップシンボルはグラフィックシンボルに内包するなど工夫しています。

プロジェクトの修正

仮にデザインとテキストを次のように修正することになったとします。

  • 黒色で作っているパーツのカラーを青色に修正。
  • 一部のテキストを変更(「ライブラリ」の箇所を「画像を選択」に変更)。

今回のサンプルでは次の手順で修正することにします。あらかじめdesktop.flaとandroid.flaとios.flaで、これらのシンボルはアセット共有を設定しています。

  • HeaderBgシンボルのグラデーションカラーを変更。
  • BtnBgシンボルのグラデーションカラーを変更。
  • Textsシンボル1フレーム目のTextFieldのテキストを変更。
  1. HeaderBgシンボルのグラデーションカラーを変更します。
  1. BtnBgシンボルのグラデーションカラーを変更します。ボタンのサイズはそれぞれのflaファイルで調整していますが、境界線部分のエッジの太さを維持するためムービークリップの9スライス機能を使っています。
  1. Textsシンボル1フレーム目のTextFieldのテキストを変更します。TextFieldは単独でアセット共有ができないため、グラフィックシンボルにTextFieldを内包し、そのグラフィックシンボルをアセット共有として設定しています。
  1. 上記のステップで変更したdesktop.flaは以下のようになりました。
  1. android.flaやios.flaを開くと、同様の修正が複数のflaファイルに適用されていることがわかります。完成したサンプルファイルはstep_2_2です。

おわりに

モバイルデバイスの展開としてアセット共有機能を解説しましたが、Web向けのコンテンツ制作でも複数のflaファイルでアセットを共有したい案件も存在すると思います。新しいプロジェクトパネルをぜひ活用して制作フローの効率化に役立ててください。

関連記事