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 animation 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.</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 <B>Curve editor</B> 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 <B>CurveEditor</B> 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>Settings</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 describes how to configure visibility animations using the ToyMt sample data of TutorialToyBlock.</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>On the CreativeStudio menu, select <B>File</B> > <B>Open</B> > <B>Intermediate file</B> and open toy_mt.cres.</p> 58 <p>" %NW4C_ROOT%/SampleData/Graphics/Intermediate/ManualResource/TutorialToyBlock/ToyMt.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 ToyMt on the <B>CurveEditor</B> panel.</p> 62 <p>Select the Toy_Mt model displayed in the <B>Contents</B> panel to open the <B>CurveEditor</B> panel.</p> 63 <p>Figure 1. Select Toy_Mt on the Contents panel.</p> 64 <img src="assets/visibility_animation.png" alt="Material Color Animation Contents"/> 65 <p>In CreativeStudio, select Window > CurveEditor to open CurveEditor.</p> 66 <p>Figure 2 Curve Editor Panel for Toy_Mt</p> 67 <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> 68 <p>Parameter settings configuring the curve are displayed in bold in the graph tree view of the <B>CurveEditor</B> panel.</p> 69 <p>A visibility animation has been created for Curve of IsVisible.</p> 70 <a name="visibility_animation_edit" id="visibility_animation_edit"></a> 71 <h3>Editing Visibility Animations</h3> 72 <p>This page describes how to create and edit visibility animations by actually using Toy_Mt.</p> 73 <p>Selecting <B>IsVisible</B> in the graph tree view on the <B>CurveEditor</B> panel will display the visibility animation curve shown in Figure 3 in the graph view.</p> 74 <p>Figure 3 Visibility Animation Curve</p> 75 <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> 76 <p>Select the graph view and press the <B>A</B> key. The display will be arranged to show all keys currently set.</p> 77 <p>The visibility animation settings of Toy_Mt are given below.</p> 78 <p>Toy_Mt, which had been visible, is hidden from Frame 70 to Frame 99. It reappears again starting from Frame 100.</p> 79 <table> 80 <thead> 81 <tr> 82 <th>Frame</th> 83 <th>Description of Setting</th> 84 <th>Result</th> 85 </tr> 86 </thead> 87 <tbody> 88 <tr> 89 <th>0 ～ 69</th> 90 <td>Keys are set to 1.</td> 91 <td>ToyMt is displayed during this period.</td> 92 </tr> 93 <tr> 94 <th>70 ～ 99</th> 95 <td>Keys are set to 0.</td> 96 <td>ToyMt is not displayed during this period.</td> 97 </tr> 98 <tr> 99 <th>100 ～ 180</th> 100 <td>Keys are set to 1.</td> 101 <td>ToyMt is displayed during this period.</td> 102 </tr> 103 </tbody> 104 </table> 105 <h4>Editing Example</h4> 106 <ol> 107 <li><a href="#not_hide_model">Setting the model so it is not hidden</a></li> 108 <li><a href="#change_timing">Changing the model display timing</a></li> 109 </ol> 110 <a name="not_hide_model" id="not_hide_model"></a> 111 <h5>Setting the model so it is not hidden</h5> 112 <p>Delete keys set to 0 on the CurveEditor panel as shown below.</p> 113 <p>Figure 4 Deleting Keys Set for the Curve</p> 114 <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> 115 <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> 116 <p>When deleting keys, can be edited as a single curve from Frame 0 to Frame 180 as shown in the figure above.</p> 117 <p>If the animation is played in this state, the model, which disappeared from Frame 70 to Frame 99, will be displayed.</p> 118 <a name="change_timing" id="change_timing"></a> 119 <h5>Changing the model display timing</h5> 120 <p>Here, we will try changing the number of frames that display the ToyMt model by adding two new keys to the continously displayed curve in Figure 4.</p> 121 <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> 122 <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> 123 <ul> 124 <li>Configure the additional keys as follows: 125 <ul> 126 <li>Horizontal axis 20 / Vertical axis 0</li> 127 <li>Horizontal axis 160 / Vertical axis 1</li> 128 </ul> 129 </li> 130 </ul> 131 <p>If the animation is played with the settings given above, the ToyMt sample model will be displayed only during the first and last 20 Frames of the animation.</p> 132 <!-- InstanceEndEditable --> </div> 133 <div class="footer" /> 134</div> 135<hr><p>CONFIDENTIAL</p></body> 136<!-- InstanceEnd --> 137</html>
