Convert bitmap to vector for Flash

There are several ways in which bitmap images (e.g. JPG, PNG or GIF formats) can be converted into a vector image:

See also: loading shapefile maps (.SHP) in StatPlanet

 

Automatically convert a bitmap into a vector using Adobe Animate

It is impossible to perfectly convert a Bitmap image into a vector one, but with some experimentation it is possible to achieve good results. To convert a Bitmap image, first import it into Animate (File -> Import to Stage). Then select the image, and select Modify -> Bitmap -> Trace Bitmap.
You will need to experiment with the following trace settings to get optimal results:

  • Color threshold: Increase this value to decrease the number of colors in the resulting vector image. (When comparing two pixels, if the difference in the RGB color values is less than the color threshold specified here, they are considered to be the same color).
  • Minimum area: Increase this value to decrease the number of shapes in the resulting vector image. This is the number of surrounding pixels considered when assigning a color to a pixel.
  • Curve fit: How smoothly the outlines will be drawn.
  • Corner threshold: Select how many corners you wish to keep.

The following values illustrate what settings to use if you wish to create a vector that most closely resembles the original bitmap. However, the settings below are not recommended due to the large number of shapes created. These settings may also cause the Animate software to crash.

  • Color Threshold: 10
  • Minimum Area: 1 pixel
  • Curve Fit: Pixels
  • Corner Threshold: Many Corners
When tracing a map, ignore the traced map borders (remove them if possible by experimenting with the 'trace bitmap' settings, and try to have a traced bitmap with distinct map areas). You need to create your own borders and for this you need each map area to be separate from each other. If you have succeeded in doing this, you can use the 'Ink Bottle Tool' to create the borders. Click on each map area with the Ink Bottle Tool selected and it will create a border around it. This will probably result in a map with multiple borders. To resolve this, remove all of the map areas, leaving only the borders. Then remove, one by one, any of the 'duplicate' borders. Finally, use the Paint Bucket tool to fill in the map areas again.
 
If this doesn't work, tracing bitmap outlines manually may be the way to go, as described below.
 

Manually trace the bitmap outlines using Adobe Animate

If automatically tracing the image does not lead to the desired results, you can draw the outlines by hand. The following describes the process for tracing a map, though the process is the same for any kind of bitmap image. 

  1. Convert your image into a Movie Clip (Modify -> Convert to Symbol).
  2. In the properties panel below, click on the 'Color' drop-down and select 'Alpha'. Change the value to around '30%' (so you can still see the outlines of the image clearly).
  3. Insert a new layer (Insert -> Timeline -> Layer).
  4. Select the Line tool for the Drawing Toolbar, and draw the outlines in this new layer following the outlines of the map in the layer below. Make sure that all the lines are touching. To draw a curve, first draw a straight line. Then, click somewhere in the middle of the line, and drag it one way or another.
  5. Select the Paint Bucket tool and click inside the borders to create your map regions. If it does not work, the borders you have drawn are probably not touching. Zoom in to see if you can detect the breach.
  6. Remove the bottom layer containing your bitmap image.

 
Converting a shapefile map (.SHP) into a vector format for Adobe Animate 

Maps for GIS (Geographic Information Systems) are commonly exchanged as ESRI Shapefiles. StatPlanet can load shapefile maps directly. It is also possible to use StatPlanet to convert shapefile maps into a vector format, which can then be edited using software such as Adobe Illustrator, Inkscape or Adobe Animate. In order to export the shapefile map as a vector PDF file, it first needs to be loaded into StatPlanet (see also the quickstart guide for loading shapefile maps). Then follow the steps as outlined here: exporting shapefile maps to vector format.

Shapefile maps can also be converted into Adobe Illustrator vector files using software such as ArcGIS or MAPublisher. Converting the file in ArcGIS can be done as follows: select 'File -> Export Map'. In the 'Save as' drop-down select 'AI' as the file format. Then click on 'Save'. Adobe Illustrator (AI) files can be imported directly into Adobe Animate.

You may also wish to open the image first in Adobe Illustrator, export the image as a Flash SWF file, and import the SWF into Adobe Animate. Importing an SWF file sometimes leads to better results than importing an AI file.

If you do not have access to such software, you could try a free Shapefile to SVG converter called shp2svg. See below for converting an SVG image into a format recognized by Adobe Animate.

 

 Converting a vector image (such as SVG) into a vector format for Adobe Animate

Using Adobe Illustrator: Open the SVG file in Adobe Illustrator, and then export the file in either the .AI or .SWF format. It seems that the best results are achieved when using Adobe Illustrator to export the image as an Adobe Animate SWF file, then importing the SWF into Adobe Animate.

Without Adobe Illustrator: You could try converting the file using the free vector graphics editor Inkscape or the free SVG2SWF conversion tool.