home *** CD-ROM | disk | FTP | other *** search
/ GameStar 2005 May / Gamestar_73_2005-05_dvd.iso / Programy / amaya / amaya-Win98-8.7.3.exe / _SETUP.1 / Animation.html < prev    next >
Encoding:
Extensible Markup Language  |  2004-07-09  |  5.7 KB  |  129 lines
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6.   <meta http-equiv="Content-Type"
  7.   content="application/xhtml+xml; charset=iso-8859-1" />
  8.   <title>Graphics and SMIL Animation</title>
  9.   <meta name="generator" content="amaya 8.5, see http://www.w3.org/Amaya/" />
  10.   <link href="../style.css" rel="stylesheet" type="text/css" />
  11. </head>
  12.  
  13. <body>
  14.  
  15. <table border="0" width="100%" summary="toc">
  16.   <tbody>
  17.     <tr>
  18.       <td><img alt="W3C" src="../../images/w3c_home" /> <img alt="Amaya"
  19.         src="../../images/amaya.gif" /></td>
  20.       <td><p align="right"><a href="SVGLibrary.html" accesskey="p"><img
  21.         alt="previous" src="../../images/left.gif" /></a> <a
  22.         href="../SVG.html" accesskey="t"><img alt="top"
  23.         src="../../images/up.gif" /></a></p>
  24.       </td>
  25.     </tr>
  26.   </tbody>
  27. </table>
  28.  
  29. <div id="page_body">
  30. <h1>Graphics and SMIL Animation</h1>
  31.  
  32. <p>SVG represents animation as elements interspersed through the main
  33. structure which represents the organization of the graphics. Animation
  34. elements appear as children of the graphics elements they animate. To allow
  35. focussing on animation, a timeline view shows all animation elements and
  36. groups them together according to the graphics elements they animate.</p>
  37.  
  38. <h2>The Timeline View</h2>
  39.  
  40. <p>The timeline view displays animations associated with graphics objects.
  41. Each animated object of the document is represented there, with a graphical
  42. representation of its animation elements.</p>
  43.  
  44. <p>The following figure shows the three animated objects of a document. Each
  45. object is represented on the left side of the view by a label with a white
  46. background and a box next to its label. Clicking the label highlights the
  47. corresponding element in the formatted view, thus showing the context of that
  48. element. If the graphics element has a single animation element (like element
  49. Rectangle in the figure), this animation element is displayed as a colored
  50. bar. If there are several elements, a single gray bar represents the whole
  51. animation (Circle, at the bottom of the figure), and a '+' button in the
  52. label allows to view an expanded representation. Element MyText is an example
  53. of such an expanded representation where each animation element is
  54. represented by a colored bar. The button becomes a '-' that allows to go back
  55. to the condensed representation.</p>
  56.  
  57. <p>The position of an animation on the timeline depends on when it starts and
  58. stops acting, and the color of each bar reflects the type of animation:</p>
  59. <ul>
  60.   <li>yellow for <code>animate</code>,</li>
  61.   <li>red for <code>set</code>,</li>
  62.   <li>green for <code>animateMotion</code>,</li>
  63.   <li>dark blue for <code>animateColor</code>,</li>
  64.   <li>light blue <code>animateTransform</code></li>
  65. </ul>
  66.  
  67. <p class="figure"><img alt="Animation view"
  68. src="//home/vatton/Amaya/doc/images/timeline_view.png" /></p>
  69. </div>
  70.  
  71. <h2>Editing Animations</h2>
  72.  
  73. <p>The timeline view is useful to get a quick overview of the animation of
  74. all graphics in a document, but it also allows to edit animations. Existing
  75. elements can be modified. Most manipulations are done directly on the
  76. timeline, such as moving a bar or changing its length. This is immediately
  77. reflected in other views where the corresponding attributes of the animation
  78. element are updated (attributes <code>begin</code> and <code>dur</code> in
  79. that case).</p>
  80.  
  81. <p>A movement for an existing graphics element is created as follows:</p>
  82. <ul>
  83.   <li>Select the start time of the animation:
  84.     <p>Click Ctrl + Left mouse button on the red timeline slider and move it
  85.     to the correct start position.</p>
  86.   </li>
  87.   <li>Select the element of interest in the formatted view:
  88.     <p>The element should have an ID. This ID will be displayed as the
  89.     element label.</p>
  90.   </li>
  91.   <li>Create a new animation element in the timeline view:
  92.     <p>Click on the top left <img alt="anim_motion"
  93.     src="../../../amaya/anim_motion_sh_db.png" /> button in the timeline
  94.     view.</p>
  95.   </li>
  96.   <li>Mark the starting and ending positions of the movement in the formatted
  97.     view:
  98.     <p>Click Ctrl + Left mouse button on the displayed <img alt="cross"
  99.     src="../../../amaya/timeline_cross.gif" /> icon in the formatted view.
  100.     This allows to control the key positions of the animated element in the
  101.     context of the other graphics elements. Simply draw the motion path of
  102.     the element.</p>
  103.   </li>
  104.   <li>Finally, going back to the timeline view, one can move and/or resize
  105.     the new generated colored bar to adjust the timing.</li>
  106. </ul>
  107.  
  108. <p>Manipulating timing in the timeline view is more comfortable, as the
  109. synchronization of a particular element with the other animated elements is
  110. more clearly visible in this view. But the other views are still there, and
  111. some parameters may be adjusted in the structure view by editing attributes,
  112. as well as in the source code if necessary.</p>
  113.  
  114. <p>A color change for an existing graphics element is created as follows:</p>
  115. <ul>
  116.   <li>First select the element of interest in the main view,</li>
  117.   <li>then click on the top left <img alt="anim_color"
  118.     src="../../../amaya/anim_color_sh_db.png" /> button.</li>
  119. </ul>
  120.  
  121. <p>A bar representing an animation can be manipulated exactly like a
  122. rectangle in the document. Obviously some constraints are put in the timeline
  123. view. For instance, colored bars can move only horizontally along the time
  124. axis and their height cannot be changed individually. These constraints
  125. follow from the semantics of the timeline graphic language.</p>
  126. </body>
  127. </html>
  128.  
  129.