Transformations overview
You can easily modify both vector objects and text objects in Microsoft Expression Blend by repositioning, resizing, translating, scaling, rotating, skewing, flipping, and changing the center point of the objects. You can modify objects by making changes on the artboard or by changing the properties under the Layout and Transform categories of the Properties panel. In addition, you can use the Brush Transform tool to modify only the brush properties of your text and vector objects.
Modifying objects freely on the artboard
When you use the Selection .png "Cc294973.2ff91340-477e-4efa-a0f7-af20851e4daa(en-us,Expression.10).png")
tool in the Toolbox to select an object on the artboard, Expression Blend displays a bounding box around the object, with handles that you can use to modify the object. You can also select more than one object at a time by holding the CTRL key, and the bounding box will appear around all of the objects in the selection. The following are quick tips for using handles, together with images that demonstrate what an object might resemble before and after you apply a transformation to it.
Modification |
Before and after |
|---|---|
Reposition Moves an object along the X or Y or Z (three-dimensional objects only) axis. To reposition an object, move your pointer over the object until the pointer changes to an arrow with a smaller four-directional arrow Repositioning an object changes the object's properties under Layout in the Properties panel. Repositioning changes just the initial position of the object. Repositioning does not apply a transform to the object unless you are modifying your object in a trigger or an animation timeline, in which case repositioning changes the properties in the Translate |
Repositioning an object on the artboard .png "Cc294973.c7c8c2bc-c934-4dd5-a121-94d4ca82f294(en-us,Expression.10).png") |
Resize Changes the height, width, and depth (three-dimensional objects only) of an object. To resize an object, move your pointer over the corner handles or the midpoint handles of an object until the pointer becomes a double-ended arrow ( Resizing an object changes the object's properties under Layout in the Properties panel. Resizing changes just the initial size of the object. Resizing does not apply a transform to the object unless you are modifying your object in a trigger or an animation timeline, in which case resizing changes the properties in the Scale |
Resizing an object on the artboard .png "Cc294973.1bf7361c-1d19-47e0-981b-222d7a8d69d4(en-us,Expression.10).png") |
Rotate Rotates an object around its center point. To rotate an object, move your pointer over the corner handles of the object until the pointer becomes a rotation handle Rotating an object changes the object's properties in the Rotate |
Rotating an object on the artboard .png "Cc294973.0ec39880-288d-4083-90f0-26b05c094977(en-us,Expression.10).png") |
Skew Skews (shears) an object along the X or Y or Z (three-dimensional objects only) axis. To skew an object, move your pointer over the midpoint handles of an object until the pointer becomes a divided double-ended arrow Skewing an object changes the object's properties in the Skew |
Skewing an object on the artboard .png "Cc294973.b5b43b8b-dd44-4d42-a0d2-f7fab35e6f33(en-us,Expression.10).png") |
Flip Flips an object along the X or Y or Z (three-dimensional objects only) axis. To flip an object, move your pointer over the corner handles or the midpoint handles of an object until the pointer becomes a double-ended arrow ( Flipping an object gives you the same results as selecting the buttons in the Flip |
Flipping an object on the artboard .png "Cc294973.8bfb0802-a741-429c-9608-03d706a3328c(en-us,Expression.10).png") |
.png "Cc294973.eff911a7-b891-4315-a86c-cc4cd088e647(en-us,Expression.10).png")
, and then drag the pointer to move the object. Hold the SHIFT key to constrain the movement to the X or the Y plane as you reposition it..png "Cc294973.962807da-746d-41bd-878c-0f89500f3907(en-us,Expression.10).png")
tab under Transform in the Properties panel..png "Cc294973.5b735d0c-fdc1-4d8b-a592-0e762cc7c635(en-us,Expression.10).png")
, .png "Cc294973.b1472e4f-1959-485d-901f-df5583a77bcb(en-us,Expression.10).png")
, .png "Cc294973.ec88bf27-dad4-4869-9146-0c9647c29cdc(en-us,Expression.10).png")
, or .png "Cc294973.7d350cd4-6d4f-40bc-9d04-d46d2d54ebee(en-us,Expression.10).png")
), and then drag the pointer to change the object's size. Hold down the SHIFT key to constrain the proportions of the object as you resize it. Hold down the ALT key to maintain the center point..png "Cc294973.7a93944e-a7f5-4607-babd-768bb5f56185(en-us,Expression.10).png")
tab under Transform in the Properties panel..png "Cc294973.888cbf6b-c442-424d-977d-61d942703c4a(en-us,Expression.10).png")
, and then drag the pointer to rotate the object. Hold down the SHIFT key as you rotate the object to rotate it in 15-degree increments. The position of the center point affects how the object is rotated. You can move the center point of the object by moving your pointer over the handle in the center of the object until the pointer becomes a four-directional arrow .png "Cc294973.9003164f-1dd4-4a3b-8a4c-21a70d4b3ffb(en-us,Expression.10).png")
, and then dragging the pointer. Moving the center point changes the properties in the Center Point .png "Cc294973.49772b0c-095e-450b-967e-75dc1858966f(en-us,Expression.10).png")
tab under Transform in the Properties panel..png "Cc294973.321b430b-5c8e-47dc-93f8-0e85ac32cca5(en-us,Expression.10).png")
tab under Transform in the Properties panel. Rotating applies a transform to the object..png "Cc294973.2be41f49-8a61-4966-bf08-598f4253b610(en-us,Expression.10).png")
, and then drag the pointer to skew, or shear, the object. Hold the ALT key to maintain the position of the center point (instead of maintaining the position of the opposite corner or edge)..png "Cc294973.90c478da-1e6b-4b59-8322-445053058a6d(en-us,Expression.10).png")
tab under Transform in the Properties panel. Skewing applies a transform to the object..gif "Cc294973.7e183f1f-37d8-4dcb-980c-19a5d61ca087(en-us,Expression.10).gif")
Back to top
Modifying objects by setting specific properties
You can modify objects with precision by entering specific values for the properties under Layout and Transform in the Properties panel. By using the Properties panel, you can easily control the details of your objects, such as their initial height, width, alignment, and margins, in addition to controlling transformations such as rotation, skew angle, flip angle, scale values, translation values, and center point. For information about how to set specific transformation properties, see the "How to" topics that are listed in Transformations.
Note
Most of the properties under Layout and Transform in the Properties panel use the Expression Blend number editor. The number editor is activated by moving your pointer over the property's text box, and then clicking and dragging when the numeric adjust .png "Cc294973.1ac1b6df-d5d6-4ad9-aba5-0712dc9a9036(en-us,Expression.10).png")
cursor appears so that you can scroll through values.
Back to top
Modifying text objects
You can apply the same modifications to text objects that you can apply to vector objects.
Modification applied to a text object
.png "Cc294973.f98cfe86-514a-42a0-b31d-57fa7e00e602(en-us,Expression.10).png")
Back to top
Transforming objects
A transform defines how to map points from one coordinate space to another coordinate space. For example, if you translate an object, the transformation that is applied to the object moves the object from the initial X, Y, and Z (three-dimensional objects only) coordinates to the destination coordinates. If you scale an object, the transformation that is applied to the object resizes the object based upon a percentage of the initial X, Y, and Z (three-dimensional objects only) values.
You can transform objects by entering specific values under Transform in the Properties panel, or by modifying the center point, rotation, skew angle, or flip angle of an object on the artboard. Transformations are automatically applied when modifying an object in an animation timeline or a trigger, even if you are repositioning or resizing the object on the artboard. This preserves the initial values of an object.
Transformation properties come in two categories:
- RenderTransform The transformation is applied after the layout pass is complete. Using the Selection tool to transform an object on the artboard modifies the RenderTransform properties.
Note
Using the RenderTransform properties is the ideal way to perform transformations on objects because of better application performance.
- LayoutTransform The transformation is applied in memory during layout, before the application is rendered on screen. Use the LayoutTransform properties when you need a parent element to adjust to the transformation applied to a child element.
Back to top
Transforming the brushes that are applied to an object
To transform the fill, stroke, opacity mask, or other brush that is applied to an object, select the brush property in the Properties panel, and then select the Brush Transform .png "Cc294973.8dc54a0d-02cc-44cd-b802-5a78309f4503(en-us,Expression.10).png")
tool in the Toolbox. A brush transform arrow appears on the artboard that you can modify with your pointer. If you are using a gradient brush, the endpoints of the transform arrow correspond to the gradient stops at either end of the color bar. You can change the behavior of the brush transform tool in the following ways:
Hold the SHIFT key when dragging an endpoint to constrain the movement along the straight line between the endpoints.
Hold the SHIFT key when moving the entire arrow to constrain the movement to the X or the Y plane.
Hold the SHIFT key when rotating an endpoint to snap every 15 degrees.
Hold the ALT key when dragging an endpoint to move both endpoints at the same time, maintaining the position of the center point.
The following images demonstrate the appearance of a rectangle object after various transformations are applied to the gradient brush of the Fill property.
Transformations applied to the fill of a rectangle: linear gradient brush
.png "Cc294973.ddadfdb4-f9f5-4239-8e56-d04014592af4(en-us,Expression.10).png")
Transformations applied to the fill of a rectangle: radial gradient brush
.png "Cc294973.06d84067-19a1-4699-af39-18d0b11679a0(en-us,Expression.10).png")
You can optionally set the properties that appear when you click the Options button under Brushes in the Properties panel. In the preceding image, the Pad option is selected. If you selected the Reflect or Repeat option, and then made the transform arrow shorter than the object, you would see a corrugated effect.
You can transform brush types other than gradient brushes. For more information about brush transforms, see the "Brushes" section in the Appearance overview and Transform a gradient or tile brush.
Back to top
Clipping
Sometimes, when you transform an object, parts of the object will be clipped (that is, parts will disappear outside of the bounding box). You can fix clipping problems in the following ways:
Deselect the checkbox for the ClipToBounds property under Appearance in the Properties panel.
Use the properties in the LayoutTransform category instead of the RenderTransform under Transform in the Properties panel. This is particularly useful when transforming a visual brush.
Modify your object in the default timeline using the properties under Layout in the Properties panel before applying transformations or modifying the object in an animation timeline or trigger. This will resize and reposition the bounding box before transformations are applied.
Back to top