Flex: Degrafa demo update

I have updated the ‘Jess’ demo to use a higher vector count image. There are 103 vectors in the new image. You can adust the image in both the X and Y directions as well.

Sample App

To recap, I have converted an original jpg image to an SVG vectorised representation using Vector Magic. The SVG is parsed by a Flex application and the Degrafa mxml which represents the image is generated (with hooks for the x and y scaling). This is then pasted into a Degrafa ‘Surface’ which is compiled into this Flex demo application.

Here is the source code. This is a Flexbuilder2 project.

The process of turning your image into a degrafa surface is as follows:

1) Convert your target image into an SVG file using vector magic. Save it.

2) Open the SVG up in a text editor of your choice. Copy the svg definitions into the ‘svgData’ part of the XML definition up at the top of the ‘SVG2Degrafa.mxml’ file. I can’t find my original image so the best way is to examine the Jess data and compare the start of this to what you have in your SVG file.

3) Set a breakpoint on the lines where the debug statements output the fills and paths i.e.


Copy the output of these into your text editor.

Abort the application.

4) Take the fills and paths and paste them into the relevant section of the ‘TestSurface.mxml’ file. Recompile and run. If all goes well you should see your image come up in all it’s glory on the test application.

I apologise for the clunky nature of this process. The parser is the important part and that seems to work okay as long as the SVG is straightforward.

If you automate this process then I would love to hear about it.


Leave a Reply