Welcome to my tutorial on how to create a cool little app in Silverlight to add hot spots to an image.

(Edit 28.01.09) I have created a new hot spot application with lots of hotspots and uses the same techniques as in this tutorial: Check it out here!

For my example have a look here: http://www.agkdesign.net/imger4/default.html

Tools you will need:
Photoshop
Expression Blend (I’m using Blend 2.5 March preview)
Visual Studio (I’m using 2008 edition)

Ok let’s get into it…

First step is to layout your design in Photoshop. I designed the whole template first and cut it up later.

First I made a background shape and added in my image of choice, a photo of my brother and myself. Now from this photo we need to make a few other images. One straight image with no effects (besides maybe a nice shadow or something), let’s call that picture real_photo.

Next make a copy of that image, this is the blurred copy of the photo. I have used a Gaussian blur and also de-saturated it a little to make the point of interest stand out a more. Can call this blurred_photo.

Next I used the pen tool to cut out the point of interest from the real photo – (Create a path around the person and right click > make selection). Grab a copy of person and add them to a new layer. I’m going to call this one Alex.

I also made the little info bubble that pops up when you hover over the people in Photoshop.

Ok next we need to save all those layers into PNG format with no backgrounds.

Now we are up to the fun part, let’s get into Expression Blend!

Start a new project and start importing all those images we just made, go to Project > Add existing item (or just hit CTRL + I) and start laying them onto the artboard.

Here is an exploded view of how the layer order goes. Don’t worry about the vector cut out of POI, we haven’t got to that bit yet.

The real photo, blurred photo and the point of interest need to be exactly in line with each other, and you just sit the info bubble where you think it works.

Next we need to make a hit box for the point of interest. We do this because a PNG file is still a square even though it doesn’t look like it, the ability to have proper vectors in XAML allows us to have a very precise hit box.
So select the pen tool in Blend, and start creating a path around the subject. Set the opacity to 0% on that shape you just made (it’s still there, you just can’t see it). Make sure this graphic is on your top layer so none of the other images get in the way of it.

Also set the blurred photo opacity to 0%. We don’t want to see that bit yet. Do the same with the info bubble.

So now we have our basic image set up, we need to start animating it!

Make new storyboard, (click the little plus symbol).

Give it a relevant name (I have called my alex_on – We will need to make alex_off soon to reverse the effect), in the time line move to about 0.300 then select the blurred photo from the tree and move the opacity back to 100% in the properties menu. Do the same for the info bubble and text if you have added it. TIP: when putting fades on the text, change the alpha property instead of the opacity, it fades better šŸ˜‰ .

Now we need to attach the storyboard to the HitBox, so select the HitBox shape in the tree and in the properties menu, press the events button . We want to add an event to the MouseEnter parameter, so click in box next to it and give your event a name (I called mine “alex_getfocus”).

When you hit enter this should take you into Visual Studio to edit your C# code. If not, just load the page.xaml.cs file into Visual Studio and paste in the code (Blend will put the code into your clipboard if it can’t load Visual Studio itself). When you are in Visual Studio you should see the event you created. Should look a little like this.

Private void alex_getfocus (object sender, MouseEventArgs e)

{

}

In between the brackets we want to add this line of code:

Alex_on.Begin();

All this does is play the animation you just made. Save it and go back to Blend and give your page a test run by pressing F5.

It should at this stage, fade the rest of the image out when you hover over the POI. (and reveal your info bubble), but it won’t reset the image back to normal yet.

Now go back into Blend, we are going to make the MouseLeave function now which will set the image back to normal.

Create a new storyboard and call it Name_off (Alex_off in my case). With the time line set to 0.000 we need to make all the objects we changed to opacity 100% in the last storyboard set to opacity 100% again (we do this because the application doesn’t know we have changed the parameters in the other storyboard). Move the time line forward again to about 0.300 and make all the objects 0% opacity.

That should make everything go back to the start, but we still need to tie it into the MouseLeave event. So select your HitBox, pull up the events panel in the properties section and click in the MouseLeave event. Give it a name (I called mine alex_unfocus) and head back into Visual Studio.

In your new event add the code:

alex_off.Begin();

Just like the last event but with the name of your new storyboard.

If all goes to plan go back to Blend and hit F5 to test your app.

And there you have it – a cool way to make hot spots in your photos stand out!

Just one little thing I would like to mention, when you have more than one point of interest, like in my example, you need to get rid of the other POI images or they will both show up when you hover over one. How do we fix this? Simple! Just add a few little extra bits of code to your already created events.

To ensure that the point of interest you are hovered over is the only one showing, add this to your name_getfocus event. (Alex_getfocus)

Tom.Visibility = Visibility.Collapsed;
Alex.Visibility = Visibility.Visible;

Where Alex is the actual name of the object in Blend (the PNG cut out of Alex)- This actually edits the XAML code so make sure your naming conventions are right!

This will ensure that only Alex is visible when you hover over him and Tom is only a blurred figure.

Do the opposite for your other point of interest.

The reason I have added both points of interest in there is to ensure that if Alex was collapsed from hovering over Tom, the next time I went to hover over Alex, it would still be collapsed. So we make sure this doesn’t happen by adding the Alex.Visibility = Visibility.Visible.

I think that is pretty much all there is to it!
So have fun with it and I would love to get some feedback on ways to improve it!
Oh and let me know if I have forgotten anything too!

Advertisements