Trabajo con recursos SVG desde Illustrator. Parte 3


En las entradas anteriores te estuve comentando sobre cómo aplicar efectos SVG a los objetos de tus diseños y cuáles son las [opciones de exportación][a1] que nos ofrece Illustrator para este formato, y hoy, para continuar esta serie, vengo a mostrarte cómo agregar interactividad a tus ilustraciones.

Pues sí, SVG te posibilita hacer interactivos tus archivos desde el primer momento a partir del panel Interactividad SVG, el cual permite crear eventos que a su vez activan un comando de JavaScript y le otorgan movimiento a la página cuando el usuario realiza una acción, como podría ser, por ejemplo, mover el cursor del ratón sobre un objeto o hacer clic sobre él.

Muy útil, ¿verdad? Pues ahora te muestro paso a paso cómo hacerlo:

##1. Abre el panel de interactividad

Selecciona el objeto al que deseas agregar interactividad y luego ve a Ventana > Interactividad SVG. Verás cómo aparece el panel de interactividad:

![interactividad][1]

A: Menú del panel, B: Enlazar archivos JavaScript, C: Quitar entrada seleccionada.

##2. Adiciona las interacciones

Ahora es momento de adicionar las interacciones, para lo cual debes seleccionar un evento entre los que tienes a tu disposición:

![eventos][2]

Y para que comprendas cómo funcionan, aquí te van las explicaciones sobre cuándo cada uno activa la acción prevista:

  • onfocusin: activa la acción cuando el elemento está resaltado (por ejemplo, al seleccionarlo con el puntero).
  • onfocusout: cuando el elemento deja de estar resaltado, o sea, cuando se resalta otro elemento.
  • onactivate: al hacer clic con el ratón o pulsar una tecla.
  • onmousedown: al pulsar el botón del ratón sobre un elemento.
  • onmouseup: al soltar el botón sobre un elemento.
  • onclick: al hacer clic con el ratón sobre un elemento.
  • onmouseover: al mover el puntero sobre un elemento.
  • onmousemove: mientras el puntero está sobre un elemento.
  • onmouseout: al alejar el puntero de un elemento.
  • onkeydown: cuando se pulsa una tecla.
  • onkeypress: mientras está pulsada una tecla.
  • onkeyup: cuando se suelta una tecla.
  • onload: cuando el navegador ha analizado totalmente el documento SVG (puedes utilizar este evento para llamar a funciones de inicialización de paso único, o sea, que se ejecutan una sola vez).
  • onerror: cuando un elemento no se carga correctamente o se produce un error.
  • onabort: si se detiene la carga de la página antes que el elemento se cargue completamente.
  • onunload: si se elimina el documento SVG de una ventana o un marco.
  • onzoom: si se cambia el nivel de zoom del documento.
  • onresize: cuando se cambia el tamaño de la vista del documento (diseño adaptable).
  • onscroll: si la vista se desplaza o se cambia a panorámica.

##3. Añade los archivos JavaScript

Luego de seleccionar el evento que deseas, haz clic en el botón Enlazar archivos JavaScript para buscar y añadir el archivo que le corresponde. Como ejemplo, en este caso he adicionado dos scripts:
![java][3]

Si deseas añadir más archivos sólo debes hacer clic en Añadir para buscar más, y si quieres eliminar alguno de estos archivos selecciónalo y haz clic en Quitar.

##Conclusiones

Con la opción de agregar interactividad puedes convertir tus archivos SVG en elementos interactivos desde el mismo proceso de diseño, con lo cual podrás comprobar cómo se comporta tu ilustración en un navegador web, ahorrándole así mucho tiempo al desarrollador, pues de antemano se sabrá qué se supone que debe hacer cada elemento.

En la siguiente entrada, y para concluir con esta serie, te mostraré cómo exportar los estilos CSS de tus archivos SVG, así que hasta entonces déjame saber si he logrado serte de ayuda. ¡Hasta la próxima!