Michael Wolf
{Binding ME}
Sunday April 19, 2009
from the surface to the web
We have recently been doing quite a bit of Microsoft Surface work, and its made me rethink things around the importance of motion graphics in ria (Silverlight / WPF / Flex etc). This came up while working on the surface in the same room as Andy Trice, we were discussing how some of the motion graphic tricks we use on the surface are just as valid in WPF and Silverlight yet rarely used. When working with the surface you think allot more in the motion graphics mindset, as that part of your goal is for user to walk up and feel drawn in to touch the table. Below is an example of some of these approaches in a Silverlight 2 application. The demo utilizes png sequences and a video background which were generated by one of our great Designers John Bradley using AfterEffects.
The video background was generated with AfterEffects and encoded to a low rate windows media file using Expression Encoder. The video is then displayed in Silverlight using the mediaelement, that on the end event simply restarts. The compass animation was also developed in after effects, and exported as a sequence of pngs. The benefit of this approach is that it allows you to take advantage of the alpha channel in the pngs to layer the 2 different animations on top of one another (which is not possible in video alone). Unlike the video there is a bit more development entailed, which is very similar to Andys weather demo and was documented here back in 2007 for wpf. In our case we developed a custom control which sequences the images to stitch them together. At its heart it simply contains a dispatcher timer that does the following:
Blend is a great tool, but as with any great tool half the battle with mastering it is knowing when to use it and when not to use it. In this case although you could attempt to do these same effects using blend with storyboards or using programmatic animation, it simply isn’t worth the effort when you could get a much richer experience faster using something like AfterEffects. That being said this isn't the solution for everything, it can often be heavy handed and definitely entails a much larger xap or click once size than standard xaml and storyboards. Yet if you’re looking for an engaging experience with truly stunning cinematic motion graphics, don’t forget these tools available to you.
