Element Transformations

Learn to use Scale, Rotate, Skew and 2.5D Transformations

A Transformation defines how to map points from one coordinate space to another coordinate space. Transformations allow you to modify the rendering an element while maintaining original values. Like most objects in Silverlight, Transformations are easily animated and provide a base for most interactive interfaces.

In this tutorial, we will reuse the emoticon from the Drawing tutorial to experiment with the different type of Transformations available in Expression Blend and Silverlight.

Tools Time Downloads
Expression Blend Silverlight 15 minutes
15 minutes
Word (.docx) Word
Acrobat (.pdf) PDF

01 Start with a Smile

Open the BasicDrawing project from the last tutorial. You can also download a copy of the project here, if you don’t have one available. We’ll use the emoticon drawing as an element to experiment with Transformations.

02 Grab and Name the Face

Select the head Ellipse, rightEye, leftEye and the mouth Path by clicking and holding the Shift key in the Objects panel or by drawing a rectangle around the elements using the Selection Tool (V). Right-click on the grouped elements and select Group Into -> Grid. Name the Grid face.

03 Resize Elements

When you resize elements on the Artboard by dragging selection points you are modifying the actual Height and Widths of the elements. This is the same as changing the Width and Height properties in the Layout Section on the Properties panel. Resize the emoticon to fit in the upper left corner. Once you resize the elements be sure to resize the grids to make them easier to work with.

04 Scale Transformation

Select the face Grid, use Copy and Paste to create another emoticon. Rename the newly created face_copy to faceScale and position it to the right of the original emoticon. On the Properties panel, find the Transform Section and click the Scale tab. Change X to 2 and Y to 0.8.

05 Rotate Transformation

Copy and Paste another face, rename to faceRotate and position below the original. Place the mouse on a corner handle of the Selection box and slowly move away from the corner until the icon becomes a curved two-headed arrow. Click and drag to rotate the emoticon. This is the same as changing the Angle on the Rotate tab in the Transform Section.

06 Change the Center Point

When applying the previous rotation, you may have noticed that the Center Point of the Transformation defaults to 0.5,0.5 or the horizontal and vertical center of the element. Select the mouth Path on faceRotate and drag the small white circle, found in the center, to the upper right corner of the mouth. Now rotate the mouth and notice it pivot on the new location of the circle. The Center Point can also be modified on the Center Point tab in the Transform Section.

07 Skew Transformation

Copy and Paste another face, rename to faceSkew and position it to the right of faceRotate. Place the mouse on the top center handle of the Selection box and slowly move away until the icon becomes a forward slash flanked by arrows. Click and drag to Skew the emoticon. This is the same as changing the X and Y properties on the Skew tab in the Transform Section.

08 PlaneProjection Transformation

Copy and Paste another face, rename to faceProjection and position it to the right of faceSkew. Find the Projection Tabs in the Transform section. A PlaneProjection Transformation allows you modify the X, Y and Z projection properties of an element. Its not true 3D, but 2.5D sometimes referred to as "Postcards in Space". You can set the X, Y and Z properties directly or use the projection ball found on the Rotation tab. Copy and modify a few emoticons to get a feel for how the Transformation works.

» Next Step

With an understanding of Transformations we can begin to make elements move, let's Get Started with Animation

To continue learning about Transformations in Expression Blend read this Moving and transforming objects article on the Expression Community site.