Expression Blend and Design : Expression Interactive Designer

Generating key splines from a Path drawn in Blend

xprblog — Tue, 02 Jan 2007 02:35:00 GMT

In Blend you can author keyframes with ease out and ease in interpolation to give your animations acceleration and deceleration: in other words, life. You can also draw a motion path and animate an element along it. A value curve is a graph of the change in a property value over time, and the combination of different value curves for different properties allows fine control over advanced scenarios such as acceleration along a curved trajectory.

The previous post Keyframe easing and key splines explains the string of numbers in a XAML KeySpline attribute such as those generated by Blend’s ease out and ease in settings. In a nutshell, the numbers are one keyframe’s worth of control points on a value curve. You can draw a value curve in Blend using the Pen tool and if you associate that curve with an element, a double property, and scales for the axes, then it’s a simple task to generate a set of keyframes and key splines. There are some scenarios where doing this is more appropriate than using Blend’s timeline so here’s a sample application which will get you started. The sample is unsupported but it is offered in the hope that it will be useful, instructive, or interesting.

Download the ValueCurve2KeySplines source code (Blend Beta 1).

Once you’ve downloaded and unzipped the sample project files, open and test (F5) the application. After building, the message on the artboard will disappear and the scene will display correctly. In the running application you can see three different-colored value curves, each of which targets a different property of the red plus sign-shaped element. When you click the ‘Generate’ button, an animation is generated from each of the value curves and these animations are saved in XAML format into the build folder in a file named Storyboard.xaml. The animations are also inserted into the application and previewed. The animation generated from the value curves included in the sample resembles an object spring-mounted on a surface and set in motion with a twang. If you’d like to know how the value curves and parameters were assembled then you can recreate it with the following procedure.

First, you need to delete the value curves and parameters so you can recreate them. Expand LayoutRoot > Graph > ValueCurves and delete the Path elements named X, Y and Angle. Expand LayoutRoot > LegendBd > [StackPanel] > LegendLB and delete the ValueCurveParameters elements named XParms, YParms and AngleParms. On the artboard you’ll notice that the Legend list box is now empty. Running and clicking ‘Generate’ now will have no effect.

The ‘spring twang’ animation happens over a small area and time period so let’s scale everything up while we’re designing it and then we can set the correct scale later without having to change any curves. Find the TextBlock element LayoutRoot > Graph > Axes > TimeAxis > TimeMax and set the Text property to ‘10’ so that the animation has a duration of ten seconds.

To recreate the value curve which controls the element’s X coordinate, first double-click ValueCurves to activate it; the yellow border confirms the activated state. Click the Pen tool (or press P) and draw a curve like the one in the diagram:

Make the first point with a click-drag toward the top-right of the screen to set the control point in that direction. Click-drag to the right to draw each of the subsequent points which will set horizontal tangents at the same time. In the previous post I mentioned that it is not valid for a control point to fall outside the bounding box of the spline which owns it. But some of the tangents shown above (and likely some of the tangents you will draw) are not perfectly horizontal so the control point on one end of the tangent will be breaking the rule. The ValueCurve2KeySplines sample will silently tolerate such errors up to a configurable limit (by default, 5% of the corresponding side-length of the bounding box) and will correct the control point. Any error greater than this tolerance will still be corrected but will provoke a warning message when the ‘Generate’ button is clicked. If you don’t want any automatic correction to take place then set the Window1.controlPointWarningTolerance member to zero and correct your control points manually until no warning message is shown. You can manipulate the control points individually with ALT and the Direct Selection tool (A). In the object tree, name the Path ‘X’ and set its Stroke to DarkSeaGreen and its Fill to No brush.

Now the value curve needs parameters so you need to create a parameter object which refers by name to the Path element representing the value curve. Make sure the ListBox named LegendLB is visible in the object tree. Click the Asset Library tool (the bottom tool in the Toolbox), click User Controls, and drag ValueCurveParameters out of the library. Be aware that the Asset Library will close as soon as your drag begins, but keep the mouse button pressed and drop the object onto LegendLB in the object tree to create a new ValueCurveParameters item in the ListBox. Name the object ‘XParms’ and then, in the Property Inspector, expand the Miscellaneous category and set the following property values: MaxValue = 350, MinValue = 50, set PathBrush to a SolidColorBrush with the Color DarkSeaGreen, TargetName = ‘Plus’, TargetProperty = ’(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)’, and ValueCurveName = ‘X’. An easy way to determine the TargetProperty and to make sure any necessary property elements exist on the target element is to create a new timeline and animate that property. You can copy the correct property path from the Storyboard.TargetProperty attribute in the XAML. Then you can delete the timeline and the necessary property elements will remain on the element.

For the element’s Y coordinate, draw a similar curve to the first but out of phase with it. Name the curve ‘Y’ and color it Navy with no Fill. Add a second parameter object (named ‘YParms’) to the ListBox and set the following property values: MaxValue = 350, MinValue = 50, PathBrush = ‘Navy’, TargetName = ‘Plus’, TargetProperty = ’(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)’, and ValueCurveName = ‘Y’.

Finally, for the element’s angle, draw a third curve out of phase with the other two. Name the curve ‘Angle’ and color it Orange with no Fill. Add a third parameter object (named ‘AngleParms’) to the ListBox and set the following property values: MaxValue = 30, MinValue = -30, PathBrush = ‘Orange’, TargetName = ‘Plus’, TargetProperty = ’(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)’, and ValueCurveName = ‘Angle’.

The finished application should look similar to this:

Test the animation and make any adjustments to the value curves to get the behavior you want. Essentially the frequency should be increasing while the amplitude is decreasing. When you’re happy, scale the whole animation down. Set TimeMax to ‘1.5’, set the MinValue and MaxValue of the X and Y parameter objects to 220 and 230 respectively, and set the MinValue and MaxValue of the Angle parameter object to -20 and 20 respectively. Now test the animation again. If you want to use the animation in another application then make sure a target element with the correct name and property elements exist and paste the contents of Storyboard.xaml into Window.Resources. You’ll also have to change the xmlns attribute into an x:Key attribute.

For another example set of value curves and parameters, you’ll find a file called Example2.txt in the zip file along with the source code. Replace the ValueCurves and LegendLB element in Window1.xaml with the ones in Example2.txt and give the result a try. It’s an example of an element moving along a circular path with increasing speed.

Happy animating!

Keyframe easing and key splines

xprblog — Sun, 31 Dec 2006 06:41:00 GMT

An animation authored in Blend contains keyframes. The animation defines which element/property to affect and each keyframe defines a key time at which a value should be in effect. The process of animating the property values between successive key times is called interpolation.

Let’s say you’re translating an element from the top of a Grid to the bottom to represent a falling motion. With the element at the top of the screen you drop a keyframe at time 0. Then you move the playhead to time 1 and drag the element to the bottom of the screen. The interpolation between the two screen positions will be linear by default: the element will appear to fall at a steady rate.

If you want the motion to resemble a real-world falling object then you want the element’s speed to be slow at the beginning and gradually speed up towards the end. This kind of interpolation is known as ease out because the element’s position is easing out of its original value on its way to the new value. Similarly there exists an ease in type of interpolation which can either be used alone or combined with ease out. To apply full ease out to the animation you right-click the first keyframe and click Ease Out > 100%.

If you want more control over interpolation then we need to talk about key splines and you’ll need to tweak some XAML. If you followed along with the ease in walkthrough above then switch to XAML view and find the storyboard which contains your animations and key frames. There are two animations: one targeting TranslateTransform.X and one targeting TranslateTransform.Y. Take a look at the key frames in the Y animation. The second keyframe has a KeySpline attribute which is a string containing the coordinates of a pair of points – let’s call them x1,y1 and x2,y2 respectively. The secret to understanding and controlling keyframe interpolation lies with these coordinates and what they represent.

In the sense of the KeySpline attribute, a spline is a curve of value over time (drawn between implied coordinates of 0,0 and 1,1) whose shape is defined by two control points. The KeySpline attribute contains those control points. If you’ve drawn curves with Blend’s Pen tool then you may know such control points as tangents. When you omit the KeySpline attribute, its control points default to the coordinates 0,0 and 1,1. Here’s a visualization of the resulting key spline:

When the control points (shown in red) coincide with the start and end points of the curve, as they do by default, the curve is actually a straight line. This is why, unless you explicitly set ease in or ease out, Blend will give linear interpolation between keyframes. The unit square key spline is scaled to the actual value and time deltas of the keyframe which defines it. Here’s what the key spline looks like when ease out is set to 100%:

The first control point (x1,y1) has moved to 0.5,0. If you now set the ease in value of the second keyframe to 100%, the second control point (x2,y2) moves to 0.5,1 and the resulting visualization looks like this:

To be clear, the KeySpline values x1,y1,x2,y2 for keyframe n correspond to ease out for keyframe n-1 (first control point: x1,y1) and ease in for keyframe n (second control point: x2,y2) respectively. This means that, for a handoff animation, you can still define an ease out for the non-existent keyframe at time 0. When you first build the animation, drop a keyframe at time 0; then right-click it to set ease out; then delete it. The ease out value will be safely stored in the x1,y1 values of the second keyframe’s KeySpline.

The control point coordinates can be set to any pair of double values between 0 and 1. In this example the first control point is at 0.1,0.5 and the second control point is at 0.8,0.33:

Try this key spline out in your application. Replace the contents of the KeySpline attribute on the second keyframe with the control point coordinate string “0.1,0.5,0.8,0.33”. Build and run and see if the resulting motion matches the graph. Remember that the graph is showing an increase in the property which is being animated. In this case the property is TranslateTransform.Y and Y increases down the screen in WPF.

In fact, the control points for a given curve are identical whether the value is increasing or decreasing. But it’s easier to imagine them on a graph with the value axis flipped (so the origin moves to the top-left and positive y is downwards). Here’s an example where the value of keyframe n is less than the value of keyframe n-1 but y1 and y2 have the same positive values as the previous example:

You can use Blend’s Pen tool to draw graphs like the ones shown. If you want more complex value curves than the ones shown here then just draw more segments. Adjust the control points (tangents) so that the interpolation curve between each value is how you want it. Then imagine (or draw) the dotted unit square around each pair of values and use it to call off the control point coordinates in the range 0,0 to 1,1 and build a KeySpline string from them. It’s important that your control points don’t fall outside the dotted rectangle. For a value curve, control point coordinates outside the valid range mean either that the curve has a turning point (a keyframe value is missing) or that time is decreasing somewhere on the curve.

In the next post I’ll share a tool, based on Blend, that you can use to generate double animations from a set of value curves (drawn with the Pen tool) and parameter objects.

Announcing the Microsoft Expression Blend Beta 1

xprblog — Mon, 04 Dec 2006 20:00:00 GMT

Thanks for being patient! The previous CTP of Expression Interactive Designer was back in September. Since then the team has been focused on some major changes to the product ready for today’s announcement of our first beta. A list of all the new features is given below but something you'll notice immediately is that the product’s name has changed from EID to Microsoft Expression Blend. Also, Blend has a new look!

The Blend beta requires the Microsoft .NET Framework 3.0 on Windows XP, as described on the following download page.

Download Microsoft Expression Blend beta

Blend is a tool for creative designers to build rich, interactive user-experiences for Windows users. Customizable controls, animation, data binding, 3D and media can be blended together in the tool without the need to write code.

What's new in the beta?

Enhanced Properties panel UX

Context-sensitive UX makes finding associated properties a snap
Improved UX for event & property triggers
Support for editing almost all WPF properties such as bitmap effects
Built-in search to help you find properties without the need for scrolling
Ability to bind data such as a brush resource to any property using a rich UX
Unique value editors make it easier to set values without leaving the mouse
New editors for collections
A new plug-in model that 3rd-parties can use to add their own custom editors

Redesigned shell

Improved docking and panel management
New icons enhance usability
Darker theme brings focus to the design workspace

Improved artboard

Drag & drop to create elements via a rich asset gallery
Snap to grid and snap to alignment makes it easier to layout your controls
Enhanced context menu allows you to group into layout containers and set common layout properties
Right-click > View XAML allows you to quickly find the associated XAML for an element

Improved resource management & control template capabilities

Resources panel allows you to edit resource values used by your project
Support for dragging & dropping resources between dictionaries to re-factor your project
Built-in set of controls which are designed to be easy to edit and reconfigure

Support for Microsoft Visual Studio editing

Shared project format with Visual Studio allows easier development-designer workflow
Create event handlers in Expression Blend and edit your code in Visual Studio

Found a bug? Report it to us.

Have something to say about the beta? Join the discussion group:

Expression Blend

Expression Blend goes Beta, Big Changes to Expression Design CTP

xprblog — Mon, 04 Dec 2006 19:56:00 GMT

Today we are going public with beta 1 of Expression Blend, and a new CTP for Expression Design. Before you ask – these are the new product names for what previously was known as Expression Interactive Designer and Expression Graphic Designer.

Much more importantly, these new versions are not just about new names. If you have seen the previous evolutions of these Expression applications, a single look will show you that we've been working hard on more than new features:

Expression Blend and Design are the first Expression applications to show off a new user interface design for the entire Expression product line. We want to offer friendlier, easier, more elegant and beautiful tools to enable designers to build great user experiences – and our UX is a big step in this journey.

We can’t wait for you to give our new family a spin and to let us know what you think.

Expression Web Beta 1, EGD and EID Sept. CTPs (target .NET 3.0 RC1)

xprblog — Wed, 06 Sep 2006 20:00:00 GMT

We are pleased to announce that the Beta 1 release of Expression Web (formerly Expression Web Designer) is now available! For more insight into Expression Web Beta 1, please see the Expression Web team blog.

Additionally, September CTPs of Expression Graphic Designer and Expression Interactive Designer are available and target the Release Candidate 1 (RC1) of .NET Framework 3.0.

Found a bug? Report it to us.

Have something to say about the Betas and CTPs? Join a discussion group:

Webcast: Introduction to Microsoft Expression

xprblog — Sat, 26 Aug 2006 02:44:00 GMT

This webcast describes the powerful features and capabilities of Microsoft Expression Graphic Designer, Microsoft Expression Interactive Designer, and Microsoft Expression Web Designer, and includes a 40 minute demonstration of Expression Web Designer.

The first twenty minutes cover concepts of user experience, the .NET 3.0 and WPF (Windows Presentation Foundation) platforms and how they enable the next generation of user experience, and designer and developer collaboration using XAML (Extensible Application Markup Language). The discussion about Expression products and CSS begins around minute 21, and the Expression Web Designer demo begins around minute 27.

http://msevents.microsoft.com/cui/WebCastEventDetails.aspx?EventID=1032306063&EventCategory=5&culture=en-US&CountryCode=US

July CTPs of EGD and EID available - target July CTP of .NET Framework 3.0

xprblog — Fri, 21 Jul 2006 21:40:00 GMT

The July CTPs of Expression Graphic Designer and Expression Interactive Designer are now available. Both of these CTPs target the July CTP of .NET Framework 3.0 (formerly known as WinFX).

Download Expression Graphic Designer July 2006 CTP
Download Expression Interactive Designer July 2006 CTP

For more late-breaking changes in Expression Interactive Designer, please see the Readme.

Found a bug? Report it to us.

Have something to say about the CTPs? Join a discussion group.

June CTPs of EGD and EID now available!

xprblog — Wed, 05 Jul 2006 00:12:00 GMT

After overcoming some obstacles with our publishing tools these past few days, we finally are able to share with you the June 2006 CTPs for both Expression Graphic Designer and Expression Interactive Designer. Our latest CTPs target the Microsoft .NET Framework 3.0 June 2006 CTP (formerly known as WinFX). For more information about the name change of WinFX to .NET Framework 3.0, please read this.

.NET Framework 3.0 June 2006 CTP can be installed on any of the following systems:

Windows XP SP2
Windows Vista June 2006 CTP (build 5456 - limited release)
- Alert! Windows Vista June 2006 CTP includes .NET Framework 3.0. There is no separate installation package required. The standalone .NET Framework 3.0 packages are not supported on Windows Vista.

Those who are using Windows Vista Beta 2—the current public pre-release version of Windows Vista—are strongly encouraged to use our May CTPs to avoid compatibility issues. If you are only installing Expression Graphic Designer on Windows Vista Beta 2 and do not plan to use the XAML Export feature, then you will not encounter any compatibility issues.

Install on Windows Vista Beta 2

Install on Windows XP SP2 or Windows Vista June 2006 CTP (build 5456 - limited release)

Download .NET Framework 3.0 (formerly known as WinFX)
Download Expression Graphic Designer June CTP
Download Expression Interactive Designer June CTP
- Alert! For EID June CTP, you will need to uninstall and reinstall Windows Imaging Components (WIC) before installing EID but after installing .NET Framework 3.0. For WIC installation instructions, see section 2.1 of the .NET Framework 3.0 release notes.

For more late-breaking changes and information in Expression Interactive Designer, please see the Readme.

Found a bug? Report it to us.

Have something to say about the CTPs? Join a discussion group.

Binding media to playback controls

xprblog — Fri, 09 Jun 2006 23:01:00 GMT

Software Test Engineer, Dante Gagne, takes us through a tutorial of how to bind media to playback controls in Expression Interactive Designer.

For more tips and tricks like this, check out Dante's blog.

After you've completed Dante's tutorial, try using Expression Graphic Designer to style your PlayPause button just like the cool new gel buttons in Windows Media Player 11 Beta.

Martin Grayson also has a 3-part tutorial on making Vista-like gel buttons using WPF.

Switch “the look” of your app on the fly

xprblog — Wed, 31 May 2006 20:15:00 GMT

Test Lead Jen Rowe shows you how you can theme your applications using Resource Dictionaries in Expression Interactive Designer. The application can switch the theme at run time by loading and unloading respective resource dictionaries. This allows you to give your apps custom looks or to simply enable users to select their own themes while using your apps.

New CTPs available for Expression Graphic Designer AND Expression Interactive Designer!

xprblog — Tue, 23 May 2006 23:46:00 GMT

We are pleased to present new CTPs of Expression Graphic Designer and Expression Interactive Designer that target Microsoft WinFX Runtime Components Beta 2--the latest release of WinFX. Follow the links below to start downloading the May CTPs... Remember...(read more)

New Training Videos Available!

xprblog — Fri, 31 Mar 2006 01:44:00 GMT

Just a quick post to let you know 5 new training videos are now available for viewing and download at http://www.microsoft.com/products/expression/en/demos.mspx. Simply click the Interactive Designer tab near the bottom of the page, and then click one of the video links under Training Videos.

Enjoy!

Dante's Integer-to-Roman-Numeral ValueConverter

xprblog — Fri, 24 Mar 2006 00:27:00 GMT

Dante Gagne, a Software Design Engineer in Test in the Expression Interactive Designer team, has published a blog entry demonstrating how to write a ValueConverter (a great utility for data binding) and he also explains how to use it in Expression Interactive Designer.

[1] http://blogs.msdn.com/danteg/archive/2006/03/22/558450.aspx

ZAM 3D March CTP Now Available For Download!

xprblog — Sat, 18 Mar 2006 04:20:00 GMT

ZAM 3D ™ from Electric Rain is a new 3D XAML Tool for Microsoft Windows Vista application development, and the March CTP is available for download [1].

ZAM 3D fits into the designer-side workflow by complementing Microsoft Expression Interactive Designer. The idea is that a designer uses ZAM 3D to easily create 3D interface elements, models, controls, styles or layouts. Then the designer exports the 3D assets to XAML markup with a single click without any need to write, or even understand, the complex markup that goes into building a WPF 3D scene. Now the 3D assets are easily added to an Expression Interactive Designer project using the Project > Add Item... command.

[1] http://erain.com/Products/ZAM3D/DefaultPDC.asp

Troubleshooting Issues Installing WPF and/or Expression Interactive Designer

xprblog — Mon, 13 Mar 2006 23:35:00 GMT

Tim Sneath has written an excellent blog post [1] about what to do if you're having any issues installing WPF or EID.

[1] http://blogs.msdn.com/tims/archive/2006/03/13/550600.aspx