Vectors and the Tracing Command in Flash

By Blue_Chi | Flash | Beginner

One of the greatest advantages of Flash over other web technologies is that it is vector based. In addition to the ability of flash to contain bitmap images, the Flash player can also hold vector images that look extremely sharp in comparison to their bitmap counterparts.

The property that makes vectored images different from bitmaps is that they are independent of scale; no matter how much you zoom in vectored images will still maintain their sharpness. This is because vectored images are based on lines and curves based on mathematical equations unlike bitmap images that are created in a dot-by-dot basis. Drawings that are created in complete vector environment could be much smaller in size than those in bitmaps, depending on the number of curves and lines included in the image, unlike bitmaps that will depend on the number of dots and colours included in the image.


LEFT: BITMAP, MIDDLE: VECTOR, RIGHT: OPTIMISED VECTOR (ZOOM IN TO NOTICE DIFFERENCE)

There are many ways for creating vectored images, the most obvious way to create one would be to draw your image in vector format using Illustrator, Freehand, or Flash itself. The method of our interest in this tutorial is not a manual way of drawing a vector image, but in fact a conversion command available in the Flash authoring tool. This command can convert your bitmap images, photos, or any other bitmap into a vectored image.

Using the trace command is straightforward, you simply import a bitmap to stage using the "Import" command under "File". Once the image is on the stage you select it and use the "Trace Bitmap" that could be found in the "Bitmap" under "Modify".

Using the default settings would create a generally satisfactory traced vectored image. Complexities arise when the image is quite complex and you want to reach a certain result, certain tweakening would also be required for images that multiply in size when vectored. It is required to take care when tracing bitmaps because using random settings could make your image look completely deformed, could make the size of the SWF file massive, or could easily make your movie run at turtle pace. It is required to take care of certain points when tracing bitmaps in Flash to guarantee a satisfactory result.

It is required first to tune the way your image is traced. The Trace Bitmap features several options. The colour threshold is the sensitivity of colours to the process. The higher the threshold, the lower the number of colours present in your result vector. As many individuals consider that vector art is mostly known for its simplicity, most stylish results would be achieved with a higher threshold. The smaller the threshold on the other hand, the higher the number of colours caught up by the tracing process. Using the minimum threshold possible will render your bitmap created in the same look in vector format, which is completely pointless as the image would look the same, but would be multiple times higher in size and would suck the life of your processor.

On the other hand, the minimum area is the around to consider around a pixel when allocating a colour. The bigger the area chosen, the bigger and more definite the colour bocks are in the resulting vector. Again, using the minimum possible area along with the minimum colour threshold would create a very detailed and dotty image that would be hard to use in the Flash environment.

Finding your optimum result would usually require testing different setting combination. In addition to this, it is also required to notice that some images are traced better than other ones because of the individual nature of the image itself. Usually, clear drawings with contrasting outlines would be traced much better than a blurry photography for the obvious reasons that the coloured pixels are much more distinctive from each other than those of a photograph. If you are planning to use the trace command to trace a drawing that you made, make sure that you make your lines clear and thick enough for individual pixels to be caught by the tracing process, if you are using scanned images balancing the colour contrast is essential, you can do this using any advanced image editor such as Adobe Photoshop or Macromedia Fireworks.

It is also essential to realise that there is no shame in getting down and dirty and using the subselection white arrow to edit simple curves and pixels to fix distorted little parts or remove unwanted extra curves and pixels. This is important when faced with vectored images of a massive size, the higher the number of curves the higher the size of the file in KBs. You may want using the "Optimize" as well, though it may deform your image more than anything, but it might not hurt to try it for special occasions.


Creating vectors using the trace command cannot ever replace creating images in pure vector format, but this nonetheless does not mean that with great effort and specialist attention one can create a stylish vectored piece that is extremely smooth and tiny in size as well. If you need any help make sure you check the O3D Forum.