1.1. Qu es Flash?

Flash Professional CS5 es una potente herramienta desarrollada por Adobe que
ha superado las mejores expectativas de sus creadores.
Flash fue creado con el objeto de realizar animaciones y diseos vistosos para la
web, y grficos interactivos.
Flash es un estudio de animacin que trabaja sobre "fotogramas" y est destinado a la
produccin y entrega de contenido interactivo para diferentes audiencias de todo el
mundo sin importar la plataforma. Se usa sobre animaciones publicitarias, reproduccin
de vdeos (como YouTube) y otros medios interactivos que se presentan en la mayora de
sitios web del mundo, lo que le ha dado fama a este programa, dndoles el nombre de
"animaciones Flash" a los contenidos creados con ste.
No confundir con el Flash Player, Flash es el entorno de desarrollo y Flash Player es el
reproductor utilizado para visualizar los archivos generados con Flash. En otras palabras,
Adobe Flash crea y edita las animaciones o archivos multimedia y Adobe Flash Player las
reproduce.
Los archivos reproducibles de Adobe Flash, que tienen generalmente la extensin de
archivo SWF, pueden aparecer en una pgina web para ser vistos en un navegador web,
o pueden ser reproducidos independientemente por un reproductor Flash. Los archivos de
Flash aparecen muy a menudo como animaciones en sitios web multimedia. Son tambin
ampliamente utilizados como anuncios en la web.
Desde la web de Adobe te puedes descargar una versin de evaluacin de Flash
Professional CS5 vlida para 30 das.
1.2. Por qu usar Flash CS5?
Las posibilidades de Flash son extraordinarias, con cada nueva versin se han
mejorado y simplificado las herramientas, y cada vez es posible lograr mejores
efectos con menos trabajo.
Durante mucho tiempo, Flash consigui hacer posible lo que ms se echa en falta
en Internet: Dinamismo, y con dinamismo no slo nos referimos a las animaciones,
sino que Flash permite crear aplicaciones interactivas que permiten al usuario ver
la web como algo atractivo, no esttico. Con Flash podremos crear de modo fcil y
rpido desde animaciones simples para lograr algunos efectos visuales, hasta
aplicaciones complejas, como juegos.
Adems sus desarrolladores estn apostando muy fuerte por ActionScript, el
lenguaje de programacin Flash. A cada versin se mejora y ofrece un abanico de
posibilidades cada vez mayor, por lo de que adems dinamismo, Flash nos ofrece
la posibilidad de ser la plataforma para aplicaciones web de un modo real.
1.3. Flash, ventajas y desventajas
El principal uso de Flash se da en el mundo de la web. Desde la creacin de
pequeos botones o banners publicitarios, hasta webs totalmente basadas en esta
tecnologa, Internet est repleta de animaciones Flash.
Como todo, Flash presenta tanto ventajas como inconvenientes:
El tiempo de carga. Mientras que una pgina HTML puede ocuparnos 10-20 KB
como media, una animacin Flash ocupa mucho ms. Evidentemente depende del
contenido que tenga, pero suelen superar los 100 KB con facilidad, y si adems
incorpora sonidos es fcil que la cifra se dispare. Al ocupar ms espacio, el tiempo
que tardan estar visible el contenido Flash es mayor y no todos los visitantes estn
dispuestos a esperar... simplemente, se irn a otra pgina.
Flash requiere de plugins para poder visualizarse, y el hecho de no tenerlos
instalados, o de que un navegador tenga los scripts deshabilitados por seguridad,
impedirn la visualizacin del Flash. Este plugin lo suelen incorporar la mayora de
navegadores, es gratuito y se puede instalar desde get.adobe.com.
Compatibilidad con distintos dispositivos. Cada vez es ms frecuente acceder a la
web con telfonos mviles, SmartPhones y Tablets, y algunos de ellos no soportan
Flash (como los Android anteriores a la versin 2.2).
Flash es una tecnologa propietaria de Adobe, por lo que su futuro depende de lo
que esta compaa quiera hacer con l.
Por supuesto su fuerte uso en la web se debe a que tambin aporta ventajas:
La web se vuelve muy vistosa y atractiva, adems de aadirle ms interactividad.
El aspecto visual es muy importante para la web, ya que al visitante, sobre todo al
principio, "le entra por los ojos".
Con un poco de prctica, el desarrollo con Flash se vuelve rpido.
Flash permite comportamientos que de otra forma no podramos lograr.
Compatibilidad con navegadores. Uno de los principales problemas en el diseo
web es que el resultado no tiene por qu verse igual en todos los navegadores.
Con Flash, nos aseguramos de que lo que hemos creado es exactamente lo que
se ver.
Por tanto, se hace necesario cuando lo que se necesita es que el usuario pueda
interactuar completamente con el contenido.
2. El entorno de Flash CS5
2.1. La interfaz de Flash Pro CS5
Flash CS5 cuenta con un entorno o interfaz de trabajo de lo ms manejable e
intuitiva. Adems, tiene la ventaja de que es casi idntica a la de otros programas
de Adobe (Photoshop, Dreamweaver, Illustrator...). Esto es lo que nos
encontraremos al abrir Flash CS5 por primera vez:


2.2. La barra de Mens

Archivo: Permite crear nuevos archivos, abrirlos, guardarlos... Destaca la potencia
de la utilidad Importar que inserta en la pelcula actual casi todo tipo de archivos
(sonidos, vdeo, imgenes e incluso otras pelculas Flash)
Edicin: Es el clsico men que te permite Cortar, Copiar, Pegar... tanto objetos o
dibujos como fotogramas.
Ver: Adems de los tpicos Zooms, te permite moverte por los fotogramas y por las
escenas. Tambin incluye la posibilidad de crear una cuadrcula y unas guas.
Insertar: Permite insertar objetos en la pelcula, as como nuevos fotogramas,
capas, acciones, escenas...
Modificar: La opcin Transformar permite modificar los grficos existentes en la
pelcula, el resto de opciones permite modificar caractersticas de los elementos
de la animacin Suavizar, Optimizar o de la propia pelcula (Capa, Escena ...).
Texto: Sus contenidos afectan a la edicin de texto. Ms adelante se tratar en
profundidad.
Comandos: Permite administrar los Comandos que hayamos almacenado en
nuestra animacin.
Control: Desde aqu se modifican las propiedades de reproduccin de la pelcula.
Reproducir, Rebobinar, Probar Pelcula....
Depurar: Aqu encontraremos las opciones de depuracin de la pelcula que te
ayudaran a encontrar errores de programacin en ActionScrit, entre ellos se
encuentran Entrar, Pasar, Salir, Continuar...
Ventana: Este men, adems de las opciones clsicas acerca de cmo distribuir
las ventanas.

2.3. La Lnea de tiempo
La Lnea de Tiempo representa una forma de ver los fotogramas de modo
simplificado. Consta de 2 partes.

1) Los Fotogramas (frames) que vienen delimitados por lneas verticales
(formando rectngulos)
2) Los Nmeros de Fotograma que permiten saber qu nmero tiene asignado
cada fotograma, cunto dura o cundo aparecer en la pelcula.
A nivel conceptual, la Lnea de Tiempo representa la sucesin de Fotogramas en
el tiempo. Es decir, la pelcula Flash no ser nada ms que los fotogramas que
aparecen en la Lnea de tiempo uno detrs de otro, en el orden que establece la
misma Lnea de tiempo.
Un fotograma representa el contenido de la pelcula en un instante de tiempo. Por
tanto, una animacin no es ms que una sucesin de fotogramas. Todo esto se
puede controlar desde la Lnea de Tiempo, pero no todos los fotogramas tienen el
mismo comportamiento ni se tratan igual. Veamos qu tipos de fotogramas hay y
cules son sus rasgos.
a) Fotograma Clave (KeyFrame) : Son fotogramas con un contenido especfico, se
crean, por tanto, para insertar en ellos un nuevo contenido que no existente en la
pelcula. Se identifican por tener un punto negro en el centro y cuando est vaco
se le diferencia por una lnea negra vertical.
Por ejemplo, en el ejemplo de la "pelota" que rebotaba en el suelo habra 3
Keyframes. Uno para cada posicin distinta de la pelota.

b) Fotograma Normal (Normal Frame): Estos fotogramas siempre siguen a los
fotogramas clave, no representan contenido nuevo y son de color gris.
El ltimo fotograma de una secuencia de fotogramas normales viene representado
por un cuadrado blanco sobre fondo gris.
En el ejemplo, los fotogramas del 2 - 4 son fotogramas normales, su contenido no
es nuevo, esto es, es el mismo que el del fotograma 1. Como vemos, su misin es
prolongar la duracin de un fotograma clave o keyframe.

c) Fotograma Contenedor: No son fotogramas propiamente dichos, sino que
representan un lugar dentro de la Lnea de Tiempo en la que se puede insertar
uno. Por defecto ocupan toda la pelcula y Flash no los tendr en cuenta al
publicar la pelcula. En la imagen anterior, son fotogramas contenedores todos los
fotogramas a partir del 11 (incluido). 1 de cada 5 fotogramas contenedor es gris, el
resto, blancos.
d) Fotograma Vaco: Son fotogramas sin contenido, Su color es blanco.
En la imagen, los fotogramas del 6 al 10 (incluidos) son fotogramas vacos. No
debemos confundirlos con los fotogramas contenedor, pues estos ltimos vienen
delimitados por lneas verticales grises (no negras). Si se inserta algo en estos
fotogramas, pasan a ser Keyframes.
Es importante resaltar que Flash no ignora estos fotogramas y simplemente
mostrar una imagen en blanco (nos dar por terminada la animacin). De modo
que si queremos que un objeto aparezca en el fotograma 1 y despus otra vez en
el fotograma 10. Los fotogramas del 2 al 9 debern ser fotogramas vacos ya que
as el objeto "desaparecer" y volver a aparecer.

e) Fotograma Etiquetado (Label Frame): Contiene en la parte superior una
"bandera" roja que indica que tienen un nombre asociado. Dicho nombre se
establece desde el Panel Propiedades. Si la duracin del frame es la suficiente, se
puede leer el nombre (o etiqueta) que identifica al conjunto de fotogramas.


f) Fotograma con Acciones asociadas: Contienen en la parte superior una "a" que
indica que tienen una accin asociada. Estos fotogramas son especialmente
importantes, pues estas acciones, en principio "ocultas" (para verlas hay que
acceder al Panel Acciones) pueden cambiar el comportamiento de la pelcula. En
la imagen, la accin existente en el fotograma 1 afecta tambin al 2 y al 3 (por ser
fotogramas normales). El fotograma 4 no tiene acciones y s las tiene el 5.

g) Fotogramas Animados: Pueden ser de 2 tipos:
g.1) Fotogramas de Animacin de Movimiento: Vienen caracterizados por el color
morado y representa el movimiento (con o sin efectos) de un objeto, que pasa de
la posicin del Keyframe inicial al final. Para representar esta animacin aparece
una flecha entre estos Keyframes.
Esta imagen representa el ejemplo de la pelota. Del frame 1 se pasa al 6, (Flash
representar el movimiento entre ambas posiciones en la pelcula final) y del 6 al
11. Otro movimiento.


g.2) Fotogramas de animacin de Forma: Vienen caracterizados por el color verde
y representan un cambio en la forma de un objeto, que pasa de la forma que tena
en el Keyframe inicial a la del final. Para representar esta animacin aparece una
flecha entre estos Keyframes.
Este ejemplo, similar al de arriba representa el cambio de forma de la pelota. En el
frame 1 tendra la forma original, en el frame 5, forma de cuadrado (por ejemplo) y
en el 11, otra forma distinta.

.2.4. Las capas
Una Capa se puede definir como una pelcula independiente de un nico nivel. Es
decir, una capa contiene su propia Lnea de Tiempo (con infinitos fotogramas).
.





2.5. El Escenario
Sobre el escenario dibujaremos y colocaremos los diferentes elementos de la
pelcula que estemos realizando.
Dimensiones: Determinan el tamao de la pelcula. El tamao mnimo es de 1 x 1
px (pxeles) y el mximo de 2880 x 2880 px.
Unidades de Regla: Unidad que se emplear para medir las cantidades.
Coincidir: Provocan que el tamao de la pelcula coincida con el botn
seleccionado (tamao por defecto de la Impresora, Contenidos existentes o los
elegidos como Predeterminados)

Color de Fondo: El color aqu seleccionado ser el color de fondo de toda la
pelcula.
Veloc. Fotogramas: O nmero de fotogramas por segundo que aparecern en la
pelcula. Para cambiar este nmero, arrastra con el cursor hacia la derecha o
izquierda.
Transformar en predeterminado: Este botn permite almacenar las propiedades
del documento actual y aplicarlas a todos los documentos nuevos que se creen
desde ese instante en adelante. Estas propiedades por supuesto podrn ser
alteradas desde este panel cuando se desee.


Ejercicio paso a paso.
1. Haz clic con el botn derecho sobre el fondo de la pelcula.
2. Selecciona Propiedades del Documento.
3. En Unidades de Reglas selecciona Centmetros.
4. A continuacin selecciona Dimensiones y escribe en las casillas Anchura
22,46 y en Altura 16,84.
5. Pulsa en Aceptar y observa cmo cambia el tamao. Estas medidas
equivalen aproximadamente a las estndar 640 x 480 px.


2.6. Las Vistas o Zooms
La Herramienta Zoom se emplea para acercar o alejar la vista de un objeto,
permitiendo abarcar ms o menos zona del Entorno de Trabajo. Cada vez que
hagamos clic en con el Zoom duplicaremos el porcentaje indicado en el
desplegable Zooms.

Panel Zooms: Son un conjunto de accesos directos a Submens existentes en el
Men Ver. Son muy tiles y ayudan a acelerar el trabajo cuando se emplean
correctamente.
A) Mostrar Fotograma: Muestra el contenido del Fotograma actual en su totalidad.
Es decir, amplia el tamao del fotograma hasta ocupar toda el rea de Trabajo. Si
hay objetos fuera del rea de Trabajo, no se vern.
B) Mostrar Todo: Muestra en el rea de Trabajo todos los objetos que haya en la
pelcula, adaptando el tamao del fotograma al espacio necesario para que
quepan. Si todos los objetos estn en la parte izquierda de un fotograma, la parte
derecha no se ver.
Como podemos ver, ambas selecciones son tiles, pero tienen sus desventajas.
Para darnos libertad total, Flash nos permite elegir el tamao del Escenario.
C) 25%, 50%...: Muestra el fotograma con el tamao que indiquemos en %
teniendo en cuenta que el 100% es el tamao de referencia. Es decir, el 100% es
el tamao original de la pelcula (ocupa lo que se ver al publicar la pelcula), todo
lo dems depende de cunto sea el 100 %. Es decir, si el 100% son 640 x 480 px.
El 50% ser justo la mitad de esta cantidad y el 200% ser el doble de 640 x 480
px.

3. LOS SIMBOLOS
3.1. Qu son los smbolos
Los Smbolos provienen de objetos que hemos creado utilizando las herramientas
que nos proporciona Flash CS5.
Estos objetos al ser transformados en smbolos, son incluidos en una biblioteca en
el momento en que son creados, lo que permite que sean utilizados en varias
ocasiones (instancias), ya sea en la misma o en otra pelcula. Los smbolos nos
resultarn fundamentales a la hora de crear nuestras animaciones.
3.2. Cmo crear un smbolo
La accin de crear un nuevo smbolo es una de las ms usadas en Flash ya que
es uno de los primeros pasos para crear una animacin, como veremos ms
adelante.
El procedimiento es el siguiente:
1. Seleccionamos el o los objetos que queramos convertir en un smbolo. Lo ms
habitual es partir de una forma.
2. Abrimos a la ventana Convertir en smbolo, accediendo al men Insertar Nuevo
Smbolo, desde el men contextual eligiendo Convertir en smbolo, o directamente
con las teclas Ctrl + F8 o F8.
3. Una vez hecho esto nos aparecer una ventana como la mostrada en la imagen.
Introducimos el nombre del smbolo que vamos a crear, y que nos permitir
identificarlo en la biblioteca, lo que se har imprescindible cuando tengamos
muchos smbolos.

4. Slo nos queda seleccionar el tipo de smbolo (desplegable Tipo) al que queremos
convertir nuestro objeto. Podemos elegir entre Clip de Pelcula, Botn y Grfico.
Sus caractersticas y las diferencias entre ellos las veremos en temas posteriores.
Lo ms habitual es Clips de pelcula para los objetos que queremos mostrar en el
escenario, y Botn si queremos que acte como tal.
5. Bastar con pulsar Aceptar para tener nuestro smbolo creado.
3.4. Diferencia entre smbolo e instancia
Como hemos comentado anteriormente, cuando creamos un smbolo, Flash lo
almacena en una biblioteca. Pues bien, cada vez que utilicemos ese objeto en una
pelcula, ste se convierte en una instancia del smbolo.
Por tanto, podemos crear muchas instancias de un smbolo, pero a una instancia
solo le corresponder un smbolo.
Aunque parece que sean lo mismo, la importancia de esta distincin es que
cuando utilicemos un smbolo que hayamos creado previamente en una pelcula y
lo modifiquemos, solo alteraremos sa instancia, mientras que el objeto seguir
intacto, tal y como era en el momento de su creacin, de manera que podremos
volverlo a utilizar en otro momento. En cambio, si modificamos el smbolo de la
biblioteca, alteraremos todas sus instancias.



3.5. Panel propiedades de instancia
Para acceder al panel de propiedades de instancia, debemos seleccionar en
primer lugar la instancia que queramos modificar y posteriormente abrir el panel
Propiedades.
Si seleccionamos un objeto Flash que no se trate de un smbolo, el Panel
Propiedades mostrar las propiedades del objeto en cuestin, pero no las
caractersticas propias de los smbolos (cambios de color, intercambios etc...)
En el momento que seleccionemos un smbolo aparecern una serie de
propiedades y opciones que comentamos a continuacin:

Nombre y su icono correspondiente: El nombre de la instancia es muy importante,
pues permite identificarla durante la pelcula. El nombre, se introduce en el
recuadro donde pone por defecto <Nombre de instancia>, y debe de ser nico. El
icono asociado nos permite saber qu tipo de smbolo es de un vistazo rpido.
Tipo de la instancia. Por defecto se nos muestra el tipo al que perteneca el
smbolo original pero nosotros podemos cambiarlo para que cambie su
comportamiento.
Smbolo de la Instancia seleccionada (Instancia de:). Esta opcin nos muestra el
smbolo raz del que proviene la instancia que estamos modificando.
Intercambiar: Esta opcin merece especial atencin, pues es muy til y nos
ahorrar mucho trabajo cuando sea necesaria emplearla. Su funcin consiste en
cambiar el smbolo de la instancia por cualquier otro que tengamos en nuestra
Biblioteca, por lo que la instancia tomar el aspecto del nuevo smbolo. En la
imagen se puede observar el panel Intercambiar Smbolo.

8.7. Efectos sobre instancias

Para acceder a los efectos aplicables sobre una instancia determinada, debemos
acudir nuevamente al Panel Propiedades, desde aqu podremos acceder a todos
los efectos que Flash nos proporciona. En el grfico de la derecha se puede
observar la pestaa Estilo: del Panel Propiedades.
Hay varios tipos de efectos. Si el smbolo se acaba de crear o si no tiene efecto
asignado aparecer en la pestaa Ninguno.
En el siguiente apartado comentamos los distintos efectos aplicables a una
instancia.
A continuacin mostraremos los tipos de efectos. Para ello partiremos de la
siguiente imagen original:

a) Brillo. Se puede modificar su valor desde -100% al 100%, esto es,
completamente oscuro (negro) y completamente brillante (blanco). Puedes mover
la barra deslizante o introducir su valor directamente en la casilla.

Efecto Brillo del 50 %
b) Tinta. Esta opcin permite cambiar el color de la instancia, pero puesto que,
como dijimos, no podemos modificar la instancia internamente, al variar el color en
la pestaa Tinta o bien mediante los valores RGB (cantidad de rojo, verde y azul),
se cambiar el color de toda la instancia como si la estuviramos tiendo o
poniendo una capa imaginaria de un color determinado. El grosor o intensidad de
esta "capa" la podemos modificar en porcentaje mediante la primera pestaa que
aparece a la derecha.

Efecto Tinta del 50 % con el color verde (0 255 0)
c) Alfa. Representa el grado de visibilidad o transparencia que se tendr de la
instancia en cuestin. Tambin se puede modificar mediante valor directo o con la
barra deslizante y es muy til para animaciones de aparicin y desaparicin de
objetos. Si aplicamos un efecto alpha sobre una instancia que est encima de otro
objeto, el objeto que antes estaba tapado se podr ver a travs de la instancia.

Efecto Alfa del 65 % sobre el pez naranja
d) Avanzado. Aqu podemos aplicar todos los efectos anteriores al mismo tiempo
de manera ms precisa, con la ventaja de que podemos ponerle un poco de cada
uno, dando lugar a efectos de gran vistosidad.


Sobre el pez superior. Hemos aplicado un efecto Alfa del 65 % y hemos reducido
al 45 % la cantidad de verde a la vez que hemos multiplicado la cantidad de
azulpor 111, obteniendo el tinte rosa translcido que se observa.
A medida que modifiquemos los efectos sobre las instancias, podremos ir viendo
el resultado sobre el propio escenario.
Es importante recalcar, que en los efectos anteriores estamos modificando
instancias de un smbolo, pero que el smbolo original sigue intacto.



Objetivo
Comprender la diferencia entre un smbolo y una instancia de este smbolo.
Ejercicio paso a paso.
1. Vamos al men Ventana Bibliotecas Comunes.
2. Seleccionamos la primera opcin del submen que aparecer (Botones).
Aparecer la librera de botones predefinidos de Flash CS5.
3. Hacemos doble clic sobre la carpeta Classic buttons y luego sobre la primera
carpeta que aparece en la lista (Arcade buttons).
Se abrir una lista con todos los smbolos contenidos en la carpeta.

4. Arrastramos el primer smbolo (arcade button - blue) a nuestra rea de trabajo.
Aparecer en el escenario el smbolo que habamos arrastrado. Esto es una
instancia del smbolo llamado arcade button - blue. Comprobmoslo.
5. Seleccionamos nuestra nueva instancia.
6. Seleccionamos la herramienta Transformacin Libre y modificamos el tamao
de la instancia arrastrando los extremos del objeto.
7. Bien, ahora hemos modificado la instancia. Comprobemos que el smbolo sigue
intacto. Accedemos a la biblioteca de nuestro documento (Ctrl + L), ya que ahora
tambin aparece aqu el smbolo
8. Arrastramos el smbolo al escenario, creando as una segunda instancia.
Como vemos, el botn ha aparecido de nuevo, pero no con el tamao que le
acabamos de dar, sino con su tamao original. Esto sucede porque lo que hemos
reducido de tamao era tan slo una instancia del smbolo, no el smbolo mismo, y
esto es lo que se ha modificado.