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
Thank very much, this tutorials give the reader a good understanding of the concepts!
I couldn't download the sample project and can't view the images in this tutorial.Please update your website.
Well... hmmmm, the links to the zip files are broken... can you fix this please, I'm very interested in this tutorials.
seems every Fabrikam samples codes are borken, any chance to fixed it, or no