"Helllooooo !!!!"

 

Creating a Synoptic view - Part 2
The XSI bit
(page 2 of 2)
Back to Page 1

 
 

We can now start importing the jpegs as background images.

1) Open the Synoptic editor.


2) Go to file>import picture from file


3) Browse to the isometric view of Tooky.


4) Should we change the image file because of updates etc. then we can refresh the image by either going to file>refresh or by pressing the refresh button on the toolbar.


5) We have a number of tools to define the hotspot areas. The rectangle and circle tool do just what they say…left click to start the shape, and drag with the left mouse button to size it. To resize the hotspot, place the cursor on the edges of the shape until it turns into a double arrow. You must still have the hotspot tool selected to do this. MAKE SURE U DO NOT OVERLAP THE HOTSPOT AREAS. If you make a mistake, there is no undo in the editor window, you have to delete the hotspot by selecting it and then pressing delete in the keyboard.


6) To move the hotspot use the arrow tool, otherwise just place the mouse cursor into the middle of the shape and it will automatically be selected.


7) Draw a circle hotspot on each of the puppeteering objects, and then two rectangles over the text on the top menu - 3/4 view and Side view. The top menu is in charge of browsing different synoptic pages and the buttons on the left are there for character manipulation.


8) Save the synoptic view file>save and name it 'index'.


9) So that we can see the synoptic view in action/and test to make sure that the file we are creating is correct, we can apply the synoptic property to the character, and then edit it at our will.


10) Branch select the character model and then go to Get>Property>synoptic. In the property page that opens, name the view Tooky, and browse to the html file that we just saved in the synoptic folder in the XSI directory (index.html). Note: The page that we define here, is the first page that we see in the Synoptic view when we open it for the first time.

11) Select any object in the hierarchy of the Tooky and press F3, the synoptic view will open. At the moment u will notice that none of the buttons work.

12) Lets create the second synoptic page. File>new and then File>import image from file. Select the 2nd image we created 'Tooky_side_final.jpeg'

13) Using the hotspot tool of your choice, draw a region over the two top menus, the two ankle cubes on the character and the save key/inspect facial controls.

14) Save the file as 'side.html'

15) Once we have created a hotspot, we need to define what happens when someone clicks on it. When it comes to linking hotspots to other html pages and scripts, there are two distinct methods. They both have different outcomes.

  • When linking hotspots from HTML page to another HTML page we use the browse button to select the correct pages. (Note, that the browse button can also be used to reference external script files! For the purpose of our lecture, we'll use it purely for navigating to other HTML files.
  • When linking hotspots to scripts, we simply change the view from 'page' to 'scripts' in the Synoptic editor, and paste the script from the Script Editor into this text field. This will be a little clearer in a minute, trust me.

16) First of all, we link the buttons on the top menu to switch between the different synoptic pages. Select the '¾ view' hotspot press the browse button located next to the 'Link with' text field. Locate the index.html file and press OK.

17) Do the same for the hotspot located above 'side view', this time browsing for the file 'side.html' and then save the html file.

18) Open the index.html file In the synoptic editor, and link the two top buttons in the same manner as 16 and 17. Save the file and open the synoptic view by pressing F3.

19) Press the buttons and enjoy!!!!!!

Creating the scripts

1) Select the hotspot associated with the Bigger of the two puppeteering spheres (in the 'index.html' file).


2) Press the scripts button on the Synoptic View Editor, notice that the image is replaced with a text editor window. Also notice that there is nothing here yet!


3) Press the scripts button again (it would have changed to say 'page') to return to the image.


4) In the link with text field type spine _orientation. This is the name of the procedure that we are going to call when we click on the hotspot, therefore make the name relevant to what you are expecting the hotspot to do. If we press the script button again, you'll notice that the text window has a automatically created a couple of lines of code, placing the name of the procedure in the code:

sub Spine_orientation(in_obj)

end sub

5) It is in-between the sub…. And end sub that we are going to paste the script that will call the selection of the control object.

6) In any viewport, Branch select the sphere. Open the script editor and cut and paste the VBscript in-between the sub/end sub in the SE text window.

You should now have a script that looks like this:

sub Spine_orientation(in_obj)
SelectObj "Tooky_model.Spine_orientation_control", "BRANCH", True
end sub

7) Select the smaller sphere hotspot, call it upper_spine_orient and press the script editor.

8) Now select the smaller sphere in the 3D viewport and copy the vbscript generated in the script editor into Synoptic View Editor text editor, this time placing it in between the sub upper_spine_orient(in_obj) and end sub

9) Save the Synoptic View Editor file. Press F3 and notice that the buttons should select their respective 3D geometry.

10) In the Synoptic View Editor open the html file 'side.html'. Now see if you can insert the right code so that when we select the ankle cubes in the synoptic editor it automatically selects the heel controls of the character. Tip: the cube should be selected in branch mode.

11) Finally we want to create a button that will open a custom parameter page, which I created to control Tooky's facial expressions.

12) Click the facial controls hotspot, or create one if u haven't done so yet. In the text fields type the name of the hotspots procedure. i.e. facial controls.

13) Unlike selecting chain element, to open the custom parameter we have to inspect the property in the explorer. E.g. if we select the custom parameter icon in the explorer, the script generated will not allow us to open the page by itself i.e. the script generated will be as follows:

SelectObj "Tooky_model.Tooky.Facial_controls"

14) If you run the script, the facial controls custom parameter doesn't open! What we need to do is 'inspect' the the custom parameter by right clicking on it's icon in the explorer and choosing 'properties'. The script should now change to:

InspectObj "Tooky_model.Tooky.Facial_controls"

15) Copy this into the Text editor of the Synoptic View Editor in-between the sub/endsub.

16) Hopefully you should now be able define other hotspots in the Synoptic View Editor and be able to link them to any aspect within your 3D scene!!!

17) Should you want to duplicate your character in the same scene, and therefore want to use two seperate Synoptic views on each character...then we would have problems. At the moment the scripts used in the HTML part of the synoptic view refer to parts of the character by calling the deforming objects name. When we duplicate our character within the scene, XSI renames the model so that we don't have two characters with the same name. Therefore, if we duplicate Tooky at his models root (funnily enough called Tooky_model), then soft will rename it Tooky_model1. Therefore we have to change the HTML so that our scripts refer to the new model name. We can do this by using any text editor with a 'find and replace' function, and asking it to replace 'Tooky_model' with 'Tooky_model1' (or any other name u choose to call your character). These HTML files should then be saved under a new name (i.e. index_2.html and side_2.html respectively) and then have the second character's Synoptic property (Get>Property>synoptic or see instruction 10 above) point to the new index_2.html file.

Remember that XSI has a fantastic default rig, which contains it's own synoptic view. Although daunting at first glance, have a look and see how it was created, hopefully it will give you a few more ideas when it comes to tackling the joyous experience of character setup.

 

Any problems drop me a line:

saf@onionboy.co.uk



Back to Page 1