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<!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="ページのタイトル" --> 10<title>Animation Methods</title> 11<!-- InstanceEndEditable --> 12</head> 13<body> 14<div> 15 <div class="body"> <!-- InstanceBeginEditable name="本文のタイトル" --> 16 <h1>Animation Methods</h1> 17 <!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="本文" --> 18 <p>This section describes how to animate particle effects in CreativeStudio.</p> 19 <a name="how_to_animate" id="how_to_animate"></a> 20 <h2>Animation Methods</h2> 21 <h3>Add to Previous Value</h3> 22 <!-- #BeginLibraryItem "/Library/glossary_particle_animation_addition.lbi" --> <!-- 前の値に加算 ( particle_animation_addtion ) --> 23 <p>The <I>add to previous value</I> method animates by adding a value to the value from the previous frame every frame. Use this to animate at a set speed.</p> 24 <!-- #EndLibraryItem --> 25 <h4>Standard Value</h4> 26 <p>This is the standard value for animation. </p> 27 <h4>Amplitude</h4> 28 <!-- #BeginLibraryItem "/Library/glossary_particle_amplitude.lbi" --> <!-- 振れ幅 ( particle_shaped_width ) --> 29 <p><B>Amplitude (%)</B> is a random value multiplied by the standard value at the time of particle generation.</p> 30 <h5>Amplitude Formula</h5> 31 <p class="system">Standard Value ± (Random Value × Standard Value)</p> 32 <!-- #EndLibraryItem --> 33 <h6>Example</h6> 34 <p>For a standard scale value of 10 and an amplitude set to 50%, this equation would be <CODE>10 + ((Random value between -0.5 and 0.5) × 10)</CODE>, producing scale values ranging between 5 and 15.</p> 35 <!-- #BeginLibraryItem "/Library/glossary_random.lbi" --> <!-- ランダム ( random ) --> 36 <p><I>Randomness</I> is a feature that provides variety to the results of a calculation by multiplying a parameter by a random number.</p> 37 <!-- #EndLibraryItem --> 38 <h4>Default Value</h4> 39 <p>The configured default value is added to the standard value every frame to produce an animation at a set speed.</p> 40 <p class="hint">For animations created in the <B>Curve Editor</B> panel, the key frame value is added every frame.</p> 41 <h3>Overwrite previous value</h3> 42 <!-- #BeginLibraryItem "/Library/glossary_particle_animation_overwrite.lbi" --> <!-- 前の値に上書き ( particle_animation_overwrite) --> 43 <p>The <I>overwrite previous value</I> method animates by overwriting the value from the previous frame with a specified value every frame. This can be convenient, as it can be simpler to control an animation using the animation curve.</p> 44 <!-- #EndLibraryItem --> 45 <h4>Default Value</h4> 46 <p>The value from the previous frame is overwritten with the default value. For animation curves created in the <B>Curve Editor</B> panel, the values are overwritten in that animation.</p> 47 <a name="reproduction_order" id="reproduction_order"></a> 48 <h3>Playback Order</h3> 49 <p>The playback order is used for moving the vertex UV coordinates for a texture when a <I>texture pattern</I> is selected.</p> 50 <!-- #BeginLibraryItem "/Library/glossary_particle_pattern_animation.lbi" --> <!-- パーティクルのパターンアニメーション ( particle_pattern_animation ) --> 51 <p><em>Texture pattern animation by moving vertex UV</em> is a method of switching the image being displayed by moving the texture coordinates (UV) of each particle vertex for a single texture image where multiple images have been arranged horizontally or vertically.</p> 52 <!-- #EndLibraryItem --> 53 <p>The figure below shows a method of applying pattern animation using vertex UV coordinate animation on a texture image in which the letters A, B, C, and D have been arranged horizontally in a strip of 32 x 32-pixel grids.</p> 54 <img class="user_guide_chart" src="assets/particleeffect_playback.png" alt="Playback Order"/> <a name="four_key" id="four_key"></a> 55 <h3>Overwrite previous value using four-key method</h3> 56 <p>The four-key method is a low-overhead animation technique configured using information from just four animation key locations.<BR> <br /> This technique is particularly used for fade-in and fade-out animations. It is also used for particle alpha animations to make particles gradually appear and/or disappear. This allows the creation of simple animations without using Curve Editor.</p> 57 <p>The figure below depicts an example of what happens to scale parameters when overwriting the previous value using the four-key method.</p> 58 <table> 59 <thead> 60 <tr> 61 <th>Parameters</th> 62 <th>Description</th> 63 </tr> 64 </thead> 65 <tbody> 66 <tr> 67 <th>Fade-In end time</th> 68 <td>Specifies the time interval for completely changing from start values to intermediate values within the range from 0.0 to 1.0.</td> 69 </tr> 70 <tr> 71 <th>Fade-Out start time</th> 72 <td>Specifies the time to start changing from the intermediate value to the end time within the range 0.0 to 1.0.</td> 73 </tr> 74 <tr> 75 <th>Start-time value</th> 76 <td>Specifies the value when the animation starts.</td> 77 </tr> 78 <tr> 79 <th>Mid-time value</th> 80 <td>Specifies the value at the point changes to the value stop.</td> 81 </tr> 82 <tr> 83 <th>End-time value</th> 84 <td>Specifies the value when animation ends.</td> 85 </tr> 86 </tbody> 87 </table> 88 <p>The table below gives an example of overwriting previous values using the four-key method for alpha animation of a particle with a 100-frame lifespan.</p> 89 <h6>Example</h6> 90 <p>Using a fade-in end time of 0.2, and a fade-out start time of 0.8, the alpha value is made to vary from 0 at start time, to one at mid-time, and 0 at end-time. This will result in an animation where particles gradually appear until Frame 20 and gradually disappear beginning from Frame 80.</p> 91 <img class="user_guide_chart" src="assets/particleeffect_in_out_animation.png" alt="Overwrite previous value using four-key method"/> 92 <p class="hint">Overwriting the previous value using the four key method can be used to animate scale, scale (extended), Color, and Alpha.</p> 93 <!-- InstanceEndEditable --> </div> 94 <div class="footer" /> 95</div> 96<hr><p>CONFIDENTIAL</p></body> 97<!-- InstanceEnd --> 98</html>
