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"><!-- InstanceBegin template="/Templates/default_template.dwt" codeOutsideHTMLIsLocked="false" --> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5<meta http-equiv="Content-Style-Type" content="text/css" /> 6<!-- InstanceBeginEditable name="CSS の相対パス指定" --> 7<link href="../../../common/manual.css" rel="stylesheet" type="text/css" /> 8<script type="text/javascript" src="../../../common/ibox.js"></script> 9<!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="ページのタイトル" --> 10<title>Creating Particles</title> 11<!-- InstanceEndEditable --> 12</head> 13<body> 14<div> 15 <div class="body"> <!-- InstanceBeginEditable name="本文のタイトル" --> 16 <h1>Creating Effects Using Particles</h1> 17 <!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="本文" --> 18 <p>You can create effects in CreativeStudio by using particles.</p> 19 <p>This page describes the basics of creating effects and how to configure color animations for particles. </p> 20 <h2>Preparing to Create Effects with Particles</h2> 21 <p>On the CreativeStudio menu, select<B> Create</B> → <B>Effect</B>.</p> 22 <p>The <B>ParticleCtrCreationPanel</B> dialog box appears, where you can enter a name for the particle.<br /> In this example, we enter "color" for the name.</p> 23 <img class="manual_image" src="assets/particle_create01.png" alt="Entering the particle name"/> 24 <p>Enter a particle name, then click <B>Apply and close</B> or <B>Apply </B>to create the effect.</p> 25 <p>When you create a particle, CreativeStudio generates the following content.</p> 26 <table> 27 <thead> 28 <tr> 29 <th>Content name</th> 30 <th>Description</th> 31 </tr> 32 </thead> 33 <tbody> 34 <tr> 35 <th><user-supplied-name>Model</th> 36 <td>This is the particle model.<br /> You can create multiple particle sets in a particle model and then layer them together.<br /> You can then display or hide these particle sets, and expand or shrink, rotate, and move particles centered on the particle model.</td> 37 </tr> 38 <tr> 39 <th><user-supplied-name>Particle</th> 40 <td><span class="hint">This is a particle set.<br /> You can use a particle set to configure particles and create particle animations.</span></td> 41 </tr> 42 <tr> 43 <th><user-supplied-name>Material</th> 44 <td>This is the default material used only for particle effects.</td> 45 </tr> 46 <tr> 47 <th><user-supplied-name>Texture</th> 48 <td>This is the default texture used only for particle effects.</td> 49 </tr> 50 <tr> 51 <th><user-supplied-name>Emitter</th> 52 <td>This is the particle emitter.<br /> You can use the particle emitter to specify the particle set into which particles are emitted.<br /> You can also control how many particles are emitted and for how long.</td> 53 </tr> 54 </tbody> 55 </table> 56 <p class="hint">Each type of content is named according to the particle name you entered earlier.<br /> Ex: colorModel</p> 57 58 <h3>Checking Particles</h3> 59 <p>Check the created particle.</p> 60 <a href="assets/particle_create.png" rel="ibox" title="Click the image to enlarge"><img class="ui_thumb" src="assets/particle_create.png" alt="Created particle image"/></a> 61 <p>Click the Play button in CreativeStudio to show the effect created in the <B>Preview </B>panel.</p> 62 <h3>Setting Particle Effects</h3> 63 <p>To make it easier to check the color animations you are creating, you can configure the direction of movement of particles and the number of frames.</p> 64 <h4>Configuring the Particle Movement Direction</h4> 65 <p>Use the particle set <B>Properties</B> panel to set the direction of movement of particles.</p> 66 <p>To display the particle-set panel in the <B>Properties</B> panel of the main window, click once on <B>colorParticle</B> (particle set) in CreativeStudio's <B>Contents</B> panel.</p> 67 <a href="assets/particle_create03.png" rel="ibox" title="Click the image"><img class="ui_thumb" src="assets/particle_create03.png" alt="Particle set Properties panel image"/></a> 68 <p>In this example, we configure the particles to move upwards at a uniform velocity.</p> 69 <p>From the <B>Position</B> category group box, select <B>Add in specified direction</B> and press <B>Add</B>.<br /> Now that the <B>Add in specified direction</B> item has been added, set these values:</p> 70 <p>Direction Y: 1<br />Speed: 0.2</p> 71 <p>With these settings, particles move upwards at a uniform velocity.</p> 72 <img class="manual_image" src="assets/particle_create04.png" alt="Particles moving upwards at a uniform velocity"/> 73 <h4>Configuring the Timeline Panel</h4> 74 <p>In the timeline panel of CreativeStudio's main window, change the last frame to 200.</p> 75 <p class="hint">The frame number cannot be changed when the <B>Play</B> button is pressed, so stop the preview to change the value.</p> 76 <h3>Color Animation Settings</h3> 77 <p>You can configure color animation for the particles moving upwards at a uniform velocity.</p> 78 <h4>Creating a Color Animation</h4> 79 <p>In the particle set panel, scroll to the <B>Color</B> item, and change the <B>Animation</B> drop-down list to <B>Overwrite With Previous Value</B>.</p> 80 <img class="manual_image" src="assets/particle_create05.png" alt="Changing color animation absolute values"/> 81 <p>Changing the setting to <B>Overwrite With Previous Value</B> will display <B>Overwrite With Previous Value</B> in the color animation setting.</p> 82 <p>Use the <B>Curve Editor</B> panel to edit the animation.</p> 83 <h5>Opening the Curve Editor Panel</h5> 84 <p>On the CreativeStudio menu, click <B>Window</B> → <B>Curve Editor</B>.</p> 85 <p>For details on the CurveEditor panel, click <a href="../../../ui_reference/tool_panel/curveeditor_panel/index.html">here</a>.</p> 86 <a href="assets/particle_create06.png" rel="ibox" title="Click the image to enlarge"><img class="ui_thumb" src="assets/particle_create06.png" alt="CurveEditor panel image"/></a> 87 <p>When you open the <B>CurveEditor</B> panel, <B>colorParticle</B> will appear at the top of the tree view. Click to expand the tree and show X, Y, and Z.</p> 88 <p class="hint">XYZ correspond to RGB color channels.</p> 89 <h5>Creating Curves</h5> 90 <p>Create animation curves for each of the X, Y, and Z color components of colorParticle.</p> 91 <p>Create animation curves as shown in the figures below.</p> 92 <img class="user_guide_chart" src="assets/startup_guide_effect_curve.png" alt="Color animation curves"/> 93 <p class="hint">You can copy your curves by hitting Ctrl+C, and paste by hitting Ctrl+V.<br /> You can save time by creating a curve for one color channel and then copying to other color channels and modifying as needed, instead of having to create from scratch each time.</p> 94 <p>After creating the color curves, you can check in the <B>Preview</B> window to see that the particles are animated, using the colors in the timing specified by the curves.</p> 95 <img class="manual_image" src="assets/particle_create07.png" alt="Particle animation"/> 96 <h4>Configuring Random Particles</h4> 97 <p>You can configure your animation to use random timings.</p> 98 <h5>Configuring the Particle Set Panel</h5> 99 <p>Change the color animation Playback options you just configured as shown below.</p> 100 <ul> 101 <li>Select <B>Specify frame count</B> as the option and then change the <B>Frames per cycle</B> value to 100.<br />Selecting <B>Specify frame count</B> allows you to freely change the length of the curves.<br /> In this example, we set the value to 100, and since this is the same as for the curves created earlier, the animation is rendered as-is.</li> 102 <li>Check the <B>Random offset</B> option.<br />Checking this option allows you to start the animation at any random offset.</li> 103 </ul> 104 <p class="hint">After changing the <B>Frames per cycle</B> value, you can run the Preview to confirm that the animation is changing randomly.</p> 105 <img class="manual_image" src="assets/particle_create08.png" alt="Playback options"/> <!-- InstanceEndEditable --> </div> 106 <div class="footer" /> 107</div> 108<hr><p>CONFIDENTIAL</p></body> 109<!-- InstanceEnd --></html> 110
