Flicker Effect - Opacity Masks in Blend

 

This is a cool trick to give your logo "image" a cool subtle flickering effect. For my example I have grabbed the SilverZine logo in PNG format and thrown it into a new project in Expression Blend 2.

First step is to apply an opacity mask to your logo/object. This can be found in the properties panel of the object under Brushes.

Select it and chose the gradient brush style.  Select one of your gradient stops and try editing the "A" value next to your colour palette, this is your alpha channel and controls how transparent your object is, but only selecting one stop will only effect that area of the object. 

Add another stop to your gradient in the centre, do this by clicking roughly in the middle of the gradient bar. You can add as many as you want and to get rid of them if you add to many, simply grab the stop and drag it off the bar.

Let's get animating!

Create a new storyboard and call it "Fader". All we are going to do in here is make sure all the stops are at 100% for the beginning and the end (so we can loop the animation), now just move along your timeline with the yellow line and change the A value of your stops, play around with different intervals and strengths to get the desired effect.

Clicking on the name of your StoryBoard while its open (see above) will show you some properties relating to your Story Board, including RepeatBehavior, set this to forever.

Then add a "loaded" trigger to your logo and in the event, simply start the animation using the code Fader.Begin();

And that's it! A quick and simple effect that brings your logo or object to life!

Thanks

 

About the Author

Alex Knight

Alex is a Graphic Designer who can't get enough of Silverlight. He spends his days designing websites and application UI/UX for AGKDesign and Objectify, as well as maintaining SilverZine.com and his own blog. If you would like to catch up with him, here are some links that might help:
AGKDesign.twitter | AGKDesign.blog | AGKDesign.net | AGKDesign.silverlight
#1 Jordan Knight on 4.19.2009 at 10:47 AM

Um dude... this is AWESOME!

#2 Stephen Price on 4.21.2009 at 2:56 PM

Wow! Nice work dude. Was worth the wait, it looks brilliant.

#3 Jonas Follesø on 4.21.2009 at 4:37 PM

Another cool - somwhat similar - tricks is to overlay two compelx PNGs and rotate them in opposite direction. I Roxio used that to create a cool burning/smoke effect on their logo when burning a DVD (using WPF).

They had two transparent PNG renders of smoke that was overlayed to create the illusion of live smoke moving.

#4 Ryan Shelby on 5.06.2009 at 10:20 PM

Very cool example. Great site guys!

Leave a Comment