Alejandra 6 de marzo de 2008 a las 18.24
   Imprimir artículo
elWebmaster.com

Taller de Flash: Gráfica, píxeles y máscaras


Icono FlashLos gráficos e imágenes en Flash tienen un tratamiento especial. Por un lado están los elementos que importamos de otros programas y por el otro, los elementos y símbolos que creamos ahí mismo, en el entorno de Flash.

Adobe Flash es un programa vectorial. Esto no significa que no podamos utilizar imágenes de píxeles, sino que tenemos menos capacidad de edición de estos elementos.

Compatibilidad del programa con vectores y píxeles

Por ser un programa vectorial, Adobe Flash edita gr√°ficos de vectores a la perfecci√≥n. Estos gr√°ficos pueden realizarse in situ o importarse de programas de este tipo como la aplicaci√≥n Adobe Illustrator. Quiero que quede muy claro esto de “editar“, porque Flash no es un programa parailustrar” o “dibujar”, sino un programa de animaci√≥n.

Creaci√≥n y edici√≥n de im√°genes vectorialesEs com√ļn que nos veamos tentados de realizar dibujos ah√≠ mismo, pero no es lo m√°s conveniente. A menos que se trate de elementos b√°sicos, siempre conviene utilizar aplicaciones especializadas en lo que queremos hacer. Adobe Flash nos garantiza importar gr√°ficos vectoriales sin ninguna dificultad.

Tip: al importar gr√°ficos de Adobe Illustrator, ten en cuenta que el mismo no debe tener ning√ļn componente agrupado. De lo contrario podr√°s ver partes rotas o vectores faltantes en algunas versiones de Flash.

Tambi√©n puedes trabajar con im√°genes de p√≠xel, pero la edici√≥n es bastante rudimentaria. Se puede variar el tama√Īo de la foto, la inclinaci√≥n y otros detalles de este tipo. La idea es que las im√°genes se importen a la biblioteca. No se deben pegar im√°genes directamente. Tener los elementos en la Biblioteca me permite reutilizarlos las veces que quiera.

Recuadro en imagen de p√≠xelCuando trabajes con una imagen en Flash, esta se ver√° con un recuadro alrededor. El recuadro no te va a impedir editarla superficialmente (tama√Īo, inclinaci√≥n, etc.), pero s√≠ editar su interior. Es decir, borrar p√≠xeles. Para borrar o editar p√≠xeles, tendr√°s que “desbloquear” la imagen desde la opci√≥n Editar/Preferencias, o con Ctrl.+B.

Tip: es aconsejable editar todo lo que sea posible de manera numérica. Así, tendremos más control de lo que hacemos.

Imagenes vectoriales y de p√≠xeles en Adobe FlashLo extra√Īo de Flash es que los elementos vectoriales tambi√©n tienen su vista de p√≠xel. Si seleccionamos un objeto de este tipo con la flecha negra, lo veremos en su versi√≥n de p√≠xel y podremos editarlo, incluso borrando sus p√≠xeles (l√≥gicamente los vectores variar√°n luego de esta edici√≥n). Si seleccionamos un objeto con la flecha blanca, veremos las l√≠neas con sus vectores y tendremos la posibilidad de editarlos normalmente. En la imagen de la derecha podemos ver tres pasos comunes con gr√°ficos creados en Flash:

  1. Creación de imagen vectorial
  2. Selección para visualización y edición de vectores
  3. Selección para visualización y edición de píxeles

Tratamiento de píxeles

Lo m√°s importante es qu√© hacer cuando quiero eliminar fragmentos de una imagen. La selecci√≥n en Flash en estos casos ‚Äďhay que decirlo‚Äď es mala y si podemos prescindir de ella, mejor. Hay que organizar bien el trabajo de modo de realizar las ediciones de im√°genes en programas como Adobe Photoshop y similares. As√≠, la imagen llega a Flash lista para utilizar o editar m√≠nimamente.

Sin embargo, es muy √ļtil saber c√≥mo hacer para que se vea s√≥lo una parte de una imagen ya que hay veces que esto nos sirve despu√©s para la animaci√≥n. En la imagen se pueden ver tres jarrones con el fondo de una pared. En un proyecto, por ejemplo, se podr√° querer una animaci√≥n donde se muestre por un lado un jarr√≥n y por otro el fondo.

Introducción al uso de máscaras

jarron con vectoresEn este caso, Flash no me permite seleccionar adecuada y r√°pidamente esa parte de la imagen. La √ļnica forma de hacerlo con exactitud es creando una m√°scara. ¬ŅC√≥mo? Generando la misma forma del jarr√≥n, utilizando la herramienta de la pluma. Esa forma vectorial (capa 2) deber√° estar en la capa superior a la de la foto de los jarrones (capa 1). Luego convertir√© la capa 1 en m√°scara.

En la primer imagen se ve la foto original, con el gr√°fico vectorial en la nueva capa.

Jarrón con vectores, resultado final en FlashEl resultado será el jarrón solo. El problema fundamental es que la graficación vectorial en Flash no es para nada buena. De hecho, cuando uno edita vectores y las líneas se superponen, el programa genera vectores nuevos en el punto de encuentro. Es tan difícil y diferente a otros programas vectoriales, que la mejor opción es graficar la máscara con otra aplicación. Sobre todo con una finalidad que requiera tanta precisión.

Como la m√°scara estar√° en una capa y la imagen en otra, podremos ver independientemente una de la otra. Se puede mover o editar la m√°scara y lo mismo con la foto.

M√°scaras con movimiento

La máscara y el símbolo son objetos independientes que tienen movilidad independiente. Se puede animar una máscara, el gráfico al que contiene o ambas. La máscara no tiene que ser necesariamente un objeto inanimado.

Mascara en Adobe Flash

En la imagen de la izquierda podemos ver una mesa de Flash con dos elementos en dos capas diferentes: una imagen y un s√≠mbolo. La idea es que lo √ļnico que quede visible de la imagen sea un espacio id√©ntico al c√≠rculo. Para esto usamos el c√≠rculo como m√°scara. Pero adem√°s queremos que ese “foco” se mueva. Paso a paso:

  1. Pega una imagen cualquiera en una capa
  2. Crea un círculo en una capa superior
  3. Convierte el símbolo (círculo) en gráfico
  4. Posiciona el círculo sobre la imagen y crea una animación en la que el círculo se mueva sobre la foto.
  5. Una vez que tengas la animaci√≥n hecha, convierte la capa “circulo” en m√°scara.

Quedará algo así:

icono swfAnimación de máscara

En la animación podrás ver la máscara animada sobre la imagen. Ahora, en la siguiente animación hice al revés: la máscara sigue siendo el círculo, pero esta vez queda quieto y lo que se anima es la imagen (Deberás convertir en gráfico todo lo que quieras animar, lo que queda inmóvil puede permanecer como símbolo o imagen).

icono swfAnimación de imagen con máscara estática

Este tipo de animaciones con m√°scaras tiene infinitas aplicaciones. Se pueden usar la cantidad de m√°scaras que se quiera sobre un mismo objeto. Te propongo como tarea, hacer al menos 5 animaciones con m√°scaras. Esto te va a ayudar m√°s tarde con animaciones m√°s complejas.

La clase siguiente profundizaremos en el tratamiento de vectores, cómo se maneja el programa en estos casos y cómo lograr mejores resultados. Los vectores son fundamentales para tratar con Flash, pero las imágenes se nos presentarán como una piedra en el camino que tendremos que manejar de la mejor manera posible. Para eso, es necesario practicar los conceptos de esta clase. ¡Hasta la próxima!

<< CLASE ANTERIOR  

CLASE SIGUIENTE >>


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

Comentarios (6)

  1. Angel Ivan dice:

    esta muy padre todo lo que suben a la pagina y lo q m envian a mi correo, los FELICITO eeeeeeeee…

  2. pedro david mendoza garcia dice:

    estan buenos los ejemplos porfa manden algunos a mi correo y si alguno de ustedes tiene ejemplos
    de insertar video, reproductor de sonido y como enlasar p√°ginas desarrolladas en flash cs3 se los
    agradeseria

  3. bobby dice:

    Bueno pues como me ando metiendo al flash del Adobe pues me parecio perfecta esta info mi hermano pues espero me sirva de algo y pues beun blog men y esperemos aprenda yo bien java script

  4. Pedro (desde Espa√Īa) dice:

    Gracias Alejandra, muchas gracias. Me estoy enterando más de cosas que desconocía con tu tutorial (lo poquito que llevo hasta ahora) que en un curso que hice presencial. No sé pero tienes una facilidad para explicar las cosas pasmosa. Otra vez gracias

  5. manuelromeor dice:

    soy un joven novato el dise√Īo de paginas web pero me gusta mucho
    gracias bacano y se be los mas de sencillo gracias sigan asi y yegaran lejos
    la mayoria de los visitantes le guatan las cosas sencillas y de buena calidad como esas

  6. raquel dice:

    wuuuuuuaauuuuuu cada vez se pone mas interesante

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