Flashで外部画像データを読み込んで表示する場合、外部画像データとしてPNGやJPEGなどのラスター形式の画像を利用することが多いでしょう。では、ベクター形式の画像を利用したいと思った場合、どうすればいいでしょうか？

ベクター形式の画像を利用する場合、まずそのフォーマットを検討することが必要となるでしょう。SWFなのか、それとも別のフォーマットなのか。場合によっては、独自フォーマットを検討することがあるかもしれません。

フォーマットを検討する際に、選択肢の1つに「SVG」を加えてみてはいかがでしょうか。本記事では、FlashでSVG形式のベクターグラフィックを利用する方法を解説します。

サンプルデータ

• FlashSVG.zip（zip形式、560KB）

必要ソフトウェア

Adobe® Flash® CS4 Professional

• 体験版
• 購入

SVGとは？

SVG（Scalable Vector Graphics）とは、XMLによって記述されるベクター形式の画像フォーマットです。2001年にW3Cから勧告され、現在ではモバイル端末向けのSVG Basicなども勧告されています。

SVGでは、パス・線・塗りなどのシェイプ、回転・拡大・移動などの変形を定義することができます(※1)。シェイプと変形は、FlashのGraphicsとMatrixに似た関係があります。これらをXMLで記述することにより多様なグラフィクスを表現できるわけです。現在、Firefox、Safari、Chrome などのWebブラウザはSVGを標準サポートしており(※2)、簡単に閲覧することができます。

※1　SVGではシェイプや変形のほかに、テキスト、アニメーション、フィルター効果なども定義できます。

※2　Internet Explorerは、標準ではサポートしていません。

それでは、SVGのグラフィクスを見てみましょう。

SVGで作成した、円を重ねたグラフィクス

• 実際のSVGファイル「sample.svg」

SVGで作成した、虎のグラフィクス

• 実際のSVGファイル「tiger.svg」

SVGをWebブラウザで開き、そのソースを表示させるとXML内容を確認できます。以下は、先ほどの「sample.svg」のXMLソースです。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="300px" height="150px" viewBox="0 0 300 150">
         <circle cx="150" cy="75" r="45" fill="#7FBCFF" stroke="#202052" stroke-width="8" />
         <circle cx="150" cy="75" r="30" fill="#FFFFFF" />
         <circle cx="150" cy="75" r="15" fill="#FF4900" />
</svg>

このようにSVGはXMLで記述できるため、テキストエディタなどで編集することが可能です。また、IllustratorはSVGをサポートしているので、虎のグラフィクスのように複雑なものはIllustratorを利用するといいでしょう。

以上のように、SVGにはベクター画像のフォーマットとして、次のような魅力があります。

• 規格化されたフォーマットである。
• XMLであるため、柔軟にソリューションに組み込むことができる。
• Webブラウザで簡単に閲覧できる。
• Illustratorで編集ができる。
• パスや色などのデータにアクセスできる。

SVGの詳細については、以下のサイトをご覧下さい。

• Scalable Vector Graphics - Wikipedia
• W3C SVG Specification
• W3C SVG Specification(日本語訳)

FlashでSVGを利用するには

FlashでSVGを表示させるには、

• SVGのXMLをパース
• DisplayObjectに変換、またはGraphicsに描画

を行う仕組みが必要です。現在、上記のようなSVGの解析・描画を実装したActionScriptライブラリがいくつか公開されていますが、今回は「Frocessing(※3)」を使ったSVGの描画方法を紹介します。

※3　Frocessingとは、グラフィック描画のライブラリです。Frocessingでは、SVGのシェイプや変形などの基本要素に対応しています。テキスト、フィルター、アニメーションなどの要素はサポートされていません。詳しくはSparkProjectのプロジェクトページをご覧ください。

サンプル作成「Hello SVG!」

はじめに、Illustratorで作成したSVGデータをFlashで表示させてみましょう。使用するSVGデータは、サンプルデータ内の「hello.svg」です。

1.SVGデータの作成

まずSVGのデータを作成してみましょう。Illustratorを開き、新規ファイルを作成します。文字ツールで「Hello SVG!」と入力し、「書式→アウトラインを作成」を行います。このファイルを保存する際に、「ファイルの種類」を「SVG」とすると、SVG形式のデータを作成することができます。

Illustrator上の「Hello SVG!」アウトライン

作成したSVGをWebブラウザで表示したところ

2.FlashでSVGを読み込み表示

このSVGデータ（hello.svg）をFlashで表示させるには、以下のようなスクリプトを書きます。

package
{
         import flash.net.URLLoader;
         import flash.net.URLRequest;
         import flash.events.Event;
         import flash.display.Sprite;
         import frocessing.shape.FShapeSVG;
         
         public class HelloSVG extends Sprite
         {
                   var loader:URLLoader;
                   
                   public function HelloSVG()
                   {
                            //loaderを準備
                            loader = new URLLoader();
                            loader.addEventListener( Event.COMPLETE, onload );
                            
                            //SVGデータの読み込み
                            loader.load( new URLRequest("hello.svg") );
                   }
                   
                   function onload( e:Event ):void
                   {
                            //XML取得
                            var svg:XML = XML(loader.data);
                            //shapeデータの生成
                            var shapedata:FShapeSVG = new FShapeSVG(svg);
                            //Spriteに変換
                            var sprite:Sprite = shapedata.toSprite();
                            //表示
                            addChild( sprite );
                   }
         }
}

Flashでhello.svgを表示させたところ

読み込み部分にURLLoaderなどの記述が必要ですが、FrocessingのFShapeSVGLoaderクラスを使うことで、同じような処理を簡潔に書くことができます。

package
{
         import flash.display.Sprite;
         import frocessing.shape.FShapeSVGLoader;
         
         public class HelloSVG2 extends Sprite
         {
                   var shapedata:FShapeSVGLoader;
                   
                   public function HelloSVG2()
                   {
                            shapedata = new FShapeSVGLoader( "hello.svg", null, onload );
                   }
                   
                   private function onload():void
                   {
                            if( shapedata.success )
                                     addChild( shapedata.toSprite() );
                   }
         }
}

また、外部SVGファイルではなくスクリプト内に記述したXMLを使うこともできます。

package
{
         import flash.display.Sprite;
         import frocessing.shape.FShapeSVG;
         
         public class HelloSVG3 extends Sprite
         {
                   public function HelloSVG3()
                   {
                            var svg:XML =
                                     <svg>
                                               <circle cx="150" cy="75" r="45" fill="#7FBCFF" stroke="#202052" stroke-width="8" />
                                               <circle cx="150" cy="75" r="30" fill="#FFFFFF" />
                                               <circle cx="150" cy="75" r="15" fill="#FF4900" />
                                     </svg>;
                            
                            var shapedata:FShapeSVG = new FShapeSVG(svg);
                            addChild( shapedata.toSprite() );
                   }
         }
}

XMLソース（sample.svg）を直接記述した例

同じような描画をGraphicsで行う場合は、lineStyle、beginFill、drawCircleなどのメソッドを逐次記述する必要がありますが、SVGだとXMLに形状や色などをまとめて記述できるため、簡潔で見通しのよいスクリプトにすることができます。

SVGのパーツを操作

FShapeSVGでは、SVGの記述されたシェイプの親子構造が、そのままインスタンスの親子構造となっています。FlashにおけるDisplayContainerのようなものです。この親子構造を利用することで「グラフィクスの一部の色を変更」などの操作を行うことができます。

以下の例では、塗りが同じ要素を5つ用意して、それぞれ塗りや線の情報をスクリプトで操作しています。

package  
{
         import flash.display.Sprite;
         import frocessing.shape.FShapeSVG;
         
         public class ChildSample extends Sprite
         {
                   public function ChildSample()
                   {
                            var svg:XML = <svg>
                                                        　     <circle cx="50"  cy="75" r="40" fill="#000000"/>
                                                                 <circle cx="150" cy="75" r="40" fill="#000000"/>
                                                                 <circle cx="250" cy="75" r="40" fill="#000000"/>
                                                                 <circle cx="350" cy="75" r="40" fill="#000000"/>
                                                                 <circle cx="450" cy="75" r="40" fill="#000000"/>
                                                        　</svg>;
                            
                            var shapedata:FShapeSVG = new FShapeSVG(svg);
                            
                            //2番目の要素の色を変更
                            shapedata.getChildAt(1).fillColor = 0xff9900;
                            
                            //3番目の要素の色を変更
                            shapedata.getChildAt(2).fillColor = 0x0099ff;
                            
                            //4番目の要素の透明度を変更
                            shapedata.getChildAt(3).fillAlpha = 0.5;
                            
                            //5番目の要素の塗りと線を変更
                            shapedata.getChildAt(4).fillColor = 0xff9900;
                            shapedata.getChildAt(4).strokeEnabled = true;
                            shapedata.getChildAt(4).strokeColor = 0x333300;
                            shapedata.getChildAt(4).thickness = 4;
                            
                            addChild( shapedata.toSprite() );
                   }
         }
         
}

塗りや線の情報をスクリプトで操作

FrocessingでSVGを描画

これまでの例ではSVGをSpriteに変換して表示する方法を紹介しましたが、Graphicsに直接描画したい場合もあるでしょう。Frocessingでは、Graphicsに描画するメソッドを提供しているので、簡単に紹介しておきましょう。

以下の例は、冒頭の虎「tiger.svg」を読み込んでGraphicsに描画するスクリプトです。

package
{
         import flash.events.Event;
         import flash.display.Sprite;
         import frocessing.core.F5Graphics2D;
         import frocessing.shape.FShapeSVG;
         
         public class F5SVGSample extends Sprite
         {
                   var fg:F5Graphics2D;
                   var shapedata:FShapeSVG;
                   
                   public function F5SVGSample()
                   {
                            //F5Graphics2Dの生成
                            fg = new F5Graphics2D(graphics);
                            fg.bezierDetail(10);
                            
                            //shapeデータ読み込み
                            shapedata = fg.loadShape("tiger.svg", null, startDraw );
                   }
                   
                   function startDraw():void
                   {
                            addEventListener( Event.ENTER_FRAME, onEnterFrame );
                   }
                   
                   function onEnterFrame(e:Event):void
                   {
                            fg.beginDraw();
                            fg.shape( shapedata, mouseX, mouseY );
                            fg.endDraw();
                   }
         }
}

画像をクリックするとサンプルデータが表示されます

これを応用することで、SVGの各要素を個別に描画するものを作ることができます。次の例は、「tiger.svg」内の要素に3D変形を加えながら描画したものです。スクリプトにについては、サンプルデータを見て下さい。

画像をクリックするとサンプルデータが表示されます

最後に

いかかでしたでしょうか。SVGを活用することでサーバサイドとの連携や、グラフィクス表現の選択肢が増えるといった可能性を感じていただければ幸いです。SVGはJavaScriptとの連携など今後のRIAでも利用できる技術ですし、少し囓ってみてはいかかでしょう。

著者について