ಠ_ಠ nathandemick.com

How to embed SVG vector graphics with Actionscript

One of the big downsides about not using the Flash IDE for development is that it’s much more of a hassle to bring graphics into your program. The IDE has a built in vector illustration program, which allows the user to create graphical objects (or import them from Illustrator) and link them right up to a corresponding Actionscript object. If you’re making programs with the Flex SDK, however, getting graphics is a bit more of a chore. Fortunately, it’s not nearly as difficult as programming graphics via Actionscript.

First, you’ll want to get a vector illustration program. Adobe makes Illustrator, which might be your first thought, but we’re trying to do things on the cheap here, otherwise we’d just get the Flash IDE. Inkscape is a free program which can save files in the SVG (scalable vector graphics) format. Grab a copy of Inkscape, and fire it up (OS X users prior to 10.5 will need to install X11).

Inkscape starts up by creating a default document, which is much larger than anything we would normally use. From the ‘File’ menu, navigate to the ‘New 32x32 Icon’ option. Now, in the smaller image, use the ‘Circle’ tool to create a circle. Take some time here to play around with Inkscape: experiment with changing the color of the circle, give it a border, do whatever you like. When you’re satisfied with what you have, click ‘Save’ and save the image as a ‘Plain SVG.’ Now, create a new Actionscript file in the same directory as the graphic file called ‘SVGExample.as’, and enter the following code:

package {
  import flash.display.Sprite;

  public class SVGExample extends Sprite {

    [Embed(source="ball.svg")]
    public var BallGraphic:Class;

    public function SVGExample():void
    {
       var b:Sprite = new BallGraphic();
       b.x = 100;
       b.y = 100;
       addChild(b);
    }
  }
}

The way that graphics are embedded is as follows: first, you use the ‘Embed’ syntax to specify where the image is, and then you link that embedded asset to a unique class name. Here, I call it “BallGraphic,” but you can use anything that makes sense to you. Creating an instance of that class (when I call new BallGraphic()) loads the graphic, and it can then be added to a display object container and shown on the screen. When you compile this code and run the SWF, you should see your graphic on the stage. You can now easily import SVG graphics (or even other image types, such as .gif/.jpg) via Actionscript.

1235414389 · 2 comments