Designing a Christmas card, print to Silverlight - part two
As Expression Blend 3 allows the import of Photoshop files, it became a relatively simple task to convert an aspect of the printed card to a basic online animated version. I had the idea providing a very simple version of the card that could pop up in some way within a div from NettMore's website as a seasonal greeting.
I took just the front of the card and firstly reduced the resolution as 300dpi was far greater than required for on-screen. I also rasterized the text layer so that I didn't encounter any font include problems later. (Interestingly, Expression Blend failed to render this layer, although it appears fine in the build.) I then simply imported the file into Expression Blend, maintaining all of Photoshop's layers. As I had formed each snowflake on a separate layer in Photoshop, this was perfect for my idea of animating the card.
Preserving the Photoshop layers allowed me to animate each individual snowflake so that the card begins as a still seen, then gradually the snowflakes emerge and fall. Santa appears, leaving sleigh tracks in the snow and the message 'Season's greetings' appears. Very basic, I know, but the whole process (bearing in mind I am no animator!!) took but a couple of hours from Photoshop file to published piece.
To start with, all the assets apart from the scene, have an opacity set to zero so they all appear invisible. I then created a storyboard and used key frames to animate each snowflake, Santa and the text message. I randomly set the timing for each snow flake so that they fell at different rates. I began with the final key frame so that the position of the snowflake ended at the point on the static card. I then worked back to the beginning, dragging the snowflake to the top of the screen, gradually increasing it's opacity, and randomly rotating it at varying keyframes so that the flakes fell, gently spinning as they went.
I used the Blend 3 behaviours feature (so much easier then prior versions!) to start the animation on loading. This was very simply - selecting the 'ControlStoryboardAction' behaviour from the assets' 'behaviours' panel and editing the properties so that the relevant storyboard was selected along with the EventName, 'Loaded'.
Santa follows a basic path across the scene to his end point, as the sleigh tracks appear in the snow. Finally, the 'Season's greetings' message has its opacity set to 100% so that it fades into view and the scene ends just as the static version appears.
From there, it was a case of editing the default page to display the div as I wished. I also added a static jpg as a background image to the div so that anyone who doesn't have Silverlight installed can still view the card.
I then sent that and the xap file to the client for them to include during the festive season! Those who receive a paper Christmas card, on visiting the website, will receive a familiar Christmas message on visiting the website via a nice visual tie-in. NettMore used ASP code to display the card from the end of November and during December.
See demo of Silverlight christmas card >>
