In this tutorial we are going to create a synoptic view in XSI for a character I have been working on.

• Synoptic view allows you to quickly access commands and data related to a specific object or model.
  
  
• They are an image-based toolbar, customised by the user to allow you to work in natural, efficient and intuitive manner.
  
  
• A synoptic view consists of a simple HTML image map stored as a separate file outside of the XSI scene File (the synoptic folder funnily enough). This HTML file is linked to an object by applying a synoptic property to it.
  
  
• Therefore to create a synoptic view there are two distinct procedures we must complete:

  1) Create the image map. This is an external HTML file that references an image, as well as defining hotspots and what events occur when you click on them.
  
  2) A synoptic property associates the image map with the object.

The lecture will therefore be jumping between 2 packages, XSI and Photoshop. Starting off in XSI, we will render our character in various positions and camera angles to provide us with the synoptic views background image.

We then take these images into Photoshop, where we create a template/collage of the images.

We then go back into SoftImage, import the images, apply the hotspot areas and then associate the scripts with the correct hotspot.

Although there is are no Tooky scene file included with the HTML version of this tutorial, the priciples can be applied to any rigged character that you can get your hands on.

A few things to be aware of when using the Synoptic editor in XSI:

The synoptic editor supports a tiny subset of html, therefore it's best to use the synoptic editor to create the html file, as files created in external html editors may not work properly.

Also as we have been using vbscript for most of the year, we should make sure that Vbscript is checked in the option panel…once we have linked a hotspot to a procedure we cannot change either language. You cannot mix and match vb and java in the same file.

Before we even look at the synoptic editor, we should first try to figure out how we want our synoptic view to look like. How will we be navigating around the character, what control objects we are going to be manipulating on the character rig etc etc. This will give us a better understanding of a) the number of HTML pages the synoptic view will have, b) what is the best view to take a render of the character from i.e. side view, top view, 3/4 c) the layout of the buttons/hotspots.

For this example, we are going to have 3 pages in the synoptic view…..Page 1 is going to allow us to manipulate the characters upperbody, the second page will be a side view, allowing us to manipulate the internal rig...hidden by the characters mesh, and the third page is for any future controls I may implement on the character. On all 3 pages we will be able to savekeys and inspect certain parameters too.

1) First start by loading the 'synoptic_start.scn' or a scene with any character of your own.

2) Draw a render region over Tooky in the camera view, and drag the anti-aliasing handle to a high setting.

3) Open the Synoptic editor…..e.g. views>views>synoptic editor.

4) The synoptic editor acts as our html editor..it's here that we import picture files, create the hotspots and add the scripts that will drive the character model.

5) Then within the synoptic editor window go to File>import picture from region. In the save dialogue box that opens, save the image in the Synoptic folder, name it tooky_lec_iso'. You could have also captured the render region from the button named 'region' located in the toolbar menu at the top of the synoptic editor.

6) For the second page, we want to have a side on image of Tooky, which allows us to see the chain elements, nulls and any other control objects that we may wish to select. Therefore with the render region tool still selected, middle click inside the render region box to temporarily hide it. This way we can render out background 'character' images, which are all the same size.

7) Change the camera viewport so that it looks at the character from the right or click on the second memory pip (make sure the grid is hidden by pressing 'g'). Frame Tooky in the window by pressing 'f'

8) With the render tool selected, press the middle mouse button over the last position of the render region box to unhide it, and therefore producing a render of the character.

9) This time press the 'region' button on the Synoptic editor to save the file in the synoptic folder as before, this time name it ' tooky_lec_side'. We could also have rendered the camera view to file in the normal way, which would have given us an alpha to extract the character later.

10) With this side view, we want to create a ghost image of the characters mesh, and then overlay the 'chain' elements on top so that we can easily see what parts of the character rig we are selecting. To render the bones or a wireframe view, we can approach it in 2 ways.

• Draw a render region over a character; select a 3D object that is outside this region, and then select 'Render selection only'
  
  
• We could take a capture.

11) Therefore we are going to capture the screen, (we can't render the chain elements) and then take the image into Photoshop, crop the image, and add the bones as a layer on top of the 'tooky_lec_side'.

12) First of all select the characters mesh and hide it (press 'h')

13) In the same viewport that we rendered ' tooky_lec_side', go to the camera view options and select 'start capture'

14) In the capture viewport options that opens, name the file 'tooky_capture', change the file format from 'avi' to 'tiff', tick the 'User Pixel Ratio' box, change the render sequence 'from 1 to 1' and lastly check 'OpenGL antialiasing'.

15) We now need a template for which we can place all these images onto. Open the file 'template_lec.psd' or rightclick on the image below and choose 'save picture as'. This is just a Photoshop image which has buttons on one side (to execute various vbscripts) and a menu system on the top to allow us to select the 3 different synoptic pages we are going to set up. Having a template is a good idea so that we can always come back to a 'live' file that we can change and add different elements to as the character evolves. Were going to start off by creating the second synoptic view page (the 'Side View').

16) Next, open the screen capture we just created ('tooky_capture.tiff). Drag the image (or cut and paste) into the template file. Scale it until it fits into the middle grey box. Make the layer 'hard light' in the mixing mode and name the layer 'Capture'. This will allow it to blend with any image layers we may place beneath it.

18) Open the file 'tooky_lec_side.tga' and drag it also into the template file. Place its layer underneath the capture layer, and then scale it so it fits the proportions of the character rig. Reduce the layers opacity to 50%.

19) Next we are going to mark some areas that are going to be used as hotspots by the html file that we are going to produce in xsi. This a great way in giving the animator a visual aid in identifying the hotspots on the synoptic view..rather than relying on the mouse cursor to turn into a hand icon.

20) So create a new layer and label it 'hotspots'.

21) Select the create rectangle tool (u) and make sure you switch on 'create filled region' in the tools options panel at the top of the screen. With a colour of your choice, draw a few rectangular boxes, 1 over the foot ankle effectors and one on the neck bone. ( you can do more if u like, but 2 will be enough for now!!)

22) To create fancy buttons like me, simply create a new layer, call it 'my button', and using the rectangle key, draw one just beneath the existing facial control button.. Then double click on the layer property, turn on dropshadow and inner bevel…voila!!! Instant button.

23) Next we have to import the isometric render of tooky, as this will be the image on the first page!! Simply open the tooky_lec_iso' image and paste it into the Photoshop 'template' file. Resize the picture and fit as we have done previously. Name the Layer 'Tooky_iso_image'.

24) To create the final images that we are going to use as a background image in the synoptic editor, all we have to do is save the Photoshop file in a format that will 'flatten the layers' i.e.jpeg. Therefore to get the side view picture, just hide the Layer called 'Tooky_iso_image', and save the file as a jpeg. Call the file 'Tooky_side_final'. To create the first page picture, unhide the Layer 'Tooky_iso' and save this as 'Tooky_iso_final'.

25) Rollovers. A nice feature built into the XSI synoptic view is the ability to have rollovers within the image map. And the best bit is, it's very simple to implement! All you have to do is save a version of the synoptic images (i.e. 'Tooky_iso_image.jpg') into the same directory, but alter the colour/invert it as u wish; so that visually it is different to the original one.

When you save the highlighted image in the same directory as the base image file, make sure it has the same name, but append it with _h. For example, if the base image file is 'Tooky_iso_image.jpg', the highlight image file should be 'Tooky_iso_image_h.jpg'.pic. What you'll find is that areas defined as hotspots will now act as a mask, when your mouse cursor hovers over it, the image will swap.

Tip...Keep you file management tidy!!!! Keep everything in a structure that makes sense to you....i.e. keep final images and HTML pages in the synoptic folder, located in the project directory. This way if you need to copy your scenes to another computer, you can copy the Synoptic folder, and be confident that all files associated with the Synoptic view are in the right place. I can't stress how important it is to have good file managment....it's 9 out of 10 times why people's synoptic views don't work..the HTML file just can't find the files that there are trying to reference.

Click to enlarge

The XSI Bit....page 2