Alejandra 20 de marzo de 2008 a las 13.30
   Imprimir artículo
elWebmaster.com

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


Flash IconEl 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 en FlashGrupo: 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 en FlashForma: 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 en FlashGrá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.

Grupo, forma y gráfico para edición en FlashEn 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.

icono swfAnimació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…

Botones en FlashFlash 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!

<< CLASE ANTERIOR  

CLASE SIGUIENTE >>


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (7)

  1. Gerardo cohanoff dice:

    Te envío una pregunta, ¿se pueden importar gráficos desde el COREL?, te felicito creo que este taller es muy bueno

  2. Analia Hellaid dice:

    Hola. Quiero saber como hago para hacer caminar a una figura, fotograma x fotograma, ahora bien, para que camine más lento, no tan rápido ¿Como hago?. Gracias x su ayuda. Los seminarios están muy buenos. Saludos

  3. Juan Manuel dice:

    ¡Hola, Gerardo! No los podrás importan sin antes convertirlos.
    De todos modos te recomiendo usar Illustrator para trabajar con gráficos vectoriales.
    ¡Saludos!

  4. Juan Manuel dice:

    Analia, prueba bajando la velocidad de los fotogramas si es sólo eso lo que quieres corregir. 😉

  5. jaime carrillo dice:

    antes que todo permitame felicitarlo por todo esto en beneficio de la comunidad……mi pregunta es tengo un logo en forma circular, y quiero hacerlo que gire con brillo, como hago para hacerlo girar…..gracias

  6. pedro (desde españa) dice:

    Felicidades Alejandra de nuevo.
    Sí, parece obvio, pero el uso de la modificación, y resultados por tanto, manejando la forma y el gráfico está sencilla perobrillamente explicado. Gracias. Muchas gracias. Llevo 2 años de retraso pero le estoy sacando a tu tutorial mucho jugo.

  7. Juan dice:

    puedes decirme las diferencias y semejanzas entre simbolos y grupo

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder