Dotneteers.net
All for .net, .net for all!

Discovering Silverlight 3 – The Star Wars Scroller

VBandi's blog

Syndication

Subscribe

Generic Content

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.

image

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

image

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)

image

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

image

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:

image

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

image

 

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

image

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:

image

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

image

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

image

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.

image

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

image

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.

image

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:

image

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:

image

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.


Posted Mar 22 2009, 11:34 PM by vbandi

Comments

Velvárt András szakmai blogja wrote Amerikai élménybeszámoló és Silverlight 3 ismerkedés
on Mon, Mar 23 2009 0:04

Angol nyelvű blogomon két postot publikáltam ma: UX thoughts – the U.S.-er and MVP Summit experience

Dew Drop – March 25, 2009 | Alvin Ashcraft's Morning Dew wrote Dew Drop – March 25, 2009 | Alvin Ashcraft's Morning Dew
on Wed, Mar 25 2009 14:13

Pingback from  Dew Drop – March 25, 2009 | Alvin Ashcraft's Morning Dew

Arcane Code wrote re: Discovering Silverlight 3 – The Star Wars Scroller
on Wed, Mar 25 2009 23:12

I love it. Probably not a good fit for business apps, but very cool. I give it 5 out of 5 stars on the geeky scale.

Now I just have to figure out a good use for it. Hmm, wonder how it would work displaying a constant roll of tweets?

vbandi wrote re: Discovering Silverlight 3 – The Star Wars Scroller
on Wed, Mar 25 2009 23:37

Thanks... it would be interesting to do tweets this way, I agree. Hmm...

aL wrote re: Discovering Silverlight 3 – The Star Wars Scroller
on Thu, Mar 26 2009 0:06

you can do tweets with a listview projected the same way :) the smooth scrolling might be a problem though, tweets dont come in a steady pace :/ but you could buffer up a couple of tweets and them smooth scroll through the buffer, slowing down or speeding up depending on how many tweets are in the buffer :)

VBandi's blog wrote Discovering Silverlight 3 – Demos of new features
on Sun, May 3 2009 12:36

In early May, I gave a talk about the new features in Silverlight 3. As I’ve started to gather material

jimlizardking wrote re: Discovering Silverlight 3 – The Star Wars Scroller
on Mon, Dec 14 2009 10:59

This would make a nice Easter Egg...

johnbruin.net » Silverlight Star Wars Scroller wrote johnbruin.net » Silverlight Star Wars Scroller
on Fri, Dec 18 2009 23:38

Pingback from  johnbruin.net » Silverlight Star Wars Scroller

Michael E. wrote re: Discovering Silverlight 3 – The Star Wars Scroller
on Sat, Sep 18 2010 11:05

Thanks a lot! I used it for as an easter egg in the info screen of an business application, only visible in developer mode or after 48 hours of work ;)