Taller de Flash: Editando símbolos y gráficos

El entorno de Flash tiene paneles para editar gráficos, incluyendo herramientas de color y de forma. Ampliando las clases iniciales –donde presenté la mesa de trabajo– voy a hablar más en profundidad de los paneles y qué usos concretos le puedes dar.

Editar es fundamental porque en la animación no tenemos una segunda alternativa para variar el aspecto de un elemento gradualmente. Si quiero que un elemento cambie, debo editarlo.

Queridos suscriptores al FEED RSS de TALLERES PRACTICOS: debido a un problema técnico es probable que no hayan recibido las actualizaciones a los últimos dos talleres. El problema ya se encuentra solucionado, pero deberán volver a suscribirse al feed RSS de TALLERES PRACTICOS a esta nueva dirección :
http://feeds.feedburner.com/elwebmastercom-talleres
Nota: Esto no afecta al feed general de elWebmaster.com ni al de comentarios.
¡Muchas gracias!
El equipo de elWebmaster.com

Antes nada voy a explicar 3 conceptos básicos para saber qué editar y cómo hacerlo:

Grupo: El grupo es un conjunto de formas que han sido agrupadas. Un grupo puede agrupar otros grupos, logrando distintos niveles de elementos. Cuando importamos o pegamos un elemento de otro programa (Illustrator, Fireworks), aparece en Flash como grupo. En un grupo se puede editar la forma, pero no el color.

Forma: Es lo que logramos cuando desagrupamos un elemento tantas veces como sea posible. Así obtenemos una forma que está delimitada básicamente por el color y aparece como una imagen de píxel, aunque mantiene los vectores que posibilitan cambiar su forma con mayor libertad.

Gráfico: Si conviertes un grupo o una forma en gráfico, podrás editar su forma y color, ya sea durante una animación o como símbolo estático. Estas opciones de color te dejarán agregar transparencias o variar la tonalidad de los colores con un menú “avanzado” desde la barra de propiedades, al pie de la pantalla. Además del “avanzado”, puedes cambiar el brillo, la transparencia o la tonalidad de tu gráfico de manera individual.

En la imagen podés ver los tres elementos diferentes. El grupo es el original, el elemento traído directamente de Illustrator.

Al desagruparlo totalmente se convirtió en forma. Como la división de la forma se da básicamente a través del color, seleccioné cada color por separado y lo modifiqué. Sólo hice eso. Así me quedó el fondo, las ramas y las sombras como tres “formas” de esa forma. La edición del color la hice con el panel Mezclador de colores, donde también se puede agregar transparencia.

La imagen inicial también la convertí en gráfico. Esto me permitió hacer cambios de color, e incluso agregarle transparencia (nótese la diferencia con el fondo blanco y el fondo de color). Pero la mayor diferencia reside en que la edición es pareja en todo el gráfico. Puedo agregar un 20% de rojo a TODOS los tonos del mismo elemento. Amalgamo el color, virando la tonalidad del elemento hacia un lado y otro del espectro. En el caso de la forma, es más radical porque todo lo que selecciono quedará exactamente del mismo color. Por eso el gráfico te permite una edición más fina de color.

La edición del gráfico en la animación

La edición de un gráfico es clave para lograr una animación armoniosa y recrear todos los efectos que queramos. Así como editamos el gráfico, podemos hacerlo dentro de una animación de manera gradual, de modo que en el primer fotograma clave aparezca el gráfico original y en el segundo fotograma clave, el editado. Cuando animemos se verá la transformación del símbolo. Pueden ser muchos más los fotogramas claves, tanto como instancias de transformación tenga la película.

Además de la edición de color, se le puede agregar edición de forma, aumentando o disminuyendo las dimensiones, rotando el objeto o simplemente moviéndolo en el campo. Se puede volver completamente transparente o volverse blanco con un brillo de 100%, es dicisión del diseñador.

Animación con gráficos editados en forma y color

Botones y efectos rápidos

Cuando aprendes un par de trucos, puedes acelerar mucho tu trabajo. Hay operaciones que con el tiempo se vuelven casi mecánicas. Los botones son un buen ejemplo. Hay varios rasgos característicos de un botón. Cuando sabes cuáles son, puedes hacer botones en pocos pasos. Más allá de factores de usabilidad, los efectos son sencillos…

Flash propone una serie de botones en su panel de componentes, pero tú puedes hacer uso de la inventiva con dos botones estándar para editar a gusto y piacere. Ambos se basan en el mismo concepto: un elemento trimensional, un botón que resulte palpable. Luego, el color se lo vamos a dar teniendo en cuenta la incidencia de la luz sobre nuestro objeto imaginario. En el primer caso, la luz se refleja desde abajo, por eso el trapecio inferior aparece más claro y el superior más oscuro, mientras que los lados no varían. En el caso del segundo ejemplo, la luz incide desde arriba. El efecto de gradiente nos ayuda a lograr una superficie de botón más circular.

Por último, el tercer botón es el propuesto por Flash que, aunque poco sorprendente, cumple muy bien su función. Cualquiera de estos botones se crean fácilmente a partir de un rectángulo, variando los colores y formas.

En la clase siguiente veremos cómo crear un botón animado, usos y abusos de los botones y la interacción de los botones en un sitio web creado en Flash. Mientras, teniendo en cuenta el ejemplo de la animación de gráficos editados, puedes comenzar a crear películas como las del ejemplo. Te espero la próxima semana… ¡Mucha suerte!