Blend Technique: Cylon Effect

Every now and then I get an idea for a visual effect that I would like in a WPF application. Bashing it out in XAML directly is too much like hard work (unless your name is Paul “XAML” Stovell) so I start up Blend from Expression Studio and have a go at reproducing it. Normally I get it working then shut down Blend without ever thinking of it again but I thought I might try and capture it so a) I can use it again some time and b) others might be able to use the technique as well.

The Cylon Effect

If you are reading this blog chances are you have heard of Battlestar Galactica and the ficticious Cylon robots (and more recently hot looking babes). The trade mark feature of the Cylon robots is the red-bar-code-scanner-like eye that goes from side to side. Here are the rough techniques for relicating this effect in Blend.

  1. Step one; open up Blend from the Microsoft Expression suite and create a new application called “CylonEffect”.
  2. Step two; add a TextBlock to the Window and blow its font up to 72pt and position it in the center of the screen, fill it with the text “Cylon Effect”.
  3. Step three; draw a line on the screen which is roughly twice as high as the text and position it to the left of the text. Change the line so that it is a red colour.
  4. Step four; go to the animation workspace (F7) and create a timeline.
  5. Step five; after about half a second along the timeline add a keyframe for the verticle line and move it so that it is half over the “C” of “Cylon Effect”.
  6. Step six; move along the timeline again for about a second and then add another keyframe for the line and move it over the “t” of “Cylon Effect”.
  7. Step seven; move the timeline slider back along to the first keyframe and change the foreground colour of the textblock to be a gradient. Add three mid-point steps to the gradient and position it so that there is a fairly tight section of red under where the red verticle line is.
  8. Step eight; move along the timeline again to the last keyframe and adjust the gradient on the text block once again so that the red is underneath the red line. To make the effect linger allow the first gradient step to trail further towards the left.
  9. Step nine; change the background colour of the window to black and run it – see how it looks.

For bonus points you can make the red verticale line resize as it moves along the text and make it fade in and out at the beginning and end respectively. If you want to take a look at the finished product feel free to download my code here.


Technorati tags: , , ,


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s