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="ja" lang="ja">
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 -->
11<!-- InstanceBeginEditable name="ページのタイトル" -->
12<title>カラーアニメーション</title>
13<!-- InstanceEndEditable -->
14</head>
15<body>
16<div>
17  <div class="body"> <!-- InstanceBeginEditable name="本文のタイトル" -->
18    <h1>アニメーションの設定</h1>
19    <!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="本文" -->
20    <p>ここでは、「サンプルキューブ」「アンビエントライト」「フラグメントライト」「カーブエディタパネル」を使用して、サンプルを赤く明滅させるアニメーションを設定します。</p>
21    <h2>サンプルモデルの作成</h2>
22    <p class="no">（1）CreativeStudio のメニュー [作成]→[サンプル]→[キューブモデル] を選択し、サンプルモデルを作成します。</p>
23    <a href="assets/color_animation03.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/color_animation03.png" alt="サンプルキューブ作成画像"/></a>
24    <p>ここでは、100 フレームでループするアニメーションを作成します。</p>
25    <p>CreativeStudio のメインウィンドウにあるタイムラインパネルの「開始フレームを 0」「 最終フレームを 100」 に変更します。</p>
26    <h2>ライトの作成</h2>
27    <p>「アンビエントライト」と「フラグメントライト」を作成します。</p>
28    <p class="no">（1）CreativeStudio のメニュー [作成]→[ライト]→[アンビエントライト] を選択して、アンビエントライトを作成します。</p>
29    <p class="no">（2）CreativeStudio のメニュー [作成]→[ライト]→[フラグメントライト] を選択して、フラグメントライトを作成します。</p>
30    <p class="hint_warn">注意：<br />
31      アンビエントライトを作成する場合は、必ずフラグメントライトも作成してください。<br />
32      アンビエントライトは、光源 ( フラグメントライト ) がないと真っ黒なままになります。</p>
33    <p>図 1 ライトの作成</p>
34    <img src="assets/color_animation04.png" alt="フラグメントライト作成完了"/>
35    <h2>アニメーションの作成</h2>
36    <p>作成したアンビエントライトのカラーに「カーブエディタパネル」を使用してアニメーションをつけます。</p>
37    <p class="no">（1）CreativeStudio の コンテンツパネルに表示されているマテリアル ( MaterialCtr1 ) を選択します。</p>
38    <img src="assets/color_animation05.png" alt="フラグメントライト作成完了"/>
39    <p class="no">（2）メニュー [ウィンドウ]→[カーブエディタ] を選択し、カーブエディタパネルを開きます。</p>
40    <img src="assets/color_animation06.png" alt="カーブエディタパネルを開く"/>
41    <p class="no">（3）カーブエディタパネルのコンテンツパネルに表示されている MaterialColor.Emission の R を選択してカーブを作成します。</p>
42    <p class="new_hint">アニメーションは、マテリアルカラーの「エミッションの R 要素」に作成します。<br />
43      これにより、アンビエントカラーに対してカラーの変更を行い赤く光る効果がでます。</p>
44    <a href="assets/color_animation.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/color_animation.png" alt="カーブエディタパネル"/></a>
45    <p>カーブエディタパネルの詳細は、<a href="../../../ui_reference/tool_panel/curveeditor_panel/index.html">こちら</a>を参照してください。</p>
46    <h3>カーブ作成方法の基本</h3>
47    <ul>
48      <li>カーブエディタパネルでカーブが表示されている部分 ( グラフビュー ) をクリックしてアクティブ状態にします。</li>
49      <li>キーの作成は、キーを打ちたい箇所で「S キー」を押します。</li>
50      <li>作成したキーの移動は、キーを「範囲選択後、中ボタンでドラッグ」して位置を変更します。</li>
51      <li>キーを削除したい場合は、消したいキーを「範囲選択して、Delete キー」を押します。</li>
52    </ul>
53    <p class="new_hint">補足：<br />
54      上記は基本的な操作です。<br />
55      カーブエディタパネルの「ショートカットキー」の詳細は、<a href="../../../ui_reference/shortcut/index.html#curveeditor_shortcut">こちら</a>を参照してください。</p>
56    <h3>カラーアニメーションの確認</h3>
57    <p>CreativeStudio のメインウィンドウにある「再生ボタン」を押すとキューブのアンビエントカラーが赤く明滅アニメーションします。</p>
58    <img src="assets/color_animation02.png" alt="マテリアルアニメーション作成完了"/>
59    <p class="new_hint">カーブエディタパネルで、カーブを編集したり、その他のカラー要素（G や B）にカーブを作成すると様々なカラーアニメーションが作成できます。</p>
60    <!-- InstanceEndEditable --> </div>
61  <div class="footer" />
62</div>
63</body>
64<!-- InstanceEnd -->
65</html>
66