Flash Professional : マルチプラットフォームを制覇しよう 第2回：ベクターグラフィックスをSVGに書き出そう
Flash Professional CCで作成したベクターグラフィックスは、様々な画像形式で書き出すことができ、Webサイトやゲームコンテンツに利用できます。本記事では、ベクターグラフィックスの作成方法と、SVGへの書き出し方法を解説します。
Flash Professional CCの体験版をダウンロード サンプルファイルをダウンロード
ベクターグラフィックスの特徴
Flash Professional CCでは、ベクターグラフィックスを作成することができます。ベクターグラフィックスとは、点の座標とそれを結ぶ線によって描画される画像のことで、拡大縮小しても画質が荒れないという特徴を持っています。
最近では、AppleのRetinaディスプレイ搭載デバイス（MacBook Pro Retina、iPhone、iPad）の登場や、Windows 8.1の高解像度表示対応など、DPIが向上したデバイスが増える傾向にあります。ベクターグラフィックスであれば、これらの高解像度デバイスにおいても綺麗に表示できるというメリットがあります。
Flash Professional CCの描画ツールと機能
Flash Professional CCには、グラフィックスを描くための様々なツールがあります。画面の右側に配置されている［ツール］パネルから、描きたいグラフィックスの種類に応じてツールを選択します。
Flash Professionalのベクターグラフィックスは、基本的に「線」と「塗り」で構成されます。「線」のツールとしては［ペンツール］［線ツール］［鉛筆ツール］［インクボトムツール］［線幅ツール］など、「塗り」のツールとしては［ブラシツール］［バケツツール］などがあります。
線の幅を変更できる「線幅」
Flash Professional CC 2014からは、［線幅］という機能を利用できます。これは線の幅を変更できるツールです（サンプルファイル：line.fla）。
※以前のバージョンの場合、「線」のツールで描く線の太さは均一で、幅の異なる線を描くには、ブラシツールを用いて「線」ではなく「塗り」を利用する必要がありました。
線幅を設定する方法は2通りあります。
1 ［プロパティ］パネルからプリセットを選択する
［プロパティ］パネルには様々な種類の線幅がプリセットとして用意されており、これらを選択することで簡単に線幅を変更することができます。プリセットの緑色の線はステージ上に描いた線を表し、白いエリアはその線に対してどのように線幅を膨らますかを表しています。
2 線幅ツールを使って線幅をカスタマイズする
線幅ツールを選択した状態で、ステージ上に描いた線にマウスオーバーすると、線幅調整のためのガイドが表示されます。このガイドを利用して自由に線幅を調整することができます。作成した線幅はプロファイルとして登録することができ、別の線に対して同じ線幅を適用するときに役立ちます。
線幅の調整機能を使うと、表現の幅が広がります。下図のように、同じイラストでも、線幅を調整することで、異なる雰囲気を出すことができます（サンプルファイル：image.fla）。
SVGファイルとして利用する
Flash Professional CCで作成したベクターグラフィックスは、イメージファイルとして書き出すことで、Webサイトや他のグラフィックスソフトで利用することができます。書き出すときは、［ファイル］メニュー→［書き出し］→［イメージの書き出し］を選択し、保存ダイアログボックスを開きます。
よく利用するファイル形式は次の種類です。「SVG イメージ」は、Flash Professional CC 2014から利用できます。
種類 特徴 PNG イメージ ラスターイメージとして保存します。画質劣化がなく、透過状態も保存できます。 SWF ムービー ベクターグラフィックスとして保存します。Flash Playerの外部読み込みファイルの素材として利用するときに活用できます。表示するにはFlash Playerが必要です。 SVG イメージ ベクターグラフィックスとして保存します。標準フォーマットなので様々なグラフィックソフトやブラウザーが対応しています。
サンプルファイルのimage.flaを開いて、「SVG イメージ」で書き出してみてください。
書き出したSVGファイルは、Illustrator CCで読み込むことができます。なお、線幅を適用した部分はパスに変換されます。
また、SVGファイルはimgタグを使ってHTMLページ上に表示させることができます。
本記事では、線幅ツールとSVGの書き出しの基本を紹介しました。ベクターグラフィックスは拡大縮小に強く、アニメーションの自由度があり、Flash Player／Adobe AIRやHTML5 Canvasドキュメントへ書き出す場合でもそのメリットを活かせます。ぜひ、みなさんもベクターグラフィックスを活用してみてください。