Hidden Object: Episode 3 – Marking Items off the List

In this episode of Creating a Hidden Object Game in Silverlight 3 we overlay the items in the image with paths and associate the ChangePropertyAction to change the Opacity of the TextBlock to indicate that the item has been found.

In order to detect when an item is clicked in the office image, we need a hotspot. A Path works great for this and odd-shaped items can be outlined using the Pen tool. Press the “P” key and the Pen tool will be selected:

Center the mouse cursor over the stapler and use the mouse wheel to zoom in. Now click various points to outline the shape of the stapler:

I started with a point in the bottom left corner and clicked a total of 7 points to outline the shape. When I got to point 5 in the top left, the path’s fill started obstructing my view of the rest of the object. Simply move over to the Appearance group and set the Opacity below 50%. Continue to draw the remaining points. When you get back to the first point, the mouse cursor will change to the pen with a loop indicating that clicking will close the path. Give the path a name (staplerPath) and set the Opacity to 0%. It is time to add the ChangePropertyAction to the path. On the Assets tab, click Behaviors and find the ChangePropertyAction.

Drag the action from the Assets tab to the Object tree and drop it on staplerPath:

This action is now associated with staplerPath object. Adding this action to our object tree caused two assemblies to be added to the References folder:

• Microsoft.Expression.Interactions.dll
• System.Windows.Interactivity.dll

Looking at the Properties panel you will see the properties for this action and notice that there is already an EventTrigger selected to fire when the staplerPath object gets a MouseLeftButtonDown event. That is exactly what we want. In the Common Properties group you will see TargetName and PropertyName. The TargetName is the name of the object that will have its property changed and PropertyName is the name of the property. Since we want the staplerText TextBlock to be dimmed when the staperPath object is clicked, then we set the TargetName to staplerText. An easy way to do that is to grab the bullseye (called the artboard element picker) and drag it to staplerText on either the canvas or the object tree. The Properties for this action should now look like this:

Press F5 to run the project and click on the stapler. The text for stapler is now dimmed.

You can play with the Animation Properties by setting duration for the property change and even set an easing value if you don’t want a linear change in the Opacity from 100% to 40%. Let’s make this even better by adding a sound effect when an item is clicked.  I found a nice magic wand sound on SoundBible.com and added it to the project in an Audio folder. Now drag the PlaySoundAction from the Assets list onto staplerPath and set the Properties to use the audio file:

Now repeat this same process for the other 12 items. We have the core of our very own hidden object game!

In our next episode, we will write a custom behavior that will shoot a spray of particles when an item is clicked.