How to use vector graphics in FlashDevelop – SVG in Flash

photo credit: Kichigai Mentat

In my previous Flash post, I already touched on the subject of a major reason why you might still prefer the expensive Adobe Flash IDE over FlashDevelop: it’s the integrated vector editor. Vector graphics give you the major advantage of begin scalable with little to no quality loss. Try to print out any graphic you see on the web and you will notice it’s blocky. Not so with vector based graphics. They are inherently easily scalable, in both directions, smaller and bigger.

Most of what you create in the Adobe Flash IDE, are vector graphics. Using bitmaps is not really encouraged, and with reason. If you looked closely at the two applets in the previous post, you might have noticed that the quality of the crosshair picture in the last one is not very good. That’s because it is based on a bitmap. The circle one however, looks perfect.

So if FlashDevelop doesn’t let you create vector graphics, how are you going to do it? It’s easy: use the previously mentioned Inkscape. It lets you create SVG graphics, Scalable Vector Graphics.  Like this one. This is the bitmap representation (most browsers don’t natively support the format):

Ones you got the SVG file, it’s really easy to embed it. Put it in the library directory and use the same type of embed code as you would do for bitmaps. Then change the type of the embedded object from Bitmap to Sprite. That’s it, you’re done. You should have this piece of code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

package  {
 
	import flash.display.Bitmap;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.ui.Mouse;
 
	public class Test extends Sprite {
 
		[Embed(source='library/star.svg')]
		private var crosshairClass:Class;
		private var crosshair:Sprite = new crosshairClass ();
 
		public function Test() {
			trace("started");
			Mouse.hide();
 
			crosshair.height = 30;
			crosshair.width = 30;
			crosshair.scaleX = .30;
			crosshair.scaleY = .30;
			addChild(crosshair);
 
			stage.addEventListener(Event.ENTER_FRAME, mouseMove);
			stage.addEventListener(MouseEvent.CLICK, click);
		}
 
		private function mouseMove(evt:Event):void {
			crosshair.x = mouseX - 15;
			crosshair.y = mouseY - 15;
		}
 
		private function click(evt:MouseEvent):void {
			trace("clicked @ " + evt.stageX + "," + evt.stageY);
		}
 
	}
 
}

And compiled, this is what it looks like:

That’s all dandy, but there are a few issues to keep in mind:

• For some reason, it’s impossible in FlashDevelop to right click on your SVG and “add to library”. So you can’t double click to insert the embed tags automatically. But if you type it by hand, it works perfectly.
• It appears that the gradient functionality is not working as it should. If you look at the bitmap, or open the SVG in Inkscape, you’ll see that I have added a gradient, but it does not show in Flash. I’ll have to look into that one day.
• I would suggest that you change the document size in Inkscape to be as small as possible. Either that, or put object in top left corner. This will make sure that object is correctly positioned when you load it in your Flash applet.

To finish, here’s a 400% zoomed image of the same star, once as PNG and once SVG:

You’ll see that the right image has a smooth edge, with properly applied anti-aliasing. The little bit of anti-aliasing you see on the left image, was created by Inkscape when I exported the bitmap. This effect might not be very profound for this little example, but if you are going to be zooming and rotating image a lot in your Flash applet, it will make a huge difference.