Silverlight Tutorial – Flashlight Tutorial

How to make a flashlight effect with silverlight ?
 
 

 
 

What you need :
 
• be familiar with Blend
• be familiar with Visual Studio
• half an hour

 
 
 

Introduction

 
Many years ago, a friend taught me how to make a flash light effect with flash.
You probably saw it in many tutorials.
 
 

 
Today, we will try to do better with silverlight :)

 
 
 

The Blend Part

 

Create a new project

 


I’m doing it with Blend, but you can use Visual Studio if you want.

 
 

Add an image

 


Add it to the project.

 
 


Resize the image to give it the same size that the LayoutRoot

 
 

Draw a rectangle

 
 


select the tool

 
 


You should get this.

 
 

Gradient Brush and Radial Gradient

 
 


Set up the rectangle background as a gradientbrush

 
 


And click on the radial gradient option

 
 


You rectangle should look like this.

 
 

Transparency

 
 


Set the first gradiant to black

 
 


For the other one, same color but set transparenrcy to half

 
 


We begin to see the final result
 
 

Draw your Flashlight

 
 


Play with gradiant and try to make something which looks like a light.

 
 


Here is the artistical part :)

 
 


Well, i think i’m fine.

 
 


For me, it looks like this.

 
 

Transform the Brush

 
 
if you want to be able to move, you have to enlarge the brush.
 


Select the “Brush Transform” tool.

 
 


Resize the brush to about one and half.

 
 
 
 

The Visual Studio part

 

 

Ok this part is ridiculous you have to add a method in FlashLight.xaml.cs to register mouse move.
 

namespace FlashLight
{
    public partial class Page : UserControl
    {
        public Page()
        {
            // Required to initialize variables
            InitializeComponent();
            LayoutRoot.MouseMove += new MouseEventHandler(LayoutRoot_MouseMove);
        }
 
        void LayoutRoot_MouseMove(object sender, MouseEventArgs e)
        {
            Point newPosition = e.GetPosition(this);
            RadialGradientBrush radialGradient = (RadialGradientBrush)Light.Fill;
            radialGradient.GradientOrigin = new Point(newPosition.X / 640, newPosition.Y / 400);
            Light.Fill = radialGradient;
        }
    }
}

 
 
 

Conclusion

 
 
Actually, i’m pretty sure that you can do the same with the last version of Flash but this tutorial is a good exercise to practice with Blend.
Thanks for reading. You can download the source code here.