<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Graphiques et Animation SMIL</title>
  <meta http-equiv="Content-Type"
  content="application/xhtml+xml; charset=iso-8859-1" />
  <meta name="generator" content="amaya 8.6, see http://www.w3.org/Amaya/" />
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body xml:lang="fr" lang="fr">

<div id="page_body" xml:lang="fr" lang="fr">

<table summary="toc">
  <tbody>
    <tr>
      <td><img alt="W3C" src="../images/w3c_home" /><img alt="Amaya"
        src="../images/amaya.gif" /></td>
      <td><a href="SVG.html.fr" accesskey="p"><img alt="previous"
        src="../images/left.gif" /></a> <a href="Manual.html"
        accesskey="t"><img alt="top" src="../images/up.gif" /></a> <a
        href="Xml.html.fr" accesskey="n"><img alt="next"
        src="../images/right.gif" /></a></td>
    </tr>
  </tbody>
</table>

<h2>Graphiques et Animation SMIL</h2>

<p>SVG représente l'animation comme des éléments intermédiaires dans la
structure qui représente l'organisation du graphique. Les éléments Animation
apparaissent comme des fils des graphiques qu'ils animent. Pour permettre à
l'auteur de se concentrer sur l'animation, une vue <strong>Ligne de
temps</strong> montre toutes les éléments animation et les regroupe pour
chaque élément graphique animé.</p>

<h3>La vue Ligne te temps</h3>

<p>La vue Ligne te temps visualise les animations associées aux objets
graphiques. Chaque objet graphique animé du document est représenté ici, avec
une représentation graphique.</p>

<p>La figure suivante montre trois objets animés d'un document. Chaque objet
est représenté sur le coté gauche de la vue par un label sur fond blanc et
une boîte autour. En cliquant sur le label met en évidence l'élément
correspondant dans la vue formatée, montrant ainsi à l'utilisateur le
contexte de l'élément. Si l'élément graphique possède un seul élément
d'animation (comme l'élément Rectangle dans la figure), l'élément d'animation
est visualisé comme une barre colorée. Si l'élément graphique possède
plusieurs éléments d'animation, une seule barre grise représente l'ensemble
des animations (Circle en bas de la figure), et un bouton '+' dans le label
permet à l'utilisateur d'expanser la représentation. L'élément MyText est un
exemple d'une telle expansion, où chaque animation est représentée par une
barre colorée.</p>

<p>La position sur la ligne de temps dépend de quand l'animation débute et
s'arrête et la couleur de la barre reflète le type d'animation :</p>
<ul>
  <li>jaune pour <code>animate</code>,</li>
  <li>rouge pour <code>set</code>,</li>
  <li>vert pour <code>animateMotion</code>,</li>
  <li>bleu foncé pour <code>animateColor</code>,</li>
  <li>bleu clair pour <code>animateTransform</code></li>
</ul>

<p class="figure"><img alt="Animation view"
src="../images/timeline_view.png" /></p>
</div>

<h3>Edition des animations</h3>

<p>La vue Ligne de temps est utile pour percevoir rapidement l'animation de
tous les graphiques du document, mais elle permet aussi à l'auteur d'éditer
les animations. Les éléments existants peuvent être modifiés. La plupart des
manipulations sont faites sur la ligne de temps, comme le déplacement d'une
barre ou son changement de longueur. ceci est immédiatement reflété sur les
autres vues où les attributs de l'élément d'animation sont mis à jour (les
attributs <code>begin</code> et <code>dur</code> dans ce cas).</p>

<p>Quand on crée un mouvement d'un élément graphique existant :</p>
<ul>
  <li>L'utilisateur débute par la sélection le moment de départ de
    l'animation :
    <p>Cliquer Ctrl + Bouton gauche de la souris sur l'onglet rouge de la
    ligne de temps et le déplacer à la bonne position de départ.</p>
  </li>
  <li>Puis, il sélectionne l'élément concerné dans la vue formatée :
    <p>L'élément devrait avoir un ID. Cet ID sera utilisé comme label de
    l'élément.</p>
  </li>
  <li>Puis, il clique sur le bouton <img alt="anim_motion"
    src="../../amaya/anim_motion_sh_db.png" /> en haut à gauche de la vue
    Linge de temps.
    <p>Ceci crée un nouvel élément d'animation dans cette vue.</p>
  </li>
  <li>L'utilisateur donne les positions de départ et de fin du mouvement dans
    la vue formatée :
    <p>Cliquer Ctrl + Bouton gauche de la souris sur l'icône <img alt="cross"
    src="../../amaya/timeline_cross.gif" /> dans la vue formatée. Ainsi, il
    peut contrôler les positions clé de l'élément animé dans le contexte des
    autres graphiques.</p>
  </li>
  <li>Finalement, en retournant dans la vue Ligne de temps, il peut déplacer
    et/ou retailler la nouvelle barre colorée créée pour ajuster le temps
    d'animation.</li>
</ul>

<p>La manipulation du temps dans la vue Ligne de temps est plus confortable,
puisque l'utilisateur comprend mieux la synchronisation d'un élément
particulier avec les autres éléments animés. Les autres vues sont aussi
accessibles et certains paramètres peuvent être ajustés en éditant les
attributs dans la vue structure ou dans la vue source si nécessaire.</p>

<p>Quand on crée un changement de couleur d'un élément graphique
existant :</p>
<ul>
  <li>L'utilisateur débute en sélectionnant l'élément dans la vue
  formatée,</li>
  <li>Puis, il clique sur le bouton <img alt="anim_color"
    src="../../amaya/anim_color_sh_db.png" /> en haut à gauche de la vue
    Ligne de temps.</li>
</ul>

<p>L'utilisateur peut manipuler les barres de représentation des animation
comme il manipule un rectangle dans le document. Evidement quelques
contraintes sont données dans la vue Ligne de temps. Par exemple, les barres
colorées ne peuvent bouger uniquement en horizontal sur l'axe de la ligne de
temps, et la hauteur de peut pas être modifiée.</p>
</body>
</html>
