The team blog of the Expression Blend and Design
Adding visual effects and animation to an interactive product catalog by using Microsoft® Expression Blend™
The finished project
This tutorial shows you how to add visual effects and animation to a Expression Blend project. This tutorial starts from a pre-built project that you can download from FabrikamCatalogControlTemplates.zip. If you have completed the tutorial Fabrikam catalog part 2: Control Templates, you can use the project that you created in that tutorial.
At the completion of this tutorial, your finished project will display—in two adjacent panes—a catalog of the products that are manufactured by the fictitious company Fabrikam. The project also showcases three stylized and appealing visual effects. First, the combination of the gradient background and the reflection effect gives the illusion that the master pane and the details pane are standing on a highly-polished dark surface. Second, a spotlight orbits the document and also appears to be reflected in the polished surface. Third, the transition between products is cued by a fly-in animation in which the details pane rotates and scales up into the document from behind the master pane.
If you want to work through this tutorial while looking at an example of the completed project, you can open a second instance of Expression Blend and view the FabrikamCatalogSpecialEffects sample project which you can download from FabrikamCatalogSpecialEffects.zip.
The following procedure shows you how to use the Make Visual Brush Resource tool to create an element in your application that shoes a mirror image of part of your application.
The following procedure shows you how to create the effect of a spotlight which appears reflected in a polished surface. The spotlight uses animation to orbit the catalog.
Close-up of the end point of the motion path on the timeline (at 10 second mark)
The following procedure shows you how to use animation to make the DetailsPane fly into view from behind MasterPane. This animation timeline will be triggered when the application loads and when an item is selected in MasterList.
When MasterList.SelectionChanged is raised
PingBack from http://blogs.msdn.com/expression/pages/fabrikam-catalog-part-3-special-effects.aspx
More screen shots would be helpful so that the reader would have a visual reference of how things are changing after a significant set of steps. Also, the text can be somewhat tiresome to read. Condensing the descriptions, and allowing them to wrap to the browser window, might help with the readability.
nice stuff and interesting to go through.
about the format, it would be clearer if the tutorial steps were split up into basic actions, i.e. in fontcolor black, and backgroundinfo/explanation would be in a lighter colour. that way it would be easier to just follow the instructions and look into further info only when necessary.
If you go through all three in order you actually run through this tutorial very quickly, and it gives a large amount of satisfaction :D
Very nice tutorial. The reflection is very attractive and when coupled with animation it looks stunning. I would like to see another series of tutorials that deal with advanced effects, such as combining visual brushes, data binding and animations that spill outside the layout control. Use of the page element, clipping and xaml arrays would be a nice progression in this area.
Once again, great work!
it helps me a lot, i learned lot of things regarding WPF thanks !
Thank you for this tutorial. Almost everything worked very well. The only problem I had was that the reflection was affected by the motion path and would move around with the spotlight! I couldn't figure out how to 'disconnect' them.
Steps 3-5 in Task 4 are a bit confusing with the wording second .0. I was actually looking for a second 0 as in two zeros in the timeline. But you might explain the timeline a bit more. There is a step you skip on going from 0 to .5 and back to 0. You say "With the timeline play head still at second 0" But prior to that we moved it to .5.
But the second time thru I have got to the point where I see the next step and can do it on my own without looking at the instructions. The text was tiresome to read but it was necessary in case you missed a step. Perhaps a few more screen shots of the properties panel would help to verfiy settings. I erally hope to find more tutorials like this.
When there is a step to move the dot from point 0 to point 0.5 what we actually do is recording the objects positions and sizes as they should be presented to reader. When we record those positions on point 0 we just move those recordings to point 0.5 while the timeline play head is still at second 0. That means that doing any other changes will affect the objects at the beginning of the timeline.
When recording in on, changes we made to objects are always affected at the point that indicates timeline play head.
Step 13: I can't get the arrow to appear at all so I can't get it point down.
I am using Expression Blend 2 - is it any different?
I cannot make step 13 work. The the "Brush Transform" button in the toolbox (on my left) is disabled. When it is enabled dragging it does nothing....
So I figured out how to transform the brush in step 13. As Jonathan stated, I am using Expression Blend V2. When you click on the brush transform arrow, it draws an arrow over the selected object that the brush applies to....you then drag the ends of the brush around to change your gradient pattern
I give up. I get lost at Task 2 16-19. Maybe again its because I'm using the latest version of Blend and the tut is not up to date. Everything looks and works fine until step 16 and then the main grid gets compressed completely and the reflection disappears around step 19.
I really wish msdn would put together some video tutorials. So far the best place to learn Blend 2 is Lynda and You Tube. I'm part of a software company that is working to design the graphical UI for a new release. They are really wanting to use WPF and Blend for all of it and so I'm trying to get brought up to speed as quickly as possible.
If anyone knows any up-to-date tuts for Blend 2, click on my name and email me with the contact info on my website.
Overall, it is awesome work!
Some suggestion though, wording are some what a bit of confusion somewhere. And yes, would be nice if there are more screen references.
Anyway, I could follow everything without problem.
Looking forward to seeing a new more advanced tutorial.
Once again, a great work!