Foundation Silverlight 3 Animation- P16 doc

Everybody’s seen this type of object—the image loads, and as you use the mouse to drag inside the window, the object rotates with the mouse, allowing a more interactive experience with t

We then talked about how forces can be applied between particles You saw examples of how ticles can gravitate toward one another, colliding and bouncing, and also how springing behavior can

par-be used to create interesting, organic-looking bunches of particles We then closed out the chapter

by looking at a way to visualize the relationship between particles with lines, creating a nice-looking particle node garden based on springing behavior

In the next chapter, you’re going to learn how to create Silverlight-based virtual reality objects You’ll learn how the SLVR engine works, and how you can implement virtual reality objects in your own Silverlight applications

In this chapter, we’ll talk about how to use Silverlight to display virtual reality (VR) objects Everybody’s seen this type of object—the image loads, and as you use the mouse to drag inside the window, the object rotates with the mouse, allowing a more interactive experience with the object being displayed You’ll also see some-thing you’re not likely to find in any other book I’m going to show you how to use Silverlight to travel through time Yes, really.

There are two fundamental approaches to creating a VR-object–based application The first is to take a series of photos of the object from different angles, load the photos into the application, and then “flip” through them like a deck of cards The second is to take a series of photos, assemble them in columns and rows in a single image, and then use the application to translate the image inside of a clipped canvas We’ll be using the single-image method Based on my experience building both types, it seems a little snappier; it’s much easier to set up, update, and augment; and it has fewer moving parts to keep track of

With that in mind, let’s get started The first thing we need to talk about is the images

SILVERLIGHT VR (SLVR) OBJECTS

VR object images

Getting content to use in your Silverlight VR (SLVR)–based applications is likely to be the most consuming part of the process When it comes to getting images, you basically have three options The first is to use a 3D program to render out an object This may involve some expense and a learning curve if you don’t know 3D, although you may be able to get a friend or neighbor to help out if you know someone who uses a 3D program

time-The second method for getting content is to photograph your own object This is not terribly difficult

to do but may require a bit of extra equipment, like a turntable for the object, and some time to practice

The third option is to use a company that specializes in doing the photography, such as PhotoSpherix(sss*ldkpkoldanet*_ki+), who was kind enough to supply the example object photos you’ll be work-ing with in this chapter

Generally speaking, there are two types of VR objects: single-row (or single-plane) and multirow tiplane) The general concept for creating either is the same An object is set up on a rotating turnta-ble, photographed, rotated some number of degrees, and photographed again The process continues until the desired number of photos has been taken Taking photos of an object that is rotated 10 degrees between shots means there are 35 shots per row for a full 360-degree rotation The smaller the increment the object is rotated, the smoother the final action will be but the larger the file, so there is a trade-off there Figure 11-1 shows a few example frames from a single-plane object

(mul-Figure 11-1 The first few frames of a single-plane VR object

For a multiplane object, the camera is typically placed directly overhead (0 degrees) and then tilted down in 10-degree increments as each row is completed As you can probably imagine, this would be tricky to do for the average home user Companies that specialize in this type of photography have spe-cially made motorized camera rigs that make the process of taking the shots more exact Figure 11-2 shows the first few frames of the first few rows of a multiplane VR object

Figure 11-2 The first few frames of the first few rows of a

multiplane VR object

You may end up with quite a few images As long as they are numbered sequentially from the top left across the first row, and then to the second row if you have one, and so on, you’ll be fine For exam-ple, one of the models with which we will be working has 120 source images (5 rows of 20 images), the files for which are named ieje[jas),,-*flc through ieje[jas)-.,*flc

What do I do with all these images?

For use as a SLVR object, we need to take a big pile of 21 images and make a single image The best way

to do this is to find a program that will create customizable contact sheets Photoshop has a contact

sheet script, found under File¢Automate¢Contact Sheet II, but I’ve found that it will occasionally place unexpected whitespace between images Instead, take a few moments to download the freeware program IrfanView from sss*enb]jreas*_ki+ Let’s practice making an image using IrfanView

1. Start the program From the File menu, select Thumbnails, as shown in Figure 11-3

Figure 11-3 In IrfanView, select File ¢ Thumbnails.

2. The Thumbnails view window will open Navigate to the ejd]^ep[^a` folder in the projects for Chapter 11 All 21 image thumbnails will be displayed in the right-hand pane Click one to select it, and press Ctrl+A to select all of the images

3. SelectFile¢Create contact sheet from selected files, as shown in Figure 11-4

Figure 11-4 Creating

a contact sheet in IrfanView

4. You’ll get a somewhat intimidating-lookingCreate Contact Sheet dialog box We only need to deal with the left side of the box, though, so it’s not too bad The first things we need to fill in are the width and height There are 21 images in a single row Each image is 600600 pixels ForWidth, enter 12600 (21 images Height, enter 600 (each image is 600 pixels tall).

5. In the Columns box, enter 21 For Rows, enter 1, since this is a single-plane VR object

6. Leave the Stretch small images to maximal size box unchecked, and verify that Thumbnail spacing

is0 for both Horizontal and Vertical The Horizontal and Vertical fields for Margins should also be

0 When you’re finished, the panel should look like Figure 11-5

Figure 11-5 The Create Contact Sheet dialog box in IrfanView

7. Click the Create button A clipboard window will open showing the contact sheet Select File

Save As to save the file JPG is your best bet for an image of this size, so select JPG from the

Save as type drop-down, and go for about 60% compression on the JPEG/GIF save options log Click Save, and you’re done

dia-Depending on your specific compression settings, the single file will end up somewhere between 250 and 300KB, which isn’t bad for an image that is 12,600600 pixels

You create multiplane images the same way, except that for the contact sheet, you also specify the number of rows in your source photos Unfortunately, IrfanView runs out of steam a little bit here with the high-resolution images and doesn’t support contact sheets that are taller than 1,800 pixels at this resolution

As a workaround, you can make multiple contact sheets of three rows each and put them together

in your favorite graphics program It will still be quick and relatively painless, and you can’t beat the price You can try creating multirow contact sheets with the images in the ieje folder if you’d like There are 6 rows of 20 images, each of which is 600600 Just in case you don’t have a program like

Photoshop readily accessible, I included the Mini contact sheet in the ieje folder The

12,0003600-pixel image is called Ieje=hh*flc

What do I do with this giant image?

So you got the photos of your object, or had a company like PhotoSpherix help you out; you verted the images into a big contact sheet image; and you’re ready to plug them into Silverlight and watch some magic happen This is where the SLVR user control comes in The control is already built, but we’re going to go through all of the code so you understand how it does what it does; that way you can add custom features if you like

con-The first thing to take a look at is the user control con-The architecture for the control is shown in Figure 11-6 Inside the user control is the main H]ukqpNkkp Canvas, which contains a rectangle called Ikqoa?kjpnkh, and an Image object called =_peraEi]ca The default size for each of these objects is 320240, but the control will resize them based on how it is set up A very important aspect of this control is a clipping path applied to the Ei]ca?kjpnkh Canvas This creates a window onto the image

in the =_peraEi]ca object

Figure 11-6 The basic architecture of the SLVR user control

When the SLVR user control is instanced, it is handed an image, which is placed in the =_peraEi]caobject, behind the window of the Ei]ca?kjpnkh Canvas This makes it so only a single frame of the image is visible The image is then translated behind the window, as illustrated in Figure 11-7, based on input from the mouse on the Ikqoa?kjpnkh layer

Figure 11-7 The clipped ImageControl Canvas creates a window to the background image.

Let’s go through the code in the OHRN*t]ih*_o file You’ll get to add this control to a project after the walkthrough, so don’t worry about coding up anything right now If you would like to follow along, you can open the OHRN*t]ih*_o file in the OHRN?kjpnkh folder

The first variable, IkqoaOajoeperepu, is used to determine how far the mouse will move before the visible image is changed This allows you some control over the smoothness of the action in the appli-cation The Ikqoa?kqjpan variable is used to keep track of how far the mouse has moved and is the trigger for changing the image

Next, the image specified by the user is loaded into the =_peraEi]ca object in the control This ular method for loading images requires the addition of the two resources at the top of the control:

The IkqoaHabp>qppkj@ksj$% and IkqoaHabp>qppkjQl$% functions are the standard drag functions we’ve used in other projects, so we won’t be rehashing them here The IkqoaIkra$% function is worth taking a look at, though—this is where the magic happens.

If a drag is occurring, the current position of the mouse is acquired and compared against the last position of the mouse This is then used to increment the counters used to move the image

Using the control: single-plane

Let’s take a look at how to get the control into a project and make use of it

1. Open the SLVRBed project This project contains an empty 800800 main canvas that we are going to add a SLVR control to

2. In Solution Explorer, right-click the SLVRBed item, and select Add¢ Existing Item from the menu, as shown in Figure 11-8

Figure 11-8 The Add¢

Existing Item option in

Visual Studio

3. Navigate to the OHRN?kjpnkh folder for Chapter 11, and select the OHRN*t]ih file The control

is now part of your project but needs to have the class name updated to match the project

4. Open the OHRN*t]ih file, and edit the first line Remove the OHRNOejchaEi]ca text

8Qoan?kjpnkht6?h]oo9OHRNOejchaEi]ca*OHRN

and replace it with the name of your project, OHRN>a`, like so:

8Qoan?kjpnkht6?h]oo9OHRN>a`*OHRN

5. Open the OHRN*t]ih*_o file Update the namespace near the top of the file the same way Change the following code:

Add¢New Folder Name the folder ei]cao

7. Right-click the ei]cao folder, and select Add ¢ Existing Item Navigate to the bed contact sheet you created earlier If you don’t have it available, I placed a file called >a`=hh*flc in the ejd]^ep[^a` folder for Chapter 11

8. This step is very important—if you skip it, the control will throw an error when it tries to load the image Select the image in the ei]cao folder, and look at the Properties panel Under BuildAction, select Content In Copy to Output Directory, select Copy always This will compile the image into the package that Silverlight creates when this application is compiled By compiling the image into the package, your Silverlight application will become larger The trade-off is that once it’s downloaded to the client, the application is ready to go—no extra clicks or waiting

9. All that’s left to do is create an instance of the control and assign some parameters Open the I]ejL]ca*t]ih*_o file for editing, and add an object declaration before the I]ejL]ca$% con-structor:

OHRN>a`7

10. Inside the I]ejL]ca$% constructor, beneath the Ejepe]heva?kilkjajp$%7 line, type Bed = new SLVR( Visual Studio’s IntelliSense will open a list of the properties that are needed to instance the SLVR object, as shown in Figure 11-9

Figure 11-9 Visual Studio’s IntelliSense helps with the SLVR object declaration.

11. All you need to do is type each value, separated by commas For Bn]iaSe`pd and Bn]iaDaecdp,

we know the bed images were 600600, so type 600, 600,

12. ForJqi?khqijo and JqiNkso, we know there were 21 source images in a single row, so type

21, 1,

13. Since it’s a single row, ?khqijSn]l will be on, but NksSn]l will be off, so type true, false,

14. For the image name, we can see the image in the ei]cao folder, so type the full path You may have a different file name if you created your own earlier, but I’ll use ei]cao+>a`=hh*flc(including the quotes)

15. For@]ilajIkqoaIkraiajp, 3 should work well on this image, so type 3,

16. Finally, for BhelIkqoa?kjpnkh, type true, and then finish with ); The final code looks like the following:

>a`9jasOHRN$2,,(

2,,(

.-(

on the screen, you may see a scrollbar for the browser Plan accordingly when creating your own VR objects to provide the best possible experience for your end users.

Figure 11-10 The SLVR object in the browser

Earlier, I mentioned that it’s possible to override the starting position for an object In our case, maybe we’ve decided that we don’t want the application to load with the front of the bed showing and would prefer the side The fifth image in our series is a nice side view of the bed, so before the code to posi-tion the bed on the canvas, we can add a line of code to prime, or preset, the position:

>a`*Pn]joh]paEi]ca*T9)/,,,7

Remember to use a negative number in order to slide the image to the left

The code for this example is in the SLVRBedCompleted project.

Using the control: multiplane

The bed was a nice example of a single-plane SLVR object Let’s take a look at how to set up a plane object

multi-1. Open the SLVRFigure project This project contains the SLVR object but no image (I figured

you might like a little practice adding images to a project.)

2. Right-click the SLVRFigure item in Solution Explorer, and select Add¢New Folder Name the folderei]cao

3. Right-click the ei]cao folder you just added, and select Add¢Existing Item Navigate to the Skk`ajBecqna folder for Chapter 11, and locate the Skk`ajBecqna*flc file inside This is a 12,0003,000-pixel image that contains 20 columns and 5 rows of a wooden figure

4. With Skk`ajBecqna*flc selected, change the Build Action to Content and Copy to Output Directory to Copy always on the File Properties panel

5. Open the I]ejL]ca*t]ih*_o file for editing Before the I]ejL]ca$% constructor, declare a new instance of the SLVR object:

OHRNBecqna7

6. Instantiate the SLVR object Each frame is 600600 There are 20 columns and 5 rows The columns should wrap, but the rows won’t The path to the image is ei]cao+Skk`ajBecqna*flc.Mouse sensitivity is 3, and this time, the mouse control should not be flipped

six-Becqna*Pn]joh]paEi]ca*T9)52,,7

Becqna*Pn]joh]paEi]ca*U9).0,,7