こんな感じです。
何もしないと真っ白なままなので、クリックやドラッグをしてみてください。SVG画像が表示されます。
SVG形式の画像はInkscapeで作りました。
ソースコードはこちら。
package {
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLLoader;
import flash.net.URLRequest;
import frocessing.shape.FShapeSVG;
[SWF(backgroundColor = "0xFFFFFF", frameRate = "30")]
public class TestSVG extends Sprite {
private var sp:Sprite;
private var mouseDown:Boolean;
private var mouseDownX:Number;
private var mouseDownY:Number;
public function TestSVG() {
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onComplete);
loader.load(new URLRequest("test.svg"));
mouseDown = false;
stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
}
private function onComplete(e:Event):void {
var svg:XML = XML(e.target.data);
var shapeData:FShapeSVG = new FShapeSVG(svg);
sp = shapeData.toSprite();
}
private function onMouseDown(e:MouseEvent):void {
mouseDownX = e.stageX;
mouseDownY = e.stageY;
sp.x = e.stageX - sp.width / 2;
sp.y = e.stageY - sp.height / 2;
sp.alpha = 0.2;
mouseDown = true;
addChild(sp);
}
private function onMouseMove(e:MouseEvent):void {
if(mouseDown) {
sp.width = Math.abs(mouseDownX - e.stageX);
sp.height = Math.abs(mouseDownY - e.stageY);
sp.x = mouseDownX - sp.width / 2;
sp.y = mouseDownY - sp.height / 2;
}
}
private function onMouseUp(e:MouseEvent):void {
sp.alpha = 1;
mouseDown = false;
}
}
}Frocessingというライブラリを使わせてもらっています。思った以上に簡単に出来ました。
今回の参考サイト
FlashでSVG形式のベクターグラフィックを利用する | デベロッパーセンター
nutsu/Frocessing - Spark project
