Taller de Flash

Taller de Flash
Clase 01: Intro
Hay diseadores que lo aman y otros que lo odian. Flash es un programa de Adobe con miles de
virtudes, pero tambin muchas limitaciones. La funcin de este programa es bsicamente permitir
la creacin de animaciones interactivas. En esta primer clase veremos los usos bsicos del
programa, las versiones que hay en el mercado y algunas cuestiones de compatibilidad.
El alcance de Flash es altsimo y tiene su propio lenguaje de programacin: ActionScript. Es un
lenguaje orientado a objetos que ayuda a hacer la animacin ms dinmica y verstil.
La animacin interactiva ofrece muchas posibilidades en cuanto a funcionalidad. En el transcurso
de este taller de Flash, veremos los usos que podemos darle a este programa para exprimirlo al
mximo.

Series animadas
En primer lugar, Flash se utiliza para realizar animaciones con distintas
aplicaciones. Hay series animadas hechas completamente en Flash.
Algunos ejemplos son Happy Tree Friends, YinYangYo!, Chilly Beach,
Clico Electrnico y Fosters Gome for Imaginary Friends. Las
animaciones pasan al terreno web: con Flash los sitios dejan de ser
estticos y ganan movimiento.

Publicidad
Una de las aplicaciones ms comunes de Flash es en publicidad. Si la idea es captar la atencin de
un usuario con un aviso, el Flash lo tiene todo: permite diseos muy originales, animaciones y
adems es interactivo, lo que hace que no sea necesario llevar a un usuario del sitio original
(donde est pautado el anuncio) al sitio objetivo. El anuncio es una mini web donde se puede
llenar un formulario, navegar y elegir opciones, sin necesidad de mudarnos de sitio. Pero lo mejor
de todo es que nos desencasilla, dndonos la posibilidad de huir de esos tan trillados banners
estticos para crear publicidades novedosas, invasivas o no.

Banner expandible

Taller de Flash

Elementos web
Es muy comn ver al Flash aplicado en algunos espacios claves de una web. Se utiliza en botoneras
o botones individuales, como fragmentos animados para realzar el diseo, en presentaciones y
elementos visuales. En estos casos, el Flash se usa casi exclusivamente porque los objetos quedan
ms bonitos. Pero se puede hacer todo un sitio web en Flash. En general, los sitios realizados
enteramente en Flash son sitios de presentacin, donde no se requiere una actualizacin
constante del sitio. El Flash no es apto para ser la plataforma de un portal, un sitio de compras, un
blog. S por el contrario es ideal para un portfolio y la presentacin de un producto o una marca.

Botonera del sitio http://www.straussgastronomia.com.br/

La interaccin en Flash permite incluso la creacin de juegos. Con un
conocimiento intermedio de ActionScript se pueden lograr juegos
bastante buenos y con una complejidad dentro de todo elevada. Gracias
a esta facilidad, cualquiera puede hacer juegos en Flash (cualquiera que
se haya internalizado con ActionScript), por eso se han popularizado
tanto y por eso es que hay cientos de sitios en Internet ofreciendo
juegos en Flash: MINIJUEGOS.com, Flash-Game.net, fun flash games.com, GameGum y otros

Versiones
Flash surgi a principios de los aos ochenta como una idea en la mente de Jonathan Gay. En
enero de 1993, Charlie Jackson, Jonathan Gay y Michelle Welsh iniciaron una compaa a la que
llamaron FutureWave Software que desarroll las bases para Flash. En diciembre de 1996, el
software de animacin basado en vectores fue comprado por Macromedia. As naca Flash 1.0.
Luego vinieron las versiones Macromedia Flash 2, 3, 4 y 5. Cada uno con nuevos adelantos.

Las versiones 1, 2 y 3 de Flash

Taller de Flash

De izquierda a derecha, las versiones Flash MX, Flash MX 2004 y Flash Professional 8
En 2002 el programa sufri un buen cambio, con el lanzamiento de Macromedia Flash MX y su
sucesor: Macromedia Flash MX 2004, mucho ms rpido, con ms compatibilidad y definicin en
importaciones de archivos PDF y de Illustrator. Tambin se introdujo el ActionScript 2.0, con ms
funciones. Esta ltima edicin de Flash fue la primera en tener dos versiones: una profesional y
otra bsica.
La versin ms impactante fue Macromedia Flash 8 de 2005. Se incluyeron
filtros nuevos, un nuevo codec de video, renderizacin de fuentes (FlashType),
un emulador de mviles y otras actualizaciones. En diciembre de 2005, Adobe
Systems compr Macromedia, por lo que la siguiente presentacin de Flash
tena que ser definitivamente especial. As llegaron el Adobe Flash 9 Public
Alpha y un esbozo de ActionScript 3.0. En 2007, el Adobe Flash CS3 termin
de integrar Flash al resto de los programa del paquete Adobe Creative Suite
CS3.

Adobe Flash Player

Una mala noticia para los que recin descubren el Adobe Flash es que los navegadores requieren
un plug-in para poder visualizar los archivos de Flash. Este plug-in se llama Adobe Flash Player y
se puede descargar gratuitamente desde su sitio oficial. Sin embargo, no todos los internautas
estn dispuestos a instalar una aplicacin nueva para ver un sitio. Aunque el Adobe Flash Player se
ha masificado, muchas personas siguen sin poder ver los elementos web creados en Flash.

Haz clic aqu para visitar el sitio oficial de Adobe Flash.

Clase 02: Mesa de Trabajo (1)

Antes de comenzar a ver la funcionalidad de Flash, presesentar el entorno de trabajo: todo lo
que vers en pantalla cada vez que abras el
programa. Esta mesa de trabajo est dividida claramente en 5 partes: la Hoja de Trabajo en el
centro, la Lnea de Tiempo arriba, la barra de Herramientas a la izquierda, los Paneles a la
derecha y el cuadro de Propiedades en la parte inferior.

Taller de Flash

Estas 5 partes se pueden arrastrar y cambiar de ubicacin, dndote la posibilidad de adaptar el

entorno como a t ms te guste. Adems, estos elementos se pueden minimizar, haciendo clic
sobre el nombre de cada uno.

Cuadro de propiedades
Una de las cosas fundamentales antes de comenzar es definir el tamao de la Hoja de Trabajo.
Aunque se puede setear ms adelante, es recomendable saber de antemano en qu dimensiones
vamos
a
trabaj
ar.
En el
cuadro de Propiedades, vers la opcin de Tamao. Ingresa all las dimensiones que quieras.
Tambin puedes cambiar el color de fondo, desde la opcin Fondo o la velocidad, eligiendo la
cantidad de Fotogramas por segundo. Y en el momento de publicar nuestro trabajo, incluso
tenemos la opcin de escoger entre varios formatos de publicacin
Pero lo mejor del cuadro de Propiedades es que se va modificando segn lo que selecciones. En
este caso, estaba nicamente la hoja de trabajo vaca y por eso se indica del lado izquierdo, al
costado del logo de Flash que se trata de un Documento, que por ahora no tiene nombre.
Ahora crearemos un crculo con la herramienta de crculo (barra de Herramientas). Si
seleccionamos el crculo, vemos que el cuadro de Propiedades nos muestra informacin sobre esta
nueva forma:

Taller de Flash

Ahora puedes ver datos de la forma: sus dimensiones ancho y alto, su posicin dentro de la mesa
de trabajo X, Y, el color de borde, el color de la forma, el grosor de borde y el tipo de lnea de
borde. Todas estas especificaciones pueden ser cambiadas ah mismo, en el cuadro de
Propiedades. Ms adelante veremos otros usos de este elemento Flash.

Barra de Herramientas
La barra de Herramientas puede dividirse en 4 partes: seleccin, creacin, transformacin,
visualizacin, color y otras opciones.
Antes de ver estas herramientas, debes saber que en Flash trabajamos con dos tipos de elementos:
de pxel y vectoriales. Las herramientas de esta barra sirven para manipular y crear estos
elementos.

Seleccin:
La flecha negra nos permite seleccionar objetos enteros, sobre todo aquellos
elementos de pxel, para moverlos dentro de la mesa de trabajo, borrarlos o realizar
otras acciones. Importante: cuando selecciones una forma con borde, ten en cuenta
que para seleccionar el interior y el borde al mismo tiempo, debers hacer doble clic
sobre la forma. De otra forma, haz un clic sobre el borde para seleccionar el borde, o
uno sobre el interior de la forma para seleccionar esa parte.
La flecha blanca selecciona vectores, movindolos o borrndolos. Nos permite
cambiar la forma de un objeto vectorial.
El lazo se usa para seleccionar elementos de pxel, tanto para borrarlos como
para editarlos.

Creacin:
La lnea nos permite crear lneas rectas. Para eso se debe hacer clic
en un punto de la hoja. Mantn presionado el mouse y mueve el puntero para
ver cmo se genera la lnea. Deja de cliquear cuando hayas obtenido la lnea
que deseas. Si una sucesin de lneas generan una forma cerrada, esta forma
pasar a ser un objeto y podr rellenarse con color, permitiendo adems otras
opciones de edicin.
La pluma sirve para crear objetos del tipo vectorial (ver imagen de la derecha), con la
posibilidad de generar curvas. Es similar a la pluma que se ve en otros programas de diseo, como

Taller de Flash
por ejemplo el Illustrator. Para saber usar la pluma a la perfeccin es necesario un poco de
prctica.
Las herramientas de valo y rectngulo generan formas cerradas.
Manteniendo presionada la tecla Shift del teclado, podrs crear crculos o
cuadrados perfectos. De lo contrario, podrs lograr las dimensiones que
quieras, seleccionando el objeto y modificando sus medidas en el cuadro
de Propiedades.
El lpiz y el pincel son muy parecidos. Con estas herramientas
podemos crear lneas a mano alzada. Como ves en la imagen, mientras que el lpiz genera una
lnea de borde, el pincel genera relleno y es un objeto en s mismo. Si el trazo del lpiz se une
en un punto, se convertir en una forma que podrs rellenar. Al trazo de pincel es una forma llena
a la que podemos darle borde.
Dentro de esta barra de Herramientas est la opcin de Fuente, para insertar
texto. Hay un captulo ms adelante sobre el tratamiento de tipografas en Flash (Clase
16. Paciencia!), sin embargo podrs darte cuenta lo fcil que es incluir texto con este programa:
slo debes seleccionar la herramienta y hacer clic en alguna seccin de la hoja de trabajo. Escribe
lo que quieras. Luego podrs mover o rotar la caja de texto. Para editar el texto, tienes varias
opciones en el cuadro de Propiedades.

Transformacin:
La herramienta de Transformacin es una de las ms importantes porque nos permite
rotar y modificar las dimensiones de cualquier objeto. Slo haz clic en la herramienta y luego
sobre el objeto u objetos que quieras modificar.
La herramienta de Gradiente se usa para editar
gradientes,

no

para

generarlos.

Se

selecciona

la

herramienta y se hace clic sobre el objeto que se quiera

modificar.

Podrs

modificar

las

dimensiones

del

gradiente (la distancia entre un color y otro), la posicin y el ngulo.

El Bote de tinta y el Cubo de pintura cumplen la funcin de colorear. El Bote de tinta
colorea bordes; el Cubo de pintura colorea rellenos.
El Gotero sirve para tomar colores de objetos ya existentes. De esta manera, si
queremos pintar un objeto de otro color que ya se utiliz, tomamos el gotero y manteniendo
presionado alt+shitf hacemos clic sobre el objeto del color que nos gusta. El color quedar
seleccionado y lo podrs usar en la creacin de un objeto nuevo o para colorear uno que ya existe.
Atencin: no funciona con gradientes!
El Borrador borra cualquier objeto o parte de un objeto. Se puede modificar el grosor y
forma del borrador desde la misma barra de Herramientas, en el sector Opciones. Tambin se
puede elegir borrar selectivamente: slo relleno, slo borde, slo elementos seleccionados, etc.

Taller de Flash

Visualizacin:
La mano te deja desplazarte por la pantalla a gusto y piacere. Prubalo, pero
no hace falta recurrir a la barra de herramientas: presionando la barra espaciadora se
habilita la opcin de mano. Es una herramienta muy til para trabajar en un espacio amplio.
La Lupa te permite ampliar la pantalla en el sector que quieras. Sin embargo, se utiliza
un atajo de la lupa que agiliza mucho el trabajo: presionando ctrl+barra espaciadora visualizars
la lupa automticamente en su versin de ampliar. Haz clic sobre la pantalla en el punto que
quieras ampliar. Para ampliar ms, haz otro clic. Si quieres reducir el zoom, haz lo mismo, slo
que esta vez debers presionar ctrl+alt+barra espaciadora.

Colores:
Desde el sector de Colores modificamos el color de relleno y de borde de cualquier
objeto (lpiz para borde, cubo de pintura para relleno). Tambin puedes invertir estos
colores (la opcin de las flechas): pasando a estar el del borde para el de relleno y al
revs. El programa cuenta con colores predeterminados: borde negro y relleno azul (la
opcin de los cuadraditos blanco y negro).

Opciones:
En el sector de opciones, se muestran opciones sobre las diferentes
herramientas que vamos seleccionado. Es bueno prestar atencin a estas
opciones ya que muchas veces nos simplifican el trabajo. En la imagen
puedes ver un ejemplo con las opciones que se muestran cuando
seleccionamos la herramienta del borrador y con la flecha negra.
Para continuar con el taller de Flash, te recomiendo que comiences con un reconocimiento del
programa, probando con estas herramientas. Anmate a avanzar con los paneles. Aunque no
conozcas Flash, una de las mejores maneras de aprender es probar y equivocarse.

Clase 03: Mesa de Trabajo (2)

En Flash tenemos a nuestra disposicin una serie de paneles para trabajar con color,
alineamiento, transformaciones y escenas, adems de obtener informacin sobre los objetos. Si
sabemos usar estas herramientas, podremos sacar mayor provecho del programa.
Adems de los paneles, veremos cmo utilizar la biblioteca: un espacio para almacenar imgenes,
objetos y smbolos, que administra el trabajo y lo organiza.

Paneles
Los paneles se encuentran generalmente en la parte derecha de la mesa de trabajo y son cajas de
herramientas, especializadas en diferentes cosas. Cada panel nos abre distintas posibilidades para
mejorar nuestro diseo.

Taller de Flash

Mezclador de colores
En este panel encontraremos prcticamente las mismas
opciones de color que en la barra de Herramientas. La
diferencia reside en la eleccin de los colores a travs de
numeracin.
A la derecha vemos 4 casilleros con nmeros. Los primeros
tres, con el valor 255 son los que definen el color RGB (Red,
Green, Blue), que en este caso se ve como RVA (Rojo, Verde,
Amarillo). Puedes variar las cifras para cambiar el valor de
color. R255, V255, A255 equivale a blanco.
Por otra parte, el porcentaje de Alfa se refiere al valor de
transparencia que tendr el color. Alfa 100% es slido, mientras que un valor del 0% es
completamente transparente.
Si trabajas con colores web, tambin puedes introducir valores de este tipo tal como se ve en el
ejemplo: #FFFFFF.

Alineamiento
El panel de Alineamiento se utiliza continuamente. Sirve
tanto para alinear objetos entre s, como para alinearlos
con

respecto

la

mesa

de

trabajo:

centrar

algo

perfectamente en la hoja.
Para alinear dos o ms objetos debes primer seleccionarlos y
luego elegir la opcin del panel que prefieras. Si lo haces
con respecto a la mesa de trabajo, selecciona el objeto solo y asegrate que est seleccionada la
opcin En Escena.

Info
El panel de Info es super til para obtener
informacin sobre los objetos que estamos
manipulando.
En el ejemplo podemos ver un cuadrado
comn. En el panel se muestra informacin
sobre el color (R204, V255, A51 - Alfa: 100%), la posicin dentro de la mesa de trabajo (X:334.9,
Y:377.4) y las dimensiones (41.3 x 41.3 pxeles).

Transformar
La opcin de Transformar es muy parecida a
la transformacin que se consigue a travs de
la barra de Herramientas, slo que esta vez es
mucho ms precisa, a travs de cifras.

Taller de Flash
En la imagen de la derecha se ve el mismo cuadrado que el ejemplo anterior, transformado
utilizando este panel. Lo reduje un 60% en su ancho y lo rot 15 grados hacia la derecha (para
rotar hacia la izquierda se le agrega un signo menos (-) antes del nmero). La opcin de sesgar se
deduce del dibujo explicativo en el panel.
Por otra parte hay dos mini-botones en la parte inferior derecha. Prstenle
atencin. El botn de la izquierda repite la ltima accin que se haya realizado.
En este caso, repite la reduccin en el ancho y el giro a la derecha, quedando
como se puede ver en la imagen de la izquierda (lo hice varias veces para que
quede evidente). El botoncito de la derecha deshace las acciones regresando la
forma u objeto a su estado original.

Muestras de color
Para ahorrar tiempo en la eleccin de los colores que uso,
tengo siempre en cuenta el muestrario de color. Este
muestrario se puede ampliar con nuevas muestras.
Adems, los colores se pueden ordenar y se pueden aadir
nuevos colores que estemos utilizando. As nos ahorramos el
uso del Gotero y agilizamos la tarea. De hecho, podemos
crear nuestro muestrario de color desde cero, incluyendo
nicamente colores que estn en uso.
Debajo del muestrario de color hay un mini-muestrario de gradientes, que puedes elegir como
base y despus editar.

Componentes
Los Componentes son elementos Flash, como botones,
menes expandibles y scroll bars.
Este panel ofrece componentes estndard para utilizarlos
de base y no tener que crearlos desde cero. Estos
componentes se pueden editar para personalizarlos.

Escena
As como en una pelcula, las animaciones en Flash estn
divididas en Escenas. En el panel de Escena vemos el listado
de las escenas. En este caso es una sola y el nombre es
Escena 1. Haciendo doble clic sobre el nombre, se puede
editar.
Debajo hay 3 botones: el primero es para duplicar escenas. El segundo sirve para crear una nueva
escena vaca. El tercero y es obvio es para borrar las escenas. El orden de las escenas se puede
modificar seleccionndolas y arrastrndolas con el mouse.

Taller de Flash
Adems de estos paneles, hay un panel especial de Respuestas que te servir de ayuda. Incluye
tpicos comunes con una gua para el uso bsico del programa.

Biblioteca
La

Biblioteca

es

una

parte

fundamental de Adobe

Flash.

Aqu quedan almacenados los

elementos

que

luego

explicaremos en futuras clases:

smbolos, pelculas, botones, etc.
En la biblioteca vas a ver un
listado con todos los elementos,
smbolos. Pueden estar a su vez
organizados en carpetas. Estos
smbolos son nicos. En el caso
del ejemplo, el Smbolo 3 se
corresponde al texto que dice
flash. En el visor de la biblioteca vemos el elemento original. Al costado vemos el mismo smbolo
modificado. Sin embargo, las nicas modificaciones que pueden hacerse tienen que ver con la
dimensin, posicin y ngulo.
Cualquier modificacin de color o forma que sufra el smbolo, se modificar en el smbolo de la
biblioteca. Si yo hubiera modificado el color del flash grande, lo hubiera hecho tambin con el
pequeo. No as si deseo ampliar o reducir el elemento.
Si queremos realizar cambios en un elemento sin cambiar el original de la biblioteca, entonces
debemos duplicar este smbolo. Selecciona el smbolo y haz clic en el men (debajo de la cruz de
cierre de la ventana). Escoge Duplicar.
Esto es smamente importante, ya que muchas veces utilizamos el mismo smbolo y, sin darnos
cuenta, realizamos modificaciones que repercuten en el resto de los smbolos que habamos usado.
Debajo del listado de la biblioteca hay 4 mini-botones. De izquierda a derecha:
Nuevo smbolo: nos permite crear un smbolo desde cero y
almacenarlo automticamente en la biblioteca.
Nueva carpeta: para crear una carpeta nueva en la biblioteca y organizar los elementos.
Propiedades: al seleccionar un smbolo, se habilita la opcin de Propiedades que nos
deja ver de qu tipo de smbolo se trata.
Borrar: lo usamos para borrar smbolos y carpetas.
En la clase siguente veremos los conceptos de lnea de tiempo y animacin para lo que es
necesario tener una manejo bsico del control de la mesa de trabajo, creacin de objetos,

10

Taller de Flash
edicin, transformacin y todos los elementos que se vieron en estas ltimas dos clases. A
practicar! Mucha suerte

Clase 04: Animacin (1)

Como Flash es un programa de animacin dinmica, es importante comprender el manejo del
tiempo en esta aplicacin pero tambin entender qu tipo de pelculas vamos a crear para poder
tener un manejo ms amplio del factor temporal.
Si creamos animaciones del tipo cartoons, el tiempo es completamente lneal, con un punto inicial
y otro final. En otro tipo de usos, las animaciones poseen tiempos estticos en los que no sucede
ninguna accin: las animaciones se dan en respuesta a una accin del usuario.

Escenas
El tiempo en Flash se divide en Escenas. Pero estas escenas se pueden utilizar de dos modos
diferentes:
Cartoons: En este tipo de trabajos, las Escenas equivalen a la escena de un film. Adems
de tener un inicio y un final fijos, son las que organizan la pelcula. Cuando termina otra Escena,
comienza otra hasta que se llega a la ltima.
Web y otros usos: Aqu las escenas son muy tiles para organizar el trabajo. Si tienes un
sitio web, puedes crear una Escena por cada seccin de tu sitio: Inicio, Portfolio, Biografa,
Contacto. Cada una de estas secciones ser una Escena diferente. Cuando los usuarios hagan clic
sobre uno de los botones, ser redirigido a la Escena correspondiente.

Como vemos en el grfico, cuando creamos animaciones del tipo cartoon, las escenas siguen un
orden y siempre comienza con la Escena 1 y termina con la Escena X.
En otro tipo de trabajos, el orden de las escenas lo elige el usuario cuando interacta con los
elementos. De todas formas, siempre comenzaremos con la Escena 1, a partir de la cual el
usuario podr navegar entre el resto de la escenas.
Decamos que el tiempo se divide en Escenas. Existe un
men donde veremos el listado de las escenas que

11

Taller de Flash
poseemos. Se pueden eliminar, duplicar o crear una nueva escena. Tambin se pueden
intercambiar o cambiar de orden. El men se visualiza con Mayscula+F2.

Concepto de lnea de tiempo

El manejo del tiempo se basa en una Lnea de Tiempo. As como una hora est dividida en minutos
y segundos, nuestra Lnea de Tiempo se dividide en Fotogramas. La lnea es siempre inifinita,
pero la animacin va a finalizar en el ltimo fotograma lleno, el ltimo que contenga
informacin.

La unidad de medida es Fotogramas por Segundo (fps) y es un valor que se puede modificar,
aunque lo ms comn es utilizar 12 fps.
Como se ve en la imagen, la Lnea de Tiempo presenta fotogramas blancos y grises. Los grises se
disponen cada 5 fotogramas como una ayuda para contabilizar mejor estos fotogramas a la hora de
crear la animacin.

Capas
Como complemento de nuestra Lnea de Tiempo estn las Capas. Su principal funcin es
organizativa. Supongamos que creo un crculo en el primer fotograma de la Capa 1. Luego creo
una animacin de ese crculo, aumentando su tamao hasta duplicarlo definitivamente en el
fotograma 10.
Del fotograma 1 al fotograma 10 tengo la animacin de mi crculo. Supongamos que al mismo
tiempo quiero crear un crculo al lado y tambin animarlo. En ese caso, no pueden superponerse
ms de una animacin en la misma capa, por eso tengo que crear el segundo crculo en una capa
nueva.

Cada objeto debe estar en su propia capa. Y ojo que cuando de objetos puede ser una combinacin
de elementos: si mi crculo es un sol en un paisaje y es lo nico que va a tener animacin,
podemos crear todo en la misma capa. Pero ms all de situaciones como esta, no es conveniente

12

Taller de Flash
ahorrar en capas, todo lo contrario. Cuando ms capas tengamos, ms organizado estar nuestro
trabajo.
En el listado de capas, al lado de cada una podemos ver el Estado de la capa:
Ojo: Tildando esta opcin
podemos ocultar o mostrar la
capa.
Candado: Esta opcin nos
permite bloquear una capa. Esto
significa que no podremos realizar
ninguna modaficacin a los objetos de la capa.
Marco: Cuando la opcin de marco est activa, se muestran nicamente el contorno de los
objetos de esa capa.
A su vez, debajo del listado de capas hay 4 opciones:
Agregar capa: Agrega una capa al listado de capas.
Agregar gua de capa: El elemento gua de capa lo veremos ms adelante.
Agregar carpeta: Se puede agregar una carpeta para organizar capas all adentro. De esta
manera podremos organizar mejor las capas que poseemos, evitando un largo listado de capas
imposible de entender.
Eliminar: Elimina capas, guas y carpetas y todo su contenido.
El orden de las capas est relacionado con su posicin virtual en el espacio. La capa inferior del
listado se encontrar detrs de las otras capas. Podemos ver en las imgenes de los crculos,
que el crculo mayor, en la capa 1, est detrs del crculo menor de la capa 2.
Para poder comprender ms estos conceptos, es bueno que practiques generando figuras en
distintas capas, probando la superposicin, junto con lo que vimos en clases anteriores. Crea
capas, duplica, elimina, organiza en carpetas Luego crea nuevas escenas para poder comenzar
la clase que viene con una introduccin a la animacin Flash. Mucha suerte!

Clase 05: Animacin (2)

El buen manejo y entendimiento de los fotogramas y la lnea de tiempo es crucial para lograr los
resultados esperados en los trabajos de Flash. En esta clase veremos los aspectos bsicos de la
animacin, sus principales componentes, qu tipos de fotogramas hay y cmo alcanzar los
resultados deseados con el mnimo esfuerzo.
En s, Flash nos proporciona todas las herramientas para que podamos realizar una animacin
buena en poco tiempo. Aprovechmoslas!

13

Taller de Flash

Fotogramas
Si este tema no es el ms importante del taller, se le acerca mucho. Dado que Flash es un
programa de animacin y los fotogramas son lo que hacen posible esa animacin, dir que al
menos son un engranaje fundamental en el funcionamiento de esta mquina.
Se le dice fotograma a cada una de las imgenes
impresas en una tira de pelcula. En este caso lo
veremos un poco diferente, pero en esencia es lo
mismo.
Ahora, centrmonos en nuestra lnea de tiempo. Ese
es el escenario donde vamos a tratar con los
fotogramas.
En Flash hay 2 tipos bsicos de fotogramas: claves y
comunes. En la lnea de tiempo, los fotogramas clave poseen un punto, como se puede ver en el
ejemplo de la primer imagen.

Funcionamiento de los fotogramas

En los fotogramas clave vamos a insertar lo importante. Cmo es eso? Flash realiza la
animacin automticamente. Imagina una pelota que cae del cielo. En Flash no necesitamos crear
todos los fotogramas de la escena. nicamente creamos los fotogramas clave: cuando la pelota
est arriba y cuando est abajo. Son slo dos fotogramas. El resto de los fotogramas los genera
Flash.

Si haces clic en el siguiente archivo SWF podrs ver tres crculos animados de
forma diferente. Como se puede ver, la animacin tiene dos puntos importantes:
el inicio y el final. Cada crculo fue insertado en una capa diferente, pero los
fotogramas clave estn en la misma posicin.
En total se utilizaron 10 fotogramas, pero slo
tuvimos que especificar 2 por crculo. De esta
manera Flash nos ahorra los pasos intermedios.
En la imagen se pueden ver los fotogramas en la
lnea de tiempo. Los fotogramas clave (marcados
con un punto) estn en el fotograma 1 y el 10.

Antes de realizar la animacin, los smbolos o elementos con los que trabajamos debern ser
convertidos en grficos. (Este concepto lo veremos en clases posteriores). Esto se hace
rpidamente seleccionando el smbolo y, a travs del comando F8, seleccionado la opcin
Grfico.
Los fotogramas se ven de color violeta y con una flecha hacia la derecha porque estn animados.
Como indica la imagen, la animacin comienza en el fotograma 1 y termina en el 10, que no posee
animacin.

14

Taller de Flash
Para animar una serie de fotogramas, slo debes hacer clic con el botn derecho del mouse sobre
la parte que desees animar y seleccionar la opcin Crear interpolacin de movimiento.
Recuerda que para animar algo tiene que haber una diferencia entre el primer fotograma clave y
el ltimo de esa animacin. Puedes variar el color del grfico, su tamao, transparencia, etc.
Todo eso se realiza seleccionando el grfico cuando ests en el fotograma clave y variando sus
caractersticas desde el Cuadro de Propiedades.
Tambin pueden haber fotogramas vacos. Dado
que todo funciona en una misma lnea temporal,
puede pasar que en un capa la animacin comience
mucho ms tarde que en otra. Qu sucede
mientras tanto? Nada. La capa en esos fotogramas
queda vaca.
En la imagen se ve que la animacin de la capa Crculo 3 comienza recin en el fotograma 5.
Antes de eso, la capa permanece blanca, vaca.
Una regla general es que el fotograma 1 de cualquier capa inicialmente aparece como un
fotograma clave. El primer fotograma es el inicio de la animacin Si este fotograma no se utiliza,
queda blanco pero permanece como fotograma clave, a menos que se elimine.

La animacin
Para insertar un fotograma clave, debes hacer lo siguiente:
1.

Posicionarte en el fotograma deseado

2.

Presionar

F6

Con el botn izquierdo del mouse vers un men que tambin te permite insertar
fotogramas.
Los fotogramas comunes se generan solos entre dos fotogramas clave.
Qu pasa si quiero que un objeto inanimado (un crculo esttico, por ejemplo) permanezca en la
pelcula durante varios fotogramas?
1.

Inserta

el

objeto

en

una

capa

nueva

Llamaremos a esta capa Crculo inanimado.

Si creamos la nueva capa y dibujamos o pegamos directamente un crculo, este aparecer en el
primer fotograma. Si queremos que el crculo se aparezca recin en el fotograma 5, deberemos:
1.

Crear

un

fotograma

clave

en

el

fotograma 5 (como se ve en la imagen)

2.

Crear o pegar el smbolo.

Todo elemento nuevo se inserta en un fotograma clave.

15

Taller de Flash
Ahora bien, no tengo ningn inters en animar el crculo. Quiero que del fotograma 5 al 8 se vea
igual. Por lo tanto, no necesito convertirlo a Grfico, ni animarlo. Slo quiero que Flash
entienda que el fotograma 5 se repite igual hasta el 8. Para esto slo debo prolongar el
fotograma 5, agregando fotogramas comunes a partir del fotograma 6. Para hacerlo:
1.

Selecciona el fotograma 8

2.

Presiona F5.

Vers que se agregarn los fotogramas que

deseabas. Otra forma es seleccionar el fotograma clave 5 y presionar F5 desde ah. Vers que cada
vez que presiones F5 se agregar un solo fotograma despus del que has seleccionado.
Esto funciona nicamente cuando no se haya ocupado ningn fotograma posterior al 8 en ninguna
capa.
Toda pelcula tiene un fotograma inicial y uno final. Cuando nosotros insertamos un fotograma
clave y dibujamos o pegamos all un smbolo, Flash interpreta que ese smbolo va a aparecer hasta
el final de nuestra pelcula. Esto es porque al crear la capa, esta se crea desde el fotograma 1 al
ltimo fotograma que tengamos ocupado (incluyendo todas las capas de la misma escena).
Por eso, puede pasar que al pegar o crear un smbolo, este aparezca en todos los fotogramas
siguientes al fotograma inicial y tengamos que borrar aquellos fotogramas donde no queremos
que figure. Exactamente esto fue lo que he tenido que hacer en el caso de la ltima imagen, pues
al crear mi smbolo los fotogramas se haban creado automticamente hasta el fotograma 10. Para
eliminar los fotogramas, slo debes seleccionar los que deseas borrar y presionar Shift+F5.
En el caso de intermitencia, tal
como se ve en la imagen, es
necesario

crear

un

fotograma

clave cada vez que modifiques la

visualizacin. Las flechas rojas
muestran la ubicacin de cada
fotograma clave. Esto funciona
tanto para objetos inanimados como para grficos animados.
En este caso el crculo se ver recin a partir del fotograma 5, en tres intervalos. Hay varias
formas posibles de realizar cada accin, un ejemplo para esta pelcula sera el siguiente:
1.

Creo el fotograma clave 5

2.

Pego el smbolo

3.

Creo el fotograma clave 7

4.

Borro el smbolo

5.

Creo el fotograma clave 10

6.

Pego el smbolo

16

Taller de Flash
Los pasos se repiten.
Otra forma de hacerlo es:
1.

Creo el fotograma clave 5

2.

Pego el smbolo

3.

Creo los siguientes fotogramas clave

4.

Borro el contenido de los fotogramas clave que quiero dejar vacos

Haz clic en el archivo para ver un ejemplo de las intermitencias en la animacin.

Fotogramas Por Segundo (FPS)

Los Fotogramas Por Segundo o FPS es una medida de tiempo que, como su nombre lo indica, se
refiere a la cantidad de fotogramas que la animacin tiene por segundo.
Para comprender mejor este concepto puedes comparar las siguientes animaciones:

4 Fotogramas Por Segundo

12 Fotogramas Por Segundo

36 Fotogramas Por Segundo

Ahora puedes crear tus propias animaciones. Comienza desde lo ms simple, con smbolos bsicos
(crculos, cuadrados) haciendo pequeas variaciones (color, tamao). Luego puedes experimentar
con otros elementos. Realiza animaciones con varias capas y varios objetos sincronizados. No
importa si te equivocas, siempre puedes volver a empezar. Y cualquier duda que tengas, puedes
preguntarme a travs de los comentarios. Ya vers que Flash no es tan difcil como parece

Clase 06: Grfica, pxeles y mscaras

Los grficos e imgenes en Flash tienen un tratamiento especial. Por un lado
estn los elementos que importamos de otros programas y por el otro, los
elementos y smbolos que creamos ah mismo, en el entorno de Flash.

17

Taller de Flash
Adobe Flash es un programa vectorial. Esto no significa que no podamos utilizar imgenes de
pxeles, sino que tenemos menos capacidad de edicin de estos elementos.

Compatibilidad del programa con vectores y pxeles

Por ser un programa vectorial, Adobe Flash edita grficos de vectores a la perfeccin. Estos
grficos pueden realizarse in situ o importarse de programas de este tipo como la aplicacin Adobe
Illustrator. Quiero que quede muy claro esto de editar, porque Flash no es un programa para
ilustrar o dibujar, sino un programa de animacin.
Es comn que nos veamos tentados de realizar
dibujos ah mismo, pero no es lo ms conveniente. A
menos que se trate de elementos bsicos, siempre
conviene utilizar aplicaciones especializadas en lo
que queremos hacer. Adobe Flash nos garantiza
importar

grficos

vectoriales

sin

ninguna

dificultad.
Tip: al importar grficos de Adobe Illustrator, ten en cuenta que el mismo no debe tener ningn
componente agrupado. De lo contrario podrs ver partes rotas o vectores faltantes en algunas
versiones de Flash.
Tambin puedes trabajar con imgenes de pxel, pero la edicin es bastante rudimentaria. Se
puede variar el tamao de la foto, la inclinacin y otros detalles de este tipo. La idea es que las
imgenes se importen a la biblioteca. No se deben pegar imgenes directamente. Tener los
elementos en la Biblioteca me permite reutilizarlos las veces que quiera.
Cuando trabajes con una imagen en Flash, esta se ver con un recuadro alrededor.
El recuadro no te va a impedir editarla superficialmente (tamao, inclinacin,
etc.), pero s editar su interior. Es decir, borrar pxeles. Para borrar o editar
pxeles, tendrs que desbloquear la imagen desde la opcin Editar/Preferencias,
o con Ctrl.+B.
Tip: es aconsejable editar todo lo que sea posible de manera numrica. As, tendremos ms
control de lo que hacemos.
Lo extrao de Flash es que los elementos vectoriales tambin tienen su vista de
pxel. Si seleccionamos un objeto de este tipo con la flecha negra, lo veremos en
su versin de pxel y podremos editarlo, incluso borrando sus pxeles (lgicamente
los vectores variarn luego de esta edicin). Si seleccionamos un objeto con la
flecha blanca, veremos las lneas con sus vectores y tendremos la posibilidad de
editarlos normalmente. En la imagen de la derecha podemos ver tres pasos
comunes con grficos creados en Flash:
1.

Creacin de imagen vectorial

2.

Seleccin para visualizacin y edicin de vectores

3.

Seleccin para visualizacin y edicin de pxeles

18

Taller de Flash

Tratamiento de pxeles
Lo ms importante es qu hacer cuando quiero eliminar fragmentos de una imagen. La seleccin
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 imgenes en programas como Adobe
Photoshop y similares. As, la imagen llega a Flash lista para utilizar o editar mnimamente.
Sin embargo, es muy til saber cmo hacer para que se vea slo una parte de una imagen ya que
hay veces que esto nos sirve despus para la animacin. En la imagen se pueden ver tres jarrones
con el fondo de una pared. En un proyecto, por ejemplo, se podr querer una animacin donde se
muestre por un lado un jarrn y por otro el fondo.

Introduccin al uso de mscaras

En

este

caso,

Flash

no

me

permite

seleccionar adecuada y rpidamente esa

parte de la imagen. La nica forma de
hacerlo con exactitud es creando una
mscara. Cmo? Generando la misma forma
del jarrn, 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 mscara.
En la primer imagen se ve la foto original, con el grfico vectorial en la nueva capa.
El resultado ser el jarrn solo. El problema
fundamental es que la graficacin vectorial en
Flash no es para nada buena. De hecho, cuando
uno edita vectores y las lneas se superponen, el
programa genera vectores nuevos en el punto de
encuentro. Es tan difcil y diferente a otros
programas vectoriales, que la mejor opcin es
graficar la mscara con otra aplicacin. Sobre
todo con una finalidad que requiera tanta
precisin.
Como la mscara estar en una capa y la imagen
en otra, podremos ver independientemente una
de la otra. Se puede mover o editar la mscara y lo mismo con la foto.

Mscaras con movimiento

La mscara y el smbolo son objetos independientes que tienen movilidad independiente. Se
puede animar una mscara, el grfico al que contiene o ambas. La mscara no tiene que ser
necesariamente un objeto inanimado.

19

Taller de Flash
En la imagen de la
izquierda podemos ver
una mesa de Flash con
dos elementos en dos
capas diferentes: una
imagen y un smbolo.
La idea es que lo nico
que quede visible de la
imagen sea un espacio
idntico

al

crculo.

Para esto usamos el

crculo como mscara.
Pero adems queremos
que

ese

foco

se

mueva. Paso a paso:

1.

Pega

una
imagen

cualquiera

en

una capa
2.

Crea un crculo
en

una

capa

superior
3.

Convierte

el

smbolo (crculo) en grfico

4.

Posiciona el crculo sobre la imagen y crea una animacin en la que el crculo se mueva
sobre la foto.

5.

Una vez que tengas la animacin hecha, convierte la capa circulo en mscara.

Quedar algo as:

Animacin de mscara
En la animacin podrs ver la mscara animada sobre la imagen. Ahora, en la siguiente animacin
hice al revs: la mscara sigue siendo el crculo, pero esta vez queda quieto y lo que se anima es
la imagen (Debers convertir en grfico todo lo que quieras animar, lo que queda inmvil puede
permanecer como smbolo o imagen).

20

Taller de Flash

Animacin de imagen con mscara esttica

Este tipo de animaciones con mscaras tiene infinitas aplicaciones. Se pueden usar la cantidad de
mscaras que se quiera sobre un mismo objeto. Te propongo como tarea, hacer al menos 5
animaciones con mscaras. Esto te va a ayudar ms tarde con animaciones ms complejas.
La clase siguiente profundizaremos en el tratamiento de vectores, cmo se maneja el programa
en estos casos y cmo lograr mejores resultados. Los vectores son fundamentales para tratar con
Flash, pero las imgenes se nos presentarn 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 prxima!

Clase 07: Dibujo y edicin

Antes de pensar en dibujo y edicin, debes pensar para qu desearas dibujar en Flash. Cul sera
su practicidad? Es til? Si lo que buscas es hacer una animacin del tipo cartoon, la grfica la
traers importada de otro programa. Si lo que quieres es dibujar botones complejos, es
recomendable hacer lo mismo
Realmente no tiene un uso prctico dibujar en Flash. S es til saber crear elementos vectoriales
y editar los que traigas de otras aplicaciones.
Algunos de los programas vectoriales ms comunes para importar grficos en Flash son Illustrator y
Fireworks (ambos del paquete Adobe Creative Suite). Sin embargo, aunque son herramientas
excelentes, siempre es necesario hacer arreglos y ediciones.

Complementos de Flash para ilustrar

Cul es la diferencia entre una y otra? Illustrator es un programa vectorial
y est pensado para (como su nombre lo indica) ilustrar. Se pueden realizar
todo tipo de dibujos e ilustraciones, con gradientes y transparencias,
utilizando tambin efectos y pinceles especiales. Se aplica principalmente al
terreno grfico y no web, aunque es perfecto para crear las bases grficas
de una animacin del tipo cartoon.
Fireworks es una respuesta concreta a una necesidad web: grficos
sencillos, prearmados, rpidos y verstiles. Aunque su terreno no es la
ilustracin, puede sacarte de un apuro. No se utiliza para diseos donde el
dibujo es lo ms importante, sino para elementos web como botones,
barras, incluso banners publicitarios. Tiene muy buenos efectos que hacen
que un crculo se convierte rpidamente en un botn impresionante (Ver
Botones rpidos en Fireworks).

21

Taller de Flash
En fin, los dos programas del Creative Suite son perfectos para las distintas aplicaciones que
puedas darle a grficos en Flash. Elige el que ms se adapte a tus necesidades. En sus funciones de
dibujo o ilustracin, no hay mucha ciencia y podrs aprender a utilizarlos rpidamente. Son un
complemento que no puedes dejar de lado si quieres avanzar rpidamente en Flash.

Importando imgenes vectoriales

Lo primero que debes saber es que puedes encontrar problemas al importar grficos con
elementos agrupados. Para evitar errores en Flash, desagrupa primero el objeto a importar.
Puedes copiar el dibujo y pegarlo en Flash o, lo ms recomendable, utilizar la opcin de Importar
desde Flash. En el caso de que utilices Illustrator, no es necesario guardarlo como EPS,
generalmente funciona de la misma manera al traerlo como AI.
Es muy importante el tratamiento de color. Si tu dibujo
vectorial est en CMYK debers transformarlo a RGB
antes de exportarlo. De lo contrario podrs tener
problemas de color. En la imagen de la derecha se ve la
primer flor tal cual fue pegada en Flash y la segunda en su
color real de Illustrator.
La compatibilidad de versiones tambin es un punto a tener en cuenta. Si la versin de Flash que
usas es ms antigua que la de tu programa grfico, es probable que no reconozca algunas partes de
las ilustraciones. Solucin: guarda tu archivo de dibujo como una versin vieja.

Edicin vectorial
Cuando importas un dibujo con varios elementos vers que todos sus elementos aparecen
agrupados. Para hacer pequeas modificaciones no hace falta desagruparlo. Basta hacer doble clic
sobre el dibujo para obtener una vista con todos elementos del grfico desagrupados. Aqu es
donde hars los cambios de color, forma, etc.
Una cosa a tener en cuenta es que hay varias instancias de desagrupacin de un objeto:
1.

Cuando el objeto est agrupado

2.

Cuando se ven sus elementos agrupados individualmente

3.

Cuando todos los elementos estn desagrupados y unidos

Esto importante porque la ltima
instancia de desagrupacin une
todos los elementos. Aqu, la
nica divisin entre un elemento y
otro es el color. De ah que si
nuestra

ilustracin

tiene

varios

elementos del mismo color que estn superpuestos o yuxtapuestos, estos se uniran por siempre
(Bueno, vale deshacer).

22

Taller de Flash
Puedes ver en la imagen ampliada de los ptalos de la flor
cmo la seleccin se hace por color. Esta imagen
corresponde con la tercera instancia de desagrupacin y
reagrupacin por color. Aqu siguen existiendo lo vectores,
pero estos tambin se corresponden a un color.
Cuando quieras animar partes de este dibujo por separado, necesitars ubicarlas en capas
diferentes. Para esto puedes hacer el clsico copiar, pegar. Flash tiene adems el pegado in
situ. Si copias y al momento de pegar usas Ctrl+Shift+V, el elemento se pegar en el lugar extacto
de donde lo tomaste. Tambin puedes importar el grfico como capas. Elige la opcin que creas
conveniente.
La clase siguiente veremos todas esas cosas obvias que se pueden hacer con los smbolos o grficos
pero que nunca estn de ms mencionar. Y despus botones, para ya arrancar con la animacin
comandada y de ah a nuestro primer sitio web en Flash. Mientras, te propongo trabajar con
grficos exportado e ir investigando de qu se tratan el Illustrator y el Fireworks. Hasta la
prxima y no se olviden consultarme cualquier inquietud que tengan!

Clase 08: Editando smbolos y grficos

El entorno de Flash tiene paneles para editar grficos, incluyendo
herramientas de color y de forma. Ampliando las clases iniciales donde
present la mesa de trabajo voy a hablar ms en profundidad de los paneles
y qu usos concretos le puedes dar.
Editar es fundamental porque en la animacin 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 tcnico es
probable que no hayan recibido las actualizaciones a los ltimos dos talleres. El problema ya se
encuentra solucionado, pero debern volver a suscribirse al feed RSS de TALLERES PRACTICOS a
esta

nueva

direccin

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 bsicos para saber qu editar y cmo 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.

23

Taller de Flash
Forma: Es lo que logramos cuando desagrupamos un elemento tantas veces como sea
posible. As obtenemos una forma que est delimitada bsicamente por el color y aparece
como una imagen de pxel, aunque mantiene los vectores que posibilitan cambiar su forma con
mayor libertad.
Grfico: Si conviertes un grupo o una forma en grfico, podrs editar su forma y color, ya
sea durante una animacin o como smbolo esttico. Estas opciones de color te dejarn
agregar transparencias o variar la tonalidad de los colores con un men avanzado desde la barra
de propiedades, al pie de la pantalla. Adems del avanzado, puedes cambiar el brillo, la
transparencia o la tonalidad de tu grfico de manera individual.
En

la

imagen

pods

ver

los

tres

elementos diferentes. El grupo es el

original,

el

elemento

trado

directamente de Illustrator.
Al

desagruparlo

totalmente

se

convirti en forma. Como la divisin de

la forma se da bsicamente a travs del
color,

seleccion

cada

color

por

separado y lo modifiqu. Slo hice eso.

As me qued el fondo, las ramas y las
sombras como tres formas de esa
forma. La edicin del color la hice con el
panel Mezclador de colores, donde
tambin se puede agregar transparencia.
La imagen inicial tambin la convert en grfico. Esto me permiti hacer cambios de color, e
incluso agregarle transparencia (ntese la diferencia con el fondo blanco y el fondo de color). Pero
la mayor diferencia reside en que la edicin es pareja en todo el grfico. 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 ms radical porque todo lo
que selecciono quedar exactamente del mismo color. Por eso el grfico te permite una edicin
ms fina de color.

La edicin del grfico en la animacin

La edicin de un grfico es clave para lograr una animacin armoniosa y recrear todos los efectos
que queramos. As como editamos el grfico, podemos hacerlo dentro de una animacin de manera
gradual, de modo que en el primer fotograma clave aparezca el grfico original y en el segundo
fotograma clave, el editado. Cuando animemos se ver la transformacin del smbolo. Pueden ser
muchos ms los fotogramas claves, tanto como instancias de transformacin tenga la pelcula.
Adems de la edicin de color, se le puede agregar edicin de forma, aumentando o disminuyendo
las dimensiones, rotando el objeto o simplemente movindolo en el campo. Se puede volver
completamente transparente o volverse blanco con un brillo de 100%, es dicisin del diseador.

24

Taller de Flash

Animacin con grficos editados en forma y color

Botones y efectos rpidos

Cuando aprendes un par de trucos, puedes acelerar mucho tu trabajo. Hay operaciones que con el
tiempo se vuelven casi mecnicas. Los botones son un buen ejemplo. Hay varios rasgos
caractersticos de un botn. Cuando sabes cules son, puedes hacer botones en pocos pasos. Ms
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
estndar para editar a gusto y piacere. Ambos se basan en el
mismo concepto: un elemento trimensional, un botn 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 ms claro y el superior ms oscuro,
mientras que los lados no varan. En el caso del segundo ejemplo, la luz incide desde arriba. El
efecto de gradiente nos ayuda a lograr una superficie de botn ms circular.
Por ltimo, el tercer botn es el propuesto por Flash que, aunque poco sorprendente, cumple muy
bien su funcin. Cualquiera de estos botones se crean fcilmente a partir de un rectngulo,
variando los colores y formas.
En la clase siguiente veremos cmo crear un botn animado, usos y abusos de los botones y la
interaccin de los botones en un sitio web creado en Flash. Mientras, teniendo en cuenta el
ejemplo de la animacin de grficos editados, puedes comenzar a crear pelculas como las del
ejemplo. Te espero la prxima semana Mucha suerte!

Clase 09: Botones

Los botones son fundamentales para la interaccin de cualquier sitio web creado en Flash. Desde
el punto de vista del diseo, un botn debe ser notorio y evidente. Esto es para favorecer la
usabilidad, guiando al usuario que navega en nuestro sitio hacia donde desee ir.
La funcin bsica de un botn es la navegabilidad, llevndonos de una parte a otra de la pgina
(de una escena a otra, de un fotograma a otro). Para esto vamos a necesitar conceptos bsicos de
ActionScript. No temas: es muy fcil.

Usabilidad
Un botn no es ms que un smbolo, al que luego se le da la instancia de Botn. En lo que se
refiere al aspecto grfico de un botn, es bueno tener en cuenta nociones bsicas de usabilidad.

25

Taller de Flash
Un botn no es un link, sino algo ms notorio que quiero destacar para que el usuario se desplace
por mi pgina. Algunos diseadores deciden innovar con el aspecto de los botones, sin tener en
cuenta que los internautas ya tienen una estructura armada de cmo se ven los elementos web y
esta estructura es muy difcil de romper.
Lo que se debe lograr con un botn es contraste, volumen (ya sea saliente o hundido) y
pregnancia. El texto del botn debe ser lo ms breve y claro posible, sin dar lugar a dudas.
El mismo tratamiento de un botn, se le puede dar a un grupo de solapas, aunque generalmente
en este caso no es necesario utilizar volumen.

Diseo y creacin de un botn

Los botones o solapas pasan por tres estados, segn como va interactuando el usuario:
1.

Reposo: Es la vista pasiva del botn, sin ningn tipo de accin por parte del usuario.

2.

Sobre: Es cuando el usuario pasa el mouse sobre el botn. El diseador puede incorporar
algn cambio en esta instancia, por ejemplo que el botn se ilumine cuando se pase el
cursor por arriba.

3.

Presionado: Es el momento en que el usuario hace clic sobre el botn. Puedes hacer que
en ese instante, el botn se desplace, se oscurezca o lo que creas acorde al diseo.
No es necesario
animar

hacer

que el botn vare

en cada una de las
instancias.

De

hecho no es muy
comn ver variaciones en la tercera instancia.
No hay que abusar de los recursos de Flash, pero s saber que esos recursos existen y que puedes
hacer uso de ellos cuando creas conveniente. Muchas veces son los pequeos detalles de un sitio
web los que hacen la diferencia.
Veamos una forma sencilla de generar un botn:
1.

Crea el soporte, la forma.

2.

Agrega algn efecto para separar la forma del resto del diseo,
dando volumen (esto es opcional).

3.

Escribe y ubica el texto del botn. Debe ser corto y claro.

Con estos tres pasos has creado un smbolo que luego pasar a ser un botn
en estado de Reposo. As se ver cuando ingreses al sitio, sin realizar ninguna accin.

26

Taller de Flash

Estructura de un botn
Lo que quieres lograr ahora es que el botn se anime segn el comportamiento de los usuarios.
Queremos llegar a los otros estados (sobre y presionado) y adems queremos que al presionar el
botn realmente suceda algo.
Como nos instruye Adobe, los botones son en realidad clips de pelcula interactivos de cuatro
fotogramas. Cuando se selecciona el comportamiento del botn para un smbolo, Flash crea una
lnea de tiempo con cuatro fotogramas.
Los tres primeros fotogramas muestran los tres posibles
estados del botn; el cuarto fotograma define el rea activa
del botn. La lnea de tiempo no se reproduce realmente; reacciona a los movimientos y las
acciones del puntero saltando al fotograma correspondiente.
Cada estado del botn es independiente del otro. Puedes hacer que en el estado reposo el botn
sea una flor, cuando el cursor est encima se convierta en un corazn y cuando hagas clic pase a
ser una nube.
En la temtica de programacin, las acciones deben asignarse a la instancia del botn del
documento y no a los fotogramas de la lnea de tiempo del botn. No te preocupes esto lo
veremos la siguiente clase.

Animar el botn
Ahora que sabes la estructura, convierte tu smbolo en Botn presionando F8. Cuando hagas
doble clic sobre tu botn, notars un cuadro similar al de la ltima imagen en tu lnea de tiempo.
La nica diferencia es que solamente el fotograma de Reposo estar lleno. Puedes completar el
resto de los fotogramas con F6, generando fotogramas clave.
Cuando tengas todos completos, ve al fotograma Sobre y realiza cambios en el smbolo. Qu
cambios hacer? Agrega luz para iluminar el botn, desplzalo para darle movimiento, incorpora
sombra, cambia el tono del color, etc. Puedes convertir el smbolo en grfico para tener ms
opciones de edicin o convertirlo en pelcula para que, al dar movimiento, este sea ms suave y
controlado.
En general no se utiliza la instancia de Presionado, pero en el caso que quieras que tu botn se vea
diferente cuando alguien haga clic sobre l, puedes repetir el paso anterior.
El cuarto fotograma es el estado Zona activa, que define el rea que responde al clic del mouse.
Esta rea es invisible en el archivo SFW.
El rea es generalmente de igual tamao y forma que el botn. De hecho,
cuando creamos un nuevo fotograma clave en Zona activa, se repite la
figura del smbolo y no tenemos necesidad de crear un recuadro para
delimitar el rea. Pero te voy a dar un caso en el que s es necesario que
el rea sea diferente: supongamos que los botones son pequeos y el
texto est a un lado.
En la imagen, la zona activa del Botn 1 es nicamente el botn. Esto significa que el usuario
deber llevar el cursor directamente encima del crculo para poder hacer clic, algo muy

27

Taller de Flash
preciso sin sentido (dale facilidades a los que visiten tu web). Por otro lado, la zona activar del
Botn 2 abarca el texto. En este ltimo caso, el usuario podr hacer clic tanto en el crculo como
en la palabra para activar el botn. Es mucho ms prctico!

Botones animados
Animar los botones no es ms que seguir la lgica de los clips de pelcula. Veamos: en el estado
reposo voy a tener un smbolo sin movimiento. Lo que quiero es que cada vez que pase el mouse
sobre el botn, ste se mueva. A ver si me sigues:
1.

Agregar un fotograma clave en el estado Sobre.

2.

Selecciona los elementos del botn que van a tener movimiento (puede ser todo) y
convirtelos en Clip de pelcula.

3.

Haz doble clic para ingresar en la pelcula.

4.

Convierte todos los elementos de la pelcula en Grfico para poder generar la animacin.

5.

Crea la animacin. Es exactamente igual que hacer una pelcula, slo que estavez la
pelcula est dentro de un botn.

6.

Antes de cerrar la instancia de pelcula, selecciona el ltimo fotograma ocupado en la

lnea de tiempo. Presiona F9 y haz doble clic en la opcin stop del men izquierdo,
en la carpeta Control de pelcula. La clase siguiente hablaremos de programacin, pero
para empezar Lo que ests haciendo con este comando es decirle a Flash que detenga la
animacin en el ltimo fotograma, de otra manera se repetira indeterminadamente.

7.

Agrega los fotogramas clave en los estados de Presionando y Zona activa.

8.

Listo! Prueba tu animacin (Ctrl+Enter).

Vers que cada vez que pases el cursor sobre el botn, este se mover. Hay infinitas posibilidades.
S creativo porque hay quienes dicen que Internet est todo dicho, pero no es as. Flash nos da
suficientes elementos como para poner en prctica nuestra capacidad de diseadores.
He creado un sitio de ejemplo para que veas una botonera en su hbitat

Una botonera

funcional. A continuacin podrs descargar un listado de archivos SWF con distintas alternativas
con animaciones y cambios de color:

Botones con cambio de color

Botones con iluminaciones

28

Taller de Flash

Botones con movimiento

Botn con cambios en el estado de Presionado

Adems, te ofrezco descargar los archivos originales FLA comprimidos (ZIP) para que puedas ver
cmo estan hechas las botoneras, desde la creacin de los botones hasta el proceso de animacin y
la programacin:

Archivos

originales

FLA

comprimidos

(1,79

MB)

Clase 10: Botones Avanzados

Habamos visto la clase pasada cmo hacer botones bsicos en Flash. Los botones no son ms que
smbolos animados o no, con efectos o no que estn activados para realizar determinada
accin. Cuando el usuario haga clic sobre nuestro botn, algo pasar.
En general los botones son objetos que al pasar el mouse encima, muestra algn cambio. Sin
embargo, no hace falta tener un botn para realizar alguna accin. No es necesario crear la forma
del botn. Veamos

Botones invisibles
Un botn clsico pensara Tengo que ser visible y notorio porque quiero que me hagan clic para
poder ir a prxima seccin del sitio. La persona que ingresa al sitio ve el botn y piensa Ah! Un
botn. Voy a hacer clic para ir a tal seccin.
Funciona muy fcil. Ahora bien, existen los botones invisibles que se usan en casos muy
diferentes al de la conversacin anterior. Pero antes de explicar esto les voy a decir algo sobre los
botones: no siempre son botones. Los botones en Flash son cosas que generan acciones. O sea
que no necesariamente un botn es un crculo con la palabra aceptar.

29

Taller de Flash
Supongamos que en nuestro sitio tenemos que
hacer

un

muestrario

de

productos

(una

especie de galera de imgenes). Vamos a

tomar

de

base

la

web

de

lanas

que

comenzamos a planificar en la clase anterior.

En este caso, tenemos una imagen donde
estn todos los productos en vista pequea
(thumbs) y por otro lado fotos con mayor
detalle de los productos que queremos
mostrar.
Lo que quiero lograr es que al pasar el mouse por encima de cada foto pequea, me muestre al
costado el detalle de ese producto. Pero NO quiero que cada thumb sea un botn. Lo que voy a
hacer es crear botones invisibles
1.

En una capa nueva pego la imagen con los

thumbs.

2.

Genero un cuadrado pequeo sobre el primer

thumb (cuadrado gris).

3.

Convierto el cuadrado en botn y hago doble clic

encima para entrar a la lnea de tiempo del botn.

4.

En la lnea de tiempo, hago clic sobre el primer

fotograma y, manteniendo presionado el botn del
mouse, llevo el fotograma clave al ltimo
fotograma (zona activa), tal como se ve en la
imagen

de

la

derecha.

Vers al salir que el cuadrado es ahora de un

celeste transparente. Eso indica que el botn es
invisible. Lo nico material del botn es la zona activa.
5.

Copio el botn invisible y lo pego sobre el resto de los thumbs, preocupndome que
queden espacios entre los botones y que nunca se superpongan.
Lo que consegu es tener 6 botones invisibles que generan acciones
independientemente de la imagen que tengan debajo.
Ya tenemos la primer parte resuelta. Ahora vamos a generar las vistas en detalle
del producto. Puede servir para una galera de imgenes, un juego interactivo y
otros usos. Lo importante es saber que la imagen del men (la que tiene los
thumbs), los botones invisibles y cada uno de los detalles son elementos
separados. Por eso, no es mala idea incluso trabajarlos en capas separadas.

Vamos a empezar con uno de los detalles:

30

Taller de Flash
1.

Ubico

la

fotografa

ampliada y un texto de
explicacin del producto
en el lugar donde quiero
que luego aparezcan.
2.

Convierto todo en grfico

y luego en pelcula.

3.

Ingreso en la pelcula y
creo dos fotogramas clave
nuevos. Supongamos, uno en el fotograma 5 y otro en el 10.

4.

En el fotograma 1 y el 10 edito el grfico desde el panel de propiedades eligiendo la

opcin Alpha 0%. Ahora en esos fotogramas, el grfico se ve transparente.

5.

Le doy interpolacin de movimiento a toda la lnea de tiempo.

6.

Selecciono el primer fotograma y desde el panel de acciones (F9), hago doble clic en Stop
(Acciones/Control de pelcula o Global Functions/Timeline Control). Lo mismo en el
fotograma 5. Esto es para detener la animacin en el primer fotograma y en el quinto,
que justamente son transparentes, invisibles.

7.

Al salir de la pelcula voy a ver el recuadro invisible. Ahora voy a darle un nombre a la
pelcula. La selecciono y en el cuadro de propiedades escribo un nombre sin dejar
espacios donde dice nombre de instancia o instance name. En este caso, el nombre va
a ser Producto1.

8.

Repito estos pasos con el detalle de los otros productos.

Uso bsico de ActionScript en Flash

Una vez que tenemos todos los botones y todos los detalles convertidos en pelculas y nombrados
vamos a proceder a darle acciones a estos botones. Bsicamente, lo que quiero es que
inicialmente no se vea nada y, al pasar el mouse sobre un thumb, al costado se pueda ver el
detalle del producto, pero al sacar el mouse vuelva a verse la pantalla blanca.
En palabras Flash: quiero
que, pasando el mouse sobre
el thumb 1, se reproduzca la
pelcula

Producto1.

Lo

mismo con el resto de los

thumbs
La

pelcula

la

que

llamamos Producto1 tiene

3 fotogramas clave: el 1,
donde

la

imagen

se

ve

transparente, el 5 donde se ve con claridad y el 10 donde vuelve a verse transparente.

31

Taller de Flash
Ahora yo quiero que al pasar el mouse sobre el thumb 1, se reproduzca la pelcula Producto1
y que se detenga en el fotograma 5. Como el fotograma 1 y el 5 tienen la accin Stop, cada vez
que la pelcula se reproduzca, quedar congelada en esos fotogramas. Entonces, si quiero llegar al
fotograma 5, tengo que comenzar la reproduccin por el fotograma 2 que no est detenido.
Las acciones se agregan al botn invisible que est sobre el thumb 1. Se selecciona el botn y
presionando F9 se accede al panel de acciones donde escribir el cdigo ActionScript o lo
seleccionar del listado. Los cdigos se escriben en ingls. Y para esta primera esta primera parte
se ver as:
on (rollOver) {
tellTarget ("Producto1") {
gotoAndPlay(2);
}
}

Explico:
on (rollOver) = cuando paso el mouse por encima
tellTarget ("Producto1") = le digo a la pelcula Producto1
gotoAndPlay(2) = que se reproduzca a partir del fotograma 2

Como en el fotograma 5 tenemos un Stop. Significa que la pelcula se va a reproducir hasta ese
fotograma, quedando completamente visible el detalle del producto. Ahora vamos a hacer que al
sacar el mouse por fuera del thumb 1, la pelcula se deje de mostrar (llegue al fotograma 10,
donde el grfico es transparente):
on (rollOut) {
tellTarget ("Producto1") {
gotoAndPlay(6);
}
}

Explico:
on (rollOut) = cuando saco el mouse del botn
tellTarget ("Producto1") = le digo a la pelcula Producto1
gotoAndPlay(6) = que se reproduzca a partir del fotograma 6

O sea que al desplazar el mouse por fuera del botn, la pelcula va a reproducirse desde el
fotograma 6 en adelanta, hasta llegar al fotograma 10, donde la pelcula vuelve a ser transparente
o invisible.
Varios botones pueden llamar a la misma pelcula. Se pueden lograr cosas verdaderamente
buenas con estas sencillas acciones. Te recomiendo que practiques con las acciones porque es una
parte muy importante del programa. Muchas cosas que parecen sencillas no se pueden hacer si no
tienes un conocimiento bsico de ActionScript.
Para que puedas trabajar en base a algo concreto, te dejo el SWF del sitios que estamos
construyendo juntos. En la seccin Lanas vers aplicados los conceptos de esta clase.

32

Taller de Flash

Haz clic para abrir el SWF (1.86 MB)

Haz

clic

para

descargar

el

archivo

FLA

original

comprimido

(1.87

MB)

(Para ver este archivo debes contar con la versin 8 de Flash o superior)
chale una mirada a estos archivos para terminar de cerrar la idea y probar acciones Hasta la
Proxima
Clase 11: Movies Externas
La clase pasada terminamos de armar una seccin de nuestro sitio de ejemplo, pero hubo algo que
no me termin de convencer. Utilizando botones invisibles pudimos crear interactividad con el
usuario. Cada vez que el mouse se posaba sobre nuestros botones, algo pasaba pero No es un
atentado a la usabilidad tener que dejar el mouse sobre el botn para que pase algo? Y si el
usuario quiere sacar el mouse del botn y hacer otra cosa? Por qu tiene que desaparecer lo que
est viendo?
Nuestra seccin hasta ahora era aceptable. Hoy vamos a aprender a llamar a movies externas
para lograr un sitio ms dinmico

Por qu utilizar movies externas?

La idea de la clase de hoy tiene mucho que ver con usabilidad: eso que la gente est acostumbrada
a hacer en un sitio web y que ponen en prctica los diseadores para que el uso de la web sea
mucho ms fcil. En fin nuestra primer seccin tena una especie de galera de imgenes, pero
tena un problema. En primer lugar, haba una espacio vaco inicial donde se vea algo nicamente
cuando posbamos el mouse sobre alguno de los botones invisibles Eso es 100% antiusabilidad!
Yo quiero hacer cosas sin ser rehn de un botn!
Por eso, esta clase vamos a ver de qu manera podemos hacer que el contenido de nuestra galera
de productos se active con un simple clic. Lo vamos a hacer en una
nueva seccin (yo voy a usar Hilados), para poder despus hacer
comparaciones.
Para empezar, necesitamos una imagen que nos sirva de botonera para
la galera de productos, aunque pueden ser varias imgenes que

33

Taller de Flash
funcionen como botones separados Es tu eleccin. Yo en este caso voy a optar por utilizar varias
imgenes a modo de botonera.
Repasamos los pasos para la botonera:
1.

Pegar los thumbs (imgenes pequeas)

2.

Convertir cada una en botn (F8)

3.

Hacer doble clic en cada botn para ingresar en su lnea de tiempo

4.

Crear nuevos fotogramas en la lnea de tiempo

Se pueden hacer variaciones en los fotogramas, cambiando la apariencia del botn segn
interacte el usuario. Yo voy a colorear levemente los botones cada vez que alguien pase el mouse
encima, para lo cual debo convertir la imgen en grfico o agregar una capa de color
semitransparente sobre la imagen.
A continuacin necesitamos mostrar en el espacio del costado (igual que la clase anterior) los
detalles de cada uno de los thumbs. Pero esta vez queremos que queden estticos al hacer clic.
La

forma

de

lograr

esto

es

creando
movies
(pelculas)
separadas,
lo

que

vamos

llamar movies externas. Como se ve en el grfico, cada detalle va a estar en un archivo SWF
nuevo.
Cada uno de los archivos nuevos (detallex.swf) debern tener el mismo tamao que el archivo
original del sitio (sitio.swf). Funcionan como transparencias: la movie del detalle se va a
superponer con la movie del sitio.
Para ubicar la imagen del detalle en el lugar correcto, puedes usar directamente el archivo
original del sitio:
1.

Ubica la imagen y el texto donde deberan estar

2.

Copia todos los elementos

3.

Pega

con

Ctrl

Shift

De esta manera lo pegars con precisin exactamente en la ubicacin que tena en el

archivo original
Puedes repetir la operacin para crear el resto de las movies. Recuerda nombrar los archivos con
claridad para que sepas exactamente qu archivo se corresponde con cada botn.

34

Taller de Flash

Creando interactividad con ActionScript

Cuando ya tengas todas las movies externas podrs empezar a crear la interactividad. Esto se hace
con programacin en el cuadro de Acciones (F9).
Es bueno entender
de

qu

estamos

hablando.

Para
empezar

aclaremos qu es
lo que deseamos
que

suceda:

Quiero

que

al

hacer clic en el thumb del producto 1 aparezca el detalle de ese producto a la derecha y que
quede as hasta que el usuario decida hacer otra cosa Ah! Lo mismo con el resto de los
thumbs
Ahora te voy a explicar el cdigo:
on

(release)

haciendo

clic

loadMovieNum("detalle1.swf", 2); = traigo la pelcula detalle1.swf en el nivel 2

Te preguntars qu son los niveles bueno, Flash Player (el reproductor de Flash) utiliza niveles.
Cada documento de Flash tiene una lnea de tiempo principal ubicada en el nivel 0 de Flash
Player. Cuando utilizas la accin loadMovie para cargar otros documentos de Flash (archivos SWF),
el Flash Player los mostrar en otros niveles.
Cuando cargas documentos en niveles superiores al 0, estos se amontonan unos sobre otros, como
acetatos. As, la pelcula que ubicamos en el nivel 2 va a estar debajo de la de nivel 3
Ahora bien. Si primero hago clic en el botn 1 y cargo la pelcula detalle1.swf Qu pasar
cuando haga clic en otro botn para cargar otra pelcula? Se superpondrn las movies! Como eso
no es lo que queremos, estamos obligados a decirle a Flash que descargue el resto de las movies
cuando carguemos una nueva.
Vers que debajo de la accin loadMovie est
unloadMovie

que

significa

exactamente

descargar pelcula. Tenemos que especificar

exactamente

cules

pelculas

queremos

descargar.
En

este

caso,

la

movie

detalle1.swf

corresponde al nivel 2. Tengo un total de 6

movies, o sea: 6 niveles. El nivel 1 lo dejo
vaco por las dudas de que despus quiera agregar algo. As que empiezo desde el nivel 2.
Al hacer clic en el botn 1 se cargar detalle1.swf en el nivel 2 y descargo las movies desde el
nivel 3 al 7. Cuando quiera cargar la movie detalle2.swf (nivel 3) voy a necesitar descargar la
movie del nivel 2 y despus las del nivel 4 al 7 Y as sucesivamente.

35

Taller de Flash
Por fin logr que al hacer clic sobre un botn (thumb de
producto) se cargue una movie individualmente y se descarguen
las dems. Pero cuando voy a otra seccin del sitio Siguen las
movies cargadas! Claro es tengo que agregar el cdigo de
descarga en cada fotograma.
Como se ve en el grfico, un fotograma de cada una de las
secciones del sitio restantes tiene la accin de unloadMovie.
Para insertar una accin en un fotograma, selecciona el
fotograma directamente y agrega el cdigo en el cuadro de Acciones. El cdigo:
unloadMovieNum(2);
unloadMovieNum(3);
unloadMovieNum(4);
unloadMovieNum(5);
unloadMovieNum(6);
unloadMovieNum(7);

Ventajas de las movies externas

En este caso, los detalles de nuestros productos son externos. Hay muchas ventajas con las movies
externas, pero la principal es que si en algn momento la empresa hace algn cambio de
productos, directamente se reemplaza la movie con otra. Si el primer producto (detalle1.swf)
cambia, cambio la movie detalle1.swf y cambio el thumb. No tengo que hacer ninguna
modificacin en el cdigo
Si

sabes

que

probablemente

tu

galera

de

productos vare con

frecuencia,

te

recomiendo que el
listado de thumbs
lo hagas como en la
clase anterior: una o varias imgenes de los productos por un lado y botones invisibles por otro.
De esta forma te aseguras no tocar nada de nada y limitarte a reemplazar el thumb y la movie.
Fcil, no?
Bueno, eso es todo por ahora Te dejo algunos archivos para que puedas ver cmo qued el sitio y
trabajar sobre los originales, reemplazar movies, hacer cambios y editar lo que quieras.

36

Taller de Flash
Haz clic para ver cmo va quedando nuestro sitio! (tengan paciencia que tarda en cargar)

Haz clic para descargar el archivo FLA original del sitio comprimido (1.64 MB)

Haz clic para descargar los archivo FLA originales de los 6 detalles de productos (598 kb)

Clase 12 : Precargas
La clase pasada conlcuimos nuestra galera de productos con movies externas. Ahora puedes hacer
galeras de imgenes y otras presentaciones utilizando y combinando las herramientas de las clases
anteriores. Sin embargo, en el sitio de ejemplo de la clase pasaba las movies tardaban en cargar y
no haba forma de darse cuenta si los productos se estaban cargando o no y cunto faltaba para
que la finalice carga.
Para evitar marear al usuario de nuestro sitio tenemos que agregar preloaders o precargas. Hoy te
voy

ensear

hacer

precargas

fciles.

La idea de una precarga es:

1.

Anunciar que algo se est cargando

2.

Dar una idea de cunto falta para que se termine de cargar

El segundo punto no es absolutamente necesario, pero por una cuestin de respeto a nuestro
usuario es mejor calmar su ansiedad y decirle cunto falta. Es realmente muy difcil hacerlo?
La forma que vamos a utilizar para orientarlo es a travs de un porcentaje numrico o un
elemento que se vaya completando a medida que se efecta la carga. Con el tiempo y ms
experiencia en Flash podrs hacer cosas verdaderamente increbles con las precargas. De
momento
Te acuerdas de la lnea de tiempo? Bueno, la precarga va a estar siempre en el primer frame.
Va a ser lo primero en cargarse y, al finalizar va a mostrar inmediatamente la movie que queremos
ver.

37

Taller de Flash

Armado de la precarga: fase diseo

Abre el archivo FLA del primer detalle de la clase pasada, detalle1.fla (por si no lo tienes, haz clic
aqu para descargar). En la lnea tiempo podrs ver un solo frame con una imagen y texto. Como la
precarga se muestra antes que la imagen (en el primer frame), debemos agregar un frame antes
del que ya tenemos. As nos queda el frame 1 vaco y el frame 2 con la imagen.
En el frame 1 voy a disear mi precarga. En este caso
quiero que se vea, por un lado una lnea que se vaya
completando a medida que se cargue la movie y por
otro lado un porcentaje que llegue a 100 en el
momento tambin en que se termine de cargar esta
pelcula.
Por una cuestin de diseo, recuerda ubicar el diseo
de la precarga en el centro de la imagen que se va a ver al cargar la movie completa.
Que quiero decir con esto? En este caso la imagen que quiero cargar no est en el centro de la
pgina, sino a un costado. Por eso la precarga debe verse sobre ese costado, preferentemente en
el centro, como en la imagen de arriba.
Mi diseo en el frame 1 es muy sencillo y se ve similar a la
imagen de la derecha. Slo un fondo, con un texto que dice
Cargando. T puedes hacer lo que quieras
Ahora vamos a crear una nueva capa a la que llamaremos
Precarga. Debes ubicarla por encima de la capa Detalle
que ya tenamos.

Lnea de carga
En el primer frame de la capa Precarga (slo en el primero) comenzaremos con la lnea que se
completa a medida que se carga la movie:
1.

Crea un rectngulo pequeo, que ser el comienzo de la lnea en un 1%.

2.

Convierte el rectngulo en grfico y luego en movie (F8).

3.

Entra en esa movie, selecciona el grfico y mueve el centro hacia el costado izquierdo
del rectngulo. Esto es para que luego podamos agrandarlo nicamente hacia la derecha.

4.

Crea un nuevo fotograma clave en el frame 100.

5.

Dentro del frame 100 agranda el rectngulo cuando quieras, teniendo en cuenta que as
se ver cuando alcance el 100% de carga.

6.

Sal de la movie (yendo a la escena original) y nombra esta movie como linea_carga.

38

Taller de Flash
No es necesario que completes exactamente estos pasos. Tampoco que hagas una lnea, sino
cualquier animacin contenida en 100 frames. La idea es que el usuario de nuestro sitio no se
aburra mientras se carga la pantalla Creme, con estas herramientas y un poco de imaginacin se
pueden hacer cosas sorprendentes. Sino chale un vistazo a los sitios de ejemplo que te propongo
al final del artculo.

Porcentaje de carga
De nuevo en el primer frame de la capa Precarga vamos a generar el texto de porcentaje que
aumenta de numeracin a medida que se carga la movie, hasta llegar a 100%:
1.

Crea un campo de texto en el lugar donde quieras que se

muestre el porcentaje.

2.

Selecciona el campo de texto y en la barra de propiedades,

convirtelo en Dynamic Text. Esto nos permite que cambie
de acuerdo al cdigo ActionScript que agreguemos despus.

3.

Nombra a este campo de texto como porcentaje_texto.

Para varias la tipografa, el color y el tamao, basta con seleccionar el cuadro y darle las
especificaciones correspondientes.

Cdigo ActionScript para que todo funcione

Es el momento de meternos con el cdigo. Para eso vamos a crear una nueva capa donde
nicamente introduciremos cdigo. Por eso la llamaremos s: Cdigo
La nica forma de que todo funcione es que a travs de ActionScript, con el siguiente cdigo:
function
var

cargando()
total,

cargados,

{
porcentaje;

total=_root.getBytesTotal();
cargados=_root.getBytesLoaded();
porcentaje=Math.floor((cargados*100)/total);
porcentaje_texto.text=porcentaje+"%";
linea_carga.gotoAndStop(porcentaje);
if(cargados==total){
clearInterval(hiloPrecarga);
play();
}
}
var

hiloPrecarga=setInterval(cargando,1);

stop();

Quizs tengas que arreglar el indentado o escribirlo nuevamente a mano, pero es exactamente
esto lo que debes copiar en el frame 1 de la capa Cdigo.
Ahora voy a explicarlo:
function

cargando()

Declaro una nueva funcin: precarga, que va a ejecutarse hasta que se termine de cargar la
movie.

39

Taller de Flash
var

total,

cargados,

porcentaje;

Declaro las variables que voy a manejar: la cantidad total de bytes de la movie, los cargados hasta
el momento y el porcentaje de bytes cargados al momento.
total=_root.getBytesTotal();

A nuestra variable total le asignamos el valor total de bytes que tiene la movie.
cargados=_root.getBytesLoaded();

A la variable cargados le asignamos el valor total de los bytes de la pelcula que fueron cargados
hasta el momento.
porcentaje=Math.floor((cargados*100)/total);

Ahora hacemos una regla de tres simple para asignarle a la variable porcentaje el valor que
debera tener.
porcentaje_texto.text=porcentaje+"%";

Le decimos que el porcentaje me lo muestre en el campo dinmico de texto porcentaje_texto.

linea_carga.gotoAndStop(porcentaje);

Esto es para relacionar la lnea que habamos hecho con el nmero de porcentaje al momento. As
reproduce la movie linea_carga hasta el nmero de frame igual al nmero de porcentaje
cargado.
if(cargados==total){

Si la cantidad de bytes cargados es igual a la cantidad total de bytes de la pelcula

clearInterval(hiloPrecarga);

dejar de ejecutar la funcin Precarga

play();

e iniciar la movie (o sea, ir al frame 2)

var

hiloPrecarga=setInterval(cargando,1);

La funcin setInterval le dice a la funcin cargando que se ejecute cada 1 milisegundo. De esta
manera se muestra informacin actualizada.
stop();

Evita que la movie se inicie.

Otra cosa que debes tener en cuenta es que debes incluir un stop(); en el segundo frame, de lo
contrario se reproducira la funcin constantemente.
Ahora lo nico que falta es pegar el primer frame de cada capa y pegarlos en todas las movies,
para que todas tengan su precarga

Haz clic aqu para ver la movie detalle1.SWF con la precarga

40

Taller de Flash

Haz clic para descargar el archivo original comprimido detalle1.FLA (100 kb)
Te aseguro que con este tutorial se pueden hacer precargas smamente interesantes, slo
necesitas usar la imaginacin. Para que te inspires, te dejo algunos sitios con precargas para
destacar:

1.

4.
1.

ESCRIB

2.

Orange

3.

Microsoft Office : mac 2008

4.

DESUDESU

5.

Food of the Food

6.

Dave

Werners

2.

3.

5.

6.

Portfolio

2006

Bueno, eso es todo amigos Hasta la prxima!

Clase 13 : Optimizando SWF a partir de una estructura

41

Taller de Flash

Empecemos desde el principio Para qu diseamos un sitio o una animacin

de Flash?. La finalidad de nuestra obra es siempre un ansioso internauta,
una persona que navega en Internet con tiempo limitado. Y es ah cuando el
diseador debe resolver el problema de que su sitio sea lento, evitando
tiempos muertos, precargas innecesarias, objetos muy pesados. En esta clase
veremos

cmo

hacer

para

que

tu

SWF

vuele

Antes del diseo en s, tenemos un deber como diseadores: proyectar lo que vamos a hacer de
manera estructural. As como el arquitecto garabatea su primer plano a mano alzada, nosotros
haremos un listado de todos los elementos que irn en nuestro SWF.
As como un sitio tiene secciones, una animacin puede tener escenas. Esa va a ser la forma
estructural de nuestros SWFs. Pensemos en el sitio Hilados & Lanas que hemos estado diseando
All se ve una estructura lineal de 5 secciones bien marcadas:
1.

Quienes somos

2.

Hilados

3.

Lanas

4.

Tejidos

5.

Contacto

Decimos que la estructura es lineal porque ninguna

seccin es ms importante que otra. Todas estn al
mismo nivel. Esa fue mi manera de resolver la estructura
del sitio. Pero otros diseadores podran haber dado con
otras soluciones igualmente vlidas, generando una
estructura bastante diferente.
Aqu tenemos dos ejemplos de estructuras en dos niveles. En el primer ejemplo, el nivel 1 supone
ya una divisin entre lo que sera Materia prima y Confeccin y en el nivel 2 se ven los
productos relacionados, pero en el nivel 1 siguen habiendo items con contenido directo. En el otro
ejemplo, no hay contenido directo en el nivel 1. Para acceder al contenido es necesario llegar al
nivel 2.
En este tercer ejemplo, la divisin es
an ms profunda: a 3 niveles. En
general intentamos que un trabajo
sea accesible para la persona que
interacta,

ponindole

la

menor

cantidad de obstculos posibles. Los

niveles de profundidad pueden ser vistos como un obstculo porque de alguna manera
entorpecen la navegabilidad del sitio. Se utilizan este tipo de menes cuando existen muchas
secciones dentro del sitio. Es el diseador junto con el cliente quienes definen cuntas secciones

42

Taller de Flash
tendr la web. Teniendo en cuenta la importancia de las secciones, tmate el trabajo de
proyeccin o el maquetado como uno de los pasos ms significativos del proceso de creacin de la
pgina.

Archivos externos, archivos livianos

En nuestro sitio Hilados & Lanas tenemos mucha grfica y todos sabemos la regla de cuantas ms
imgenes tengamos, ms pesado ser un archivo. Como no podemos dejar de utilizar imgenes,
slo tenemos una opcin: optimizar la carga de los archivos.
Supongamos que tengo un archivo SWF externo donde he diseado una galera con 10 imgenes.
Entonces tengo:
10 imgenes + 10 thumbs = 20 imgenes
50 kb cada imgen
5 kb cada thumb
50 kb X 10 imgenes = 500 kb
5 kb X 10 thumbs = 50 kb
Total = 550 kb
Tenemos un archivo con un peso mayor a
550 kb. Te das cuenta la importancia de
que la galera sea un archivo externo y se cargue aparte? Tenemos que resolver este problema:
Solucin 1
Creamos una movie externa por cada detalle
(como hicimos en la clase 11). Le agregamos
una precarga a cada movie y listo
Ahora, supongamos que en mi sitio no tengo
slo una galera, sino que tengo 4. Si cada
listado de thumbs pesa 50 kb, todas las
galeras (sin los detalles) pesarn 200 kb, lo
que es bastante para la carga inicial de un sitio.
Solucin 2
Creamos una movie
externa

por

cada

detalle y una movie

externa

por

cada

galera (en este caso,

una
sitio).

seccin

del
Le

incorporamos la precarga a cada movie externa y listo

Lo que logramos es que el archivo que contiene al home del sitio no sea tan pesado. Ms bien
quedar como un archivo estructural y cuando el usuario haga clic para ver alguna de las

43

Taller de Flash
secciones, aparecer (por medio de ActionScript) la movie corriespondiente a esa seccin. De esta
manera me queda una home liviana.

Precargas innecesarias
Ahora bien, por ms que las imgenes estn en archivos separados, a veces son livianas y se cargan
casi instantneamente. Si esto es as hay que evaluar el uso de precargas. Cuando incluimos una
precarga en un SWF, esta va a verse siempre y por ms que tarde slo 3 segundos en mostrarse,
son 3 segundos que con el tiempo molestan Si todas mis imgenes muestran una precarga de 3
segundos, el usuario (crelo, es as) va a pensar dos veces antes de hacer un clic porque no querr
toparse con estos mini obstculos en su camino. Por eso es bueno tambin ser ms selectivos a la
hora de utilizar este recurso y hacerlo slo cuando la carga de un SWF tarde ms de 2 o 3
segundos en abrir, o el tiempo que consideres.
Algo que pocos piensan es en las precargas
de la home. Si la home es pesada y,
lgicamente, tiene una precarga, cada vez
que ingrese al sitio me voy a topar con ella.
Muchos optan por hacer una precarga tan
buena, que no slo no moleste, sino que
adems nos distraiga. Pero no todos tienen
el presupuesto, la inventiva o la opcin de
hacer una precarga genial. Y si la precarga
es aburrida y el sitio tarda mucho en cargarse, la verdad es que ya voy a tener una mala impresin
de la web que est visitando
Por eso: no uses el mismo tipo de precargas para el home o las secciones que para cosas ms
bsicas como la carga de una imagen.
El home en espaol del sitio de American Airlines tarda bastante en cargar y para colmo la
precarga es aburridsima. Chicos: ms inventiva! Por otro lado, la gente de SectionSeven Inc. se
hizo con una idea bastante original. La precarga no es gran cosa, pero cumple su funcin: nos
indica cunto falta para que se termine de cargar el sitio y adems nos distrae.

Peso de las imgenes

Flash es un programa grfico, visual. Aqu las imgenes lo son todo. Hay dos tipos de imgenes que
puedes utilizar: vectoriales o de pxel. Pero Adobe Flash es un programa vectorial, por lo tanto
trabajar con vectores me garantiza mayor calidad y menor peso en mis archivos.

44

Taller de Flash
De todas maneras
es muy probable
que

quieras

trabajar

con

imgenes de pxel.
En el caso que
importes imgenes
a la biblioteca, el
peso

de

imagen
parte

esa

formar
del

peso

final del archivo,

sin importar que
en el escenario de trabajo hayas achicado la imagen. Para eso es til importar las imgenes al
escenario y no a la biblioteca. O importarlas a la biblioteca en el tamao final en el que se vern
Capisce?
Bueno, eso fue todo por hoy. Hasta el prximo jueves! Mucha suerte con sus precargas y a ver si
pueden reducir las cargas lentas de sus proyectos

Clase 14: Menes emergentes

Antes de ver guas de movimiento y a pedido de ustedes, una clase de regalo sobre menes
emergentes. Cuando tu sitio tiene demasiadas secciones, es casi imposible armar un men simple:
debers recurrir a los menes emergentes.
Los menes desplegables se ven bien, organizan mejor la estructura de tu sitio y son cruciales en
temas de usabilidad. En esta clase veremos cmo generar este tipo de menes a partir de algunos
conceptos de diseo, mscaras y un poquito de ActionScript.

Usabilidad en botones desplegables

Steve Krug, en su libro sobre usabilidad Dont make me think habla de la importancia de hacer
las cosas simples. Para l, cuando hay muchas opciones es ms difcil decidirse. Es preferible darle
al usuario pocas opciones. No importa si tiene que hacer 5 veces clic: lo importante es que cada
vez que haga clic tenga la seguridad de que est yendo por buen camino.
En este sentido, si tenemos un men con muchas opciones, es mejor simplificarlo. Las opciones
principales de un men deben verse como la estructura madre sobre la que se organiza el sitio.
Pueden chequear nuestra clase anterior sobre la estructuracin de un sitio.
Cuando tengas organizada la estructura de tu men, ten en cuenta que estars frente a nuevos
problemas de usabilidad. O nunca te sucedi de abrir un men de estos y que se cerrara solo?
Bueno, son cosas para resolver

45

Taller de Flash

Planificando el men
He creado un sitio nuevo especialmente para esta clase. La temtica del sitio es una mueblera.
Mis secciones y subsecciones iniciales eran las siguientes:
1.

Sala de Estar: Sillas, Mesas, Mobiliario, TV/DVD

2.

Comedor: Sillas, Mesas, Mobiliario, Utilitarios

3.

Cocina: Juegos de Mesa, Alacenas, Bajomesadas, Mobiliario

4.

Habitacin: Sommiers, Mesas de Luz, Placards, Mobiliario

5.

Cuarto Nios: Sommiers, Mesas de Luz, Placards, Mobiliario

6.

Escritorio: Sillas, Escritorios, Bibliotecas, Armarios

7.

Deco: Pinturas, Objetos de Arte, Mantas/Cortinas, Estilo Vintage

Son 7 secciones! La pregunta es, Necesito tantas opciones iniciales? No estoy mareando al
usuario? Con un poco de tiempo pude reorganizar el sitio y por fin d con una solucin que me deja
muy conforme:
1.

Estar y Escritorio: Sillas, Mesas, TV/DVD, Escritorios, Bibliotecas, Mobiliario

2.

Cocina y Comedor: Sillas, Mesas, Conjuntos, Alacenas, Bajomesadas, Utilitarios

3.

Habitacin: Sommiers, Mesas de Luz, Placards, Mobiliario, Muebles para Nios

4.

Deco y Accesorios: Pinturas, Objetos de Arte, Mantas/Cortinas, Estilo Vintage

Analiza qu secciones fusion y cmo gener nuevas subsecciones. Es importante que en tu listado
separes cules son los puntos ms importantes de tu empresa. En este caso agrup los muebles
de habitacin para adultos y nios en una sola seccin. Sin embargo, si los muebles para nios son
un producto muy importante de la empresa, debera dejarlos en una seccin aparte

Armado del men

El diseo general del home del sitio lo vamos a generar en una capa a la que vamos a llamar
simplemente Fondo (1). Por otro lado, el men inicial lo vamos a generar en otra capa nueva
llamada Men (2).

46

Taller de Flash

Cuando tengas el diseo general hecho vamos a empezar con los menes individuales. Como
primer pauta, vas a necesitar un men por cada opcin inicial (en este caso 4 menes
individuales). Es conveniente disear cada men ya desplegado. Para estos menes crea una capa
nueva. La vamos a llamar M.Individuales. En secuencia quedar por encima la capa Menes,
luego la M.Individuales y por ltima y debajo la capa Fondo.
Para crear los menes individuales, estos fueron los
pasos que segu:
1.

Crear

la

caja de texto

escribir

cada

subseccin
2.

Generar un cuadrado debajo, teniendo en

cuenta las lneas de diseo del men inicial

3.

Agregar una lnea entre cada palabra

La lnea corta al cuadrado, generando un rectngulo por cada subseccin. En el grfico puedes
ver que el rectngulo Bibliotecas tiene una apariencia ms clara que el resto. Esto es porque fue
seleccionado.
Lo mismo vas a hacer con cada men que quieras generar. De hecho puedes copiar el primero y
editarlo. Cuando tengas todos los menes, viene la parte divertida

Vamos a hacer que cada

palabra del men se transforme en un botn.

1.

Selecciona un rectngulo (el primero en este caso es Sillas)

2.

Convierte el rectngulo en Botn (F8)

3.

Trabaja el botn internamente dndole un color ms claro en la opcin de sobre o

over.

Repite lo mismo con todos los rectngulos de todos los menes Es probable que las lneas
separadores desaparezcan. En realidad lo que sucede es que al crear botones, estos tapan a las
lneas. Lo que debes hacer es seleccionar slo las lneas, agruparlas y traerlas al frente.
Ya tienes tu men individual listo. Ahora tienes que darle animacin
1.

Selecciona todo el men

2.

Convirtelo en Movie Clip

3.

Nombra a la Movie Clip como menu1

47

Taller de Flash
4.

Ingresa en la pelcula y convierte nuevamente todo en Movie Clip

5.

Genera una animacin, creando un nuevo fotograma clave en el frame 4 y otro, por
ejemplo, en el frame 7.

6.

En el fotograma clave 1, mueve el men de manera

que quede arriba de la lnea lmite de la barra de
menes, tal como se ve en la imagen. En el fotograma
clave 4, deja el men como estaba (como si fuera el
men de la derecha del grfico: por debajo de la lnea
lmite). En el fotograma clave 7 repite la operacin del
fotograma clave 1.

7.

Genera interpolacin de movimiento (tween) entre todos los frames.

8.

Al primer fotograma clave (frame 1) y al segundo (frame 4) asgnale la accin stop()

Ya tenemos la animacin del primer men. Puedes repetir los pasos con los menes siguientes,
cambiando siempre el nombre de la Movie Clip como menu2, menu3 y menu4. Yo voy a hacerlo
nicamente con el primer men.
Volviendo a la escena inicial, crea un rectngulo agrupado en la
capa Men de un tamao similar al ttulo de tu primer men,
en este caso: Estar y Escritorio, tal como se ve en la imagen.
No importa el color, porque este rectngulo va a convertirse en
un botn invisible. Te acuerdas cmo hacer botones invisibles?
Haz clic aqu para ver la clase de Botones avanzados.
Cuando ya tengas tu botn invisible vamos a pasar a la siguiente
y ltima etapa: programar.

Comandos
No hay ningn secreto en lo que debes hacer:
Selecciona el botn invisible y en el panel de acciones escribe esto:
on

(rollOver)

tellTarget

("menu1")

{
{

gotoAndPlay(2);
}
}

O sea que cuando poses el mouse sobre el botn invisible, le vas a decir a la movie men1 que se
reproduzca a partir del fotograma 2. Qu logramos con esto? Que cada vez que alguien pase el
mouse por encima de Estar y Escritorio, se despliegue el men correspondiente.
Ahora, quiero que cada vez que saque el mouse de encima del men, este men emergente se
oculte. Para eso:
1.

Ingresa dentro de la movie menu1

2.

Crea una nueva capa por debajo de la existente

3.

Dentro de esa capa, en el fotograma 4 crea un fotograma clave

48

Taller de Flash
4.

Crea un rectngulo que abarque el men y el nombre del men

5.

Convierte el rectngulo en botn invisible

6.

Selecciona el botn y en el panel de acciones copia lo siguiente:

on

(rollOut)

gotoAndPlay(5);
}
}

De esta manera le estamos diciendo que cuando pasemos el mouse por fuera del botn (o sea del
men), el men desplegable se oculte.

Mscara
Ahora prueba y vers que
todo es como lo imaginamos,
excepto que el men jams
se

oculta.

Para

ocultarlo

debemos crear una mscara.

Entre la capa Men y la capa
M.Individuales, debes crear
una capa nueva a la que
llamaremos Mscara. All
generars

un

rectngulo

desde la lnea lmite hacia

abajo, como se ve en la
imagen.
Haz clic con el botn derecho del mouse sobre la capa nueva y selecciona la opcin Mscara
(Mask). Has convertido la capa en una mscara!
Vers que la capa M.Individuales aparece como contenida por la mscara. As debe ser. Lo que
has logrado es que todos los elementos de la capa M. Individuales se muestren nicamente
cuando estn dentro dentro de esta mscara.
Ahora prueba. Vas a ver que s funciona!
Ten en cuenta que cada opcin dentro del men desplegable es un botn. Selecciona cada botn
dentro del fotograma 4 (el que queda esttico) para darle la accin que quieras.
Haz clic para descargar el ZIP del archivo FLA original (15,8 kb)
Para ver el archivo necesitas contar con la versin 8 de Adobe Flash o superior.

Clase 15: Guas de Movimiento

Hasta ahora, en una animacin de un objeto los movimientos eran siempre lineales y los
fotogramas claves correspondan a un cambio en el sentido del movimiento. Con las guas de
movimiento podrs lograr nuevos movimientos.

49

Taller de Flash
Las guas actan como un trazado a travs del cual se mueve nuestro objeto. Puede ser un
trazado recto, ondulado o combinado. Slo resta ubicar el elemento dentro del trazado para
comenzar

la

animacin.

Empezamos?

Sin las guas de movimiento, animar un elemento X de manera ondulada era imposible?. Un
poco Requera al menos un fotograma clave nuevo cada vez que el objeto cambiaba de direccin.
Con las guas puedes generar movimientos curvos de forma muy sencilla:

Como se ve en la imagen, el movimiento se rige en funcin de la gua. Los crculos en este caso
marcan que el centro del objeto estar siempre en contacto con la gua, ser como el punto de
apoyo. Esto es muy importante porque si separamos el punto de apoyo, la animacin tendr
errores.

Pasos para trabajar con guas de movimientos

1.

Convierte tu smbolo en grfico (F+8).

2.

Selecciona la capa de tu grfico (en este caso

la capa Pulpo).

3.

Haz clic derecho y selecciona la opcin

Agregar guas de movimiento (Add motion
guide). Se generar una capa nueva sobre la
capa Pulpo a la que Flash nombrar como Gua
o Guide.

4.

Dentro de esa capa crea la lnea (con la pluma

o pega un vector trado de Ai) a travs de la
cual se mover tu smbolo. Puede ser recta,
curva, larga, corta, etc.

5.

Por ltimo debers mover el objeto de forma

que el centro coincida con el inicio del

50

Taller de Flash
trazado. Te dars cuenta que al mover el smbolo el centro tender a posicionarse sobre
el trazado como si fuera un imn. En la imagen, el centro dela imagen est seleccionado
con un crculo rojo.

Generando la animacin
Ahora slo falta crear la animacin tal como lo haramos en cualquier otro caso La nica
diferencia esta vez es que el smbolo deber estar ubicado de forma que su centro coincida con la
gua.
1.

En la lnea de tiempo, en la capa de tu grfico (Pulpo) agrega un nuevo fotograma clave,

por ejemplo en el fotograma 20.

2.

Ahora, en el fotograma 20 mueve el smbolo justo al final de la gua.

3.

Genera la interpolacin de movimiento.

Ya tienes tu animacin con guas de movimiento! Ahora probar arreglando los tiempos e
incorporando varios movimientos a un mismo objeto dividido en varios smbolos

Haz clic para ver el SWF (31,1 Kb)

Haz clic para descargar el archivo FLA original comprimido (398 MB)

Clase 16: Propiedades de Texto

A diferencia de HTML y otros lenguajes donde las tipografas que se utilizan en el diseo web
dependen directamente de las tipografas que estn instaladas en la PC del usuario, en Flash
puedes utilizar cualquier fuente y esta es quizs una de las principales ventajas para los
diseadores.
Las fuentes Flash trabajan como si fueran un elemento vectorial (de hecho, lo son), por esto es
que son escalables: puedes aumentar o disminuir su tamao con la seguridad que se van a ver con
una calidad excelente. Tambin puedes realizar animaciones con fuentes. Sigue leyendo y conoce
todo sobre el tratamiento de texto en Flash

51

Taller de Flash

Nociones bsicas de tratamiento de fuentes en Flash

En Flash no existe diferencia entre texto en caja y texto suelto, como s sucede en Photoshop e
Illustrator. Aqu siempre que utilizamos texto, Flash crear una caja contenedora. Inicialmente, si
hacemos un clic con la herramienta de texto en el espacio de trabajo y comenzamos a escribir, el
texto continuar linealmente (ejemplo 1). Si en vez de hacer clic, arrastramos el mouse generando
una caja, el texto quedar contenido en los lmites de esta caja (ejemplo 2). Las dimensiones de la
caja se pueden editar, siempre utilizando la herramienta de texto.
En el ejemplo 1, el texto ha sido
seleccionado normalmente (con la flecha
negra). Esto me permite mover la caja
de texto y agrandar o achicar el texto de
la caja.Por otro lado, en el ejemplo 2
estamos trabajando con la herramienta
de texto. Esto habilita la posibilidad de
editar las dimensiones de la caja, sin
cambiar el tamao de la tipografa.
Cada

vez

que

trabajes

con

la

herramienta de texto, en el panel de propiedades aparecern una serie de opciones, entre las
ms comunes estn las de editar el formato del prrafo, estilos, tipografa, tamao y color. Todas
similares a las de un editor de texto comn.

Pero tambin hay opciones propias de Adobe Flash. Veamos todas:

Formato de texto (T): Esto lo veremos a continuacin, pero bsicamente puedes elegir
entre texto esttico (static text), texto dinmico (dynamic tex) y texto de entrada (input text).
Tipografa, tamao, color, estilo y prrafo (A): En la lnea de arriba a la derecha vers
opciones para cambiar la tipografa elegida, el tamao de la fuente, el color, el estilo (negrita,
cursiva) y la alineacin del prrafo (izquierda, centrado, derecha o justificado).
Prrafo (): Haciendo clic sobre el smbolo de prrafo puedes cambiar los valores para la
sangra, el interlineado y los mrgenes del texto.
Direccin del texto: Al lado del smbolo de prrafo vers el smbolo Abcd, para editar la
direccin del texto.
Espaciado (A\V): Agranda o achica el espacio entre caracteres.

52

Taller de Flash
Sub-texto (a): Una opcin para hacer subndices y superndices.
Optimizacin: Al igual que otros programas de Adobe, Flash permite optimizar el texto
con anti-alias especial para una mejor legibilidad, anti-alias para animaciones, bitmap o generar
un anti-alias propio.
Dimensiones de la caja: Debajo a la izquierda aparece la informacin de tamao y
posicin de la caja de texto. Puedes editarlas directamente desde ah.
Enlaces: Bajo el signo del eslabn, podemos linkear un texto a un sitio web. Selecciona el
texto a linkear y pega la URL en el espacio en blanco al lado del eslabn, tal como est en el
grfico.
En Flash hay tres formatos de texto, cada uno con una funcionalidad
diferente. Para cambiar el formato de un texto debes tener
seleccionada la herramienta de texto y elegir entre una de las
opciones del cuadro T. Veamos para que sirve cada una:

Texto Esttico
Es el texto que no requiere interactividad con el usuario. Puede ser el texto de un artculo, la
presentacin de una compaa, un ttulo en una pgina web En fin, es texto que se mira y no se
toca.
En el grfico podemos
ver un sitio de ejemplo.
Aqu se utiliz para la
mayora
formato

del texto el
de

Texto

Esttico (Static Text).

Cuando

tengo

Texto

Esttico, el Panel de
Propiedades me muestra
dos opciones extras:

1.

Hacerlo

seleccionable.
2. Linkearlo a una URL.
El Texto Esttico siempre est dentro de una caja contenedora cuyas dimensiones dependen
directamente de la cantidad de texto que haya. Esto es porque no tiene sentido agrandar una
caja de texto que no contenga texto.
Haz clic aqu para ver el boceto de CuchiSushi con las opciones de texto.

53

Taller de Flash

Texto de Entrada
Este tipo de texto sirve para los casos en los que el usuario pueda ingresar texto al sistema. El
ejemplo ms comn es un formulario de contacto, pero existen otras situaciones en las que
podra ser interesante este tipo de interaccin con la persona que visita tu sitio. En la imagen de
arriba, dentro del formulario de consulta hay dos campos con Texto de Entrada: la consulta en s
misma y el espacio para escribir un e-mail.
En estos casos la caja contenedora de texto puede ser ms grande que el texto que contiene.
Aqu hay dos formas de crear una caja de texto: igual que en el texto esttico o arrastrando con el
cursor para crear una caja. De esta manera, puedes definir los lmites del campo de escritura.
Pero

cuando

trabajas

con

Texto de Entrada (Input Text)

aparecen

nuevas

opciones.

Una de las opciones es especificar la cantidad mxima de caracteres que se puede escribir en
nuestro campo de texto (en este caso 500).
Tambin puedes definir un nombre de variable (Var) para trabajar luego con ActionScript (esto lo
veremos prximamente en nuestra clase de formularios de contacto).
La opcin a la izquierda de Var puede ser seleccionada en el caso que quieras mostrar un
recuadro alrededor del campo de texto. A la izquierda, bajo el smbolo <> podrs renderizar el
texto como HTML.
Pero lo ms interesante est en el men A. Aqu puedes elegir el
formato de tu Texto de Entrada. Tienes 4 opciones: lnea simple,
multilnea, multilnea sin envoltura y contrasea. Los formatos no
especifican la cantidad mxima de caracteres a escribir asi que debes
aclararlo en el campo de Caracteres mximos.

1.

El texto multilnea es un campo de texto donde la caja acta como lmite hacia los
costados. Si el texto supera el ancho de la caja, continuars escribiendo en una lnea
siguiente.

2.

El campo en lnea simple permite escribir texto en una nica lnea. Es muy til en un
formulario con varias opciones cortas como por ejemplo nombre, direccin, telfono.

3.

Texto multilnea sin envoltura. Esta caja de texto no tiene lmites. A medida que vas
escribiendo continas en la misma lnea hasta que das enter para pasar a la lnea inferior.

4.

El formato password permite escribir contraseas y mostrarlas como astersticos.

Haz clic aqu para ver el funcionamiento en lnea.

54

Taller de Flash

Texto Dinmico
El Texto Dinmico (Dynamic Text) permite generar acciones interesantes con ActionScript.
Adems, se pueden enlazar a una URL, cosa que el Texto de Entrada no permite. Por otra parte,
acepta los formatos de lnea simple, multilnea y multilnea sin envoltura, tal como en el ejemplo
anterior.
En el Texto Dinmico tambin se utiliza para incorporar informacin externa dentro de nuestro
archivo SWF.

Haz clic aqu para descargar un ZIP los archivos FLA originales de esta clase (57 Kb)

Clase 17: Formatos de archivos

Cuando trabajamos con Adobe Flash, bsicamente manejamos dos tipos de archivo: los de
extensin .fla y los .swf. Cada uno sirve a una finalidad y conocerlos en profundidad nos permitir
llevar nuestros proyectos a la web o usarlos en presentaciones multimedia, etc.
En la clase de hoy tambin analizaremos las diferentes formas de compilar, comprimir y exportar
nuestros trabajos, tratando de obtener archivos de bajo peso pero con buena calidad. Tambin
hay que tener en cuenta cmo interpretan los navegadores como Firefox o IE los archivos Flash.
Comencemos!

Diferencias y particularidades entre archivo .fla y .swf

Si estamos trabajando con Flash y guardamos nuestro proyecto, ese archivo tendr la extensin
.fla.
Ya vimos que en un proyecto podemos tener capas, imgenes y dibujos cargados en la biblioteca,
guas de movimiento, etc. El archivo .fla conserva todos estos elementos de modo que, cada vez
que lo abrimos, podemos usarlos por separado y segir editando y creando en un mismo proyecto.
Este tipo de archivos son muy pesados, porque es como si juntramos en una bolsa todas las fotos,
texto y elementos sin comprimir, de modo que estn disponibles para usarlos ms tarde.
Cuando queremos llevar nuestro trabajo a la web o a cualquier tipo de soporte, necesitamos
exportarlo a un archivo comprimido de poco tamao que se ejecute rpidamente.
Este tipo de archivos flash comprimidos tienen la extensin .swf.
La principal diferencia es que los swf (ShockWaveFlash) no se pueden editar. Si queremos cambiar
algo tendremos que recurrir al .fla original.
Nota: hay algunas aplicaciones como SWF Decompiler que pueden extraer contenido de archivos
.swf, pero obviamente slo obtienen una parte del fla original, nada ms.

55

Taller de Flash
A la hora de colgar en la web un sitio hecho en flash, hay que incrustar el archivo .swf dentro del
HTML de la pgina. Otra cosa que necesitaremos es el reproductor flash instalado en nuestro
navegador (llamado Flash Player). sta aplicacin se descarga en forma gratuita desde el sitio de
Adobe y, si bien viene incorporado a los navegadores siempre conviene tener la ltima versin.

Calidad de los trabajos vs. peso del archivo

Para exportar o publicar un archivo flash, primero debemos especificar cmo queremos hacerlo.
Para ello vamos a File->Publish Settings (Ctrl+Shift+F12). Aqu tenemos varias opciones.
Dependiendo de lo que elijamos el archivo final ser ms o menos pesado, por lo que hay que
poner mucha atencin a este punto.
Bsicamente tenemos dos pestaas:
Formatos de archivo nos permite elegir qu tipo de archivos se crearn a partir de nuestro fla.
Vemos que hay varias opciones. .swf es el archivo liso y llano, HTML nos lo incorpora a una
pgina, Gif nos da por resultado una imagen animada (sin ningn otro agregado) y as
sucesivamente.

Dependiendo del tipo de trabajo seleccionaremos la opcin adecuada (por ejemplo, si slo
tenemos un video al que le hemos puesto subttulos nos bastar con un .mov, es decir, un archivo
de video QuickTime).

56

Taller de Flash
Flash es la otra pestaa, un poco ms complicada. En el campo versin indicaremos con qu
versin de Flash Player bastar para que se reproduzca nuestro archivo. Obviamente Flash Player
9 permite ms efectos, pero no est en el 100% de los navegadores.

Por otro lado tenemos la versin de ActionScript que usaremos. Igual que en el punto anterior, la
ms moderna trae ms efectos y cositas pero no es aceptada completamente an por todos los
navegadores.
El ltimo punto destacable es la compresin JPEG. Cuanto ms comprimidas estn las imgenes
.jpeg ms liviano ser el archivo final, pero perderemos calidad. Lo ideal es trabajar a un 75 u
80%, dependiendo de la cantidad de mapas de bits que estemos usando.
Una vez que hicimos todo esto, ya podemos ir a Archivo->Publicar (File->Publish o Shift+F12) y se
compilar nuestro archivo. No olvidemos antes de irnos guardar nuestro .fla.

57

Taller de Flash
Clase 18: Banners, botones y otros usos
Aunque es posible crear un sitio completamente con Adobe Flash, su
principal funcin es hacer esas cosas que HTML y CSS no nos permiten. La
ventaja de Flash es que es fcil de usar y su calidad visual es excelente.
Dentro de una pgina web Flash se puede ver en un men, una botonera,
como una presentacin animada del sitio Es muy frecuente para banners,
ya sean publicitarios o no.
Qu ms se te ocurre que puede hacer Adobe Flash por tu sitio? Bueno, los reproductores actuales
de video estn hechos en Flash En esta clase voy a darte ideas y ejemplos de los usos ms
comunes

de

Flash

en

la

web

cmo

implemetarlos.

Dado que Flash nos permite generar animaciones sin necesidad de escribir cdigo, complicarnos la
cabeza con programacin o invertir mucho tiempo, casi cualquier cosa que requiera una mnima
animacin puede hacerse con Flash. Es lo ideal? Lo mejor es no abusar de este recurso, pero en
pequeas dosis se puede enchular un sitio fcilmente. Veamos

Banners
Quizs sea el uso de ms frecuente de Flash, especialmente en portales como peridicos online.
Los banners pueden contener:
1. Publicidad externa de un producto/servicio/sitio web
La publicidad externa de un producto, servicio o sitio web que no son nuestros generalmente es
diseada por otra persona no vinculada a nuestro sitio. Es un swf que puede ser interactivo o no.
Generalmente tiene mucho despliegue de movimiento y estn linkeados a otro sitio web.
Los formatos en pxeles ms comunes de banners son:
728 x 90 (Alternativa pequea: 468 x 60)
700 x 300
336 x 280 (Alternativa pequea: 300 x 250)
160 x 600 (Alternativa pequea: 120 x 600)
250 x 250 (Alternativa pequea: 200 x 200)
Aqu un ejemplo de una publicidad en formato 468 x 60 px promocionando a National Geographic:

2. Publicidad interna de alguna seccin de nuestro sitio

Los banners publicitarios internos los diseamos nosotros y tienen un estilo que concuerda con el
de nuestra web. Se nota que pertenecen al sitio y actan como un link. Se usan para llevar
trfico a una parte de nuestra web que queremos activar. Estn linkeados a otra seccin de
nuestra web.

58

Taller de Flash
En el sitio oficial de la cantante Pink se puede ver de manera muy destacada un banner con
publicidad sobre tours, un DVD que lanz y el ltimo video. El primero es un link a la seccin
Eventos del sitio y los otros dos enlazan a la seccin Videos.

3. Presentacin sobre el contenido del sitio/productos de la empresa

Las presentaciones que se ven en un sitio informan al usuario sobre algn contenido o producto
actual y novedoso. Suelen estar linkeados a contenido relacionado.
En las pginas de las revistas de cine mexicanas Cine Premiere y CINEMANA puedes ver un banner
superior presentando los ltimos estrenos en materia de cine. Los banners estn linkeados a una
pgina con informacin sobre las pelculas que presentan.

Botonera y men
Aunque no es muy usual, algunos diseadores prefieren hacer sus botoneras y menes en Flash,
generando efectos nicos que llamen la atencin. Suele suceder que muchos diseadores
principiantes utilizan Adobe Flash cuando podran lograr los mismos efectos con CSS o JavaScript.
Para ellos Adobe Flash es la respuesta a muchas cosas que querran hacer y que de otra manera no
podra.

Adems de los efectos de fade, esta botonera no dice mucho. Hersheys en cambio tuvo que
ingenirselas para acomodar su larga lista de ricos productos en un mismo men. La pgina oficial
de Hersheys muestra en su parte inferior un men con desplazamiento lateral que resulta una
muy buena solucin (hecha en Flash, claro ;)):

El men de Cartoon Network lo tiene todo. Sino miren:

Introducciones
Las introducciones cayeron en desuso por ser molestas para los usuarios. Dado que en Internet el
tiempo es ms que oro, una animacin de varios segundos es casi un crimen. Personalmente
aconsejo dejar de lado las introducciones. Ahora en algunos sitios web se estn viendo miniintros dentro del home. Son como banners a gran escala que funcionan como introducciones dando
informacin sobre las cosas ms importantes que tiene el sitio Vendran a ser grandes banners de
presentacin, pero no ms que eso.
Las introducciones por otra parte siguen apareciendo con frecuencia en sitios construidos casi por
completo en Flash, pero cada vez ms los diseadores se avivan y utilizan las animaciones en los
preloaders para hacernos ms amena la espera de la carga

59

Taller de Flash

Otros usos
La combinacin de HTML y Flash puede separar conceptualmente dos o ms secciones de un
mismo sitio. En el sitio de HP existe una seccin llamada Print Studio (un asistente de impresin)
vinculada al diseo. En este caso, la seccin est integramente construida en Flash. Esto permite
otro tipo de interaccin con el usuario y da la sensacin de estar en una parte especial de esta
web.
En respuesta a la necesidad de espacios con mayor interactividad con el usuario, los diseadores
incorporan elementos de Adobe Flash a sus sitios. El sitio de Lonely Planet ha incluido en la
portada un mapa interactivo donde el usuario puede escoger el continente al cual desea viajar:
Esto se ve mucho en las webs destinadas a nios, con un formato HTML de marco y secciones de
juegos creadas con Flash.
Espero que esta clase les haya gustado La clase que viene los espero con un captulo dedicado al
uso de Adobe Flash en publicidad.

Clase 19: Flash publicitario

El uso de Adobe Flash en publicidades se ha extendido notablemente Est bien usar Flash en
publicidad web? Cules son las limitaciones? En qu circunstancias no es recomendable?
Empecemos diciendo que existe algo as como usos correctos e incorrectos de Flash en publicidad.
En realidad es una cuestin de sentido comn y ahorro de recursos. Aunque Flash es ms bonito
tiene algunos riesgos.
En este clase hablaremos brevemente sobre las posibilidades y limitaciones del uso de Flash en
publicidad y el manejo de la animacin en funcin de la atencin del usuario. Un captulo til
para quienes recin empiezan con publicidad web.

Alcance
Flash

no

es

100%

masivo, pero casi. Tal

como figura en el sitio
oficial de Adobe, es la
plataforma
ms

software

instalada

del

mundo: est presente

en el 98.8% de las
computadoras

que

utilizan

Internet,

superando

herramientas
QuickTime

otras
como
Player,

Windows Media Player

e incluso Java.

60

Taller de Flash
En definitiva, cuando se trata de definir entre publicidad grfica (GIF, JPG) o interactiva (SWF) el
porcentaje de alcance es casi el mismo.

Qu versin de ActionScript uso?

Ac el punto es qu versin de ActionScript usar. Como se trata de una publicidad y no de algo que
el usuario ELIGE ver, es ilgico pensar que alguien vaya a descargar una aplicacin para ver
nuestro comercial Entonces tenemos que manejarnos con la versin que tiene la mayora. En
este caso, ActionScript 3 est bastante difundida, aunque hay una mnima diferencia que hace del
ActionScript 2 la versin ms usada.

Ventajas y limitaciones
Hablemos primero de las cosas positivas de hacer publicidades en Flash.
Nuestras ventajas:
Animacin fina: hay banners animados que no estn hechos en Flash, sino con GIFs
animados pero la calidad es muy inferior. Flash permite alcanzar una calidad excelente de
animacin, con movimientos sutiles, tal como se ve en la publicidad de emootion.
Igual peso de archivo con mayor calidad visual: cuando la animacin es simple y corta
(pocos objetos en movimiento en menos de una decena de frames) el peso es bajo, logrando una
calidad visual mejor que un archivo de imagen.
Posible interaccin con el usuario: con Adobe Flash se pueden generar publicidades
interactivas con infinitas opciones. Las ms comunes son el completado de formularios in-situ y
animaciones del tipo ldicas. La publicidad de HP es un buen ejemplo de interaccin con los
usuarios.
Ms alternativas de ubicacin dentro de una pgina web: es ms fcil generar objetos
flotantes dentro de un sitio web. Incluye existe la posibilidad de que las animaciones se muestren
pequeas y se agranden cuando el usuario lo disponga.
El poderoso ActionScript y otros lenguajes: tanto en la generacin de formularios como
en acciones ms complejas ActionScript es una ventaja en s misma. Los diseadores que manejan
bien este lenguaje pueden lograr cosas sorprendentes, mayor interaccin entre la publicidad y el
sitio web que est promocionando. Tambin Flash interacta con otros lenguajes, como PHP
ampliando an ms las posibilidades.
Diseo original: la animacin abre el espectro del diseo a otra dimensin. Es como pasar
de 2 a 3D.
Estas son en general las mayores ventajas de trabajar con Flash. Pero hacer publicidades con este
sistema puede tener un lado negativo.
Las limitaciones:
Mayor peso cuando las animaciones superan la decena de frames: si la animacin es
compleja o con varios elementos, el archivo puede resultar bastante pesado.

61

Taller de Flash
Los clsicos pop-ups en Flash se cierran inmediatamente: as como aparecen, el usuario
los cierran al instante sin siquiera leer el mensaje.
Editar el HTML Index: en publicidades con cdigo y ms complejas el webmaster del sitio
donde alojamos nuestra publicidad deber incluir cdigo en el archivo HTML raz de su sitio. Es
algo que algunos se rehusan a hacer.
Mnima incompatibilidad: Existe todava un mnimo nmero de usuarios que no se han
descargado el Adobe Flash Player y no podrn ver nuestro anuncio. En su lugar, vern un aviso de
descarga sobre nuestros archivos SWFs:

Mayor tiempo de diseo: una animacin lleva ms horas de diseo que un simple GIF. Es
una de las razones por las cuales en muchas campaas se opta por usar imgenes exclusivamente.
Usuarios confundidos: todo el mundo sabe que al haciendo clic en una publicidad esttica
iremos directamente al sitio relacionado. Sin embargo, existe todava gente que no sabe que
sucede lo mismo con las publicidades animadas. Adems, por ms que no lo creas, el efecto de
animacin resulta a veces intimidatorio
Ms cosas buenas que malas. Definitivamente un balance positivo.

La atencin del usuario

Hay diseadores que abusan del recurso de Flash generando publicidades con animaciones
excesivas, mucho movimiento y un mensaje que no siempre queda claro. Aqu, algunos tips para
enfocarnos en el usuario a la hora de disear publicidad animada:
El tiempo promedio de un usuario en la pgina inicial de un sitio suele ser menor a 1
minuto.

62

Taller de Flash
Escoge mensajes directos y cortos: no ms de tres lneas.
Cada lnea de texto no debera verse durante menos de 3 segundos, de lo contrario se
vuelve ilegible.
No es aconsejable usar SWF con ms de 3 pantallas distintivas (obviamente exceptuando
los frames transitivos).
Comprobado: las publicidades con botones son ms efectivas porque la gente necesita
algo evidente sobre lo que cliquear. Haz que el botn est visible la mayor parte del tiempo. El
ejemplo de la publicidad de Firefox es claro en esto: el botn es muy visible y no quedan dudas
sobre cmo hacer para ver ms informacin, descargar el producto o ir a la pgina de la empresa

Landing page: donde vas cuando haces clic

No puedo terminar esta clase sin hablar de la landing page. Es la pgina a la que va el usuario
cuando hace clic sobre un banner de publicidad. Lo importante de esto es que haya una
concordancia entre esta pgina y la publicidad: entre la puerta y la casa
Mantn el estilo, los colores, la tipografa. Cuanta ms diferencia haya entre la landing y la
publicidad, mayor va a ser la sensacin del usuario de que se ha equivocado, de que lo han
engaado mayor la frustracin.
Los veo la prxima con ejemplos sobre publicidades en Adobe Flash originales. Saludos

Clase 20: Formatos publicitarios

Con Adobe Flash la publicidad online dej de ser un punto fijo en la pantalla y pas a ser algo
mucho ms dinmico generando mayor interaccin, sorpresa y nuevas funcionalidades. En esta
clase veremos los distintos formatos de publicidades hechas con Adobe Flash y cmo hacerlas.
Banners, expandibles, pop-ups Qu son? Cundo usarlos? Qu es un Peel Away? Cmo inicio el
contador de clics? Sigue la clase de hoy para ver la respuesta a estos y otros interrogantes.
Adems:

tutoriales,

ejemplos

tips.

A diferencia de un banner esttico o un gif animado, las publicidades hechas en Adobe Flash estn
en otro nivel de animacin y le dan al usuario la posibilidad de interactuar. Veamos qu cosas se
pueden agregar en una publicidad de este tipo:
Movimiento: es ms fcil generar animaciones y estas pueden ser muy efectivas para
llamar la atencin de las personas que ingresan en el sitio.
Interaccin general con el usuario: incorpora elementos con los que las personas pueden
interactuar, ya sea modificando el ad, generando movimiento, jugando
Fase de contacto: en comerciales de servicios, universidades o incluso portales puede ser
muy provechoso incluir un formulario de contacto donde la gente pueda dejar sus datos para
solicitar ms informacin.

63

Taller de Flash
Adems, el hecho de que la publicidad se muestre en otro sitio da la impresin de que no existe
ningn compromiso con la empresa. Otra utilidad es el registro de usuarios para el envo de
newsletters o publicidad.

Banner
Un banner es el equivalente a una publicidad grfica en la web.
Las principales caractersticas de un banner son:
1.

Cumplen con un formato estndard esttico.

2.

Estn ubicados en un lugar determinado de un sitio web.

3.

Suelen jugar con la animacin para llamar la atencin de los usuarios.

4.

En el caso de que exista interaccin con los usuarios, esto no modifica o altera el formato
del banner.

En el ejemplo vemos un banner de tamao standard (728 x 90 pxeles) con una animacin movida y
persistente.
Haz clic para descargar el archivo FLA comprimido con el banner original (344 Kb).
Para abrir el archivo es necesario contar con la versin de Flash 8 o superior.

Expandibles
Estos banners tienen dos componentes esenciales: ampliacin e interaccin. La idea es generar un
banner en un formato estndard pero que tenga la posibilidad de ampliarse cuando la persona
pase el mouse por encima de la publicidad.
El principal beneficio de un banner expandible es que permite explotar al mximo el espacio.
Pautar un banner de 300 x 300 pxeles que se expande verticalmente un 100% cuesta menos que
pautar un banner de 300 x 600.
Las caractersticas generales de un banner expandible son:
1.

Cumplen con un formato estndard NO esttico.

2.

Estn ubicados en un lugar determinado de un sitio web.

3.

Se expanden en sentido vertical u horizontal.

4.

La interaccin de los usuarios altera el formato del banner.

5.

Tiene dos instancias visuales.

Para hacer un banner de este tipo es necesario hacer 2 banners. Un SWF con el banner en tamao
original (supongamos 468 x 60 pxeles) y otro SWF con el banner y su ampliacin (supongamos que
llega a 468 x 180 pxeles). Luego, con JavaScript se programa para que al pasar el mouse por el
primer SWF se realice un llamado al segundo SWF.
El ejemplo de la derecha intenta ilustrar lo que sucede en las dos instancias. El fondo negro es el
tamao que tendr el banner en el sitio.

64

Taller de Flash
El banner es ms pequeo. Al posar el mouse encima se abre el segundo banner, que se ampla. Al
sacar el mouse de encima, vuelve a mostrarse el banner inicial.
En el SWF pequeo es necesario:
1.

Incluir un stop() en el ltimo frame de cualquier capa.

2.

Crear una capa con un botn invisible.

3.

Al botn invisible darle el cdigo para abrir el segundo SWF. Ser algo como esto:

4.
5.

on (rollOver) {
getURL("javascript:ampliarPeel();");
}

En el SWF grande deberas:

1.

Hacer una animacin con tres instancias: un punto de inicio, un punto final y de nuevo el
punto inicial.

2.

En un frame del punto central darle la accin stop().

3.

En una capa nueva, en el frame del punto central crear un botn invisible.

4.

Al botn invisible darle el cdigo para abrir el segundo SWF. Ser algo como esto:

on (rollOut) {
getURL("javascript:reducirPeel();");
}
on (release) {
getURL(_root.clickTag, "_blank");
}
Haz clic para descargar el FLA original comprimido del SWF pequeo (74 Kb)
Haz clic para descargar el FLA original comprimido del SWF grande (74 Kb)
Para abrir los archivos es necesario contar con la versin de Flash 8 o superior.
El cdigo que hemos incluido es orientativo.

Pop-up
Los molestos pop-ups que se abren en una ventana diferente del navegador ya estn fuera del
circuito: son molestos, anticuados y se ganaron el odio de todos. Sin embargo los pop-ups se siguen
usando, pero ahora se hacen con Flash y se abren dentro de la web donde estamos navegando.
Un pop-up nos asegura que s o s van a ver nuestra publicidad porque est por encima del
sitio. El problema que conlleva esta sbita importancia es que mucha gente (por no decir la
mayora) cierra el pop-up apenas aparece sin siquiera ver el contenido. Est entonces en los
diseadores mostrar un mensaje atractivo, que se lea a simple vista y que detenga al usuario antes
de que piense en cerrarlo (un milisegundo). Si el diseador logra eso, el pop-up ser mucho ms
efectivo que un banner comn y corriente.
(En este caso, la cruz no tiene funcionalidad)
Las principales caractersticas de un pop-up son:

65

Taller de Flash
1.

Tienen un punto de inicio donde aparecen y un punto de llegada, que es donde se

detienen.

2.

Quedan estticos en un lugar determinado de un sitio web.

3.

No tienen un formato estndard determinado.

4.

El mensaje debe ser directo.

5.

El uso de la animacin es casi exclusivo para el recuadro del pop-up.

6.

Se incluye una X para que el usuario pueda cerrar la publicidad. Comunmente es la nica
interaccin del ad. En la X debers incluir el cdigo correcto para cerrar la ventana.

Peel Away
El Peel Away es un tipo de publicidad experimental an no masiva donde se ve una pequea solapa
en movimiento generalmente en el costado superior derecho de un sitio web. Al desplazar el
mouse por encima, la solapa se despliega como la hoja de un libro. De hecho, la traduccin
literal de Peel Away sera Deshojar.
Las principales caractersticas de un Peel Away son:
1.

Cumplen con un formato NO esttico.

2.

Estn ubicados en un lugar determinado de un sitio web.

3.

Se expanden en sentido vertical, horizontal o diagonal.

4.

La interaccin de los usuarios altera el formato del banner.

5.

Tiene dos instancias visuales.

El Peel Away es similar al banner expandible en muchos sentidos, pero tiene una diferencia
considerable: en su estado inicial es mucho menor y en su estado ampliado suele ser mucho mayor.
O sea, es mucho mayor el porcentaje de ampliacin.
A la derecha hay un ejemplo reducido de cmo funciona el SWF del Peel Away.
Haz clic para descargar el ZIP con el FLA original comprimido del SWF pequeo (285 Kb)
Haz clic para descargar el ZIP con el FLA original comprimido del SWF grande (303 Kb)
Para abrir los archivos es necesario contar con la versin de Flash 8 o superior.
Ten en cuenta que el uso de imgenes a la hora de realizar un Peel Away puede perjudicarnos en
el peso del archivo. Cuando el Peel Away se extiende hasta alcanzar el tamao mximo de la
pantalla el tema del tratamiento de imgenes se vuelve imprescindible.

Cdigo
Para empezar, todas las publicidades hechas en Adobe Flash deben incluir un cdigo que permite
el conteo de los clics que se hacen sobre el aviso. Cmo? Sigue los pasos:
1.

Agrega una capa nueva y llmala Botn

2.

En esa capa crea un rectngulo que ocupe todo el tamao del banner.

3.

Convierte el rectngulo en un botn invisible (Ver clase 10: Botones avanzados).

4.

Pega el siguiente cdigo en el botn:

66

Taller de Flash
5.
6.

on (rollOver) {
getURL("javascript:ampliarPeel();");
}

El cdigo puede variar segn el servicio de planeamiento y marketing que maneje el responsable
de marketing o el SEO de la empresa.
Cuando ms cerca estamos del diseo avanzado, se genera una mayor necesidad de involucrarnos
con el cdigo, trabajando en conjunto con los programadores o desarrolladores. Muchos de estos
avisos tienen un gran componente de JavaScript para que la interaccin y el registro de datos sea
posible.
Por ejemplo, necesitars JavaScript para que el banner expandible y el Peel Away funcionen
correctamente. Sin Java, todo lo que est debajo del banner ampliado quedar sin
funcionalidad Esto significa que si tienes un Peel Away y no usas JavaScript, todos los enlaces del
sitio ubicados debajo de la publicidad abierta quedarn nulos, no se podrn usar. JavaScript
adems agrega funcionalidad a la publicidad, sirviendo de intermediario entre las acciones del
archivo SWF y, por ejemplo, la base de datos de un sitio. Pero eso es tema de los programadores

Clase 21: Formulario de contacto

Y llegamos por fin al Formulario de Contacto una parte esencial en muchas
webs. De hecho todos los sitios deben ofrecer algn tipo de forma de
contacto, ya sea un mail, un formulario o incluso un telfono? No, eso ya
pas de moda.
Se pusieron a pensar en los beneficios que tiene un formulario de contacto?
Para empezar, puedes saber qu mensajes fueron enviados desde tu sitio
web, puedes guiar a los usuarios para que completen los datos que t deseas. El formulario de
contacto es una parte esencial de un sitio Flash. Junto a Adobe te enseo a construir un formulario
de

contacto

sencillo,

profesional

prueba

de

errores.

Antes de empezar a hacer este tutorial me tom el tiempo de leer el tutorial oficial de la pgina
de Adobe. El tutorial es casi inexistente, slo un zip con los archivos y arreglate En base a mis
conocimientos y esos archivos voy a intentar que entiendas realmente cmo se hace un formulario
de contacto.

Armando el formulario (la parte divertida)

Un formulario tiene tres instancias:
Escritura: donde se escribe el mensaje y hacemos clic en Enviar.
Envo: donde el sistema muestra una barra de estado indicando que el mensaje se est
enviando.
Agradecimiento: donde le agradecemos a la persona por enviarnos un mensaje.
Vamos a crear cada una de estas instancias en un frame diferente, dentro de un mismo SWF.
ESCRITURA

67

Taller de Flash
Hagamos el primero (la escritura) incluyendo un campo para el e-mail, uno para el asunto y otro
para el mensaje:
1.

Crea un nuevo archivo con las dimensiones que vaya a tener nuestro formulario.

2.

Nombra el archivo como formulario.fla

3.

En una o varias capas genera el esquema del formulario, con el fondo, colores, bordes,
etc.

4.

En una capa nueva superior a la que llamaremos formulario escribe los ttulos sobre
cada campo: e-mail, asunto, mensaje.

5.

Dentro de esa misma capa crea tres campos de texto de entrada (Input text) para cada
campo.
En el campo de mensaje puedes dar un mximo de caracteres si quieres limitar el largo
del

mensaje.

Adems deberas agregar un scroll bar al lado del campo del mensaje. Adobe Flash trae
scroll bars en sus Componentes.
6.

En esa misma capa agrega el botn Enviar.

7.

Tambin en la capa Formulario crea

una nueva pelcula con un mensaje de
error y un texto que diga algo como
POR FAVOR COMPLETA TODOS LOS
CAMPOS. Proponemos una duracin
aproximada
a)

El

de
primer

15

frames.

frame

djalo

vaco,

con

la

accin

stop().

b) En el segundo frame crea el mensaje de error, justo al lado del botn Enviar.
c) Crea un nuevo fotograma clave en el frame 5, tambin con la accin stop().
d) Crea un nuevo fotograma clave en el frame 15 donde el mensaje se vea invisible.
e) Genera interpolacin de movimiento y listo Ya tenemos el mensaje de error!
8.

El cdigo lo dejamos para el final

68

Taller de Flash

ENVO
En el segundo frame vamos a hacer la
instancia donde se muestra el envo del
mensaje. Slo debers agregar:
1.

Un texto que indique que el mensaje

se est enviando.

2.

Una animacin se mueva para ilustrar

la accin.

AGRADECIMIENTO
Slo mostrars un mensaje que indique que el mensaje ya ha sido enviado.

Cdigo rapidito en Flash

Tenemos todo listo, slo falta agregar el cdigo para que las acciones se disparen y funcione el
envo del mensaje. Primero vamos a ponernos de lleno con el cdigo dentro del archivo FLA.
Primero

dmosle

nombres

nuestros

hurfanos smbolos:
Campo de texto para ingreso de
email: email_box
Campo de texto para asunto:
subject_box

Campo de texto para mensaje: message_box

Botn Enviar: send_btn

69

Taller de Flash
Pelcula con mensaje de error: error_clip
Finalmente, crea una nueva capa (la nombramos acciones). Lo nico que va a tener esta capa
son acciones en el primer fotograma.
En el campo donde se pide el nombre de la Variable, destilda la opcin Expression y escribe:
email_box.onSetFocus

En el campo donde se pide el nombre del Valor (Value), tilda la opcin Expression y escribe:
subject_box.onSetFocus=message_box.onSetFocus=function

Ahora el cdigo:

stop();send_btn.onRelease = function()
my_vars.sender = email_box.text;
my_vars.subject
message_box.text;

{my_vars

subject_box.text;

new

LoadVars();

my_vars.message

if (my_vars.sender != and my_vars.subject != and my_vars.message

!= ) {
my_vars.sendAndLoad(mailer.php, my_vars, POST);
gotoAndStop(2); } else {
error_clip.gotoAndPlay(2); }
my_vars.onLoad = function() { gotoAndStop(3);
};};
email_box.onSetFocus
subject_box.onSetFocus=message_box.onSetFocus=function
(error_clip._currentframe != 1) {

()

=
if

error_clip.gotoAndPlay(6); }
};

Cdigo en PHP (cuesta ms)

Ahora la idea es relacionar es hacer que el archivo SWF realmente enve el formulario. Para eso
vamos a usar PHP
Crean que los iba a hacer sufrir con PHP? A continuacin, todos los archivos para que descargues,
incluyendo el .PHP. Abre el archivo que est comentado as puedes entender qu hace cada parte
del cdigo. Todos los archivo se alojan en el mismo lugar.
Haz

clic

para

descargar

el

ZIP

>>

El ZIP (43 KB) contiene los archivos formulario.fla, formulario.swf, mailer.php

Todos los archivos son adaptaciones de los archivos originales que provee Flash App
Servers.
Antes que te vayas, un adelanto aproximado de cmo quedara tu formulario de contacto.
En los archivos puedes realizar varias modificaciones, para empezar todo lo que tiene que ver con
tamaos, colores, tipografas y textos, agregar una foto de fondo, el logo de tu empresa. Puedes
incluso cambiar el mensaje de error, la pelcula que muestra el progreso del envo, establecer un
nmero mximo de caracteres

70

Taller de Flash
Sin embargo, el nombre de los componentes y smbolos est relacionado con el cdigo y el envo
del formulario por lo que no es recomendable hacer modificaciones ah.
Nos vemos la clase que viene que es LA LTIMA CLASE!

Clase 22: Sitios en Flash

Lo hicimos! Llegamos a la ltima clase del taller inicial de Adobe Flash y los pongo a prueba
Dganme para qu sirve concretamente Flash? Es una pregunta un poco complicada para
responder pero bsicamente su funcin es la de hacer animaciones interactivas y eso incluye:
sitios web (enteros o partes), publicidades, cartoons y juegos. Te conviene concretar tu proyecto
en Flash? Deberas hacer todo el sitio en Flash o slo una parte?
En esta clase intentar despejar el dilema de cundo usar Flash, con algunos ejemplos de sitios y
animaciones que lo han hecho muy bien.

Aciertos y desaciertos de sitios Flash

Adobe Flash tiene limitaciones y ventajas. El desafo del diseador es tener en mente las posibles
limitaciones que tendremos en un futuro con el sitio web, pero tambin anticipar las ventajas y
exprimirlas. Por eso, previendo las limitaciones muchos diseadores prefieren evitar Adobe Flash
para la arquitectura del sitio, el diagrama, la programacin en general, y usarlo nicamente para
el aspecto grfico, lo que podra ser una botonera, banners, videos
Y lo bueno? Mi hermana es ilustradora y me sorprendi ver que muchos de sus colegas han hecho
su portfolio en Flash. Cada vez son ms los artistas que se animan a mostrar sus trabajos usando
Flash. Con Adobe Flash se puede hacer un sitio sencillo y muy vistoso en pocas horas sin grandes
conocimientos de cdigo.
Entre los aciertos y desaciertos del uso de Flash para hacer sitios web completos, destaco:

Aciertos
Mucha rapidez al hacer un sitio bsico (no ms de 5
secciones).
La apariencia de los objetos en la web es la misma
que al momento de disear en Flash.
Animacin de elementos sin necesidad de conocer
cdigo.
Uso de elementos vectoriales como componentes de
un sitio.
Resultados ms artesanales.
No tienes restricciones de encolumnado o ubicacin de elementos en la diagramacin del
sitio.

71

Taller de Flash

Desaciertos
Archivos generalmente pesados = cargas lentas.
Edicin lenta y manual del sitio debiendo ingresar al
archivo FLA.
Poca interaccin con lenguajes de programacin.
Abuso de la animacin.
La URL suele no cambiar mientras se navega el
sitio.
Graves problemas de posicionamiento.

10 convenciones de Flash
XHTML y Flash son formatos que se trabajan diferente y proponen una diagramacin y visualizacin
distinta de los sitios web. As como en XHTML hay convenciones que indican que los links van
subrayados o que al hacer clic sobre un enlace, ste recargar la pgina, en Flash existen otras
convenciones a seguir:
1.

Los enlaces deben distinguirse a primera vista.

2.

Muestra una precarga, indicando que la web est cargando.

3.

Al hacer clic sobre un link, ste se debe abrir en la misma ventana.

4.

En un rbol de navegacin normal, el nombre y/o logo del sitio debe estar en un lugar
destacado y servir como enlace a la pgina inicial.

5.

Cuando el sitio lo requiera incluye breadcrumbs para que el usuario pueda orientarse (ver
imagen Jupiter Wells).

6.

Ubica el control de volumen en un sitio visible, preferentemente en la parte superior.

7.

Seala y destaca las partes donde el usuario puede interactuar con el sitio. Maneja con
diferente esttica, color, diseo las animaciones que son interactivas de las que no lo son.
Puede ser frustrante intentar interactuar con una animacin sin resultados. Evita el uso de
animaciones no interactivas a gran escala.

8.

Aunque no tengas lmites en la diagramacin, escoge un modelo de diagramacin y

apgate a l.

9.

Mantn una coherencia de diseo entre las pginas del sitio: paleta de colores, tipografa,
elementos grficos, animacin, sonido, etc.

10. Adems: las reglas de usabilidad son como los diez mandamientos de los diseadores web
y se aplican a TODOS los sitios web, incluso a los hechos con Adobe Flash.

72

Taller de Flash

Sitios de referencia
A continuacin te dejo un listado con sitios Flash muy valiosos por la forma en que fueron
utilizadas las herramientas y recursos. Para que uses de inspiracin (no copia, jeje):
Good Things Should Never End
Un sitio con una botonera simple y un diseo vertical muy original, pero a la vez til: algo que
llama la atencin y funciona. Tambin es para destacar el uso del color y la animacin mnima de
los detalles. Prestar atencin en el scroll hacia abajo!

Paper Critters
Es para tener de referencia a la hora de crear aplicaciones donde el usuario interviene para crear
cosas nuevas, en este caso monstruos. Tambin es vlido para inspirarnos si nuestro sitio est
dividido en dos secciones independientes. Ver la idea de una presentacin inicial y luego la
pantalla para seleccionar la seccin.

73

Taller de Flash

Red Interactive Agency

Es el ejemplo de un portfolio creado en Adobe Flash donde no hay grandes animaciones ni
colores vibrantes o un tratamiento del espacio muy original. Lo rescatable est en el uso de Flash
para resaltar los detalles. Un sitio que bien podra lograrse con CSS pero que en Flash tiene un giro
de tuerca

schematic
Otro sitio institucional donde Flash reemplaza a un posible y prolijo CSS. Sorprende la
diagramacin y el pasaje de una seccin a otra, adems del fino tratamiento de imgenes.

74

Taller de Flash
HBO Voyeur
Aqu la interactividad pasa nicamente por seleccionar lo que queremos ver (de ah voyeur), lo
rescatable de HBO Voyeur es el tratamiento de la animacin real. No son ms que escenas (creadas
por la mano de un genio) agrupadas prolijamente en una misma pantalla. Para no copiar: carga
pesada y lenta sin avisar cunto falta o sin una animacin que nos entretenga mientras esperamos.

Air Jordan XX2

Entendamos primero que la funcionalidad de este sitio web es la presentacin de un producto
nuevo: las zapatillas Air Jordan XX2, con Michael Jordan como cara de campaa. En este caso lo
que vale es la calidad de imagen, el impacto en la animacin personalizada y los efectos. Lo
mejor: la posibilidad de arrastrar la pantalla y la combinacin de la animacin Flash con videos
online.

Get the Glass!

La Cmara de Empresarios Lecheros de California que juntos crearon la campaa Got the Milk?
para concientizar a la poblacin de la importancia de tomar leche. En funcin de la propuesta se
cre un sitio El sitio que es una mezcla de branding, juegos para nios e informacin nutricional y
de salud. Todo rescatable! Actualmente, el juego Get the Glass! (Toma el vaso) creado en Flash,
es lo ms promocionado.

75

Taller de Flash

Muchos de estos sitios fueron galardonados por FWA.

Adobe te da ms
En el sitio de Adobe hay varias secciones con
recursos, tutoriales, ejemplos y descargas para
inspirarte, mejorar tus conocimientos de Flash y
resolver dudas. Aqu van:
Flash

CS3

Resources

(Recursos

de

Flash

CS3)

Guas para principiantes, componentes, ActionScript bsico y ejemplos.

Flash

Design

Center

(Centro

de

Diseo

Flash)

Tutoriales y recomendaciones para diseados Flash.

Flash

Exchange

(Intercambio

Flash)

El sitio donde los flasheros comparten sus creaciones y trucos.

Flash

Developer

Center (Centro

de

Desarrollo

en

Flash)

Para flasheros avanzados, con recursos, tutoriales y ejemplos de aplicaciones, animaciones y

ActionScript. Adems: programacin orientada a objetos, Adobe AIR, accesibilidad, videos,
tecnologa mvil, etc.

76