TechNote

Notes on the Bezier Pen Tool in Macromedia Flash 5

Introduction
Macromedia Flash 5 introduces a Bezier Pen Tool and a Subselection Tool for PostScript-style curve editing. It may be observed that points on Bezier curves change after certain operations drawing or editing operations. This is natural and will not affect the final size of the file. The following article describes the technical details behind these curve operations.

Quadratic Beziers and Cubic Beziers
The SWF file format describes curves as Quadratic Bezier curves. These are a little different from the Cubic Beziers that PostScript uses. As theSWF file format documentation describes: "SWF uses Quadratic Bezier curves because they can be stored more compactly, and can be rendered more efficiently."

Quadratic Beziers have only one control handle for each segment of the curve. In a PostScript drawing tool you'll see that each curve segment is defined by two nodes on the curve, and two control handles off the curve, for a total of four data points. The SWF file format also describes the two on-the-curve nodes, but only needs to describe one off-the-curve control handle, and can describe the same curve with three data points.

Macromedia Flash 5 introduces a Bezier Pen Tool and a Subselection Tool, which can create and edit alternate Cubic Bezier representations of all of the native Quadratic Bezier curves. Although the core representation remains the native Quadratic Bezier curve, Cubic Bezier curves can be generated on demand to enable Bezier Pen drawing and PostScript-style editing.

This Cubic Bezier representation is stored in the FLA file for use in subsequent edits. During some editing operations, a new Cubic Bezier representation must be generated from the native Quadratic Bezier representation. When the FLA is compiled to SWF only the compact Quadratic Bezier is included.

To summarize, PostScript-style control handles require a different type of curve than that which the Macromedia Flash Player renders. The Macromedia Flash 5 authoring application can automatically generate these four-point curves, and tries to reuse them when possible, but the underlying description is still a three-point Quadratic Bezier curve.

What causes curve regeneration?
The Macromedia Flash authoring application combines painterly and vector drawing techniques, and you can do things that are impossible in other vector programs. Some of these operations cannot be easily handled by PostScript-style curves. In such a case the application will need to create a new Cubic Bezier curve, and the next time you use a Bezier Pen you may see that the points have changed.

For instance, if you import some vector art in the Adobe Illustrator AI format, it will start with a Cubic Bezier representation and be converted to Flash's internal Quadratic Bezier curves. The Cubic Bezier points will remain for later PostScript-style editing. But if you use Flash's Lasso Tool to select part of this curve and delete it, then an entirely new Cubic Bezier curve needs to be created. It's easy to grab and delete parts of curves in Macromedia Flash, but this non-PostScript style of vector drawing will require a new PostScript-style curve.

Another example is Flash's Vector Eraser. If you draw a circle and select it with the Subselection Tool, you can see that the shape has a small number of Bezier control handles. If you then swipe the Eraser across this vector shape, then an entirely new PostScript representation needs to be created. The new Bezier Pen points will be different than the old points.

The same holds true for Flash's Vector Brushes, or the ability to directly grab and twist and sculpt the edges of a shape, or the way that Flash has built-in Boolean operations on shapes. All of these non-PostScript drawing methods can force Flash to render a new PostScript-style Cubic Bezier representation to be generated.

There are additional subtle regeneration cases. If you are drawing with the Bezier Pen Tool or editing with the Subselection Tool, then performing an Undo command can often cause regeneration. In this case you may see more points than were originally there, because complex curves may be represented by many more simpler curves. Moving a shape with the regular Arrow Tool can also give the appearance of many more Bezier Pen Tool control points, because of the way the transform is currently handled.

Do extra Bezier Pen Tool points matter?
For total file size, it doesn't matter how many four-point Cubic Bezier points there are in a curve, because the Cubic Bezier representation is not included in the final SWF file. All that matters is the overall complexity of the regular Quadratic Bezier curve--all that matters is the overall smooth appearance of the curve.

You can confirm this for yourself by making a symbol containing a simple Cubic Bezier curve using the Bezier Pen Tool. Duplicate the symbol, and move some of the points with the Subselection Tool and Undo until you see the multiple simpler curves. These two symbols will describe the same overall curve, but one will use more four-point Cubic Bezier curves to do so. When you Publish to SWF and inspect the size report, you'll see that the final symbols will be about the same size.

All that matters in the final SWF is the number of underlying three-point Quadratic Bezier curves. The extra nodes and handles seen with the Subselection Tool and the Bezier Pen Tool are not included in the final file.

If you're importing a shape from a PostScript file then there may be a different problem: the original shape may be overly complex, and the original Quadratic Bezier conversion may have more points than needed. Whenever you're bringing in graphics from a print-based application such as Adobe Streamline, it can be useful to examine each curve and use Flash's Smoothing and Optimize commands. These can help in reducing the overall file size.

Sidenote on drawing techniques
In all cases, please do examine the natural-drawing techniques in Macromedia Flash itself. These do not use a four-point Pen metaphor, but the natural brushing, erasing and combining operations can give optimized results very quickly.

Summary
The native curve in a SWF file is a Quadratic Bezier, with two on-the-curve points and one off-the-curve control handle. When you use the Bezier Pen Tool or Subselection Tool in Macromedia Flash 5, then the application automatically creates a PostScript-style Cubic Bezier, with two on-the-curve points and two off-the-curve control handles. This Cubic representation is only used in editing, and the points may change during the course of editing. Only the compact Quadratic Bezier is actually compiled into the final SWF.