Un completo curso de diseño gráfico, ilustración, diseño web y tipografía.

Taller de Flash

Basta con dar un paseo por la Web para percatarse de que Flash es una parte casi esencial de las páginas web. Muchos sitios incluyen estas --¿cómo llamarlas? películas, que aportan interactividad, vistosos efectos y con una magnífica calidad: un aspecto suave, colores nítidos... Las ideas básicas de lo que es Flash ya las incluímos en otro artículo (ver Animaciones, dentro de Gráficos para la Web.) Aquí ofrecemos un tutorial básico para empezar a crear con el programa. ¡Nuestros conocimientos no dan mucho más de sí! De todos modos, puede ser muy útil para empezar a trabajar y después progresar con alguno de los muchos recursos existentes, algunos de los cuales recomendamos más adelante.


Un ejemplo de imagen Flash (estática). Se puede hacer zoom a voluntad, haciendo clic con el botón derecho y eligiendo la opción.

Ciertamente, Flash tiene mucho que ofrecer. También es cierto que en muchos casos los diseñadores lo utilizan injustificadamente -y muy mal. No es raro encontrar páginas que tardan una eternidad en cargarse, y todo para ver una ridícula animación, mal optimizada y peor diseñada, que para colmo no aporta nada a la navegación o a la experiencia interactiva del visitante. Una buena página con Flash debe cargarse rápidamente y ofrecer slgo que con la alternativa de html más gif/jpg no sea posible.

Cómo crear películas Flash.

Lo que necesitamos es un programa capaz de preparar y generar las películas. El propietario del formato, Macromedia, tiene las  aplicaciones más usadas para esta tarea: Director y Flash. Director está más bien dirigido a la creación de proyectos multimedia (al estilo de los cd-rom), mientras que Flash está concebido para la preparación de las animaciones para la web.

Flash es un programa comercial. Encontraremos más detalles en las páginas de la compañía Macromedia. La versión actual es la quinta. Una muestra del frenético ritmo de cambio de las aplicaciones para la web es el hecho de que en apenas un año hayan aparecido dos versiones del programa... Macromedia siempre deja probar sus programas durante 30 días (sin limitaciones), de manera que cualquiera puede haber tenido Flash a su disposición durante casi medio año, sólo con las versiones demo.

Para bien o para mal, Flash es el estándar actual en vectores para la web. A falta de alternativas, conviene aprovecharlo y explorar sus innegables cualidades. Algunos ejemplos son particularmente impresionantes. Sus ficheros son muy compactos. Por ejemplo, la ilustración adjunta tiene sólo 5k. Un GIF al mismo tamaño tendría un tamaño comparable, pero... qué sucede si queremos una vista en detalle. Flash nos permite ampliar a voluntad sin la más mínima pérdida de definición.

Pero es en el terreno de las animaciones y la interactividad donde Flash muestra de verdad su excelencia. Para animaciones complejas, con muchos cambios de unas pocas formas básicas, no hay otra solución mejor. Resuelve con un pequeño fichero y con excelente calidad aquello que un GIF animado haría con un enorme fichero, y sin tanta definición. Las últimas versiones incluyen la posibilidad de incluir sonido mp3, formularios de textol... haciendo que las posibilidades creativas estén limitadas sólo por la imaginación del diseñador.

Parece que con las más recientes versiones, Flash va en la dirección de una interfaz más profesional y con mayor simplicidad de uso. Muchos diseñadores pueden agradecerlo, porque la forma de trabajar con Flash en las versiones anteriores, como la 2 o la 3, era, como mínimo, especial. La manera en que maneja los vectores es muy particular. Cuando hemos dibujado, por ejemplo, un círculo, separa el contorno del interior, de manera que seleccionando uno de los dos, la otra parte queda atrás. Y al colocar una forma por encima de otra, ¡automáticamente troquela la de abajo! Todo esto es irritante, porque puede arruinar un trabajo entero.

Pequeño taller de Flash.

Los conceptos básicos.

Para entender bien cómo trabajar en Flash deben tenerse claros los términos que utilizan, y cómo se maneja la aplicación. Asumimos que tendréis una versión demo en inglés, por lo que citamos estos términos en su versión original. Si estudiáis en detalle --antes de instalar la demo-- cómo se maneja el programa (por ejemplo, leyendo algún artículo introductorio como éste, y después descargando el completo tutorial en pdf que encontramos en las páginas de Macromedia), durante el período de prueba os dará tiempo de crear un montón de animaciones: probablemente más de las que podáis utilizar en vuestra web.

El espacio de trabajo de Flash no difiere mucho de otras aplicaciones de diseño gráfico. Lo más particular es el "timeline" para colocar ordenadamente los sucesos de la animación, y la paleta de símbolos para los elementos que se repiten.

La animación que crea Flash se llama "movie"; para facilitar su creación, una película flash puede estar constituída por varias secuencias o escenas "scenes", que se ponen una a continuación de otra para formar una película completa. Una escena también sirve como respuesta a una acción (por ejemplo, puede reproducirse al hacer clic en un botón, o al pasar el ratón por encima.) También podemos emplear una acción animada independiente del tiempo, el llamado "movie clip". Si insertamos un clip en la línea de acción, pasará a representarse, con independencia del resto de la acción.

La interfaz del programa

Flash no difiere mucho de otros programas. Veamos la figura adjunta. El espacio de trabajo es el "stage" o escenario. En Flash, lo más peculiar es el cuadro del "Timeline": está formada por frames o fotogramas que se suceden a lo largo del tiempo (en horizontal.); además encontramos diferentes capas o "layers" para distribuir los objetos de la animación. Es muy importante entender que en Flash cada objeto animado debe tener su propia capa.

Un frame en el que sucede algo se denomina Keyframe. Por ejemplo, para definir el movimiento de un objeto, empleamos dos keyframes que indican la posiciones inicial y final.

Los objetos que forman parte de la animación pueden ser de diversos tipos: texto, imágenes vectoriales (dibujadas directamente con los útiles del programa o importadas de otras aplicaciones),y también imágenes en bitmap. Flash trabaja al máximo de sus capacidades y crea archivos de mínimo tamaño si manejamos imágenes vectoriales, y en especial si aprovechamos su capacidad de crear símbolos. Un símbolo es un objeto que se puede reutilizar tantas veces como se quiera, sin añadir tamaño al fichero final. Cada símbolo, además puede presentarse en diferentes variantes (por ejemplo, cambiando su orientación, tamaño o color): son lo que Flash llama instances --lo podríamos traducir por variantes o modelos. Los símbolos están organizados en una paleta específica, la biblioteca de símbolos (symbol library). Desde ahí se arrastran y sueltan a un lugar de la pantalla.

Dibujar y modificar formas.

Las herramientas de dibujo de Flash son semejantes a las de otras aplicaciones vectoriales. Se accede a ellas a partir de los iconos situados en la caja de herramientas (ver imagen). El dibujo a mano alzada en Flash da formas suaves; con un poco de pericia se pueden conseguir interesantes resultados. La principal precaución que debe adoptarse con las formas dibujadas está en el ya comentado detalle de que las formas que se superponen sobre otras se recortan de la que queda inmediatamente debajo.

Las formas dibujadas o importadas (Flash admite prácticamente cualquier formato vectorial) pueden girarse, escalarse o sesgarse sin mayor dificultad; también podemos agrupar y desagrupar objetos, y el texto puede descomponerse en sus formas (convertirse a curvas editables.)

Flash también admite bitmaps, pero no es muy aconsejable recurrir a ellos, excepto para añadir alguna fotografía. Para los bitmaps no están disponibles la mayoría de efectos que pueden utilizarse con los vectores --y hacen aumentar el fichero final.

Utilizar símbolos. Aprovechar los dingbats.

La forma más práctica y eficiente de organizar los elementos de la animación es recurrir a los símbolos (definidos más arriba.) Para definir un símbolo, simplemente seleccionamos un objeto y en el menú Insert | Create Symbol. Aparece un cuadro en el que daremos un nombre descriptivo y seguidamente quedará disponible en la biblioteca de símbolos. Flash maneja cuatro tipos de símbolos: gráficos, botones y movieclips. Un símbolo normal es un gráfico; un botón tiene asociada una acción determinada, normalmente con el ratón o el teclado. Un movieclip puede tener su propia animación independiente.

Cualquier modificación que hagamos en un símbolo afectará todas sus variantes. Esta capacidad es muy poderosa, pero también puede ser una fuente de equivocaciones si no se tiene en cuenta. Para modificar una variante concreta del símbolo, lo que se debe manejar es su Instance (Modify | instance) o bien directamente en el área de trabajo, escalar, rotar...

Alguien ha dicho que Flash y los dingbats parecen hechos el uno para el otro. Y efectivamente, los dingbats suponen una variada fuente de símbolos listos para utilizar. Basta teclear el carácter necesario, convertir a curvas y crear el símbolo. Después, las posibilidades son infinitas.

Animaciones sencillas.

Para crear interfaces y movimiento sofisticado en Flash se hace imprescindible manejar un lenguaje de programación llamado ActionScript (muy semejante a Javascript). Sin embargo, sin complicarse demasiado también es posible crear efectos de animación y transformaciones. Además, en las últimas versiones del programa se pueden aprovechar módulos ya preparados para adaptarlos.

Para ver cómo crear una animación sencilla, veamos la capacidad de Flash para generar automáticamente todas las formas intermedias entre dos fotogramas (lo que se llama tweening.) También es posible crear animaciones fotograma a fotograma, pero es mucho más eficiente y rápido recurrir a la técnica de tweening.

 

La animación adjunta, a pesar de lo que pueda parecer, es muy fácil de crear en Flash. De hecho, está preparada con un sólo símbolo (las formas en color de la cabeza de Frenología de la parte superior de esta página), y las formas intermedias se han creado automáticamente por tweening. Lo más sorprendente es el tamaño del fichero: 6k.(!!!)

En el cuadro adel timeline, definimos dos fotogramas clave (dos keyframes) separados por un cierto tiempo, por ejemplo, dos segundos.  Basta hacer clic sobre el cuadro correspondiente y en el menú Insert | Keyframe. Vamos al primero de ellos y colocamos un símbolo de nuestra biblioteca, que habremos creado antes. A continuación, colocamos otro símbolo en el segundo Keyframe, y modificamos algo su aspecto, por ejemplo, lo rotamos, cambiamos su color... en Modify | Instance. Para crear la animación, se selecciona con el ratón todo el segmento entre los dos keyframes utilizados, y pulsando el botón derecho, elegimos Create Tweening. Hay diversos tipos de intercalar las formas intermedias: Shape crea fotogramas intermedios con formas que gradualmente van pasando de un objeto a otro; Motion sirve para todos los demás casos --incluso cuando el símbolo no canvia de posición y sólo varía su color.

Para probar la animación, vamos al menú: Control | Test Movie.

Si estamos satisfechos de los resultados, ya podemos exportar la peli en formato SWF para incluirla después en una página web. si queremos algo más sofisticado, añadiremos nuevas capas con otros símbolos que siguen su propia animación. El formato en que debemos guardar las películas para trabajar en ellas en varias sesiones distintas es el Flash (ficheros con una extensión .fla)

Otras posibilidades de Flash relacionadas: crear una animación a lo largo de un trayecto; rotar el objeto a lo largo del recorrido; acelerar o frenar...

Importar y calcar imágenes

Los útiles de dibujo de Flash son muy buenos, pero con frecuencia aprovecharemos otros ficheros ya preparados. Flash admite una gran variedad de ficheros vectoriales o de mapa de bits. Para colocar un fichero externo, sólo debemos colocarlo con la opción File | Import.

También tiene una generosa colección de formatos de salida, tanto vectoriales como de mapa de bits. Para ello, tenemos la opción Export.

Una utilidad interesante que encontramos en Flash es la capacidad de calcar automáticamente una forma vectorial por encima de un mapa de bits que hayamos importado. Esta opción se encuentra en el menú Modify | AutoTrace. Si queremos aprovechar las posibilidades de animación y efectos al máximo, será preciso efectuar esta operación; deberemos tener en cuenta, sin embargo, que el auto-calcado será más efectivo en imágenes simples y con pocos colores, o en blanco y negro.

 Interactividad.

Si Flash sólamente sirviera para crear animaciones, sería un añadido poco funcional para las páginas web. Sin embargo, Flash es un auténtico entorno de creación multimedia. Podemos incluir sonido y una serie de acciones preestablecidas o interactivas que hacen de las películas Flash algo muy útil para el diseño web.

La interactividad se basa sobre todo en el uso de botones para llevar a cabo una acción (por ejemplo, dirigirse a una página web), y en la incorporación de formularios. Los efectos de interactividad son muy potentes y configurables y se trata de un tema ya para usuarios avanzados: planificar y crear una compleja animación interactiva no es tarea de un rato.

Flash es utilizado con frecuencia para crear menús emergentes, que se despliegan a medida que el usuario pulsa sobre las diferentes opciones. Un buen ejemplo es la propia página de Macromedia.

Los efectos de mouseover también son fáciles de conseguir. Un botón se define como un tipo especial de símbolo. Enseguida aparece un cuadro (el que mostramos encima de estas líneas) en el que elegimos el gráfico que aparecerá en los estados up, over, down, y hit. Es decir, qué debe verse en el estado normal, cuando pasa el ratón por encima, al pulsar y cuál es el área que puede responder (puede ser un área menor, igual o mayor según las necesidades.) Cada uno de los estados puede dibujarse directamente, importar un gráfico o colocar otro símbolo.

Como ya se mencionó, para sacar el máximo provecho a la interactividad se hace necesario incluir programación en ActionScript.

Incluir Flash en las páginas web.

Naturalmente, las películas de Flash las creamos en la mayoría de ocasiones como parte de una página web. Estas películas (un fichero .SWF) se enlazan al código html mediante una etiqueta específica. No entraremos en detalles aquí; cualquier editor de html actual puede generar las etiquetas de html necesarias para que la película se muestre correctamente.

Si el fichero de Flash es estático (puede tener sentido, por ejemplo, para un mapa o cualquier gráfico que interese poder observar en detalles ampliados), será conveniente de que avisemos de alguna manera de que se trata de una imagen flash; si no, pasará totalmente desapercibido a los visitantes, que no podrán distinguirlo de una imagen normal.

Debemos tener en cuenta que las dimensiones de la animación pueden definirse a voluntad; no añadirá complejidad ni aumentará el tamaño final del fichero. Los elementos críticos son el texto para leer o los bitmaps que se hayan colocado, ya que estos elementos pueden perder calidad o visibilidad al redimensionar.

Recursos sobre Flash y alternativas.

Han proliferado últimamente las páginas web donde se ofrece información sobre Flash (tutoriales, aplicaciones relacionadas, consejos y ejemplos.) Basta con recomendar una pequeña selección, puesto que en las principales páginas se incluyen enlaces a recursos semejantes. La primera parada puede ser la propia página de Macromedia. Agunos ejemplos de páginas dedicadas a Flash incluyen www.extremeflash.com , www.flashlite.net , www.flashplanet.com , www.flashzone.com, www.flashkit.com

o www.tutoriales-flash.com (en castellano, y con una interfaz limpia y atractiva).

Swish es una sencilla aplicación que crea películas Flash sólo con texto. Ahora bien, los efectos que es capaz de crear son sorprendentes (y sería difícil crearlos con el mismo Flash.) Vecta 3D está enfocado a crear imágenes 3d exportadas al formato de Flash.

Toon Boom es un completo entorno de creación de dibujos animados, y es capaz de exportar en forma de película flash.

Muchos programas, en sus últimas versiones, tienen una capacidad más o menos potente de exportar como SWF. En algunos casos simplemente pueden crear SWF estáticos (útil para mapas, planos y esquemas que se puedan observar en detalle), en otros incluso pueden generar animaciones simples.

Alternativas a Flash.

Podríamos ahorrarnos el apartado. De momento, no hay alternativa. ¿La habrá algún día? Esto ya no es tan seguro. Leed también el artículo sobre el nuevo formato vectorial SVG...

Por otro lado, os aconsejamos dar un vistazo a un formato vectorial que... ha fracasado. El formato flare (.Web) de Xara. Un fracaso honorable, debido a la falta de poder de la compañía, no a la falta de calidad. Los vectores Flare tienen una calidad excelente, un tamaño muy reducido y el plugin para verlos sólo tiene unos 200k; se puede obtener gratis de la web de Xara.