<!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>
  <meta http-equiv="Content-Type"
  content="application/xhtml+xml; charset=iso-8859-1" />
  <title>Gráficos y animaciones SMIL</title>
  <meta name="generator" content="amaya 8.6, see http://www.w3.org/Amaya/" />
  <link href="../style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<table border="0" width="100%" summary="toc">
  <tbody>
    <tr>
      <td><img alt="W3C" src="../../images/w3c_home" /> <img alt="Amaya"
        src="../../images/amaya.gif" /></td>
      <td><p align="right"><a href="SVGLibrary.html.es" accesskey="p"><img
        alt="anterior" src="../../images/left.gif" /></a> <a
        href="../SVG.html.es" accesskey="t"><img alt="superior" 
        src="../../images/up.gif" /></a></p>
      </td>
    </tr>
  </tbody>
</table>

<div id="page_body">
<h1>Gráficos y animaciones <acronym
title="Synchronized Multimedia Integration Language" xml:lang="en"
lang="en">SMIL</acronym></h1>

<p><acronym title="Scalable Vector Graphics" xml:lang="en"
lang="en">SVG</acronym> representa las animaciones como elementos
entremezclados en la estructura principal que representa la organización de
los gráficos. Los elementos de la animación aparecen como hijos de los
elementos gráficos que animan. Para permitir al autor centrarse en una
animación, la vista de línea temporal le muestra todos los elementos de
animación y agrupados de acuerdo con los elementos gráficos que animan.</p>

<h2>La vista de línea temporal</h2>

<p>La vista de línea temporal presenta las animaciones asociadas con objetos
gráficos. Cada objeto animado del documento se representa allí con una
representación gráfica de sus elementos de animación.</p>

<p>La siguiente figura muestra los tres objetos animados de un documento.
Cada objeto se representa en el lado izquierdo de la vista por medio de una
etiqueta con un fondo blanco y un cuadro de selección junto a su etiqueta. Al
hacer clic en la etiqueta se destaca el elemento correspondiente en la vista
Formateado, lo que le proporciona al usuario el contexto de ese elemento. Si
el elemento gráfico tiene un único elemento de animación, como el elemento
Rectángulo de la figura, ese elemento de animación se presenta como una barra
coloreada. Si hay varios elementos, una única barra en gris representa a la
animación completa (El Círculo en la parte inferior de la figura) y un botón
marcado con el signo '+' en la etiqueta permite al usuario obtener una
representación expandida. El elemento MiTexto, es un ejemplo de tal
representación expandida, en la que cada elemento de animación se representa
mediante una barra coloreada. El botón se convierte en un signo '-' lo que
permite al usuario obtener de nuevo la representación condensada.</p>

<p>La posición en la línea temporal depende de cuándo comienzan y terminan de
actuar, y el color de cada barra refleja el tipo de animación:</p>
<ul>
  <li>Amarillo para <code>animar</code>,</li>
  <li>rojo para <code>configurar</code>,</li>
  <li>verde para <code>animarMovimiento</code>,</li>
  <li>azul marino para <code>animarColor</code>,</li>
  <li>azul claro para <code>animarTransformación</code>.</li>
</ul>

<p class="figure"><img alt="Vista de animación"
src="//home/vatton/Amaya/doc/images/timeline_view.png" /></p>
</div>

<h2>Editar animaciones</h2>

<p>La vista de línea temporal es útil para percibir de un vistazo la
animación de todos los gráficos de un documento, pero también permite a un
autor editar la animación. Los elementos existentes pueden modificarse. La
mayoría de las manipulaciones se hacen directamente sobre la línea temporal,
por ejemplo, al mover una barra o cambiar su extensión. Esto queda
inmediatamente reflejado en otras vistas en las que los correspondientes
atributos de los elementos de la animación se actualizan (en este caso los
atributos <code>inicio</code> y <code>duración</code>).</p>

<p>Para animar el movimiento de un elemento gráfico existente:</p>
<ul>
  <li>El usuario comienza por seleccionar el momento de inicio de la
    animación:
    <p>Haciendo clic en <abbr title="tecla control">Ctrl</abbr> + botón
    izquierdo del ratón sobre la barra de desplazamiento roja y moviéndola
    hacia la derecha de la posición de inicio.</p>
  </li>
  <li>Entonces selecciona el elemento que le interesa en la vista Formateado:
    <p>Si el elemento tiene un ID éste se usará como etiqueta.</p>
  </li>
  <li>Entonces hace clic sobre el botón superior izquierdo <img
    alt="animar_movimiento" src="../../../amaya/anim_motion_sh_db.png" /> en
    la vista de línea temporal:
    <p>Esto crea un nuevo elemento de animación en esa vista.</p>
  </li>
  <li>Entonces el usuario apunta la posición de inicio y de culminación del
    movimiento en la vista de formato:
    <p>Hace clic en la tecla <abbr title="control">Ctrl</abbr> + botón
    izquierdo del ratón en el icono <img alt="cross"
    src="../../../amaya/timeline_cross.gif" /> que se presenta en la vista
    Formateado. Haciendo esto, tiene control sobre las posiciones clave del
    elemento animado en el contexto de los otors elementos gráficos. De hecho
    el usuario traza el recorrido del movimiento como si estuviera dibujando
    la forma de cualquier curva perteneciente al documento.</p>
  </li>
  <li>Finalmente, volviendo a la vista de línea temporal, puede mover y/o
    redimensionar la nueva barra para ajustar el tiempo.</li>
</ul>

<p>Mainpular el tiempo en la vista de línea temporal es más cómodo, ya que
permite al usuario comprender mejor la sincronización de un elemento en
particular con los otros elementos animados. El usuario puede también
modificar las posiciones clave en la vista principal, tan sólo moviendo los
puntos con el ratón. Pero las otras vistas siguen estando ahí, y algunos
parámetros pueden ajustarse en la vista de estructura editando los atributos,
así como también en la vista del código fuente si fuera necesario.</p>

<p>Para crear un cambio de color de un elemento gráfico existente, el usuario
comienza seleccionando el elemento que le interesa en la vista principal, y
hace clic en el botón superior izquierdo <img alt="animar_color"
src="../../../amaya/anim_color_sh_db.png" />.</p>

<p>El usuario puede manipular una barra que representa una animación, de la
misma manera que manipula un rectángulo en un documento. Obviamente hay
algunas limitaciones en la vista de línea temporal. Por ejemplo, las barras
coloreadas pueden moverse sólo horizontalmente a lo largo de el eje de tiempo
y no puede cambiarse su altura individualmente. Estas limitaciones
representan la semántica del lenguaje gráfico de la línea temporal.</p>
</body>
</html>
