本記事では、Flash Professional CS5.5の新機能の中から、Illustratorとの連携や、ベクター画像に関連した機能について解説します。

※本記事の内容は、Illustrator CS4以降で確認済みです。

強化されたIllustratorファイルの読み込み

Flash Professional CS3からIllustratorファイルを直接読み込むことが可能になり、さらにCS5.5ではIllustratorファイルのテキストエリアの再現が強化されています。実際にFlashの新規ドキュメントを作り、Illustratorからアートワークを読み込んでみましょう。以下は、サンプルデータ内にあるbanana.aiです。

Flashの新規ドキュメントを作成し、メニューの[ファイル]→[読み込み]→[ステージに読み込み]から「banana.ai」を読み込みます。ファイルを選択すると、ステージに読み込むオブジェクトを選択する画面が表示されます。

読み込んだ結果、図3のようにIllustratorで指定したフォントや文字色、インデントタブなどが反映されています。

現在のところ、テキストのカーニングには完全に対応できておりません。テキストのカーニング状態を正確に反映したい場合は、コピー&ペーストを利用し、[推奨の読み込み設定を適用して非互換性を解決]にチェックを入れて読み込みましょう。ただし、この方法だと読み込み後にFlash上で編集ができなくなります。

読み込んだIllustratorファイルのビットマップ変換

ベクター形式で読み込めると使い勝手がいいのですが、問題もあります。それは、ベクター画像をアニメーション素材にする場合、描画負荷が高くなるということです。ダイナミック選択ツールを使って、このバナナを選択してみましょう。

こういったオブジェクトをアニメーションさせると描画負荷が高くなり、画面が滑らかに再生されません。そこで、Flash Professional CS5.5の新機能の「ビットマップ変換機能」を使います。ステージ上にあるベクター画像をビットマップ形式に変換するる機能です。ビットマップ変換機能を利用すれば、PCに比べてスペックの低いモバイル端末での動作も向上させることができます。

バナナを選択した状態で、メニューの[修正]→[ビットマップに変換]を選びます。

Flash内でビットマップへ変換できるため、わざわざPhotoShopなどを開く必要もなくなり、作業がはかどるでしょう。ただし、一度ビットマップへ変換してしまうと、拡大・縮小などができなくなります。そこで次に紹介するのが、ムービークリップのレンダリング機能です。

ムービークリップのレンダリング機能

先ほどのバナナ(ベクター形式)を一度ムービークリップシンボルに変換します。変換したムービークリップを選択して、[プロパティ]パネルを表示すると、CS5.5では[表示]メニューの[レンダリング]項目が新しくなっています。

以前からあるビットマップキャッシュ機能が[ビットマップとしてキャッシュ]に変更になり、新たに[ビットマップとして書き出し]が追加されました。[ビットマップとしてキャッシュ]の場合、Flashムービーが再生時にビットマップとしてキャッシュされるのに対し、[ビットマップとして書き出し]の場合、パブリッシュ時にビットマップに変換されるため、再生時のランタイムキャッシュが少なくなります。これにより、PCに比べてスペックの低いモバイル端末に向けたシンボルの最適化ができるでしょう。

コンテンツをステージに合わせて拡大/縮小

最後に、ベクター画像とマルチデバイス対応に関連する新機能を紹介しましょう。ベクター画像は拡大縮小しても劣化しないため、画面サイズの異なるデバイスへ対応するコンテンツを作成する上で便利です。図12はCS5で作成したiOS用アプリの画面です。

このアプリをAndroid用に調整するとしましょう。その際に問題となるのが、画面サイズです。iPhoneとAndroid端末では以下のように画面サイズが異なります。

  • iPhone/iPod touch:320☓480ピクセル
  • Android端末:480☓800ピクセル

異なる画面サイズに対応させるには、オブジェクトの修正やアニメーションの変更などのリサイズを行う必要があり、その作業に手間がかかります。そこで紹介するのが、CS5.5のドキュメント設定の新機能「コンテンツをステージに合わせて拡大」です。この機能を使えば、ステージサイズの変更に合わせて、タイムラインやアニメーションを含むオブジェクトのサイズを一括変更することができます。

この機能を使うには、ドキュメントの[プロパティ]パネルの[サイズ]の横にあるアイコンをクリックして[ドキュメント設定]ダイアログを開きます。

設定されていたiOS用のサイズ(320☓480)をAndroid用の480☓800へ変更します。そして、[コンテンツをステージに合わせて拡大]にチェックを入れます。

[OK]ボタンをクリックすると、ステージサイズだけでなく、自動で画面上のオブジェクトも拡大/縮小されます。

この後、先ほどのビットマップ変換を各シンボルへ実行することにより、画面素材を作り直すこともなく、マルチデバイスに対応することが可能です。

おわりに

Flash Professional CS5.5では、ベクター画像をうまく利用することで、開発効率を上げることができます。また、ビットマップ変換が各所でできることにより、再生時のパフォーマンスの向上にも役立つでしょう。

関連記事