home *** CD-ROM | disk | FTP | other *** search
/ PC World 2005 May / PCWorld_2005-05_cd.bin / komunikace / amaya / amaya-WinXP-9.1.exe / doc / WX / Animation.html.fr < prev    next >
Extensible Markup Language  |  2005-02-23  |  6KB  |  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.   <title>Graphiques et Animation SMIL</title>
  7.   <meta http-equiv="Content-Type"
  8.   content="application/xhtml+xml; charset=iso-8859-1" />
  9.   <meta name="generator" content="amaya 9.1, see http://www.w3.org/Amaya/" />
  10.   <link href="style.css" rel="stylesheet" type="text/css" />
  11. </head>
  12.  
  13. <body xml:lang="fr" lang="fr">
  14.  
  15. <div>
  16. <img alt="Amaya" src="../../resources/icons/22x22/logo.png" class="logo" />
  17.  
  18. <p class="nav"><a href="SVG.html.fr" accesskey="p"><img alt="previous"
  19. src="../../resources/icons/misc/left.png" /></a> <a href="Manual.html"
  20. accesskey="t"><img alt="top" src="../../resources/icons/misc/up.png" /></a>
  21. <a href="Xml.html.fr" accesskey="n"><img alt="next"
  22. src="../../resources/icons/misc/right.png" /></a></p>
  23. </div>
  24.  
  25. <div id="page_body" xml:lang="fr" lang="fr">
  26. <h2>Graphiques et Animation SMIL</h2>
  27.  
  28. <p>SVG reprΘsente l'animation comme des ΘlΘments intermΘdiaires dans la
  29. structure qui reprΘsente l'organisation du graphique. Les ΘlΘments Animation
  30. apparaissent comme des fils des graphiques qu'ils animent. Pour permettre α
  31. l'auteur de se concentrer sur l'animation, une vue <strong>Ligne de
  32. temps</strong> montre toutes les ΘlΘments animation et les regroupe pour
  33. chaque ΘlΘment graphique animΘ.</p>
  34.  
  35. <h3>La vue Ligne te temps</h3>
  36.  
  37. <p>La vue Ligne te temps visualise les animations associΘes aux objets
  38. graphiques. Chaque objet graphique animΘ du document est reprΘsentΘ ici, avec
  39. une reprΘsentation graphique.</p>
  40.  
  41. <p>La figure suivante montre trois objets animΘs d'un document. Chaque objet
  42. est reprΘsentΘ sur le cotΘ gauche de la vue par un label sur fond blanc et
  43. une boεte autour. En cliquant sur le label met en Θvidence l'ΘlΘment
  44. correspondant dans la vue formatΘe, montrant ainsi α l'utilisateur le
  45. contexte de l'ΘlΘment. Si l'ΘlΘment graphique possΦde un seul ΘlΘment
  46. d'animation (comme l'ΘlΘment Rectangle dans la figure), l'ΘlΘment d'animation
  47. est visualisΘ comme une barre colorΘe. Si l'ΘlΘment graphique possΦde
  48. plusieurs ΘlΘments d'animation, une seule barre grise reprΘsente l'ensemble
  49. des animations (Circle en bas de la figure), et un bouton '+' dans le label
  50. permet α l'utilisateur d'expanser la reprΘsentation. L'ΘlΘment MyText est un
  51. exemple d'une telle expansion, o∙ chaque animation est reprΘsentΘe par une
  52. barre colorΘe.</p>
  53.  
  54. <p>La position sur la ligne de temps dΘpend de quand l'animation dΘbute et
  55. s'arrΩte et la couleur de la barre reflΦte le type d'animation :</p>
  56. <ul>
  57.   <li>jaune pour <code>animate</code>,</li>
  58.   <li>rouge pour <code>set</code>,</li>
  59.   <li>vert pour <code>animateMotion</code>,</li>
  60.   <li>bleu foncΘ pour <code>animateColor</code>,</li>
  61.   <li>bleu clair pour <code>animateTransform</code></li>
  62. </ul>
  63.  
  64. <p class="figure"><img alt="Animation view" src="../images/timeline_view.png"
  65. /></p>
  66. </div>
  67.  
  68. <h3>Edition des animations</h3>
  69.  
  70. <p>La vue Ligne de temps est utile pour percevoir rapidement l'animation de
  71. tous les graphiques du document, mais elle permet aussi α l'auteur d'Θditer
  72. les animations. Les ΘlΘments existants peuvent Ωtre modifiΘs. La plupart des
  73. manipulations sont faites sur la ligne de temps, comme le dΘplacement d'une
  74. barre ou son changement de longueur. ceci est immΘdiatement reflΘtΘ sur les
  75. autres vues o∙ les attributs de l'ΘlΘment d'animation sont mis α jour (les
  76. attributs <code>begin</code> et <code>dur</code> dans ce cas).</p>
  77.  
  78. <p>Quand on crΘe un mouvement d'un ΘlΘment graphique existant :</p>
  79. <ul>
  80.   <li>L'utilisateur dΘbute par la sΘlection le moment de dΘpart de
  81.     l'animationá:
  82.     <p>Cliquer Ctrl + Bouton gauche de la souris sur l'onglet rouge de la
  83.     ligne de temps et le dΘplacer α la bonne position de dΘpart.</p>
  84.   </li>
  85.   <li>Puis, il sΘlectionne l'ΘlΘment concernΘ dans la vue formatΘe :
  86.     <p>L'ΘlΘment devrait avoir un ID. Cet ID sera utilisΘ comme label de
  87.     l'ΘlΘment.</p>
  88.   </li>
  89.   <li>Puis, il clique sur le bouton <img alt="anim_motion"
  90.     src="../../amaya/anim_motion_sh_db.png" /> en haut α gauche de la vue
  91.     Linge de temps.
  92.     <p>Ceci crΘe un nouvel ΘlΘment d'animation dans cette vue.</p>
  93.   </li>
  94.   <li>L'utilisateur donne les positions de dΘpart et de fin du mouvement dans
  95.     la vue formatΘeá:
  96.     <p>Cliquer Ctrl + Bouton gauche de la souris sur l'ic⌠ne <img alt="cross"
  97.     src="../../amaya/timeline_cross.gif" /> dans la vue formatΘe. Ainsi, il
  98.     peut contr⌠ler les positions clΘ de l'ΘlΘment animΘ dans le contexte des
  99.     autres graphiques.</p>
  100.   </li>
  101.   <li>Finalement, en retournant dans la vue Ligne de temps, il peut dΘplacer
  102.     et/ou retailler la nouvelle barre colorΘe crΘΘe pour ajuster le temps
  103.     d'animation.</li>
  104. </ul>
  105.  
  106. <p>La manipulation du temps dans la vue Ligne de temps est plus confortable,
  107. puisque l'utilisateur comprend mieux la synchronisation d'un ΘlΘment
  108. particulier avec les autres ΘlΘments animΘs. Les autres vues sont aussi
  109. accessibles et certains paramΦtres peuvent Ωtre ajustΘs en Θditant les
  110. attributs dans la vue structure ou dans la vue source si nΘcessaire.</p>
  111.  
  112. <p>Quand on crΘe un changement de couleur d'un ΘlΘment graphique
  113. existantá:</p>
  114. <ul>
  115.   <li>L'utilisateur dΘbute en sΘlectionnant l'ΘlΘment dans la vue
  116.   formatΘe,</li>
  117.   <li>Puis, il clique sur le bouton <img alt="anim_color"
  118.     src="../../amaya/anim_color_sh_db.png" /> en haut α gauche de la vue
  119.     Ligne de temps.</li>
  120. </ul>
  121.  
  122. <p>L'utilisateur peut manipuler les barres de reprΘsentation des animation
  123. comme il manipule un rectangle dans le document. Evidement quelques
  124. contraintes sont donnΘes dans la vue Ligne de temps. Par exemple, les barres
  125. colorΘes ne peuvent bouger uniquement en horizontal sur l'axe de la ligne de
  126. temps, et la hauteur de peut pas Ωtre modifiΘe.</p>
  127. </body>
  128. </html>
  129.