Fundamentos de Sistemas Multimedia. Práctica de imágenes: Edición de gráficos vectoriales animados mediante SVG

Transcripción

1 Fundamentos de Sistemas Multimedia Práctica de imágenes: Edición de gráficos vectoriales animados mediante SVG Vicente Atienza y Manuel Agustí Curso 2008/2009

2 Esta práctica es una introducción al tema de creación y edición de imágenes en formato vectorial. Ejemplos de éstas son las que aparecen en la portada de este boletín, creadas por Nicu Buculei con Sodipodi [1] y por Feth Arezki utilizando InkScape [2]. Estas y otras se pueden encontrar en sitios web como The Open Clip Art Library < En la presente práctica, se obtendrá una serie de resultados, mayormente ficheros SVG, Guarde una copia de todo ello en su directorio public_html bajo un subdirectorio practicasvg dentro de su espacio de disco de la cuenta en el servidor de la asignatura. 1. Objetivo El objetivo de esta práctica es la elaboración de una pequeña animación mediante el lenguaje SVG (Scalable Vector Graphics). Los gráficos desarrollados mediante este lenguaje pueden verse en cualquier navegador de Internet, instalando previamente el visor adecuado, generalmente en forma de conector (plugin). En los navegadores del laboratorio se encuentra ya instalado el visor gratuito de Adobe SVG Viewer, que puede obtenerse directamente de la web de Adobe o de la página de recursos de la asignatura. Para la creación de la animación se usará la herramienta Web Draw, que se encuentra ya instalada en los computadores del laboratorio. 2. Creación de gráficos con Web Draw Tras ejecutar la aplicación y crear un nuevo documento con la opción File New, la ventana del entorno gráfico de desarrollo presentará el aspecto que se ve en la Figura 1. Figura 1: Captura de pantalla de la aplicación "Web Draw" recien iniciada.

3 La ventana de edición (la que aparece activa en la figura) proporciona tres vistas diferentes del documento que se está creando, que se seleccionan mediante las correspondientes pestañas: Canvas, Source y Preview. La creación de la animación la realizaremos de forma gráfica en la vista Canvas. La barra de herramientas de Zoom, permite ajustar el tamaño para una cómoda edición (conviene ajustar la imagen para que ocupe toda la ventana de edición con el botón Fit). La vista Source permite ver el código SVG que la aplicación genera de forma automática. Cualquier cambio que introduzcamos mediante la vista Canvas o Source se reflejará inmediatamente en la otra vista. La vista Preview permite comprobar el aspecto final de la animación, tal y como aparecerá en el navegador. La ventana inferior (Animation Timeline) permite animar el comportamiento de los objetos introducidos previamente mediante la ventana de edición. Crear un nuevo documento Si no se ha hecho todavía, crear el nuevo documento mediante la opción File New del menú. Introducir los cuatro objetos básicos de la animación. Para introducir un nuevo objeto en la animación, se selecciona el tipo de objeto adecuado (por ejemplo, rectángulo) de la paleta de herramientas (Tool Palette) y después se define el área que ocupará sobre la hoja en blanco arrastrando con el ratón, como se hace habitualmente con otros programas de dibujo. Ejercicio 1: En el próximo apartado se propone realizar un gráfico sencillo que simule la salida del sol sobre el mar. Es posible realizarlo con sólo tres elementos: Un rectángulo que ocupe la mitad inferior de la imagen para el agua. Un segundo rectángulo para el cielo. Un círculo para el sol. Guardar en ejercicio1.svg el fichero obtenido. Exporte el gráfico a un fichero de tipo mapa de bits y cree un fichero HTML, de nombre index.html (ubicado en el directorio relativo a esta práctica), donde mostrar los resultados de cada ejercicio realizado, utilizando la versión estática en mapa de bits como un enlace a la versión SVG. Este fichero HTML no debe contener directamente ningún gráfico SVG para que cualquier navegador pueda visualizarlo. 3. Creación de la animación con WebDraw Ya se habrán dispuesto los objetos sobre el área de dibujo en el anterior apartado, ahora vamos a animarlos. La animación afectará a varias propiedades de estos objetos: El color del cielo evolucionará de negro a azul celeste (atravesando una fase anaranjada). El color del agua cambiará de negro a azul marino. La posición del sol se desplazará desde un punto inicial oculto tras el rectángulo inferior hasta un punto final sobre el rectángulo que representa el cielo.

4 Para poder completar los apartados que se proponen más adelante, será preciso que se incluya adicionalmente al menos un elemento que se desplace en la escena, desde una posición de partida en la que resulte inicialmente visible ( Tal vez un velero que avance desde el lado izquierdo hasta desaparecer por el derecho?) Definir las propiedades de los objetos Debe seleccionarse previamente el objeto escogiendo la herramienta de selección y pinchando sobre él. Después se hace uso de la paleta de propiedades (Properties Palette) para modificar las del objeto seleccionado. Es conveniente asignar un identificador al objeto, que permitirá localizarlo más tarde con facilidad. Por ejemplo mar para el rectángulo que representa el agua del mar. Es posible modificar propiedades como el tamaño y la posición, el color y el tipo de relleno, el color y grosor del borde, la fuente de letra, etc. Establecer el orden de posicionamiento Mediante la opción de menú Object Arrange establecer el orden de posicionamiento adecuado (qué objetos están delante o detrás de qué otros): el cielo debe estar en el fondo; sobre él el círculo que representa el sol y finalmente, en el plano superior, el mar. De esta forma se obtendrá el efecto buscado de que el círculo (sol) está inicialmente oculto bajo el mar y aparece finalmente visible sobre el cielo. Animar los objetos La paleta de animación (Animation Timeline) permite animar el comportamiento de los diferentes objetos. Las animaciones se aplican sobre cualquier propiedad de los objetos, como su posición, color, o cualquier otro atributo. Cuando se programa un determinado cambio en una propiedad de un objeto en un determinado instante de tiempo, esta información se registra en un fotograma que se denomina cuadro clave. Durante la animación se generará una transición progresiva entre cuadros claves consiguiendo, por ejemplo, que un objeto describa la trayectoria adecuada desde la posición que ocupa en un cuadro clave hasta la que ocupa en el siguiente. Para animar un objeto se siguen los siguientes pasos: 1. En la ventana de edición, seleccionar la vista Canvas. Se activará entonces la paleta de animación. 2. En la paleta de animación, hacer clic en el botón de grabación. El botón cambiará de negro a rojo para indicar que se está en modo grabación. 3. Mover el marcador de tiempo al punto deseado de la escala de tiempo. 4. Si todavía no está seleccionado, seleccionar el objeto que se desea animar. 5. Modificar las propiedades del objeto. Puede hacerse usando la herramienta de selección sobre la vista Canvas para cambiar fácilmente la posición o el tamaño del objeto, o bien mediante la paleta de propiedades. 6. Para establecer múltiple cuadros clave, repetir los pasos 3 a 5 hasta completar la animación. 7. Para terminar la grabación, pulsar el botón de grabación otra vez. Su color volverá a cambiar a negro. Para conseguir un efecto de transición suave desde el instante inicial, deben establecerse las propiedades iniciales de los objetos en un cuadro clave en el instante de tiempo cero (color oscuro o

5 negro para cielo y mar, amarillo para el sol). Un segundo cuadro clave definirá una tonalidad rojiza para el cielo, que deberá hacerse más tarde coincidir aproximadamente con la aparición del sol en el horizonte. Un cuadro clave final definirá la posición final del sol sobre el cielo, el color del cielo y el color del mar para un aspecto de mediodía. Comprobar la animación Para ver el aspecto final, puede seleccionarse la vista Preview (para que funcione es necesario que haya sido instalado previamente un visor de SVG en el computador). Otra posibilidad consiste en desplazar la posición del marcador de tiempo sobre la barra de tiempos de la paleta de animación. La animación podrá verse así directamente en la vista Canvas. Es posible desplazar la posición de los cuadros claves para ajustar la temporización de la animación como se desee, arrastrando los pequeños rombos que indican el cambio de valor de una propiedad. Así se muestra en la Figura 2. Figura 2: Ajustando la temporización en una animación Guardar la animación y reproducirla en un navegador Para guardar el archivo SVG con la animación hacer uso de la opción de menú File Save as... (para que aparezca activa esta opción, es preciso estar usando la vista Canvas o Source). Darle nombre y guardarla en una ubicación conocida. La mayoría de navegadores ya soportan la inclusión de imágenes estáticas en formato SVG, pero no las animaciones en este lenguaje. Para superar esta limitación, en la presente práctica, utilizaremos el mismo soporte para animaciones que utiliza el propio WebDraw: un plugin de la casa Adobe. Esto nos obliga a hacer uso de un navegador que soporte este plugin, en este caso el Internet Explorer. Utilice este navegador para cargar el documento creado.

6 Insertar la animación en una página web A continuación se muestra el código HTML de una página web en la que se inserta un gráfico SVG contenido en un archivo de nombre svg1.svg. <html> <head> <title>ejemplo de gráfico SVG</title> </head> <body> <center> <embed src="amanecer.svg" name="ejemplo" width="500" height="500" type="image/svg xml" pluginspage=" </center> </body> </html> Ejercicio 2: Utilice el código HTML anterior como ejemplo para crear una página web propia donde se inserte la animación que acaba de crearse en esta práctica. Recuerde que en el fichero index.html, creado en el ejercicio 1, ha de incluir una versión estática (en mapa de bits) que enlace con el fichero que contiene la animación. Ejemplo de actividad 1: Complete la animación con sus propias ideas, por ejemplo incluyendo y animando nuevos elementos (como barcos, nubes, aves, textos, etc.). Guardar en actividad1.svg el fichero obtenido y añádalo, como parte de sus respuestas a la tarea que nos ocupa. En la caja de edición de respuestas de la tarea incluya, después del nombre de los que realizan la práctica, la URL del fichero index.html que ha creado en el ejercicio anterior. 4. Añadir interactividad Asociar un enlace a un elemento De forma similar a como se realiza en HTML, en SVG es posible asociar un enlace a cualquier elemento gráfico, utilizando una etiqueta <a>. El URL destino se especifica mediante un atributo xlink:href. En el ejemplo siguiente se asocia a un elemento de tipo círculo, un enlace a la web de la Universidad Politécnica, de forma que se accederá a esta página cuando se haga clic sobre él: <a xlink:href= > <circle cx= 100 cy= 100 r= 50 style= fill:grey /> </a> Utilice la entrada Link del menú contextual (el menú que aparece al hacer clic con el botón secundario sobre un objeto) para asociar un enlace a un objecto de los que cree en WebDraw. Ejercicio 3: Añada al elemento sol de su animación, un enlace hacia su espacio web en el servidor de la asignatura. Guarde de nuevo el documento SVG.

7 Verifique la nueva funcionalidad. Coincide el área donde el clic activa el enlace con la forma exacta del elemento? Verifique si la asociación sigue funcionando incluso cuando el elemento se encuentra en movimiento. Guarde en ejercicio3.txt las respuestas a estas preguntas y en ejercicio3.svg (de forma análoga a lo realizado en los ejercicios anteriores) el trabajo realizado para realizar este ejercicio. Copiélo también en PoliformaT. Asociar eventos a animaciones El lenguaje SVG permite proporcionar diferentes tipos de interactividad a los elementos gráficos. Lamentablemente, esta funcionalidad no está prevista en el editor WebDraw, por lo que para realizar los ejercicios que se proponen a continuación, deberá guardarse el documento SVG generado hasta este momento, para ser posteriormente modificado mediante un editor de texto sin formato (como el bloc de notas). Otra de las interacciones que pueden introducirse fácilmente con SVG consiste en asociar los atributos de comienzo y fin de las animaciones con eventos tales como los producidos por las acciones del ratón o las pulsaciones del teclado. Así, por ejemplo, un atributo begin= click hará que la animación correspondiente se ponga en marcha cuando se haga un clic con el ratón sobre el elemento gráfico animado. Son válidas también expresiones del tipo click + 1s. Otros ejemplos de este tipo de eventos son: mousedown, mouseup, mouseover, mouseout, mousemove y otros [4], [6]. Ejemplo de actividad 2: Localice en el artículo Add interactivity to your SVG [4] ejemplos de cómo asociar estos eventos (mousedown, mouseup, mouseover y mouseout) e incorpórelos a su creación. Realice los siguientes casos: Incorpore un cambio de tamaño en el sol cuando el ratón se posicione encima del objeto. Incorpore un cambio del color de relleno del sol cuando se pulsa con el ratón sobre él. Consiga que uno de los elementos de su escena comience su animación cuando se haga clic con el ratón sobre él. En la caja de edición de respuestas de la tarea describa el trabajo realizado en este ejercicio y adjunte en el fichero actividad2.svg el resultado obtenido. 5. SVG desde el punto de vista de XML Como se puede comprobar al observar el código fuente de una de las imágenes generadas con la aplicación utilizada en esta práctica, esta aplicación utiliza SVG como formato nativo de almacenamiento. Como el alumno puede reconocer por lo expuesto en la teoría, este lenguaje es una aplicación o vocabulario de XML para la definición de un tipo concreto de documentos.

8 Es posible plantear que este documento se genere de forma automática a partir de un proceso no interactivo. Esto es, al contrario de lo que se ha venido realizando en los anteriores apartados de esta práctica, se puede generar un fichero SVG con un lenguaje de programación o a través de XSL. Actividad 3: Copie el fichero realizado en la práctica de texto sobre XML y cree una transformación para él, mediante un fichero XSL de nombre trabajosvg.xsl, que lo transforme a SVG. Aplíquela utilizando xalan y guarde el resultado en un fichero de nombre trabajo.svg, junto al resto de imágenes obtenidas en esta práctica. Ese fichero debe contener el título de la propuesta de trabajo realizado y los nombres de los autores como elementos de texto en el fichero SVG. Entre el título y los nombres de los autores deberán aparecer tres pequeñas espirales una de color rojo, otra de color verde y otra de color azul. Si no conoce las etiquetas necesarias para ello, realice un primer ejemplo más sencillo sobre la aplicación de dibujo utilizada y estudie el resultado. Lleve los resultados a PolformaT: en la caja de edición de respuestas de la tarea describa el trabajo realizado para desarrollar esta actividad. Adjunte en el fichero trabajosvg.xsl la transformación creada y en actividad3.svg guarde el resultado obtenido. 6. Bibliografía y referencias [1] Sodipodi < [2] Inkscape < [3] Adobe Systems Inc. Adobe SVG Zone [en línea]. < [Consulta: 13 diciembre 2004]. [4] Venn, Brian. Add interactivity to your SVG [en línea]. < [Consulta: 13 diciembre 2004]. [5] World Wide Web Consortium, Scalable Vector Graphics (SVG) 1.1 Specification [en línea].< [Consulta: 13 diciembre 2004]. [6] World Wide Web Consortium, Complete list of supported events [en línea].< [Consulta: 13 diciembre 2004].