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>Animations under CreativeStudio can be configured using curves. </p>
20    <p>Use the <B>CurveEditor</B> panel to create and edit curves.</p>
21    <h2>Curve Editor panel</h2>
22    <p>You can create color animations and texture pattern animations using the <B>CurveEditor</B> panel.</p>
23    <p>For details on the <B>CurveEditor</B> panel, click <a href="../../../../ui_reference/tool_panel/curveeditor_panel/index.html">here</a>.</p>
24    <a href="assets/color_animation01.png" rel="ibox" title="Click the image"><img class="ui_thumb" src="assets/color_animation01.png" alt="Editable Curve Image"/></a>
25    <h2>Creating a Color Animation</h2>
26    <p>Here we use a sample cube and the <B>CurveEditor</B> panel to create a color animation that turns a texture red.</p>
27    <p class="hint">Color animations use emission lighting.<br /> This creates an effect where the color changes from the ambient, shining red.</p>
28    <h3>Creating a Sample Model</h3>
29    <p>On the CreativeStudio menu, select <B>Create</B> → <B>Sample</B> → <B>Cube model</B> to create a sample model. </p>
30    <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>
31    <h3>Preparing to Create an Animation</h3>
32    <p>Here, we create an animation that loops after 100 frames.</p>
33    <p>On the timeline shown in the CreativeStudio main window, change the start frame to 0 and the end frame to 100. </p>
34    <h4>Creating Lights</h4>
35    <p>Create a light for confirmation.</p>
36    <p>On the CreativeStudio menu, select <B>Create</B> → <B>Light</B> → <B>Ambient light</B> to create an ambient light.</p>
37    <!--   <h5>ライトの方向を変更</h5>   <p>作成したフラグメントライトの方向を変更します。<br />     コンテンツパネルにフラグメントライトのアイコンが表示されていますので、クリックします。<br />     クリックするとフラグメントライトパネルがプロパティパネルに表示されますので、方向の Y 軸を 1 に変更します。</p> -->
38    <h3>Creating Animations</h3>
39    <p>Select a material shown in CreativeStudio's content panel.</p>
40    <p>Click <B>Window</B> → <B>Curve Editor</B>.</p>
41    <p>In the <B>Contents</B> panel of <B>CurveEditor</B>, select <B>R</B> under <B>MaterialColor.Emission</B> to create a curve.</p>
42    <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>
43    <h4>Curve creation basics</h4>
44    <ul>
45      <li>Click on the graph view to fully activate <B>CurveEditor</B>.</li>
46      <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>
47      <li>To move a selected key, select the key by surrounding, and then drag it to the desired location while holding down the middle mouse button (center wheel). </li>
48      <li>To delete a key, select the key to be deleted by surrounding it, and press the Delete key. </li>
49    </ul>
50    <p>For details on <B>Curve Editor</B> shortcut keys, click <a href="../../../../ui_reference/shortcut/index.html#curveeditor_shortcut">Here</a>.</p>
51    <h4>Checking a Color Animation</h4>
52    <p>On the timeline panel in the CreativeStudio main window, click the <B>Play</B> button to check that a blinking red animation appears in the <B>Preview</B> panel.</p>
53    <img class="manual_image" src="assets/color_animation02.png" alt="Material animation creation complete"/> <!-- InstanceEndEditable --> </div>
54  <div class="footer" />
55</div>
56<hr><p>CONFIDENTIAL</p></body>
57<!-- InstanceEnd -->
58</html>
59