| Artículos | 01 DIC 2000

Animaciones con Fireworks

Amplíe sus horizontes en

Compartir

Sandee Cohen.
Cuando era un profesional de los medios impresos mi lema solía ser “Si se mueve, písalo”. Pero esto fue así hasta que descubrí la diversión con las animaciones GIF. Resultó toda una experiencia ver cómo mis trabajos se movían, desvanecían y cambiaban de aspecto. Incluso comencé a ver la Cartoon Network para observar y aprender algunos trucos utilizados en animación.
Pero dejando a un lado los gratificantes resultados, no puede decirse que crear las primeras animaciones fuese como ir de picnic. Utilicé la primera versión de Macromedia Fireworks, la cual precisaba una gran cantidad de pasos para crear una animación y no podía reproducir los archivos sin tener que acceder a un cuadro de diálogo especial de exportación. Afortunadamente, Fireworks 3 es una herramienta potente y con más características, haciendo sencilla la labor de convertir los dibujos en animaciones.

Las capas y los fotogramas de Fireworks
Fireworks es una aplicación que se basa en fotogramas. Una animación está formada por un número determinado de fotogramas, cada uno de los cuales muestra una imagen ligeramente distinta a la anterior. Este concepto es similar al de los flip-book, en los que un objeto cambia a medida que se pasan las páginas con rapidez (o de fotograma a fotograma) para crear una ilusión de movimiento (Adobe After Effects y Macromedia Flash se basan en una línea de tiempo). Fireworks también utiliza las capas. Al igual que en Adobe Photoshop, las capas controlan el apilamiento u orden vertical de los objetos en un mismo proyecto (al igual que en los sistemas de animación tradicionales, donde se utilizaban acetatos superpuestos para definir qué objetos estaban por encima de otros). Con Fireworks se puede trabajar con varias capas por cada uno de los fotogramas, y puede modificar el contenido y opacidad de cada una de ellas. Por ejemplo, si quiere hace que parpadee la palabra “Ayuda”, puede incluirla en la primera capa de todos los fotogramas, pero haciéndola invisible en fotogramas alternos. Al ocultar la capa en vez de borrarla tiene la opción de cambiarla posteriormente si usted (o un cliente quisquilloso) opta por un aspecto distinto. También puede compartir la capa para otros fotogramas, ya sea manual o automáticamente.

La potencia del interpolado
Puede crear animaciones manualmente situando un objeto en cada fotograma y cambiando su posición de forma manual, pero esta operación pondrá a prueba su paciencia (y también la mano con la que maneja el ratón). Es mucho más sencillo utilizar las instancias y los símbolos de Fireworks. Cualquier objeto puede ser un símbolo, sólo tendrá que seleccionarlo y elegir Insertar Símbolo. Esta operación lo convertirá en el padre u objeto maestro de todas las copias del objeto (denominadas instancias). En vez de copiar y pegar un objeto en cada fotograma, puede utilizar el comando Entre instancias para distribuirlos automáticamente en los fotogramas.
Esto ya es bastante útil, pero las posibilidades de interpolación de Fireworks van más allá. Al usar el comando Entre instancias también puede completar los pasos necesarios entre dos instancias. Imagine que pone la instancia de unas flores en la esquina inferior izquierda de un fotograma, y otra instancia en la esquina superior derecha del siguiente fotograma. Interpole las dos instancias y Fireworks añadirá fotogramas entre ellos, mostrando cómo las flores se mueven gradualmente de una esquina a otra (consulte el cuadro “Animación con símbolos”).

La animación cobra vida
En Fireworks 3 puede interpolar una gran cantidad de atributos en los símbolos. Del mismo modo que se movieron las instancias de las flores de un lado a otro, también puede animar los cambios de tamaño, rotación o perspectiva entre dos instancias. También puede modificar su opacidad, de modo que parezca que el objeto se desvanece o aparece gradualmente al realizar la interpolación.
Fireworks 3 también contempla la característica de efectos “vivos” que ofrecen nuevas oportunidades para la animación. Las sombras se pueden mover, los destellos se pueden desvanecer o aparecer gradualmente, las instancias pueden desenfocarse y enfocarse, y se puede cambiar la saturación de los objetos (ver cuadro “Animación con efectos vivos”). Para conseguir un efecto distinto, importe mezclas de Adobe Illustrator o de Macromedia FreeHand para simular que un objeto se transforma en otro.
Animaciones automáticas. Con Fireworks 3 puede acelerar el proceso de animación automatizando los pasos con comandos JavaScript. Hay dos formas de crear estos comandos. La primera es utilizar el panel Historial para grabar las acciones y guardarlas como un comando. Este método tiene una limitación: si quiere repetir un comando varias veces, debe grabar manualmente cada repetición en el historial original.
Afortunadamente, si no es de los que se asustan con un poco de programación JavaScript, puede crear un comando sin tener que añadir cada fotograma e ir manualmente a través de cada acción. Fireworks incluye varios comandos por omisión (sólo tiene que buscar la carpeta Commands en la carpeta del programa), y puede modificarlos en una aplicación de tratamiento de textos. Pongamos por caso que abre el comando que añade 12 fotogramas y rota un objeto 30 grados. La frase //Add frames for the animation var kNum Frames = 12; indica a la aplicación que debe añadir 12 fotogramas a la animación. Sólo debe cambiar el número para añadir una cantidad distinta de fotogramas. La frase var angle = 30; controla el ángulo de rotación. Cambie el 30 a 10, por ejemplo, y ajustará la rotación en incrementos de 10 grados.
Una vez haya modificado el comando, guárdelo como un archivo de texto en la carpeta Commands de Fireworks. La acción modificada aparecerá ahora bajo el menú Comandos.
Pero tampoco tiene por qué sumergirse en las profundidades de JavaScript. Muchas personas crean comandos y los ponen a disposición de otros. Consulte el sitio web www.massimocorner.com de Massimo Foti y www.projectfireworks.com de E. Kleanthis. Aunque Fireworks ha evolucionado mucho, aún se puede mejorar. Por ejemplo, a diferencia de Flash 4, las animaciones interpoladas no son “vivas”: si cambia la primera o la última instancia debe rehacer la animación. Pero Fireworks 3 proporciona a los animadores para la Web un impresionante conjunto de herramientas bien diseñadas.


Animación con símbolos
-----------------------------------
Los símbolos y las instancias de Fireworks hacen sencillo el proceso de crear animaciones. A continuación se muestra cómo rotar un objeto.

1- Sitúe el objeto que debe aparecer en todos los fotogramas en su propia capa, y seleccione Compartir capa en el menú desplegable de la paleta Capas.

2- Cree una nueva capa para que contenga los objetos que desee animar. A continuación, seleccione Insertar-Nuevo símbolo (Comando-F8). Escriba un nombre en el cuadro de diálogo Propiedades de símbolo, y pegue un dibujo ya existente en la ventana Símbolo o créelo directamente en dicha ventana.

3- Cierre la ventana Símbolo. Aparecerá automáticamente una instancia del símbolo en la ventana principal. Sitúe la instancia donde desee que com

Contenidos recomendados...

Comentar
Para comentar, es necesario iniciar sesión
Se muestran 0 comentarios
X

Uso de cookies

Esta web utiliza cookies técnicas, de personalización y análisis, propias y de terceros, para facilitarle la navegación de forma anónima y analizar estadísticas del uso de la web. Consideramos que si continúa navegando, acepta su uso. Obtener más información