Foundation Silverlight 3 Animation- P16 doc

431 PARTICLE SYSTEMS We then talked about how forces can be applied between particles. You saw examples of how par- ticles can gravitate toward one another, colliding and bouncing, and also how springing behavior can 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. 433 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 Chapter 11 434 CHAPTER 11 VR object images Getting content to use in your Silverlight VR (SLVR)–based applications is likely to be the most time- 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. 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 (mul- 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. 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. 435 SILVERLIGHT VR (SLVR) OBJECTS 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. 436 CHAPTER 11 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. Select File ¢ Create contact sheet from selected files, as shown in Figure 11-4. Figure 11-4. Creating a contact sheet in IrfanView 437 SILVERLIGHT VR (SLVR) OBJECTS 4. You’ll get a somewhat intimidating-looking Create 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 600600 pixels. For Width, enter 12600 (21 images 600 pixels), and for 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 is 0 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 dia- log. Click Save, and you’re done. 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,600600 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 600600. 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,0003600- pixel image is called Ieje=hh*flc. 438 CHAPTER 11 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 con- 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. The first thing to take a look at is the user control. 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 320240, 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]ca object, 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. 439 SILVERLIGHT VR (SLVR) OBJECTS 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. lner]paLkejpIkqoaOajoeperepu7 lner]paLkejpIkqoa?kqjpan7 The Bn]iaOpal variable tells the application how large the images are. It is a Lkejp data type because not all images are square, so it is used to store both the width and height of a single image frame. lner]paLkejpBn]iaOpal7 The next four variables let the application know how many columns and rows there are in the source image, and whether or not the columns and rows should be wrapped when the beginning or end is reached. 440 CHAPTER 11 lner]paejp?khqijo7 lner]paejpNkso7 lner]pa^kkhSn]l?khqijo7 lner]pa^kkhSn]lNkso7 The BhelIkqoa variable is used to change the functionality of the application so that the view can move opposite the mouse. The standard behavior is to let the users feel as though they are moving the object. When BhelIkqoa is active, the motion is more akin to moving the camera around the object. lner]pa^kkhBhelIkqoa7 The last four variables are used for drag-and-drop control: lner]paLkejp?qnnajpIkqoa7 lner]paLkejpKh`Ikqoa7 lner]pa^kkh@n]cEjLnkcnaoo9b]hoa7 lner]paLkejp@n]cOp]np7 Next is the OHRN$% constructor. Here, the control accepts a bunch of variables upon initialization. Many of the private variables declared are initialized with the values passed here and are named simi- larly. In fact, a lot of the code in the constructor is used to apply these values to the control. lq^he_OHRN$`kq^haBn]iaSe`pd( `kq^haBn]iaDaecdp( ejpJqi?khqijo( ejpJqiNkso( ^kkh?khqijSn]l( ^kkhNksSn]l( opnejcEi]caJ]ia( ejp@]ilajIkqoaIkraiajp( ^kkhBhelIkqoa?kjpnkh% After the Ejepe]heva?kilkjajp$% method, the code for the control begins. These two lines adjust the width and height of the Image object in the control to the size of the full image. =_peraEi]ca*Se`pd9Bn]iaSe`pd&Jqi?khqijo7 =_peraEi]ca*Daecdp9Bn]iaDaecdp&JqiNkso7 Next, the size of the steps used to translate the image, control width, and Ikqoa?kjpnkh rectangle width are adjusted to the passed Bn]iaSe`pd value: Bn]iaOpal*T9pdeo*Se`pd9pdeo*Ikqoa?kjpnkh*Se`pd9Bn]iaSe`pd7 Bn]iaOpal*U9pdeo*Daecdp9pdeo*Ikqoa?kjpnkh*Daecdp9Bn]iaDaecdp7 Now the columns, rows, and wrapping behavior are assigned to the private variables in the control: ?khqijo9Jqi?khqijo7 Nkso9JqiNkso7 Sn]l?khqijo9?khqijSn]l7 Sn]lNkso9NksSn]l7 [...]... multiple forward, 36 3 37 2 organic animations, 37 8 38 3 overview, 35 5 35 6 reaching behavior overview, 37 3 37 4 reaching for objects, 38 9 39 4 reaching with long chains, 38 4 38 6 variable-length reaching chains, 38 6 38 8 running, 36 0 36 3 walking, 36 0 36 3 L law of reflection, 162 LayoutRoot element (XAML), 13 LayoutRoot_Loaded function, 86 Line element (XAML), 20 linear collisions, 32 7 33 2 linear keyframes,... 37 3 InverseKinematics projects, 37 3 37 8, 38 4 38 8 IrfanView, 435 – 437 isosceles triangles, 219 K keyframe animations, 71 keyframes discrete, 81 easing, 78–79 interpolation in Blend, 82 linear, 77–78 spline, 80–81 KeySpline property, 80 kinematic chains dragging long chains, 37 5 37 8 overview, 37 4 37 5 forward kinematics automating, 35 9 36 0 overview, 35 6 35 8 inverse kinematics, 37 3 multiple forward, 36 3 37 2... (trigonometry), 252–2 53 HorizontalCarousel project, 30 3 31 3 HotAndCold project (trigonometry), 275–277 hypotenuse (trigonometry), 220 I IKDragon project, 37 9 38 3 Illustrator, converting to Silverlight, 18 image effects behaviors, 135 – 138 blur, 116–120 clipping paths, 125–129 cursors, animated, 122–125 drag-and-drop, 132 – 135 drop shadows, 120–122 frame-based animation sequences, 138 –1 43 ghosting effects, 1 13 115 user... animation 451 INDEX Numerics B 3D perspective transforms, 61 3D simulation horizontal carousel example, 30 3 31 4 inner solar system model, 2 93 299 overview, 281 vertical carousel example, 31 7 32 1 x axis rotation, 31 4 31 6 y axis rotation, 299 30 3 z axis rotation, 289–292 BallDropCompleted project, 33 7 Barricade user control, 258 BasicParticleSystem project, 39 8–404 Beaulieu, Andy, 34 7 BeginTime storyboard... 258–259 Flex, 9 Flip transform, 52 for loops, 32 8 forces, angular collisions with, 33 2 33 7 forward kinematic chains, multiple, 36 3 37 2 forward kinematics automating, 35 9 36 0 overview, 35 6 35 8 fountains, creating (particle systems), 419–421 four-quadrant Cartesian coordinate system, 156 frame-based animations overview, 38 sequences, 138 –1 43 vectors and, 1 83 190 frame-based object, reversing direction... 18 3D perspective transforms, 61 3D simulation horizontal carousel example, 30 3 31 4 inner solar system model, 2 93 299 overview, 281 vertical carousel example, 31 7 32 1 x axis rotation, 31 4 31 6 y axis rotation, 299 30 3 z axis rotation, 289–292 time-based animations, 38 time-lapse photos, 449 TimeSpan objects, 91 transforms 3D perspective, 61 Center Point, 51 defined, 35 Flip, 52 Rotate, 40–41 Scale, 43 48... Pythagorean theorem, 271–2 73, 275–277 PythagoreanTheorem project, 2 73 275 R radians converting to degrees, 216–219, 225– 230 defined, 197 random explosions (particles), 416–418 reaching behavior with long kinematic chains, 38 4 38 6 for objects, 38 9 39 4 overview, 37 3 37 4 variable-length reaching chains, 38 6 38 8 Rectangle element (XAML), 16 ReferenceLine element, 34 5 References folder (Blend), 23 25 render transform... project, 37 9 38 3 circular movement, 265–267 CircularMovement project, 265–267 clawGame project, 1 93 ClientBin folder (Blend), 28 clipping paths, 125–129 code creating DoubleAnimation with, 92–96 defining storyboards with, 91–92 code-based Visual State Manager, 148–150 code-behind files, 9 code-controlled vectors, 171–179 collisions with angled surfaces, 33 8 34 6 angular, 33 2 33 7 detecting, 32 5 32 6 FindElementsInHostCoordinates(... 19 separating acceleration from direction, 202–212 INDEX Silverlight applying trigonometry to, 230 – 232 development software tools, 5–8 overview, 3 4 Silverlight Development Center, 21 Silverlight MSDN library, 17 Silverlight projects, anatomy of, 22 30 Silverlight tools for Visual Studio 2008, 8 Silverlight VR (SLVR) objects See SLVR objects Silverlight. js library, 25 SimpleOscillation project, 246–247,... (trigonometry), 239 RingExplosions project (particles), 415 Rotate transforms, 40–41, 197 RotateSegment (ForwardKinematics), 35 6 rotation combining with oscillations, 260–264 x axis, 31 4 31 6 y axis, 299 30 3 z axis, 289–292 running behavior, 36 0 36 3 S Scale transform, 43 48 scalene triangles, 219 scaleVector( ) function, 196 ScaleX/ScaleY properties, 400, 410 segmentLength variable, 36 5 Selection tool, . 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. 433 In this. thing we need to talk about is the images. SILVERLIGHT VR (SLVR) OBJECTS Chapter 11 434 CHAPTER 11 VR object images Getting content to use in your Silverlight VR (SLVR)–based applications is. IrfanView. 1. Start the program. From the File menu, select Thumbnails, as shown in Figure 11 -3. 436 CHAPTER 11 Figure 11 -3. In IrfanView, select File ¢ Thumbnails. 2. The Thumbnails view window will open.