イラレからSVG形式で保存してPapervision3Dで読み込む

2009年1月30日 19:27

Adobe Illustrator CS3から書き出したベクターデータ(svg形式)がvectorvisionで読める!papervision3Dで動かせる。すごい、軽くてきれいだし(ベクターだから当たり前か)割と簡単だったので、メモしときます。

画像は僕が主催で行っている、謎のクリエイター集団の勉強会、『Splaaaash!』のロゴマーク。
デザインはtommmmmmmmyさん。
次回の勉強会は2月、デジタルハリウッド大阪校で。
まず僕のなじみのイラストレータ、まだCS3です、アドビさん、すいません。

Adobe Illustratorでsvg形式で保存

今までの通り、イラストレータで出来たアートワークを「別名で保存」しておきます。
何か聞かれてくるけど、そのまま保存しました。

さて、実はこのSVGファイル、中身をテキストエディタ等で開いたら分かるけど、純粋なXMLファイルです。

ということは、AS3の場合、いつもXMLファイルを読む時はURLLoaderクラスを使うんですが、この場合も全く例外ではありません、そのままXMLを読む様にSVGを読みましょう。

var loader:URLLoader=new URLLoader();
↑でローダーインスタンスを作って...
loader.load(new URLRequest(url));
↑でロード開始
loader.addEventListener(Event.COMPLETE,svgLoadComplete);
↑ロードが終わったら・・・・

と、言った感じでしょうか、ここまでは全く問題なかったです、真新しいのはココからです。

path= new SvgPathsPapervision(event.target.data);
↑先にpathという変数にインスタンスを入れるんですが、これが「SvgPathsPapervisionクラス」というもので、コンストラクタの引数にはさっき作った「ローダーインスタンスの中身?」を参照してます。

var vs3D:VectorShape3D=new VectorShape3D(new VectorShapeMaterial());
↑マテリアルを作って(今回はVectorShapeMaterialクラス)それをVectorShape3Dというオブジェクトに貼付けるようなイメージでとらえましょうか。

さて、最初にpathという変数は、SvgPathsPapervisionのインスタンスを作ったのですが、そのメソッドにdrawToVectorShapeというメソッドがあります。

で、これの中身を覗くと・・・

public function drawToVectorShape(grahics : Graphics3D, scale :Number = 1, offsetX:Number = 0, offsetY:Number = 0) : void {

なので、最初の引数はGraphics3D型、そのままのVectorShape3D型ではいけないので、こちらも中身を覗いてみるとpublic var graphics : Graphics3D;と宣言されてる。
なのでVectorShape3Dのインスタンスプロパティ、graphicsにアクセス、すると、戻り値はGraphics3D型ですね、第一引数はこれでOK。

第二引数はその名の通りですが、最近どうもこういった「大きさ系」の基準が混乱して分からなくなってきて困る。

ひとまず、1。

あとのX,Y軸のオフセットだけど、まあ、適当に今回は入れてみた。

あとはいつも通り、addChildしてレンダリングです。

それにしても最近Text3Dクラスとか使ってタイポグラフィーで遊んでるけど、結構楽しい、自由なベクター画像をPapervision3Dで動かせるのが出来たからもっと表現の幅が広がるのでうれしいですね。
でもFlashPlayer10からはこの程度の3D表現はPapervision使わなくても出来る様になるんだっけ?

ソースコード


Flash AS3 学習リスト

siteInformation

info@akibahideki.com

カテゴリ
Author
秋葉秀樹

秋葉秀樹(アキバヒデキ)

DTP上がりのデザイナー
ノンプログラマー!
フリーランスのデザイナー。
IllustratorやPhotoshopを初代バージョンから使っているという事がウリ。
クリエイター育成機関などでお世話になり、先生として講義をしていたりします。