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>Animation Settings</h1> 18 <!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="本文" --> 19 <p>Here, we use a sample cube and the <B>Curve editor</B> panel to create a color animation that turns a texture red.</p> 20 <h2>Creating a Sample Model</h2> 21 <p class="no">(1) On the CreativeStudio menu, select Create → Sample → Cube model to create a sample model.</p> 22 <a href="assets/color_animation03.png" rel="ibox" title="Click the image to enlarge"><img class="ui_thumb" src="assets/color_animation03.png" alt="Sample cube creation image"/></a> 23 <p>Here, we create an animation that loops after 100 frames.</p> 24 <p>On the timeline shown in the CreativeStudio main window, change the start frame to 0 and the end frame to 100.</p> 25 <h2>Creating Lights</h2> 26 <p>Here, we will create an ambient light and fragment light.</p> 27 <p class="no">(1) On the CreativeStudio menu, select Create → Light → Ambient light to create an ambient light.</p> 28 <p class="no">(2) In CreativeStudio, click Create → Light → Fragment light to create a fragment light.</p> 29 <p class="hint_warn">Caution:<br /> When creating an ambient light, always make sure to create a fragment light as well. <BR> Ambient lights will remain black unless there is a light source (fragment light) to work with.</p> 30 <p>Figure 1 Creating Lights</p> 31 <img src="assets/color_animation04.png" alt="Fragment Light Creation Completed"/> 32 <h2>Creating Animations</h2> 33 <p>Now, we will apply an animation to the ambient color just created using the <B>Curve editor</B> panel.</p> 34 <p class="no">(1) Select a material (MaterialCtr1) shown in CreativeStudio's content panel.</p> 35 <img src="assets/color_animation05.png" alt="Fragment Light Creation Completed"/> 36 <p class="no">(2) Click Window → Curve editor to open the <B>Curve editor</B> panel.</p> 37 <img src="assets/color_animation06.png" alt="Opening the Curve Editor Panel"/> 38 <p class="no">(3) In the <B>Contents</B> panel of <B>Curve editor</B>, select <B>R</B> under MaterialColor.Emission to create a curve.</p> 39 <p class="new_hint">An animation will be created for the emission R component of the material color. <BR> This creates an effect where the color changes from the ambient color to shining red.</p> 40 <a href="assets/color_animation.png" rel="ibox" title="Click the image"><img class="ui_thumb" src="assets/color_animation.png" alt="CurveEditor panel"/></a> 41 <p>For details on the <B>Curve editor</B> panel, click <a href="../../../ui_reference/tool_panel/curveeditor_panel/index.html">here</a>.</p> 42 <h3>Curve creation basics</h3> 43 <ul> 44 <li>Click on the part of the <B>Curve editor</B> panel that displays the graph (graph view) to activate.</li> 45 <li>To create a key, press the S key while the mouse cursor is pointed at the location where the key is to be placed.</li> 46 <li>To move a selected key, select the key by surrounding it, and then drag it to the desired location while holding down the middle mouse button (center wheel).</li> 47 <li>To delete a key, select the key to be deleted by surrounding it, and press the Delete key.</li> 48 </ul> 49 <p class="new_hint"><B>Note:</B> The above are the basic operations.<BR> For details on <B>Curve editor</B> shortcut keys, click <a href="../../../ui_reference/shortcut/index.html#curveeditor_shortcut">Here</a>.</p> 50 <h3>Checking a Color Animation</h3> 51 <p>Press the play button located in the CreativeStudio main window to display an animation where the cube ambient color flashes red.</p> 52 <img src="assets/color_animation02.png" alt="Material animation creation complete"/> 53 <p class="new_hint">On the <B>Curve editor</B> panel, various color animation can be created by creating curves for the other color components (G and B).</p> 54 <!-- InstanceEndEditable --> </div> 55 <div class="footer" /> 56</div> 57<hr><p>CONFIDENTIAL</p></body> 58<!-- InstanceEnd --> 59</html>
