Expression Blend and Design

The team blog of the Expression Blend and Design products.

December, 2006

  • Expression Blend and Design

    Keyframe easing and key splines

    • 4 Comments

    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.

     

  • Expression Blend and Design

    Two new websites from X-Coders

    • 1 Comments

    The company X-Coders has launched two new websites - ExpressionBlend.com and ResourceDictionary.com - each carrying information, blogs, videos, forums and downloads related to Expression Blend.

    The videos are great - we recommend you go and check them out.

  • Expression Blend and Design

    Blend: making the HyperBar sample data-bound

    • 2 Comments

    People have been wondering how to do this so I thought I’d write up an explanation.

    The HyperBar sample which ships with Blend Beta 1 has a fixed set of eleven images in it. But what if you want to combine the HyperBar effects with the flexibility of binding to data – be it XML data or CLR object data? The solution is to draw out a ListBox and bind your data to that. Then you edit the ListBox’s control template and place a HyperGrid panel in there as the items host. It’s the HyperGrid panel that does all the magic in the HyperBar sample. Here are the steps you’ll need to follow to get this to work, and then links to some files so you can study/copy the code in there.

    • Open the HyperBar sample and remove all the elements above the HyperBar – Distribution, Zoom, Transparency, Reflection, and Function Preview. After we’ve moved the HyperGrid panel into a control template it’ll be less straightforward to bind it to these controls so for the purposes of this walkthrough we’ll just eliminate that problem by removing the controls.
    • Replace the HyperGrid with a SimpleListBox.
    • Add the data.xml file (link below) to your project and create a new XML data source pointing to it.
    • Data bind the SimpleListBox’s ItemsSource to the Images [Array] node of the XML data source. If you have any issues creating a data template at this point then just perform the binding without using the Define Data Template button. Then edit the ItemTemplate later and add an Image whose Source is bound to XPath=@Source.
    • Edit a copy of the control template of the SimpleListBox and replace the StackPanel with a HyperGrid panel (use the Asset Library and the Custom Controls tab).
    • Set the HyperGrid’s IsItemsHost property to true.
    • Edit the ListBox’s ItemContainerStyle (Object > Edit Other Styles > Edit ItemContainerStyle > Edit Copy) and here do two things. First (and you’ll need to drop into XAML view for this) add a Setter whose Property is "Grid.Column" and whose value is "{Binding Mode=OneWay, XPath=@GridColumn}". Second, edit the style’s template and wrap what’s there in a Viewbox (tip: select what’s there, Cut it, add a Viewbox, activate the Viewbox, and Paste).
    • Finally, some code. Edit HyperGrid.cs and find the Update() method and add the following code to it:

     // Clear the ColumnDefinitions and re-add one per child.

    this.ColumnDefinitions.Clear();

    foreach (UIElement uie in InternalChildren)

    {

        this.ColumnDefinitions.Add(new ColumnDefinition());

    }

    • Add the following method to the code file:

    protected override void OnInitialized(EventArgs e)

    {

        base.OnInitialized(e);

        Update(new DependencyPropertyChangedEventArgs());

    }

    Now you’re done. Build and run. If you have any problems then you can study the following files to see if they differ from what you have. One final point is that the image files are still embedded in the project and the data.xaml refers to them as embedded resources. An exercise for the reader is to store these in a folder which the .exe reads at runtime.

  • Expression Blend and Design

    Expression Design -- New name, new UI

    • 2 Comments

    Expression Design is a vector based graphics design tool that is part of Expression Studio.   It is targeted at graphic designers who need to build visual assets for new WPF (Windows Presentation Foundation) applications.  The goal of Exrpession Design is to bring artists into the process of building great user experiences.   We've been getting feedback on CTPs for a while now under the codenames of Acrylic and Expression Graphic Designer.  Now we have a shiny new name and a brand new interface.

    New UI

    Back in 2005, we released a preview of Acrylic, a graphics design program based off the venerable vector tool Creature House Expression.  As the months passed, we realized that the UI just wasn’t clicking with our audience.  The whole Expression suite is about bringing elegant and beautiful design to the process of application development.   So why not create a UI that embodied our team’s core principles?

    After many moons (and numerous late night dinners by our rock star team), we now have a stylish UI running in WPF on top of our C++ artboard.  Stylistically, the UI matches Expression Blend so you’ll be comfortable in both applications.  For now it comes in a soulful dark gray, but there is also a light theme in the works for all those folks that like a dash of sunshine in their lives. We still have quite a bit of polishing to do, but the foundation is in place.   This is mad scientist stuff.  I like working with mad scientists.

    Designers on the team

    I’m a big believer that a good product is a collection of a lot of little things done right. This only happens when you ask good questions and get a ton of rapid feedback from your actual users.   Taking this feedback philosophy to the extreme, we hired some very talented graphic designers to be part of our team.  They slogged through our daily builds and attended the feature design meetings.   When stupid decisions were made, they yelled.  Along the way, the programmers listened and fixed hundreds of subtle workflow issues.    

    Expression Design has a long life ahead of it and we wanted designers to be part of the development process (and culture!) from the very beginning.

    All those little improvements

    This release has dozens of small workflow improvements that add up to a much nicer experience.  You can find the big list here:http://www.microsoft.com/products/expression/en/expression-design/free-trial-faq.mspx

    Here are some of my personal favorites.  

    ·         Fewer palettes: I’m constantly switching between various applications, which means inevitable resizing of the app. I must admit I tend to get a bit retentive when it comes to keeping my palettes so I waste a surprising amount of time lining the half dozen palettes straight again.  With fewer palettes that you can dock with a click of a button, this isn’t an issue any longer.

    ·         The color dropper on the color palette:  When you select this color dropper you can pick a color anywhere on the screen, even if it is outside the current application.  Quite the time saver.

    ·         Pen tool:  The Bezier pen tool is a subtle instrument.  Most designers I know play the modifier keys like a piano when they are drawing vector shapes.  Half the time, when you ask “What steps are you performing?” they honestly can’t say.  It is all muscle memory stored up from years in the pit of production.  But if you put change how the tool works, it is immediately obvious.  The feel is wrong.  We spent a lot of time getting the feel of our pen tool right.

    ·         Updated XAML exporter:  This is really the heart of why you would use Expression Design right now.  It is currently the best way to get complex graphics into Expression Blend.  

    You can grab the December CTP of Expression Design here: http://www.microsoft.com/products/expression/en/expression-design/free-trial.mspx 

    Take care
    Danc.

  • Expression Blend and Design

    Expression Blend -- What Is That?

    • 4 Comments

    Expression Blend is an authoring system for professional designers to build user experiences that target the .NET 3.0 platform, and more specifically, WPF, or Windows Presentation Foundation.

    WPF provides the platform to bring rich, animated, skin-able, UX envelope-pushing applications to the desktop. Applications that blend content, media and user interface into real user experiences. WPF provides sophisticated vector graphics and blurs the distinction between user interface and content. You can create applications with custom looks, and you’ll have more flexibility and ease than ever before.  You are able to animate pretty much anything, and you can use data binding to create user interfaces from data. You can integrate images, video and 3D, and you get a set of text layout features well beyond what you would expect from a user interface platform. And WPF scales: Blend itself is not only entirely written in managed code, but it also is a WPF application head to toe.

    We strongly believe that designers will have a dominant role in creating these envelope-pushing user experiences we are targeting with WPF. Alas, WPF is an SDK, a software development kit, and not particularly designer friendly. And this is where Expression Blend comes into play. Blend is a visual design tool for WPF, providing a designer-friendly look at all the power of WPF. You can draw and animate like in media authoring tools, but you also have access to components, controls and layout, data binding and all the other features of WPF that make user experiences come alive.

    Rich client applications tend to have a lot of code and functionality. Because code is such an essential part of application development, we believe that Blend will often be used in teams of developers and designers. Blend plays very nicely in environments where design and coding are important – collaboration and interchange with Visual Studio is a big part of the solution.

    If you are developing or designing WPF-based applications, we hope the Expression Blend will blend right in and allow your designers to take much more control and responsibility in the overall process!

  • Expression Blend and Design

    Announcing the Microsoft Expression Blend Beta 1

    • 6 Comments

    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.


    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 and Design

    Expression Blend goes Beta, Big Changes to Expression Design CTP

    • 2 Comments

    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.

Page 1 of 1 (7 items)