The team blog of the Expression Blend and Design
In the previous post, we starting glancing at the new features in Expression Blend 3 + SketchFlow. In this post, let’s continue our overview of new features by looking at our Data, Silverlight, TFS Support, Animation, and Text improvements.
General Data-Related Improvements Expression Blend 3 introduces a number of improvements to make it easier for you to create applications that rely heavily on data. You have the ability to create data bindings by simply dragging and dropping data from your Data panel and onto your Timeline, and the Data panel can also be used to create master/detail scenarios.
This is what our Data panel looks like:
Some other improvements along the lines are better support for working with the DataGrid control, support for binding to a data context, and you now have the ability to define hierarchical collections of sample data that enable you to prototype data-connected applications.
Silverlight Related Improvements All of the features I’ve described in this and the earlier post worked fairly consistently in both WPF and Silverlight. There are a handful of features that are designed to make working with Silverlight 3 better, so let’s look at those features now.
First on this list is our actual support for opening and creating Silverlight 3-based projects. If you attempt to open a project created for Silverlight 2, Blend 3 will automatically prompt you to upgrade. When you want to create Silverlight 3 applications, we now provide support for associating them with a Web Site:
You can learn a bit more about our support for Web Sites in the following blog post: Thinking Outside the XAP – Blend 3 and Support for Web Sites.
One of the most-talked about features of Silverlight 3 is the ability for you to take your applications out-of- browser and have them work like a traditional client app. Blend makes it easy for you to specify a standard Silverlight 3 application as one that can be installed locally on a user’s machine.
Blend 3 also allows you to take advantage of another new Silverlight 3 feature where your projects have the ability to cache commonly loaded DLLs on a server so that users only download what they need initially and use the browser’s cache to not re-download components that may already have been downloaded.
TFS Support A common request we have heard from many of you is to have Expression Blend work better with projects integrated with source control. Expression Blend 3 provides support for TFS where we support, within the Blend UI, common TFS operations such as checking-in, checking-out, and more.
Animation In previous versions of Expression Blend, you were not always able to animate all properties a particular object exposed. In Blend 3, we support far more properties than before, and we also support creating animations between resources.
A really cool feature we added is the ability for you to make your animations more life-like with just one click of the mouse:
You can easily apply predefined easing functions such as Cubic, Bounce, Circle, and more to individual keyframes in an animation.
Improved Text Features Expression Blend 3 extends upon the font embedding and subsetting we started in Blend 2 SP1, and we have introduced a newly designed Font Manager that makes embedding and subsetting fonts much easier:
Ok, this seems like a good place to stop right now. There are actually more features that we haven’t discussed yet, so let’s save the remaining features for yet another post.
Cheers! Kirupa :)
Originally it was the rather witty 'Flickr Browsr', although now an 'e' has crept back in to 'Browser'!
The Flicker Browser sample application which features in the recent Channel 9 video  is available for download from Amir Khella's blog  so please feel free to check it out.
You will need to get a free Flickr API key of your own and paste it in the file called FlickrKey.txt in order for the sample to run correctly. You can get a key from http://www.flickr.com/services/api/key.gne.
Thanks very much to Amir Khella (Program Manager on Expression) and Peter Blois (Software Design Engineer on Expression) for collaborating to produce this sample and showing great developer-designer workflow in the process.
Previously on the blog I’ve explained how a KeySpline can be used to do animation easing. I also demonstrated a tool for converting an animation curve (in this case a Path drawn in Blend) into an actual animation.
This time let’s look at the new KeySpline editor in Blend 2 and walk through an example of how to visualize and edit your easing graphically. If you want to follow along, create a new project (WPF or Silverlight) and draw a red-filled circular Ellipse at the top of the page to serve as our falling object. Create a new Storyboard, move the playhead to time 1 and move the Ellipse to the bottom of the page and change its Fill to gray. If you preview the Storyboard now, or build and run, you’ll see the ‘ball’ falls at a steady rate and changes color at a steady rate. Now, what if we want the ball to look like it’s falling under gravity (so, speeding up as it falls) and cooling down from red-hot back to gray (so, cools quickly at first, then more slowly).
In Expression Blend 2 you can actually select a keyframe and edit its KeySpline. The KeySpline is the thing that determines how the animated property changes between the previous keyframe and the keyframe you selected. You can think of each keyframe as being a point on a curve. Each keyframe is connected to the one before it by a segment of this curve. So selecting a keyframe then editing its KeySpline is actually editing the shape of the curve between the selected keyframe and the keyframe before that. Even the first keyframe has a curve going from time 0 to the keyframe (a special case of this is when the first keyframe is at time 0, in which case that curve has no size so editing it will have no effect).
Let’s see how to edit the KeySpline to get the acceleration and cooling behavior we want. With the Storyboard still open, go to the object tree and expand your ellipse. Now select the keyframe icon on the RenderTransform row by clicking it once:
In the property inspector you’ll see an Easing category inside which is the KeySpline editor. It’s currently a straight line but you can drag the two yellow control point handles around to change that, or use the number editors below to edit the coordinate values more precisely. Make the KeySpline look like the picture below.
Across the top of the KeySpline editor is a little graphic that serves as a reminder for where your selected keyframe lives on the curve you’re editing. I’ve put a red circle around the gray graphic representing your selected keyframe. Remember, the selected keyframe is the one at the end of the curve segment you’re editing. The previous keyframe (or the value at time 0 if you’ve selected the first keyframe) is represented by the lighter keyframe icon graphic at the top-left. So this curve is showing that the animation from the value at time 0 to the value of your selected keyframe makes very little progress in the first half of its duration but then makes up for that towards the end by changing the value very rapidly. Imagine this behavior with respect to the position of a falling ball and then preview your Storyboard, or build and run, to see the new curve in action.
For the cooling effect, you want a differently shaped curve. This time you’re animating from Red to Gray but you want to progress along this animation rapidly at first then slowing down. So select the keyframe on the Fill row and make its KeySpline look like this:
You can create more interesting curves, including inflection points, by moving both control points (the yellow handles). Have fun and please keep the Blend feedback coming.
With Blend 3 it’s now possible to draw a marquee (or lasso) around keyframes to select all the keyframes that fall within it. Hold down the CTRL key then drag out a marquee with the mouse pointer as shown below. You can even begin your drag operation when the mouse pointer is over a keyframe or an animation bar; so long as CTRL is pressed, this will not result in selecting and/or moving any keyframe or animation.
If you ever used the time ruler area above the Timeline to move the yellow playhead (current time marker) you’ll be pleased to know that you can now click, or click-and-scrub, in any empty area of the Timeline to set the current time. And if the mouse pointer is over a keyframe or an animation bar then hold down the ALT key and click, or click-and-scrub, and you’ll be able to move the current time without either selecting or moving any keyframe or animation.
You’ll also notice the new blue drag-handles on the animation bars in the illustration above. You can use these to move the start and end times of the animation, and the times of the keyframes within it will be scaled up or down accordingly. This makes it very easy to change the time taken by an entire keyframe animation without having to move all the keyframes around. You can also click and drag on the gray background of the animation bar to shift the whole animation in time.
In my previous post, I mentioned that most of the samples from previous versions of Expression Blend have been uploaded to our gallery. One thing that is common with all of the samples is that Celso Gomes had a hand in making them.
Recently, Celso started deconstructing how many of the samples work at his site: http://www.nibblestutorials.net:
Go check out Celso’s site if you are interested in learning more about how these samples work.
Cheers! Kirupa :)
A great site that covers designer-oriented Expression Blend topics is Celso Gomes’s Nibbles Tutorials site:
This all-Silverlight site features some nice articles on how you can use Blend to create WPF, Silverlight 1, and Silverlight 2 applications. He recently updated it cover the new features in Blend 2.5 such as the Visual State Manager, so if you’ve been itching to learn more about it, head on over to his site.
In case you missed our announcements and 3rd party coverage, we shipped Expression Studio 2 yesterday! You can download trial versions of all our applications by visiting our Downloads Page!
This post will focus more on Expression Blend and Design, and since Expression Blend ships in its own box as well, check out our cool box design:
Our version 2 release comes around just a year after we shipped version 1, and there have been a slew of new features that we’ve added. Many of you have already played with them through the various previews we’ve released over the past year, but just for fun, I’ve tried to list the ones, in no particular order, that come to my mind:
Support for Visual Studio 2008 and WPF 3.5 Silverlight 1.0 Support with built-in JS Editor UI Refinements (More incremental search, ability to close panels, etc.) Storyboard Picker for Managing your Animations Vertex and Clipping Path Animations KeySpline Editor for Editing Ease In/Out SplitView for Seeing your Design as well as the XAML Importing from Expression Design Font Subsetting Design-time Sizing Easier Ways to Incorporate Media New WPF and Silverlight Samples Support for more Object Manipulations (Being able to uniformly scale, resize, and rotate multiple selected elements.) Breadcrumb Bar Making and Editing User Controls from the Design Surface Being able to export Slices in Expression Design
Support for Visual Studio 2008 and WPF 3.5
Silverlight 1.0 Support with built-in JS Editor
UI Refinements (More incremental search, ability to close panels, etc.)
Storyboard Picker for Managing your Animations
Vertex and Clipping Path Animations
KeySpline Editor for Editing Ease In/Out
SplitView for Seeing your Design as well as the XAML
Importing from Expression Design
Easier Ways to Incorporate Media
New WPF and Silverlight Samples
Support for more Object Manipulations (Being able to uniformly scale, resize, and rotate multiple selected elements.)
Making and Editing User Controls from the Design Surface
Being able to export Slices in Expression Design
I’m sure there are some that I’ve missed, so be sure to check out the higher-level feature overviews of Expression Blend 2 and Expression Design 2 from our newly re-designed Expression Studio product site.
What are some of your favorite features? What are some of the features you would like to learn more about?
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:
This service pack addresses critical issues and expands the XAML export feature to better support the 1.0 release of Silverlight. You can download and install the service pack from the Expression Design web site or the Download Center.
What's new in the Service Pack?
Highlights of XAML Export improvements and fixes
Highlights of other issues fixed
To see a full list of the contents of the service pack and issues fixed see the Knowledge Base article.
The Expression Design team
Hi everyone, As many of you may have noticed, our new release of Deep Zoom Composer contains a lot of new features. Unfortunately, due to time constraints, we did not have time to adequately update our documentation to explain how all of these new features work.
To help with this, fellow Blender and officemate, Janete Perez has written a few blog posts with some really nice Deep Zoom examples (static screenshots only posted below) highlighting some of our new features:
So be sure to click on the above links to see them. We hope to have a version of Deep Zoom Composer with the updated documentation available soon, though it will not be in our next release.
Cheers! Kirupa =)
We released important news today about the Expression family of products. Please visit the Expression Community site for details.
Over the past month, we released beta versions of Expression Blend 2 and Expression Design 2, a preview of Expression Blend 2.5, and a preview of Deep Zoom Composer. With four new releases, there is a steady supply of interesting topics for all of us to write about on this blog. To give you a preview of what future posts will contain, we’ll probably elaborate a bit more on the list of the new features Blend 2 has, describe more of the Deep Zoom Composer, and also shower you with information on Design 2!
This brings me to my request. While we try to write about things that interest you as well as us, do you have any particular topics that you would like us to write about more? Don’t be shy - let us know via the comments below, and we will try to work your request into our regularly scheduled programming :P
Many of you have been waiting, but wait no more! The RC (Release Candidate) version of Expression Blend 3 + SketchFlow is now available for you to download. Click on the below link to download it:
This release builds upon the early preview we showcased at MIX a few months ago, and you can get an overview of the new features by clicking here. In the upcoming weeks, we will be showcasing some of the new features since our MIX preview in greater detail, but a few of us have already mentioned a few of them such as the Improved Asset Library, Artboard Element Picker, the Expression Blend SDK, and more. This blog will highlight more of them as they get posted, but if you have something you have written, comment below and we’ll see what we can do to make sure it gets highlighted in a future post.
Thanks again to all of you who use our product and provide us with valuable feedback. If you run into any issues or concerns, please feel free to use our support and discussion forum.
- The Expression Blend Team
As many of you may have heard, Bill Gates announced during his TechEd keynote today that Silverlight 2 Beta 2 will be released later this week. To coincide with Silverlight 2 Beta 2, we will be releasing updated versions of Expression Blend 2.5 and Deep Zoom Composer as well.
There are some nifty new tricks up Expression Blend 2.5’s sleeve for this release. One of them is known as the Visual State Manager, or VSM for short, which makes styling your controls easier. To learn more about this feature, visit Christian Schormann’s blog where he provides an overview of Creating Control Skins in the Visual State Manager.
Here is a snippet from Christian’s post on why this is an interesting feature:
Styling dynamic visuals, or “skinning”, is an important task for visual designers working on interactive applications for web and desktops. With Beta 2 of Silverlight, and the associated June preview of Expression Blend, we are making this work much easier and faster - and we are adding more creative options at the same time. Very importantly, the model does not only work with controls explicitly written to support skinning via templates (such as the built-in and 3rd party controls) - designers can use the same model and tools to easily define dynamic visuals for UserControls they create.
Styling dynamic visuals, or “skinning”, is an important task for visual designers working on interactive applications for web and desktops. With Beta 2 of Silverlight, and the associated June preview of Expression Blend, we are making this work much easier and faster - and we are adding more creative options at the same time.
Very importantly, the model does not only work with controls explicitly written to support skinning via templates (such as the built-in and 3rd party controls) - designers can use the same model and tools to easily define dynamic visuals for UserControls they create.
Stay tuned for more updates later on this week when we provide more information on VSM, tutorial videos by Steve White, and an updated version of Blend 2.5 where you can try out the new VSM features for yourself.
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 .
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.
Design has an extensive library of brushes that can be used to create artwork. In the spirit of upcoming elections, I created this stars & stripes piece:
Download Design File (33k)
All of the elements you see can be found in Design’s default brush strokes:
To create similar brush effects, simply draw strokes and increase the width until you get the desired effect. Then to manipulate further, select Object/Convert Stroke to Path. For example, I didn’t want as many large stars as the brush gave me so after converting to path I just deleted the extras. This works great for adding abstract elements to a background or creating wallpapers.
Hope you like it, and if you have any questions, feel free to leave a comment below!
ZAM 3D ™ from Electric Rain is a new 3D XAML Tool for Microsoft Windows Vista application development, and a CTP is available for download .
You can see some stunning examples of ZAM 3D assets  in use in Windows Vista applications on Electric Rain's website.
Hi everyone, As you all may know, both Silverlight 3 and WPF 3.5 SP1 introduced support for effects and shaders. One of the features that I work on in Expression Blend is to make sure that you can use these custom effects easily.
Beyond just writing the functionality for making the effects work inside Blend, I enjoy writing custom effects as well, so in this post let me show you an example of a hatching shader effect I created.
Here is a small example containing some shapes and an image:
The same example, with my hatching shader effect applied, looks as follows:
This effect is quite versatile in when and where you can apply it. For example, let’s say I have SketchFlow application that looks like the following screenshot:
By just applying this shader effect, you can go from what you see above to something that looks even more prototype-ish:
You can read more about this shader effect on my blog post that goes into greater detail on this here: http://digitalepiphania.com/blog/2009/07/01/hatching-effect-for-silverlight-3-and-wpf-35-sp1/
For playing with this on your own, you can get the installer for this from the following location: http://digitalepiphania.com/Downloads/HatchingEffectSetup.msi
If you’ve browsed through the Deep Zoom Composer forums lately, you will have seen a few cases where Deep Zoom Composer was having difficulties maintaining layout when exporting collections. More specifically, the arrangement and position of images seen inside Deep Zoom Composer was not what you saw when you previewed your collection in your browser.
If this describes the handful of you who were having difficulties, we have a manual solution for you until we release our next version of Deep Zoom Composer. The solution is for you to open your dzc_output.xml file in Notepad and do a find/replace on all instances of commas ‘,’ with periods ‘.’ instead:
Save your dzc_output.xml file, and you should be set!
The problem is that in certain locales, commas are used to indicate precision as opposed to decimal units. Replacing the commas with periods will take care of this issue for you. In the next release of Deep Zoom Composer, we will take care of this automatically so you don’t have to worry about it.
Credit for finding the cause of the problem and the possible solution goes to Avi Dunn and Rado Nickolov of the Live Labs team.
You probably already know that you can use the Brush Transform tool to transform the fill, stroke, opacity mask, or any other brush that is applied to an object. When you click on the Brush Transform tool with an object with, let's say, a gradient brush applied, a brush transform arrow will appear. You can select the brush transform arrow and easily use your mouse cursor to move, scale, and rotate the brush transform arrow to modify your object's gradient fill:
While using your mouse is straightforward, you do not have a lot of precision. There are transforms that you may want to do such as set the gradient rotation to exactly 45 degrees, scale the brush transform arrow equally, and more.
Luckily, such transforms are possible using your mouse cursor and the Alt and Shift keys on your keyboard. Those two keys, among a few others, are known as keyboard modifiers because you use them in conjunction with other keys or mouse clicks. In this post, I will briefly describe common transforms that you can perform to your brush transform arrow using those keyboard modifiers and your mouse cursor.
When you are scaling your transform arrow, unless you have perfect mouse control, your scaling will usually be accompanied by some rotation. To scale perfectly outward/inward with no rotation, hold down your Shift key while clicking and dragging your brush transform arrow endpoint:
Notice that even though our brush transform arrow was originally in a rotated state, when scaling up with the Shift key pressed, the scaling grew perfectly outward.
When you rotate your brush transform arrow, you are free to set any rotation angle you want. There will be times, though, where you would like to rotate your brush transform to a common fixed value such as 45 degrees, 90 degrees, etc. In those cases, hold down your Shift key while rotating:
When holding down your shift key while rotating, you rotate in fixed intervals of 15 degrees. Be sure to note that it is not fixed intervals of 15 degrees relative to your original rotation angle. It is an absolute 15 degrees in a Cartesian plane starting at 0 degrees and ending at 360. If your transform originally had a rotation of 80 degrees, when increasing your rotation angle, your first interval will occur at 90 degrees and then increase by 15 degrees afterwards.
Any alteration you make to your brush transform's endpoint using your mouse cursor affects only that particular endpoint. If you want to symmetrically move both of the end points, you can do that by holding down your Alt key while manipulating any single end point:
This time, notice that even though you scaled out only one of the endpoints, both of the end points grew outward.
As you can see, a combination of the Alt and Shift modifier keys along with your mouse cursor allows you to more precisely control how you can transform your brushes. With radial gradients, the behavior is also the same, so don't feel as if you are limited to applying these tips to linear gradients only.
While this post focused primarily on the brush transform arrow, the above techniques apply to more general transforms also. For example, scaling an object by holding down both your Shift and Alt keys allows you to evenly scale an object outward without adding any rotation. Exploring some of those scenarios will be saved for another post!
Cheers! Kirupa Chinnathambi
Two new tutorials for Expression Design have been added to the Samples and Tutorials Gallery - Expression Design section. Follow the step by step instructions and learn how easy it is to Blend Photos and Remove Backgrounds from Photos.
You can download a 60 day trial version of Expression Design from the Expression web site. Need help with Expression Design? Consider joining our Expression Design discussion group.
The availability of the first Release Candidate of Blend is an exciting milestone that takes us another step closer to shipping. With an updated User Guide, a host of quality improvements, and a shiny all-new set of impressive and informative samples, the RC is available now on the Expression Web Site .
The Expression team has become aware of a problem with the Visual Studio 2005 Standard DVD included in the packaging of the Expression Blend and Expression Studio products (specifically, setup repeatedly prompts for the DVD). Please accept our sincere apologies for our mistake and, if you're affected by this issue, here is a temporary remedial solution. We will follow up this post with a more official solution very soon.
To work around the issue:
1. Create a new folder on a hard drive on your system that has at least 3 GB of free space. Name the folder "VS2005STD" without the quotes.
2. Open a command prompt by clicking on the Start button, click Run and type "Cmd" (without the quotes), and then click OK.
3. Type the drive letter of the source drive. For example, if the DVD-ROM drive is drive R, type "R:" (without the quotation marks). Press ENTER.
4. With the DVD disc in the drive, type the following command:
XCopy *.* X:\VS2005STD\ /h /v /s
where X: is the drive letter where you created the folder in Step 1.
7. Press ENTER.
8. Once the file copy is finished, close the CMD window and navigate to the VS2005STD folder you created and then to the VS subfolder. Double click Setup.exe to start the installation.
Note: The folder you created in Step 1 can be deleted after the installation is complete.
Again, we apologize for any inconvenience and we will get back to you very soon with an improved solution. If you have any further questions/comments please use the Expression Blend public newsgroup: http://www.microsoft.com/communities/newsgroups/en-us/default.aspx?dg=microsoft.public.expression.interactivedesigner&lang=en&cr=US
Since we released our preview at MIX, there have been a fair number of questions revolving around how a WPF or Silverlight project that uses Blend-specific features will work when opened on a machine that does not have Blend installed. For example, one Blend-specific feature that we have talked about extensively is Behaviors. The Behaviors runtime components are provided to you by Blend, and today, there is no way of being able to author or build a project that uses them without having Blend installed.
To help address this concern, we have been working on creating the Expression Blend 3 SDK. The Blend 3 SDK is a free (and lightweight) installer that places common components such as Behaviors into a general location that other applications like Visual Studio can access. This gives you the ability to open and edit projects created or modified by Blend without having to have Blend installed on your computer.
Before wrapping up this post, I should emphasize that you will only need the Blend 3 SDK to open projects that contain some runtime component that is Blend specific and you do not have Blend 3 installed. That means you can open a cool Behaviors project or even write your own behaviors using just Visual Studio and not having Blend installed on your machine.