(X) Hide this
    • Login
    • Join
      • Generate New Image
        By clicking 'Register' you accept the terms of use .
        Login with Facebook

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

(3 votes)
András Velvárt
András Velvárt
Joined Feb 11, 2010
Articles:   3
Comments:   4
More Articles
0 comments   /   posted on Mar 05, 2010
Tags:   expression-blend , screencast , andrás-velvárt
Categories:   General , Media , Design

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


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.


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 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:

Time Content
@ 0:00 Introduction and showing off what we are building in this screencast
@ 1:40 Adding the intro animation – preparation
@ 2:40 Adding the intro animation - MediaElement
@ 3:47 Visual State for playing the intro and transition between PlayingIntro and ShowingUIAfterIntro states
@ 4:57 Make the App start up in the PlayingIntro state
@ 6:07 Adding the EndCueTrigger
@ 9:40 Adding the playback status display
@ 12:50 Adding IntroStatusVisible and IntroStatusHidden states and transitions
@ 14:38 Creating the MediaElementStateToVSMBehavior
@ 16:18 Using the MediaElementStateToVSMBehavior to show and hide the video status display
@ 19:08 Creating the DisplayMediaStatusBehavior
@ 21:00 Using the DisplayMediaStatusBehavior to set the text for the video status display
@ 22:30 Adding the skip intro button
@ 24:30 Adding a glow effect to the skip intro button
@ 25:50 Creating MouseOverOpacityBehavior
@ 28:14 Applying the MouseOverOpacityBehavior to the skip intro button
@ 29:35 Making the skip intro button skip the intro
@ 31:30 Replay Intro – creating the highlight on the box
@ 33:20 Creating ReplayIntroVisible and ReplayIntroHidden states and transitions
@ 38:10 Adding some code to the skip intro and replay intro features
@ 41:30 Summing up

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

Download Solution



No comments

Add Comment

Login to comment:
  *      *       
Login with Facebook

From this series