Creating a Radial Effect in Blend

Today i'm going to show you how to create the radial effect i use in my free game Apple Bin (shameless plug, check it out here ).

There are a couple of advantages in doing this in blend. Download size is a lot smaller and you can animate colours rotation scale etc.

I'm doing this on windows phone, but same technique can be used in WPF or Silverlight.

Fire up blend and add a canvas on your page.

Now we want the path tool from the toolbar on the left.




We need to get a nice equal triangle (i'm sure there are better ways of doing this but it works for me). I line up the path points with three points on the page like the center and edge points of the canvas.

 From there, just grab your selection tool from then tool bar and scale it back till it's roughly in the center halfway up.

Now we need to change the point of rotation, which is the center dot of the triangle. Using the selection tool, grab it and drag it down to the pointy end of the triangle (maths term).

Ok, now we've done that, copy and paste the triangle then go the the transforms box on your right. Select the angle tab and type in 15.

This will rotate the 2nd triangle around the point that we moved 15 degrees.

Keep Ctr+Cing and Ctrl+Ving and adding 15 to each angle transform as you go until you get all the way around.

Now we're getting somewhere! Highlight all your path elements in the tree on the left. Right click and select compound path.  This will make them all one element which is a bit easier to manage.

Now you can muck around with the fills to get the effect you want. Usually a radial gradient fill looks pretty cool. I'm fading the alpha on this one as well so there's no hard lines.

And there we have it, a radial effect in blend!