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>Color Animation</title> 12<!-- InstanceEndEditable --> 13</head> 14<body> 15<div> 16 <div class="body"> <!-- InstanceBeginEditable name="本文のタイトル" --> 17 <h1>Color Animation</h1> 18 <!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="本文" --> 19 <p>This page uses <B>Toy_Mt</B> sample data to describe settings made when applying color animation to a material.</p> 20 <h2>What is Color Animation?</h2> 21 <p>CreativeStudio can apply color animation to a material using the <B>CurveEditor</B> panel.<br /> There are five parameters associated with material color. The reflectivity of light and color of a material can be changed by setting these parameters.</p> 22 <p>Table 1. Types of Material Color</p> 23 <table> 24 <thead> 25 <tr> 26 <th>Material color</th> 27 <th>Description</th> 28 </tr> 29 </thead> 30 <tbody> 31 <tr> 32 <th>Emissive</th> 33 <td>Emission repesents a color that can be seen to emanate from the model itself.</td> 34 </tr> 35 <tr> 36 <th>Ambient</th> 37 <td>Ambient is a color that evenly affects the entire model.<br /> Note that this differs from the global ambient created using ambient lights.</td> 38 </tr> 39 <tr> 40 <th>Diffuse</th> 41 <td>Diffuse is a color influenced by the direction of light. The more a model faces the light source, the more light is reflected and the brighter it appears.</td> 42 </tr> 43 <tr> 44 <th>Specular 0</th> 45 <td><B>Specular 0</B> is a highlight color that reflects off of objects.<br /> Two specular colors, 0 and 1, are available with CreativeStudio.</td> 46 </tr> 47 <tr> 48 <th>Specular 1</th> 49 <td>As with <B>Specular 0</B>, <B>Specular 1</B> is also a hightlight color that reflects off of objects.</td> 50 </tr> 51 </tbody> 52 </table> 53 <h3>Configuring the Color Editor Panel</h3> 54 <p>Use the <B>CurveEditor</B> panel to create and edit color animations for materials.</p> 55 <p>For details on the <B>CurveEditor</B> panel, click <a href="../../../../ui_reference/tool_panel/curveeditor_panel/index.html">here</a>.</p> 56 <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></a> 57 <p>Table 2 gives the settings for the horizontal and vertical axes on the <B>CurveEditor</B> panel used to create material color animations.<br /> <B>Alpha</B> can only be set for <B>Diffuse</B>.</p> 58 <p>Table 2. Setting the Horizontal and Vertical Axes in CurveEditor When Creating Material Animations</p> 59 <table> 60 <thead> 61 <tr> 62 <th>Setting</th> 63 <th>Vertical Axis and Horizontal Axis</th> 64 <th>Description of Setting</th> 65 </tr> 66 </thead> 67 <tbody> 68 <tr> 69 <th rowspan="2">MaterialColor.Emission ( R G B )</th> 70 <td>Vertical axis</td> 71 <td>Emission can be set in the range 0 to 1 for each RGB.<br /> The RGB color component becomes stronger as the set value approaches 1.</td> 72 </tr> 73 <tr> 74 <td>Horizontal axis</td> 75 <td>Number of frames (number of frames to animate the material color)</td> 76 </tr> 77 <tr> 78 <th rowspan="2">MaterialColor.Ambient ( R G B )</th> 79 <td>Vertical axis</td> 80 <td>Ambient can be set in the range 0 to 1 for each RGB.<br /> The RGB color component becomes stronger as the set value approaches 1.</td> 81 </tr> 82 <tr> 83 <td>Horizontal axis</td> 84 <td>Number of frames (number of frames to animate the material color)</td> 85 </tr> 86 <tr> 87 <th rowspan="2">MaterialColor.Diffuse ( R G B A )</th> 88 <td>Vertical axis</td> 89 <td>Diffuse can be set in the range 0 to 1 for each RGBA.<br /> The RGB color component becomes stronger as the set value approaches 1.<br /> For A, the alpha becomes more transparent as the set value approaches 1.</td> 90 </tr> 91 <tr> 92 <td>Horizontal axis</td> 93 <td>Number of frames (number of frames to animate the material color)</td> 94 </tr> 95 <tr> 96 <th rowspan="2">MaterialColor.Specula 0 ( R G B )</th> 97 <td>Vertical axis</td> 98 <td>Specular 0 can be set in the range 0 to 1 for each RGB.<br /> The RGB color component becomes stronger as the set value approaches 1.</td> 99 </tr> 100 <tr> 101 <td>Horizontal axis</td> 102 <td>Number of frames (number of frames to animate the material color)</td> 103 </tr> 104 <tr> 105 <th rowspan="2">MaterialColor.Specula 1 ( R G B )</th> 106 <td>Vertical axis</td> 107 <td>Specular 1 can be set in the range 0 to 1 for each RGB.<br /> The RGB color component becomes stronger as the set value approaches 1.</td> 108 </tr> 109 <tr> 110 <td>Horizontal axis</td> 111 <td>Number of frames (number of frames to animate the material color)</td> 112 </tr> 113 </tbody> 114 </table> 115 <h2>Sample Configuration</h2> 116 <p>This page uses <B>Toy_Mt</B> of the <B>Toy_Block</B> sample data (hereafter referred to simply as <B>Toy_Mt</B>) to describe how material color animations are configured.</p> 117 <ol> 118 <li><a href="#sample_data_reading">Loading sample data</a></li> 119 <li><a href="#curve_editor_confirms">Checking the CurveEditor panel</a></li> 120 <li><a href="#color_animation_edit">Editing the color animation</a></li> 121 <li><a href="#diffuse_animation_edit">Editing the alpha animation</a></li> 122 </ol> 123 <a name="sample_data_reading" id="sample_data_reading"></a> 124 <h3>Loading sample data</h3> 125 <p>Use CreativeStudio to load the <B>Toy_Mt</B> sample data prepared in the following folder.<br /> " %NW4C_ROOT%/SampleData/Graphics/Intermediate/Tutorial/toy_block/toy_mt.cres"</p> 126 <p>On the CreativeStudio menu, select <B>File > Open > Intermediate file</B> and open <B>toy_mt.cres</B>.</p> 127 <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> 128 <h4>Confirming the Sample Data</h4> 129 <p>Confirm setting information for the <B>Toy_Mt</B> sample data.</p> 130 <h5>Materials</h5> 131 <p><B>Toy_Mt</B> uses four materials.<br /> Material settings have been made using a 3D CG tool and placed in an intermediate file using a plug-in prepared for CreativeStudio. </p> 132 <p>Table 3. Material Properties Set Using the 3D CG Tool</p> 133 <table> 134 <thead> 135 <tr> 136 <th>Materials</th> 137 <th>Description</th> 138 </tr> 139 </thead> 140 <tbody> 141 <tr> 142 <th>Toy_Mt1 Lambert</th> 143 <td>The <B>Toy_Mt1.tga</B> texture is applied to the color of Lambert nodes.</td> 144 </tr> 145 <tr> 146 <th>Toy_Mt2 Phong</th> 147 <td>The <B>Toy_Mt2.tga</B> texture is applied to the color of Phong nodes.</td> 148 </tr> 149 <tr> 150 <th>Toy_Mt3 Phong</th> 151 <td>The <B>Toy_Mt2.tga</B> texture is applied to the color of Phong nodes.</td> 152 </tr> 153 <tr> 154 <th>Toy_Mt4 Phong</th> 155 <td>The <B>Toy_Mt2.tga</B> texture is applied to the color of Phong nodes.</td> 156 </tr> 157 </tbody> 158 </table> 159 <h5>Material Color Animation</h5> 160 <p>Two material color animations are used with <B>Toy_Mt</B>.</p> 161 <table> 162 <thead> 163 <tr> 164 <th>Animation Types</th> 165 <th>Description</th> 166 </tr> 167 </thead> 168 <tbody> 169 <tr> 170 <th>Color Animation</th> 171 <td> A color animation is set under CreativeStudio for the body parts of the model.</td> 172 </tr> 173 <tr> 174 <th>Alpha Animation</th> 175 <td>An alpha animation is set under CreativeStudio.</td> 176 </tr> 177 </tbody> 178 </table> 179 <h5>Other animations</h5> 180 <p>The following animations are also used with <B>Toy_Mt</B> in addition to material color animations.</p> 181 <table> 182 <thead> 183 <tr> 184 <th>Animation Types</th> 185 <th>Description</th> 186 </tr> 187 </thead> 188 <tbody> 189 <tr> 190 <th>Rotate Animation</th> 191 <td>The rotate animation applied to the model has been created using a 3DCG tool.</td> 192 </tr> 193 <tr> 194 <th>Visibility Animation</th> 195 <td>The model's visibility animation has been configured using CreativeStudio.</td> 196 </tr> 197 </tbody> 198 </table> 199 <p>This page describes only the material color animations.</p> 200 <a name="curve_editor_confirms" id="curve_editor_confirms"></a> 201 <h3>Checking the CurveEditor panel</h3> 202 <p>At this point, check the animation settings for the Toy_Mt2 material on the CurvePanel.<br /> Select <B>Toy_Mt2</B> displayed in the <B>Contents</B> panel to open the <B>CurveEditor</B> panel.</p> 203 <p>Figure 1. Select <B>Toy_Mt2</B> on the <B>Contents</B> panel.</p> 204 <img class="manual_image" src="assets/material_animation_curve.png" alt="Material Color Animation Contents"/> 205 <p>In CreativeStudio, select <B>Window > CurveEditor</B> to open CurveEditor.</p> 206 <p>Figure 2. <B>CurveEditor</B> Panel for <B>Toy_Mt2</B></p> 207 <a href="assets/material_color_animation.png" rel="ibox" title="Click the image to enlarge"><img class="ui_thumb" src="assets/material_color_animation.png" alt="Toy01M"/></a> 208 <p>Nodes for which a curve is set are displayed in bold in the graph tree view of the <B>CurveEditor</B> panel.</p> 209 <p>Table 5. <B>Toy_Mt2</B> Nodes for Which an Animation is Set</p> 210 <table> 211 <thead> 212 <tr> 213 <th>Nodes</th> 214 <th>Description</th> 215 </tr> 216 </thead> 217 <tbody> 218 <tr> 219 <th>MaterialColor.Emission ( R G B )</th> 220 <td>An animation has been set for all RGB of the emission.</td> 221 </tr> 222 <tr> 223 <th>MaterialColor.Diffuse ( R G B A )</th> 224 <td>An animation has been set only for the alpha of the diffuse.</td> 225 </tr> 226 </tbody> 227 </table> 228 <a name="color_animation_edit" id="color_animation_edit"></a> 229 <h3>Editing the color animation</h3> 230 <p>This page describes how to create and edit material color animations by actually using <B>Toy_Mt2</B>.</p> 231 <p>The editing method for color animations is basically the same for all material colors.</p> 232 <p>Selecting <B>MaterialColor.Emission</B> in the graph tree view on the <B>CurveEditor</B> panel will display the emission color animation curve shown in Figure 3 in the graph view.</p> 233 <p>Figure 3. Emission Color Animation Curve</p> 234 <a href="assets/material_color_animation01.png" rel="ibox" title="Click the image to enlarge"><img class="ui_thumb" src="assets/material_color_animation01.png" alt="Emission color animation"/></a> 235 <p>Select the graph view and press the <B>A</B> key. The display will be arranged to show all keys currently set.</p> 236 <p class="hint">If more than one curve has been set for the selected node, all curves currently set are displayed simultaneously as shown in Figure 3, and can be edited.</p> 237 <p>If you want to display a curve by itself, select the curve set inside a node from the graph tree view.</p> 238 <img class="manual_image" src="assets/material_color_animation02.png" alt="Image of the Graph Tree View When a Node is Open"/> 239 <p>Only the selected curve is displayed and can be edited.</p> 240 <p>Figure 4. RGB Curves Set for <B>Toy_Mt2</B> Emission</p> 241 <img class="manual_image" src="assets/material_color_animation03.png" alt="Emission Color Animation"/> 242 <p>The settings given below have been made for the <B>Toy_Mt2</B> emission color animation.</p> 243 <table> 244 <thead> 245 <tr> 246 <th>Frame</th> 247 <th>Color components</th> 248 <th>Description of Setting</th> 249 <th>Result</th> 250 </tr> 251 </thead> 252 <tbody> 253 <tr> 254 <th rowspan="3">0 ～ 20</th> 255 <th>R</th> 256 <td>The R color component is not applied to the model because its value is 0 until Frame 20.</td> 257 <td rowspan="3">The G and B color components make <B>Toy_Mt2</B> appear aqua.</td> 258 </tr> 259 <tr> 260 <th><CODE>G</CODE></th> 261 <td>The G color component is 1 until Frame 20.</td> 262 </tr> 263 <tr> 264 <th>B</th> 265 <td>The B color component is 1 until Frame 160.</td> 266 </tr> 267 <tr> 268 <th rowspan="3">21 ～ 30</th> 269 <th>R</th> 270 <td>The curve for the R color component is created so that it approaches 1 between Frame 21 and Frame 30.</td> 271 <td rowspan="3">Because the R color component and G color component are swapped for each other, the color animation makes <B>Toy_Mt2</B> appear to change from aqua to purple.</td> 272 </tr> 273 <tr> 274 <th><CODE>G</CODE></th> 275 <td>The curve for the G color component is created so that it approaches 0 between Frame 21 and Frame 30.</td> 276 </tr> 277 <tr> 278 <th>B</th> 279 <td>The B color component is 1 until Frame 160.</td> 280 </tr> 281 <tr> 282 <th rowspan="3">31 ～ 110</th> 283 <th>R</th> 284 <td>There is no change to the curve during this period.</td> 285 <td rowspan="3"><B>Toy_Mt2</B> remains purple and is rotated. The model itself disappears midway by applying a visibility animation.</td> 286 </tr> 287 <tr> 288 <th><CODE>G</CODE></th> 289 <td>There is no change to the curve during this period.</td> 290 </tr> 291 <tr> 292 <th>B</th> 293 <td>The B color component is 1 until Frame 160.</td> 294 </tr> 295 <tr> 296 <th rowspan="3">111 ～ 120</th> 297 <th>R</th> 298 <td>The curve for the R color component is created so that it approaches 0 between Frame 111 and Frame 120.</td> 299 <td rowspan="3">Because the R color component and G color component are swapped for each other from Frame 111 through Frame 120, the color animation makes <B>Toy_Mt2</B> appear to change from purple back to aqua.</td> 300 </tr> 301 <tr> 302 <th><CODE>G</CODE></th> 303 <td>The curve for the G color component is created so that it approaches 1 between Frame 111 and Frame 120.</td> 304 </tr> 305 <tr> 306 <th>B</th> 307 <td>The B color component is 1 until Frame 160.</td> 308 </tr> 309 <tr> 310 <th rowspan="3">121 ～ 160</th> 311 <th>R</th> 312 <td>There is no change to the curve during this period.</td> 313 <td rowspan="3"><B>Toy_Mt2</B> remains aqua.</td> 314 </tr> 315 <tr> 316 <th><CODE>G</CODE></th> 317 <td>There is no change to the curve during this period.</td> 318 </tr> 319 <tr> 320 <th>B</th> 321 <td>The B color component is 1 until Frame 160.</td> 322 </tr> 323 </tbody> 324 </table> 325 <h4>Editing Example</h4> 326 <p>At this point, let's try some simple edits to the <B>Toy_Mt2</B> color animation.</p> 327 <p>On the <B>CurveEditor</B> panel, make settings so that the R and G curves for <B>MaterialColor.Emission</B> are swapped for each other.</p> 328 <a href="assets/material_color_animation04.png" rel="ibox" title="Click the image to enlarge"><img class="ui_thumb" src="assets/material_color_animation04.png" alt="Edit R and G using CurveEditor"/></a> 329 <p>Confirm that the color animation for <B>Toy_Mt2</B> changes from going from aqua to purple and then from purple to aqua, before editing, to going from purple to aqua and then from aqua to purple, after editing, by reversing the shape of the R and G curves for <B>MaterialColor.Emission</B> and then playing the animation.</p> 330 <h5>Technique</h5> 331 <p>On the graph view of the <B>CurveEditor</B> panel, you can copy a selected curve using Ctrl+C.<br /> Use Ctrl+V to past a copied curve.</p> 332 <p class="warning">Copy does not copy only the keys that are set, it copies the <em>entire curve</em>.</p> 333 <a name="diffuse_animation_edit" id="diffuse_animation_edit"></a> 334 <h3>Editing the alpha animation</h3> 335 <p>This page describes how to create and edit an alpha animation using <B>MaterialColor.Diffuse</B> for <B>Toy_Mt2</B>.</p> 336 <p>Selecting <B>MaterialColor.Diffuse</B> in the graph tree view on the <B>CurveEditor</B> panel will display the diffuse alpha animation curve shown in Figure 6 in the graph view.</p> 337 <p>Figure 6. Alpha Animation Curve for Diffuse</p> 338 <a href="assets/material_diffuse_animation01.png" rel="ibox" title="Click the image to enlarge"><img class="ui_thumb" src="assets/material_diffuse_animation01.png" alt="Emission color animation"/></a> 339 <p>Select the graph view and press the <B>A</B> key. The display will be arranged to show all keys currently set.</p> 340 <p>Only an alpha animation is set for <B>MaterialColor.Diffuse</B>.</p> 341 <table> 342 <thead> 343 <tr> 344 <th>Frame</th> 345 <th>Color components</th> 346 <th>Description of Setting</th> 347 <th>Result</th> 348 </tr> 349 </thead> 350 <tbody> 351 <tr> 352 <th>0 ～ 10</th> 353 <th>A</th> 354 <td>A curve where the value of diffuse approaches 1 between Frame 0 and Frame 10 is created for the alpha component.</td> 355 <td>Software creates a curve where the vertical axis on the <B>CurveEditor</B> panel (representing transparency) runs from 0 to 1.<br /> This results in an animation where the model becomes opaque approaching Frame 10.</td> 356 </tr> 357 <tr> 358 <th>11 ～ 145</th> 359 <th>A</th> 360 <td>A curve is created where the alpha component is fixed to 1 during this period.</td> 361 <td>The model continues to be displayed from Frame 11 to Frame 145.<br /> Visibility animation is used to make the model disappear in the middle.</td> 362 </tr> 363 <tr> 364 <th>146 ～ 155</th> 365 <th>A</th> 366 <td>A curve where the value of diffuse approaches 0 between Frame 146 and Frame 155 is created for the alpha component.</td> 367 <td>Software creates a curve where the vertical axis on the <B>CurveEditor</B> panel (representing transparency) runs from 1 to 0.<br /> This results in an animation where the model becomes transparent approaching Frame 155.</td> 368 </tr> 369 </tbody> 370 </table> 371 <h4>Editing Example</h4> 372 <p>At this point, let's try some simple edits to the <B>Toy_Mt2</B> alpha animation.</p> 373 <p>On the <B>CurveEditor</B> panel, edit the curve for the alpha of <B>MaterialColor.Diffuse</B>.</p> 374 <a href="assets/material_diffuse_animation02.png" rel="ibox" title="Click the image"><img class="ui_thumb" src="assets/material_diffuse_animation02.png" alt="Edit A using CurveEditor"/></a> 375 <p>The original curve was created so that it goes from transparent to visible in a short period from Frame 0 to Frame 10. Now, we will edit the curve so that the alpha animation goes more slowly.</p> 376 <ul> 377 <li>Move the key located at Frame 10 to Frame 60</li> 378 <li>Move the key located at Frame 145 to Frame 100</li> 379 </ul> 380 <p>Confirm that the model becomes visible more slowly than before changing settings by playing back the animation after editing.<br /> Application of this method makes it easy to make a model go from transparent to semi-transparent or even opaque in all kinds of situations.</p> 381 <!-- InstanceEndEditable --> </div> 382 <div class="footer" /> 383</div> 384<hr><p>CONFIDENTIAL</p></body> 385<!-- InstanceEnd --> 386</html> 387
