Download files for this lesson:
 curves.svg
curves_done.svg
Animating objects by manually transforming them in the Stage Window is convenient and easy, but if
precision is required, the Transform Palette can be an important tool.
The Transform Palette enables the user to get position coordinates as well as width and height values of the selected object. Given these values, we can then precisely control where an object moves to, how it rotates, and how it scales.
In this lesson, we'll use the Transform Palette to rotate, scale, and place objects into a layout where precision is important.
Download and open the curves.svg file in Animator. Begin by selecting the "curve_unit" object, and taking a look at the values that appear in the Transform Palette.
Precision Control in Every Direction
The palette contains the Reference Grid at the top and 3 groups of numerical fields below. The Reference Grid is an important tool which provides a way to change the point of reference for the various transformation values on the selected object. For example, the default reference point is the top left corner of the object's bounding box (a frame around a selected object that represents the smallest rectangle the entire object would fit into).
Notice that the X, Y position coordinates of the object are 0, 0. If you try selecting different Reference Points in the Reference Grid, you will notice that the values will change for the X, Y coordinates, but the overall width and height remain the same.
Select a Reference Point along the bottom row of the Grid, and enter 300 for the Y Position value. The "curve_unit" is now aligned precisely along the bottom of the layout.
Copy and Paste a duplicate of the "curve_unit" object. Before positioning the copy (by default, called "curve_unit_1" in the Treeview), we'll rotate the copy by entering -90 degrees in the Rotation Angle field. Next, we'll scale the copy, but first, make sure that the Lock/Unlock Proportions button is set to "lock". Type 66.666 as a Scale percentage value in either the Width or Height field and hit Enter. The object is scaled to two-thirds the proportions of the original. Now, we're ready to accurately position it against the right edge of the layout and the top edge of the original object.
Before continuing, let's take a closer look at the Reference Grid. The small circle around the upper right Reference Point corresponds to the rotation handle on the selected object's bounding box. This helps us to orient the values in the Transform Palette against an object that has been rotated on the Stage.
For example, the rotation handle on the "curve_unit" copy is now at the upper left of the object. This means that when we want to know the location of the object's bottom right corner point, we should select the bottom left Reference Point in the Reference Grid.
Now that we know that the X and Y coordinates displayed in the Transform Palette correspond to the bottom right corner of the object, we can simply enter the values we want for precise alignment with the upper right corner of the original "curve_unit" object. These values are 200 for the X value and 133.33 for the Y value. (If you want to make sure of this, simply select the "curve_unit" object, select the upper right Reference Point, and take note of the X, Y values in the palette).
If you continue with this process, you will eventually end up with the completed version of the
file as shown at the beginning of this lesson.
|
