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.
That screencast is connected with the Transforming an Ugly Duckling to a Graceful Swan with Expression Blend and Silverlight - Part 2 Intro Animation article.
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 |