完璧にIllustratorデータのイラストをFlashデータのイラストに変換するフロー。

例えば以下のようなIllustratorで作られたデータをFlashで完璧に再現する扱えるデータににしろ!と上司に言われたなら、”なんだこのどこかで見たことのあるようなデザインは!自分ならばもうちょっとうまくつくるぞ”、とか心の中で思う前にシ○トとか悪態をついてください。

イラスト素材データ

なぜならこのようなデータをFlashデータのイラストに変換するのはすごーくめんどうなことだからです。

追記(2007/5/10):FlashCS3からはグラデーションをそのままコピペできるので以下の作業はかなり楽になりました。

Illustrator(以下イラレ)からFlashへデータを持って行く際は、Illustratorのバージョン8形式で作られたものがスムースに持っていくことがで きます。これは現在のFlashがイラレ独自の機能を理解できないためです。グラデーションメッシュや透明度、Photoshopフィルタのドロップシャドウが持っていけないのもそのためです(フィルタは持っていけますがビットマップになります)。

ただイラレのCS以上ではアウトプット機能が充実しているので、Illustratorの”WEB用に保存”からsfwに書き出して、それをFlashで読み込めばたいてい大丈夫です。しかし今回のようにグラデーションや線データがある場合は変なビットマップやシンボルをもってしまい大変面倒です。

塗りや線等の概念がFlashとイラレでは違うために持っていく場合は色々工夫が必要です。 イラレの10形式の線情報はFlashMX2004では扱えないのとFlash8に持っていくと線データは吹っ飛んでしまいます。

例えば読み込んだFlashライブラリの中に覚えのない変なビットマップが出現します!

ill-flash.jpg で今回は今回はAdobeIllustratorCSとFlash8を使いイラレファイルを完璧にFlashファイルに変換するフローを紹介します。イラレにはSFW書き出しという機能がありますが残念ことに複雑なデータではほとんど使い物にならず、単純にCS以上からコピー&ペースト(以下コピペ)が一番余計なシンボルをつ作らずにFlashデータに変換できてしまいます。 ので筆者としては基本的にSWFに完璧に変換する場合はコピペがベストだと確信しています。(のでバッチ組まないといけないは今回のはあてはまりません)

・線情報はコピペすると吹っ飛ぶので オブジェクト>分割・拡張>線 を選択し塗りデータに変換。

ill-flash31.jpg
dlo1.jpg

ただこれだとパスが増えるのでサイズやパフォーマンスを気にする場合は手間ですがパスファインダなどを使い整理するとオーサリングするほうとしてはうれしいです。ただ時間がないときはやめましょう。

線はスケールで異なって見えるくるので100%時に見えるサイズで書き出しましょう。Flashに持っていくとつぶれて若干細くなるの場合があるので、Flashかイラレで気持ち0.5pxほど塗りか線を拡張して太くすると良いかもしれません。

塗り

・グラデーションは、現段階でまったく対応できないので塗りを拡張して階調データであきらめるのがいやな場合はFlash上でグラデーションをつけるしかありません。またそのほうがデータが軽くなります。そのためイラレ上ではグラデーションを別の色に塗り替えるなどして扱うとよいです。

path1.jpg

・テキストは文字化けしたり、カーニングなどをイラレで指定した場合Flash上でバラバラになったりするのでアウトラインをとってから渡すようにしましょう。
また今回の素材のように文字の周りにふちどりがある場合は、アウトライン後にパスファインダで”形状エリアに追加”で拡張(Alt+クリック)してシンプルなパスにするとパスが抜けたりするトラブルを回避できます。

path21.jpg

Flashでグラデを塗りこむにはツール”ペイントの変形”の匠になりましょう。
flash-gra01.jpg

テキストのグラデーションはこんな感じで。

flash-gra02.jpg
・マスクは利く場合もありますが、無視されることもあるのでクリッピングマスクなどは解除すると無難です。

あと多分CS2では修正されたようですが、CSから書き出すと交差するたまにパスデータをうまく書き出せないので適宜調整する必要があります。

最後に書き出したデータはシンボルにしてレイヤに分けて編集をしやすくしておく等して渡すと神経質なFlasherは納得してくれます。

とまぁ以上、不便きわまりないフローを強いられますが、
CS2とFlash8がリリースされたのはほぼ同時期で、開発された時期がまだ合併前のためCSと同じく対応がとられていないのは仕方がなありません。
ただ、先日プレビューされたCS3ではPhotoshopのレイヤーを任意に組み込めるようになったそうです。 イラレはほぼ作り直されるそうだとか。CS3ではこんあことしなくてきっとイラレのflaファイル形式書き出しとかできるはずです。
しかし、リリースは来年の4月だそうですが。

Leave a Reply