First impressions of Microsoft Expression Blend 3
At Saffron, we are always excited by new technologies which can be used as tools to enhance learning and usability. One of the many interesting projects I am currently involved in is the development of a RIA (rich internet application) product, using Microsoft’s Silverlight platform.
In this project, I used Expression Blend to recreate a user interface, based on the original Photoshop graphics, which was then passed on to our developers. The great thing about Blend is that it automatically converts all graphics to XAML, without the need to write code manually. Learning to work in Blend wasn’t difficult thanks to the intuitive user interface with its sleek graphite color scheme and well-arranged layout. Despite being new to this software, I found it straightforward to use which allowed me to concentrate on design rather than spending time searching for the right functions.
In the first stage, the original PSD graphics had to be converted into XAML using Blend which was a smooth process thanks to its support for importing Photoshop and Illustrator files. However, the import was not able to preserve all Photoshop effects and I found the best results were produced when importing vector layers. Blend is able to convert PSD files to XAML code with the original layer structure and names still intact. Additionally, individual layers can be selected for import whilst ignoring others; the pre-import preview function proved to be very useful for this.
After creating the initial static images, the animations were added. Creating animations, such as button controls, was painless using button transition states in Blend, especially as there was no need to write any code. The animation process itself is slightly different from Flash – in Blend, the process works with a true timeline and keyframes are created automatically as the timeline playhead is moved and the object properties changed. This approach seemed slightly quicker than using tweens in Flash but it’s hard to imagine how a frame by frame animation would work in Blend.
When animating movement, Blend creates a movement path which can easily be edited, thus controlling the movement animation; I also found this slightly more flexible than motion tweens in Flash. Another asset that deserves a special mention is the gradient tool in Blend which allows you to create and refine values of gradients directly on the object by dragging the gradient end points, which is extremely convenient to use.
One of the notable features of Silverlight, as often mentioned by Microsoft, lies in the improved designer-developer cycle. This was clearly proven in our experience as we at Saffron had a tight deadline to achieve, and it enabled both designers and developers to work in parallel. Silverlight is undoubtedly worth considering when choosing a platform for RIA, but is it a good alternative to Flash for creating engaging e-learning content? In my opinion, Silverlight can be a very useful tool for e-learning, especially in the following cases:
- When project deadlines are very tight and the project involves making multiple changes to design. Silverlight’s superior designer-developer workflow and team collaboration support means reduced overall development time as designers and developers can work on applications simultaneously.
- When the project involves full screen or HD videos. Silverlight 3 supports hardware graphics acceleration. This can lower CPU usage considerably, which means HD videos can be played on older low spec computers.
- When the project involves 3D or complex animations. Silverlight’s support for 3D graphics and animation rendering is superior to Flash and provides smoother animation due to GPU acceleration capabilities and perspective 3D support. This website provides a number of examples of Flash verses Silverlight performance comparisons.
There are probably many other reasons to use Silverlight for creating engaging e-learning content that I’ve not mentioned here. Please share your experiences of working with Silverlight and Expression Blend in the comments box below.