Transforming an Ugly Duckling into a Graceful Swan With Expression Blend and Silverlight - Part 2 Intro Animation

This is part 2 of the series “Transforming an Ugly Duckling to a Graceful Swan with Expression Blend and Silverlight”.

Introduction

In the first part of the series, I introduced the application, and created the “ugly duckling” version, where the end user could already browse the and watch the videos. In this part, I am going to add some bling to the app – namely the Intro animation, the ability to skip it, and to replay it. The Intro animation itself is not created with Silverlight, so I will just use it as a video. This part takes heavy use of Visual States, Behaviors and Easings.

Visual States

The application builds on Sample Data for displaying the videos’ metadata, and it uses Visual States to differentiate between the states of the application. For example, Visual States are used to show the intro animation, the details (in a later screencast), buffering states, some mouseover effects, and so on.

Behaviors

Expression Blend 3 introduced the concept of Behaviors, Actions and Triggers (commonly called Behaviors). Behaviors are a way to empower designers to add functionality to the application without the need to write code. Of course, Behaviors are actually code written by developers, but they can be reused from project to project, and they can have parameters that help designers fine tune the behavior of Behaviors, and increase reusability.

In this part (and the entire project in fact), I am using quite a lot of behaviors. The ones used in this screencast are:

• GotoStateAction – Built into Blend, this Action makes the target user control to a specified Visual State. In the screencast it is used to get the application to start up in the "PlayingIntro” state, switch back to the PostIntroUIState, skip the intro and when the mouse is hovered over the “Replay intro” cube.
• Rick Keeney’s EndCueTrigger to trigger a state change 2 seconds before the intro animation ends
• MediaElementStateToVSMBehavior – This behavior can be attached to a MediaElement, and as the playback state of the MediaElement changes (for example, there are states like “Opening”, “Playing”, “Buffering”, the behavior sets the Visual States for a Control as the designer specified. In the project, we are using this behavior to show and hide the media playback status displays.
• DisplayMediaStatusBehavior – Again, a behavior that can be attached to a MediaElement that can translate the Playing, Buffering, etc states into text and display it in a TextBlock.
• MouseOverOpacityBehavior – when applied to a FrameworkElement, the opacity of the element changes when the mouse is over the element. Designers can specify the transition time and the values for the opacity when the mouse is over the element and when it is not. Used on the skip button to light it up and emphasize the interactive nature of the button.

Easings

Easings are used to make animations more natural by having a gradual start and stop for the movements on the screen.

The glow effect

Silverlight does not have a Glow BitmapEffect, but with some change to the parameters of the drop shadow effect, it can actually be used as a glow effect.

Screencast contents

Watch the screencast.

Here is what happens in the screencast:

Thank you for watching and good-bye until the next episode!