Book cover of Microsoft® Expression Blend® 4 Step by StepWe’re pleased to announce the new Microsoft Press book Microsoft Expression Blend 4 Step by Step, by Elena Kosinska and Chris Leeds (ISBN 9780735639010; 432 pages). Expression Blend is an incredibly powerful tool that, due to the ever-increasing popularity of XAML, in Silverlight and Windows Presentation Foundation (WPF) programming, is becoming a must-know product for designers and developers. The authors walk you through the Expression Blend interface, and the concepts and goals involved in application design using Expression Blend, Sketchflow, and Expression Design. You’ll find the procedures you need to know to create graphics, animations, and customized interfaces in Expression Blend using the tried and tested Step by Step format, where you start accomplishing real work as soon as possible.

This excerpt from Chapter 5, “Animations and Transformations,” will give you a feel for the detailed level of information you’ll find in this book.

Chapter 5 - Animations and Transformations

Transformations and animations are two great features in Microsoft Expression Blend 4 that allow you to create amazing effects in your user interface These tools provide powerful capabilities that enable you to move, resize, scale, rotate, and transform objects in both simple and complex ways Transformations modify the rendering of an element while maintaining its original values Animations serve to make your applications more interesting, natural, and lively Transformations and animations can work everywhere—in games as well as in educational, developmental, and business applications

Transformation

In Chapter 3, “Designing an Interface,” you saw how to draw elements and move and reposition them on the Artboard Transformation opens up a new world of expressive possibilities In this chapter, you’ll discover transformations such as scaling, rotating, skewing, translating, flipping, and more Important Before you can complete the exercises in this chapter, you need to install the downloadable practice files to their default location For more information about practice files, see the instructions at the beginning of this book

Resizing (Not a Transformation)

Resizing is the simplest way to change the size of an object—you just change its Width and Height properties. You might have noticed that when you select an element you can directly change its size on the Artboard. It would seem logical that resizing is a type of transformation; however, that’s not the case. Resizing changes only the dimensions of the object (its Width and Height) and doesn’t apply a transformation.

Note Use the CH5 sample project from the CH5 folder located in the \Sample Projects folder.

Resizing objects

1. Click Open Project/Solution on the File menu. The Open Project dialog box appears. Click Browse, browse to the CH5 folder in the practice files for this book, and then double-click the CH5.sln file.

Solution files always have an .sln extension.

2. Click the Project panel for the solution. In the folder list for the CH5 project, doubleclick the MainPage.xaml file.

3. In the Objects And Timeline panel, click LayoutRoot. You’ll see two visible objects: a simple bush and a complex tank.

clip_image002

The document’s visual tree also includes one hidden complex element called sand.

4. Select the bush object with the Selection tool, and then click the object on the Artboard. On the Artboard, point to one of the corner handles or midpoint handles of the bush object until the pointer becomes a double-ended arrow, and then drag the pointer to change the size of the object until its width is 150 and its height is 120.

Tip You can also change an object’s size by using the Layout category in the Properties panel. You do so by entering values in the Width or Height field.

Tip You can hold down the Shift key to constrain the proportions of the object when resizing it. Holding down the Alt key maintains the object’s center point.

You’ve now seen how to resize an object; but if resizing isn’t a transformation, how does a real transformation work? Expression Blend applies transformations by using specific transform properties. To transform a user interface element, you need to specify which transformation Expression Blend should use by setting the RenderTransform property.

Transformations

Expression Blend provides the following two-dimensional transformations:

RotateTransform Rotates an element by the specified angle

ScaleTransform Scales an element by the specified ScaleX and ScaleY values

SkewTransform Skews an element by the specified AngleX and AngleY values

TranslateTransform Moves an element by the specified X and Y values

Microsoft Silverlight 4, for example, includes a new feature, a class called CompositeTransform, which lets you easily apply multiple transformations such as scale, rotate, skew, or translate to an object. For example, to simply scale an object, you use the CompositeTransform to change its size based on a multiple of its initial X and Y values.

clip_image004

Scale Transformation

Scaling is another way to change the size of an object.

Applying a scale transformation

1. Select the bush object.

2. In the Properties panel, under the Transform category, click the Scale tab.

clip_image006

3. When the numerical adjust cursor appears near the X property field, drag to scroll

through the values. You’ll see the changes reflected on the Artboard. Set both the

ScaleX and ScaleY properties to 0.8. Notice that the Width and Height properties

don’t change. You can also see this in the Layout category in the Properties panel.

clip_image008

Rotate Transformation

You can easily rotate your object through a full 360 degrees (from -180 degrees to +180

degrees) in two ways: by manipulating the object directly on the Artboard or by using the

Rotate tab to rotate the object.

Applying a rotate transformation

1. Select the bush object.

2. In the Properties panel, under Transform, click the Rotate tab.

clip_image010

3. Rotate the object to a 30-degree angle by dragging the pointer on the small circular

diagram.

clip_image012

Skew Transformation

Another type of transformation, skewing, allows you to distort an object by a specified angle

from an x or y axis. It’s also possible to use skewing to simulate three-dimensional effects.

Applying a skew transformation

1. Select the bush object.

2. In the Properties panel, under Transform, click the Skew tab.

clip_image014

3. When the numerical adjust cursor appears near the Y property field, scroll through the

values. Set the Skew-Y property to -30. Notice that it’s possible to set negative values.

Look at the result on the Artboard.

clip_image016

Translate Transformation

Translation is another interesting transformation that you can apply to your objects. A translate

transformation moves an object in a two-dimensional plane from one position to another.

The result is that the object is offset from its original position.

Applying a translate transformation

1. Select the bush object.

2. In the Properties panel, under Transform, click the first tab, which is the Translate tab.

clip_image018

3. When the numerical adjust cursor appears near the Y property field, drag to scroll

through the values. Set the Translate-X property to -30. Look at the result on the

Artboard. Positive Translate-X values cause the object to move right on the screen,

and negative values move it to the left. In the same way, positive Translate-Y values

cause the object to move down the screen, and negative values move it up the screen.

clip_image020

Tip If you don’t like the result of a transformation, you can reset any value by clicking the

Advanced Options icon, which appears beside the X, Y, or Angle field as a small white box,

and then clicking Reset. You can also reset all properties by clicking the Advanced Options

icon beside the RenderTransform label and then clicking Reset.

Center Point Transformation

The fifth tab of the Transform category helps you adjust a center point for other transformations.

The center point is the fixed point around which an object rotates. By default, an object’s

center point is located at the object’s center, but sometimes you need to rotate it in a

different way.

Altering the center point

1. Select the second cartoon object (tank) by clicking on it in the Objects And Timeline

panel. On the Artboard, Expression Blend marks the object’s center point with a small

white circle.

clip_image022

2. Point to one of the corner handles of the tank object’s bounding box until the pointer

becomes a rotation handle, and then, while holding down the Shift key, drag the

handle to rotate the tank to a 30-degree angle. As you can see, it looks like the tank

rotates around the muzzle, which is not the most natural rotation for a tank.

clip_image024

3. Press Ctrl+Z to undo the last rotation operation. In the Properties panel, under

Transform, click the Center Point tab.

clip_image026

4. Set the Center-X property to 0.5 and the Center-Y property to 0.7, which should move

the center point to roughly the center of the tank object’s turret.

5. Use the same technique as in step 2 to rotate the tank to a 30-degree angle. Do you

see the difference? Now the center point is located at the center of the tank object’s

mass.

clip_image028