Basics of geometry

Introduction to working with geometry

Geometry may be a subject many people try to get through in school while retaining as little as possible, but a little geometry knowledge can be a powerful tool in ActionScript.

The flash.geom package contains classes that define geometric objects such as points, rectangles, and transformation matrixes. These classes don't necessarily provide functionality by themselves; however, they are used to define the properties of objects that are used in other classes.

All the geometry classes are based around the notion that locations on the screen are represented as a two-dimensional plane. The screen is treated like a flat graph with a horizontal (x) axis and a vertical (y) axis. Any location (or point) on the screen can be represented as a pair of x and y values--the coordinates of that location.

Every display object, include the Stage, has its own coordinate space--essentially its own graph for plotting the locations of child display objects, drawings, and so forth. Commonly, the origin (the place with the coordinate 0, 0 where the x and y axes meet) is placed at the top-left corner of the display object. While this is always true for the Stage, it is not necessarily true for any other display object. As in standard two-dimensional coordinate systems, values on the x axis get bigger going toward the right, and smaller going toward the left--for locations to the left of the origin, the x coordinate is negative. However, contrary to traditional coordinate systems, in ActionScript values on the y axis get bigger going down and smaller going up the screen (with values above the origin having a negative y coordinate). Since the top-left corner of the Stage is the origin of its coordinate space, any object on the Stage will have an x coordinate greater than 0 and smaller than the Stage width, and will have a y coordinate larger than 0 and smaller than the Stage height.

You can use Point class instances to represent individual points in a coordinate space. You can create a Rectangle instance to represent a rectangular region in a coordinate space. For advanced users, you can use a Matrix instance to apply multiple or complex transformations to a display object. Many simple transformations, such as rotation, position, and scale changes, can be applied directly to a display object using that object's properties. For more information on applying transformations using display object properties, see Manipulating display objects.

Common geometry tasks

The following tasks are things you'll likely want to accomplish using the geometry classes in ActionScript:

Calculating distance between two points
Determining coordinates of a point in different coordinate spaces
Moving a display object using angle and distance
Working with Rectangle instances:
- Repositioning a Rectangle instance
- Resizing a Rectangle instance
- Determining combined size or overlapping areas of Rectangle instances
Creating Matrix objects
Using a Matrix object to apply transformations to a display object

Important concepts and terms

The following reference list contains important terms that you will encounter in this chapter:

Cartesian coordinates: Coordinates are commonly written as a pair of number (like 5, 12 or 17, -23). The two numbers are the x coordinate and the y coordinate, respectively.
Coordinate space: The graph of coordinates contained in a display object, on which its child elements are positioned.
Origin: The point in a coordinate space where the x axis meets the y axis. This point has the coordinate 0, 0.
Point: A single location in a coordinate space. In the 2-d coordinate system used in ActionScript, a point is defined by its location along the x axis and the y axis (the point's coordinates).
Registration point: In a display object, the origin (0, 0 coordinate) of its coordinate space.
Scale: The size of an object relative to its original size. When used as a verb, to scale an object means to change its size by stretching or shrinking the object.
Translate: To change a point's coordinates from one coordinate space to another.
Transformation: An adjustment to a visual characteristic of a graphic, such as rotating the object, altering its scale, skewing or distorting its shape, or altering its color.
X axis: The horizontal axis in the 2-d coordinate system used in ActionScript.
Y axis: The vertical axis in the 2-d coordinate system used in ActionScript.

Working through in-chapter examples

Many of the examples in this chapter demonstrate calculations or changing values; most of those examples include the appropriate trace() function calls to demonstrate the results of the code. To test these examples, do the following:

Create an empty Flash document.
Select a keyframe in the Timeline.
Open the Actions panel and copy the code listing into the Script pane.
Run the program using Control > Test Movie.
You will see the results of the code listing's trace() functions in the Output panel.

Some of the chapter's examples demonstrate applying transformations to display objects. For those examples, the results of the example will be seen visually rather than through text output. To test the transformation examples, do the following:

Create an empty Flash document.
Select a keyframe in the Timeline.
Open the Actions panel and copy the code listing into the Script pane.
Create a movie clip symbol instance on the Stage. For example, draw a shape, select it, choose Modify > Convert to symbol, and give the symbol a name.
With the Stage movie clip selected, in the Property inspector, give the instance an instance name. The name should match the name used for the display object in the example code listing--for example, if the code listing applies a transformation to an object named myDisplayObject, you should name your movie clip instance myDisplayObject as well.
Run the program using Control > Test Movie.
On the screen you will see the results of the transformations applied to the object as specified in the code listing.

Techniques for testing example code listings are explained in more detail in Testing in-chapter example code listings.

Flash CS3