Introduction

Flash CS5 introduced a Bezier Pen Tool and a Subselection Tool for PostScript style curve editing. Points on Bezier curves change after certain operations drawing or editing operations. This effect is natural and doesn't 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 curves are a little different from the Cubic Beziers that PostScript uses. As the SWF 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, two nodes on the curve, and two control handles off the curve define each curve segment. There are a total of four data points. The SWF file format also describes the two on-the-curve nodes. However, it's only necessary to describe one off-the-curve control handle. Therefore, it can describe the same curve with three data points.

Flash 5 introduced a Bezier Pen Tool and a Subselection Tool. This tool can create and edit alternate Cubic Bezier representations of all of the native Quadratic Bezier curves. The core representation remains the native Quadratic Bezier curve. However, 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 is generated from the native Quadratic Bezier representation. When the FLA is compiled to SWF file, only the compact Quadratic Bezier is included.

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

What causes curve regeneration?

The 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 aren't handled well by PostScript style curves. In such a case, the application creates a new Cubic Bezier curve. The next time you use a Bezier Pen, you could see that the points have changed.

For example, if you import some vector art in the Adobe Illustrator AI format, it starts with a Cubic Bezier representation. It's then converted to Flash's internal Quadratic Bezier curves. The Cubic Bezier points remain for later PostScriptstyle 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 is created. It's easy to grab and delete parts of curves in Flash. However, this nonPostScript style of vector drawing requires 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 few Bezier control handles. If you then swipe the Eraser across this vector shape, then a new PostScript representation is created. The new Bezier Pen points are different from 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 nonPostScript drawing methods can force Flash to render a new PostScript style Cubic Bezier representation.

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 can see more points than were originally there. Many simpler curves sometimes represent a complex curve. Moving a shape with the regular Arrow Tool can also give the appearance of many more Bezier Pen Tool control points. This effect is 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. 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 statement 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 describe the same overall curve, but one uses more four-point Cubic Bezier curves to do so. When you Publish to SWF file and inspect the size report, you see that the final symbols are about the same size.

All that matters in the final SWF file 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 can be a different problem. The original shape could be overly complex, and the original Quadratic Bezier conversion could have more points than required. Whenever you're bringing in graphics from a print-based application, it can be useful to examine each curve and use Flash's Smoothing and Optimize commands. These commands can help in reducing the overall file size.

Drawing techniques

In all cases, examine the natural-drawing techniques in Flash itself. These techniques don't use a four-point Pen metaphor, but the natural brushing, erasing, and combining operations can give optimized results 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 Flash, then the application automatically creates a PostScript style Cubic Bezier. The curve has two on-the-curve points and two off-the-curve control handles. This Cubic representation is only used in editing, and the points can change during the editing. Only the compact Quadratic Bezier is compiled into the final SWF file.

 

Keywords: tn_14765

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy