A "Billboard Sign" done in SilverLight

 

Remember going to a city for the first time and seeing all those 20 foot long billboards with flashing lights and advertisements? One memorable moment was when I was holidaying in “New York”, it was around 10pm just after dinner all the flashing billboard lights just took me by surprise.

I really love the whole billboard advertising done with lights. And what I want to do today is recreate a billboard with lights as a SilverLight application.

I’m going to take my picture and replace one of the billboards with my own SilverLight version. (see red highlighted area)

So what is a billboard sign made up of ? In it’s simplest form it is a grid of flashing bulbs, whose dimension is X by Y.

Each light will have a simple animation that turns it on and off in the space of a second. I plan on using an existing “blend candy” animation I created weeks ago called “Flashing Light“, I’ve included a picture of the current flashing light. It’s a simple xAML file with a storyboard animation for flicking the light on and off.

I will make the single flashing light into a xAML control template. This control will then be used to fill the billboard. In my example I created a billboard with 40 light-controls width and 29 light-controls height.

The next step is to animate the lights and the easiest to do as an example is to animate the lights from left to right in lines and because the lights fade in and out within 1 second we get a faded effect as the line progresses.

Then I added a png transparent image over the billboard lights!

Next I added the image I took of New York and rescaled the billboard lights to fit in the slot I had carved out! Click on the image below to see the SilverLight animation in action.

The source code can be found here.

One of the good things about this project was it showed me one important limitation of SilverLight, that being performance. I dynamically instantiated over 1000 template bulbs and added them to the root canvas. Then I created a function that animated each row of the bulbs once I did this it showed me the limits of SilverLight, my processor started to make chugging noises!

Anyway I hope you enjoyed this sample and please rip it up and make use of it as you see fit!