1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5<meta http-equiv="Content-Style-Type" content="text/css" />
6<link href="../../../../html/common/main.css" rel="stylesheet" type="text/css" />
7<title>Animation</title>
8</head>
9<body>
10<h1>Animation</h1>
11<p>Animations can be created and edited using Curve Editor features.</p>
12<p>The setting items (nodes) displayed vary depending on the type of animation.</p>
13<p class="image"><img class="thumb" src="images/animation_edit.png" alt="Animation properties" /></p>
14<ol class="ui">
15  <!-- =================================================== -->
16  <li>Animation properties are displayed.</li>
17  <!-- =================================================== -->
18  <li><a href="#graph_tree_view">Curve Tree View</a><br />Displays the nodes that can be selected for the animation being created. </li>
19  <!-- =================================================== -->
20  <li>The <a href="#tool_bar">Toolbar</a> is used to edit curves and keys.<BR> For details, see the description given in Toolbar. </li>
21  <li><a href="#graph_view">Curve View</a><br />Displays the animation curve for the node selected in the Curve Tree View.<br /> The curve can be edited in this view.</li>
22</ol>
23<h2>List of Curve Editor Operations</h2>
24<p>This is a list of Curve Editor operations.</p>
25<table class="toolbar">
26  <thead>
27    <tr>
28      <th>Operation</th>
29      <th>Feature</th>
30    </tr>
31  </thead>
32  <tbody>
33    <tr>
34      <td>[S]</td>
35      <td>Add key</td>
36    </tr>
37    <tr>
38      <td>[Delete]<br /> [BackSpace]</td>
39      <td>Delete key</td>
40    </tr>
41    <tr>
42      <td>CTRL+C</td>
43      <td>Copy key</td>
44    </tr>
45    <tr>
46      <td>CTRL+V</td>
47      <td>Paste key</td>
48    </tr>
49    <tr>
50      <td>CTRL+X</td>
51      <td>Cut key</td>
52    </tr>
53    <tr>
54      <td>[A]</td>
55      <td>Fit all to view</td>
56    </tr>
57    <tr>
58      <td>[F]</td>
59      <td>Fit selection to view</td>
60    </tr>
61    <tr>
62      <td>[R]</td>
63      <td>Fit frame range to view</td>
64    </tr>
65    <tr>
66      <td>[Ctrl] + [+]</td>
67      <td>Enlarge view</td>
68    </tr>
69    <tr>
70      <td>[Ctrl] + [-]</td>
71      <td>Reduce view</td>
72    </tr>
73    <tr>
74      <td>[N]</td>
75      <td>Select previous curve</td>
76    </tr>
77    <tr>
78      <td>[M]</td>
79      <td>Select next curve</td>
80    </tr>
81    <tr>
82      <td>[,]</td>
83      <td>Select previous key</td>
84    </tr>
85    <tr>
86      <td>[.]</td>
87      <td>Select next key</td>
88    </tr>
89    <tr>
90      <td>[↑] [↓]</td>
91      <td>Edit value of selected key</td>
92    </tr>
93    <tr>
94      <td>[←] [→]</td>
95      <td>Edit selected key frame</td>
96    </tr>
97    <tr>
98      <td>[ I ]</td>
99      <td>Set key mode to &quot;Insert Keys.&quot;</td>
100    </tr>
101  </tbody>
102</table>
103<p><a name="graph_tree_view" id="graph_tree_view"></a></p>
104<h2>Curve Tree View</h2>
105<p>Displays a tree view of the curves included in animations.<br /> You can select and edit curves.  </p>
106<p class="image"><img src="images/animation_edit01.png" alt="Animation properties" /></p>
107<ol class="ui">
108  <!-- =================================================== -->
109  <li>This group of icons is used to change the display status of the Curve Tree View.
110    <table class="toolbar_list">
111      <thead>
112        <tr>
113          <th>Icon</th>
114          <th>Description</th>
115        </tr>
116      </thead>
117      <tbody>
118        <tr>
119          <td align="center"><img class="list" src="images/node_curve_icon.png" alt="Show nodes that have curves" /></td>
120          <td>This is a filter button. Only nodes that have curves are shown if selected.</td>
121        </tr>
122        <tr>
123          <td align="center"><img class="list" src="images/tree_reset_icon.png" alt="Reset tree status" /></td>
124          <td>Resets the tree status.</td>
125        </tr>
126        <tr>
127          <td align="center"><img class="list" src="images/tree_open_icon.png" alt="Open all trees" /></td>
128          <td>Expands the tree to show lower branches.</td>
129        </tr>
130        <tr>
131          <td align="center"><img class="list" src="images/node_show_icon.png" alt="Show all nodes" /></td>
132          <td>Puts all nodes in show status.<BR> The show/hide checkboxes for nodes are all selected.</td>
133        </tr>
134        <tr>
135          <td align="center"><img class="list" src="images/node_hide_icon.png" alt="Hide all nodes" /></td>
136          <td>Puts all nodes in hide status.<BR> The show/hide checkboxes for nodes are all unselected.</td>
137        </tr>
138      </tbody>
139    </table>
140  </li>
141  <!-- =================================================== -->
142  <li>Curve Tree View<BR>Displays selectable nodes.<BR> When a node that has a curve is selected, the curve is displayed in the Curve View.<BR> Show/hide can be switched for curves using the checkbox included for each node.<BR>
143    <table class="toolbar_list">
144      <caption>
145      Curve State
146      </caption>
147      <thead>
148        <tr>
149          <th>Icon</th>
150          <th>Description</th>
151        </tr>
152      </thead>
153      <tbody>
154        <tr>
155          <td align="center"><img class="list" src="images/curve_icon.png" alt="Show nodes that have curves" /></td>
156          <td>A curve that does not have configured keys.</td>
157        </tr>
158        <tr>
159          <td align="center"><img class="list" src="images/curve_icon01.png" alt="Show nodes that have curves" /></td>
160          <td>A curve that does not have configured keys and has not been selected.</td>
161        </tr>
162        <tr>
163          <td align="center"><img class="list" src="images/curve_icon02.png" alt="Show nodes that have curves" /></td>
164          <td>A curve that has configured keys and has been selected.</td>
165        </tr>
166      </tbody>
167    </table>
168  </li>
169  <!-- =================================================== -->
170</ol>
171<p><a name="graph_view" id="graph_view"></a></p>
172<h2>Curve View</h2>
173<p>In Curve View, you can create and edit animation curves.</p>
174<ul class="sub_page">
175  <li><a href="#curve_mousing">Mouse Operations in Curve View</a></li>
176  <li><a href="#curve_key_selection">Selecting Curves and Keys</a></li>
177  <li><a href="#add_key">Add key</a></li>
178  <li><a href="#copy_and_paste">Copy and Paste</a></li>
179</ul>
180<p class="image"><img src="images/animation_chart_view.png" alt="Animation Graph View" /></p>
181<ol class="ui">
182  <li>This is the Curve View.<br /> It is used to select and edit curves and keys.</li>
183  <!-- =================================================== -->
184  <li>Indicates the range of animation frames.<BR> The area outside the range of frames is displayed with a darkened background.</li>
185  <!-- =================================================== -->
186  <li>This is an animation curve.<BR> The color of lines is determined based on the attribute type.</li>
187  <!-- =================================================== -->
188  <li>This is the time slider area.</li>
189  <li>This icon is for switching the display of key information.<BR> If information display is enabled, the following key information is displayed when a key is selected in the Curve View.<BR>
190    <table class="toolbar_list">
191      <caption>
192      Displayed Key Information
193      </caption>
194      <thead>
195        <tr>
196          <th>Icon</th>
197          <th>View Display</th>
198          <th>Displayed Information</th>
199        </tr>
200      </thead>
201      <tbody>
202        <tr>
203          <td align="center"><img class="list" src="images/curve_key_info.png" alt="Frame and Value Display Icon" /></td>
204          <td><img src="images/curve_key_info01.png" alt="Frame and Value Display" /></td>
205          <td>Displays the number of frames and values for the selected key.</td>
206        </tr>
207        <tr>
208          <td align="center"><img class="list" src="images/curve_key_info02.png" alt="Slope Information Display Icon" /></td>
209          <td><img src="images/curve_key_info03.png" alt="Display slope information" /></td>
210          <td>Displays slope information for the selected key.</td>
211        </tr>
212        <tr>
213          <td align="center"><img class="list" src="images/curve_key_info04.png" alt="Displays the maximum and minimum values set for the curve. " /></td>
214          <td><img src="images/curve_key_info05.png" alt="Display maximum and minimum values" /></td>
215          <td>Displays the maximum and minimum values for keys adjacent to the selected key.</td>
216        </tr>
217      </tbody>
218    </table>
219  </li>
220</ol>
221<p><a name="curve_mousing" id="curve_mousing"></a></p>
222<h3>Mouse Operations in Curve View</h3>
223<p>Mouse operations in Curve View are given below.</p>
224<table class="toolbar">
225  <thead>
226    <tr>
227      <th>Operation</th>
228      <th>Description</th>
229    </tr>
230  </thead>
231  <tbody>
232    <tr>
233      <td>Left button click</td>
234      <td>Selects keys.</td>
235    </tr>
236    <tr>
237      <td>Left button range selection</td>
238      <td>Selects keys and curves inside the selected range.</td>
239    </tr>
240    <tr>
241      <td>Center button drag</td>
242      <td>Moves a key when the key mode is &quot;move closest key&quot; or &quot;move multiple keys&quot;.<BR> Move closest key moves the closest key from the location where the center button is dragged.<BR> Move multiple keys moves keys that are in selected status. </td>
243    </tr>
244    <tr>
245      <td>Center button click</td>
246      <td>If the key mode is &quot;insert keys,&quot; keys are inserted based on the value and slope evaluated for the curve in the frame where the center button was pressed.<BR> If the key mode is &quot;add keys,&quot; keys are added in the location where the center button was pressed. </td>
247    </tr>
248    <tr>
249      <td>SHIFT + Center button drag</td>
250      <td>This operation is enabled when the key mode is &quot;move closest key&quot; or &quot;move multiple keys&quot;.<BR> This limits the movement of keys to vertical or horizontal motion.</td>
251    </tr>
252    <tr>
253      <td>Alt + Center button drag</td>
254      <td>Slides the view. </td>
255    </tr>
256    <tr>
257      <td>Alt+Right or left button drag</td>
258      <td>Changes the view scale to uniform.</td>
259    </tr>
260    <tr>
261      <td>Alt+Shift+Right button  Left/right drag start</td>
262      <td>Changes the scale of the view in the frame direction.</td>
263    </tr>
264    <tr>
265      <td>Alt+Shift+Right button  Up/down drag start</td>
266      <td>Changes the scale of the view in the value direction.</td>
267    </tr>
268  </tbody>
269</table>
270<p><a name="curve_key_selection" id="curve_key_selection"></a></p>
271<h3>Selecting Curves and Keys</h3>
272<p>The curve view can be used to select (multiple) curves, keys, and slopes.</p>
273<table class="toolbar">
274  <thead>
275    <tr>
276      <th>State</th>
277      <th>View Display</th>
278      <th>Selection Method</th>
279    </tr>
280  </thead>
281  <tbody>
282    <tr>
283      <td>Unselected</td>
284      <td><img src="images/curve_view01.png" alt="Show nodes that have curves" /></td>
285      <td>Selects the area containing nothing in the curve display region.</td>
286    </tr>
287    <tr>
288      <td>Curve selected</td>
289      <td><img src="images/curve_view02.png" alt="Show nodes that have curves" /></td>
290      <td>Select the corresponding items in the Curve Tree View or range select a curve using the left mouse button.</td>
291    </tr>
292    <tr>
293      <td>Key selected</td>
294      <td><img src="images/curve_view03.png" alt="Show nodes that have curves" /></td>
295      <td>Left click the key you want to select included in the curve or range select using the left mouse button.<BR> When a key is selected, it is highlighted and the slope handle is displayed.</td>
296    </tr>
297    <tr>
298      <td>Slope selected</td>
299      <td><img src="images/curve_view04.png" alt="Show nodes that have curves" /></td>
300      <td>Either left click the leading edge of the slope handle while a key is selected or range select using the left mouse button. </td>
301    </tr>
302  </tbody>
303</table>
304<p><a name="add_key" id="add_key"></a></p>
305<h3>Add key</h3>
306<p>This section describes the procedure for adding a key to any frame of an existing curve. </p>
307<ol>
308  <li><a href="#curve_key_selection">Select the curve</a> to which the key is to be added.</li>
309  <li>Place the mouse cursor in the location where you want to add the key and press [S].</li>
310  <li>The key will be added to the selected location.</li>
311  <li>Select the added key and enter numeric values for &quot;frame&quot; and &quot;value&quot; on the <a href="#tool_bar">Toolbar</a>.</li>
312</ol>
313<p><a name="copy_and_paste" id="copy_and_paste"></a></p>
314<h3>Copy and Paste</h3>
315<p>Curves and keys selected in the Curve View can be copied and pasted using Ctrl+C and Ctrl+V. </p>
316<p>There are two types of copying.</p>
317<ul>
318  <li>Copy a curve (multiple curves cannot be copied simultaneously)</li>
319  <li>Copy a key (multiple keys can be copied simultaneously)</li
320>
321</ul>
322<p>It is possible to paste to the selected curve.</p>
323<p>Operations during pasting are set using <a href="#curve_paste">paste items on the Toolbar</a>.</p>
324<p><a name="tool_bar" id="tool_bar"></a></p>
325<h2>Toolbar</h2>
326<p class="image"><img src="images/curve_tool_bar.png" alt="Curve Editor Toolbar" /></p>
327<ol class="ui">
328  <li>Key mode, key type, key frame, and value clamping can be selected using icons.<BR> Hovering the cursor over any icon gives a description of its function. </li>
329  <!-- =================================================== -->
330  <li>Snap<BR>The snap unit for the value and frame of the key to be added can be selected from a pull-down menu.</li>
331  <!-- =================================================== -->
332  <li><a href="#curve_paste">Paste</a><br /> The position and method to use for pasting a copied key can be selected from a pull-down menu.</li>
333  <!-- =================================================== -->
334  <li>Use numeric input to set the number of frames and values for keys selected in the Curve View.</li>
335  <li>Use numeric input to set the slope for the selected key.</li>
336</ol>
337<p><a name="curve_paste" id="curve_paste"></a></p>
338<h3>Paste</h3>
339<p>This section describes the position and method of selecting from the pull-down menu for pasting. </p>
340<table class="toolbar">
341  <caption>
342  Position
343  </caption>
344  <thead>
345    <tr>
346      <th>Pull-down Menu Items</th>
347      <th>Description</th>
348    </tr>
349  </thead>
350  <tbody>
351    <tr>
352      <td>Cursor Position</td>
353      <td>Pastes the key to the cursor position.</td>
354    </tr>
355    <tr>
356      <td>The copy destination</td>
357      <td>The frame (horizontal axis) is located at the cursor position. The value of the copy destination is used for value (vertical axis).</td>
358    </tr>
359    <tr>
360      <td>Copy</td>
361      <td>The value of the copy destination is used for both the frame (horizontal axis) and value (vertical axis).</td>
362    </tr>
363  </tbody>
364</table>
365<table class="toolbar">
366  <caption>
367  Method
368  </caption>
369  <thead>
370    <tr>
371      <th>Pull-down Menu Items</th>
372      <th>Description</th>
373    </tr>
374  </thead>
375  <tbody>
376    <tr>
377      <td>Insert</td>
378      <td>Inserts and pasts the copied key.<BR> The frames of keys located after the paste position are increased by the number of curve frames that have been pasted. </td>
379    </tr>
380    <tr>
381      <td>Replace</td>
382      <td>Replaces and pastes the copied key.<BR> Keys that already exist are replaced by the pasted key (curve).</td>
383    </tr>
384    <tr>
385      <td>Merge</td>
386      <td>Merges and pastes the copied key.<BR> The copied key is pasted while leaving already existing keys in place.<br /> The result is a where the already existing key is merged with the pasted key.</td>
387    </tr>
388  </tbody>
389</table>
390<hr><p>CONFIDENTIAL</p></body>
391</html>
392