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.

      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.
     
     

This entry was posted in Blend, silverlight and tagged , . Bookmark the permalink.

One Response to Silverlight Tutorial – Flashlight Tutorial

  1. Congratulations, very nice article:)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>