What's New in Adobe AIR 3

Chapter 1. Improvements to the MovieClip and Drawing APIs

Adobe AIR shares much of its core functionality with the Adobe Flash Player runtime. Flash Player began life in the mid-1990s as a web-based media animation and display technology. For much of its history, it has been relied on for graphically intense, functional, and beautiful image rendering and manipulation. With AIR 3, the graphics and vector drawing technology which is so core to Flash Player and inherited by AIR is extended and improved upon in some rather useful ways.

Cubic Bezier Curves

We have an addition to the graphics drawing APIs in this release of AIR which allows simple creation of Cubic Bezier Curves without having to do a lot of complex equations on your own, each time you want to draw a new curve. The new cubicCurveTo() method takes six arguments to function correctly: a set of x and y coordinates for the first control point, a similar set for the second control point, and a set of coordinates for the anchor point.

Note

Bezier curves are widely used in computer graphics to model smooth curves through the use of four distinct points: a start point, an end point, and two anchor points which inform the direction and pull of the drawn curve.

The curve will begin wherever the current line is – we can use the moveTo() method to precisely position the start point just as is done on other graphics API calls. The two control points influence the curve of the line, and the anchor point will be the end of the drawn curve. This is illustrated visually in Figure 1-1.

Figure 1-1. How cubic Bezier curves work

In the example below, we create a Sprite within which the new cubicCurveTo() method is invoked in order to draw a cubic Bezier arc across the stage.

package {
    import flash.display.Sprite;

    [SWF(width="600", height="500", backgroundColor="#CCCCCC")]

    public class CubicBezierCurve extends Sprite {

        private var drawingHolder:Sprite;

        public function CubicBezierCurve() {
            generateDisplayObjects();
        }

        protected function generateDisplayObjects():void {
            drawingHolder = new Sprite();
            drawingHolder.graphics.moveTo(20, stage.stageHeight-20);
            drawingHolder.graphics.lineStyle(5,0x000000);

            drawingHolder.graphics.cubicCurveTo(50, 50, stage.stageWidth-50, 50, stage.stageWidth-20, stage.stageHeight-20);

            addChild(drawingHolder);
        }

    }
}

This will render an application window similar in appearance to Figure 1-2.

Figure 1-2. Cubic Bezier curve