Discovering Silverlight 3 – The Star Wars Scroller

After all the announcements at the MVP Summit, and yesterday at Mix, I just couldn’t wait to get my hands on the new Silverlight 3 and Blend 3 bits. In absolutely no particular order, as I wander around the new stuff, I will document my adventures in exploring Silverlight 3 and Blend 3 in the “Discovering Silverlight 3” post series.

Disclaimer: This is not an absolute beginner’s guide, rather some notes on the new stuff I encounter. I won’t spell trivial steps such as how to create a new project, or change the color of something.

First, here is what we are going to build (requires the Beta of the Silverlight 3 runtime)

If you want to keep up with me, you should have the following installed:

Silverlight 3 Developer Runtime

Silverlight 3 SDK Beta 1

Silverlight 3 Tools for VS 2008 SP1

Silverlight 3 Documentation

Expression Blend 3 Preview

So, being a geek, and knowing that one of the new features of SL3 is 3D transforms, what should I do first? A Star Wars Scroller, of course! Let’s see how it goes.

Start up Blend, create new project. Hmm, it seems that Blend 3 Mix preview only supports WPF and SL3 apps, no SL2. I better keep Blend 2 around.

We have a new project now, with website, as promised.

Note that Blend has a new design now, and the Projects, States, etc. tabs can be detached easily. Also, the main control of the app is now called MainControl :)

Let’s make the LayoutRoot’s background black because space is pretty dark normally. Add a TextBlock to hold the text. Accoring to TheForce.net we better use the RGB colors of 229, 177, 58, and the Franklin Gothic Demo (Bold) font here. Also, the paragraph should be centered.

As the font is not in the default SL font set, let’s embed it: (Tools, Font Manager)

After typing in some text, this is how our project looks so far:

Be careful not to have too wide paragraphs as we will rotate this in 3D, so the text at the bottom of the screen will be much wider.

As the text block is in a Grid, it gets clipped off at the bottom. So, let’s change the Grid into a Canvas:

Now comes the fun part. To rotate the text in 3D, select the text block, and use the Projection transform:

Play with the X axis rotation and the Y axis local offset to achieve the star wars scroller effect. Center the text by setting its “Left” Property. The goal is to keep at least 3-4 lines readable at the bottom of the canvas (click to enlarge):

Now let’s create the actual animation! For start, we move the text down so it is just outside the canvas, using the Y axis local offset (you may have to use  different setting depending on text size and amount:

This is the initial state. Let’s add a storyboard (Storyboard1 will do for now):

Drag the yellow keyframe marker to 40 seconds, and set Projection to a high negative value:

You can test your animation using the little play icon above the timeline. Change the speed as desired by moving the white dot on the timeline left or right.

If you start the application now (with F5), you will see that the animation does not start. Let’s add a one-line event handler to start it. Select the root “UserControl”, click on the events button and double click the “Loaded” event.

Wow! Blend has a C# editor now! With intellisense! Let’s write our oneliner:

Note that you do not have to hunt for Storyboard1 in the resources – it is immediately available as a member variable. Cool!

If you start the application now, the scroller works, but we still have cosmetic issues. The text starts below the black rectangle, and at the distance it looks fairly bad, it should fade away…

Let’s make the entire application black. If you go to the Default.html file (again, editable in Blend although there is no intellisense for Html), you can set the application’s background to black.

The next thing to do is the fading of the text. Select the LayoutRoot for this, and edit the Opacity mask to be as shown here:

There are three stops: the first at the middle with 0% Alpha , the second at a bit back from the end with 100% alpha, the last at the very end with 0% alpha again. If you test the application, you should see this:

And that’s it! We have created a Silverlight 3 Star Wars Scroller! Yaaaay! Of course, we can enhance it a lot, feel free to send me your versions.

Attached is the solution I created.