Creating and Editing Synoptic Files

To display the synoptic editor

Choose View General Synoptic Editor from the main menu.

When you display the synoptic editor, it opens with a blank, untitled synoptic view. You can open other synoptic files for editing as described in Managing Synoptic Files.

Overview of Creating and Editing Synoptic Files

This section is a quick overview of creating and editing a synoptic file. Each step is described in more detail in the sections that follow.

ImportantUndo does not work in the synoptic editor. Pressing Ctrl+Z undoes the last change made in the main Softimage interface.

To create and edit a synoptic file

Set the synoptic editor options as described in Setting Options. These options control how data is saved and should be set before you do any work.
Import an image file as described in Importing Images.
Define a hotspot as described in Drawing and Modifying Hotspots.
Link the hotspot to a script procedure or another synoptic view as described in Linking Hotspots.
Repeat steps 3 and 4 to create additional hotspots.
Save the synoptic view as described in Managing Synoptic Files.

Setting Options

The synoptic editor has two options that control how data is stored. You should set these options before you do any other work in the synoptic editor because changing them later may not have any effect.

TipIf you need to change the effect of these options at a later time, you can open the corresponding synoptic file with a text editor or HTML editor.

Setting the Script Language

You can use either VBScript or JScript to write script procedures that are called by hotspots. You should set the script language before you link any hotspots to procedures. Each synoptic view can use only one script language; you cannot mix VBScript and JScript in the same synoptic view. After you have linked a hotspot to a procedure, you cannot change the script language of that synoptic view.

To set the script language

Click Options and choose either VBScript or JavaScript.

This sets the language attribute of the <script> element in the resulting synoptic file. For example, for VBScript the following gets set:

	<script language="VBScript">
		...
	</script>

For JavaScript, the following get sets:

	<script language="JavaScript">
		...
	</script>

Using Absolute or Relative Paths

The synoptic editor can store the addresses of external files using either absolute or relative paths. Relative paths are useful if you are sharing scenes or moving projects around, while absolute paths might be useful if you always want to refer to a given file in a specific location.

To set the path option

Click Options and choose Save Relative Path or Save Absolute Path.

The option you choose controls all paths stored in the synoptic file, including the image used for the image map as well as the locations of secondary synoptic views linked to hotspots. Changing this option affects new paths that are added to the synoptic file afterwards, but does not affect paths added previously.

Importing Images

Before you can define hotspots in the synoptic editor, you must import an image file for the base of the image map. Images are stored as external files that are referenced by an <img> element in the synoptic file.

You can use any image format that can be read by Softimage. You are not limited to the formats that are typically supported by Web browsers (JPEG, PNG, and GIF).

You can import an image in two ways: by capturing a new file directly from the render region or by choosing an existing image file. If you change the image on disk for any reason, you can refresh the synoptic editor to see the updated image.

You can also provide a "highlight" image. When the synoptic view is displayed and the mouse pointer is over a hotspot, Softimage replaces the hotspot area of the base image with the corresponding area of the highlight image. For example, you can use this to light up images of different buttons as the pointer moves over them.

To capture the render region

Do one of the following:
- Click the Region button in the synoptic editor.
  
  or
- Choose FileImport Picture from Region in the synoptic editor.
Use the Save Region As browser to specify a location, name, and format for the image.

TipTo create several synoptic views with the same size, don't change the render region.

To import an existing image file

Choose File Import Picture from File in the synoptic editor.
Use the Import Picture browser to find and specify an image file.

To refresh the synoptic editor

Do one of the following:
- Click the Refresh button.
  
  or
- Choose File Refresh Picture.

To highlight hotspots when the mouse is over them

Create a second image with the same size as the base image file. For example, it could be a brighter, more saturated version of the original.
Save the highlight image in the same directory as the base image file, using the same name with _h appended. For example, if the base image file is rigSynoptic.pic, the highlight image file should be rigSynoptic_h.pic.

ImportantThe highlight image file is not yet recognized as an external file. This means that you need to copy it manually when saving a scene to a different project, and manually include it under Others when packaging an add-on.

Drawing and Modifying Hotspots

Hotspots are clickable areas in synoptic views. This section describes how to draw hotspots, as well as how to change their shape and position. To specify the action to take when a hotspot is clicked, see Linking Hotspots.

In the synoptic editor, hotspots are displayed with visible borders so that you can see their shape and location. When you use a synoptic view on a scene element, hotspot borders are not displayed; instead, the mouse pointer changes to a hand when it is over a hotspot.

Hotspots are stored as HTML <area> elements in a <map> element in the synoptic file.

Drawing Hotspots

You can draw three types of hotspot: rectangles, circles, and arbitrarily shaped polygons.

When defining hotspots, make sure that they do not overlap.

To draw rectangular hotspots

Click the Draw Rectangular Area tool or press the R key.
Click to define one corner of the rectangle, then drag the pointer to define the diagonally opposite corner before releasing the mouse button.

The Draw Rectangular Area tool stays active and you can continue to draw more rectangles.

To draw circular hotspots

Click the Draw Circular Area tool or press the C key.
Click to define the center of the circle, then drag the pointer to define the radius before releasing the mouse button.

The Draw Circular Area tool stays active and you can continue to draw more circles.

To draw polygonal hotspots

Click the Draw Polygonal Area tool or press the P key.
Click to define the first vertex of the polygon.
Continue clicking to define the remaining vertices in order (clockwise or counterclockwise). You must define at least three vertices.

The Draw Polygonal Area tool stays active, and further clicks continue to add vertices to the current hotspot. To start a new polygonal hotspot, click the right mouse button.

Selecting and Moving Hotspots

The Select Area tool can be used to simply select hotspots as well as to move them. Selected hotspots are displayed with a double-width border.

You do not actually need to activate the Select Area tool. The tool is automatically activated over a hotspot, as indicated by the change in the mouse pointer.

The exception is after drawing at least one vertex with the Draw Polygonal Area tool. In this case, clicking defines a new vertex. To select a different hotspot, you must either right-click to finish drawing the current polygon first or activate the Select Area tool explicitly.

To explicitly activate the Select Area tool

Do one of the following:

Click the pointer icon on the toolbar.

or
Press the space bar.

To select a hotspot

Click on it.

To move a hotspot

Drag it to a new position.

Modifying Hotspot Shapes

After you have drawn a hotspot, you can still modify its shape simply by dragging.

As with selecting and moving hotspots, you do not need to activate any particular tool. Once again, the exception is after drawing at least one vertex with the Draw Polygonal Area tool : right-click to finish drawing the current polygon first.

To modify rectangular hotspots

Position the mouse pointer over any edge or corner.
Once the pointer changes to a double-headed arrow, click and drag it.

To modify the radius of circular hotspots

Position the mouse pointer over any one of the four "compass" points along the circle's edge: top, bottom, left, or right.
Once the pointer changes to a double-headed arrow, click and drag it.

To modify polygonal hotspots

Position the mouse pointer over any vertex.
Once the pointer changes to a four-headed arrow, click and drag to move the vertex to a new location.

NoteYou cannot add vertices after you have finished drawing a polygonal hotspot.

Deleting Hotspots

Deleting a hotspot simply removes the corresponding <area> element of the <map> element in the synoptic file. If you have written a script procedure for the hotspot, the procedure is not deleted.

To delete a hotspot

Select it and press the Delete key.

Linking Hotspots

After you have drawn a hotspot, you need to define what will happen when someone clicks on it. This can be one of two things:

Display a secondary synoptic view.

or
Run a script procedure.

Linking Hotspots to Secondary Synoptic Views

Linking a hotspot to a secondary synoptic view allows you to use the main synoptic view as an overview, which would open more detailed controls that run script procedures. For example, you could have a synoptic view for an entire character with hotspots that open separate synoptic views with specific controls for the hands, arms, legs, torso, and face.

To link a hotspot to a secondary synoptic view

Select a hotspot.
Click the browse button (...) beside the Link with box.
Use the browser to locate and select a file to link with.

TipYou can also type a path and file name directly in the Link with box. This is useful if you have not created the secondary synoptic file yet, but already know what you are going to name it.

Linking Hotspots to Script Procedures

Linking a hotspot to a script procedure allows your synoptic view to do something useful.

All the script procedures for a synoptic view are contained in the same <script> element. This means that they are in the same namespace and can share global variables and subprocedures.

You can access the scene element on which the synoptic property is applied, as well as the mouse button and modifiers used, as described in Special Variables in Synoptic Script Procedures.

To link a hotspot to a script procedure

Select a hotspot.
Type a name for a script procedure in the Link with box. For example:
```
		myProc
```
Click Scripts. The script view is displayed. If you entered a new script name, Softimage automatically creates a template for the procedure. For example, in VBScript:
```
sub myProc(in_obj,in_mousebutton,in_keymodifier)
end sub
```
In JScript:
```
function myProc(in_obj,in_mousebutton,in_keymodifier){
}
```
Write your script procedure using the template as a starting point.
When you have finished, click Page to return to the image view.

NoteYou can click Scripts again at any time to return to the script view and modify any script procedure in the current synoptic view.

Describing Hotspots

You can use the Description box to provide a brief description of a hotspot. When you display the synoptic view and hover the mouse pointer over the hotspot, the description pops up like a tooltip after a short delay.

To describe a hotspot

Select a hotspot.
Enter or modify the text in the Description box, for example:
```
	Show Hand Controls
```

Under the hood, the description is saved as the value of the area element's title attribute in the HTML file.

A	Capture the render region.
B	Reload the image from disk.
C	Select a hotspot.
D	Draw hotspots.
E	Name of script procedure to run or secondary synoptic view to open when hotspot is clicked.
F	Caption of hotspot appears as a tooltip.
G	Hotspots define clickable areas.
H	Browse for a secondary synoptic view to link to.
I	Create or modify script to run.
J	Right-click to display or hide optional controls.
K	Selected hotspot has a double border.