Unidad 1.

Introduccin a Flash
Professional CS5 (I)
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.
Los motivos que han convertido a Flash en el programa elegido por la mayora de los
diseadores web profesionales y aficionados son varios. Veamos pues, porque es
interesante Flash Pro CS5.
Desde la web de Adobe te puedes descargar una versin de evaluacin de Flash
Professional CS5 vlida para 30 das. Esta versin estar disponible hasta que salga la
siguiente.
Los logotipos de Flash son propiedad de Adobe, as como las marcas registradas Flash y
Adobe. aulaClic no tiene ninguna relacin con Adobe.

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.
Aunque su uso ms frecuente es el de crear animaciones (a lo largo de este curso
veremos lo sencillo que puede resultar) sus usos son muchos ms. Son tantos, que todos
los diseadores web deberan saber utilizar Flash.
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 eplicaciones
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 que adems de dinamismo, Flash nos ofrece la posibilidad de ser la
plataforma para aplicaciones web de un modo real.
Flash es fcil de aprender, tiene un entorno amigable que nos invita a sentarnos y pasar
horas y horas creando lo que nos dicte nuestra imaginacin, pero esto no es suficiente
para ser el preferido por los diseadores profesionales... Entonces qu es?

1.3. Novedades de Flash CS5

Adobe suele integrar todos sus productos en una suite nica en la que prima, sobre todo,
la compatibilidad entre ellos. As la compaa se desmarca del resto ofreciendo un
paquete de aplicaciones muy completas como hemos ido viendo ao tras ao, que son
capaces de interactuar entre ellas y nos ofrecen la posibilidad de reutilizar proyectos
creados con un programa en otro. De hecho, podemos usar herramientas ms potentes
de dibujo, como Illustrator, para crear nuestros grficos, y despus animarlos con Flash.
Vamos a ver las opciones ms destacadas que encontramos en esta ltima versin:
Motor de texto Text Layout Framework.

Flash CS5 ha cambiado profundamente el motor de texto que emplea. En nuevo motor
TLF, incluye bastantes mejoras, entre las que podemos destacar las siguientes:

Nuevos estilos de carcter y prrafo.

Se pueden aplicar efectos y atributos sobre el texto sin convertirlo a

un clip de pelcula.

El texto pude fluir entre varios contenedores asociados.

El panel Fragmentos de cdigo.

Este panel nos permite insertar rpidamente el cdigo ActionScript 3 de las acciones
ms comunes.
Adems, podemos emplearlo para almacenar nuestro propio cdigo, y as poder
reutilizarlo cmodamente.

Empaquetado de aplicaciones para iPhone.

Flash CS5 nos permite convertir nuestras aplicaciones i juegos creados con el programa,
en aplicaciones compatibles con iPhone.

Mejoras del vdeo.

Los puntos de referencia nos permiten navegar por el vdeo o reaccionar a eventos.
Ahora, podemos aadirlos directamente desde el inspector de Propiedades o mediante
ActionScript, sin necesidad de recodificar el vdeo.

Adems, se ha mejorado el componente reproductor de vdeo, que nos permite verlo en

tiempo real, y nos ofrece una mayor coleccin de estilos.

Mejora de la herramienta huesos.

Se han aadido propiedades de "muelle" a la herramienta de cinemtica inversa (IK).
Con esto, se consiguen resultados mucho ms giles y realistas.

1.4. 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 los100 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.

Los buscadores. Son capaces de indexar el contenido de nuestra

pgina, el texto, pero no el contenido del Flash, ya que no lo pueden
leer, lo que afectar negativamente al posicionamiento de la pgina.
Y hoy en da es crucial para una web encontrarse bien posicionada.
No obstante, los buscadores trabajan para solucionar este problema,

pero de momento al mejor forma de solucionarlo es crear un diseo

paralelo sin Flash, lo que aumenta el trabajo.

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 aqu de forma muy intuitiva, pero
siempre habr usuarios que prefieran salir de nuestra pgina si tienen
que instalar "algo raro".

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.

Otro aspecto a tener en cuenta es la usabilidad de las pginas Flash,

a veces se cae en la tentacin de dar demasiada importancia al
diseo y olvidarse de que la pgina debe ser fcil de usar, aunque es
ms un error de diseo que del propio Flash.

Tendencia a su desuso en la web. Con la llegada de HTML5, se

solventan muchas de las carencias de las pginas tradicionales que
nos obligaban a usar Flash. Por lo que su uso deja de tener tanto
sentido. De hecho, Flash CS5 incluye una herramienta para exportar
contenidos Flash a HTML5.

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.

Resumiendo, insertar o no contenido Flash en una pgina web puede ser cuestionable,
aunque depende de muchas cosas. An as, no hemos de olvidar que Flash tiene
muchsimas aplicaciones ms (hecho que ha provocado que otras compaas traten de
sacar a la venta "clnicos" del Flash). Por ejemplo, se puede usar Flash para la creacin
de DVDs interactivos (como los que incluyen las revistas de informtica, entre otras), la
creacin de banners publicitarios o lo que ms est de moda ahora: la creacin de
dibujos animados (os sorprendera saber la cantidad de dibujos animados conocidos
creados o animados mediante Flash). Adems, Flash tiene uso industrial, pues se emplea
para optimizar planos, crear diseos de interiores y trabajar con imgenes vectoriales en
general. No dejis de aprender a manejar el programa con ms futuro... (al menos en
cuanto a diseo web)
Aqu tenis algunas pginas interesantes hechas con FLASH NRG y fwa, o con entradas
muy llamativas http://www.derbauer.de/,
Nuestro consejo es emplear Flash nicamente en lo imprescindible en nuestra web
dejando el contenido principal de la web y los elementos de navegacin como HTML,
que la web pueda funcionar si un usuario no puede ver los elementos en Flash y no se
pierda nada realmente importante, a no ser que se trate de una web en la que su valor
sea justamente su contenido interactivo o visual en Flash.

1.5. Mi primera animacin Flash

Una de las caractersticas principales de Flash es su sencillez, esta sencillez en su
utilizacin permite crear animaciones de un modo efectivo y rpido.
Pongmonos en situacin, supongamos que queremos crear una animacin en la que
una pelota realice un movimiento de "bote", es decir, que baje y suba. Puede parecer un
trabajo de horas, pero nada ms lejos de la realidad.
Veamos cmo Flash nos lo pone fcil.
En este apartado no pretendemos ensear cmo crear una animacin Flash (pues eso se
ver ms adelante), el objetivo es que entendamos cmo crea Flash las animaciones y de
que modo nos facilita el trabajo.
A primera vista, lo lgico parece ser dibujar la pelota en cada instante del movimiento,
de modo que cuantos ms instantes dibujemos, ms real parecer el movimiento. Pues
bien, con Flash bastar con crear 3 fotogramas: en el primero dibujaremos la pelota en
el instante inicial (arriba del todo), en el segundo se dibujar la pelota en el momento de
tocar el suelo y en el tercero la pelota volver a estar arriba (en realidad este tercer
fotograma no har falta crearlo, pues bastar con copiar el primero). Por tanto, vemos
que el trabajo ms largo (dibujar los objetos) ya est hecho.

Ahora, se determina el tiempo que durar cada movimiento (es decir, el tiempo que
transcurre entre los instantes en los que la pelota est arriba y abajo) y por ltimo se le
indica a Flash que cree una animacin de movimiento entre estos fotogramas. Fcil
verdad?
En esta versin de Flash an se ha facilitado ms la realizacin de animaciones de
movimiento como veremos en el tema correspondiente.

Observa cmo ha quedado:

Unidad 2. El entorno de Flash CS5 (I)

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...), todo esto hace ms fcil aprender Flash y ms
rpido su manejo y dominio. Esto es lo que nos encontraremos al abrir Flash CS5 por
primera vez:

A lo largo de todo el curso trabajaremos con la versin de evaluacin de Flash CS5 en

castellano. Podeis descargar esta versin de forma gratuita desde la web de Adobe.
Estar disponible hasta que se lance la siguiente evrsin.
En la imagen se puede ver la interfaz que nos encontraremos la primera vez que
abramos el programa Flash. Flash recordar nuestras preferencias y abrir el programa
tal y como lo dejamos la ltima vez que lo utilizamos.
En esta imagen faltan algunos mens. Todos se irn viendo a lo largo de este curso
aunque no aparezcan en esta imagen, que slo pretende mostrar las partes principales de
la interfaz de Flash. Veamos cules son.

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...), todo esto hace ms fcil aprender Flash y ms
rpido su manejo y dominio. Esto es lo que nos encontraremos al abrir Flash CS5 por
primera vez:
Unidad 2. El entorno de Flash CS5 (II)

2.2. La barra de Mens

La Barra de Mens tiene como propsito facilitar el acceso a las distintas utilidades del
programa. Es similar a la de cualquier otro programa de diseo web o grfico, aunque
tiene algunas particularidades. Veamos los principales Submens a los que se puede
acceder:
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), o la de Configuracin de Publicacin
desde donde se pueden modificar las caractersticas de la publicacin. Tambin permite
configurar la impresin de las pginas, imprimirlas...
Edicin: Es el clsico men que te permite Cortar, Copiar, Pegar... tanto objetos o
dibujos como fotogramas; tambin permite personalizar algunas de las opciones ms
comunes del programa.
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. Esto se
puede seleccionar desde los submens Cuadrcula y Guas desde donde tambin se
pueden configurar sus opciones.
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, y la opcin Trazar Mapa de Bits convierte los grficos en mapas vectoriales
(este tema se tratar ms adelante). 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 (conjunto de sentencias almacenadas que
permiten emular lo que un usuario pueda introducir en el entorno de edicin) que
hayamos almacenado en nuestra animacin, obtener otros nuevos de la pgina de
Macromedia o ejecutar los que ya tengamos.
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 progrmacin en ActionScrit, entre ellos se encuentran
Entrar, Pasar, Salir, Continuar...
Ventana: Este men, adems de las opciones clsicas acerca de cmo distribuir las
ventanas, incluye accesos directos a todos los paneles y tambin la posibilidad de crear
tus propios Espacios de Trabajo, guardarlos, cargarlos, etc.
Ayuda: Desde aqu podemos acceder a toda la ayuda que nos ofrece Adobe, desde el
manual existente, hasta el diccionario de Action Script, pasando por tutoriales, lecciones
guiadas etc...
Unidad 2. El entorno de Flash CS5 (IV)

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.
Para saber ms acerca de los Zooms pgina Bsica

2.7. Los Paneles

Los Paneles son conjuntos de comandos agrupados segn su funcin (por ejemplo, todo
lo que haga referencia a las acciones, ir en el Panel Acciones). Su misin es simplificar
y facilitar el uso de los comandos.

Estos paneles o ventanas se encuentran organizados en el lateral derecho del rea de

trabajo. Pudindose expandir o minimizar con un clic de ratn.
Si no estn visibles en el lateral derecho, puedes visualizarlos desplegando el men
Ventana y haciendo clic sobre el nombre del panel que quieras mostrar.
Para mejorar la experiencia del usuario, Flash permite cargar y guardar tus propias
disposiciones de paneles, para que si en algn momento el entorno se vuelve un poco
catico puedas recuperar tu configuracin elegida desde el men Ventana.
Para ello debers acceder a la opcin Ventana Espacio de trabajo Nuevo espacio
de trabajo y asignar un nombre a nuestro nuevo espacio.

Ahora slo bastar darle un nombre a la disposicin y ser accesible desde el mismo
elemento de men Espacio de trabajo en cualquier momento.
Todos los paneles se estudiarn en profundidad a lo largo del curso. An as, vamos a
nombrarlos y a resumir las funciones de la mayora de ellos.

Panel Alinear: Coloca los objetos del modo que le indiquemos. Muy
til.

Panel Color: Mediante este panel creamos los colores que ms nos
gusten.

Panel Muestras: Nos permite seleccionar un color de modo rpido y

grfico. (Incluidas nuestras creaciones).

Panel Informacin: Muestra el tamao y las coordenadas de los

objetos seleccionados, permitindonos modificarlas. Muy til para
alineaciones exactas.

Panel Escena: Modifica los atributos de las escenas que usemos.

Si an no sabes lo que son las Escenas, te lo explicamos en nuestro

tema bsico

Panel Transformar: Ensancha, encoge, gira ... los objetos

seleccionados.

Panel Acciones: De gran ayuda para emplear Action Script y asociar

acciones a nuestra pelcula.

Panel Comportamientos: Permiten asignar a determinados objetos

una serie de caractersticas (comportamientos) que despus podrn
almacenarse para aplicarse a otros objetos de forma rpida y eficaz.

Panel Componentes: Nos permite acceder a los Componentes ya

construidos y listos para ser usados que nos proporciona Flash. Los
componentes son objetos "inteligentes" con propiedades
caractersticas y muchas utilidades (calendarios, scrolls etc...)

Panel Cadenas: Mediante este panel Flash aporta soporte multiidioma a nuestras pelculas.

Panel Respuestas: Macromedia pone a nuestra disposicin ayuda y

consejos accesibles desde este panel.

Panel Propiedades: Sin duda, el panel ms usado y ms importante.

Nos muestra las propiedades del objeto seleccionado en ese instante,
color de borde, de fondo, tipo de trazo, tamao de los caracteres,
tipografa, propiedades de los objetos (si hay interpolaciones etc...),
coordenadas, tamao etc... Es fundamental, no debeis perderlo de
vista nunca.

Panel Explorador de Pelculas: Nos permite acceder a todo el

contenido de nuestra pelcula de forma fcil y rpida

Para practicar estas operaciones te aconsejamos realizar Ejercicio Acceder a los

Paneles
Unidad 3. Dibujar y colorear (I)

3.1. El dibujo en Flash CS5

Cuando se disea una pgina web o una animacin el diseador pasa por muchas fases.
Tras la fase de "Qu quiero crear y cmo va a ser" viene (normalmente) la fase de
diseo grfico. Llevar lo que ha producido tu imaginacin al papel (en este caso al papel
de Flash).

No conviene engaarnos, Flash no es un programa de diseo grfico, pero su potencia

en este mbito es casi tan grande como la de stos programas. Vamos a ver cmo
emplear cada herramienta de dibujo para sacarle el mximo partido.

3.2. La barra de Herramientas. Herramientas bsicas

La Barra de Herramientas contiene todas las Herramientas necesarias para el dibujo.
Algunas herramientas llevan asociados modificadores de herramientas, que permiten
cambiar algunas propiedades de la herramienta, y que aparecen al final del panel de
herramientas. Veamos las herramientas ms importantes:

Herramienta Seleccin (flecha):

. Es la herramienta ms usada de
todas. Su uso principal es para seleccionar objetos, permite
seleccionar los bordes de los objetos (con doble clic), los rellenos (con

un slo clic), zonas a nuestra eleccin... Su uso adecuado puede

ahorrarnos tiempo en el trabajo.

Herramienta Texto:
Crea un texto en el lugar en el que hagamos
clic. Sus propiedades se vern en el tema siguiente.

Herramienta Lnea:
Permite crear lneas rectas de un modo rpido.
Las lneas se crean como en cualquier programa de dibujo, se hace
clic y se arrastra hasta donde queramos que llegue la lnea recta. Una
vez creada la podemos modificar situando el cursor encima de los
extremos para estirarlos y en cualquier otra parte cercana a la recta
para curvarla.

Herramienta de forma: Permite

dibujar formas predefinidas como las que aparecen en la imagen, la
ltima herramienta utilizada es la que aparece como icono en la barra
de herramientas. Manteniendo pulsado el icono podremos acceder a
las diferentes herramientas de forma. Por ejemplo:

La herramienta valo permite dibujar crculos o elipses de manera

rpida y sencilla.
Para practicar el manejo de esta Herramienta, te aconsejamos
realizar Ejercicio Crear valo.

Herramienta Lpiz:
Es la primera herramienta de dibujo
propiamente dicho. Permite dibujar lneas con la forma que
decidamos, modificando la forma de estas a nuestro gusto. El color
que aplicar esta herramienta se puede modificar, bien desde el
Panel Mezclador de Colores o bien desde el subpanel Colores que hay
en la Barra de Herramientas.

Herramienta Pincel:
Su funcionalidad es parecida a la del lpiz,
pero por defecto su trazo es ms grueso e irregular. Se suele emplear
para aplicar rellenos. Se puede modificar su herramientas.

Herramienta Cubo de pintura:

Permite aplicar rellenos a los objetos
que hayamos creado. Al contrario que muchos otros programas de
dibujo, no permite aplicar rellenos si la zona no est delimitada por un
borde. El color que aplicar esta herramienta se puede modificar,
bien desde el Panel Color o bien desde el subpanel Relleno que hay
en la Barra de Herramientas.

Herramienta Borrador:
Su funcionamiento es anlogo a la
Herramienta Pincel. Pero su funcin es la de eliminar todo aquello que
"dibuje".

Unidad 3. Dibujar y colorear (II)

3.3. La barra de Herramientas. Herramientas avanzadas

Herramienta Lazo:
Su funcin es complementaria a la de la herramienta Seleccin, pues puede seleccionar
cualquier cosa, sin importar la forma, (la Herramienta Flecha slo puede seleccionar
objetos o zonas rectangulares o cuadradas). En contrapartida, la Herramienta Lazo no
puede seleccionar rellenos u objetos (a menos que hagamos la seleccin a mano).
Al seleccionar esta herramienta, en el Panel de Herramientas aparecen estos botones:
. Esto es la herramienta Varita Mgica, tan popular en otros programas de
dibujo. Permite hacer selecciones segn los colores de los objetos. El tercer dibujo que
aparece es este:

para seleccionar Poligono.

Herramienta Pluma:
Crea polgonos (y por tanto rectas, rectngulos...) de un
modo sencillo. Mucha gente encuentra esta herramienta complicada, aunque es una de
las ms potentes que ofrece Flash. Su empleo consiste en hacer clic en los lugares que
queramos definir como vrtices de los polgonos, lo que nos asegura una gran precisin.
Para crear curvas, hay que sealar los puntos que la delimitan y posteriormente trazar
las tangentes a ellas. Con un poco de prctica se acaba dominando.
Herramienta Subseleccin:
Esta Herramienta complementa a la Herramienta
Pluma, ya que permite mover o ajustar los vrtices que componen los objetos creados
con dicha herramienta.
Herramienta Bote de Tinta:
Se emplea para cambiar rpidamente el color de un
trazo. Se aplica sobre objetos, si tienen borde, cambia al color mostrado de dicho borde,
por el mostrado en el Panel Mezclador de Colores (que coincide con el subpanel
Colores que hay en la Barra de Herramientas.)

Herramienta Cuentagotas:
Su misin es "capturar" colores para que
posteriormente podamos utilizarlos. Para ver cmo funciona, consulta este videotutorial:

3.4. La barra de Herramientas. Opciones

Algunas Herramientas poseen unas opciones especiales que facilitan y potencian su
uso. Para acceder a estas utilidades, a veces no basta con hacer clic en la Herramienta
correspondiente sino que adems debemos hacer clic en la lnea o en el objeto que has
dibujado.
Entonces aparecer (o se iluminar si ya estaba presente) un submen como este:
Ajustar a Objetos :
Se usa para obligar a los objetos a "encajar" unos con otros,
es decir, para que en caso de ser posible, sus bordes se superpongan, dando la sensacin
de estar "unidos".
Suavizar:
Enderezar:
rectilneos.

Convierte los trazos rectos en lneas menos rgidas.

Realiza la labor inversa. Convierte los trazos redondeados en ms

Unidad 3. Dibujar y colorear (III)

3.5. El panel Color

El Panel Color, como su nombre indica se usa para fabricar nuestros propios colores y
para seleccionar los que ms nos gusten.
Para seleccionar un color determinado, bastar con hacer clic en las pestaas que se
encuentran junto a los iconos de las herramientas de Lpiz y de Bote de Pintura. (Si
queremos modificar el color de un borde, pulsaremos sobre el color que est junto al
lpiz

y si queremos modificar un relleno, haremos clic en el color que est junto

al bote de pintura
. Al hacerlo aparecer un panel con multitud de colores para
que seleccionemos el que ms nos gusta. Tambin permite introducir el cdigo del color
segn el estndar.

En vez de este selector rpido, podemos usar el panel Color, que encontraremos entre
los paneles.

As mismo se puede determinar el tipo de relleno que aplicaremos a los objetos creados
(mediante la herramienta Bote de Pintura).
Se pueden crear diferentes tipos de relleno:

Slido: Consiste en un relleno formado por un solo color.

Degradado Lineal: Es un tipo especial de relleno, de modo que un

color se degrada hasta convertirse en otro. Puede ir de arriba abajo o
de un lado al otro

Degradado Radial: Es igual que el anterior, pero los degradados tiene

forma circular.

Relleno de mapa de Bits: Permite colocar como relleno alguna imagen

existente en la pelcula (O ajena a ella si antes se "importa")

Para aprender a crear un color transparente (semi-transparente), realiza el ejercicio

paso a paso Crear transparencias.

3.6. El panel Muestras

El Panel Muestras sirve para poder ver de un modo rpido y claro los colores de que
disponemos, tanto slidos (un solo color) como degradados (lineales o radiales).
Adems, cuando creemos un color mediante el Panel Color, podremos agregarlo a
nuestro conjunto de muestras mediante Agregar Muestra (que se encuentra en un men
desplegable en la parte superior derecha del panel Color). Una vez est agregado el
color, pasar a estar disponible en nuestro conjunto de muestras y podremos acceder a l
rpidamente cada vez que trabajemos con nuestra pelcula.
Cada pelcula tiene su propio conjunto de muestras y cada vez que la abramos para
editarla, podremos usar las muestras que tenamos la ltima vez que trabajamos con
dicha pelcula.
Para practicar el manejo de este panel, te aconsejamos realizar el ejercicio paso a paso
Colorear un valo
Unidad 4. Textos (I)

4.1. El texto en Flash

Flash abarca todo aquello que nos pueda hacer falta a la hora de crear una animacin, y
por tanto, tambin todo aquello relativo a los textos. Sin embargo, Flash fue concebido
para crear animaciones grficas, de modo que tratar cualquier texto como si de un
objeto ms se tratase, listo para ser animado a nuestro gusto. Esto nos permitir
posteriormente animar textos y crear espectaculares animaciones con muy poco
esfuerzo. Flash distingue entre 3 tipos de texto, texto esttico o normal, texto dinmico
y texto de entrada (para que el usuario introduzca sus datos, por ejemplo), tambin se
puede crear texto que soporte formato HTML etc...

Actualmente Flash utiliza dos motores para trabajar con texto: el motor clsico,
heredado de las anteriores versiones, y el llamado Text Layout Framework (TLF), el
nuevo motor incluido en Flash CS5. Este ltimo, es el utilizado por defecto en Flash.
Por defecto, salvo que indiquemos otra cosa, en nuestros ejemplos emplearemos el
motor de texto TLF.

4.2. Insertar texto

En la barra de Herramientas encontramos la herramienta Texto

permitir escribir texto en nuestros proyectos.

, que es la que nos

Los caracteres del texto no est introducidos directamente en el documento, si no que

estn confinados en un contenedor de texto. En Flash podemos introducir dos tipos de
contenedores:
Texto de puntos.
El tamao del contenedor depende del texto introducido, creciendo y
decreciendo con l.
Texto de rea.
Podemos definir su tamao, independientemente del texto que
contenga.

Para insertar un Texto de puntos, basta con hacer clic con la herramienta Texto y
comenzar a escribir. En cambio, si queremos introducir un Texto de rea, tenemos que
hacer clic y arrastrar para definir el tamao del rea. En cualquier caso, siempre

podemos convertir un Texto de puntos en rea simplemente cambiando su tamao,

estirando de los controles de transformacin que se muestran alrededor.
Para saber ms acerca de Cmo escribir textos visita nuestra pgina avanzada

Unidad 4. Textos (II)

4.3. Propiedades de los textos

El Panel Propiedades contiene las principales propiedades de todos los objetos que
empleemos durante nuestra pelcula, de modo que si seleccionamos un texto, podremos
ver en l todo lo que nos hace falta conocer sobre nuestro texto. Podemos ver que el
panel muestra una gran cantidad de opciones, agrupadas en categoras.

Observars que las imgenes anteriores muestran distintas opciones para el texto. Esto
se debe a que la de la izquierda tiene seleccionada el motor Texto TLF, que nos permite
muchas ms opciones. La de la derecha tiene establecido el motor Texto clsico, y
aparecen menos opciones, las que venamos encontrando en la anterior versin del
programa.
Si quieres saber cmo utilizar el texto clsico, puede seguir este avanzado

Nota: El motor de texto TLF requiere publicar los archivos como ActionScript 3 y
FlashPlayer 10 o posterior. Si necesitas publicar archivos para versiones anteriores,
debers de emplear el motor clsico.
Veamos las principales opciones del panel Propiedades, comunes a ambos motores.
Otras ms especficas las veremos ms adelante, cuando vayamos a emplearlas:
Podemos elegir cmo se comporta el texto: Si es Seleccionable, y el usuario lo podr
seleccionar y copiar en el portapapeles, Slo lectura, lo que impedir que lo pueda
seleccionar, o si lo puede cambiar (Editable), por ejemplo, para introducir datos.

Adems, podemos establecer la orientacin del texto, en Horizontal (por defecto) o

Vertical.
Posicin y Tamao: Dado que Flash trata los textos como objetos, stos tambin
tienen anchura, altura y coordenadas. Podemos modificarlos a nuestro gusto, pero
debemos tener en cuenta que los caracteres no deben estirarse sin motivo, pues las
tipografas son una parte muy importante y deben respetarse.

En el panel encontramos las coordenadas horizontal (X) y vertical (Y) del la esquina
superior del elemento de texto, coincidiendo las coordenadas 0 0 con la esquina superior
izquierda de la escena. Tambin se muestran los valores del ancho (AN) y alto (AL) del
texto.
Carcter. En esta seccin encontramos las opciones tpicas del texto:

Familia:
Desde aqu, al igual que en
los editores de texto ms comunes podemos seleccionar el tipo de letra o "fuente" que
mejor se ajuste a nuestro diseo.
Estilo: Nos permiten la combinacin de los dos estilos de texto habituales: texto normal
(Regular), en cursiva (Italic), negrita (Bold) o negrita cursiva (Bold Italic).

Tamao: El tamao de la tipografa empelada.

Interlineado: Nos permite controlar la separacin entre las lneas de texto dentro de un
mismo prrafo.
Color: Como al resto de elementos, podemos dar color al texto.
Espaciado: Determina el espaciado adicional entre caracteres. til cuando la tipografa
que empleamos muestra las letras muy juntas o para dar efectos concretos al texto.

Ajuste automtico: Activar esta casilla provoca que la separacin entre caracteres se

realice de modo automtico.

Suavizado: Las opciones de suavizado resultan importantes a la hora de mostrar nuestro
texto. Encontramos estas opciones:
o

Utilizar fuentes de dispositivo: Se emplean las fuentes

instaladas en el equipo, lo que hace ms liviano el archivo SWF
al no tener que incluirlas. Aunque nos exponemos a que la
fuente no est instalada, por lo que se emplear otra. Slo
deberamos de utilizar esta opcin para las familias de fuentes
ms comunes.

Suavizado para legibilidad, favorece la legibilidad del texto. En

este caso, deberamos de incorporar la fuente, como veremos
ms adelante. No debemos de emplearla en textos animados.

Suavizado para animacin, es la mejor opcin cuando

pretendemos animar texto, ya que se obtienen animaciones
ms fluidas ignorando algunos aspectos del texto, como
alineaciones. En este caso, deberamos de incorporar la fuente.

Giro y otros estilos: Al final de este grupo de opciones encontramos las opciones para
rotar el texto seleccionado, y aplicarle estilos de subrayado, tachado, superndice y
subndice.

Carcter avanzado:
Vnculo: Si queremos que al pulsar sobre nuestro texto, el usuario vaya a una direccin
web, nada ms fcil que escribirla ah. Flash la asociar al texto que ests escribiendo en
ese momento.
Destino: Determina si la URL a la que el texto hace referencia se cargar en la misma
ventana del navegador, en una nueva ...

Adems, en esta seccin podemos especificar cmo se comporta el texto Por ejemplo,
que se muestre en maysculas, los saltos, etc...

Unidad 4. Textos (III)

Un Prrafo no es ms que un conjunto de caracteres con propiedades comunes a todos

ellos. Estos prrafos admiten ciertas opciones que nos permiten trabajar con bloques de
texto. El Panel Propiedades nos proporciona las siguientes opciones para trabajar con
prrafos (entre otras).
A la Izquierda:
Todas las lneas empezarn tan a la izquierda como sea posible
(dentro del recuadro de texto que hayamos definido).
Centrar:
prrafo.

Las lneas se distribuyen a la derecha y a la izquierda del punto medio del

A la derecha:
Todas las lneas empezarn tan a la derecha como sea posible dentro
del recuadro de texto que hayamos definido).
Justificado:
El texto se ensancha si es necesario con tal de que no quede
"dentado" por ninguno de sus lmites. Las diferentes opciones se refieren a la ltima
lnea del texto, que suele ser ms corta que el resto.
El resto de opciones nos permiten determinar los mrgenes (izquierdo y derecho), los
sangrados de prrafo y el espacio interlineal.

Para practicar estas propiedades te aconsejamos realizar Ejercicio Propiedades del

texto.

4.4. Propiedades de los contenedores de texto

En el panel de propiedades, podemos encontrar algunas opciones que afectan a los
contenedores de texto, en la categora de opciones Contenedor y flujo.

La propiedad Comportamiento se refiere a como se ampla un contenedor de Texto al

introducir texto.
Caracteres mx.: Nos permite limitar el nmero mximo de caracteres que se pueden
introducir en la caja de texto.
Alineacin: nos permite establecer la alineacin horizontal del texto en el contenedor.
Sus valores pueden ser Superior, Centrar, Inferior o Justificar.

Columnas nos permite dividir fcilmente un texto de rea en el nmero de columnas

indicado. En este caso, tambin podremos regular el espacio entre ellas (medianil).

.
El relleno (padding) permite crear una separacin entre los bordes del contenedor y el
texto.
Adems, podemos asignar un color de relleno y borde al contenedor.
Unidad 4. Textos (IV)

4.5. Flujo de texto entre contenedores

Al escribir, podemos crear textos de reas con un texto fijo, y colocarlo en un lugar del
documento. Pero pensemos en un trptico, por ejemplo. En este caso lo ideal sera tener
un texto de rea centrado en cada pgina, y que cuando el texto no nos cabe en uno,
pase al siguiente. Esto lo conseguimos enlazando los distintos textos de rea.
Los textos de rea tienen un cuadradito en su comienzo, llamado puerto de entrada, y
otro al final, llamado puerto de salida.

Cuando todo el texto cabe en el elemento de texto, el puerto de salida aparece en blanco.
Pero cuando el texto desborda al elemento, el puerto de salida muestra el smbolo .
Cuando dos elementos de texto aparecen enlazados, el que va primero muestra una
flecha hacia afuera en el puerto de salida, que est unido al puerto de entrada del
siguiente elemento, que muestra una flecha hacia adentro.

Para crear un elemento de texto enlazado, partimos de un objeto de texto ya creado, y

hacemos clic con la herramienta Seleccin en uno de sus puertos, en el de entrada si
queremos que el nuevo objeto vaya delante, o en el de salida si el nuevo objeto ir a
continuacin. El cursor cambiar a cursor de

, dndonos dos opciones:

Hacer clic en el en otro rea de texto para enlazarlo.

Trazar un nuevo elemento de texto, igual que con la herramienta

Texto. Si esto lo hacemos en un puerto ya enlazado, el nuevo
elemento de texto se colocar entre los elementos que estaban
enlazados.

Para romper un enlace, podemos hacer doble clic sobre un puerto enlazado, lo que
mueve todo el texto al puerto de origen.

Para practicar lo que hemos visto, te aconsejamos realizar el ejercicio paso a paso
Crear un flujo de texto.

4.6. Incorporar fuentes

Al crear un archivo de flash con texto, si en Suavizado no hemos elegido fuentes de
dispositivo, tenemos que tener presente que si hemos elegido una fuente que no est
disponible en el sistema que se reproduce la pelcula, se sustituir por otra fuente
disponible. Esto es un problema, ya que puede alterar bastante nuestro diseo.
Para evitar esto, podemos incluir las fuentes que hemos empleado en nuestro proyecto.
Esto garantiza que el texto se vea tal y como lo creamos, independientemente de las
fuentes del sistema.
Para incorporar una fuente en la pelcula usamos el botn Incorporar que aparece en el
panel de Propiedades.
Se abrir el siguiente cuadro de dilogo:

En el desplegable Familia seleccionamos la fuente que deseamos utilizar.

Seleccionamos los estilos que vamos a utilizar (Negrita, Cursiva y Tamao).
El nombre que le demos se mostrar en la Biblioteca y estar lista para utilizarse.
Cuando creemos un campo de texto, seleccionamos nuestra fuente, que aparecer
sealada con un asterisco (*).

De esta forma nos aseguramos que nuestro proyecto se ver tal cual lo creamos.
Unidad 4. Textos (V)

4.7. Introducir texto

Aunque el uso ms comn y principal de los contenedores de texto es mostrarlo,
tambin podemos emplearlos como un cuadro de entada de texto.
Para hacerlo, basta con seleccionar Texto editable en las propiedades del elemento.

En el siguiente ejemplo, tenemos tres cuadros de texto: el de arriba es editable, el del

medio solo seleccionable y el de abajo solo se puede leer. Y tambin hemos hecho que
el contenido de todos cambie segn lo que se escriba en el primero.

Para recoger informacin de los usuarios, normalmente emplearemos componentes de

formulario, que son controles especficos para esta funcin. Pero a esto le dedicaremos
un tema completo ms adelante.
Pero cmo recogemos la informacin introducida en el cuadro de texto? Aunque an
no lo hemos explicado, el texto es un objeto. Y como tal, tiene una prop
Unidad 5. Sonidos en Flash (I)

5.1. El sonido en Flash

Quin sera capaz de ver una pelcula muda? Y una animacin espectacular sin
sonido?
Hasta hace poco, los nicos sonidos que oamos en las pginas web eran los famosos
"midis", de escaso tamao y de escasa calidad. De hecho, eran slo instrumentos
musicales sin voz, de ah su pequeo tamao (y calidad). An as, siempre exista algn
creador de pginas web que se aventuraba a poner algn sonido complejo (.wav o .mp3)
en su pgina web, por desgracia, su carga es tan lenta, que la mayora de los visitantes
se iran de la pgina sin llegar a escucharla.
Hoy, gracias a las conexiones de banda ancha orientadas a contenido multimedia, poner
sonido a las pginas web es un poco ms fcil, qu aporta Flash?

Flash nos permite insertar cualquier sonido que queramos en nuestras pelculas (.wav,
.aiff, .mp3, etc...) de forma fcil y muy efectiva, ya que es capaz de acelerar la descarga
del sonido siempre y cuando se descargue junto con nuestra pelcula.
Podemos dar a la pelcula efectos simples (el tpico "clic" al pulsar un botn), efectos
complejos (msica de fondo) e incluso podemos hacer que la animacin se desarrolle
conjuntamente con una msica (si bien esto ltimo necesitara que toda la pelcula
estuviera descargada previamente, para evitar "atascos" durante el desarrollo de la
animacin). En definitiva, Flash nos lo vuelve a poner fcil.
Pero hemos de tener cuidado al incluir sonidos, sobre todo si son melodas. Es
preferible que sea el usuario quien las active a travs de un botn, o si es necesario que
se reproduzcan automticamente, tener un control fcilmente localizable para
silenciarlo.

5.2. Importar sonidos

Unidad 6. Trabajar con objetos (III)

6.4. Panel Informacin

Adems de controlar la posicin de los objetos desde el Panel Alineamiento, tambin

podemos hacerlo, de un modo ms exacto (ms matemtico) desde otro panel, el Panel
Informacin.
A este Panel se puede acceder desde el Men Ventana Informacin. Las posibilidades
de este Panel son limitadas, pero si buscamos exactitud en las medidas o no nos fiamos
de las distribuciones de objetos que crea Flash, debemos acudir a l.

Medidas del Objeto:

Aqu introduciremos un nmero que represente el tamao de
nuestro objeto en la medida seleccionada en las Propiedades del documento. AN: hace
referencia a la anchura y AL: a la altura.
Situacin del objeto:
Desde aqu controlamos la posicin del objeto en el escenario.
La X y la Y representan el eje de coordenadas (La X es el eje Horizontal y la Y el eje
vertical). Las medidas tambin van en funcin de las medidas elegidas para la pelcula.
Estas medidas se toman desde la esquina superior izquierda de la pantalla (X=0 e Y=0).
Color Actual:
Indica el color actual en funcin de la cantidad de Rojo (R), Verde (V),
Azul (A) y transparencia Alfa (A) que contenga.
Este indicador puede ser engaoso, el motivo es que indica el color que tiene el objeto
por el que en ese momento pasamos el cursor del ratn. Por tanto, podemos tener
seleccionado un objeto (haciendo clic en l) y ver en el Panel Informacin su tamao y
su posicin, pero al desplazar el ratn, el valor del color cambiar y ya no indicar el
color del objeto seleccionado, sino el del objeto por el que pase el cursor. Tened esto en
cuenta para no cometer errores o perder tiempo innecesario.
Posicin del Cursor:
Indica la posicin del cursor. Es til por si queremos que suceda
algo en la pelcula al pasar el cursor justo por una posicin determinada o para situar
partes del objeto en lugares especficos.

6.5. Los grupos

Un grupo no es ms que un conjunto de objetos. Si bien no cualquier conjunto de

objetos forman un grupo, ya que para crear un grupo, debemos indicarle a Flash que as
lo queremos. Para ello, basta seleccionar los objetos que queremos que formen parte de
un grupo y despus hacer clic en el Men Modificar Agrupar (Ctrl + G).
Tras hacer esto observaremos que desaparecen las texturas que indicaban que los
objetos estaban seleccionados y observamos que el grupo pasa a ser un "todo", ya que
resulta imposible seleccionar a uno de sus miembros sin que se seleccionen a su vez los
dems. Adems, aparece el rectngulo azul (por defecto) que rodea al grupo,
definindolo como tal.

Crear grupos es muy til, ya que nos permite, como ya hemos dicho, tratar al conjunto
de objetos como un todo y por tanto, podemos aplicar efectos al conjunto, ahorrndonos
la labor de hacerlo de objeto en objeto.
Por ejemplo, supongamos que tenemos un dibujo que representa un conjunto de coches.
Tras dibujarlos todos, nos damos cuenta de que queremos aumentar el tamao de los
coches. Podemos aumentar el tamao de los coches de uno en uno, corriendo el riesgo
de aumentar unos ms que otros y perdiendo las proporciones entre ellos, o podemos
formar un grupo con los coches y aumentar el tamao del grupo, de modo que aumenten
todos de tamao a la vez y en la misma proporcin. De igual modo, podemos mover al
grupo de posicin, hacer que gire...
Al crear un grupo, simplemente estamos dando unas propiedades comunes a un
conjunto de objetos y, en ningn caso perdemos nuestro objeto. En cualquier momento
podemos deshacer el grupo, mediante el Men Modificar Desagrupar.
Adems, Flash nos permite modificar los elementos de un grupo sin tener que
desagruparlo. Para ello, seleccionamos el Grupo de elementos y hacemos clic en el
Men Edicin Editar Seleccionado, o directamente hacemos doble clic sobre el
grupo con la herramienta Seleccionar. Podremos editar los objetos que componen el
grupo por separado teniendo en cuenta que, como es lgico, los cambios realizados
afectarn al grupo adems de al elemento en cuestin.
Unidad 7. Las capas (I)

7.1. Qu es una capa?

Todo el mundo ha visto alguna vez cmo trabajan los dibujantes de dibujos animados. Y
todos hemos visto cmo colocan una hoja semitransparente (lminas de acetato) con
dibujos sobre otras y la superposicin de todas forman el dibujo final. Por qu no
dibujan todo en una misma hoja? Por qu trabajan con varios niveles y con varios
dibujos si van a acabar todos juntos?

Los motivos son muchos, y estos niveles que emplean los dibujantes, equivalen a las
Capas que utiliza Flash, y la mayora de programas de dibujo o retoque, como
Photoshop. Cada capa es, por tanto, un nivel en el que podemos dibujar, insertar
sonidos, textos... con independencia del resto de capas. Hay que tener en cuenta que
todas las capas comparten la misma Lnea de Tiempo y por tanto, sus distintos
fotogramas se reproducirn simultneamente.
Clarifiquemos esto con un ejemplo:
Supongamos que tenemos 2 capas. En una de ellas los fotogramas del 1 al 10 contienen
el dibujo de una portera de ftbol. En la otra los fotogramas del 1 al 5 contienen el
dibujo de un portero (del 5 en adelante estn vacos).
Pues bien, esta pelcula nos mostrar inicialmente (durante el tiempo que duren los
primeros 5 fotogramas) la portera con el portero, para despus (durante los fotogramas
del 5 al 10) mostrar la portera sin portero.
De este modo la portera es independiente del portero, y podemos tratar estos objetos
con total libertad, ya que no interfieren entre ellos para nada.

Otra razn para separar los objetos en capas, es que Flash nos obliga a colocar cada
animacin distinta en una capa. De lo contrario, todos los objetos que se encuentren en
dicha capa formarn parte de la animacin. Si queremos que un objeto no forme parte
de una animacin, deberemos quitarlo de la capa en la que se produce dicha animacin.

Siguiendo con el ejemplo del portero, si quisiramos crear un movimiento que haga que
el portero se desplace hacia un lado no hay ningn inconveniente, pero si la portera
estuviera en la misma capa que el portero, entonces ambos objetos se moveran hacia
dicho lado, con lo que resultara imposible que slo se moviera el portero. La solucin
es separar los objetos en 2 capas, como ya hemos hecho.
Las capas adems, tienen otras utilidades, nos permiten ordenar nuestra pelcula de
forma lgica, y nos ayudan en la edicin de dibujos (evitando que se "fundan" en uno
slo, o bloqueando el resto de capas de modo que slo podamos seleccionar la capa que
nos interese).
Otro motivo es para organizar mejor nuestro contenido. Igual que crebamos una capa
para los elementos de audio, crearemos capas para otros elementos, como el cdigo
ActionScript.

Para incorporar alguno de estos sonidos a nuestra biblioteca de proyecto, no tenemos

ms que arrastrarlos desde este panel.
Unidad 2. El entorno de Flash CS5 (III)

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.
Adems, en la parte inferior hay herramientas para trabajar con Papel cebolla e
informacin sobre el Nmero de Fotograma actual (1 en la imagen), la Velocidad de los
Fotogramas (24.0 en la imagen) y el Tiempo de pelcula transcurrido (0.0s en la
imagen).
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.
Para saber ms acerca de la Lnea de Tiempo y de los distintos tipos de fotogramas que
existen visita nuestra Pgina Avanzada

2.4. Las capas

El concepto de Capa es fundamental para manejar Flash de forma eficiente. Dada la
importancia de estas, se le dedicar un tema completo. An as, veamos a grandes
rasgos qu son 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).
Los objetos que estn en una determinada capa comparten fotograma y por tanto,
pueden "mezclarse" entre s. Esto es interesante a menudo, pero otras veces es
conveniente separar los objetos de modo que no interfieran entre s. Para ello, crearemos
tantas capas como sea necesario. El uso de mltiples capas adems, da lugar a pelculas
bien ordenadas y de fcil manejo (es conveniente colocar los el cdigo ActionScript en
una capa independiente llamada "acciones", por ejemplo). Las ventajas y desventajas de
usar capas se ver en la unidad referente a Capas.

2.5. El Escenario
A continuacin veremos las diferentes partes que conforman el rea de trabajo
empezaremos con la ms importante: el Escenario.
Sobre el escenario dibujaremos y colocaremos los diferentes elementos de la pelcula
que estemos realizando. El escenario tiene unas propiedades muy importantes, ya que
coinciden con las Propiedades del documento. Para acceder a ellas, hagamos clic con el
botn derecho sobre cualquier parte del escenario en la que no haya ningn objeto y
despus sobre Propiedades del documento:
Aade metadatos a tus archivos para una mejor inclusin de estos en los motores de
busqueda rellenando los campos de Ttulo y Descripcin.
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.
Para practicar estas operaciones te aconsejamos realizar el ejercicio paso a paso
Cambiar las dimensiones de la pelcula
Unidad 5. Sonidos en Flash (II)

5.3. Propiedades de los sonidos

En Flash CS5, al igual que en versiones anteriores, todo lo referente a los sonidos lo
podemos editar desde el Panel Propiedades. Aqu tenemos todo lo necesario para
insertar, modificar y editar el sonido que acabamos de importar. Si no hemos importado
ningn sonido, nos daremos cuenta de que no podemos seleccionar nada en dicho panel,
basta insertarlo para que esto cambie.
Para que aparezca la posibilidad de trabajar con sonidos, deberemos hacer clic en
seleccionar el fotograma en el que queremos reproducir el sonido, tras hacer esto, el
Panel Propiedades toma el siguiente aspecto:

Veamos las partes que tiene este panel.

Nombre: En este desplegable nos aparecern los sonidos que tenemos importados en
la Biblioteca. Deberemos seleccionar la cancin que pretendamos aadir a nuestra
pelcula (en el siguiente punto veremos cmo insertarla). Si no queremos reproducir
sonido, seleccionamos Ninguno.

Efecto: Desde aqu podremos aadir algn efecto a nuestro sonido, como por ejemplo
que el sonido pase del canal izquierdo al derecho (esto crea la sensacin de que el
sonido te envuelve ya que lo oyes por un sitio y luego por otro, aunque queda muy lejos
de los verdaderos sonidos envolventes), que el volumen aumente progresivamente etc...
Si deseamos aadir complejos efectos sonoros, deberemos tratar adecuadamente el
sonido con algn programa creado especficamente para este propsito antes de
importarlo.
En el punto Editar Sonidos se tratar en ms profundidad estos efectos.

Sinc: Esta opcin nos permite determinar en qu momento comenzar a actuar nuestro
sonido, estas son las opciones que tenemos:

Evento: Sincroniza nuestro sonido con un evento determinado. Es la

opcin por defecto y provoca que el sonido se empiece a reproducir al
pasar la pelcula por el fotograma en el que est situado. Tambin se
puede sincronizar el sonido con botones y los dems tipos de
smbolos. El sonido se repetir completamente, y si lo ejecutamos
varias veces, se reproducir de nuevo, aunque no hubiese acabado,
provocando que el sonido se solape.

Inicio: Su funcionamiento es equivalente al de "Evento", se

diferencian en que si ya se est reproduciendo, no se reproduce de
nuevo.

Detener: Detiene el sonido seleccionado.

Flujo: Esta opcin sincroniza el sonido con el o los objetos con los que
est asociado, por tanto, si la carga de la pelcula es lenta y las
imgenes no fluyen adecuadamente, el sonido se detendr para
sincronizarse con ellas. Este efecto puede dar la sensacin de que la
pelcula se corta de un modo muy brusco (pensar en que se considera
normal que una imagen tarde en cargarse, pero si se detiene un
sonido mientras se reproduce, produce una reaccin muy negativa en
los que pueden estar viendo nuestra pelcula).
Por otra parte, es un efecto muy adecuado para algunas situaciones,
por ejemplo, el efecto de que un personaje hable durante una
pelcula. En esta situacin, es muy recomendable que el sonido y las
imgenes estn sincronizadas.

Repetir: Determina el nmero de veces que se reproducir el sonido segn lo indiques

de la derecha. Tambin puedes seleccionar Reproducir indefinidamente para que el
sonido se reproduzca en un bucle hasta llegar al siguiente fotograma clave.
No recomendamos insertar sonidos con la opcin Flujo y a la vez la de Repetir, ya que
al estar sincronizados los sonidos con las imgenes, provocaramos que las imgenes (y
los fotogramas que las contengan) se dupliquen tambin, aumentando
considerablemente el tamao de la pelcula.
Unidad 5. Sonidos en Flash (III)

5.4. Insertar sonido en lnea de tiempo

Al aadir un sonido directamente sobre la lnea de tiempo, lo asociamos a un fotograma.

Por tanto, el sonido se comenzar a reproducir en ese fotograma, y continuar hasta que
sea detenido. Esto es til, por ejemplo, para agregar msica a la pelcula.
Lo mejor ser crear una nueva capa para cada sonido. As lo controlaremos fcilmente.
Creamos un fotograma clave en el momento en que queremos que comience a
reproducirse el sonido, y lo arrastramos de la biblioteca al escenario. Tambin podemos
elegirlo directamente desde el panel de Propiedades.
Con el fotograma de la nueva capa seleccionado, accedemos a sus propiedades, a la
seccin de Sonido.
Seleccionamos los efectos deseados, y las veces que lo queremos Repetir.
En el men Sinc. seleccionamos la opcin de sincronizacin deseada. Por ejemplo, si
queremos que cada vez que se pase por ah, se lance un sonido breve, porque por

ejemplo se mueve un objeto, seleccionaremos evento. En cambio, si queremos iniciar la

reproduccin del sonido a partir de ah, marcamos Inicio. Si queremos iniciar el sonido
en un fotograma ms adelante, seleccionamos Detenido, y lo iniciamos creando un
fotograma clave, seleccionado el mismo sonido.

As representa Flash los sonidos insertados en Fotogramas

Por defecto, Flash entiende que queremos reproducir el sonido completo, si no por qu
importarlo todo cuando genera un archivo ms grande? Por supuesto, podemos hacer
que el sonido se detenga en un fotograma determinado. Para ello, creamos un fotograma
clave, y con el mismo sonido seleccionado, elegimos Detener en el desplegable Sinc.
Otra sera utilizar la opcin Flujo.

Al seleccionar esta opcin, el sonido se reproducir hasta que se acabe o llegue a un

fotograma clave, siguiendo la pelcula. Slo es aconsejable esta opcin si realmente la
necesitamos.

Para practicar la insercin de sonidos realiza el Ejercicio paso a paso Trabajar con
sonidos.
Unidad 5. Sonidos en Flash (IV)

5.5. Sonidos en botones

Es muy comn insertar un breve sonido al pulsar un botn, as el usuario percibe que
ese botn "hace algo".
Como veremos ms adelante, los botones tienen su propia lnea de tiempo, con sus
distintos estados. Por eso, no tenemos ms que insertar los sonidos para cada estado.
Lo que s debemos de tener en cuenta, es en usar la opcin de Sincronizacin Evento,
para que se reproduzca el sonido en su totalidad.

5.6. Editar Sonidos

Flash no fue creado como un editor de sonidos, por lo que su potencia en este campo es
limitada. An as, los efectos que permite aplicar de un modo sencillo suelen ser
suficientes para cualquier animacin que queramos realizar. Disponemos de estos
efectos del panel Propiedades:

Canal Izquierdo: El sonido tan slo se escuchar por el altavoz

izquierdo.

Canal Derecho: El sonido tan slo se escuchar por el altavoz

derecho.

Desvanecimiento de izquierda a derecha: El sonido se reproduce

inicialmente en el altavoz izquierdo para luego pasar al derecho.

Desvanecimiento de derecha a izquierda: El sonido se reproduce

inicialmente en el altavoz derecho para luego pasar al izquierdo.

Aumento Progresivo: El volumen de nuestro sonido aumenta

progresivamente.

Desvanecimiento: El volumen de nuestro sonido disminuye

progresivamente.

Personalizado: Esta opcin nos permite "editar" el sonido de un modo

rpido y sencillo. Desde este editor podemos decidir qu volumen
tendr nuestro sonido y en qu altavoz. Podemos crear los efectos
anteriores ajustndolos a nuestro gusto y podemos crear efectos ms
complejos a nuestra medida.

Esta es la apariencia del cuadro de dilogo Personalizar Sonido. La parte superior

representa el canal izquierdo y la parte inferior el canal derecho. Entre las 2 partes hay
una lnea de tiempo que nos indica el tiempo de sonido transcurrido en cada punto.
Las lneas grises representan el volumen del sonido y haciendo clic en ellas podemos
configurar este volumen.
En el ejemplo, el canal izquierdo se reproduce normalmente (pues el volumen est al
mximo), pero el canal derecho empieza en silencio, para poco a poco alcanzar el
volumen normal (este efecto equivaldra a un Aumento Progresivo en el canal derecho).
Unidad 5. Sonidos en Flash (V)

5.7. Mp3 o Wav?

Como ya se ha comentado, los sonidos que Flash CS5 puede importar casi cualquier
tipo de sonido, aunque los ms empelados son MP3 y WAV. Si no sabes las diferencias
entre estos tipos de archivos, puedes consultar nuestro tema bsico

Por tanto, cuando queramos aadir un sonido a nuestra pelcula, deberemos decantarnos
por uno de estos 2 formatos. Lo normal es que el sonido que pretendamos insertar ya
est en uno de ellos, pero no debemos olvidar que existen multitud de programas que
convierten un sonido con extensin .mp3 a uno .wav y viceversa, por lo que no debe ser
inconveniente el formato que tenga el sonido en un principio.
La pregunta surge en seguida Cul es mejor?

Esta pregunta es ms importante de lo que parece, ya que si decidimos que nuestra

pelcula tenga sonidos, deberemos asumir una carga muy importante en cuanto a tamao
de la pelcula y en consecuencia en cuanto a tiempo de descarga. Lo habitual es que los
sonidos ocupen ms de la mitad del espacio total y muchas veces no valdr la pena
insertarlos...
Una vez decididos a insertar el sonido, la lgica nos dice que insertemos el sonido que
ocupe un espacio menor en el disco duro, ya que este espacio es el que ocupar en
nuestra pelcula. Esto es una aproximacin, ya que Flash comprime todo aquello que
insertamos en nuestras pelculas.
Como ya sabemos, los sonidos .mp3 ocupan un espacio mucho menor que los
sonidos .wav (10 veces menos o ms), por lo que parece recomendable insertar .mp3 en
lugar de .wav, ahora bien Puede Flash comprimir un sonido ya comprimido? Es decir,
si un sonido .wav ha sido comprimido y ahora tiene extensin .mp3, podr Flash
volver a comprimirlo? La respuesta es NO. Flash comprime los sonidos que insertamos
en nuestras pelculas, pero si el sonido resulta estar ya comprimido, no podr volver a
comprimirlo (en realidad si que consigue comprimirlo, pero el sonido final es el mismo
que el inicial).
Ahora que ya sabemos esto, nos falta saber si Flash comprime un archivo .wav ms de
lo que comprime el formato .mp3, para ver bien este aspecto, hemos preparado varios
ejemplos...
Ejemplo:
Contamos con una pelcula con un nico frame que est vaco. Esta pelcula, una vez
lista para ser vista (.swf) ocupa 1KB.
Tenemos 1 sonido .wav que ocupa 1596 KB
Comprimimos dicho sonido con un programa compresor de audio y obtenemos el
mismo sonido en formato .mp3, ocupa 145 KB. (La calidad de sonido es prcticamente
idntica).
Ahora insertamos el sonido .wav en la pelcula original y la exportamos (esto se trata en
el ltimo tema).
Resultado: Una pelcula con sonido (pelcula 1) que ocupa 37KB.
Insertamos despus el sonido .mp3 en la pelcula original.
Resultado: Una pelcula con sonido (pelcula 2) que ocupa 145 KB

Conclusin: La pelcula con un sonido .wav ocupa casi 5 veces menos que la que tiene
el mismo sonido en .mp3, por tanto parece recomendable insertar sonidos .wav (la
compresin de audio que logra Flash es muy grande). Como contrapartida, podra
apreciarse prdida de calidad en el sonido que se escucha en la pelcula 1. Esta prdida
ser importante segn el tipo de sonido que sea. Si es una voz, por ejemplo, deberamos
insertar .mp3 ya que necesariamente deber escucharse bien, si es msica de fondo, es
probable que aunque se pierda calidad, el resultado final sea aceptable y sea conveniente
quedarnos con la pelcula de menor tamao. Lo mejor es probar ambas versiones y
evaluar el resultado.
Puedes ver varias pruebas en estas pelculas:

Msica de Fondo

Pelcula con sonido (msica) en

formato .wav.
Tamao Total: 37 KB.
Calidad: Buena

Pelcula con sonido (msica) en

formato .mp3.
Tamao Total: 145 KB.
Calidad: Buena

Sonido "Voz"

Pelcula con sonido (voz) en formato

.wav.
Tamao Total: 9 KB.
Calidad: Regular

Pelcula con sonido (voz) en .mp3.

Tamao Total: 67KB.
Calidad: Buena

En el primer caso sera recomendable quedarse con la pelcula ms pequea, ya que

ambos sonidos son buenos. En el segundo caso, la segunda pelcula sera ms apropiada,
ya que aunque tenga mayor tamao, la calidad del sonido merece la pena.

Por ltimo, comentar que Flash no puede importar sonidos en formato MIDI (.mid).
An as, si estamos empeados en que en nuestra animacin el sonido sea un MIDI y no
queremos o podemos conseguir un programa que convierta el sonido MIDI a WAV o
MP3 existe una forma de hacerlo consistente en el uso combinado de Flash y Javascript.
Igualmente, como se coment en el Tema 1, Flash CS5 permite cargar sonidos de un
modo dinmico (sin que ocupen espacio), esto se tratar en el Tema 17 "Action Script".

Unidad 5. Sonidos en Flash (V)

5.7. Mp3 o Wav?

Como ya se ha comentado, los sonidos que Flash CS5 puede importar casi cualquier
tipo de sonido, aunque los ms empelados son MP3 y WAV. Si no sabes las diferencias
entre estos tipos de archivos, puedes consultar nuestro tema bsico

Por tanto, cuando queramos aadir un sonido a nuestra pelcula, deberemos decantarnos
por uno de estos 2 formatos. Lo normal es que el sonido que pretendamos insertar ya
est en uno de ellos, pero no debemos olvidar que existen multitud de programas que
convierten un sonido con extensin .mp3 a uno .wav y viceversa, por lo que no debe ser
inconveniente el formato que tenga el sonido en un principio.
La pregunta surge en seguida Cul es mejor?
Esta pregunta es ms importante de lo que parece, ya que si decidimos que nuestra
pelcula tenga sonidos, deberemos asumir una carga muy importante en cuanto a tamao
de la pelcula y en consecuencia en cuanto a tiempo de descarga. Lo habitual es que los
sonidos ocupen ms de la mitad del espacio total y muchas veces no valdr la pena
insertarlos...
Una vez decididos a insertar el sonido, la lgica nos dice que insertemos el sonido que
ocupe un espacio menor en el disco duro, ya que este espacio es el que ocupar en
nuestra pelcula. Esto es una aproximacin, ya que Flash comprime todo aquello que
insertamos en nuestras pelculas.
Como ya sabemos, los sonidos .mp3 ocupan un espacio mucho menor que los
sonidos .wav (10 veces menos o ms), por lo que parece recomendable insertar .mp3 en
lugar de .wav, ahora bien Puede Flash comprimir un sonido ya comprimido? Es decir,
si un sonido .wav ha sido comprimido y ahora tiene extensin .mp3, podr Flash
volver a comprimirlo? La respuesta es NO. Flash comprime los sonidos que insertamos
en nuestras pelculas, pero si el sonido resulta estar ya comprimido, no podr volver a
comprimirlo (en realidad si que consigue comprimirlo, pero el sonido final es el mismo
que el inicial).
Ahora que ya sabemos esto, nos falta saber si Flash comprime un archivo .wav ms de
lo que comprime el formato .mp3, para ver bien este aspecto, hemos preparado varios
ejemplos...
Ejemplo:

Contamos con una pelcula con un nico frame que est vaco. Esta pelcula, una vez
lista para ser vista (.swf) ocupa 1KB.
Tenemos 1 sonido .wav que ocupa 1596 KB
Comprimimos dicho sonido con un programa compresor de audio y obtenemos el
mismo sonido en formato .mp3, ocupa 145 KB. (La calidad de sonido es prcticamente
idntica).
Ahora insertamos el sonido .wav en la pelcula original y la exportamos (esto se trata en
el ltimo tema).
Resultado: Una pelcula con sonido (pelcula 1) que ocupa 37KB.
Insertamos despus el sonido .mp3 en la pelcula original.
Resultado: Una pelcula con sonido (pelcula 2) que ocupa 145 KB
Conclusin: La pelcula con un sonido .wav ocupa casi 5 veces menos que la que tiene
el mismo sonido en .mp3, por tanto parece recomendable insertar sonidos .wav (la
compresin de audio que logra Flash es muy grande). Como contrapartida, podra
apreciarse prdida de calidad en el sonido que se escucha en la pelcula 1. Esta prdida
ser importante segn el tipo de sonido que sea. Si es una voz, por ejemplo, deberamos
insertar .mp3 ya que necesariamente deber escucharse bien, si es msica de fondo, es
probable que aunque se pierda calidad, el resultado final sea aceptable y sea conveniente
quedarnos con la pelcula de menor tamao. Lo mejor es probar ambas versiones y
evaluar el resultado.
Puedes ver varias pruebas en estas pelculas:

Msica de Fondo

Pelcula con sonido (msica) en

formato .wav.
Tamao Total: 37 KB.
Calidad: Buena

Sonido "Voz"

Pelcula con sonido (msica) en

formato .mp3.
Tamao Total: 145 KB.
Calidad: Buena

Pelcula con sonido (voz) en formato

.wav.
Tamao Total: 9 KB.
Calidad: Regular

Pelcula con sonido (voz) en .mp3.

Tamao Total: 67KB.
Calidad: Buena

En el primer caso sera recomendable quedarse con la pelcula ms pequea, ya que

ambos sonidos son buenos. En el segundo caso, la segunda pelcula sera ms apropiada,
ya que aunque tenga mayor tamao, la calidad del sonido merece la pena.

Por ltimo, comentar que Flash no puede importar sonidos en formato MIDI (.mid).
An as, si estamos empeados en que en nuestra animacin el sonido sea un MIDI y no
queremos o podemos conseguir un programa que convierta el sonido MIDI a WAV o
MP3 existe una forma de hacerlo consistente en el uso combinado de Flash y Javascript.
Igualmente, como se coment en el Tema 1, Flash CS5 permite cargar sonidos de un
modo dinmico (sin que ocupen espacio), esto se tratar en el Tema 17 "Action Script".
Unidad 6. Trabajar con objetos (I)

6.1. Los objetos en Flash Qu son?

En los primeros temas vimos las herramientas para dibujar elementos en nuestra
pelcula, obteniendo formas. En este tema profundizaremos en cmo trabajar con estas
formas u objetos, para ajustarlos a nuestras necesidades.

Independientemente de si estamos trabajando en una animacin, en una pgina web, en

un catlogo para un DVD o en cualquier otra cosa, tendremos que trabajar con objetos.
A grandes rasgos, podremos considerar un objeto todo aquello que aparezca en nuestra
pelcula y sea visible, de modo que podamos trabajar con l, por ejemplo, cualquier
imagen que creemos o importemos, un botn, un dibujo creado por nosotros mismos
etc...
Los objetos de dibujo as considerados tienen 2 partes fundamentales:
El Borde: Consiste en una delgada lnea que separa el objeto del exterior, del escenario.
Puede existir o no, segn nos convenga. Cuando creamos un objeto, el borde se crea
siempre y su color ser el indicado en el Color de Trazo (dentro del Panel Mezclador de

Colores). Si queremos dibujar creando Bordes deberemos emplear las Herramientas

Lpiz, Lnea o Pluma y si queremos que nuestro dibujo no tenga borde, bastar con
seleccionar el borde y suprimirlo (ver siguiente punto).
El Relleno: El relleno no es ms que el propio objeto sin borde. Es, por tanto, la parte
interna del objeto. Su existencia tambin es arbitraria, ya que podemos crear un objeto
cuyo color de relleno sea transparente, como ya se vio en el tema de Dibujar, y por
tanto, parecer que dicho objeto no tiene relleno, aunque en realidad s que exista pero
sea de color transparente. Para dibujar Rellenos (sin borde) podemos usar herramientas
tales como el Pincel o el Cubo de Pintura.

6.2. Seleccionar

Para poder trabajar con objetos, es fundamental saber seleccionar la parte del objeto que
queramos modificar (mover, girar, cambiar de color...). Podremos observar que las
partes de un objeto seleccionadas toman una apariencia con textura (entramado de
puntos blancos) para indicar que estn seleccionadas.

Objeto SIN seleccionar

Objeto con el BORDE seleccionado

Objeto con el RELLENO seleccionado

Veamos cmo seleccionar las diferentes partes de un objeto:

Seleccionar un Relleno o un Borde: Basta hacer clic 1 vez en el Relleno o en el Borde

que queramos seleccionar.
Seleccionar el Relleno y el Borde de un objeto: Hacer doble clic en el Relleno.
Seleccionar todos los bordes (o lneas) de un mismo color que estn en contacto: Hacer
doble clic sobre una de las lneas que tenga el color que pretendamos seleccionar.
Seleccionar un Smbolo, un texto, o un grupo: Clic en el Smbolo, en el texto o en el
grupo. Estos tipos de objetos mostrarn un borde de color azul (por defecto, depende de
la capa) al estar seleccionados.
Seleccionar Varios elementos: Mantendremos pulsada la tecla SHIFT (Maysculas)
mientras seleccionamos los objetos que queramos.
Seleccionar los objetos que se encuentran en una determinada zona: Para ello usaremos
la Herramienta Seleccin (flecha). Haremos clic en una parte del escenario y
arrastraremos el cursor hasta delimitar el rea que contenga los objetos que queremos
seleccionar. Si esta rea corta una forma, slo quedar seleccionada la parte del objeto
que est dentro del rea que hemos delimitado. Si quisiramos incluir dicho objeto,
bastara con usar la tecla SHIFT y seleccionar la parte del objeto que falta por
seleccionar.
Este modo de seleccionar objetos permite seleccionar muchos objetos rpidamente,
adems de permitirnos seleccionar determinadas zonas de los objetos, para cortarlas,
pegarlas...
Adems de la Herramienta Seleccionar, tambin podemos usar la Herramienta Lazo,
ms til an si cabe. Nos permite seleccionar cualquier zona de cualquier forma (la
forma la determinamos nosotros) del objeto que sea. Al contrario que la Herramienta
Flecha, las reas seleccionadas no tienen porque ser rectangulares.
Seleccionar a partir de la Lnea de Tiempo: Si seleccionamos un determinado fotograma
en la lnea de tiempo, se seleccionan automticamente todos los objetos que estn en
dicho fotograma. Esto es til para modificar de un modo rpido todos los elementos del
fotograma.
Unidad 6. Trabajar con objetos (II)

6.3. Colocando objetos. Panel Alinear

Ahora que ya sabemos seleccionar los objetos o las partes de estos que consideremos
oportunas, veamos cmo colocarlos en el Escenario.
Para colocarlos de un modo preciso (por no decir exacto), Flash pone a nuestra
disposicin el Panel Alinear. Este Panel lo podemos encontrar en el Men Ventana
Alinear. As funciona:

El Panel Alinear permite colocar los objetos tal y cmo le indiquemos. Antes de ver las
posibilidades, debemos hacer hincapi en la opcin Alinear en escenario. Esta opcin
nos permite decir a Flash que todas las posiciones que indiquemos para nuestros objetos
tomen como referencia el escenario.
Si esta opcin no est seleccionada, los objetos toman como referencia al conjunto de
objetos en el que se encuentran, y se colocan en funcin de ellos. Lo ms habitual es
seleccionar En Escenario, para que los objetos se coloquen segn los lmites de la
pelcula, en el centro del fotograma etc...
Conozcamos un poco mejor el Panel Alinear y sus posibilidades:

Alineamiento:
Sita los objetos en una determinada
posicin del fotograma (si est seleccionado En Escena). Las distintas opciones afectan
a todos los elementos seleccionados y se emplean muy a menudo para situar los objetos
en determinados sitios predefinidos. Por ejemplo: Si quisiramos situar un objeto en la
esquina inferior izquierda, bastara pulsar el primer y el sexto botn consecutivamente.

Por ejemplo, si queremos que coincida el centro de dos objetos los alineamos al centro
horizontal y verticalmente.

Distribuir:
Sita los objetos en el escenario en funcin
de unos ejes imaginarios que pasan por cada uno de ellos, de modo que la distribucin
de los mismos sea uniforme. Por ejemplo, si tenemos 2 cuadrados y pulsamos el primer
botn de la izquierda. Cada uno de los 2 cuadrados se situar en un extremo de la
pelcula (uno arriba y otro abajo).

Coincidir Tamao:
Hace coincidir los tamaos de los objetos. Si est
activo Alinear en escenario estirar los objetos hasta que coincidan con el ancho y el
largo de la pelcula. Si no est activo, la referencia ser el resto de objetos. Por ejemplo,
si tenemos 2 cuadrados distintos y la opcin Alinear en escenario no est activada, al
hacer clic en el primer botn de "Coincidir Tamao", el cuadrado ms estrecho pasar a
tener la anchura del cuadrado ms ancho. Si Alinear en escenario hubiera estado activo
ambos cuadrados hubieran pasado a tener el ancho del fotograma.

Espacio:

Espacia los objetos de un modo uniforme.

Para ver ejemplos de uso de estos comandos, podis ver la animacin situada arriba al
principio del captulo.

Unidad 7. Las capas (II)

7.2. Trabajar con capas

La vista estndar de una capa es la que muestra la imagen. Veamos para qu sirven los
distintos botones y cmo usarlos.

Nueva capa : Como su nombre indica, sirve para Insertar una nueva capa en la escena
actual. Crea capas normales (en el siguiente punto se vern los distintos tipos de capas).
Crear carpeta
capas.

: Nos sirve para crear carpetas, que nos ayudarn a organizar nuestras

Borrar Capa

: Borra la capa seleccionada.

Cambiar Nombre: Para cambiar el nombre a una capa, basta con hacer doble clic en el
nombre actual.
Propiedades de Capa: Si hacemos doble clic sobre el icono
junto al nombre de la
capa, podremos acceder a un panel con las propiedades de la capa en la que hayamos
hecho clic. Podremos modificar todas las opciones que hemos comentado anteriormente
y alguna ms de menor importancia.

Aqu puedes cambiar diferentes opciones sobre la capa, como su nombre o su color.
Tambin puedes bloquearla u ocultarla.
Pero haremos especial hincapi en la opcin Tipo cuyas opciones, Gua y Mscara,
veremos ms adelante en el curso.
Unidad 7. Las capas (IV)

7.5. Tipos de capas

Como habris podido comprobar al ver las propiedades generales de una capa o al hacer
clic con el botn derecho del ratn sobre el icono de una capa cualquiera, existen varios
tipos de capas.

Capas normales : Son las capas por defecto de Flash y tienen todas las propiedades
descritas en los puntos anteriores. Son las ms usadas y se emplean para todo, colocar
objetos, sonidos, acciones, ayudas...
Capas animacin movimiento
interpolacin de movimiento.

: Son las capas que contienen una animacin por

Capas Gua / : Son capas especiales de contenido especfico. Se emplean en las

animaciones de movimiento de objetos y su nico fin es marcar la trayectoria que debe
seguir dicho objeto. Debido a que su misin es representar la trayectoria de un objeto
animado, su contenido suele ser una lnea (recta, curva o con cualquier forma).
En esta imagen podemos ver el contenido de 2 capas. La primera de ellas contiene la
bola azul y la segunda contiene la lnea curva. La segunda capa la hemos definido como
Capa Gua, para que al realizar la animacin de movimiento (esto lo veremos en un
tema posterior) su contenido no se vea en la pelcula, sino que sirva de recorrido para la
bola azul.
Es importante recordar que el contenido de las Capas Gua no se ver en la pelcula
final. Su efecto har que la pelota azul se desplace de un extremo de la lnea al otro
siguiendo esa ruta.

Capas guiadas (Guided Layers) : Definir una capa como gua no tiene sentido hasta
que definamos tambin una capa guiada. Esto es, una capa que quedar afectada por la
gua definida en la Capa gua.
Si no definimos una capa guiada, la capa gua no tendr ningn efecto y si bien no se
ver en la pelcula (por ser una capa gua) tampoco provocar ningn efecto en las
dems capas. En la imagen anterior, la bola azul se deber encontrar en una capa
Guiada, de lo contrario no seguir la ruta marcada por la capa gua.
Las capas gua y las capas guiadas se relacionan entre s de un modo evidente. A cada
capa gua le corresponden una serie de capas guiadas.
Al asociar una capa gua con una capa guiada, el icono que representa a la capa gua
cambia, indicndonos que est realizando correctamente su labor.

En la imagen podemos ver un ejemplo de capa gua y capa guiada correctamente

asociadas entre s. (La capa llamada inferior es, evidentemente, la capa con Gua)

El funcionamiento de las Capas Gua y sus utilidades lo veremos a fondo en el tema de

las Animaciones
Capas Mscara : Estas capas se pueden ver como plantillas que tapan a las capas
enmascaradas (las veremos enseguida). El funcionamiento de estas capas es algo
complejo (tampoco demasiado) y se analizar en temas posteriores.
Basta con decir que estas capas se colocan "encima" de las capas a las que enmascaran y
slo dejan que se vea la parte de stas que tapan los objetos situados en las capas
mscara (son como filtros). Al igual que las capas gua, los objetos existentes en este
tipo de capas tampoco se ven en la pelcula final. S se vern los objetos de su
correspondiente capa enmascarada a los que estn "tapando".
Capas Enmascaradas : Estas capas funcionan conjuntamente con las anteriores, ya
que son las capas que estn bajo las mscaras y a las que afectan. Al igual que las capas
gua y las capas guiadas deben ir asociadas unas a otras para que su efecto sea correcto.
Sus objetos s que son visibles en la pelcula final, pero slo cuando algn objeto de la
capa Mscara est sobre ellos.

Veamos el funcionamiento de estas capas con un ejemplo. En este ejemplo, los

rectngulos azules forman parte de la Capa Enmascarada y por tanto se vern en la
pelcula final (pero slo lo que tape la capa mscara). El valo rojo est situado en la
capa Mscara y no se ver en la pelcula, pero slo se ver lo que l "tape", que es lo
que se ve en la imagen de la derecha. As se emplean las mscaras...

Unidad 8. Smbolos (I)

8.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.

8.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.

Unidad 8. Smbolos (II)

8.3. Las Bibliotecas

En Flash CS5 podemos encontrar dos tipos de bibliotecas, las bibliotecas comunes y de
ejemplos y aquellas asociadas a las pelculas que hemos creado. Todas ellas las tenemos
a nuestra disposicin para utilizar los smbolos que contienen.
Para acceder a las bibliotecas comunes que nos ofrece Flash simplemente tenemos que
ir a al men Ventana Bibliotecas Comunes y seleccionar alguna de las que se nos
ofrecen. Las hay de todo tipo de smbolos: botones, clips o grficos.

Para acceder a la biblioteca de smbolos de la pelcula que estamos creando, de nuevo

vamos a la Barra de Mens, Ventana Biblioteca. En esta biblioteca aparecern todos
los smbolos que hemos creado hasta el momento.
Podemos comprobar como el nuevo smbolo que hemos creado en el ejercicio paso a
paso de la unidad anterior se ha aadido a nuestra biblioteca accediendo a ella como
acabamos de indicar.

Los smbolos contenidos en las bibliotecas estn identificados por su nombre y por un
icono que representa el tipo de smbolo que representan:
Clip

Botn

Grfico

8.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.
A la derecha tenemos un ejemplo de una biblioteca. Cada elemento de la biblioteca es
un smbolo.

Unidad 8. Smbolos (III)

8.5. Modificar una instancia

Hemos visto en el ejercicio anterior que podemos modificar una instancia de un smbolo
sin modificar el smbolo original en cuestin. Sin embargo, al no tratarse de un grfico
vectorial (veremos que significa esto ms adelante), no podemos modificar las
instancias con las herramientas de dibujo de Flash CS5, pero s mediante el Panel de
Propiedades, que permite la manipulacin "externa" de la instancia.
As, este panel, que como hemos visto resulta sumamente til, no nos permite
modificar la estructura bsica de la instancia, pero s otras propiedades, esto es,
podremos hacer que la instancia tenga ms brillo, pero no transformar una estrella en un
crculo).
Esos cambios debemos de hacerlos directamente sobre el smbolo. Aunque s podremos
crear un smbolo a partir de una instancia, lo que desvincular la instancia del smbolo
original.

8.6. 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, y veremos
ms adelante que resulta imprescindible para acceder mediante
ActionScript. 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, aunque pueda seguir manteniendo
su estructura inicial (en la imagen es Botn).

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. Puede parecer simple, pero
durante el desarrollo de un trabajo profesional rpidamente surge la
necesidad de probar situaciones y los diseos grficos definitivos no
suelen estar disponibles hasta bien avanzado el proyecto.
Gracias a esta opcin podemos trabajar tranquilamente con un
"boceto" y sustituirlo de un modo efectivo (el nuevo smbolo hereda
las propiedades del antiguo smbolo, incluido el nombre de instancia,

las acciones que le afectarn, efectos grficos etc...) cuando llegue el

momento.
En la imagen se puede observar el panel Intercambiar Smbolo.

Este panel adems, incorpora el botn Duplicar Smbolo

cuya
funcionalidad es la que nos podemos imaginar. Es muy til cuando
queremos hacer pruebas con un smbolo y no queremos perderlo. Lo
duplicamos y trabajamos tranquilamente con la copia.
Unidad 8. Smbolos (IV)

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:

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 %

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)

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

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 azul por 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.
Unidad 9. Grficos (I)

9.1. Qu es un grfico?
Los Grficos son smbolos que nos permiten representar objetos estticos y animaciones
sencillas.
En caso de que utilicemos un smbolo grfico para realizar una animacin, debemos
tener en cuenta que sta estar ligada a la lnea de tiempo de la pelcula en la que se
encuentre. Es decir, la animacin se reproducir siempre y cuando la pelcula original
tambin se est reproduciendo. Esto hace que, pese a tener su propia lnea de tiempo,
no puedan contener sonidos, controles ni otros smbolos grficos.
As pues, normalmente utilizaremos los grficos para imgenes estticas o para cuando
nos convenga que una animacin se reproduzca slo cuando determinado frame de la
lnea de tiempo de la pelcula est en marcha, ya que para los casos que hemos
comentado anteriormente en los que un grfico no nos es til, Flash nos ofrece otro tipo
de smbolos como veremos en temas posteriores.

9.2. Tipos de grficos

Los grficos pueden ser:

Grfico esttico

a) Estticos: estos grficos se mantienen sin cambios cuando pasa el tiempo. Estos
grficos son los tpicos en los fondos y en los objetos que no desempean ninguna
funcin especial. Su tamao y por tanto, el tiempo de carga de este tipo de grficos,
aunque siempre depender de la resolucin, de sus dimensiones y de la forma en la que
estn creados *, ser en general reducido.

Animacin

b) Animaciones: este tipo de grfico vara su forma, posicin u otras propiedades a

medida que va pasando el tiempo. Puesto que para realizar la animacin se deben usar
varios grficos ms adems del original o bien realizar determinadas acciones que
modifiquen el estado inicial, el tamao de esta clase de grficos, para las mismas
dimensiones y forma de creacin, ser mucho mayor que uno esttico.
Por esto, aunque las animaciones dan a nuestra web un aspecto ms bonito y
espectacular tienen dos inconvenientes:
1) Si se trata de un Mapa de Bits (ahora veremos que significa esto) la web puede llegar
a tener un tamao excesivamente grande.
2) Aunque no se traten de mapas de bits, por ejemplo, si son animaciones tpicas de
Flash, cuyo tamao no es excesivo, el hecho de poner muchas animaciones puede llegar
a "marear" un poco al visitante de nuestro sitio y desviar su atencin de lo que
realmente importa, su contenido.
(*) Los tipos de grfico anteriores pueden ser, a su vez de dos tipos, segn la forma en
la que estn creados: Grfico Vectorial o Mapa de Bits. Para saber ms acerca de estos
dos tipos de grfico, chale un vistazo a nuestro tema bsico

Unidad 9. Grficos (II)

9.3. Creando un grfico y comprobando sus propiedades

Como explicar tericamente las propiedades de un grfico resulta un tanto confuso,
vamos a ver de manera prctica lo que queremos explicar. Vamos a crear un grfico en
Flash y a comprobar las propiedades que hemos comentado en el primer apartado del
tema. Para ello, abre una nueva pelcula Flash (Archivo Nuevo, archivo ActionScript
3).
Ahora tenemos que crear el objeto que queremos convertir en un smbolo Grfico.
Dibujemos, por ejemplo, un valo en cualquier lugar del rea de trabajo con la
herramienta valo
de la barra de herramientas de dibujo y dmosle un color de
relleno que ser lo que despus animemos (Selecciona el fondo del valo y dale el color
azul mediante la herramienta Relleno de color.

).

Ya hemos creado nuestro objeto, vamos a convertirlo en un smbolo grfico lo

recuerdas?
Selecciona el objeto, haz clic derecho sobre el o haz clic en el men modificar y
selecciona Convertir en Smbolo, lo convertimos en un smbolo como ya habamos visto
y dndole el nombre GrficoAnimado y seleccionando el Tipo Grfico:

Ahora vamos a crear la animacin del grfico. Puesto que todava no hemos visto a
fondo las animaciones, la vamos a realizar de una forma que quiz no sera la ms
apropiada la mayora de las veces, pero nos servir muy bien para este ejemplo. Para
ello selecciona nuestro grfico y pulsa el botn derecho del ratn. Se desplegar un
men, en el que seleccionaremos la opcin Edicin para modificar el grfico y acceder a
su lnea de tiempo. Comprueba que ests en la lnea de tiempos del grfico (justo
encima del escenario existe una secuencia que nos indica en qu nivel nos encontramos.
En la imagen inferior, se puede apreciar que nos encontramos en "Escena1 - Grfico
Animado" y, por tanto estamos dentro del grfico (y la lnea de tiempos que vemos es la
del grfico, y no la de la pelcula principal)

Crearemos a continuacin nuevos fotogramas clave seleccionando uno a uno los frames
nmero 2, 3 y 4 y pulsando F6 cuando los seleccionemos.
Pulsa sobre el frame 2 y cmbiale el color de fondo al valo como hicimos antes. Haz lo
mismo en los dos siguientes frames.
Tu lnea de tiempos debera tener este aspecto:

Pulsa donde pone Escena 1 justo encima del escenario y de este modo volveremos al
nivel inicial (Pelcula principal) y podremos ver nuestro grfico "desde fuera".
Ahora ya tenemos completo nuestro grfico animado. Qu crees que suceder si
reproducimos la pelcula? Comprobmoslo pulsando Control + Intro, se visualizar
la pelcula.
Y bien? Nada. Nada en absoluto. El valo sigue tal cual. Por qu? La respuesta est
en las caractersticas de los grficos que habamos explicado: la lnea de tiempos del
grfico va ligada a la de la pelcula.
En este caso la lnea de tiempos de la pelcula tena un solo frame, mientras que la del
grfico tena 4, por tanto, no le hemos dado tiempo al grfico a desarrollar su
animacin; slo ha reproducido un frame, el primero.
Cmo podemos solucionarlo?
Muy sencillo. Basta con recordar lo que hemos comentado, Cierra la ventana del
reproductor de Flash, selecciona el fotograma 5 de la pelcula principal y pulsa F6.
Ahora tenemos 5 fotogramas en la pelcula principal.
Pulsa de nuevo Control + Intro.
El resultado podra ser ste:

Unidad 9. Grficos (II)

9.3. Creando un grfico y comprobando sus propiedades

Como explicar tericamente las propiedades de un grfico resulta un tanto confuso,
vamos a ver de manera prctica lo que queremos explicar. Vamos a crear un grfico en
Flash y a comprobar las propiedades que hemos comentado en el primer apartado del
tema. Para ello, abre una nueva pelcula Flash (Archivo Nuevo, archivo ActionScript
3).
Ahora tenemos que crear el objeto que queremos convertir en un smbolo Grfico.
Dibujemos, por ejemplo, un valo en cualquier lugar del rea de trabajo con la
herramienta valo
de la barra de herramientas de dibujo y dmosle un color de
relleno que ser lo que despus animemos (Selecciona el fondo del valo y dale el color
azul mediante la herramienta Relleno de color.

).

Ya hemos creado nuestro objeto, vamos a convertirlo en un smbolo grfico lo

recuerdas?
Selecciona el objeto, haz clic derecho sobre el o haz clic en el men modificar y
selecciona Convertir en Smbolo, lo convertimos en un smbolo como ya habamos visto
y dndole el nombre GrficoAnimado y seleccionando el Tipo Grfico:

Ahora vamos a crear la animacin del grfico. Puesto que todava no hemos visto a
fondo las animaciones, la vamos a realizar de una forma que quiz no sera la ms
apropiada la mayora de las veces, pero nos servir muy bien para este ejemplo. Para
ello selecciona nuestro grfico y pulsa el botn derecho del ratn. Se desplegar un
men, en el que seleccionaremos la opcin Edicin para modificar el grfico y acceder a
su lnea de tiempo. Comprueba que ests en la lnea de tiempos del grfico (justo
encima del escenario existe una secuencia que nos indica en qu nivel nos encontramos.
En la imagen inferior, se puede apreciar que nos encontramos en "Escena1 - Grfico
Animado" y, por tanto estamos dentro del grfico (y la lnea de tiempos que vemos es la
del grfico, y no la de la pelcula principal)

Crearemos a continuacin nuevos fotogramas clave seleccionando uno a uno los frames
nmero 2, 3 y 4 y pulsando F6 cuando los seleccionemos.
Pulsa sobre el frame 2 y cmbiale el color de fondo al valo como hicimos antes. Haz lo
mismo en los dos siguientes frames.
Tu lnea de tiempos debera tener este aspecto:

Pulsa donde pone Escena 1 justo encima del escenario y de este modo volveremos al
nivel inicial (Pelcula principal) y podremos ver nuestro grfico "desde fuera".
Ahora ya tenemos completo nuestro grfico animado. Qu crees que suceder si
reproducimos la pelcula? Comprobmoslo pulsando Control + Intro, se visualizar
la pelcula.
Y bien? Nada. Nada en absoluto. El valo sigue tal cual. Por qu? La respuesta est
en las caractersticas de los grficos que habamos explicado: la lnea de tiempos del
grfico va ligada a la de la pelcula.
En este caso la lnea de tiempos de la pelcula tena un solo frame, mientras que la del
grfico tena 4, por tanto, no le hemos dado tiempo al grfico a desarrollar su
animacin; slo ha reproducido un frame, el primero.
Cmo podemos solucionarlo?
Muy sencillo. Basta con recordar lo que hemos comentado, Cierra la ventana del
reproductor de Flash, selecciona el fotograma 5 de la pelcula principal y pulsa F6.
Ahora tenemos 5 fotogramas en la pelcula principal.
Pulsa de nuevo Control + Intro.
El resultado podra ser ste:

Unidad 9. Grficos (II)

9.3. Creando un grfico y comprobando sus propiedades

Como explicar tericamente las propiedades de un grfico resulta un tanto confuso,
vamos a ver de manera prctica lo que queremos explicar. Vamos a crear un grfico en
Flash y a comprobar las propiedades que hemos comentado en el primer apartado del
tema. Para ello, abre una nueva pelcula Flash (Archivo Nuevo, archivo ActionScript
3).
Ahora tenemos que crear el objeto que queremos convertir en un smbolo Grfico.
Dibujemos, por ejemplo, un valo en cualquier lugar del rea de trabajo con la
herramienta valo
de la barra de herramientas de dibujo y dmosle un color de
relleno que ser lo que despus animemos (Selecciona el fondo del valo y dale el color
azul mediante la herramienta Relleno de color.

).

Ya hemos creado nuestro objeto, vamos a convertirlo en un smbolo grfico lo

recuerdas?
Selecciona el objeto, haz clic derecho sobre el o haz clic en el men modificar y
selecciona Convertir en Smbolo, lo convertimos en un smbolo como ya habamos visto
y dndole el nombre GrficoAnimado y seleccionando el Tipo Grfico:

Ahora vamos a crear la animacin del grfico. Puesto que todava no hemos visto a
fondo las animaciones, la vamos a realizar de una forma que quiz no sera la ms

apropiada la mayora de las veces, pero nos servir muy bien para este ejemplo. Para
ello selecciona nuestro grfico y pulsa el botn derecho del ratn. Se desplegar un
men, en el que seleccionaremos la opcin Edicin para modificar el grfico y acceder a
su lnea de tiempo. Comprueba que ests en la lnea de tiempos del grfico (justo
encima del escenario existe una secuencia que nos indica en qu nivel nos encontramos.
En la imagen inferior, se puede apreciar que nos encontramos en "Escena1 - Grfico
Animado" y, por tanto estamos dentro del grfico (y la lnea de tiempos que vemos es la
del grfico, y no la de la pelcula principal)

Crearemos a continuacin nuevos fotogramas clave seleccionando uno a uno los frames
nmero 2, 3 y 4 y pulsando F6 cuando los seleccionemos.
Pulsa sobre el frame 2 y cmbiale el color de fondo al valo como hicimos antes. Haz lo
mismo en los dos siguientes frames.
Tu lnea de tiempos debera tener este aspecto:

Pulsa donde pone Escena 1 justo encima del escenario y de este modo volveremos al
nivel inicial (Pelcula principal) y podremos ver nuestro grfico "desde fuera".
Ahora ya tenemos completo nuestro grfico animado. Qu crees que suceder si
reproducimos la pelcula? Comprobmoslo pulsando Control + Intro, se visualizar
la pelcula.
Y bien? Nada. Nada en absoluto. El valo sigue tal cual. Por qu? La respuesta est
en las caractersticas de los grficos que habamos explicado: la lnea de tiempos del
grfico va ligada a la de la pelcula.
En este caso la lnea de tiempos de la pelcula tena un solo frame, mientras que la del
grfico tena 4, por tanto, no le hemos dado tiempo al grfico a desarrollar su
animacin; slo ha reproducido un frame, el primero.
Cmo podemos solucionarlo?

Muy sencillo. Basta con recordar lo que hemos comentado, Cierra la ventana del
reproductor de Flash, selecciona el fotograma 5 de la pelcula principal y pulsa F6.
Ahora tenemos 5 fotogramas en la pelcula principal.
Pulsa de nuevo Control + Intro.
El resultado podra ser ste:

Unidad 9. Grficos (IV)

9.6. Exportar un objeto Flash como mapa de bits

La interfaz de dibujo de Flash, como hemos visto, resulta muy cmoda en determinadas
ocasiones para realizar dibujos. As podra interesarnos utilizar Flash CS5 para crear un
dibujo y despus utilizarlo en otros programas o para cualquier otro uso.
Esto es perfectamente posible con Flash, ya que nos permite exportar un objeto de flash
como un bitmap. Eso s, debemos tener en cuenta, como vimos en el tema bsico, que la
mayora de mapas de bits no permiten animaciones, por esto el objeto flash que
exportemos no debera contener animacin ya que sta no se guardar.
Para realizarlo seleccionamos el objeto que vamos a exportar y accedemos al men
Archivo Exportar Exportar Imagen... Luego introducimos en el campo Nombre el
nombre que queremos que tenga nuestro nuevo bitmap.
Seleccionamos el tipo de mapa de bits en que deseemos convertir nuestro objeto y
pulsamos Guardar.
Ahora ya podemos usar nuestro objeto Flash como un bitmap.
Para entender mejor cmo te aconsejamos realizar el Ejercicio Exportar un objeto
como mapa de bits.

9.7. Publicar como un mapa de bits

Al Exportar como hemos visto en el punto anterior, podemos "sacar" una parte de
nuestra pelcula como un grfico (un smbolo, un fotograma...).
Pero si lo que tenemos ya es una pelcula completa, y queremos generar una imagen a
partir de ella, lo haremos publicndola. Al publicar, generamos un archivo partiendo de
la pelcula creada.
Lo habitual, y que veremos ms adelante, es publicar la pelcula como un archivo Flash
(swf). Pero tambin podemos hacerlo como imgenes.
Para ello, tenemos que acceder a la Configuracin de publicacin, en el men Archivo.

Se abrir un dilogo, en el que lo primero que elegimos es el formato en que lo

queremos publicar, y el nombre de archivo que se le dar.
Por cada formato seleccionado, se aadir una pestaa. Desde cada una, podemos
cambiar las opciones de cada tipo de imagen.

Cuando lo tengamos, basta con pulsar el botn Publicar. En la misma carpeta donde est
el archivo Flash (.fla) se crearan las imgenes.
Unidad 9. Grficos (V)

9.8. Crear un GIF animado con Flash

Como vimos en el tema bsico hay tipos de archivo de mapa de bits que soportan
animaciones, como los GIF. Pues bien, con Flash tambin podemos crear una animacin
y guardarla como un GIF animado. Los fotogramas de la pelcula se convertirn en
fotogramas del GIF.
Para lograrlo, tenemos que publicar la pelcula como GIF, lo cual configuramos desde la
Configuracin de publicacin, en el men Archivo.
Entre los formatos disponibles, marcamos Imagen GIF.

Y configuramos algunos parmetros pulsando en su pestaa:

Entre las opciones concretas del GIF, hay dos que afectan a la animacin:
En Reproduccin, podemos marcar Esttica (por defecto) o Animacin. Debemos de
elegir esta ltima para que el gif sea animado.
Si es grfico es animado, podemos seleccionar cuntas veces se repite dicha animacin.
Entre Reproducir indefinidamente en bucle, o Repetir un nmero determinado de veces.

Unidad 10. Clips de Pelcula (I)

10.1. Qu es un clip de pelcula?

Un Clip de Pelcula, simplemente Clip o MovieClip es una pelcula en s misma, como
cualquiera de las que podamos haber creado hasta el momento en este curso.
Normalmente nos referimos a ellas como clips cuando las incluimos en otra pelcula,

formando un smbolo. Por tanto, cualquier clip siempre podr estar compuesto por otros
clips insertados en l, que a su vez estn formados por otros, etc.
Al igual que los otros tipos de smbolos de Flash, los clips de pelcula tienen su propia
lnea de tiempo. Sin embargo, y a diferencia de los Grficos (como veremos a
continuacin), esta lnea temporal no est ligada a la lnea de tiempo del documento que
lo contiene, de tal forma que su ejecucin es independiente, y en un fotograma de la
pelcula principal se puede estar reproduciendo repetidamente un clip.
Este tipo de smbolos puede contener cualquier otro tipo de smbolo: grfico, clip o
botn, as como cualquier objeto creado con Flash, ya que un clip es realmente una
pelcula.
Otra de las ventajas de los Clips la encontramos cuando realizamos pelculas de gran
complejidad y tamao, en la que intervienen un nmero muy elevado de fotogramas,
debido a que en la vista general del documento, nosotros slo veremos un fotograma por
clip, el cual puede estar compuesto por muchos frames, lo que nos permitir tener una
mejor visin de cmo se desarrolla nuestra animacin, y una lnea de tiempo ms clara y
"limpia"
Los Clips son una de las herramientas que dan mayor potencia a Flash CS5,
permitindonos crear pelculas de gran complejidad y multiplicar los efectos visuales,
ya que se pueden crear mltiples movimientos independientes entre s y crear
conexiones entre los diferentes Clips de un documento.
Todas aquellas cosas que no podamos hacer con un smbolo de tipo Grfico, lo
podemos hacer con un Clip, adems de poder realizar tambin todo aquello que nos
permita dicho smbolo. Por esto, normalmente se utilizan los clips para cualquier tipo
de animacin debido a su gran flexibilidad, dejando los grficos slo para imgenes
estticas.

10.2. Comprobar las propiedades de un Clip

Como hicimos con los grficos, vamos a ver como la lnea de tiempo de un clip no est
ligada a la lnea de tiempo del documento que lo contiene y, a la vez, veremos la
diferencia entre los clips y los smbolos Grficos, que supone una de las razones de la
mayor utilizacin de los primeros en lo que se refiere a la creacin de animaciones.
Para ello abriremos una nueva pelcula Flash (Archivo Nuevo, archivo ActionScript
3). Despus importaremos una imagen cualquiera o bien crearemos una. La convertimos
en Smbolo (botn derecho, Convertir en smbolo...) y seleccionamos en Tipo "Clip de
Pelcula"
Arrastramos al escenario (si no est ya all) nuestro clip de pelcula.
Ahora tenemos nuestro Clip, insertado en nuestro nuevo documento Flash. Es decir,
tenemos dos pelculas, cada una con su lnea de tiempo.
Ahora veamos que son independientes, siguiendo un proceso similar al que utilizamos
con los smbolos de tipo Grfico.
Observa la lnea de tiempo de la pelcula principal y comprueba que slo tiene un
fotograma.

Editemos el Clip que insertamos en el documento, haciendo doble clic sobre l y

examinemos su lnea de tiempos. Aparecer un nico MovieClip. Podemos realizar algo
similar a lo realizado con los grficos. Si cresemos una animacin de movimiento,
como veremos ms adelante, podra quedarnos as:

Como vemos, la duracin del clip que hemos insertado es mucho mayor que la pelcula
nueva que lo contiene. Si el smbolo fuera un grfico ya hemos visto que al reproducir
la pelcula no ocurrira nada, porque slo se reproducira el primer fotograma de su lnea
de tiempo. En cambio, al tratarse de un clip, comienza a reproducirse al pasar por el
primer fotograma, y como la liena de tiempo es independiente, sigue reproducindose
aunque la lnea de tiempo principal haya acabado
Unidad 10. Clips de Pelcula (II)

10.3. Crear un nuevo Clip

Como hemos comentado, utilizaremos normalmente Clips para hacer animaciones.
Aunque no lo hayamos comentado antes, se puede crear un smbolo Flash de la nada,
igual que creamos un nuevo archivo, de forma que se quede en la biblioteca y podamos
editarlo cuando nos convenga. Esto puede ser interesante en los clips, ya que a
diferencia de los grficos, su finalidad suele ser el movimiento y, en animaciones
complejas, en ocasiones se les asignan acciones especiales en las cuales puede que no
sea necesario crearlo en ese momento o convenga dejar el clip vaco.
Por esto, es interesante aprender cmo crear un smbolo, en este caso un clip, de la nada
para despus modificarlo.
Para insertar un clip vaco haz clic en Insertar Nuevo smbolo y se abrir el cuadro
de dilogo de Crear un nuevo smbolo.
All debers darle un Nombre para identificarlo ms tarde en la Biblioteca y seleccionar
la opcin Clip de Pelcula en el desplegable Tipo.
A partir de este momento tendremos un nuevo clip (vaco) al cual podremos acceder
desde nuestra Biblioteca (men Ventana Biblioteca), si hacemos clic derecho sobre l
y seleccionamos Edicin, podremos editarlo y trabajar con l.

Observa cmo hacerlo

Cuando estudiemos las animaciones haremos ejemplos de animaciones mediante clips
de pelcula y veremos el potencial real de este tipo de smbolos.

10.4. Importar y exportar MovieClips de la Biblioteca

Como para todos los smbolos los Clips se almacenan en la biblioteca del documento
cuando son creados. Esto es muy importante en muchos casos ya que habitualmente los
clips son muy reutilizables. Para importar clips de otra pelcula debemos abrir primero
la biblioteca en la que est contenido.
Hemos visto en el tema de Smbolos, tenemos dos tipos de bibliotecas: las que estn
asociadas a documentos u otras pelculas y las que nos proporciona Flash CS5. Pues
bien, no slo podemos utilizar smbolos del mismo documento en el que estamos sino
que podemos importarlos de otros documentos de nuestro disco duro, lo que, en el caso
que nos ocupa, puede resultar de gran utilidad. Obviamente la exportacin mediante
biblioteca se hace automticamente ya que Flash deja los objetos creados en la
biblioteca para que puedan ser reutilizados.
Para importar un Clip de un archivo del disco duro debemos ir al men Archivo
Importar Abrir biblioteca externa..., seleccionar el Archivo Flash (.fla) del que
queremos importar sus smbolos de biblioteca y pulsar Abrir.

Aparecer la biblioteca con la lista de los smbolos correspondientes a los grficos,

botones y clips del documento en cuestin.
Es importante destacar que cuando insertemos un clip de una biblioteca, se insertarn a
su vez todos los smbolos que contenga, incluidos los clips.

Existe otra forma mucho ms cmoda: si tenemos dos documentos abiertos, podemos
arrastrar los elementos directamente de un escenario a otro
Unidad 11. Botones (I)

11.1. Qu es un botn?
Los smbolos de tipo Botn son los que aportan la mayor parte de la interactividad de
las pelculas Flash con aquel que las est visualizando. Un botn, en Flash, es igual que
un botn de cualquier entorno informtico, sea web o cualquier otro.
Son elementos que se prestan a que el usuario los presione, desencadenando al hacerlo
una serie de acciones. Tambin es habitual ver cmo este tipo de elementos reaccionan
cuando se les pasa el ratn por encima o cuando estn pulsados.
La interfaz de Flash est diseada de manera especial para la creacin de botones, lo
que nos permite crear todos estos efectos de una manera muy sencilla.
Al igual que los otros smbolos de Flash CS5, los botones tienen su propia lnea de
tiempo. Esta es independiente pero, sin embargo, est formada nicamente por cuatro
fotogramas, uno para cada estado posible del botn:

Reposo. Aspecto por defecto del botn, es decir, cuando el puntero

del ratn no est situado sobre l.

Sobre. Aspecto del botn cuando situamos el puntero sobre l.

Presionado. Apariencia que deseamos tenga nuestro botn mientras

lo mantengamos pulsado.

Zona activa. Aqu debemos indicar el rea real en la que queremos

que acte nuestro botn. Esto es importante sobre todo en botones
compuestos slo por texto como veremos ms adelante.

Parece que la limitacin de fotogramas podra implicar una limitacin en la capacidad

de espectacularidad y utilidad de estos smbolos, pero no es as. Ten en cuenta que
podemos tener todas las capas que queramos.

Los botones pueden contener a su vez otros smbolos, como clips o grficos (tambin de
tipo Bitmap). La unin de las posibilidades de todos los smbolos pueden dotar a los
botones de efectos asombrosos.
Todo esto es lo referente a la apariencia del botn. Despus, tenemos que programar lo
que queremos que haga el botn, cmo queremos que afecte a la pelcula. Y esto lo
haremos con ActionScript.

11.2. Creacin de un botn

En la creacin de un botn podemos considerar dos fases. En la primera vamos a
convertir nuestro objeto a smbolo de tipo botn y posteriormente veremos cmo
completarlo internamente, lo que nos ayudar a entender mejor dicha estructura.
Comenzamos creando el objeto que representar el aspecto por defecto de nuestro botn
con las herramientas que nos ofrece Flash CS5. Recuerda que puedes usar varias capas.
Seleccionaremos el objeto y accederemos al men Insertar Convertir en Smbolo, le
daremos el Tipo Botn y asignaremos un nombre a nuestro nuevo smbolo.

De esta forma ya tenemos transformado el objeto para que se comporte como un botn.
Ahora lo completaremos internamente.
Para determinar cmo debe reaccionar el botn en funcin de las acciones del ratn, lo
editaremos haciendo clic con el botn derecho del ratn sobre nuestro nuevo botn y
seleccionando la opcin Editar.
Cuando tengamos delante la lnea de tiempo del botn (observa que tiene el aspecto que
hemos mostrado anteriormente), seleccionaremos cada uno de los frames (sobre, reposo,
presionado y zona activa) y pulsaremos F6 para crear un fotograma clave en cada uno
de ellos.

Ahora ya podemos modificar el aspecto inicial del botn para cada posicin del cursor y
marcar el rea de accin del botn (fotograma Hit) en la que simplemente podremos
dejar la misma figura que la inicial (en este caso slo es importante la forma del objeto,
no los colores u otras cosas) o bien dibujar con las herramientas de dibujos de Flash una
nueva figura, en cuya superficie "se sentir aludido" nuestro botn.

Aqu podemos ver una muestra de creacin de un botn lo ms simple posible

Como resultado obtenemos el botn que continuacin mostramos.

ste es un botn muy bsico, pero como veremos se pueden complicar mucho. Para
empezar nos servir con ste. Observa como cambian los estados de reposo (rojo
plido), sobre (rojo) y pulsado (azul).
Si una vez creado el botn queremos observar sus distintos estados y todava no hemos
terminado la pelcula entera y por tanto no deseamos tener que reproducirla toda
podemos hacerlo a travs del men Control Habilitar botones simples. As podremos
interactuar con el botn hasta que desactivemos esta opcin.

11.3. Formas en los botones

Los botones son smbolos que pueden tener multitud de formas. Si bien lo ms habitual
es ver botones rectangulares, cuadrados y circulares, cuya creacin es inmediata como
vimos en el punto anterior, tambin hay otros muchos tipos de botones que, pese a ser
menos utilizados, es muy habitual verlos en multitud de pginas web.
Entre estos estn los creados mediante formas poligonales, aquellos que estn formados
por texto nicamente, dibujos con diferentes motivos, etc. Es interesante su uso para dar
ms vistosidad ya que algunos resultan ms expresivos, y en esto Flash nos ayuda
mucho, debido a la relativa sencillez de creacin de botones que sus herramientas de
dibujo nos ofrece.
Hay varias formas de botn tambin muy extendidas, como el botn con relieve sencillo
o los botones en forma de pldora. Puesto que existen muchas formas de conseguir estos
efectos, a continuacin tienes un ejercicio paso a paso que muestra una forma de
conseguir el relieve en un botn rectangular.

11.4. Incluir un clip en un botn

La inclusin de clips de pelcula en los botones puede dotar a stos de ms vistosidad.
Es habitual colocar un clip en el fotograma Sobre para indicar algn tipo de informacin
extra o una animacin para ir ms all de un cambio de color.
Tambin es comn ver un clip de pelcula actuando como un botn. Esto caso se puede
hacer por ejemplo poniendo el clip en el fotograma Reposo.
Veamos por ejemplo el botn siguiente:
Comprueba todos los estados del ratn. Por lo que nos dice el botn podemos intuir que
empieza algo, pero quiz no tengamos claro qu. Ayudara a la navegacin que al
ponernos sobre el cursor, el texto cambie para darnos informacin extra. Por ejemplo:
Lo nico que hemos cambiado es que tenemos el texto como un movie clip, en cuando
el cursor est encima, lo cambiamos por otro con la informacin.
O podemos usar los clips para animar elementos dle botn, como en el siguiente
ejemplo:

Incluir un Clip en un botn es muy sencillo. Tomando este ejemplo, y partiendo de que
tenemos los dos textos como clips en la biblioteca, slo tendremos que:
- Hacer doble clic sobre el botn para entrar en su modo de edicin.
- Seleccionamos el estado Sobre para modificarlo. Selecciona la instancia del texto.
Ahora tenemos dos opciones:
- Pulsa la tecla SUPRIMIR para eliminarlo.
- Desde la Biblioteca (men Ventana Biblioteca) arrastramos el clip con el nuevo
texto, para crear una instancia.
O la opcin ms prctica:
- En las propiedades de la instancia, pulsamos Intercambiar... y elegimos el nuevo
objeto de texto.

- Por ltimo, centramos el nuevo texto en el botn, si es necesario.

Ya esta listo, ahora cuando pases el ratn sobre el botn el clip de pelcula empezar a
reproducirse.

Por supuesto, en vez de cambiar el texto podemos aadir otros clips, que simulen
movimientos, reflejos, etc.

11.5. Bitmaps y botones

Adems de clips, los botones tambin pueden contener smbolos de tipo Grfico.
Puesto que, como ya hemos visto, todo lo que se puede hacer con un grfico se puede
hacer con un clip, vamos a centrarnos en los Bitmaps que Flash nos permite importar, ya
que estn muy extendidos como forma de expresin grfica a lo largo y ancho de la
Red.
Si consideramos las limitaciones que ya conocemos sobre los mapas de bits puede
parecer poco interesante hacer uso de ellos en la creacin de botones, pero no es as.
Bsicamente podemos hacer dos cosas:
1) Incluir en cada uno de los fotogramas del botn un bitmap distinto, obteniendo un
efecto como el que se consigue con lenguajes como javascript o CSS.
2) Aprovechar las propiedades de los Grficos en Flash. Para esto, deberamos importar
primero el Bitmap y despus convertirlo a smbolo botn. Posteriormente lo editaramos
y, despus de insertar cada fotograma clave, convertiramos su contenido a smbolo
Grfico. Una vez hecho esto, variando los efectos de las instancias en Flash (Alfa, Tinta,
Brillo) podremos conseguir efectos bastante buenos.
He aqu una pequea muestra en la que slo hemos utilizado un Bitmap de tipo GIF,
sacado de la Red y lo hemos convertido en un botn grfico aplicndole un efecto Alfa
(Transparencia) al estado de reposo, lo que da la sensacin de estar apagado (tambin
podramos haber aplicado brillo). En el fotograma Sobre hemos dejado el GIF original
para que al pasar sobre el botn de la sensacin de encenderse. Finalmente le hemos
aumentado la cantidad de rojo en el fotograma Presionado para que parezca estar
incandescente.

11.6. Acciones en los botones

Puesto que existen multitud de acciones que se pueden aplicar tanto a los botones, como
a otros elementos de Flash CS5 vamos a comentar dos de las ms comunes.

Nota: Al crear un archivo, habrs visto que podemos elegir distintas versiones de
ActionScript (3.0 o 2.0). Esto se refiere al lenguaje de programacin que podemos
empelar en Flash y que lo convierte en una herramienta realmente potente. En las
versiones 1 y 2, se podan agregar comportamientos directamente en las propiedades de
los botones. Pero nosotros venimos empleando las versin 3.0 a lo largo del curso, por
ser la ms actual y potente. Esta versin nos obliga a escribir el cdigo ActionScript.
Veremos cosas bsicas, y entraremos un poco ms en ActionScript a partir del tema 16.
Comenzamos por crear o aadir nuestro botn, y asignarle un nombre de instancia. El
nombre que le demos es muy importante, porque nos permitir acceder a l desde el
cdigo.
Aunque podemos escribir el cdigo en la misma capa, recomendamos crear una capa
exclusivamente para el cdigo, por tenerlo todo mejor organizado.
Ahora, abrimos en el panel Acciones (men Ventana Acciones). Se mostrar un rea
en blanco en la que podemos escribir:

Este panel, en el rea blanca de la derecha, nos permite escribir o editar acciones
directamente. De momento no profundizaremos en esto, y ta lo haremos en el tema
correspondiente.
Tambin encontramos la ventana Fragmentos de cdigo. Desde ella, podemos generar
breves instrucciones de cdigo para el smbolo seleccionado, lo que la mayora de veces
nos facilitar la tarea, ya que se trata de las opciones ms repetidas.

Sin entrar en detalle de qu es cada palabra, pues esto ya lo veremos, este es el aspecto
general del cdigo asociado a un botn:
?
1miBoton.addEventListener(MouseEvent.CLICK, accionesMiBoton);
2
3function accionesMiBoton(event:MouseEvent):void
4{
5

//acciones

6}

Donde miBoton ser el nombre de la instancia del botn.

A esta instancia, le indicamos que queremos que reaccione al clic del ratn
(MouseEvent.CLICK), ejecutando las acciones llamadas accionesMiBoton (podemos
darle el nombre que queremos).
accionesMiBoton contiene las acciones a realizar, y podemos verlo a continuacin. Solo
habra que cambiar el texto //acciones por las acciones a realizar.
Si tenemos varios botones, a cada uno lo referiremos por su nombre de instancia que es
nico. Tambin tenemos que dar un nombre nico a accionesMiBoton para cada uno, a
no ser que queramos que realicen la misma accin.

Ahora veamos algunas de las acciones ms comunes.

1) Abrir una pgina web. Con esto conseguiremos abrir una pgina cualquiera de
internet (o una pelcula Flash), lo que nos servir para irnos desplazando por webs que
contengan ms de una pgina, o permitir al usuario descargarse archivos entre otras
cosas.
La forma ms sencilla de hacerlo es seleccionar el botn que queramos usar (en el
siguiente ejemplo, hemos llamado a la instancia btnVisitarAulaclic) y buscar la accin
que queremos en el panel Fragmentos de cdigo. En la carpeta Acciones hacemos doble
clic sobre Hacer clic para ir a pgina Web. Se generar un cdigo como el siguiente:
?
1
2

/* Hacer clic para ir a pgina Web

3 Al hacer clic en la instancia del smbolo especificado, la direccin

4

URL se carga en una nueva ventana del navegador.

5
6
7
8

Instrucciones:
1. Reemplace http://www.adobe.com por la direccin URL que desee.
Conserve las comillas ("").
*/

9
1
btnVisitarAulaclic.addEventListener(MouseEvent.CLICK,
0
fl_ClickToGoToWebPage);

1
1
function fl_ClickToGoToWebPage(event:MouseEvent):void

1
2{
1
3

navigateToURL(new URLRequest("http://www.adobe.com"), "_blank");

}

1
4

Lo primero que encontramos en el cdigo generado son comentarios. Este cdigo,

normalmente en gris claro, no se ejecuta como tal, y solo sirve para indicar cosas al
usuario. En este caso, nos da explicaciones de cmo usar el cdigo generado.

Lo nico que hemos de hacer es reemplazar la url de ejemplo (www.adobe.com) por la

de la pgina a la que queramos que nos enve el botn.
La instruccin en ActionScript que nos permite hacerlo es navigateToURL(new
URLRequest("http://www.mipagina.es"), "_blank");. "http://www.mipagina.es"
se refiere a la pgina que queremos abrir, y "_blank" indica que se abrir en una pgina
nueva.
2) Controlar una pelcula en curso. Si estamos reproduciendo una pelcula Flash y
queremos permitir que el usuario la detenga, la ponga en marcha, avance, retroceda...
Para ello podemos emplear las acciones:

stop(); para detener.

play(); para reproducir.

gotoAndPlay(numeroFotograma); para ir a un fotograma determinado.

Por ejemplo, podemos tener el botn btnPausar para parar la pelcula y el botn
btnContinuar para reproducir. Nos ser ms cmodo si usamos el panel Fragmentos de
cdigo para generar el evento Clic del botn (carpeta Controladores de eventos
evento MouseClick). En el cdigo generado, reemplazamos el cdigo personalizado por
nuestras funciones:
?
1
2
3

btnPausar.addEventListener(MouseEvent.CLICK, fl_PausarReproduccion);
function fl_PausarReproduccion(event:MouseEvent):void
{

4
5

stop();
}

6
7
8
9
1
0

btnContinuar.addEventListener(MouseEvent.CLICK,
fl_ContinuarReproduccion);
function fl_ContinuarReproduccion(event:MouseEvent):void
{

1}
1

play();

Tal cual lo hemos puesto, afectara a la pelcula principal. Si lo que queremos parar o
reproducir es un clip determinado, habra que escribirlo delante de la accin, separado
por un punto. Por ejemplo miClip.stop();.

Reconocemos que aunque ActionScript 3.0 es ms potente que la versin 2.0, puede
resultar mas liosa para usuarios sin conocimientos previos. Si quieres ver cmo seran
estos mismos ejemplos en ActionScript 2, te invitamos a echar un vistazo a esta pgina
de nuestro curso de Flash CS3.
En este videotutorial de introduccin a ActionScript 3 puedes ver cmo empezar a poner
cdigo en un botn.

11.7. Incluir sonido en un botn

Si nuestras pginas van a tener sonido, el sonido en los botones es una parte
fundamental. Podemos hacer, por ejemplo que se activen sonidos al pulsar un botn.
Para ello, simplemente debemos editar nuestro botn y seleccionar el fotograma
Presionado, e insertar el sonido. Como vimos en el tema correspondiente. Es este caso,
el tipo de sincronizacin ms conveniente suele ser Evento.
Por ejemplo podramos importar uno desde nuestro disco duro o bien tomar alguno que
ya tengamos en la biblioteca.
El resultado podra ser algo as:

Ejercicios paso a paso

UNIDAD 2 UTILIZAR LA CUADRICULA

Objetivo
Crear una cuadrcula que quedar visible al fondo del fotograma (posteriormente no
saldr en la pelcula) y que nos servir como gua para poder dibujar objetos de forma
exacta y precisa.

Ejercicio paso a paso.

1. Pulsa en el men Archivo.
2. Selecciona la opcin Nuevo.
3. Elige ActionScript 3.0.
4. Aparecer una nueva pelcula. Si deseas crear la cuadrcula sobre una
pelcula ya empezada, sltate los 2 primeros pasos.
5. Selecciona la opcin Cuadrcula del men Ver.
6. Se desplegar un submen como el de la figura.
7. Selecciona la opcin Mostrar Cuadrcula para hacerlo visible.

8. Selecciona la opcin Editar Cuadrcula para ajustar los parmetros de

la cuadrcula a tu gusto (tamao, color de fondo...)
9. Selecciona la opcin Ajuste Ajustar a Cuadrcula del men Ver para
que los objetos que crees se acomoden a las lneas de la cuadrcula,
consiguiendo alinearlos de un modo fcil.

UNIDAD 2 CAMBIAR LAS DIMENSIONES DE LA PELICULA

Objetivo.
Practicar cmo se pueden cambiar algunos atributos fundamentales de las pelculas.

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.

UNIDAD 2 ACCEDIENDO A PANELES

Objetivo
Abrir los Panel de Muestras y seleccionar una muestra de color.
1. Pulsa en el men Ventana.
2. Selecciona la opcin Muestras, si ya tuviera una seal junto al nombre del Panel,
significa que ya est abierto. Si no, haz clic sobre l.

3. Ahora selecciona el color verde de dicho panel, observa que al acercar el cursor,
ste tomar la forma de la herramienta cuentagotas (que serva para seleccionar
un color).
4. Todo lo que dibujemos de ahora en adelante, ser de color verde (podemos usar
este mecanismo para cambiar el color de relleno o el color del trazo).

Ejercicio paso a paso

UNIDAD 3 CREAR UN OVALO

Objetivo.
Crear una valo con las medidas y la forma que queramos

Ejercicio paso a paso.

1. Pulsa sobre la Herramienta valo
que se encuentra en la Barra de
Herramientas. Puede que en vez del valo encuentres otra
herramienta de su grupo, como el Rectngulo. Si es as, mantn el
cursor pulsado durante unos segundos sobre ella para que se
despliegue el men.
2. Sita el cursor del ratn en el Escenario (dentro del fotograma
actual).
3. Haz clic y arrastra el ratn hacia el lugar que desees. Observars que
el movimiento de tu ratn provoca la creacin de un valo (figura 1).
Cuando el valo tenga la forma deseada, suelta el ratn. El resultado
ser similar al de la figura 2.

Figura 1

Figura 2

4. Guarda el archivo como trabajo.fla. Lo volveremos a utilizar ms

adelante.

Truco: Si quieres crear un crculo perfecto, mantn pulsada la tecla SHIFT mientras das
forma al valo. (Sucede igual con la Herramienta Rectngulo)
UNIDAD 3 CREAR TRANSPARENCIAS

Objetivo
Crear un objeto cuyo color sea parcialmente transparente, de modo que se vean los
objetos de detrs.

Ejercicio paso a paso.

En este ejercicio utilizamos un archivo que encontrars en la carpeta de ejecicios del
curso. Si an no tienes estos archivos, puedes descargarlos gratuitamente desde aulaClic
registrndote como usuario.
1. Abre el archivo transparencia.fla que encontrars en la carpeta de
ejercicios.
2. Selecciona el relleno del Rectngulo.
3. Haz clic sobre el color de relleno en la Barra de herramientas. Se
mostrar el panel para cambiar el color.

4. En la parte superior del panel encontrars el control de transparencia

Alfa. Haz clic sobre l y arrastra hacia la izquierda hasta que el valor
baje a 45% (por ejemplo).

Rectngulo Azul

Ahora con Transparencia

El efecto alfa trabaja de forma que si situamos cualquier objeto o imagen detrs de l,
podemos ver como un efecto de transparencia que mostrar parte de lo que se encuentre
detrs de nuestro relleno.

UNIDAD 3 COLOREAR UN OVALO

Objetivo
Dar color a un elemento simple. Tanto a su interior como a su exterior

Ejercicio paso a paso

1. Abre el archivo que creamos en el primer ejercicio de la unidad,
trabajo.fla.
2. Hacemos clic en el interior del valo o en su borde. Depender de la
zona cuyo color queramos modificar.
Obtendremos algo similar a la figura 1 o a la 2.

Seleccionamos el Interior del valo

Seleccionamos el Borde del valo

3. Una vez hecho esto, nos fijamos en el Panel de Muestras, que se

encuentra en el lateral derecho del rea de herramientas y
seleccionamos el color que nos guste.
Para modificar el color del interior del valo tambin podemos
seleccionar un color directamente haciendo clic sobre el Panel de
Colores existente en el Panel de herramientas junto a la imagen del
"Bote de Pintura". O si deseamos modificar el borde, sobre el Panel
existente junto al "Lpiz".

UNIDAD 4 PROPIEDADES DEL TEXTO

Objetivo.
Crear un texto cualquiera y asignarle las propiedades que ms nos interesen.

Ejercicio paso a paso.

1. Abre el archivo trabajo.fla, creado en la unidad anterior.
2. Creamos una nueva capa (ya veremos ms adelante para que sirven)
haciendo clic en el botn en la lnea de tiempo.
3. 3 Hacemos clic en la Herramienta Texto y despus en el escenario.

4. Veremos esta imagen

prueba.

. Escribe dentro el texto Esto es un texto de

5. Hacemos clic en el Propiedades, si es que tenamos minimizado este

Panel.
6. Haz que el texto se encuentre centrado haciendo clic en
7. Cambia la fuente del texto a Verdana seleccionndola en el
desplegable Familia.
.
8. Cambia el espaciado entre caracteres del texto a 2 escribindolo en la
opcin Espaciado.
9. Por ltimo cambia el tamao del texto a 30 y ponlo en Negrita
utilizando los controles de Tamao y Estilo.

Tweet

UNIDAD 5 SONIDO EN FLASH

Ejercicio 1: Importar Sonidos

1. Crea una pelcula con 1 fotograma.
2. Localiza el archivo sonido.mp3 en la carpeta de ejercicios.
3. Imprtalo a tu pelcula.
4. Comprueba que est disponible en la Biblioteca.
5. Inserta el sonido importado en el fotograma 1.
6. Comprueba que funciona (que el sonido puede escucharse). Para ello,
pulsa CTRL+ ENTER (Esta combinacin de teclas te permite "probar"
la pelcula).
7. Consigue que el sonido deje de escucharse al llegar la pelcula al
fotograma 5.
8. Consigue que vuelva a escucharse en el fotograma 10, y se
reproduzca todo el sonido.

Ejercicio 2: Editar Sonidos

1. Modifica el sonido (usando Flash) de modo que en un principio no se
oiga, y poco a poco vaya aumentando de volumen.
2. Modifica el sonido de modo que al final del mismo, parezca que el
sonido pasa de un altavoz al otro.

Si no tienes muy claro cmo realizarlo, Aqu te ayudamos.

UNIDAD 6 ALINEAR OBJETOS

Objetivo
Crear un texto cualquiera y asignarle las propiedades que ms nos interesen.

Ejercicio paso a paso

1. Abre un archivo nuevo.
2. Dibuja 4 rectngulos de diferentes colores situados en diferentes
puntos del escenario.
3. Haz clic en la herramienta Seleccin.
4. Vamos a seleccionar todos los elementos que se encuentran en el
escenario, para ello hacemos clic en la esquina superior izquierda y
sin soltar el botn del ratn arrastramos hasta la esquina inferior
derecha y soltamos (asegrate de que todos los elementos se
encuentran en el rea de seleccin).
5. Abrimos el panel de Alineacin, esta vez lo haremos pulsando la
combinacin de teclas CTRL + K (aunque tambin podras abrirlo
desde el men Ventana).
6. Marca la opcin Alinear en escenario.
7. Alineamos todos los objetos a la derecha del escenario haciendo clic
en
.
Observa como todos los objetos se han movido para tener su borde
derecho pegado al borde derecho del escenario.
8. Alineamos todos los objeto (an seleccionados) a la izquierda del
escenario haciendo clic en
.
Fjate que los objetos ahora se han movido al lado contrario.
Alinendose su borde izquierdo con el borde izquierdo del escenario.

UNIDAD 7 MOVER OBJETOS ENTRE CAPAS

Objetivo
Mover un objeto situado en una capa a otra

Ejercicio paso a paso

1. Abre el archivo trabajo.fla, con el que venimos trabajando en los
ltimos temas.
2. Seleccionamos la Capa donde est el rectngulo que queremos
cambiar de capa.
3. Hacemos doble clic en el rectngulo para seleccionarlo en su
totalidad (relleno y borde).
4. Pulsamos el botn derecho del ratn. Se abrir un men como el de la
imagen.

5. Seleccionamos Cortar. El rectngulo desaparecer.

6. Seleccionamos el fotograma en el que queramos colocar el objeto
(situado en la capa donde se encuentra el texto que creamos en
ejercicios anteriores).
7. Hacemos clic con el botn derecho sobre el escenario de este
fotograma de destino.

8. Hacemos clic en Pegar para colocar el objeto en este fotograma o

hacemos clic en Pegar in Situ para pegar el objeto en la misma
posicin en la que estaba al cortarlo

UNIDAD 8 CREAR UN SMBOLO

Objetivo
Crear un smbolo de grfico que nos permitir coger destreza en una accin que ser
bsica en la creacin de animaciones.

Ejercicio paso a paso

1. Abre el archivo trabajo.fla con el que venimos probando cosas a lo
largo del curso.
2. Seleccionamos el valo haciendo doble clic sobre l.
3. Abrimos el men Insertar Nuevo Smbolo... de la barra de mens.
Se desplegar una ventana como la de la figura.

4. En el campo Nombre introducimos el nombre de nuestro grfico, por

ejemplo "Mi Primer Smbolo".
5. Seleccionamos la opcin Grfico en el apartado Tipo. Con esto le
decimos a Flash que el nuevo smbolo ser un grfico.
6. Pulsamos Aceptar y ya tenemos nuestro primer smbolo grfico
creado.

UNIDAD 8 MODIFICAR UNA INSTANCIA

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.
Por tanto podemos seguir insertando y modificando ese smbolo y cualquier otro en esta
u otra pelcula ya que estaremos insertando instancias.
UNIDAD 9 EXPORTAR UN OBJETO CON MAPA BITS

Objetivo
Exportar un objeto Flash como un grfico de tipo mapa de bits. En este caso, lo
exportaremos como JPG.

Ejercicio paso a paso

1 Abre el archivo trabajo.fla y selecciona el rectngulo que vamos a exportar.
2 Vamos al men Archivo Exportar Exportar Imagen...
Ahora estaremos delante de una ventana similar a la que se muestra abajo.

3 Buscamos en la pestaa Guardar en la carpeta en la que quieras guardar el archivo.

4 En el apartado Nombre de Archivo introducimos el nombre que queramos que tenga
nuestra nueva imagen.
5 Abrimos la pestaa de Tipos de archivo.
6 Buscamos entre todos los tipos el formato JPG o JPEG.
7 Pulsamos Guardar.

Y ya est exportado. Para comprobarlo accede a la carpeta en la que lo guardaste y vers

un archivo con el nombre que le diste y la extensin .jpg
UNIDAD 10 CLIP DE PELICULA

Ejercicio 1: Crear un Clip a modo de Cuenta Atrs

1. Crea una pelcula con slo 1 fotograma.

2. Escribe un nmero cualquiera, por ejemplo un 3.

3. Convirtelo a smbolo de tipo Clip.
4. Crea una animacin fotograma a fotograma en la que se vea una
cuenta atrs hasta el cero.
5. Comprueba que pese a tener la pelcula original un frame y el clip
cinco, la animacin se ve completamente.
6. Gurdalo como cuenta.fla

Ejercicio 2: Crear un clip vaco y editarlo despus

1. Crea una nueva pelcula.
2. Crea un nuevo smbolo de tipo Movie Clip vaco.
3. Sal a la lnea de tiempo principal.
4. Vuelve a editar el smbolo.

Ejercicio 3: Exportar una pelcula con proteccin

1. Partimos del Clip del ejercicio 1, brelo.
2. Exporta la pelcula swf de forma que nadie la pueda importar
despus.

UNIDAD 11 CREAR UN BOTON CON RELIEVE

Objetivo
Crear un botn con efecto relieve de forma rectangular tipo formulario de manera rpida
y sencilla.

Ejercicio paso a paso.

1. Dibujamos un rectngulo en el rea de trabajo.
2. Seleccionamos el fondo.
3. Cambiamos el color de fondo del rectngulo. Por ejemplo a gris.

4. Con la herramienta texto escribimos el texto aulaClic en el interior del

rectngulo.

Ahora que ya tenemos el molde, vamos a crear un sencillo efecto de

relieve.
5. Seleccionamos los bordes izquierda y superior.
6. Modificamos el color de dichos bordes. Le damos el color blanco.
7. Seleccionamos ahora el borde inferior y aplicamos un color gris
oscuro.
Ya va tomando relieve, ahora vamos a crear los diferentes estados.
8. Seleccionamos el botn.
9. Hacemos clic derecho sobre l y elegimos Convertir en smbolo...
10.Marcamos el Tipo botn y le damos un nombre. Pulsamos Aceptar.
11.Hacemos doble clic sobre el botn para editarlo.
12.Mediante F6 creamos fotogramas clave en cada uno de los
fotogramas correspondientes a los estados del botn.
13.Seleccionamos el fotograma Presionado.
14.Modifiquemos ahora el borde inferior y el derecho del botn
aplicndole el color blanco.
15.Finalmente seleccionemos los bordes superior e izquierdo y dmosle
el color negro.

Respecto a los fotogramas Sobre y Zona activa, los dejaremos tal y como estn
puesto que no deseamos que haga nada mientras no pulsemos el botn y el rea de
accin es la que comprende nuestro rectngulo.

El resultado obtenido es el siguiente. Podemos pinchar sobre l y comprobar el efecto.