— A small program written in Java that coverts an image into vector outlines
in a format (.fxg) that can be imported into flash.

DOWNLOAD

ImageToVectorToFlash_v0.4.0.rar (230 KiB) — Extracts to 416 KiB.

Designed to run on Windows. Requires Java 7 or higher.

If the program doesn't start, right-click "! Run ImageToVectorToFlash.bat" and select Edit.
Then replace "javaw" with the complete path to javaw.exe on your machine so the line reads like this:
start "ImageToVectorToFlash" "C:\<your path to java here>\jre<version>\bin\javaw.exe" -Xmx5000m -jar programJar

You can also try changing -Xmx5000m to something lower, like -Xmx1000m, or removing it completely.

EXAMPLE

	In this example we will turn these characters into vector graphics and then import those into flash. The original JPG image is 450 KiB.
	Program started.
	The image has been selected and converted to a pure black and white bitmap from the default edge threshold, which is 20.
	I try different threshold values until I settle on 32 for this particular image.
	After pressing Go! four files appear in the folder: image_out.bmp image_out.svg image_out.geojson image_out.fxg The last one ending in fxg is what can be imported into flash. The rest can be deleted or used for other purposes. Check out the SVG in fullscreen. (74.6 KiB)
	I open Adobe Flash Professional CS6 (I'm sure it works in later versions too) and create a new 1022x831 document (the original size of the image). After that I go to File > Import > Import to Stage and select "image_out.fxg". The screenshot is what appears. Every line path is encapsuled as a drawing object which allows you to easily select the paths that you don't want to keep (small "bubbles" here and there) and press delete. I haven't done that though.
	The flash is exported, here is how it looks. If the flash was set to be 1022x831 the lines would line up to the original image pretty much perfectly. Check it out in fullscreen. (30.2 KiB) Since the edges of the outlines in the original image is what is being traced they have to be filled out in flash to create the original outline width. Filling outlines with black usually just takes a couple of clicks.
	Now I press CTRL+A to select all drawing objects. Then I go to Modify > Break Apart to remove them. The lines segments can now be manipulated and colors can be filled in, like has been done hastily in this example. Using the "Gap Size" setting for the Paint Bucket Tool in flash to close small/medium/large gaps is pretty handy when filing in colors for non-outlines. Check it out in fullscreen. (30.4 KiB) As you can see, when lines are too thick (like in Link's clothes) it will create two edges instead of just one. This is also the reason for all those "air bubbles" inside lines. If your input image has very thick lines it might be a good idea to scale it down before you use it as an input image in this program, although don't overdo it since it might remove details.
	Here's another quick example. Original JPG: 450 KiB SVG (56.8 KiB) SWF (colored) (24.1 KiB)

NOTES

ImageToVectorToFlash works good when there are strongly defined outlines that contrast heavily with fill colors in the image.

The program loves cartoons and lossless formats (such as PNG). The program hates photographs or art where the colors blend into each other. Lossy image compression could ruin the edge detection as well since there will be artifacts around edges (low quality JPG images).

You can use this program to create SVG graphics for your website or T-shirt printer. Import art into your favorite graphics editor and use it to evolve your skills. Use it to get various graphics such as icons into your flash game. Or to create porn: chop lines up, add some tweens and a bit of color, bake with audio effects plus music and you're done.

POSSIBLE IMPROVEMENTS

+ Colors
Colored SVG and colored FXG would be nice.

+ No "air bubbles"
Allow the edge detection to fill out whole lines regardless of how thick they are.

+ Two lines to one line
Would be nice if the two lines that make up the edges of a single outline could be turned into one line that represents the actual outline instead of the edges of it.

+ Multiple thresholds
Being able to select parts of the image by drawing on it that should have less or more threshold than the set base value.

+ Path simplification
Turn two or more line segments into one if they have a similar angle.

+ Curves
Bezier curves would turn multiple line segments into one and still have things looking smooth.

+ Grayscale algorithms
Edge detection is done on a grayscale version of the image, picking different grayscale calculations could affect how well edge detection works.

+ Removing non-shades
Removing colors that aren't shades (such as black or dark gray) would prevent the program from detecting edges inside color fills (common when non-gradient shadows are used in an image).

+ Reducing color count
Reducing the number of colors in an image can help to remove JPG artifacts that might mess up edge detection.

+ Animated GIFs
Being able to easily convert an animated GIF into several vector frames would be handy.

VERSION HISTORY

0.4.0 (9jul2015) r1

Questions or comments? Want an update?

Please post about ImageToVectorToFlash in its discussion thread.