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<!-- InstanceBegin template="/Templates/default_template.dwt" codeOutsideHTMLIsLocked="false" --> 4<head> 5<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6<meta http-equiv="Content-Style-Type" content="text/css" /> 7<!-- InstanceBeginEditable name="CSS の相対パス指定" --> 8<link href="../../../../common/manual.css" rel="stylesheet" type="text/css" /> 9<script type="text/javascript" src="../../../../common/ibox.js"></script> 10<!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="ページのタイトル" --> 11<title>Visibility Animation</title> 12<!-- InstanceEndEditable --> 13</head> 14<body> 15<div> 16 <div class="body"> <!-- InstanceBeginEditable name="本文のタイトル" --> 17 <h1>Visibility Animation</h1> 18 <!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="本文" --> 19 <p>This page describes how to make settings when applying a visibility animaiton to a model using CreativeStudio.</p> 20 <h2>What is a Visibility Animation?</h2> 21 <p>A visibility animation is an animation that controls the visibility of a model. <br /> Visibility refers to the ability to see an object.</p> 22 <h3>Configuring the Color Editor Panel</h3> 23 <p>Use the CurveEditor panel to create and edit visibility animations.</p> 24 <p>For details on the CurveEditor panel, click <a href="../../../../ui_reference/tool_panel/curveeditor_panel/index.html">here</a>.</p> 25 <a href="assets/curve_editor_axis.png" rel="ibox" title="Click to enlarge image"><img class="ui_thumb" src="assets/curve_editor_axis.png" alt="Description of Curve Editor Panel Axes"/></a> 26 <p>Table 1 gives the settings for the horizontal and vertical axes on the CurveEditor panel used to create visibility animations.</p> 27 <p>Table 1. Setting the Horizontal and Vertical Axes in CurveEditor When Creating Visibility Animations</p> 28 <table> 29 <thead> 30 <tr> 31 <th>Setting</th> 32 <th>Vertical Axis and Horizontal Axis</th> 33 <th>Description of Setting</th> 34 </tr> 35 </thead> 36 <tbody> 37 <tr> 38 <th rowspan="2">IsVisible (Curve)</th> 39 <td>Vertical axis</td> 40 <td>0 and 1 are used to set the visibility of a model. <br /> 0 : Hide model<br /> 1: Show model</td> 41 </tr> 42 <tr> 43 <td>Horizontal axis</td> 44 <td>Number of frames (number of frames to show/hide the model)</td> 45 </tr> 46 </tbody> 47 </table> 48 <h2>Sample Configuration</h2> 49 <p>This page uses Toy_Mt of the Toy_Block sample data (hereafter referred to simply as Toy_Mt) to describe how visibility animations are configured.</p> 50 <ol> 51 <li><a href="#sample_data_reading">Loading sample data</a></li> 52 <li><a href="#curve_editor_confirms">Checking the CurveEditor panel</a></li> 53 <li><a href="#visibility_animation_edit">Editing Visibility Animations</a></li> 54 </ol> 55 <a name="sample_data_reading" id="sample_data_reading"></a> 56 <h3>Loading sample data</h3> 57 <p>Use CreativeStudio to load the Toy_Mt sample data prepared in the following folder.<br /> " %NW4C_ROOT%/SampleData/Graphics/Intermediate/Tutorial/toy_block/toy_mt.cres"</p> 58 <p>On the CreativeStudio menu, select File > Open > Intermediate file and open toy_mt.cres.</p> 59 <a href="assets/Toy_Block.png" rel="ibox" title="Click the image to enlarge"><img class="ui_thumb" src="assets/Toy_Block.png" alt="Image of Loading Toy_Block"/></a> 60 <h3>Checking the CurveEditor panel</h3> 61 <p>Check the visibility animation settings for Toy_Mt on the CurveEditor panel. <br /> Select the Toy_Mt model displayed in the <B>Contents</B> panel to open the <B>CurveEditor</B> panel.</p> 62 <p>Figure 1. Select Toy_Mt on the Contents panel.</p> 63 <img class="manual_image" src="assets/visibility_animation.png" alt="Material Color Animation Contents"/> 64 <p>In CreativeStudio, select Window > CurveEditor to open CurveEditor.</p> 65 <p>Figure 2. Curve Editor Panel for Toy_Mt</p> 66 <a href="assets/visibility_animation01.png" rel="ibox" title="Click the image to enlarge"><img class="ui_thumb" src="assets/visibility_animation01.png" alt="visibility animation"/></a> 67 <p>Nodes for which a curve is set are displayed in bold in the graph tree view of the CurveEditor panel.</p> 68 <p>A visibility animation has been created for Curve of IsVisible.</p> 69 <a name="visibility_animation_edit" id="visibility_animation_edit"></a> 70 <h3>Editing Visibility Animations</h3> 71 <p>This page describes how to create and edit visibility animations by actually using Toy_Mt.</p> 72 <p>Selecting IsVisible in the graph tree view on the CurveEditor panel will display the visibility animation curve shown in Figure 3 in the graph view.</p> 73 <p>Figure 3. Visibility Animation Curve</p> 74 <a href="assets/visibility_animation02.png" rel="ibox" title="Click the image to enlarge"><img class="ui_thumb" src="assets/visibility_animation02.png" alt="Emission color animation"/></a> 75 <p>Select the graph view and press the <B>A</B> key. The display will be arranged to show all keys currently set.</p> 76 <p>The visibility animation settings of Toy_Mt are given below.</p> 77 <table> 78 <thead> 79 <tr> 80 <th>Frame</th> 81 <th>Description of Setting</th> 82 <th>Result</th> 83 </tr> 84 </thead> 85 <tbody> 86 <tr> 87 <th>0 ～ 69</th> 88 <td>Keys are set to 1.</td> 89 <td>Toy_Mt is displayed during this period.</td> 90 </tr> 91 <tr> 92 <th>70 ～ 99</th> 93 <td>Keys are set to 0.</td> 94 <td>Toy_Mt is not displayed during this period.</td> 95 </tr> 96 <tr> 97 <th>100 ～ 155</th> 98 <td>Keys are set to 1.</td> 99 <td>Toy_Mt is displayed during this period.</td> 100 </tr> 101 </tbody> 102 </table> 103 <p>Toy_Mt, which had been visible, is hidden from Frame 70 to Frame 99. It reappears again starting from Frame 100.</p> 104 <h4>Editing Example</h4> 105 <p>Let's try actually editing the visibility animation for Toy_Mt.</p> 106 <h5>Setting the model so it is not hidden</h5> 107 <p>Delete keys set to 0 on the CurveEditor panel as shown below.</p> 108 <p>Figure 4. Deleting Keys Set for the Curve</p> 109 <a href="assets/visibility_animation03.png" rel="ibox" title="Click the image to enlarge"><img class="ui_thumb" src="assets/visibility_animation03.png" alt="Emission color animation"/></a> 110 <p class="hint">Keys can be deleted by selecting the range of keys to be deleted with the mouse and pressing the Delete key.</p> 111 <p>When deleting keys, can be edited as a single curve from Frame 0 to Frame 155 as shown in the figure above.</p> 112 <p>If the animation is played in this state, the model, which disappeared from Frame 70 to Frame 99, will be continuously displayed.</p> 113 <h5>Changing the model display timing</h5> 114 <p>Here, we will try changing the number of frames that display the Toy_Mt model by adding two new keys to the continously displayed curve in Figure 4.</p> 115 <a href="assets/visibility_animation04.png" rel="ibox" title="Click the image to enlarge"><img class="ui_thumb" src="assets/visibility_animation04.png" alt="Emission color animation"/></a> 116 <p class="hint">The keys are added by pressing the S key while the curve is selected in the graph view. <br /> If the added keys are selected in the range specified using the mouse, they can be moved by dragging them with the middle button.</p> 117 <ul> 118 <li>Configure the additional keys as follows: 119 <ul> 120 <li>Horizontal axis 20 / Vertical axis 0</li> 121 <li>Horizontal axis 135 / Vertical axis 0</li> 122 </ul> 123 </li> 124 </ul> 125 <p>If the animation is played with the settings given above, the Toy_Mt sample model will be displayed only during the first and last 20 Frames of the animation.</p> 126 <p>By using the CurveEditor panel and switching between 0 and 1 in this way, you can easily switch between showing/hiding the model. Use of visibility animations is useful when you want to make a model disappear suddenly from the scene at a specified frame.</p> 127 <!-- InstanceEndEditable --> </div> 128 <div class="footer" /> 129</div> 130<hr><p>CONFIDENTIAL</p></body> 131<!-- InstanceEnd --> 132</html> 133
