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?

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

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.

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 multi-idioma 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

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

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

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

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

PanelMezclador

de

Colores (que

coincide

con

el

subpanel Colores que hay en la Barra de Herramientas.)

Herramienta Cuentagotas:
posteriormente

podamos

Su

utilizarlos.

misin
Para

es

ver

"capturar"
cmo

colores

funciona,

para

que

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:
ms rectilneos.

3.5. El panel Color

Convierte los trazos rectos en lneas menos rgidas.

Realiza la labor inversa. Convierte los trazos redondeados en

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

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

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 PanelPropiedades 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:

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

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

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 propiedad que nos
permite leer su contenido mediante ActionScript. Cuando comencemos a trabajar con
ActionScript veremos que esto, es una tarea muy sencilla.

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

Utilizar sonidos externos. Podemos insertar en una pelcula de Flash sonidos que
tengamos en formato digital: grabados por nosotros mismos, descargados de internet,
etc...Pero para que est disponible en nuestra pelcula y podamos usarlo, antes debemos
de importarlo.
Realmente debemos de importar a flash cualquier archivo externo que queramos usar:
sonidos, grficos, e incluso con otras pelculas Flash. Importar por tanto, no es ms que
decirle a Flash que aada un determinado archivo a nuestra pelcula, para que podamos
usarlo cuando queramos. En realidad, lo aade a nuestra Biblioteca, que es el Panel en
el que estn todos los objetos que participan en la pelcula (este panel se ver ms
adelante).
As pues si queremos manejar un sonido en nuestra pelcula, deberemos importarlo
previamente.
Una vez est importado, podremos usarlo con total libertad.
Para importar un sonido haz clic en el men Archivo Importar Importar a
biblioteca.

Se abrir el cuadro de dilogo de Importar a biblioteca. All debers seleccionar

en Tipo de archivo Todos los formatos de sonido.
Navega por las carpetas hasta encontrar el archivo de audio que quieras incluir en tu
pelcula. Seleccinalo haciendo clic sobre l y haz pulsa el botn Aceptar.
El

sonido

estar

listo

para

usarlo

donde

quieras,

podrs

encontrarlo

en

la Biblioteca (men Ventana Biblioteca).

Utilizar los sonidos incorporados. Flash ya incluye una serie de sonidos

incorporados que podemos importar a nuestro proyecto. Se trata principalmente de
sonidos como disparos, risas, sonidos animales, etc. Los podemos encontrar a travs del
men Ventana Bibliotecas comunes Sonidos. Se abrir un panel como el
siguiente:

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

ms que arrastrarlos desde este panel.

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.

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

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

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. Pelcula con sonido (msica) en formato .mp3.
Tamao
Total: 37
KB. Tamao
Total: 145
KB.
Calidad: Buena
Calidad: Buena
Sonido "Voz"

Pelcula con sonido (voz) en formato .wav. Pelcula

con
Tamao
Total: 9
KB. Tamao
Calidad: Regular
Calidad: Buena

sonido

(voz)

en .mp3.
Total: 67KB.

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

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. Pelcula con sonido (msica) en formato .mp3.
Tamao
Total: 37
KB. Tamao
Total: 145
KB.
Calidad: Buena
Calidad: Buena
Sonido "Voz"

Pelcula con sonido (voz) en formato .wav. Pelcula

con
Tamao
Total: 9
KB. Tamao
Calidad: Regular
Calidad: Buena

sonido

(voz)

en .mp3.
Total: 67KB.

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

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.
Seleccionar Todo: La forma ms natural de seleccionar todo, consiste en hacer clic en
el men Edicin Seleccionar Todo.

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

Men Ventana Alinear. As funciona:

Panel

lo

podemos

encontrar

en

el

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.

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 yAL: 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.

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.

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

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

nuestras capas.
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.

7.3. Trabajar con capas. Opciones avanzadas

Mostrar / Ocultar Capas

: Este botn permite ver u ocultar todas las capas de la

pelcula. Es muy til cuando tenemos muchas capas y slo queremos ver una de ellas ya
que permite ocultar todas a la vez, para despus mostrar slo la actual. Para activar la
vista de una capa en concreto (o para ocultarla) basta con hacer clic en la capa
correspondiente en el punto (o en la cruz) que se encuentra bajo el icono "Mostrar /
Ocultar capas"
Bloquear Capas

: Bloquea la edicin de todas las capas, de modo que no

podremos modificarlas hasta desbloquearlas. Para bloquear o desbloquear una capa

concreta, procederemos como en el punto anterior, clic en el punto o icono "Cerrojo"
situados en la capa actual bajo el icono "Bloquear Capas".
Bloquear una capa es muy til cuando tenemos varios objetos juntos y en capas
distintas y queremos asegurarnos de que no modificamos "sin querer" alguno de ellos.
Tras bloquear su capa podremos trabajar con la seguridad de no modificar dicho objeto, ni
siquiera podremos seleccionarlo, de modo que editaremos con mayor facilidad el objeto
que queramos.

Mostrar/Ocultar capas como contornos

: Este botn nos muestra/oculta los

contenidos de todas las capas como si slo estuviesen formados por bordes. De este
modo y ante un conjunto numeroso de objetos, podremos distinguirlos a todos de forma
fcil y podremos ver en qu capa est cada uno de ellos.
Tambin se puede activar o desactivar para cada capa de un modo similar a los
anteriores botones.
Veamos como se muestran estas opciones activadas y desactivadas.

En la primera imagen la capa actual no tiene ninguno de los botones activados,

podemos observar que en la columna Mostrar Capas aparece un punto. Este punto
significa que no est activada esta opcin, lo mismo sucede con el botn Bloquear
capas. En la columna Mostrar capas como contornos aparece un cuadrado con relleno,
lo que simboliza que los objetos se mostrarn completos y no slo sus contornos.
En la segunda imagen aparece una cruz situada bajo la columna Mostrar Capas, lo
que indica que dicha capa no es visible en el escenario. Aparece un cerrojo bajo la
columna "bloquear capas", lo que simboliza que la capa est bloqueada. Y en la columna
"Mostrar capas como contornos" NO aparece relleno. La capa se est mostrando en este
modo y no podremos ver los rellenos hasta deseleccionar esta opcin.
Adems, el color de los contornos ser diferente para cada capa, de modo que
podamos distinguirlas mejor. El color del contorno, coincidir con el indicado en cada
capa. En este ejemplo podis ver cmo queda un objeto en funcin de tener activada o no
la opcin contorno:

7.4. Reorganizar las capas

Como ya se ha comentado, las distintas capas tienen muchas cosas en comn unas
con otras. Lo primero y principal es la Lnea de tiempo, todas las capas de una misma

escena comparten la misma lnea de tiempos y por tanto, los objetos de todos los
fotogramas 1 de todas las capas se vern al mismo tiempo en la pelcula superpuestos
unos sobre otros. y qu objeto est delante de los dems? Pues este criterio viene dado
por la colocacin de las Capas en la pelcula. Los objetos que se mostrarn delante de
todos los dems sern aquellos que se encuentren en la capa situada ms arriba.
Es decir, si nos fijamos en el ejemplo anterior:
El portero aparece delante de la portera, porque la capa "Portero" est situada encima
de la capa "Portera", como puede apreciarse en la imagen. Si quisiramos cambiar esta
distribucin, basta con hacer clic en la capa que queramos mover y arrastrarla hacia arriba
o hacia abajo hasta la posicin deseada.
Veremos como los objetos se colocan delante o detrs de los de la capa seleccionada
segn su capa se encuentre por encima o por debajo de la nuestra.

Para mover un objeto de una capa a otra, deberemos seguir unos sencillos pasos.
Aprende a hacerlo realizando el ejercicio paso a paso Mover objetos entre capas.
Para mover un fotograma de una capa a otra, basta con seleccionar el fotograma a
mover y arrastrarlo hasta la capa donde queramos pegarlo. Tambin se puede Copiar el
fotograma y luego pegarlo en la capa de destino.

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

: Son las capas que contienen una animacin por

interpolacin de movimiento.
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...

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.

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.

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.

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.

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

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 nombreGrficoAnimado 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:
Guarda este archivo porque lo completaremos ms adelante.

9.4. Introducir un Mapa de bits

Los grficos de tipo Mapa de Bits pueden crearse con muchos programas. Si deseas
que en tus pelculas hayan mapas de bits lo ms seguro es que prefieras crearlos y
hacerlos ms espectaculares en otro programa ms apropiado que Flash para el manejo
de Bitmaps: Photoshop, Fireworks, GIMP, etc...

Flash CS5 permite importar mapas de bits de otros programas, cuando han sido
guardados en formatos grficos GIF, JPG, TIFF y muchos ms. Tambin nos permite
modificarlos en cierto modo. Podemos cambiarle el tamao y convertirlo en un smbolo
para aprovechar las opciones que nos ofrece Flash aunque, teniendo en cuenta qu es un
bitmap, no podremos modificarlo "internamente" pero podremos usarlo como un smbolo
ms.
Para importar un archivo de Mapa de Bits al escenario haz clic en el
men Archivo Importar Importar a escenario.

Se abrir el cuadro de dilogo de Importar, all debers seleccionar el formato de

imagen que quieres importar seleccionndolo en el desplegable Tipo. Luego navega por
las carpetas hasta encontrarlo. Seleccinalo haciendo clic sobre l y pulsa el botn Abrir.
La imagen se incluir en el escenario y estar lista para trabajar con ella.

Aqu tienes una muestra de cmo hacerlo.

9.5. Introducir un archivo vectorial

Al igual que los mapas de bits, hay otros programas que trabajan con grficos
vectoriales como tambin hace Flash CS5.
Si queremos traer un archivo vectorial creado en otro programa, por ejemplo Freehand
o Illustrator, podemos hacerlo de manera muy sencilla.
Simplemente accedemos al men Archivo Importar Importar a escenario. A
continuacin, seleccionamos el tipo de archivo correspondiente al grfico vectorial que
queramos importar. Por ejemploAI de Illustrator.

Pulsamos Abrir, y ya tenemos nuestro archivo vectorial.

Este archivo s lo podremos modificar internamente ya que Flash es capaz de hacer
grficos de este tipo.
Concretamente, Illustrator pertenece tambin a Adobe, igual que Flash, con lo que la
compatibilidad en este caso es total.
Si quieres saber ms sobre compatibilidad de archivos en Flash visita este
avanzado.

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.

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.

Otra opcin muy interesante es Transparente, en la que decidimos cmo se exporta el

escenario. Si como un color opaco o transparente.
Abajo vemos el GIF Animado que resulta de exportar nuestro grfico Flash.

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.

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.

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 menControl 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:

1
2
3
4
5
6

miBoton.addEventListener(MouseEvent.CLICK, accionesMiBoton);
function accionesMiBoton(event:MouseEvent):void
{
//acciones
}
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 panelFragmentos 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
3
4
5
6
7
8
9

/* Hacer clic para ir a pgina Web

Al hacer clic en la instancia del smbolo especificado, la direccin URL se carga
Instrucciones:
1. Reemplace http://www.adobe.com por la direccin URL que desee.
Conserve las comillas ("").
*/
btnVisitarAulaclic.addEventListener(MouseEvent.CLICK, fl_ClickToGoToWebPage);
function fl_ClickToGoToWebPage(event:MouseEvent):void

10
11
12
13
14

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

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
4
5
6
7
8
9
10
11

btnPausar.addEventListener(MouseEvent.CLICK, fl_PausarReproduccion);
function fl_PausarReproduccion(event:MouseEvent):void
{
stop();
}
btnContinuar.addEventListener(MouseEvent.CLICK, fl_ContinuarReproduccion);
function fl_ContinuarReproduccion(event:MouseEvent):void
{
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 ejemplomiClip.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

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.

12.3. El editor de movimiento

Existe un panel que nos permite personalizar mucho ms la animacin, llamado Editor
de movimiento. Para acceder a l basta tener seleccionada una interpolacin de
movimiento y hacer clic en la pestaa Editor de movimiento que aparece junto a la
lnea de tiempo. Como cualquier panel, tambin es accesible desde el men Ventanas.
Este panel nos permite controlar multitud de propiedades y efectos que afectan a una
animacin con total precisin, fotograma a fotograma.
Este es el aspecto del panel:

Podemos ver, a la izquierda una columna con las propiedades que podemos modificar,
divididas

en Movimiento

bsico, Transformacin, Efectos

de

Color, Filtros

Suavizados.
Junto a estas propiedades, aparece una columna con los valores que toma esa
propiedad en el momento seleccionado de la lnea de tiempo.
En la siguiente columna podemos establecer si el valor se aplica con aceleracin o no.
En la columna Fotogramas, podemos recorrer o eliminar los distintos fotogramas clave.
Tambin los controles - y + que nos permiten aadir efectos.
Y a la derecha del todo encontramos la grfica. Podemos ver que cada propiedad tiene
una grfica especfica, que indica los fotogramas en horizontal y los valores de la
propiedad en vertical. Si hacemos clic sobre una propiedad, veremos que su grfica se
expande para editarla con facilidad. En la grfica encontramos los fotogramas clave
marcados como un cuadrado negro, o verde cuando est seleccionado. Estirando de
ellos, o de la lnea de la grfica podemos alterar los valores.
En la grfica, vemos que los puntos suelen formar un vrtice. Una opcin muy
interesante es poder transformarlos en puntos suavizados (desde el men contextual del
fotograma), creando una curva Bzier, lo que formar transiciones ms suaves entre los
picos de valor. Esto no es aplicable a las propiedades X,Y, Z.

A lo largo de los siguientes temas veremos cmo utilizarlo de forma concreta, ahora
vamos a ver en un videotutorial, cmo podemos utilizar el editor de movimiento para
realizar la animacin del bote de la pelota del tema 2, utilizando una interpolacin de
movimiento, en lugar de una interpolacin clsica como se hizo en ese tema.

12.4. Interpolacin clsica

En versiones ms viejas de Flash slo haba una interpolacin de movimiento
disponible, y se llamaba precisamente as, interpolacin de movimiento, en la versin
Flash CS4 esa interpolacin de movimiento pas a llamarse interpolacin clsica.
Una interpolacin clsica, igual que una interpolacin de movimiento, es el
desplazamiento de un smbolo de uno a otro punto del escenario, muchos de los
conceptos vistos en las interpolaciones de movimiento son los mismos para las
interpolaciones clsicas. Por ejemplo, las animaciones tambin han de ser sobre smbolos
y deben estar en una capa. Los Fotogramas Por Segundo (fps) tienen el mismo
significado.
Para crear una interpolacin clsica hay que hacer clic derecho sobre el fotograma que
contiene los elementos y elegir Crear interpolacin clsica.
Cuando realicemos la interpolacin correctamente observaremos un aspecto como este
en la lnea de tiempo, con los fotogramas sobre fondo de color morado.

Vemos que la animacin va desde el fotograma 1 hasta el fotograma 30. Aparece una
flecha que no aparece en la interpolacin de movimiento y el icono que hay a la derecha
del nombre de la capa es distinto.
Por supuesto, al realizar una interpolacin clsica el fotograma inicial y final debern ser
diferentes, en caso contrario no se crear ningn tipo de animacin.
Observa en las siguientes imgenes dnde est situada la pelota en el primer
fotograma de la animacin y su posicin final en el ltimo fotograma:

Aqu puedes ver cmo realizar una interpolacin clsica

Si el objeto con el que queremos hacer la interpolacin clsica no est convertido a

smbolo nos encontraremos con algo as...

... y la animacin no funcionar.

Tambin podemos realizar la interpolacin de otra forma, sin convertir previamente el
objeto a smbolo, ya que Flash lo convierte a smbolo automticamente si no lo hacemos,
dndole el nombre "Animar" ms un nmero. Esto quiz no sea lo ms conveniente en
pelculas grandes, debido a lo que ya comentamos de la gran cantidad de smbolos que
pueden aparecer y la confusin que crean muchos smbolos con nombres parecidos.
Para crear una interpolacin de este tipo, basta con tener un fotograma clave.
Hacemos clic con el botn derecho sobre el fotograma en la lnea de tiempo, y
seleccionamos Crear Interpolacin Clsica. Ahora, creamos un nuevo fotograma clave
donde queremos que finalice la interpolacin, y modificamos los smbolos en los
fotogramas clave.
Veremos que si seleccionamos uno intermedio, se muestran los smbolos en su
transicin al fotograma final. Podemos decidir cmo mostrar el smbolo en ese fotograma,
por ejemplo movindolo. Al hacerlo automticamente se crea un fotograma clave. Esto
hace que el movimiento ya no sea recto, y pueda ser en zig-zag.
Si hacemos esto varias veces sobre varios fotogramas obtendremos varias trayectorias
consecutivas ms.
Pero recuerda, que para la mayora de casos, nos resultar ms verstil la interpolacin
de movimiento.

12.5. Diferencias entre interpolacin de movimiento e interpolacin clsica

En general las interpolaciones de movimiento son ms fciles de utilizar y ms
potentes, no obstante las interpolaciones clsicas tienen caractersticas que pueden
hacerlas ms interesantes para determinados usuarios.
Estas son algunas de las diferencias entre los dos tipos de interpolaciones:
- Las interpolaciones de movimiento incluyen el trazado del movimiento, mientras que
en una animacin clsica no existe el trazado, a menos que lo creemos expresamente.

- Slo se permiten realizar interpolaciones con smbolos, si aplicamos una interpolacin

de movimiento a un objeto que no es un smbolo, Flash lo convertir en un clip de pelcula,
mientras que si se trata de una interpolacin clsica lo convertir en un smbolo grfico.
- En las interpolaciones clsicas cuando cambia una propiedad se crea un fotograma
clave y cambia la instancia del objeto, mientras que en las interpolaciones de movimiento
slo hay una instancia de objeto y al cambiar una propiedad se crea un fotograma clave
de propiedad.
- La interpolaciones de movimiento pueden trabajar con texto sin tener que convertirlo
en smbolo, como ocurre en las clsicas.
- En un grupo de interpolacin de movimiento no est permitido usar scripts de
fotograma, mientras que s es posible en las clsicas.
- Los grupos de interpolaciones de movimiento se pueden cambiar de tamao en la
lnea de tiempo. Se tratan como un objeto nico. Las interpolaciones clsicas estn
formadas

por

grupos

de

fotogramas

que

se

pueden

seleccionar de forma independiente.

- Las interpolaciones de movimiento slo pueden aplicar un efecto de color por
interpolacin, mientras que las clsicas pueden aplicar ms de uno.
- Los objetos 3D slo pueden animarse en interpolaciones de movimiento, no en
clsicas.
- Slo las interpolaciones de movimiento se pueden guardar como configuraciones
predefinidas de movimiento.

12.6. Cambio de forma en una interpolacin

Acabamos de ver las interpolaciones de movimiento y las interpolaciones clsicas como
un mecanismo para desplazar un smbolo Flash de un lado a otro del escenario. Sin
embargo, podemos aprovechar una interpolacin para realizar animaciones en las
que nuestro objeto aumente o disminuya de manera progresiva su tamao.
Esto es muy sencillo con Flash, basta con modificar la instancia del smbolo en el ltimo
fotograma de la interpolacin de movimiento o de la interpolacin clsica, pero esta vez
cambindole el tamao. Podemos utilizar la herramienta Transformacin libre para
cambiar el tamao.
Por supuesto, podemos aplicar ambos efectos a la vez, de manera que el cambio de
tamao se producir mientras el objeto se desplaza. Tambin podemos hacer el cambio

de tamao en varias fases o secuencias encadenadas como en las interpolaciones de

movimiento comunes.
Otra forma es emplear el Editor de movimiento. Veremos los cambios de tamao en la
seccin de Transformacin, separados en Escala X (ancho) y Escala Y (alto).

El ejemplo siguiente incorpora estas tres caractersticas de la interpolacin:

Y la lnea de tiempo que nos queda es algo tan sencillo como esto:

Aqu puedes ver cmo simulamos el bote de una pelota empleando el Editor de
movimiento

12.7. Animacin de textos

Es indudable que para comunicar algn mensaje, en la mayora de las ocasiones, no
basta con imgenes o iconos, y es aqu donde el texto cobra gran importancia. No
obstante, se debe tener cuidado con la animacin de los textos, ya que resulta bastante
complicado leer un texto que se desplaza o cambia de tamao.
Por este motivo, un texto animado debera estar slo en las presentaciones o bien
formar parte de una animacin corta y, lo que es ms importante no debera estar
reproducindose infinitamente.
En las presentaciones, se utilizan multitud de efectos que veremos ms adelante. Sin
embargo, con lo visto hasta ahora se pueden obtener efectos interesantes. Una de las

opciones

ms

utilizadas

es

separar

las

letras

de

los

textos

animarlas

independientemente

12.8. Animacin de lneas

Una buena animacin no tiene que porqu estar compuesta slo por textos o imgenes
espectaculares. En ocasiones conviene darle a la pelcula un aire ms sencillo o aadir
determinados efectos que la hagan vistosa sin necesidad de cargar mucho la pelcula
visualmente, y en cuanto a tamao de archivo se refiere.
Esto lo podemos conseguir simplemente animando lneas y haciendo que se muevan
por el escenario. Esta tcnica nos permite dar dinamismo a la animacin o crear formas
distintas a lo largo de su recorrido.
Son especialmente tiles y vistosas en fondos oscuros y se suelen usar para formar
rectngulos que se aprovechan para insertar imgenes.
Aqu podemos ver un ejemplo de este tipo de presentaciones:

Para crear esta animacin debers crear tantas capas como animaciones de lneas
vayas a crear, en el ejemplo hemos creado 4 capas. Una para el movimiento de lneas de
abajo a arriba, otra para el movimiento de arriba a abajo, otra para izquierda a derecha y
finalmente una ltima para el movimiento de derecha a izquierda.
Tambin crearemos una capa que situaremos en la posicin superior donde
colocaremos las imgenes que formarn el mensaje de bienvenida.
El funcionamiento de la animacin es claro, deberemos crear interpolaciones de
movimiento para cada una de las capas de lneas que en su posicin final emplazaremos
en su lado contrario de la pantalla, por ejemplo, las lneas situadas en un principio en la
parte inferior al final de la animacin se encontrarn en la parte superior. Realizaremos
esto con las 4 capas de lneas.

En la capa Imgenes crearemos animaciones que harn aparecer las imgenes que
forman el mensaje de bienvenida de forma secuencial, es decir, del fotograma 5 al 10 se
mostrar una imagen, del 11 al 16 otra y la ltima la mostraremos del fotograma 17 al 22.
De esta forma, habiendo creado los fotogramas claves en cada uno de los fotogramas de
inicio (5, 11 y 17), arrastraremos desde la Biblioteca (men Ventana Biblioteca) las
imgenes para colocarlas en su lugar en el fotograma. Estas imgenes se mostrarn
nicamente durante el tiempo que dure el fotograma para desaparecer ms tarde dando
paso a la otra imagen.
Consejo: Si quieres aadir un fondo debers hacerlo en una nueva capa y colocar sta
debajo de todas las existentes.

12.9. Gua de movimiento clsica

Anteriormente hemos visto como las interpolaciones de movimiento incluyen por
defecto el trazado con la trayectoria del objeto, y que este trazado puede modificarse
fcilmente, sin embargo las interpolaciones clsicas no lo incluyen. Si deseamos que el
objeto siga una trayectoria no rectilnea en una interpolacin clsica hemos de crear una
capa gua de movimiento.
Una gua es una capa especial que marca una trayectoria para los smbolos de la
capa a la que afecta, para que dichos smbolos la sigan, durante el movimiento. Esta
capa es invisible durante la reproduccin y permite dibujar cualquier tipo de dibujo
vectorial, que nos permitir crear un movimiento no forzosamente rectilneo.
Crear un movimiento mediante esta tcnica es bastante sencillo. Partimos de una capa
con una interpolacin clsica:
Sobre la capa en la lnea de tiempo, hacemos clic derecho y seleccionamos Aadir
gua de movimiento clsica.
Creamos el trazado de la gua en la nueva capa, por ejemplo dibujando con el Lpiz.
Y para acabar, hacemos coincidir el fotograma final de la interpolacin con el final del
trazado de la gua. Es importante que el smbolo est en contacto con la gua. No es
necesario colocarlos al principio del trazado ya que Flash lo hace automticamente.
Vemos como la capa a la que se asocia la gua aparece debajo y sangrado a la
derecha.

Aqu se puede ver cmo realizarlo.

Podemos ver un efecto ms vistoso que el que realizamos con la interpolacin sencilla
del principio del tema.
Una opcin que puede resultar muy interesante es Orientar segn el trazado, la cual
encontramos en el panel de Propiedades. Esta opcin har que el smbolo vaya girando
para seguir la lnea del trazado, lo que en la animacin anterior habra puesto el avin
boca abajo al hacer el "loop".
Tanto si el trazado es de una interpolacin de movimiento, como si es de una
interpolacin clsica, podemos modificarlo de varias formas:
- Seleccionando la herramienta Seleccin y haciendo clic sobre el trazado y
arrastrndolo.
- Seleccionando la herramienta Subseleccin y haciendo clic en el trazado, aparecern
los controladores de curva, movindolos modificaremos el trazado.
- Seleccionando la herramienta Transformacin libre y haciendo clic en el trazado,
aparecern los controladores de transformacin libre, movindolos modificaremos el
trazado.
Si se trata de un trazado de una interpolacin de movimiento, adicionalmente
disponemos de otros mtodos para modificar el trazado:
- Moviendo la posicin del objeto en el escenario, esto hace que se cree
automticamente un fotograma clave de propiedad y se modifique el trazado. Esta es,
quizs, la forma ms fcil de modificar un trazado.
- Utilizar el editor de movimiento para modificar los valores de X, Y, Z.
Si estamos modificando el trazado de una interpolacin clsica, debemos tener cierto
cuidado con no producir discontinuidades en el trazado, ya que esto hara que la
animacin se detuviera en ese punto. En general es ms fcil y flexible utilizar los
trazados con las interpolaciones de movimiento que con las interpolaciones clsicas.

13.1. Interpolacin por forma

Cuando lo que queramos no sea cambiar la posicin de un objeto en el escenario, sino
su forma de manera progresiva (o ambas cosas a la vez), Flash CS5 nos ofrece la tcnica
de la Interpolacin por Forma, que consiste simplemente en ir transformando el contorno
de un objeto creado en su interfaz hasta que sea igual que el contorno de otro objeto
distinto.
Realizar una interpolacin por forma, es muy semejante a crear una interpolacin de
movimiento. Flash genera fotogramas intermedios en los que va variando ligeramente la
forma del fotograma anterior. As como hacamos en el tema anterior, slo necesitamos
dos fotogramas clave. Colocaremos en el primer fotograma el objeto con su aspecto
original, y en el ltimo la apariencia final que queremos que tenga.
Esta vez, es importante destacar que para que una Interpolacin por Forma
funcione como es debido aquellos objetos que intervengan debern ser objetos
vectoriales (no smbolos Flash).
Debemos tener tambin dos aspectos en cuenta:
1) Separar en distintas capas los objetos fijos y los que estarn animados.
2) Poner en distintas capas objetos que vayan a ser transformados con formas distintas,
ya que Flash transformar todos los objetos vectoriales del primer fotograma en aquello
que haya en el ltimo fotograma de la interpolacin.
Si realizamos la interpolacin por forma correctamente la lnea de tiempo tendr este
aspecto:

Las consideraciones sobre la velocidad y el nmero de fotogramas que vimos en las

interpolaciones de movimiento se pueden aplicar tambin a la interpolacin por forma y a
cualquier animacin hecha con Flash.
Si hay algn fallo en los parmetros necesarios para que la interpolacin se ejecute
bien, como por ejemplo, que uno de los objetos en capa sea un smbolo, se mostrar algo
as en la lnea de tiempo:

Para crear la interpolacin, una vez tengamos los fotogramas de inicio y fin de la
animacin hacemos clic derecho en alguno de los fotogramas intermedios, y
seleccionamos la opcin del men Crear interpolacin de forma.
Recuerda que podemos alterar el fotograma final todo lo que queramos.

Podemos observar cmo realizar una interpolacin por forma pulsando aqu.

A continuacin podemos ver el ejemplo de interpolcin de forma sencilla.

Tambin podemos realizar interpolaciones de forma en varias fases de manera anloga
a como lo hacamos en el tema anterior. De esta forma podemos hacer que un
determinado objeto de convierta en otro antes de adoptar su forma definitiva.
En el siguiente ejemplo podemos ver el ejemplo anterior pero haciendo que se
transforme previamente en un tringulo antes de pasar a ser cuadrado.
Lo hemos conseguido simplemente haciendo clic con el botn derecho sobre el
fotograma 10 y creando un fotograma clave (Insertar Fotograma Clave). Luego slo
tenemos que borrar el objeto que aparece en el escenario y dibujar el tringulo.

13.2. Transformar textos

Debido a la importancia de los textos, es importante comentar las aplicaciones que
tienen los cambios de forma sobre ellos. Aadimos as una posibilidad ms para realizar
logotipos o presentaciones vistosas y transmitir informacin de manera espectacular.
Recordemos que para realizar una interpolacin de forma es necesario que el objeto
sea de tipo vectorial. Este no es el caso de los textos, que se basan en fuentes y son
creados en funcin de los valores de la tabla ASCII y un tipo de letra asociado. Para
solucionar este problema, deberemos transformar el texto previamente en un objeto
vectorial, es decir, como si hubiramos repasado con la herramienta lpiz el contorno de
cada letra.

Posibilidades de esta tcnica en textos? Muchsimas, aunque puede llevar a confusiones

si no se hace adecuadamente. Por ejemplo debemos asegurarnos de dar suficientes
fotogramas de margen para que se note la transicin. Tambin es conveniente dar un
tiempo para que cada letra sea mostrada y pueda ser visualizada y "entendida" por aquel
que vea la pelcula, porque si no lo hacemos corremos el riesgo de que la animacin
parezca slo un garabato revolvindose.
Una de las posibilidades es "deletrear" una palabra de manera tan vistosa como vemos
arriba. Podemos comprobar como simplemente cambiando el color del objeto final, se
produce una transicin tambin en el color. Observemos a su vez como cuando se forma
cada letra, mantenemos su imagen el tiempo suficiente como habamos indicado que era
necesario.
En este otro ejemplo se observa la transicin de colores ms claramente y, adems,
observamos transiciones de forma a texto.
Cuando creemos interpolaciones de forma y queramos incluir textos deberemos actuar
de un modo especial dado que un objeto de texto no se considera como una forma. Para
ello, y una vez tengamos la animacin creada con una forma en el fotograma inicial y un
texto en el final veremos que la interpolacin aparece como incorrecta. Deberemos,
entonces seleccionar el fotograma donde se encuentre el texto y seleccionarlo.
Haremos clic en el men Modificar Separar para convertir el texto en un conjunto de
puntos que creen una forma. Y la interpolacin ya estar lista.

Consejo: Cuando vayas a aplicar el comando Separar sobre una palabra completa
observa que primero lo que hace es separar la palabra en letras individuales. Debers
ejecutar de nuevo el comando para que estas letras se separen y creen una forma.

13.3. Consejos de forma

Como ocurra en el tema anterior, a veces no nos viene bien el tipo de accin que hace
Flash por defecto. En las interpolaciones de movimiento lo solucionbamos mediante la
gua de movimiento.
En el caso de la interpolacin por forma, es posible que Flash realice la transformacin
de los objetos de una forma que no es la que esperbamos y que no nos conviene para
llevar a cabo nuestro propsito.
Pues bien, para estos casos Flash nos ofrece una herramienta para solucionarlo: los
consejos de forma.
Los consejos de forma son marcas que indican a Flash qu puntos de la imagen inicial
son los que deben corresponderse con otros tantos puntos en la figura final. Al indicar
esto, estamos controlando las formas intermedias que se generarn.
Para aadir un consejo de forma a una interpolacin nos situaremos en el fotograma
inicial

pulsaremos Control

Shift

H (o

bien

ir

al

men Modificar Forma Aadir Consejo de Forma).

Aparecer un crculo de color con una letra dentro en el centro de la figura. Su color
ser rojo mientras no sea colocado en el contorno del objeto (los extremos, si es que no
hay contorno), que es donde tiene efecto. Cuando estn colocados sobre una curva
(vector) que forma un contorno son amarillos para el objeto inicial y verdes para el final.
Dicho crculo debemos colocarlo en un punto del contorno de la figura inicial.
Automticamente aparecer un punto con la misma letra dentro en la figura final (este
punto ser el que se deba corresponder con el punto del objeto de origen) y deberemos
colocarlo en el punto que deseemos del contorno.
El primer consejo de forma est marcado con la letra "a". Si creamos ms de uno sern
marcados con las letras "b", "c", "d" ... hasta la z, que es el lmite (26 como mximo).
Visita el siguiente videotutorial para comprender mejor qu es un consejo o pista de
forma y ver un ejemplo de la creacin y usos de los consejos de forma.

Ahora realicemos el seguimiento de otro ejemplo, tenemos la siguiente animacin (sin

consejos de forma):
Vamos a insertar un consejo de forma en el punto indicado en los grficos situados un
poco ms abajo:
Fijmonos en las posiciones inicial y final del Consejo de Forma y en el seguimiento del
mismo, posteriormente comprobaremos que Flash realiza lo que le pedimos:
Punto Inicial

Punto Final

Seguimiento
Como vemos el punto que hemos marcado en el objeto inicial se acaba
correspondiendo con con el punto que marcamos en el final, con lo que hemos
conseguido forzar la transformacin que nosotros queramos.

14.1. Introduccin
Si no te parecen suficientes las interpolaciones de forma y de movimiento, y quieres
realizar animaciones ms complejas, puedes combinar las interpolaciones de movimiento
con los efectos y transformaciones que se pueden realizar sobre los smbolos que las
componen y aplicar efectos sobre las mismas interpolaciones.
Una vez comprendidas todas las tcnicas de este tema, estaremos en disposicin de
realizar todo tipo de animaciones en Flash. Slo tendremos que poner un poco de
imaginacin porque, como hemos visto y veremos, el programa nos facilitar
enormemente el trabajo.
Con el panel de Propiedades podemos controlar los efectos y filtros, pero tambin
podemos usar el Editor de movimiento para controlar gran parte de los efectos.

14.2. Efectos sobre la interpolacin

Para describir todos los efectos que podemos aplicar sobre una interpolacin de
movimiento previamente creada, sin necesidad de tocar ningn smbolo, nos centraremos
en el panel Propiedades. Si seleccionamos un fotograma y un objeto perteneciente a una
interpolacin, y abrimos el panel Propiedades, desde el botn de la parte superior
derecha, o bien desde el men Ventana, Propiedades, encontraremos las distintas
propiedades aplicables a ese objeto en ese fotograma. Las propiedades variarn segn el
tipo de interpolacin, segn puedes ver en las siguientes imgenes correspondientes a las
propiedades de la interpolacin de movimiento, interpolacin guiada e interpolacin de
forma:

En las interpolaciones de movimiento podemos darle un nombre de etiqueta, nos

ayudar a identificarla en la barra de tiempo. Aparecer a lo largo de todos los fotogramas
que la componen.
Tamao: La propiedad tamao se representa por los valores AN (anchura)
y AL (altura) y para modificarla basta colocar el cursor sobre el valor y aparecer un
deslizador que podemos mover a izquierda o derecha, tambin podemos hacer clic sobre
el valor y teclear el nuevo valor.

Desde el Editor de movimiento tambin podemos modificar el tamao de un objeto

desde las propiedades Escala X (anchura) y Escala Y (altura) que tienen valores en tanto
por ciento.

Por ltimo, con el uso de la herramienta Transformacin libre tambin podemos variar
las dimensiones del objeto.
Escala: En las interpolaciones guiadas, esta casilla, al activarla, permite un
incremento/decremento progresivo del tamao del objeto inicial cuando sus dimensiones
son distintas a las del objeto que est en la posicin final de la animacin. Si la casilla est
desactivada podramos encontrarnos con una animacin como la siguiente.
En las interpolaciones de movimiento, esta opcin est activada por defecto.
Como vemos Flash hace el desplazamiento de posicin, pero el cambio de tamao se
produce bruscamente en el ltimo fotograma.
Aceleracin: Esta barra deslizante nos permite determinar la aceleracin del primer
tramo de la animacin. Podemos elegir valores entre -100 y 100. Si el valor de aceleracin
es negativo el smbolo se mover despacio primero e ir acelerando de manera
progresiva.

Si

dicho

valor

es

positivo

provocar

un

efecto

opuesto.

Podemos por ejemplo dar la impresin de que un objeto, por ejemplo un coche,
arranca, va cogiendo velocidad poco a poco (valor -100) y despus va frenando y
disminuyendo su velocidad hasta pararse.

Rotacin: Esta opcin es muy interesante ya que nos da la posibilidad de aplicar

una rotacin al objeto mientras se produce el movimiento. Podemos especificar el nmero
de veces o vueltas que se produzca la rotacin durante los fotogramas que dure la
interpolacin, o tambin podemos indicar los grados que queremos que rote el objeto.

Si se trata de una interpolacin de movimiento, nos presenta un submen Direccin,

con tres opciones:

Ninguno. Con esto le indicamos a Flash que no aplique rotacin alguna sobre el
smbolo en movimiento. Es la opcin por defecto en las interpolaciones de
movimiento.

Derecha (En interpolacin clsica CW). Permite realizar el nmero de rotaciones

completas o el valor de grados en la direccin de las agujas del reloj.
Izquierda (CCW). Permite realizar el nmero de rotaciones completas o el valor de
grados en la direccin contraria a la de las agujas del reloj.

Si se trata de una interpolacin clsica, nos presenta un submen Direccin, con una
opcin ms:
Auto. Marcando esta opcin hacemos que se produzca la rotacin en aquella direccin
que necesite menos movimientos. Si cuesta lo mismo hacerlo por un lado o por el otro, es
decir, cuando la imagen inicial y final est en la misma posicin (en cuanto a rotacin se
refiere),

el

hecho

de

activar

esta

opcin

no

tendr

ningn

efecto.

Esta opcin es la que est marcada por defecto en las interpolaciones clsicas y por eso
no hemos visto hasta ahora un objeto rotar en nuestras interpolaciones clsicas. Para que
hubiera tenido efecto deberamos haber rotado la ltima imagen de la interpolacin.

Aqu podemos ver cmo aplicar esta tcnica.

Este es el resultado que hemos obtenido, como podemos comprobar, ha recorrido el
camino ms corto, ya que el 6 ha pasado progresivamente de su posicin anterior a la que
ocupaba el 1 de la otra forma el 6 habra pasado por las posiciones anteriores del 5, 4, 3,
2 y 1, siendo la longitud del movimiento mucho mayor.

Veamos un ejemplo de rotacin a derechas en una interpolacin de movimiento.

Desde el Editor de movimiento, tambin podemos especificar los grados de una

rotacin.

Orientar segn trazado: Si activamos esta casilla, tanto si la interpolacin sobre la

que actuamos es una interpolacin guiada, como si es de movimiento, Flash har que el
smbolo tome la direccin de la gua, rotando para orientarse en la misma posicin que
adopta la lnea.
Para entender mejor este concepto, recordemos una animacin anterior, en la que el
avin haca una especie de "looping". Resultaba un poco extrao ver la animacin porque
los aviones no van marcha atrs y, en esta ocasin y en muchas otras, no es conveniente
que los objetos se muevan solo en el escenario quedando el mismo smbolo inmvil, como
si levitara.
Con este comando solucionaremos esto, y el resultado sera este.
Sincronizar (Sinc): Con esto evitamos que no se reproduzca el ltimo bucle de un
smbolo grfico incluido en nuestra pelcula con una animacin en su lnea de tiempo
interna, cuando el nmero de fotogramas que ocupa en la lnea principal no es mltiplo de
los fotogramas que contiene la instancia.
Ajustar: Si activamos esta opcin, el centro de la instancia (identificado con una
cruz) se ajustar forzosamente a la gua que hemos marcado en la correspondiente capa.
De hecho si intentamos mover la instancia en un fotograma de la animacin, Flash la
volver a colocar sobre la gua de manera automtica.

14.3. Efectos sobre el smbolo interpolado

Ya vimos en temas pasados cmo aplicar efectos sobre instancias de smbolos y vimos
que se poda lograr efectos vistosos. No obstante, cuando los efectos muestran su
verdadera potencia es cuando el smbolo forma parte de una animacin.
Para explicar y demostrar las posibilidades de estos efectos vamos a abrir el
panel Propiedades, que nos mostrar, en el desplegable Color los posibles efectos a
aplicar si seleccionamos una instancia de un smbolo cualquiera de nuestra pelcula.
Podemos aplicar los efectos sobre cualquier smbolo de cualquier fotograma de la
animacin, tanto sobre el fotograma inicial o el final como en los intermedios. En este
ltimo caso, si se trata de una interpolacin clsica, deberemos convertir a fotograma
clave aquel que contenga la instancia y despus aplicar el efecto. El efecto se ir
aplicando de forma gradual. De hecho, es frecuente utilizar interpolaciones clsicas
nicamente para aplicar efectos.
Para entender bien lo que sigue, es necesario controlar la aplicacin de efectos sobre
instancias. Esto lo vimos en el Tema 9 y por eso omitiremos detalles sobre cmo aplicar
efectos concretos sobre smbolos.

14.4. Efecto brillo

El efecto de brillo, como su propio nombre indica, nos viene muy bien para simular el
hecho de que algn objeto se encienda o brille, o por el contrario se apague o pierda brillo.
En el ejemplo que tenemos a la izquierda, hemos intentado simular este efecto. Para
ello hemos creado un semforo de luces intermitentes de color mbar.
Como se puede ver, las luces se encienden y apagan progresivamente de manera
alternada. Para conseguir esto hemos creado una interpolacin para cada luz, formada
por tres fotogramas claves. El tercero lo hemos colocado justo en el medio de la
secuencia de fotogramas. A la primera luz y a la ltima le hemos dado el mismo valor de

brillo, y en la del medio le hemos dado un valor ms alto o ms bajo segn fuera el
smbolo de abajo o el de arriba.
Como los movimientos de las luces son distintos e independientes los hemos colocado
en distintas capas.

Para la luz superior los valores de brillo fueron: 0 para el primer fot. clave, -46 para el
central y 0 para el del medio.

Y en la luz inferior al contrario: -46 para el primer fot. clave, 0 para el central y -46
para el del medio.

14.5. Efecto tinta

El efecto de tinta, tiene un amplio marco de posibilidades de uso. Es muy usado en
textos y en botones, por ejemplo haciendo que cambien progresivamente de color al
pasarles el ratn por encima o simplemente efectos de cambio de color en
presentaciones.
Tintar colores supone un toque alegre y muy vistoso en las presentaciones y, si se usan
varios efectos combinados adecuadamente, dota de un ritmo rpido a la animacin, como
una explosin de color que sorprenda al receptor de la pelcula.
Otro interesante uso de este efecto es simular la proyeccin de una luz de color sobre
un objeto que se va acercando al foco. Veamos un ejemplo de esto.
Vemos como al acercarse el avin a la luz roja del Sol, ste lo ilumina con una luz roja.
Hemos aplicado a la instancia del avin del ltimo fotograma de su interpolacin de
movimiento un efecto de tinte rojo con una intensidad del 60%. Lo mismo hemos hecho en
el centro del Sol pero con dos fases, poniendo en el fotograma central un efecto de tinte
granate del 25%.
La corona solar es simplemente una interpolacin de forma en cuatro fases.

14.6. Efecto transparencia (Alfa)

Este es probablemente el efecto ms utilizado debido a la versatilidad del hecho de
controlar el grado de visibilidad de los objetos. Podemos, por ejemplo, simular un foco
apuntando a un escenario o, lo ms comn, hacer aparecer objetos de la nada y tambin
hacer que se desvanezcan poco a poco.

5.1. Consideraciones sobre el tamao de las pelculas

Antes de aventurarnos a publicar nuestra pelcula para que otros la vean, sobre todo si
la vamos a publicar en una pgina web, donde el tamao de descarga es de vital
importancia, debemos tener en cuenta los siguientes aspectos:
CONSIDERACIONES EN EL DIBUJO:

Aunque los degradados queden muy vistosos, tambin requieren ms memoria, por
lo que debemos evitar su uso excesivo, en la medida de lo posible.

La herramienta Pincel gasta ms memoria que el resto de herramientas de dibujo,

por lo que deberamos elegir estas ltimas en la medida de lo posible.
Hemos visto que la animacin de lneas es bastante til. Sin embargo el uso
de lneas que no sean las definidas por defecto y que usamos en el captulo que
hemos comentado, har que el tamao de la descarga aumente. Por tanto evitemos
las lneas discontinuas, de puntos ...
Dibujar las curvas con el menor nmero de nodos posible.

CONSIDERACIONES EN LA ORGANIZACIN:

Agrupar los objetos que estn relacionados, con el comando Modificar Agrupar.

Si hemos creado un objeto que va a aparecer varias veces, deberamos convertirlo

a smbolo, ya que como hemos visto, Flash lo colocar en la biblioteca y cada vez
que quiera mostrarlo, har referencia a una nica posicin de memoria.
Ya hemos comentado el mayor tamao de los mapas de bits, lo que hace que
debamos minimizar el nmero de apariciones de stos en nuestra pelcula.

CONSIDERACIONES EN LOS TEXTOS:

Hemos podido observar, cuando manejbamos textos, que cuando abrimos el men
de tipos de letras, las tres primeras son siempre "_sans", "_serif" y "_typewriter".
Esto no es una casualidad. Estn colocadas ah para resaltar que estas fuentes
ocupan un mnimo de memoria, por lo que se recomienda su uso.
CONSIDERACIONES EN LA ANIMACIN:

Utilizar lo ms que podamos las interpolaciones de movimiento y las guas para

reducir el nmero de fotogramas clave y el tamao de la pelcula.

Evitar el uso de la interpolacin por forma para animaciones de cambio de color,

cuando sea posible.
Independientemente de la optimizacin que hagamos, a veces no se puede evitar
que el tamao de la pelcula aumente. Es recomendable entonces hacer un
preloader (precarga) cuando la pelcula que queramos publicar sea de tamao
superior a unos 80KB.

15.2. Preloader. Cargar la Pelcula entera antes de reproducirla

Un preloader se usa principalmente para evitar la carga parcial de la pelcula, mientras
sta se est reproduciendo, lo que, en ocasiones en las que la pelcula es de un tamao
considerable, hace que la pelcula se vea entrecortada.
Normalmente, los preloaders se hacen vistosos para que el observador no se aburra y
deje de lado la opcin de visitar nuestra web. Suelen llevar alguna animacin sencilla que
se va reproduciendo mientras se est cargando simultneamente la pelcula principal,
mucho ms grande.
Se pueden complicar mucho ms, pero nosotros haremos uno sencillo que nos sirva
para entender bien el concepto, y la manera de hacerlo.
Partimos de que ya tenemos nuestra pelcula terminada. Si queremos saber su tamao
podemos ir a Archivo Configuracin de publicacin seleccionar la pestaa Flash, y
marcar la casilla Generar Informe de Tamao. Si pulsamos el botn Publicar, aparecer
en nuestro directorio un archivo de texto donde se explica con detalle el tamao de
nuestra pelcula.

Ahora insertaremos una nueva escena (Insertar Escena). Deber ser la primera que
se ejecute. Para asegurarnos de ello accedemos a Ventana Otros Paneles Escena,
y en la ventana que aparece arrastramos la escena que acabamos de crear hasta que
est la primera. En nuestro ejemplo le hemos llamado "Preloader" y hemos supuesto que
la Escena con la pelcula se llama "Pelcula" (lgicamente). Deber quedar algo similar a
lo que muestra la imagen.
En la escena recin creada insertaremos otra capa, de manera que nos queden dos
capas a las que llamaremos, "Accin" y "Cargando".
En la capa "Cargando" crearemos una animacin sencilla. Por ejemplo, hagmosle
honor al ttulo y escribamos "Cargando ..."; puedes aplicarle la animacin que prefieras,
siempre que no sea muy compleja. En nuestro ejemplo, esta capa tiene por lo menos
dos fotogramas.

En la capa "Accin" disearemos el "corazn" del preloader. Vamos a hacer que la

animacin de nuestra escena de carga se ejecute repetidas veces, hasta que se haya
cargado la escena que contiene la pelcula principal, mediante las acciones ActionScript 3
de Flash. Para ello abrimos el panel de Acciones.
Vamos a emplear la funcin gotoAndPlay de ActionScript, que como ya comentamos
nos permite ir a un fotograma determinado. Podemos escribirlo gotoAndPlay(1,
"Escena") para ir al primer fotograma de la escena indicada.
Podemos

saber

cuntos

fotogramas

propiedad this.framesLoaded,

se

han

cuantos

cargado

hasta

fotogramas

ahora

hay

en

con

la

total

con this.totalFrames.
Conociendo estos datos, lo nico que tenemos que hacer es preguntar si los
fotogramas cargados igualan a los totales. Si es que s, ya podemos avanzar hasta la
siguiente escena. Y si no, podemos volver al principio de nuestro loader, lo que lo ir
repitiendo en bucle.
Para expresar esto en ActionScript, lo haramos as:
?

1
2
3
4
5

if(this.framesLoaded==this.totalFrames) {
gotoAndPlay(1, "Pelcula")
} else {
gotoAndPlay(1, "Cargador")
}
Si no entiendes exactamente el cdigo no te preocupes, lo veremos ms adelante. Lo
importante ahora es el concepto.
Por lo tanto, lo que har esta instruccin es reproducir la escena Cargador, y al final
comprobar el estado de la carga. Si se no se ha completado, vuelve al principio del
cargador, lo que har que vuelva a pasar por la instruccin. Cuando la carga est
completa, iniciamos la Pelcula.
Y esto es todo lo que hay que hacer para crear un preloader (aunque por supuesto se
puede hacer ms sofisticado), con lo que los visitantes ya no huirn de nuestra web. En
los primeros temas de ActionScript veremos cmo mostrar en el preloader el estado de la
carga.

15.3. Distribucin como archivo swf en un reproductor autnomo

Para poder distribuir pelculas creadas en Flash que la gente pueda ver, son
necesarias dos cosas: crear un archivo SWF y que el que la quiera visualizar tenga
instalado el Reproductor de Flash.
Flash nos ofrece varias opciones y funcionalidades para la creacin de un archivo SWF.
Estas opciones se pueden ver en el panel de Configuracin de Publicacin, al que
podemos

acceder

mediante

Publicacin (Pestaa Flash).

Veamos cules son estas opciones:

el

men Archivo Configuracin

de

Reproductor: Si queremos publicar nuestra pelcula para que sea vista con
versiones anteriores de Flash, debemos seleccionar aqu la versin deseada.

Versin de ActionScript: El uso de ActionScript 3 nos permitir usar las novedades

relativas a objetos, clases etc... Si hemos introducido cdigo ActionScript debemos
de respetar la versin elegida al crear el archivo, si no se pueden producir errores.
Calidad JPEG: Si en el panel de propiedades del mapa de bits no hemos indicado
una compresin concreta, aqu podremos determinar su grado de compresin, que
determinar a su vez el espacio ocupado en memoria por este tipo de imgenes. A
mayor compresin, menos espacio en memoria ocupar la imagen, pero tambin su
calidad ser menor.
Establecer Flujo de Audio o Evento de Audio: Esta opcin nos permite acceder al
Panel "Configuracin de Sonido" desde donde podemos configurar, para cada tipo
de sonidos, sus caractersticas.
Suplantar configuracin de sonido: Con esto se suplantarn los niveles de
compresin seleccionados para cada archivo de sonido de nuestro documento.
Comprimir pelcula: Comprime la pelcula al mximo posible.
Generar Informe de tamao: Esta opcin la hemos usado en el apartado anterior.
Si la activamos, se crear un archivo de texto con una relacin detallada del tamao
del documento.
Proteger Frente a Importacin: Activando est casilla har que cuando otro usuario
(o nosotros mismos) queramos importarla no podamos o tengamos que introducir
una contrasea si se ha escogido alguna.
Omitir acciones de trace: Las acciones de traza se emplean para comprobar el
correcto funcionamiento de la pelcula durante la creacin de esta (durante las
pruebas). Tambin se consideran trazas los comentarios que insertemos en el
cdigo ActionScript. Si activamos esta seal, la pelcula creada no los incluir,
ocupar menos tamao y ahorraremos tiempo innecesario. Es recomendable cuando
se publique la pelcula de un modo definitivo.
Permitir depuracin: Permite que se pueda depurar el archivo SWF. Tambin exige
la introduccin de una contrasea ya que se debe tener permiso del creador para
Importar el archivo y depurarlo.

Para entender mejor este concepto te recomendamos hacer el Ejercicio Publicar

SWF.

15.4. Distribucin para pginas web

Esta es una parte importante, ya que normalmente las pelculas de Flash estn
orientadas a la publicacin va Web.
Para publicar una pelcula Flash en Internet de manera que forme parte de una pgina
web deberemos insertarla en un archivo tpico de pginas web cuyo lenguaje de
programacin sea del estilo del HTML. Para ello debemos atender a las opciones de
publicacin HTML que nos ofrece Flash, y que nos ayudarn a que nuestra pelcula se
visualice como realmente queremos.
Las opciones de este tipo de publicacin estn en Archivo Configuracin de
Publicacin... (Pestaa HTML).

Plantilla: Para incrustar una pelcula Flash en un documento HTML, hay que escribir
una serie de cdigos de programa algo complejos y laboriosos de hacer a mano.
Para facilitarnos esta tarea Flash hace esto automticamente pero, puesto que cada
web es distinta y nuestras necesidades van a ser muy distintas, los cdigos tambin sern
muchos y distintos, por esto Flash incluye Plantillas, que crean este cdigo
automticamente segn el tipo de publicacin que deseemos:
En el botn Informacin que est a la derecha de la pestaa "Plantilla" se nos muestra
informacin muy til sobre cada tipo de plantilla. Estas son las plantillas ms comunes:

Slo Flash: Esta es la opcin predeterminada y utiliza el reproductor Flash.

Flash con FSCommand: Imprescindible cuando se usen FSCommands. Permiten

controlar el reproductor desde la pelcula.
Mapa de Imgenes: Si hemos incluido una Image Map (imgenes completas que
ejecutan distintas acciones segn la coordenada que se pulse) debemos activar esta
opcin.
QuickTime: Permite incluir una pelcula QuickTime.
etc ...

Detectar Versin de Flash: Desde aqu podemos seleccionar si queremos que

nuestra pelcula detecte la existencia o no existencia del plugin de Flash en el ordenador
del usuario, as como las pginas web donde se insertar el cdigo encargado de
comprobarlo y las pginas web a las que se ir en caso de disponer del Plugin o no
disponer de l.
Dimensiones: Especifica la unidad en la que mediremos las dimensiones del
Documento.

Anchura X Altura: Aqu introduciremos la anchura y altura, teniendo en cuenta que

a veces un objeto ms grande que estas dimensiones provocar un cambio en
stas.
Reproduccin: Permite realizar determinados cambios en cuanto a la reproduccin

de la pelcula:

Pausa al Comienzo: Permite que sea el usuario quien haga que se inicie la
reproduccin, que inicialmente aparecer detenida.

Reproduccin Indefinida: Cuando la pelcula termine, volver a empezar desde el

principio. Esto lo har infinitamente.
Visualizar Men: Permite que al hacer el usuario clic con el botn derecho del ratn
sobre la pelcula, el men emergente tenga todas las opciones por defecto. Si la
desactivamos slo aparecer la opcin "Acerca de Flash".
Fuentes de Dispositivo: Sustituye las fuentes utilizadas en los textos sin animacin
de la pelcula por las fuentes predeterminadas en la mquina de quien la visualice.

Calidad: Aqu podemos modificar la calidad de visualizacin de la pelcula, que

depende del suavizado de la imagen y el tiempo de reproduccin. Las opciones son:

Baja No hay suavizado. El tiempo de reproduccin es el de mxima velocidad.

Baja Automtica: El reproductor detecta si la mquina soporta en cada instante un

ligero suavizado, si lo soporta, lo aplica. El tiempo sigue siendo muy rpido.
Alta Automtica: Pone al mismo nivel el tiempo y el suavizado, pero si hay alguna
limitacin, siempre dar preferencia a la velocidad.
Media: Valores intermedios de velocidad y suavizado. No suaviza los bitmaps.
Alta: Usa siempre el suavizado, los mapas de bits se suavizan slo si no hay
animacin. Da preferencia a la buena visualizacin.
ptima: Se suaviza todo, incluidos los mapas de bits en cualquier caso. Total
preferencia de la apariencia frente a la velocidad.

Modo de Ventana: Opciones para la reproduccin dentro de las ventanas de

Windows:

Ventana: Se reproduce la pelcula en la ventana de la web en la que est insertada.

Opaco sin Ventanas: Hace que los objetos situados en capas situadas detrs de la
pelcula no se vean (en pginas DHTML).
Transparente sin Ventanas: Es el opuesto al anterior. Permite que los objetos
situados detrs se vean.
Alineacin HTML: Posicin relativa de la pelcula dentro de la pgina web HTML.

Tenemos varias opciones:

Predeterminada: Centra la pelcula en la pgina. Si no cabe se cortan los extremos.

Izquierda: Alineacin a la izquierda. Tambin se recortan los bordes si no cabe.

Derecha: Alineacin a la derecha.
Superior: Alineacin en el borde superior de la pgina.
Inferior: Alineacin en el borde inferior de la pgina.
Escala: Si hemos especificado el tamao en pxeles o en tanto por ciento, podemos

decirle a Flash cmo distribuir la pelcula en el rectngulo que hemos decidido que la
contenga:

Predeterminada: Se ve toda la pelcula guardando las proporciones originales.

Sin Borde: Recorta (en caso de que la pelcula sea ms grande que el rectngulo)
todo lo que sobre con el fin de mantener las proporciones.
Ajuste Exacto: Distorsiona las proporciones si es necesario para conseguir que la
pelcula ocupe el rectngulo completo.

Alineacin Flash: Se hace necesario alinear la pelcula cuando esta no tiene las
mismas dimensiones que el rectngulo definido. Las opciones son:

Alineacin Horizontal: Podemos escoger entre Centro, Izquierda o Derecha.

Alineacin Vertical: Podemos escoger entre Centro, Superior o Inferior.

Mostrar Mensajes de advertencia: Permite que se muestren los posibles mensajes

de error de cdigo ActionScript.

Aqu podemos ver un ejemplo de publicacin de una pelcula Flash para la Web.

Adems, Flash crear el cdigo JavasScript que detecte la versin de Flash y otras
acciones.
De todas formas, lo ms habitual es utilizar un editor web, como Dreamweaver para
crear la pgina web, y desde ah insertar el archivo SWF, por lo que ser el propio editor el
que se encargue de generar este cdigo.

16.1. Qu es el ActionScript?
El ActionScript es el lenguaje de programacin que ha utilizado Flash desde sus
comienzos, y que por supuesto, emplea Flash CS5. A grandes rasgos, podemos decir que
el ActionScript nos permitir realizar con Flash CS5 todo lo que nos propongamos, ya que
nos da el control absoluto de todo lo que rodea a una pelcula Flash. Absolutamente de
todo.
Sin embargo, en estos temas slo vamos a ver una pequea introduccin
a ActionScript 3 que servir para sentar las bases que permitirn empezar a trabajar con
ActionScript. Ensear a programar con ActionScript requerira otro curso completo.
Profundizar en el conocimiento de este lenguaje queda por cuenta del lector.
Recomendamos seguir la estupenda Ayuda incluida en Flash CS5.
Todo lo referente a este curso hace referencia a la versin 3 de ActionScript. Si
buscas informacin sobre ActionScript 2.0, te recomendamos el curso de Flash CS3, en el
que resolvemos los mismos ejemplos, pero con AS 2.0.

Caractersticas generales

Como ya hemos comentado, el ActionScript es el lenguaje de programacin propio

de Flash, tal y como el Lingo lo es de Macromedia Director, por ejemplo. El
ActionScript est basado en la especificacinECMA-262, al igual que otros lenguajes
como Javascript.

ActionScript es, como su nombre indica, un lenguaje de script, esto quiere decir que
no har falta crear un programa completo para conseguir resultados, normalmente la
aplicacin de fragmentos de cdigo ActionScript a los objetos existentes en nuestras
pelculas nos permiten alcanzar nuestros objetivos.
ActionScript 3 es un lenguaje de programacin orientado a objetos. Tiene similitudes,
por tanto, con lenguajes tales como los usados en el Microsoft Visual Basic, en el
Borland Delphi etc... y aunque, evidentemente, no tiene la potencia de estos
lenguajes, cada versin se acerca ms. As, la versin 3.0 utilizada en Flash CS5 es
mucho ms potente y mucho ms "orientada a objetos" que su anterior versin 2.0.
La sintaxis ActionScript presenta muchsimos parecidos con el Javascript o PHP; si
estamos familiarizados con estos lenguajes, la sintaxis y el estilo de ActionScript nos
resultarn muy familiares. Las diferencias entre JavaScript y ActionScript las
podemos encontrar en la ayuda que acompaa al Flash CS5.
En la mayor parte de las ocasiones, ser necesario "programar". Flash CS5 pone a
nuestra disposicin una biblioteca de funciones, clases y mtodos (de momento
entenderemos esto como "cdigo ActionScript que realiza una funcin determinada")
ya implementadas que realizan lo que buscamos, bastar con colocarlas en el lugar
adecuado.

Vamos a ver muchas de estas funciones en este curso, pero antes recomendamos
tener

claros

ciertos

conceptos

relacionados

con

recomendamos echar un vistazo a nuestro tema bsico

la

programacin.
.

Para

ello,

16.2. El panel Acciones

En Flash CS5, el Panel Acciones sirve para programar scripts con ActionScript, por
tanto lo aqu introduzcamos le afectar de menor o mayor medida. Debemos tener claro
desde un principio que el PanelAcciones puede hacer referencia a Fotogramas u objetos,
de modo que el cdigo ActionScript introducido afectar tan slo a aquello a lo que
referencia el Panel. Por ejemplo, en la imagen inferior, se puede distinguir que el
Panel Acciones hace referencia al Fotograma 1 de la Capa 1

(en el

nombre de la pestaa de la zona de la derecha y en la zona izquierda en el

apartado Seleccin actual).

El Panel Acciones se divide en 2 partes, a la izquierda tenemos una ayuda facilitada

por Flash que nos da acceso de un modo rpido y muy cmodo a todas las acciones,
objetos, propiedades etc... que Flash tiene predefinidos. Estos elementos estn divididos
en carpetas, que contienen a su vez ms carpetas clasificando de un modo eficaz todo lo
que Flash pone a nuestra disposicin. Para insertarlos en nuestro script bastar con un
doble clic sobre el elemento elegido.
En la parte derecha tenemos el espacio para colocar nuestro script, el cdigo de
ActionScript. El cdigo lo podemos insertar en cualquier fotograma clave, aunque lo ms
"limpio" es crear una capa para el cdigo.

El Panel Acciones de Flash CS5, no tiene nicamente un modo de edicin.

Podemos utilizar el

, en el que en vez de escribir directamente,

seleccionamos los distintos elementos desde listas. Puede resultar til al principio, cuando
an no estamos familiarizados, pero nos limita mucho al escribir.
Cuando ya tenemos cierta soltura nos encontraremos ms cmodos con el Asistente
de script desactivado, lo que nos permite escribir directamente el cdigo. Este ltimo
modo nos dar ms libertad y agilidad si sabemos qu hacer, pero tambin es ms fcil
que cometamos errores.
En la parte superior encontramos herramientas que nos ayudarn. Veamos las ms
tiles:

Buscar: Busca un texto en el cdigo. til, por ejemplo, si queremos buscar en

todos los sitios que empleamos un objeto.

Revisar sintaxis. Comprobar errores en la sintaxis, normalmente que

hayamos olvidado cerrar parntesis o corchetes. Si encuentra alguno, nos mostrar
un mensaje como el siguiente:

En el panel Errores de compilador se mostrarn los errores indicando la capa,

fotograma y lnea. Podemos ir al lugar del error haciendo doble clic.

Formato automtico. Al escribir en cualquier lenguaje, es muy importante

hacerlo ordenadamente y con el formato adecuado. Este botn lo hace
automticamente, siempre que no haya errores de sintaxis.

Cuando tenemos mucho cdigo, nos resultar ms cmodo si

contraemos ciertas partes. Con estos botones, podemos, de izquierda a
derecha, contraer el espacio entre llaves, contraer la seleccin o expandir todo.

Cuando estamos programando, es frecuente que queramos comentar un

fragmento de cdigo para que no se ejecute o que queramos aadir comentarios
descriptivos. Con estos botones, podemos comentar el texto seleccionado, o
descomentarlo.

Aunque la sintaxis sea correcta, puede que al probar nuestra pelcula se sigan
produciendo errores (errores de compilacin). Por ejemplo porque accedemos a una
propiedad de un objeto que no existe, o nos hemos equivocado al escribir el nombre de
una variable. Estos errores tambin nos aparecern en el panel Errores de compilador.
En este caso, fjate en el nmero de lnea del error, ya que al hacer doble clic, a veces no
va al lugar correcto si el cdigo tiene comentarios.

16.3. El panel Fragmentos de cdigo

En Flash CS5 se ha creado un nuevo panel para ayudarnos a generar el cdigo
ActionScript: el panel Fragmentos de cdigo.

Este panel nos resultar muy til, ya que incluye las funciones bsicas. Por ejemplo, los
eventos

de

botones

siempre

se

escriben

de

la

misma

forma.

Desde

la

seccin Controladores de eventos del panel, podemos introducir este cdigo, y slo
modificar la parte necesaria.
Pero adems accediendo a sus opciones encontramos opciones muy interesantes:

Lo ms destacado es que podemos crear nuestros propios fragmentos de cdigo, con

intruscciones que usemos habitualmente.
Adems podemos exportarlas e importarlas a otras instalaciones del programa.

16.4. Los operadores y expresiones

Entrando un poco ms a fondo en la sintaxis y el manejo del ActionScript, vamos a
comenzar hablando de los operadores y de las expresiones, por ser la parte ms
elemental de una accin de ActionScript (y de cualquier otro lenguaje de programacin).
Un operador es un tipo de carcter que realiza una accin especial dentro de una
expresin de ActionScript. Una expresin no es ms que un conjunto de operadores,
variables y constantes relacionados entre s de un cierto modo.
Por ejemplo:
x = 3 ; --> Es una expresin cuyo resultado ser asignarle a la variable ' x ' el
valor 3 (que es una constante). A partir de este punto, la variable x vale 3.
y = 5 + x ; --> Es una expresin cuyo resultado ser asignarle a la variable ' y ' la
suma de la constante 5 y la variable ' x ' que sabemos que vale 3 (porque le hemos
asignado este valor antes). Por tanto, el resultado de esta expresin es asignarle 8 a y.
Tambin se puede considerar como asignar a y el valor de la expresin 5 + x
Flash nos permite usar multitud de operadores, vamos a comentar los ms comunes. El
lector puede acceder a los dems (y a estos) desde el Panel Acciones en la
carpeta Elementos de lenguaje Operadores. Vamos a clasificar los operadores tal y
cmo lo hace Flash.
Operadores Aritmticos
Son los operadores empleados en operaciones matemticas.
Operador

Descripcin

Ejemplo

Suma

5 + 5 = 10

Resta

5-5=0

Multiplicacin

5 * 5 = 25

Divisin

5/5=1

Resto o Mdulo

10%8 = 2

++

Incremento. Suma 1 al valor

valor++ equivaldra a valor = valor + 1

--

Decremento. Resta 1 al valor

valor-- equivaldra a valor = valor - 1

Operadores de Asignacin

Asigna el valor de una variable.

Operador

Descripcin

Ejemplo

Asigna a la variable de la izquierda el valor de la derecha

variable vale 3;
variable = 5;
variable vale 5;

+=

Suma con asignacin. Le aade a la variable el valor de la

derecha.

variable vale 3;
variable += 5;
variable vale 8;

-=

Resta con asignacin. Le resta el valor de la derecha.

variable vale 3;
variable -= 5;
variable vale -2;

*=

Multiplicacin con asignacin.

variable vale 3;
variable *= 5;
variable vale 15;

/=

Divisin con asignacin

variable vale 15;

variable /= 5;
variable vale 3;

Operadores de Comparacin
Empleados en expresiones condicionales, devuelven un valor lgico, verdadero (TRUE
o 1) si la comparacin es cierta, o falso (FALSE o 0) si no lo es.
Operador

Descripcin

Ejemplo

>

Mayor que

6 > 5 da verdadero.

<

Menor que

6 < 5 da falso.

>=

Mayor o igual que

6 >= 5 da verdadero.

<=

Menor o igual que

6 >= 6 da verdadero.

==

Igual

'hola' == 'hola' da verdadero.

!=

Distinto

'hola' != 'hola' da falso.

Operadores lgicos.
Evalan valores lgicos. Normalmente se emplean para comparar dos expresiones con
operadores relacionales, y devuelve verdadero o falso.
Operador

Descripcin

Ejemplo

And (Y) Devuelve verdadero si los dos valores son

verdaderos

&&

(6 > 5) && (1==1) devuelve

verdadero
(6 > 5) && (1==0) devuelve
falso

(6 > 5) || (1==1) devuelve

verdadero
Or (O) Devuelve verdadero si alguno de los valores
(6 > 5) || (1==0) devuelve
es verdadero
verdadero
(6 > 6) || (1==0) devuelve falso

||

Not (Negado) Devuelve verdadero si el valor era

falso, y al revs.

!(9 > 2) devuelve falso

!(9 ==9) devuelve falso

Esta posibilidad de comprobar si una expresin es igual a otra, nos ser muy til para
comprobar muchas cosas durante nuestra pelcula y en funcin de ellas, hacer unas cosas
u otras.
Pondremos un ejemplo; imaginemos que le pedimos a un usuario que introduzca su
edad

en

un

campo

de

texto

de

nuestra

pelcula

flash.

A ese

campo

le

llamamos edad_usuario. Le hacemos pulsar un botn Continuar y en ese momento

comprobamos su edad, si tiene menor de edad, le decimos una cosa, de lo contrario, le
decimos otra. Bastara con hacer algo as:
?

1
2
3
4
5

if (edad_usuario<18) {
dar_mensaje_1();
} else {
dar_mensaje_2();
}
Aqu lo que estamos diciendo es lo siguiente: "Si edad_usuario es menor a 18,
entonces damos el mensaje 1, si no (igual o superior a 18) le damos el mensaje 2.
El significado de 'if' y 'else' lo veremos ms adelante, de modo que no nos
preocupemos por no entender perfectamente el cdigo escrito arriba. Tambin faltara,
lgicamente, crear las funciones "dar_mensaje_1" y "dar_mensaje_2".
Orden de precedencia
Cuando en una expresin se combinan varios operadores, el orden en que se ejecutan
puede variar el resultado de la expresin, por eso es muy importante saber en qu orden
se ejecutarn. El orden no es aleatorio sino que sigue unas reglas de precedencia al igual
que en una operacin matemtica.
Primero se evalan los operadores de dentro de los parntesis.

Cuando dos operadores estn al mismo nivel, unos operadores tienen preferencia con
respecto a otros, y estos se calculan primero. En el caso de que tengan la misma
preferencia, se calcularn de izquierda a derecha.
En la siguiente tabla, vemos el orden de precedencia, de mayor a menor, se ejecutan
primero los de mayor orden.
Orden de precedencia
Negacin (!) / Incremento (++) / Decremento (--)
Multiplicacin (*) / Divisin (/) / Resto (%)
Suma (+) / Resta (-)
Relacionales mayor - menor (>, <, >=, <=)
Igualdad (==) / Desigualdad (!=)
And lgico (&&)
Or lgico (||)
Asignacin (=, +=, -=...)
Otros Elementos del lenguaje
( ) : Parntesis. Sirven, como es de esperar, para agrupar trminos y dar preferencias
en las operaciones (al igual que en matemticas). Tambin se usa, como ya vimos, para
pasar parmetros a funciones o acciones.
" " : Comillas. En ActionScript, todo lo que va entre comillas, pasa a considerarse una
cadena de caracteres. As por ejemplo, mientras que x representa una variable con un
valor determinado, si escribimos "x", estamos escribiendo en realidad el carcter o la letra
"x". Por tanto, podremos aadirlo a una palabra, compararlo con otras letras, escribirlo por
pantalla etc.. pero ya no ser una variable.
//: Comentario de lnea. Indica que el texto a partir de ah, y en esa lnea, es un
comentario, y no se ejecutar como cdigo.
/* ....... */: Comentario de bloque. Cualquier texto de una o ms lneas encerrado entre
estos caracteres es un comentario, y no se ejecutar como cdigo.

16.5. Los objetos

Los Objetos, como ya hemos visto en el tema bsico, los objetos son instancias de una
determinada clase. Esto es, son representantes de una clase ya definida. Cada objeto
tiene las propiedades y mtodos propios de la clase, y normalmente son independientes

unos de otros. As, son objetos, por ejemplo, un botn, un clip de pelcula, un grfico o un
sonido... es decir, que prcticamente todo es un objeto en Flash CS5.
Vamos a ver los objetos ms usados en Flash y una breve descripcin de cada uno de
ellos. Como ya se ha explicado en el tema bsico, cada objeto tiene una serie
de Propiedades (que

veremos

despus),

unos Mtodos y eventos,

que

dan

funcionalidad a los objetos. Cuando un componente de Flash pasa a ser un objeto,

automticamente pasa a tener todas las propiedades definidas por Flash para ese objeto y
pasa a reaccionar ante los Mtodos y eventos que tiene definidos. Podemos encontrar
una lista con todas las propiedades, mtodos y Acciones.
Objeto "Button" (Botn)
Los objetos de tipo Botn es un tipo de MovieClip especialmente pensado para que
el usuario interacte con l, permitindonos diferenciar entre sus estados, y crear
una
apariencia
para
cada
uno.
Cuando nos interese que una imagen que hayamos diseado se comporte como un
botn, bastar convertirla a botn (del modo visto en el captulo correspondiente) y
ya podremos usar los eventos tpicos de un botn.
Objeto "MovieClip" (Clip de Pelcula)
Cuando necesitemos crear una pelcula Flash dentro de otra pelcula, pero no
queramos tener 2 ficheros separados ni molestarnos en cargar una pelcula u otra,
deberemos crear un objeto movieclip. Entre sus propiedades especiales destaca que
los objetos "clip de pelcula" tienen, internamente, una lnea de tiempos que corre
independiente de la lnea de tiempos de la pelcula principal de Flash, lo que nos
permite crear animaciones tan complejas e independientes como queramos
(podemos crear tantos clips de pelcula dentro de otros como queramos, por
ejemplo). Realmente, toda nuestra pelcula es un MovieClip.
Objeto "DisplayObject" (Objeto de visualizacin)
Esta clase engloba a todos los objetos que podemos ver en nuestra pelcula, como
los Clips de pelcula y botones, y define las propiedades y mtodos comunes para
todos ellos.
Objeto "Sound" (Sonido) y SoundChanel (Canal de sonido)
Los objetos sonidos no son visuales, y por tanto, no podremos ver como quedan en
los fotogramas, al igual que haramos con un botn o un clip de pelcula. Deberemos
controlarlos, por tanto, desde el Panel Acciones y usando ActionScript. Tienen
multitud de mtodos especiales, muy potentes y tiles, podemos parar un sonido,
crear un bucle, darle efectos sonoros etc... Utilizando el canal de sonido, podremos
pararlo,
ajustar
el
volumen,
etc.
Podramos, por ejemplo, crear un objeto de tipo sonido y despus hacer que al
pulsar un botn suene. (Ms adelante se ver algn ejemplo de uso de sonidos).
Objeto "Mouse" (Ratn)
El objeto mouse es uno de los objetos de Flash que ya est definido por Flash, pues
hace referencia al ratn de Windows (al que manejar el usuario que vea nuestra
pelcula). Si lo usamos, podremos acceder a las propiedades del ratn de Windows,
tipo de cursos, efectos asociados, deteccin de su posicin etc...
Vale la pena insistir en que su manejo no es anlogo al de otros objetos como el
botn, pues podemos crear tantos botones como queramos y hacer con ellos lo que
decidamos, pero el objeto Mouse es nico y acta sobre el ratn del PC del usuario
que vea nuestra pelcula. Se puede decir que es un objeto "externo" que permite que

otras partes del Sistema Operativo interacten con nuestra pelcula Flash. Por tanto,
es muy potente.
Objeto "Math" (Matemticas)
Es uno de los mltiples objetos "abstractos" de Flash, ni es visual, ni parece que
corresponda a nada existente en el sistema (como el objeto "Mouse"). Su funcin es
muy importante, pues nos permite usar frmulas matemticas de modo muy sencillo.
En el tema siguiente veremos algn ejemplo de su uso.
Objeto "String" (Cadena)
Es otro objeto peculiar, pues corresponde a un tipo de datos. Los strings o cadenas
son secuencias de caracteres. Si definimos una secuencia de caracteres como
objeto de tipo String, podremos usar los mtodos que Flash implementa sobre ellas:
Seleccionar subcadenas de letras, buscar una determinada letra en una palabra,
convertir la palabra a letras maysculas y un largo etc...
Objeto "Loader" (Cargador) y Objeto "URLLoader" (Cargador de informacin)
Los objetos Loader nos permitirn cargar archivos para mostrarlos (imgenes,
archivos swf, etc...) en nuestra pelcula, mientras que los objetos URLLoader nos
permitirn cargar informacin de archivos (archivos de texto, XML, pginas web...).

16.6. Las acciones - mtodos comunes

Flash CS5 llama acciones a lo referente al cdigo ActionScript, lo que nos permite dar
comportamientos a los objetos.
Estas acciones son funciones predefinidas de ActionScript, es decir: Flash CS5 las
crea, y nosotros slo tenemos que usarlas de la manera que se nos indica. No tenemos
que definir las funciones ni nada por el estilo, ni siquiera necesitamos saber cmo estn
hechas... Lo importante es que estn listas para usar, lo que facilita el uso de este
lenguaje de programacin y sobre todo, haga muy rpido comenzar a programar.
Por supuesto, cuando tengamos ms conocimientos, veremos que no es difcil
completar estas acciones ya creadas con las nuestras propias.
Explicaremos las Acciones ms importantes, y a medida que avancemos en el curso,
aadiremos algunas ms. Para una referencia ms completa, recomendamos mirar la
ayuda del programa.
Las acciones son mtodos de los objetos (funciones internas a estos), por lo que no
todas estn disponibles para todos los objetos.
Definiremos las acciones escribiendo su cabecera (nombre + parmetros con un
nombre genrico) para despus explicar qu es cada parmetro.
Acciones - Control de pelcula

Estas acciones se emplean, como su nombre indica, para controlar el flujo de nuestra
pelcula, esto es, para indicar a Flash en todo momento qu fotograma tiene que mostrar,
cundo tiene que parar, dnde seguir etc...
Estas acciones son mtodos de la clase MovieClip. Podemos aplicarlas a cualquier
MovieClip

de

nuestra

pelcula,

siguiendo

el

siguiente

formato: nombreMovieClip.accion();. Si escribimos la funcin directamente, es

decir, si no indicamos el objeto, estamos haciendo referencia a la pelcula general.
Veamos las ms importantes para entenderlas mejor:
gotoAndPlay: Esta accin ser, probablemente la que ms usemos durante la
realizacin de nuestras pelculas. La accin que realiza consiste en mover la cabeza
lectora al fotograma que le indiquemos. La cabeza lectora es lo que determina qu
fotograma de nuestra pelcula se est reproduciendo en cada momento. Si, por ejemplo,
lo movemos del fotograma 1 al 25, lo que veremos instantneamente ser el fotograma
25 y la pelcula continuar reproducindose a partir de ah.
Sintaxis:
gotoAndPlay(escena, fotograma):
oescena: Nombre de la escena a la que queremos enviar la cabeza lectora.
Debe ir entre comillas dobles.
ofotograma: Nmero o nombre del fotograma al que queremos enviar la
cabeza lectora. Si es un nombre (una etiqueta), debe ir entre comillas
dobles, si es un nmero, no.
Ejemplo:
miClip.gotoAndPlay("Escena2", 7); Esta accin lleva la cabeza lectora al
fotograma 7 de la escena llamada "Escena2" del MovieClip con el nombre de
instancia miClip.
play: Da comienzo a la reproduccin de la pelcula o la contina desde el punto detenido.
Sintaxis:
play();
No tiene Parmetros.
Ejemplo:
this.play(); Inicia la reproduccin del objeto actual.
stop: Detiene la reproduccin de la pelcula. Se puede usar en un fotograma, cuando
queramos detenernos en l (porque es un men, por ejemplo), en un botn, (para que
detenga la pelcula), etc..
Sintaxis:
stop();
No tiene Parmetros.

Acciones - Navegador / Red

Estas acciones tienen diversas funciones, describimos las ms importantes:
fscommand: Esta accin, es capaz de ejecutar ciertos comandos muy potentes. Lo ms
cmodo es pasar a Asistente de Script (sino estbamos ya) e insertarla, nos aparecer
una pestaa con los posibles comandos que admite. Sirve para interactuar con la
aplicacin que reproduce la pelcula, por ejemplo Flash Player o el navegador web, como
IE o Firefox. Veamos esos comandos:

fullscreen (true o false): Si se activa pone nuestra pelcula a pantalla

completa. Muy til para presentaciones en CD-Rom, por ejemplo.

allowscale (true o false): Controla el redimensionamiento de los objetos

insertados en la pelcula cuando el usuario estira los bordes de la misma (o de
la pgina web en la que se encuentre) Queremos mantener las
proporciones? Este comando nos permite controlarlo.
showmenu (true o false): Si has visto el men que aparece al pulsar el botn
derecho del ratn sobre una pelcula Flash, seguro que has pensado en
hacerlo desaparecer ... puede que no interese que los usuarios puedan
moverse a sus anchas por nuestra pelcula. Ejecutando esta sentencia del
modo adecuado (false), podremos ocultarlo.
trepallkeys (true o false): Sirve para detectar las pulsaciones de todas las
teclas durante la reproduccin de nuestras pelculas.
exec (ruta de la aplicacin): Ejecuta una aplicacin desde el reproductor.
quit (ninguno): Cierra el reproductor Flash.

Todas estas alternativas, comparten modo de uso, vemoslo:

Sintaxis:
fscommand(comando, [argumentos])

comando: El comando a ejecutar (fullscreen, allowscale, etc...)

argumentos: En la mayora de los casos debemos escribir true o false,

segn queramos desactivar la opcin o activarla. Por ejemplo, en el caso
del comando quit lo dejaremos vaco.

Ejemplo:
fscommand("fullscreen", "true"); -> Activa la pantalla completa.
navigateToURL() : Esta accin se emplea para abrir el navegador web e ir a la pgina
indicada.
Sintaxis:
navigateToURL(url , [ventana]);

url: Direccin web a la que queremos acceder (se abrir una ventana).
Este parmetro es un objeto del tipo URLRequest. Si queremos utilizar
una direccin como cadena de texto, podemos hacerlo escribiendo new
URLRequest("http://www.direccion.coms").

ventana: Parmetro OPCIONAL. Modo en el que queremos abrir la

ventana (en la ventana actual (_self) en otra nueva (_blank) etc...).

Ejemplo:
navigateToURL(new
URLRequest("http://www.aulaclic.es"),
"_blank"); --> Abre la web de aulaClic en una ventana nueva.
load(): Este mtodo nos permite cargar nuevas pelculas Flash o imgenes en nuestra
pelcula de forma dinmica (la pelcula se cargar cuando se lo indiquemos, y no antes),
en un objeto de la clase Loader, o cargar informacin en un objeto URLLoader. Para
utilizarlo, primero tenemos que crear un objeto de este tipo.
Sintaxis:
objetoCargador.load(direccion:URLRequest, [contexto]);

direccion: Direccin absoluta o relativa donde est situada la pelcula

SWF o la imagen a cargar. Es un objeto URLRequest, como en el caso
de navigateToURL().

contexto: Es un parmetro opcional, en el que se indica algunas

propiedades ms avanzadas que no veremos en este curso.

Ejemplo:
var cargadorPeli:Loader = new Loader(); -> Creamos un objeto Loader donde
cargar
el
archivo.
cargadorPeli:Loader.load(new URLRequest("archivo.swf"));-> LLamamos
al
mtodo
load()
para
que
cargue
el
archivo
indicado.
Nota: Cargamos el archivo en nuestra pelcula, pero no lo mostramos. Para verlo,
tenemos que aadir el cargador a la lista de visualizacin, como ya veremos, por ejemplo
conaddChild(cargadorPeli);.
Acciones - Condiciones
Estas acciones sirven para controlar la lgica de la pelcula. Se puede decir que nos
permiten "hablar" con Flash para indicarle lo que debe hacer ante distintas situaciones.
Por ejemplo, ahora que conocemos algunas Acciones, Cmo indicarle a Flash que "si la
variable x = 3, entonces vaya al fotograma 5, y si no, vaya al fotograma 10"?. Sabemos
comparar, sabemos ir a los fotogramas, pero no sabemos decirle a Flash "Si pasa esto,
haz una cosa, y si no, haz la otra...". Veamos cmo decrselo:
if ... else: Si partimos de que la traduccin literal de if es "si..." y la de else es "si no ...",
nos encontramos de repente con todas las herramientas para decirle a Flash: "si (pasa
una
condicin)
{haz
esto}
si
no
{haz
lo
otro}"
Veamos antes que nada su sintaxis para comprenderlo mejor:
Sintaxis:
if
(condicin)
{sentencias_si_no; }

{sentencia_si_se_cumple;

else

if: Indica que accin que viene a continuacin entre parntesis es una condicin.

condicion: Indica una condicin que debe cumplirse, es decir, debe tener como
resultado true, o lo que es lo mismo, verdadero, o lo que es lo mismo, 1. De ah la
importancia de los operadores de comparacin y el valor que devuelven. La
condicin siempre debe de ir entre parntesis.
sentencia_si_se_cumple;: Conjunto de acciones que sucedern si la condicin se
evala como verdadera. Estas sentencias deben de ir entre llaves. Podemos poner
el bloque de cdigo que queramos: varias lneas, objetos, otros if...
else: Especifica la alternativa si condicin se evala a falsa. Es optativo. Si no
existe, y no se cumple la condicin, no se har nada, pues no lo hemos especificado.

sentencias_si_no; Conjunto de acciones que sucedern si la condicin se evala

como falsa. Deben incluirse entre llaves.

Ejemplo:
if (x == 2) {miClip.gotoAndPlay(6); } --> Si la variable x vale 2, entonces saltamos al
fotograma 6 de miClip, si no, no hacemos nada.
if (y > 7) { stop(); } else {gotoAndPlay(1); } --> si la variable y es mayor que 7, paramos
la pelcula, sino, volvemos al fotograma 1.
Acciones - Navegador / Red
Estas acciones tienen diversas funciones, describimos las ms importantes:
fscommand: Esta accin, es capaz de ejecutar ciertos comandos muy potentes. Lo ms
cmodo es pasar a Asistente de Script (sino estbamos ya) e insertarla, nos aparecer
una pestaa con los posibles comandos que admite. Sirve para interactuar con la
aplicacin que reproduce la pelcula, por ejemplo Flash Player o el navegador web, como
IE o Firefox. Veamos esos comandos:

fullscreen (true o false): Si se activa pone nuestra pelcula a pantalla

completa. Muy til para presentaciones en CD-Rom, por ejemplo.

allowscale (true o false): Controla el redimensionamiento de los objetos

insertados en la pelcula cuando el usuario estira los bordes de la misma (o de
la pgina web en la que se encuentre) Queremos mantener las
proporciones? Este comando nos permite controlarlo.
showmenu (true o false): Si has visto el men que aparece al pulsar el botn
derecho del ratn sobre una pelcula Flash, seguro que has pensado en
hacerlo desaparecer ... puede que no interese que los usuarios puedan
moverse a sus anchas por nuestra pelcula. Ejecutando esta sentencia del
modo adecuado (false), podremos ocultarlo.
trepallkeys (true o false): Sirve para detectar las pulsaciones de todas las
teclas durante la reproduccin de nuestras pelculas.
exec (ruta de la aplicacin): Ejecuta una aplicacin desde el reproductor.
quit (ninguno): Cierra el reproductor Flash.

Todas estas alternativas, comparten modo de uso, vemoslo:

Sintaxis:
fscommand(comando, [argumentos])

comando: El comando a ejecutar (fullscreen, allowscale, etc...)

argumentos: En la mayora de los casos debemos escribir true o false,

segn queramos desactivar la opcin o activarla. Por ejemplo, en el caso
del comando quit lo dejaremos vaco.

Ejemplo:
fscommand("fullscreen", "true"); -> Activa la pantalla completa.
navigateToURL() : Esta accin se emplea para abrir el navegador web e ir a la pgina
indicada.
Sintaxis:
navigateToURL(url , [ventana]);

url: Direccin web a la que queremos acceder (se abrir una ventana).
Este parmetro es un objeto del tipo URLRequest. Si queremos utilizar
una direccin como cadena de texto, podemos hacerlo escribiendo new
URLRequest("http://www.direccion.coms").

ventana: Parmetro OPCIONAL. Modo en el que queremos abrir la

ventana (en la ventana actual (_self) en otra nueva (_blank) etc...).

Ejemplo:
navigateToURL(new
URLRequest("http://www.aulaclic.es"),
"_blank"); --> Abre la web de aulaClic en una ventana nueva.
load(): Este mtodo nos permite cargar nuevas pelculas Flash o imgenes en nuestra
pelcula de forma dinmica (la pelcula se cargar cuando se lo indiquemos, y no antes),
en un objeto de la clase Loader, o cargar informacin en un objeto URLLoader. Para
utilizarlo, primero tenemos que crear un objeto de este tipo.
Sintaxis:
objetoCargador.load(direccion:URLRequest, [contexto]);

direccion: Direccin absoluta o relativa donde est situada la pelcula

SWF o la imagen a cargar. Es un objeto URLRequest, como en el caso
de navigateToURL().

contexto: Es un parmetro opcional, en el que se indica algunas

propiedades ms avanzadas que no veremos en este curso.

Ejemplo:
var cargadorPeli:Loader = new Loader(); -> Creamos un objeto Loader donde
cargar
el
archivo.
cargadorPeli:Loader.load(new URLRequest("archivo.swf"));-> LLamamos
al
mtodo
load()
para
que
cargue
el
archivo
indicado.
Nota: Cargamos el archivo en nuestra pelcula, pero no lo mostramos. Para verlo,
tenemos que aadir el cargador a la lista de visualizacin, como ya veremos, por ejemplo
conaddChild(cargadorPeli);.
Acciones - Condiciones
Estas acciones sirven para controlar la lgica de la pelcula. Se puede decir que nos
permiten "hablar" con Flash para indicarle lo que debe hacer ante distintas situaciones.
Por ejemplo, ahora que conocemos algunas Acciones, Cmo indicarle a Flash que "si la
variable x = 3, entonces vaya al fotograma 5, y si no, vaya al fotograma 10"?. Sabemos
comparar, sabemos ir a los fotogramas, pero no sabemos decirle a Flash "Si pasa esto,
haz una cosa, y si no, haz la otra...". Veamos cmo decrselo:
if ... else: Si partimos de que la traduccin literal de if es "si..." y la de else es "si no ...",
nos encontramos de repente con todas las herramientas para decirle a Flash: "si (pasa
una
condicin)
{haz
esto}
si
no
{haz
lo
otro}"
Veamos antes que nada su sintaxis para comprenderlo mejor:
Sintaxis:
if
(condicin)
{sentencias_si_no; }

{sentencia_si_se_cumple;

else

if: Indica que accin que viene a continuacin entre parntesis es una condicin.

condicion: Indica una condicin que debe cumplirse, es decir, debe tener como
resultado true, o lo que es lo mismo, verdadero, o lo que es lo mismo, 1. De ah la
importancia de los operadores de comparacin y el valor que devuelven. La
condicin siempre debe de ir entre parntesis.
sentencia_si_se_cumple;: Conjunto de acciones que sucedern si la condicin se
evala como verdadera. Estas sentencias deben de ir entre llaves. Podemos poner
el bloque de cdigo que queramos: varias lneas, objetos, otros if...
else: Especifica la alternativa si condicin se evala a falsa. Es optativo. Si no
existe, y no se cumple la condicin, no se har nada, pues no lo hemos especificado.
sentencias_si_no; Conjunto de acciones que sucedern si la condicin se evala
como falsa. Deben incluirse entre llaves.

Ejemplo:
if (x == 2) {miClip.gotoAndPlay(6); } --> Si la variable x vale 2, entonces saltamos al
fotograma 6 de miClip, si no, no hacemos nada.
if (y > 7) { stop(); } else {gotoAndPlay(1); } --> si la variable y es mayor que 7, paramos
la pelcula, sino, volvemos al fotograma 1.

Propiedades de MovieClip.
framesloaded
Slo lectura. Son los fotogramas de un clip de pelcula o de la pelcula principal que
el sistema lleva cargados en memoria. (Si se usa sin nombre de objeto delante
obtenemos los fotogramas cargados de la pelcula principal). Muy til para crear
cargadores o "preloaders".
totalframes
Slo lectura. Devuelve la cantidad de fotogramas que contiene el clip de pelcula al
que hace referencia. Si se emplea sin ningn nombre delante, nos devuelve la
cantidad de fotogramas de la pelcula Flash actual. Tambin usado en la creacin de
cargadores (en el tema siguiente veremos cmo utilizar estas propiedades).
currentFrame
Slo lectura. Indica el nmero de frame en el que se encuentra la cabeza de
reproduccin del MovieClip.

Veremos un ejemplo para utilizar ActionScript y referirnos a las propiedades de los

smbolos de nuestras pelculas. Creamos dos rectngulos, y los convertimos a smbolos,
uno como botn y otro como clip de pelcula. Lo primero que debemos hacer es darles un
nombre de instancia (al cual nos referiremos cuando escribamos el cdigo). Para ello, y
con el smbolo seleccionado abrimos el panel Propiedades.

Remplazamos

el

texto <nombre

de

instancia> por

el

nombre.

Por

ejemplo boton_reducir para el botn y rectangulo para el clip. Los objetos estarn listos
para ser tratados.
Vamos al panel de acciones, y escribimos el siguiente cdigo, para que al pulsar el
botn, el clip del rectngulo reduzca su tamao a la mitad.
?

1
2
3
4
5
6
7

boton_reducir.addEventListener(MouseEvent.CLICK, encogerRectangulo);
function encogerRectangulo(event):void
{
rectangulo.height = rectangulo.height / 2;
rectangulo.width = rectangulo.width / 2;
}

Como veremos ms adelante, indicamos al botn que cuando hagan clic, llame a la
funcin encogerRectangulo. Esta funcin, lee el valor de las propiedades alto y ancho
del clip, las divide entre dos, y se las vuelve a asignar. Con esto, reduce el tamao a la
mitad.

17.1. Ejemplos de uso del cdigo ActionScript

Vamos a mostrar los usos ms caractersticos de cdigo ActionScript en los diferentes
objetos existentes en Flash CS5. De este modo lo comprenderemos mejor y porqu no,
nos ahorraremos trabajo al tener ya hechos aqu muchos de los cdigos que usaremos en
nuestras pelculas. Mostraremos el cdigo y a continuacin, una explicacin del mismo.
Algunas cosas que debemos de tener en cuenta si estamos familiarizados con la
programacin en ActionScript 2, es que con ActionScript 3.0 no podemos utilizar:
1. alert()
2. La forma de tratar eventos, como on (event){}, onClipEvent(event){}, object.onEvent
= function(){} , addListener , etc. La forma de tratarlos ahora es agregando un
escuchador al objeto, con el mtodoaddEventListener, indicando el evento, y una
nica funcin de escucha.
3. Guiones bajos ( _ ) antes del nombre de las propiedades.
4. Variables globales (_global).
5. _root y _parent para acceder a elementos superiores.

Muchas de las funciones que explicaremos se pueden insertar total o parcialmente

desde el panel Fragmentos de cdigo.

17.2. Cdigo ActionScript para botones

Los Botones (objeto Button para Flash CS5) tienen mucha utilidad siempre que
queramos que nuestra pelcula interacte con el usuario. Dado que esto va a ser
prcticamente siempre, es conveniente estudiar y entender bien algunos cdigos tpicos
que tendremos que usar para conseguir nuestros propsitos.
En realidad, los botones se comportan como cualquier smbolo. A todos les podemos
aplicar eventos, ya que lo que hacemos es asociarlos normalmente al clic del ratn. Los
botones tienen la ventaja de que nos permiten representar distintos estados, mejorando la
percepcin de interactividad.
Para tener el cdigo organizado, es mejor crear una nueva capa e insertarlo ah.
Veamos algunos de ellos:
?

1
2
3
4
5
6
7
8

import flash.events.MouseEvent;
miBoton.addEventListener(MouseEvent.CLICK, funcionAlHacerClick);
function funcionAlHacerClick(event:MouseEvent):void
{
this.gotoAndPlay(15);
}

Esta accin provoca que al hacer clic en el botn vayamos directamente al Fotograma
nmero 15 de la pelcula.
Utiliza la sentencia import para especificar el nombre completo de la clase, de modo
que el compilador de ActionScript sepa dnde encontrarlo. En este momento queremos
importar la clase MouseEvent, le especificamos la clase de flash que debe importar:
import flash.events.MouseEvent;
La segunda lnea indicamos qu tiene que suceder (el evento) para que se realice la
funcin que indicamos "funcionAlHacerClick".
En la tercera lnea ya indicamos nuestra funcin y dentro escribimos lo que queremos
que pase al hacer clic en el botn.

1
2
3
4
5
6
7
8

import flash.events.*;
import flash.net.*;
miBoton.addEventListener(MouseEvent.CLICK, miFuncion);
var miURL:URLRequest = new URLRequest("http://www.aulaclic.es");
function miFuncion(event:MouseEvent):void
{
navigateToURL(miURL, "_blank");
}

Esta accin provoca que al pulsar un botn se abra una nueva pgina web en nuestro
navegador por defecto y nos muestre la pgina www.aulaclic.es
La primera lnea, la segunda y la tercera tienen la misma funcin que en el caso anterior
La cuarta lnea creamos una variable nueva para pasarle la web a la cual queremos que
nos lleve al pulsar el botn.
?

1
2
3
4
5
6

import flash.events.*;
miBoton.addEventListener(MouseEvent.CLICK, miFuncion);
function miFuncion(event:MouseEvent):void
{
r1.width=350;
}

Esta accin provoca que al pulsar un botn se modifiquen las propiedades del objeto
cuyo nombre de instancia aparece delante de la propiedad.
La primera lnea y la segunda tienen la misma funcin que en el caso anterior
En la tercera lnea definimos la funcin y podemos ver la propiedad .width (anchura),
vemos que hay un operador de asignacin ( = ), luego deducimos que vamos a asignar
una anchura determinada a un objeto. Qu anchura? Pues 350, que es la cantidad que
aparece en la parte derecha de la expresin. Y a qu objeto? Al que va delante del ".", o
lo que es lo mismo, al afectado por la propiedad.
Por tanto, al pulsar el botn vamos a modificar la anchura del objeto r1, que pasar a
ser de 350 px.

17.3. Cdigo ActionScript para Clips de pelcula

Los Clips de Pelcula (objeto MovieClip) son pelculas dentro de pelculas. Pueden tener
cdigo AS dentro de s mismos, aunque suele ser ms comn que algn otro cdigo
externo (situado en fotogramas) les haga referencia. Para que el cdigo que contengan
los clips de pelcula sea vlido, stos deben tener algn evento de clip asociado (Load,
KeyDown etc) que determine cundo se ejecutar este cdigo (al cargarse el clip, al
pulsar alguna tecla ...)
?

1
2
3
4
5
6

import flash.events.*;
miBoton.addEventListener(MouseEvent.CLICK, miFuncion);
function miFuncion(event:MouseEvent):void
{
r1.gotoAndPlay(2);
}

Esta accin provoca que al pulsar un botn vayamos al fotograma 2 de un Clip de

Pelcula determinado. El fotograma de la pelcula principal no variar.
Las primeras lneas son las comentadas anteriormente.
Partimos de una pelcula con 2 fotogramas distintos.
En el primer fotograma estn el botn y el clip de pelcula (r1) correspondientes. El clip
de pelcula tiene en su lnea de tiempos una animacin, inicialmente detenida. Veamos
que pasa si se accede a su fotograma 2.
En el segundo fotograma no nos importa lo que haya porque la accin situada a la
izquierda no nos llevar hasta all. La cabeza lectora de la pelcula principal
es independiente.

17.4. Sonidos con ActionScript 3

Aunque la idea de objeto no suele llevarnos a pensar en un sonido, en Flash CS5 los
sonidos tambin son objetos y podemos manejarlos usando adecuadamente ActionScript.
Veamos unos cuantos cdigos muy comunes y un completo ejemplo de cmo usarlos:
?

1
2
3
4
5

//Cdigo 1
var req:URLRequest = new URLRequest("sonido.mp3");
var musica:Sound = new Sound(req);
var canal:SoundChannel = new SoundChannel();
sonido.mp3 es el nombre del archivo de sonido que se va a cargar, seria aqu donde
deberamos sustituir ste y poner el nombre del sonido que queramos nosotros, y deber

encontrarse en el mismo directorio que se encuentre el archivo Flash que estamos

creando, o indicar la ruta completa.
En musica, que es un objeto Sound, almacenamos el sonido. Para controlarlo,
utilizaremos canal, un objeto SoundChanel.
?

1
2
3

// Cdigo 2
canal.stop();
Este cdigo detiene el sonido que se est reproduciendo por el canal de sonido canal.

1
2
3
4

// Cdigo 3
canal.stop();
canal = musica.play(0,99);
La primera lnea detiene el sonido, como hemos visto antes.
La segunda, provoca que el sonido musica comience a reproducirse (play) a partir de
su posicin inicial (el 0 indica los segundos transcurridos desde el comienzo) y lo haga 99
veces (esto se llama loop o bucle). Si ponemos slo musica.play();, se reproducir
desde el principio y slo una vez, como vemos en el siguiente cdigo:

1
2
3
4

//

Cdigo 4

canal.stop();
canal = musica.play();
Ahora que ya sabemos controlar los sonidos mediante ActionScript, veamos un ejemplo
que rene todo lo visto anteriormente.
En este ejemplo:
- Tenemos un nico fotograma con 3 botones. En este fotograma tenemos insertado
el Cdigo 1.
- Los 3 botones tienen distintas funcionalidades:
- En el botn rojo, est insertado el Cdigo 2
- En el botn azul, est insertado el Cdigo 3
- En el botn verde, est insertado el Cdigo 4

17.5. El objeto MATH

Como ya sabemos, los objetos no visibles tambin se controlan con ActionScript.
Vamos a ver algunos ejemplos del funcionamiento del objeto Math y cmo sacarle partido.
x = Math.random();
El mtodo random del objeto Math genera un nmero aleatorio entre 0 y 1. En este
caso, el resultado lo almacenamos en la variable x, para poder usarlo despus...
Las utilidades de este mtodo son muchas, generar claves secretas, passwords,
nmeros de lotera etc...

x = Math.round(4.3);
El Mtodo "round" REDONDEA el parmetro introducido eliminando la parte decimal del
mismo. Aunque nuestra configuracin utilice la coma para separar los decimales, en Flash
debemos utilizar el punto.
En el ejemplo, x pasara a valer 4.

x = Math.max(5 , 2);
El Mtodo "max" obtiene el valor mximo entre 2 nmeros.
En el ejemplo, x pasara a valer 5.

El objeto Math es muy til y nos ahorra mucho trabajo, pues hay multitud de
operaciones que responden a alguno de sus mtodos y que no tenemos porqu
implementar. Basta buscarlos en el manual y usarlos.

17.6. Creacin de un cargador o preloader

Vamos a analizar el cdigo de un cargador o preloader para acabar de afianzar
nuestros conocimientos de ActionScript:
Los cargadores o preloaders slo son necesarios cuando las pelculas adquieren un
tamao considerable y resulta inviable visionar la pelcula sin tenerla toda cargada (porque

se atasca, aparecen partes incompletas etc...). Vamos a suponer pues, que tenemos una
pelcula con 150 fotogramas. Los 3 primeros los reservaremos para crear nuestro
cargador. En el Fotograma 4 comienza la pelcula.
Nota: Junto a cada lnea hemos insertado comentarios (texto entre los smbolos /* y */)
que son lneas que Flash reconoce como tales y que no tiene en cuenta a la hora de
ejecutar el cdigo (es como si no existieran). Se usan para clarificar y explicar el cdigo
que escribamos y para eso lo usaremos a continuacin. Les cambiaremos el color para
aclarar que es un comentario. Evidentemente no son necesarios en el cdigo que
finalmente insertemos en nuestra pelcula.
Este es el cdigo que insertaremos:
?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

/* FOTOGRAMA 1 */
var bytes_totales:Number;
var bytes_cargados:Number;
var porcentaje:Number;

/*Estas son las variable que iremos utilizando*

bytes_totales = this.getBytesTotal();

/* Hallamos el tamao de nuestra pelcu

con la propiedad "getBytesTotal()" y
en la variable bytes_totales. */

//----------------------------------------------------------------------------/* FOTOGRAMA 2 */
bytes_cargados = this.getBytesLoaded();
/* Hallamos los bytes que llevamos carg
hasta el momento. Este valor lo asig
variable bytes_cargados */
if (bytes_cargados >= bytes_totales) {
/* Esta es la lgica del cargador. Si l
los mismos bytes o ms de los que oc
la siguiente lnea */
this.gotoAndPlay(4);
/* Si hemos llegado hasta aqu es porque tod
cargada en memoria (bytes_cargados >
comenzar a ver la pelcula. Ejecutam
llevar hasta al fotograma donde co
} else {
/* Si aun no hemos cargado toda la pelc
porcentaje = ((bytes_cargados/bytes_totales)*100);/* Averiguamos el porcentaj
realizando la divisin en
y los bytes_totales y mul
txt_salida.text = Math.floor(porcentaje)+"%";
/* Mostramos en el texto "tx
que llevamos junto al smb
porcentaje de pelcula que
}

//----------------------------------------------------------------------------/* FOTOGRAMA 3 */
this.gotoAndPlay(2);
/* Si llegamos al fotograma 3 es porque no est cargada to
estaramos ya en el fotograma 4. Como an no est cargada, volvem
para ver si ya lo est (mediante gotoAndPlay(2);). Esto lo haremo
falta para dar tiempo al ordenador del usuario a ir cargando en m

35
36
Resumiendo:
Fotograma 1: En el Fotograma 1 se calculan los bytes totales que ocupa la pelcula.
Despus pasamos al Fotograma 2.
Fotograma 2: Cada vez que accedamos al Fotograma 2, nuestro cdigo ActionScript
averigua los bytes que llevamos cargados en memoria y los compara con los totales (que
se hallaron en el Fotograma 1 y no vuelven a averiguarse, pues no varan). Si ya est toda
la pelcula cargada, vamos al fotograma 4 y comenzamos a reproducir la pelcula, sino,
pasamos al fotograma 3
Fotograma 3: El Fotograma 3 volver a mandar la cabeza lectora al fotograma 2.
Haciendo este ciclo, damos tiempo al ordenador a ir cargando poco a poco la pelcula,
hasta que llegue un momento que est toda cargada y pasemos al Fotograma 4. El
clculo del porcentaje es un "adorno" que nos permitimos, pues con un poco ms de
esfuerzo averiguamos cunta pelcula llevamos cargada y la mostramos por pantalla de
un modo elegante (en porcentaje) haciendo la espera del usuario menos aburrida.
Fotograma 4: Aqu comienza la pelcula... (Ya no se volver nunca a ninguno de los
fotogramas anteriores).
Abajo mostramos el resultado. La pelcula se comenzar a cargar al pulsar el botn. El
cdigo insertado es el que se muestra arriba, no hay NADA MS. Tan slo se han aadido
unos textos y unas imgenes para aumentar el tamao de la pelcula, de lo contrario la
carga sera demasiado rpida y no llegara a verse.
Tambin se ha insertado el texto dinmico que muestra el porcentaje.
Si el cargador no llega a verse, lo ms probable sea que ya est cargada en la memoria
cach del ordenador o que estis viendo este curso desde el DVD o desde vuestro propio
Disco Duro, donde la velocidad de descarga es tan rpida que sera necesaria una
pelcula de varios MBytes para que hiciera falta un cargador. Podemos encontrar otro
ejemplo de cargador en los videotutoriales del curso.
Probad el cdigo en una pelcula que coloquis en un servidor web y podris ver los
resultados sin problemas.

18.1. Introduccin

En este tema veremos los puntos ms importantes en los que te podrs apoyar para
realizar tus animaciones en Flash usando ActionScript.
Esta unidad, la de Navegacin, est especialmente orientada a la web, pues veremos
cmo crear elementos que te ayudarn ms tarde a crear tus propias presentaciones,
secciones, etc. Todo ello apoyado con animaciones y vinculadas entre s.
A lo largo del tema utilizaremos este ejemplo para ilustrar la teora de forma guiada.

18.2. Los Botones

Uno de los elementos que ms nos van a ayudar a la hora de aadir interactividad en el
diseo son los botones.
En el ejemplo nos hemos ayudado de los botones para crear la navegacin entre las
diferentes secciones.

As que el primer paso, despus de haber creado la interfaz de la pelcula en una capa,
ser crear e insertar los botones en una nueva capa para trabajar con mayor facilidad.
Para asignarle una accin a un botn es necesario darle un nombre de instancia.
Para ello (y como hemos visto en unidades anteriores) escribimos el nombre que
queramos (al cual nos referiremos ms tarde para llamar al botn) en el Inspector de
Propiedades, en este caso lo hemos llamado equipo.

Luego, creamos otra capa para poder insertar las acciones que necesitarn nuestros
botones, abrimos el Panel Acciones y aadiremos el cdigo que deber realizar el botn.
sta es la parte ms importante pues deberemos decidir a qu evento responder el
botn. Existen varios eventos que son capturados en Flash, nombraremos los ms
importantes

(echa

un

vistazo

la

seccin Controladores

de

evento del

panel Fragmentos de cdigo).:

MouseEvent.CLICK: ejecuta la accin al hacer clic con el ratn..

MouseEvent.MOUSE_DOWN: ejecuta la accin al presionarse el botn.

MouseEvent.MOUSE_UP: ejecuta la accin al soltarse el botn (despus de
haberlo presionado).
MouseEvent.MOUSE_OVER: ejecuta la accin al desplazar el cursor dentro del
botn
MouseEvent.MOUSE_OUT: ejecuta la accin al desplazar el cursor fuera del botn.

Nota: ActionScript diferencia entre maysculas y minsculas, por lo que si

escribes, por ejemplo, mouse_up no ser reconocido.
Para capturar el evento tenemos que aadir un escuchador que se encargue de estar
pendiente de si sucede ese evento, al elemento correspondiente. En nuestro caso, al
botn. Adems del evento, debemos de indicar el nombre de una funcin, que ser el
cdigo que se ejecute al producirse el evento.
Por tanto, si no hemos creado ya esa funcin, la tenemos que definir, con el mismo
nombre y pasndole como parmetro el evento. Como siempre, entre las llaves {}
introduciremos el cdigo que queremos que ejecute la funcin.
?

miBoton.addEventListener(MouseEvent.CLICK, miFuncion);

2
3
4
5
6

function miFuncion(e:MouseEvent):void
{
//cdigo de la funcin
}
Puedes ver los todos los eventos de ratn en este avanzado

. Los eventos de ratn

no slo afectan a botones, pueden ser capturados por cualquier objeto de visualizacin
(MovieClips, controles de formulario, imgenes, etc...).

18.3. Controladores de la lnea de tiempo

Una vez insertados los botones y definidos los eventos sobre los que deben actuar,
tendremos que decidir qu queremos que hagan.
De esta forma podremos crear dinamismo entre nuestras secciones.
Imagina que tenemos la siguiente lnea de tiempo:

Observa la capa Contenido. En ella se encuentran todo el contenido de las secciones.

De esta forma, si no aplicsemos ninguna accin sobre la lnea de tiempo, todas las
secciones se ejecutaran una seguida de la otra. Lo que queremos conseguir es que se
ejecute la primera (para mostrar la seccin principal) y el cabezal se pare hasta nueva
orden (para mostrar la segunda).
Para ello utilizaremos la funcin stop().
Esta funcin sirve para parar el cabezal de la lnea de tiempo donde sea colocada.
As que seleccionamos el ltimo fotograma de la seccin y abrimos el Panel Acciones.
All deberemos escribir nicamente la lnea:
?

stop();
Esto har que cuando la animacin llegue a ese punto se detenga a la espera de nueva
orden.

Nosotros hemos colocado las acciones en una capa aparte llamada Acciones para as
poder acceder ms rpido a ella. El mtodo es el mismo, solamente habr que
crear fotogramas claves en aquellos sitios en los que queramos insertar un stop().

Ya hemos conseguido detener la presentacin. Pero, cmo hacemos que se muestre

la segunda? Muy sencillo.
Los botones nos ayudarn a desplazar el cabezal por la lnea de tiempo. As que
modificaremos el cdigo de uno de los botones:
?

1
2
3
4
5
6
7
8

import flash.events.MouseEvent;
encuentranos.addEventListener(MouseEvent.CLICK,botonenc);
function botonenc(event:MouseEvent):void
{
gotoAndPlay("Encuentranos");
}

De esta forma, al hacer clic sobre ese botn, el cabezal de reproduccin se

desplazar hasta el fotograma que tiene la etiqueta "Encuentranos" y reproducir a partir
de all.
Si aadimos un stop() en el ltimo fotograma de la segunda seccin, cuando ste se
reproduzca se parar y el contenido permanecer esttico en espera de una nueva orden.

Existe otra forma, muy til, para nombrar los fotogramas. Del mismo modo que
dbamos un nombre de instancia a un botn lo haremos con un fotograma.
Basta con introducir una Etiqueta de fotograma para poder remitir el cabezal a ste:

Adems de estos controladores podemos utilizar tambin:

gotoAndStop(fotograma), que situar el cabezal en el fotograma indicado y parar

la reproduccin.

play(), que har que la reproduccin prosiga en el fotograma en el que se encuentre

el cabezal.
prevFrame(), que har que el cabezal retroceda al fotograma anterior al que nos
encontramos.
nextFrame(), que har que el cabezal avance al fotograma siguiente al que nos
encontramos.

Existen los controladores prevScene() y nextScene() que hacen avanzar el cabezal a

escenas anteriores o siguientes. As que veremos qu son las escenas para poder
utilizarlos tambin.

En el panel Fragmentos de cdigo encontramos algunas funciones que nos pueden

ser de ayuda, en la carpeta Navegacin por la lnea de tiempo.

18.4. Las escenas

Flash permite el uso de escenas para separar diferentes temas en una sola pelcula. Se
suelen utilizar sobre todo en animaciones, donde una parte de la accin transcurre sobre
un fondo y la siguiente sobre otro completamente diferente.
De este modo podemos usar las escenas para representar diferentes secciones muy
diferentes en nuestra pelcula, por ejemplo, crear una escena para el cargador, otra para
la pelcula principal y una tercera para una seccin que se diferencie completamente del
resto y nos sea ms cmodo trabajar con ella independientemente.

A pesar del hecho de que las escenas se trabajan como lneas de tiempo diferentes, al
crear el archivo SWF stas se alinean en orden reproducindose una detrs de otra.
Por ello, al publicar el documento los fotogramas de las escenas se numerarn respecto
a esto. Es decir, si tenemos una primera escena que va del fotograma 1 al 50, la segunda
escena comenzar en el fotograma 51.
Todo esto hace que las escenas, en algunos casos estn desaconsejadas por las
siguientes razones:

El uso de escenas obliga al usuario a descargar el documento en su totalidad, a

pesar de que es posible que no navegue por todas las secciones. Existe la
posibilidad, como veremos ms adelante, de cargar en cualquier momento archivos
SWF para reproducirlos en la pantalla principal. De esta forma emularamos el uso
de las escenas cargando diferentes documentos dependiendo de la seccin a
mostrar.

Cuando aadimos ActionScript a nuestras escenas el resultado puede ser, a veces,

imprevisible. Como hemos explicado anteriormente, al crearse un archivo con una
lnea de tiempo continua las acciones a realizar pueden ser inesperadas.

En el Panel Escena (brelo desde Ventana Otros paneles Escena) podrs ver
las escenas actuales de la pelcula.

En principio solamente encontrars una (Escena 1), es posible aadir ms escenas

pulsando el botn Aadir escena

. Para cambiar el nombre de una escena haz doble

clic sobre su nombre en el panel y escribe el que quieras.

Puedes eliminar una escena utilizando el botn Eliminar escena
botn Duplicar escena

o duplicarla con el

Como hemos comentado antes (y si no existe cdigo ActionScript que modifique esto)
las escenas se reproducen una despus de la otra en el orden en el que se encuentran en
el Panel Escena. Puedes cambiar este orden con solo arrastrar y colocar la escena en
cuestin en su lugar correspondiente.
Trabajar con una escena es muy sencillo, basta con seleccionarla en el panel y su
contenido se mostrar en el Escenario. Podrs trabajar con ella como si se tratase de una
pelcula independiente.

Pero veamos cmo podemos utilizar ActionScript para desplazarnos de escena a

escena.
Antes hemos mencionado las funciones prevScene() y nextScene(). Estos comandos
hacen que el cabezal de reproduccin se desplace de una escena a otra en el orden en el
que se encuentran en elPanel Escena.
Pero existe otra posibilidad.
Segn

el

ejemplo

que

estamos

siguiendo

creamos

una

nueva

escena

llamada escena_otros. En el botn Otros Restaurantes hemos aadido el siguiente

cdigo:
?

1
2
3
4
5
6
7

import flash.events.*;
miBoton.addEventListener(MouseEvent.CLICK, miFuncion);
function miFuncion(event:MouseEvent):void
{
gotoAndPlay("escena_otros", 1);
}

Con esto estamos indicando que al soltarse el botn el cabezal se desplace al

fotograma 1 de la escena escena_otros y empiece a reproducirse a partir de all. Sencillo,
verdad?

18.5. Los MovieClips

En el tema de Clips de Pelcula vimos que se tratan de objetos con lnea de tiempo
propia.
Podemos utilizarlos para incluir elementos en nuestra pelcula con una animacin
independiente. De este modo aunque la pelcula principal est detenida el clip seguir
actuando segn su propio cabezal de reproduccin.
Existen mtodos para manejar la lnea de tiempo de los clips, idnticas a las anteriores,
y que veremos a continuacin.
Lo primero que deberemos aprender es a acceder a las propiedades y mtodos de los
objetos. Esto es un recurso muy utilizado pero a la vez es muy sencillo. Lo veremos con
un ejemplo.
Queremos que al pulsar un botn el movieclip avance en su lnea de tiempo hasta su
fotograma 20.

Fjate en cmo hemos escrito la funcin. Primero hemos sealado el clip sobre el que
queremos actuar escribiendo su nombre de instancia:

Y despus de aadir un punto hemos indicado la funcin que se ejecutar.

?

1
2
3
4
5

miBoton.addEventListener(MouseEvent.CLICK, miFuncion);
function miFuncion(event:MouseEvent):void {
miClip.gotoAndPlay(20);
}
De esta forma (y como hemos visto en temas anteriores) podemos acceder a todas las
propiedades del clip. Escribiendo esta lnea haremos que el clip se haga invisible:

1
2
3
4

miBoton.addEventListener(MouseEvent.CLICK, miFuncion);<p></p>
function miFuncion(event:MouseEvent):void {
miClip.visible = false;
}
Para hacerlo un poco ms complicado podramos encontrarnos en el siguiente
supuesto. Imagina que tenemos un movieclip llamado clipPadre. Dentro de este clip de
pelcula tendremos ms smbolos y uno de ellos puede ser otro movieclip
llamado clipHijo.
Cmo accedemos a las propiedades y funciones de clipHijo? Muy fcil. Suponiendo
que estamos trabajando desde la pelcula principal donde tenemos insertado el clipPadre,
escribiremos lo siguiente:
As haremos que la reproduccin de clipHijo se reanude.

clipPadre.clipHijo.play();

Pero, qu pasa si queremos ejecutar la orden desde dentro de clipPadre? Imagina

que dentro del movieclip hay un botn y el clip clipHijo. Queremos que al pulsar el botn
se reproduzca el fotograma 20 de clipHijo, entonces deberamos escribir lo siguiente en
las acciones del botn:
?

1
2
3
4
5
6
7
8

import flash.events.*;
miBoton.addEventListener(MouseEvent.MOUSE_UP, miFuncion);
function miFuncion(event:MouseEvent):void
{
clipHijo.gotoAndPlay(20);
}

Como puedes ver esta vez no hemos mencionado a clipPadre en la lnea de cdigo.
No es necesario porque ya nos encontramos dentro de l.
Tambin

podemos

referenciarnos

elementos

superiores

utilizando

la

propiedad parent. De este modo si nos encontrsemos dentro de clipHijo y quisisemos

avanzar al fotograma 20 de clipPadrepodramos escribir:
?

1
2
3

with (parent) {
this.parent.gotoAndPlay(20);
}
Donde this indica el clip donde nos encontramos y parent hace que nos coloquemos
en el nivel inmediatamente superior.
De esta forma, slo deberemos escribir la ruta de contenedores o padres hasta llegar al
objeto del cual queremos modificar o ejecutar un mtodo.
Podemos hacer que el elemento padre escuche eventos producidos dentro del hijo, con
lo que denominamos propagacin en burbuja. Puedes ver cmo en este avanzado

Por lo dems, el funcionamiento de un clip no se diferencia en nada a la lnea de tiempo

de cualquier otra pelcula. Podemos etiquetar los fotogramas de igual modo para
llamarlos directamente por su nombre:
?

miClip.gotoAndStop("etiqueta");
Y saltar de fotograma a fotograma para manejar las animaciones de la forma en que
nosotros queramos.

Igual que vimos antes con los botones, los movieclips tienen manejadores de eventos
que nos permitirn ejecutar cdigo dependiendo de los eventos que se produzcan sobre
ellos.
Responden a los a todos los eventos de ratn que ya hemos visto, y cualquier evento
que comparta con el resto de objetos de visualizacin (DisplayObject). Vamos a ver los
eventos especficos del MovieClip:

Event.ADDED ("added") - Se produce cuando el movieclip se aade a la lista de

visualizacin de un contenedor (contenedor.addChild(miClip)).

Event.ENTER_FRAME ("enterFrame") - Se produce cuando la cabeza lectora entra

en un fotograma, pero tambin se produce constantemente si slo hay un fotograma
o si la reproduccin est parada. En este caso, depende de la velocidad del
MovieClip. Por ejemplo, un MovieClip que se reproduce a 24 FPS produce este
evento 24 veces por segundo. Recuerda este evento porque es muy til.
Event.EXIT_FRAME ("exitFrame") - Igual que el anterior, pero se produce al salir
del fotograma.
Event.REMOVED ("removed") - Se produce cuando el MovieClip se quita de la lista
de visualizacin de un contenedor (contenedor.removeChild(miClip)).

Veamos el ejemplo:
Si observas tenemos dos movieclips en la pelcula, uno de ellos llamado estrella, y el
otro detalle. La lnea de tiempo de estos movieclips tendra este aspecto:

Como puedes ver tenemos una cuarta capa que se llama acciones. All colocaremos
las acciones que se asociarn a este fotograma:
?

1
2
3
4
5

estrella.addEventListener(MouseEvent.CLICK,funcion_desaparece);
function funcion_desaparece(event:MouseEvent):void {
estrella.gotoAndPlay("desaparece");
detalle.gotoAndPlay("aparece");
}

6
Este cdigo har que cuando se presione el clip estrella se desplacen los cabezales en
los clips detalle y estrella a las etiquetas de fotogramas que se indican.
Para hacer desaparecer el clip detalle incluiremos el siguiente fragmento de cdigo:
Esto har algo parecido a lo anterior, cuando se presione el clip detalle los cabezales
de ambas pelculas se desplazarn a las respectivas etiquetas de fotograma.
?

1
2
3
4
5
6

detalle.addEventListener(MouseEvent.CLICK,funcion_aparece);
function funcion_aparece(event:MouseEvent):void {
estrella.gotoAndPlay("aparece");
detalle.gotoAndPlay("desaparece");
}

18.6. Las variables

Las variables son contenedores donde podremos almacenar informacin para trabajar
con ella. Esta informacin puede ser modificada y leda.
Aunque parece un concepto muy complejo su uso es bastante sencillo.
En ActionScript existen muchos tipos diferentes de variables, de hecho en una variable
podemos guardar cualquier tipo de objeto. Vamos a ver ahora los ms comunes, los que
emplearemos para guardar texto, nmeros o valores booleanos (verdadero - falso):

Boolean: o booleano, puede almacenar slo dos valores, o true (verdadero)

o false (falso).

Number: puede almacenar nmeros enteros o decimales, positivos o negativos. El

signo decimal en ActionScript es el punto (.). Podrs realizar operaciones
matemticas con estas variables.
String: puede almacenar cadenas de caracteres, es decir, un conjunto de caracteres
alfanumricos. Las variables de tipo String deben ir entre comillas dobles
("cadena") o ('cadena').
Array: en los arrays o matrices podemos almacenar distintos valores en distintas
posiciones. A estas posiciones accedemos con un ndice numrico (utilizando 0 para
la primera posicin) que indicamos entre corchetes tras el nombre del array
(nombreArray[3]=valor;). Puedes ver un ejemplo prctico de los arrays en este

bsico.

Antes de utilizar una variable, tenemos que declararla. Para declarar (crear) una
variable slo tendrs que escribir la siguiente lnea:
?

var nombreVariable:tipoVariable = valorVariable;

Veamos el ejemplo para verlo ms claro. Haremos que el clic sobre el
movieclip estrella slo se ejecute si el detalle no est an mostrado.
Y al revs. Que slo se ejecute el cdigo al hacer clic en el detalle si ste se encuentra
fuera.
Fjate en la primera lneas, se declaran la variable booleana, que dice si la estrella se
encuentra activada.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

var estrella_activada:Boolean = true;

estrella.addEventListener(MouseEvent.CLICK,funcion_desaparece);
function funcion_desaparece(event:MouseEvent):void {
if (estrella_activada==true) {
estrella.gotoAndPlay("desaparece");
detalle.gotoAndPlay("aparece");
estrella_activada=false;
}
}
detalle.addEventListener(MouseEvent.CLICK, funcion_aparece);
function funcion_aparece(event:MouseEvent):void {
if (estrella_activada==false) {
estrella.gotoAndPlay("aparece");
detalle.gotoAndPlay("desaparece");
estrella_activada=true;
}
}

Al hacer clic en el movieclip estrella se evala la variable estrella_activada si sta es

verdadera (true) entonces permite que se realicen las acciones. En caso contrario, sale de
la condicin.
Al entrar en la condicin se desplazan los cabezales y se modifica el valor de la variable
a falso para que la prxima vez que intente entrar no puedan ejecutarse las acciones.

En el click del clip detalle se evala de nuevo la variable. Esta vez debera estar en
false porque si el detalle est fuera es porque ya se ha hecho clic sobre la estrella y ha
pasado por el anterior bloque.
A medida que vayamos avanzando iremos usando otras variables de diferentes tipos.
Vers que su uso no difiere mucho al que hemos explicado ahora.
Antes de terminar con este tema deberamos ver algo muy importante: el mbito de las
variables.
Esto es, el sitio donde puedan utilizarse las variables.
Nota: Para explicar el mbito de las variables utilizaremos la funcin trace(variable);
que enva el contenido de la variable al Panel Salida, lo que nos permitir ver el valor que
va tomando. Puedes abrir este panel desde Ventana Salida.
Existen 2 mbitos de variables: el local y el de lnea de tiempo.

Las variables declaradas en la lnea de tiempo pueden utilizarse en cualquier

fotograma posterior y su contenido se mantendr intacto.
Por ejemplo, declaramos la siguiente variable en el fotograma 1:
?

var miVariable:String = "Esta es mi variable";

Y en el fotograma 15 colocamos las siguientes lneas en el Panel Acciones:

1
2

trace(miVariable);
stop();
Vers como al probar la pelcula en el Panel de Salida aparece escrito el Esta es mi
variable, que es el texto que le hemos dado.
Ten en cuenta que si declaras la variable en el fotograma 2 no estar disponible
en fotogramas anteriores, es decir en el 1.

Las variables declaradas en un mbito local sirven slo para un bloque de funcin.
Veamos este ejemplo:
?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var miVariable:String = "Esta es mi variable";

var miVariable2:String = "Esta tambin lo es";
function miFuncion() {
var miVariable:Number = 1;
trace(miVariable);
trace(miVariable2);
miVariable2 = "La cambio";
var otraVariable:Number = 10;
trace(otraVariable);
}
miFuncion();
trace(miVariable);
trace(miVariable2);
trace(otraVariable);

Antes

de

la

funcin,

en

la

lnea

de

tiempo

definimos

dos

variables miVariable y miVariable2.

Despus definimos una funcindefinimos una funcin (hablaremos de ellas ms a fondo
en el siguiente apartado).
En esta funcin se declara una variable (miVariable). Tiene el mismo nombre que la
variable de la lnea de tiempo, pero no es la misma variable, es local a la funcin. Si la
enviamos al Panel Salidacomprobaremos que muestra el valor asignado dentro de la
funcin (1). En cambio, si dentro de la funcin mostramos el contenido de miVariable2,
definida en la lnea de tiempo veremos Esta tambin lo esque es su valor inicial, ya que
no la hemos reemplazado por otra local que se llame igual. Lo modificamos. Por ltimo,
hemos declarado y mostrado una ltima variable local (otraVariable) con valor 10.
Recuerda que la funcin no se ejecutar hasta que no la llamemos, y es lo que
hacemos en la siguiente lnea despus de definirla.
A continuacin, en la lnea de tiempo mostramos el contenido de miVariable, y
comprobamos que muestra el valor inicial Esta es mi variable. La funcin no la ha
alterado, ya que aunque compartan nombre, eran dos variables distintas.
En cambio al mostrar el valor de miVariable2 comprobamos que si que ha cambiado,
mostrando La cambio. Como esta variable no es local a la funcin, si la alteramos si
que cambia.

Por ltimo mostramos el contenido de otraVariable. Como esta haba sido definida
dentro de la funcin, es una variable local, por lo que fuera de la funcin no existe, no est
definida, por lo que muestraUNDEFINED.

Por tanto, las variables declaradas dentro de la funcin son locales, y slo existen
dentro de sa funcin. Si dentro de una funcin queremos emplear una variable definida
en la lnea de tiempo, no debemos de definir una variable local con el mismo nombre.

Las variables de mbito global seran aquellas accesibles indistintamente desde

cualquier parte del proyecto, desde distintos MovieClips. En ActionScript 3 ya no se
permite el uso de este tipo de variables, que en la versin anterior se haca precediendo el
nombre de la variable con _global.. No obstante, podemos simular variables globales
creando una clase, como se explica en este avanzado

18.7. Las funciones

Como habrs visto en los ejemplos anteriores, una funcin es un bloque de cdigo
que podemos utilizar en cualquier parte del archivo, siempre que haya sido definida
en el mismo o en un fotograma anterior. Si definimos una funcin dentro de otra tendr
un mbito local, como ocurra con las variables.
Como ya hemos visto, las funciones se definen con la palabra function. El ejemplo
sencillo sera:
?

1
2
3

function saludar() {
trace('Hola');
}
Lo nico que hace es mostrar Hola en el panel de salida.
Para que se ejecute la funcin, debemos de llamarla en alguna parte del cdigo:

saludar();
Parmetros o argumentos
Como ves, crear funciones es bastante sencillo. Adems podemos crear funciones un
poco ms complejas envindole parmetros:

1
2
3

function saludar(nombre:String) {
trace('Hola '+nombre);
}
Observa que en el parmetro hemos indicado el tipo de dato que ser, es este caso del
tipo String.
Ahora para llamarla usaramos por ejemplo:

saludar("Bruno"); //Escribira: Hola Bruno

Podemos enviar varios parmetros separados por comas. Si al parmetro le damos un
valor, este se convertir en un parmetro opcional, y podemos enviarlo al llamar a la
funcin o no. Por ejemplo:

1
2
3

function saludar(nombre:String, pregunta:String='qu tal?') {

trace('Hola '+nombre+' '+pregunta);
}
Ahora podemos llamarla de dos formas: enviando todos los parmetros, o no enviando
los parmetros opcionales, por lo que tomar el valor por defecto:

1
2

saludar("Bruno"); //Escribira: Hola Bruno qu tal?

saludar("Bruno", "cmo va?"); //Escribira: Hola Bruno cmo va?
Habrs observado que cuando crebamos una funcin para tratar un evento siempre
recogemos un parmetro:

1
2
3
4
5

miBoton.addEventListener(MouseEvent.MOUSE_UP, miFuncion);
function miFuncion(e:MouseEvent):void {
gotoAndPlay(1);
}
El parmetro que recogemos es el evento. Cada evento tiene unos mtodos que
podemos emplear si definimos su tipo. En el ejemplo anterior, declaramos el
parmetro e que era del tipo MouseEvent. En las funciones activadas por eventos
siempre debemos de recoger ese parmetro, aunque si no lo pensamos usar no es
necesario especificar su tipo.
Una

propiedad

muy

til

es event.target (en

el

ejemplo

anterior

usara e.event.target) que nos indica el objeto que ha producido el evento.

se

Esto nos permite utilizar la misma funcin para varios objetos, pero que la funcin slo
modifique propiedades del elemento que la llama en cada momento.

Devolver valores.
En vez de que la funcin realice una accin, tambin podemos utilizarla para que
devuelva valores u objetos. Por ejemplo:
?

1
2
3

function saludar(nombre:String):String {
return 'Hola '+nombre;
}
Observa que hemos indicado detrs de la funcin el tipo de valor a devolver (en este
caso devolver un String), tal como hacamos con las variables.
En muchos ejemplos habrs visto que el tipo indicado es :void. Esto no es un tipo de
datos, sino todo lo contrario. :void indica que esa funcin no devuelve ningn valor.
El valor que devuelve es lo indicado la instruccin return.
En el ejemplo anterior la funcin no realiza ninguna accin, slo devuelve un valor:

1
2
3
4

saludar("amigo"); //No hara nada

trace(saludar("amigo")); //Mostrara en salida: Hola amigo
var saludo:String = saludar("amigo"); //Guarda en la variable saludo
//Lo que devuelve la funcin

18.8. Contenedores y listas de visualizacin

Con respecto a los elementos que vemos en nuestra pelcula con ActionScript 3,
tenemos que tener claros un par de conceptos:

Los objetos que vemos son llamados objetos visibles o de visualizacin, y todos
pertenecen a la calse DisplayObject o a una subclase heredada de esta. Siempre
han de estar dentro de un contenedor para que se vean.

Los objetos estn agrupados dentro de un contenedor, que hace de elemento padre.
A su vez, dentro de un contenedor podemos tener otros contenedores con sus
respectivos
elementos.
Los
contenedores
pertenecen
a
la
clase DisplayObjectContainer, y aunque pueda parecer lioso, a su vez un
contenedor es un objeto de visualizacin, y se puede tratar como tal.
La lista de visualizacin es cmo estn ordenados los objetos dentro del
contenedor, y establece el orden de apilamiento de los objetos.

Los contenedores:
En nuestra pelcula podemos tener cuatro tipos de contenedores:

La escena (stage). Es el contenedor general de nuestra pelcula. Todo lo que se ve,

est dentro de la escena.

Loader. Nos permite cargar un archivo externo en l. Lo veremos en el siguiente

apartado.
MovieClip. Aunque normalmente no lo tratamos como tal, un MovieClip contiene un
archivo SWF con una lnea de tiempo propia. Por ejemplo, dentro de l podemos
acceder a los distintos smbolos que lo forman.
Sprite. Es como una carpeta, a la que podemos ir aadiendo y quitando objetos.
Podemos crear tantos sprites como queramos.

El que ms utilizaremos como contenedor ser el Sprite, aunque en muchos casos lo

hagamos directamente sobre la escena.
Declararemos un Sprite como cualquier objeto:
?

var miContenedor:Sprite = new Sprite;

Ahora tenemos un contenedor, pero vaco. Podemos aadirle elementos que pasaran a
ser elementos hijos del contenedor. Para ello podemos utilizar uno de los mtodos de los
contenedores:

1
2

miContenedor.addChild(miObjeto1);
miContenedor.addChild(miObjeto2);
Ahora tenemos el contenedor con dos objetos. Pero an no se ven, porque no hemos
aadido el contenedor al elemento principal, a la escena. Vamos a hacerlo:

addChild(miContenedor);
Ahora ya vemos el contenedor. Bueno, realmente no vemos el contenedor, vemos los
elementos de visualizacin que contiene.
Nuestro contenedor tiene una lista de visualizacin con dos elementos.

Listas de visualizacin:
Los elementos aadidos a un contenedor forman su lista de visualizacin. La
posicin dentro de esta lista establece el orden de apilamiento. Es decir, los objetos con
un ndice menor se vern por debajo de los elementos con un ndice mayor.
Vamos a ver cmo accedemos y tratamos estos elementos con los mtodos y
propiedades de DisplayObjectContainer.

numChildren - Esta propiedad nos devuelve el nmero de elementos de la lista. En

el ejemplo anterior, miContenedor.numChildren devuelve 2.

getChildIndex(objeto) - Nos permite conocer el ndice de un elemento.

addChild(objeto) - Aade el elemento al final de la lista, encima del resto.
addChildAt(objeto, ndice) - Aade un elemento y nos permite indicar en qu
posicin colocarlo. Por ejemplo, si tenemos el la lista el objeto3, y queremos aadir
el objeto7 justo antes que este para que quede debajo, podemos emplear:
addChildAt(objeto7, getChildIndex(objeto3));
para saber el ndice del objeto3 y colocar ah el objeto7, desplazando el resto hacia
el final.
setChildIndex(objeto, indice) - Nos permite cambiar el orden de un objeto dentro
de la lista.
getChildByName(nombre_instancia) - Nos permite obtener un objeto conociendo
su nombre de instancia.
getChildAt(ndice) - Nos permite obtener un objeto conociendo su ndice.
contains(objeto) - Devuelve verdadero si el objeto ya est en la lista.
removeChild(objeto) - Quita el objeto indicado de la lista.
removeChildAt(objeto) - Quita de la lista el objeto con el ndice indicado.

Nota: Antes de quitar un objeto de la lista, es recomendable borrar sus eventos si

los tiene, ya que esto puede producir errores. Adems, si no los quitamos, el objeto sigue
ocupando memoria. Para borrar un evento, utilizamos el mtodo removeEventListener,
con los mismos parmetros que empleamos en addEventListener. Por ejemplo:
?

objeto.removeEventListener(Event.ENTER_FRAME, miFuncion);

18.9. Cargando archivos

Ahora veremos como modificar el contenido de un clip de pelcula y cargar en l

otro archivo SWF o incluso una imagen con formato JPG, GIF o PNG.
Vamos al ejemplo. En la seccin Encuntranos hacemos clic en un botn de tipo texto
y nos aparece el mapa donde localizar el restaurante:

El cdigo que hemos insertado es el siguiente:

?

1
2
3
4
5
6
7
8
9
10

carga.addEventListener(MouseEvent.CLICK, abrir);
function abrir (e:Event): void{
var miCargador:Loader =
new Loader();
miCargador.load(new URLRequest("mapa.swf"));
miCargador.contentLoaderInfo.addEventListener(Event.COMPLETE, insertMovie);
function insertMovie(evt:Event):void{
addChild(miCargador);
}
}

Vemos que empleamos un contenedor Loader para cargar el archivo, al que le

indicamos el archivo a cargar en su mtodo load.
var miCargador:Loader = new

Loader();

miCargador.load(new URLRequest("mapa.swf"));
Una vez cargado, lo aadimos a un contenedor o directamente a la escena, como en el
ejemplo, para que se visualice.
addChild(miCargador);
Pero esto no lo hemos hecho directamente, sino que lo hemos hecho en el siguiente
evento:
miCargador.contentLoaderInfo.addEventListener(Event.COMPLETE, ins
ertMovie);
Por qu? Porque este evento se produce cuando el archivo est completamente
cargado. Esto evita que intentemos mostrar un objeto que an no se ha cargado del todo.

Utilizaremos un nuevo cargador si queremos aadir otro archivo. Por ejemplo, si

queremos ir mostrando imgenes en la misma posicin, cada vez que queramos cambiar
la imagen slo habr que volver llamar al mtodo load(), que reemplazar el contenido
actual del cargador por la nueva imagen.

Sigue el siguiente ejercicio paso a paso para ver cmo Crear una pelcula cargando
archivos

El uso de estas funciones es bastante sencillo y te ayudarn mucho en la eficiencia de

tus pelculas. Ten en cuenta lo que decamos antes de las escenas.
As, cargaremos partes de la pelcula slo si el usuario accede a ellas.

18.10. Cargando informacin

En este apartado veremos cmo utilizar un cargador para recoger informacin de un

archivo y mostrarla en una pelcula Flash.
Nos basaremos en el siguiente ejemplo:
Si quieres hacer este ejemplo, encontrars los archivos necesarios en la
carpeta ejercicios/presentacion.
Observa la lnea de tiempo:

En la capa de acciones escribiremos todo el cdigo para que funcione la pelcula. La

capa diapositivas contiene el efecto que hace que la imagen se desvanezca para volver a
aparecer.
Ahora explicaremos cmo lo hemos hecho.
Antes que nada aadimos un stop() en el primer fotograma para detener la accin y
reanudarla ms tarde con cuando pulsemos el botn.
Igualmente hemos aadido un stop() en el fotograma 11, el ltimo. Para que se
detenga la transicin y espere a que se pulse de nuevo el botn.
La transicin es muy sencilla. En la capa diapositivas hemos aadido un clip de pelcula
llamado contenedorImagen del tamao de la pelcula, que ser donde carguemos las

imgenes, y hemos incluido dos interpolaciones de movimiento. En el fotograma 6

bajaremos la propiedad Alfa al 0% en el Panel Propiedades. As conseguiremos el efecto
de la transicin.
Ahora que conocemos el funcionamiento veamos el cdigo que hemos aadido en
el fotograma 1.
?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// FOTOGRAMA 1
stop();
var total:Number=4;
var imagenActual:Number=0;
//Utilizamos un objeto Loader para cargar las imgenes
var cargadorImagen = new Loader();
contenedorImagen.addChild(cargadorImagen);

//Para cargar datos (texto), emplearemos un objeto URLLoader

var cargadorTexto:URLLoader = new URLLoader();
//Indicamos el formato de los datos que leer
cargadorTexto.dataFormat=URLLoaderDataFormat.VARIABLES;
//Y la ubicacin del archivo
var archivoTexto:URLRequest = new URLRequest("diapositivas.txt");
//Y el mtodo que lo carga
cargadorTexto.load(archivoTexto);
//Y lo configuramos para que cuando se complete la carga,
//avance al fotograma 6
cargadorTexto.addEventListener(Event.COMPLETE, textoCargado);
function textoCargado(event:Event):void
{
gotoAndPlay(6);
}
btnSiguiente.addEventListener(MouseEvent.CLICK, irSiguiente);
function irSiguiente(event:MouseEvent):void
{
gotoAndPlay(2);
}

Las variables que vamos a utilizar son:

La variable total almacena el nmero total de imgenes que vamos a mostrar. En

nuestro caso, son 4.

La variable imagenActual almacenar el nmero de la imagen que vamos a

mostrar, la inicializamos a 1 para mostrar la primera imagen.

Tenemos que obtener datos externos, para eso hemos empleados dos objetos:

Un Loader llamado cargadorImagen, donde cargaremos los archivos de imagen.

Un URLLoader, llamado cargadorTexto, que es un objeto que nos permite extraer

datos de archivos. En nuestro caso, texto de un archivo de texto.

El Loader ya

lo

conocemos,

al MovieClip contenedorImagen.

de

Vamos

momento
a

slo

centrarnos

lo
en

hemos
cmo

aadido
utilizamos

el URLLoader.
?

1
2

var cargadorTexto:URLLoader = new URLLoader();

cargadorTexto.dataFormat=URLLoaderDataFormat.VARIABLES;
Tras

declararlo,

debemos

indicar

el

formato

de

datos,

con

la

propiedad cargadorTexto.dataFormat. Puede ser de tres valores:

URLLoaderDataFormat.TEXT, si el archivo que queremos cargar es todo texto, y

queremos cargarlo como tal. Esta es la opcin por defecto.

URLLoaderDataFormat.BINARY, si los datos son binarios sin formato.

URLLoaderDataFormat.VARIABLES, si los datos del archivo siguen el formato de
las
variables
URL,
cuya
sintaxis
sera variable1=valor&variable2=valor&variable3=valor&variable4=valor.
Es
decir separamos cada variable y su valor por el signo =. Y separamos cada
par variable=valor por el signo &.

Esta ltima es la opcin que hemos elegido, porque aunque queremos cargar texto, lo
tenemos dividido en variables. Por lo tanto, escribimos en el archivo diapositivas.txt el
texto que queremos mostrar con el siguiente formato:
?

1
2
3
4
5
6
7
8

titulo1=Los mejores sndwiches

&descripcion1=En sa cuina creamos los sndwiches mas originales y sabrosos de toda la ciudad.
&titulo2=Calidad Superior
&descripcion2=Nos cuidamos siempre de que nuestros platos ofrezcan la mxima calidad.
&titulo3=Productos seleccionados
&descripcion3=Seleccionamos los productos uno a uno y de distribuidores de confianza.
&titulo4=Nuestras especialidades
&descripcion4=No olvides probar nuestras especialidades en ensaladas y postres.

Por tanto, lo siguiente ha sido indicar a nuestro URLLoader cul es el archivo que
contendr esas variables.
?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var archivoTexto:URLRequest = new URLRequest("diapositivas.txt");

//Y el mtodo que lo carga
cargadorTexto.load(archivoTexto);
//Y lo configuramos para que cuando se complete la carga,
//avance al fotograma 6
cargadorTexto.addEventListener(Event.COMPLETE, textoCargado);
function textoCargado(event:Event):void
{
gotoAndPlay(6);
}
btnSiguiente.addEventListener(MouseEvent.CLICK, irSiguiente);
function irSiguiente(event:MouseEvent):void
{
gotoAndPlay(2);
}

como

ya

vimos

con

los

cargadores,

hemos

utilizado

el

evento Event.COMPLETE para saber si se ha cargado correcta y completamente. Si no

se ha cargado, mostramos un error. Si todo es correcto, pasamos al fotograma 6.
Al final, hemos aadido el cdigo necesario para que al pulsar en boton vayamos al
fotograma 2.

Ahora, vamos al fotograma 6. Cada vez que se pase por aqu, cambiaremos la imagen
y el texto. Hemos elegido este fotograma porque aqu habamos cambiado el valor
de Alffa a 0. Es decir, aqu es donde ha acabado de desvanecerse la imagen y donde
empieza a cargarse la siguiente. Veamos el cdigo que hemos puesto:
?

1
2
3
4
5
6
7
8
9

if (imagenActual==total) {
imagenActual=0;
}
imagenActual++;
//Cambiamos el texto
textoDiapositiva.titulo_txt.text=cargadorTexto.data['titulo'+imagenActual];
textoDiapositiva.descripcion_txt.text=cargadorTexto.data['descripcion'+imagenActua
//Y cambiamos la imagen
cargadorImagen.load(new URLRequest ("imagenes/imagen"+imagenActual+".jpg"));

Lo primero que hacemos es comprobar si hemos llegado a la ltima imagen (total), y si

es as, volvemos a la primera. Aumentamos el contador de imgenes (imagenActual++).

Ahora, tenemos que extraer los valores correspondientes del cargadorTexto.

Podemos acceder al contenido del archivo cargado con la propiedad .data. Si adems
ese archivo lo forman variables, como en nuestro caso, podemos utilizar data como un
array y acceder a una variable concreta escribiendo data['nombreVariable']. Tambin
podramos hacerlo como una propiedad (data.nombreVariable).
En nuestro caso hemos extrado las variables con el ttulo y la descripcin y las hemos
mostrado en los textos textoDiapositiva.titulo_txt y textoDiapositiva.descripcion_txt.
Y para acabar, hemos cargado la imagen con el mtodo load del cargadorImagen. Por
tanto, cada vez que pasemos por aqu, el cargador reemplazar la imagen que contiene.
Observa que hemos elegido unos nombres que contienen el nmero de imagen
(tituloX y descripcionX para las variables, e imagenes/imagenX.jpg). Esto nos facilita el
trabajo, ya que slo tenemos que cambiar la X por el nmero de imagen que corresponde.

19.1. Los elementos de formulario

En el uso de formularios podremos utilizar muchos elementos. Pero los principales

sern siempre los mismos: cajas de texto y botones.

De

vez

en

cuando

utilizaremos

otros

elementos

como

los radioButtons, checkBoxes, comboBoxes o listBoxes. Veremos cmo utilizarlos y

sacarles el mayor partido.

Flash ofrece estos objetos como componentes. Para acceder a ellos slo tendrs que
abrir el Panel Componentes desde Ventana Componentes.
Una vez abierto el panel haz clic en User Interface para desplegar sus elementos y
vers todos los componentes que podrs utilizar.

Incluso para la introduccin de texto en formularios es aconsejable el uso de

componentes, pues veremos que poseen propiedades que las simples cajas de texto no
tienen.
Para utilizar alguno de estos componentes basta con arrastrarlo del panel al escenario,
o puedes arrastrarlo a la biblioteca para utilizarlo ms tarde.
En cualquier caso, cuando hayamos aadido el componente a nuestra pelcula
deberemos darle un nombre de instancia para poder acceder a l desde el cdigo y
configurar sus opciones en la seccin Parmetros de componente del inspector
de Propiedades:

Veamos cuales son las opciones para los diferentes componentes:

TextInput (Introduccin de texto):

displayAsPassword: Oculta/muestra el contenido del texto mostrndose un

asterisco por carcter.

editable: Permite que el texto se pueda editar o no.

text: Indica el texto inicial de la caja.
maxChars: El nmero mximo de caracteres que se pueden cumplir.
TextArea (rea de texto):

editable: Permite que el texto se pueda editar o no.

text: Indica el texto inicial de la caja.

htmlText: Contiene texto que acepta etiquetas html.
wordWrap: Permite que se pueda realizar un desplazamiento del texto de arriba
abajo. En caso de que no se permita (false) cuando el texto sobre pase el rea del
componente aparecer una barra de desplazamiento que permitir mover el texto de
izquierda a derecha.
vertical/horizontalScrollPolicy: Establece cmo se mostrarn las barras de
desplazamiento del texto: on, siempre, off nunca, y auto, solo cuando el texto no
quepa.

Button (Botn):

icon: Aade un icono al botn. Para insertar un icono deberemos crear un grfico o
clip de pelcula y guardarlo en la Biblioteca. Una vez all lo seleccionamos y

haciendo clic derecho sobre l, seleccionamos Vinculacin. Marcamos la

casilla Exportar para ActionScript en el cuadro de dilogo que aparecer y le
damos un nombre en Identificador. Este nombre es el que deberemos escribir en el
campo icon del componente botn. Ni el botn ni el smbolo se ajustar al tamao
del otro, as que deberemos modificar sus tamaos para que el icono no sobresalga
del botn.

label: Texto que se leer en el botn.

labelPlacement: left, right, top o bottom. Indica la posicin de la etiqueta de texto
en caso de que se utilice junto a un icono. Respectivamente, izquierda, derecha,
arriba y abajo.
selected: Indica si el botn se encuentra inicialmente seleccionado.
toggle: Cuando se encuentra marcada, hace que el botn pueda tomar dos
posiciones, presionado y no presionado.
RadioButton (Botn de opcin):

value: Especifica los datos que se asociarn al RadioButton. La propiedad puede ser
cualquier tipo de datos. Podemos acceder a esta propiedad a travs de cdigo para
ver que contiene.

groupName: Nombre del grupo. En un grupo de botones de opcin slo uno de ello
puede estar seleccionado. Definiremos este grupo mediante esta propiedad. Todos
los botones que tengan el mismo nombre en groupName pertenecern al mismo
grupo.
label: Texto que se leer al lado del botn.
labelPlacement: left, right, top o bottom. Indica la posicin de la etiqueta de texto
respecto al botn. Respectivamente, izquierda, derecha, arriba y abajo.
selected: Indica si el botn se haya seleccionado o no. De nuevo, en un mismo
grupo slo un botn de opcin puede estar seleccionado.

CheckBox (Casilla de verificacin):

label: Texto que se leer al lado de la casilla.

labelPlacement: left, right, top o bottom. Indica la posicin de la etiqueta de texto

respecto a la casilla. Respectivamente, izquierda, derecha, arriba y abajo.
selected: Indica si la casilla de verificacin se haya inicialmente seleccionada.
ComboBox (Lista desplegable):

editable: Permite la edicin del campo. Mediante ActionScript podemos hacer que
se aadan nuevos elementos a la lista.

dataProvider: Matriz donde determinaremos el nombre de los elementos de la lista y

su valor. Se mostrar el siguiente dilogo para introducir los pares texto a mostrar
(label) y valor a enviar (data):

Desde aqu podremos aadir o quitar elementos utilizando los botones

. O

alterar el orden de stos subindolos o bajndolos en la lista con los botones

y

rowCount: Nmero mximo de elementos visibles en la lista. Si este nmero es

superado por los elementos se aadir una barra de desplazamiento.

List (Lista):

dataProvider: Matriz donde determinaremos el valor qu devolver el componente

al seleccionar determinada posicin.

allowMultipleSelection: Permite la seleccin mltiple de elementos manteniendo la

tecla Ctrl presionada. Tambin es posible seleccionar un rango de elementos
seleccionando uno de ellos y pulsando la tecla Shift mientras seleccionamos otro
diferente, todos los elementos intermedios resultarn tambin seleccionados.
verticalLineScrollSize: Nmero mximo de filas visibles en la lista. Si este nmero
es superado por los elementos se aadir una barra de desplazamiento.

NumericStepper (Contador

numrico):

maximum: Establece el nmero mximo del contador.

minimum: Establece el nmero mnimo del contador.

stepSize: Establece el intervalo en el que se aumenta o disminuye el nmero del
campo al pulsar los botones del componente.
value: Valor inicial del campo.

Nota: Todas las propiedades mencionadas para cada uno de los componentes son
accesibles a travs de ActionScript escribiendo el nombre de instancia del componente
seguido de un punto y el nombre de la propiedad:
?

miBoton.label = "Haz clic aqu";

19.2. Botones de formulario

En los formularios, normalmente, incluiremos dos botones: Enviar y Limpiar.
Imagina que llamamos al componente botn de limpiar btn_borrar, su cdigo asociado
sera sencillo:
?

1
2
3
4
5
6
7

btn_borrar.addEventListener(MouseEvent.CLICK,boton);
function boton(event:MouseEvent):void{
nombre.text = "";
email.text = "";
mensaje.text = "";
}

Como puedes ver, hemos creado un escuchador para btn_borrar. Cuando se activa
simplemente vaciamos el contenido de los campos de texto que queramos.
Tambin podramos iniciar los campos de otra forma:
?

1
2
3

nombre.text = "Escribe aqu tu nombre";

email.text = "Escribe aqu tu e-mail";
mensaje.text = "Escribe aqu tu mensaje";
En definitiva, puedes tratar los campos como quieras.
Para el botn de envo debers asociar un escuchador del mismo modo, pero el cdigo
que ir incluido en l deber de validar los datos y enviarlos, que ser lo que veamos en el
siguiente apartado.

19.3. Validar datos

Antes de enviar los datos es conveniente validarlos, por ejemplo, para que un campo
requerido no quede en blanco. Si la validacin se completa, proseguimos con el envo,
pero si no, advertimos al usuario de los errores.
Un campo requerido es aqul que el usuario debe de rellenar. Por ejemplo, en el caso
de

un

campo

de

texto,

podemos

comprobar

su

longitud

con

la

propiedad miCampoTxt.text.lenght, y si es 0 es vaco.

En cambio, si se trata de una casilla que ha de estar seleccionada, basta con consultar
la propiedad miCasilla.selected.

Una forma ms avanzada sera utilizar expresiones regulares, con el objeto RexExp,
que nos permite personalizar mucho ms la validacin. Por ejemplo, la siguiente funcin
comprueba si el valor es un nmero:
?

1
2
3
4
5

function esNumero(valor:String):Boolean
{
var expRegular:RegExp = /[0-9]+/;
return expRegular.test(valor);
}
Con esto para comprobar si el contenido de un texto es numrico, bastara con
preguntar si esNumero(miCampo.text).

Una funcin muy til es la de establecer dnde colocar el foco escribiendo la siguiente
lnea:
?

miCampoTxt.stage.focus = miCampoTxt;
De este modo, si encontramos un error al validar podemos establecer el punto de
insercin en el campo correspondiente para que el usuario escriba directamente.
Para acabar, debemos de tener un campo de texto para mostrar los posibles errores.
Vamos a unir todo esto en una funcin que validar los datos de un formulario.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

function validarDatos():Boolean {
if (txt_nombre.length==0) { //campo requerido
txt_nombre.stage.focus=txt_nombre; //le damos el foco
txt_aviso.text="Introduce tu nombre"; //Indicamos el error
return false; //Devolvemos falso
} else if (!chk_condiciones.selected) {
//Comprobamos que la casilla est marcada
chk_condiciones.stage.focus = chk_condiciones;
txt_aviso.text="Debes aceptar las condiciones";
return false;
} else {
if (esNumero(txt_edad.text)) { //Comprobamos si es un nmero
if (Number(txt_edad.text)<18) { //comprobamos si es mayor
txt_edad.stage.focus=txt_edad;
txt_aviso.text="Tienes que ser mayor de edad";
return false;
} else {
//Si llega hasta aqu, es que todo se ha validado
//Devolvemos true
return true;
}
} else {
txt_edad.stage.focus=txt_edad;
txt_aviso.text="Introduce tu edad";
return false;
}

Como

se

ve,

comprobamos

si

el

campo txt_nombre tiene

texto,

casilla chk_condiciones est marcada, y si txt_edad es un nmero mayor que 18.

si

la

A esta funcin, la llamaramos al pulsar el botn de envo (btn_enviar). Lo que har

ser validar, y si el resultado es correcto, llamar a la funcin que enva los datos
(enviarDatos) que veremos en el prximo apartado.
?

1
2
3
4
5
6

btn_enviar.addEventListener(Mouse.CLICK, validaryEnviar);
function validaryEnviar(event):void {
if (validarDatos()) { //validamos
enviarDatos(); //Y si es True, enviamos
}
}

19.4. Envo de formularios

Vamos a crear el cdigo estndar que nos permite enviar el formulario.
Antes de enviar los datos, hemos validado los datos como vimos en el punto anterior.
Lo normal, tras rellenar un formulario en una pgina web, es que esta los enve a una
pgina dinmica, en PHP o ASP. Esta pgina se encargar de recoger los datos, volverlos
a validar, y hacer lo que corresponda con ellos, como guardarlos en una base de datos, o
enviar un correo. Con Flash haremos lo mismo. En nuestro ejemplo, enviaremos los datos
a enviarCorreo.php.
Vamos a utilizar tres objetos:

Un objeto URLVariables. Este objeto nos permite componer cmodamente variables

de URL, con el formato var1=valor1&var2=valor2&var3=valor3...

Un objeto URLRequest. Nos permite configurar la direccin web de envo, cmo se

enviarn los datos y asignarle esos datos con un objeto URLVariables.
Un objeto URLLoader. Aunque normalmente lo empleamos para obtener
informacin de archivos, tambin nos sirve para enviar informacin al archivo
indicado como un URLRequest.

Veamos el cdigo:
?

1
2
3
4
5
6
7
8
9
10
11

//Funcin que se ejecuta al presionar el botn de envo

function enviarDatos(event:MouseEvent):void {
System.useCodepage = true;//Esta lnea coge la pgina de carcteres
//del sistema, para mostrarlos correctamente
//Utilizamos un objeto URLVariables para guardar los datos de nuestros campos
var datosFormulario:URLVariables = new URLVariables();
//Definimos los campos y les agregamos el valor de las cajas de texto.
datosFormulario.nombre = txtNombre.text;
datosFormulario.apellidos = txtApellidos.text;
datosFormulario.email = txtEmail.text;
//Con un obj. URLRequest generamos la URL a la que se envan los datos
var paginaEnvio:URLRequest=new URLRequest("enviarCorreo.php");

12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

//Indicamos el mtodo de envo y le cargamos misVariables.

paginaEnvio.method=URLRequestMethod.POST;
paginaEnvio.data=misVariables;
//Utilizamos un obj. URLLoader para enviar info. a un archivo externo
var cargador:URLLoader = new URLLoader();
//Como siempre, creamos un evento que nos indica si se ha completado
//el envo de informacin, y x tanto se han enviado los datos
cargador.addEventListener(Event.COMPLETE, envioCompleto);
//Utilizamos el evneto IOErrorEvent.IO_ERROR que se lanza cuando ocurre
//un error, por lo que los datos no se han enviado
cargador.addEventListener( IOErrorEvent.IO_ERROR, errorEnvio );
//Y para acabar, enviamos los datos
caragdor.load(paginaEnvio);

}
function envioCompleto(event):void {
//Si se completa, avisamos del envo y limpiamos campos
aviso.text="Envo completo";
txtNombre.text="";
txtApellidos.text="";
txtEmail.text="";
}
function errorEnvio(event):void {
//Si hay un error, avisamos de ello
aviso.text="Se produjo un error, no se ha completado el envo";
}

btn_enviar.addEventListener(MouseEvent.CLICK, validaryEnviar);
function validaryEnviar(event):void {
if (validarDatos()) { //validamos
enviarDatos(); //Y si es True, enviamos
}
}

Podemos ver que para crear las variables en el objeto URLVariables, no tenemos ms
que escribir el nombre que le queremos dar como una propiedad, y asignarle el valor que
queremos guardar en la variable:
?

1
2
3

datosFormulario.nombre = txtNombre.text;
datosFormulario.apellidos = txtApellidos.text;
datosFormulario.email = txtEmail.text;
Al objeto URLRequest, le indicamos el nombre de archivo (nuestra pgina), el mtodo
de envo (method), como en los formularios HTML, y los datos (data) que hemos
configurado en el objeto URLVariables.

1
2
3

var paginaEnvio:URLRequest=new URLRequest("enviarCorreo.php");

paginaEnvio.method=URLRequestMethod.POST;
paginaEnvio.data=misVariables;
Y por ltimo utilizamos el objeto URLLoader para comunicarnos con el archivo cuya
ubicacin se indica en el objeto URLRequest. Cargamos la informacin hacia l, y
comprobamos si se ha completado el envo o se ha producido un error, para avisar al
usuario.
El script enviarCorreo.php se encargara de recibir los datos, generar el correo y
enviarlo.
Nota: Para poder ejecutar una pgina dinmica, como la que enva el correo en PHP,
hay que tener instalado un servidor web en el equipo. Por lo que si no lo tienes, no se
enviar el correo, aunque tampoco dar ningn error si se encuentra el archivo.

19.5. Otras propiedades de los formularios

Adems de todo lo que hemos visto existen, tambin, otras propiedades bastante
interesantes.
Por ejemplo, el orden de tabulacin. Esta propiedad establece como acta el cursor a
las repetidas pulsaciones de la tecla Tabulador.
Podemos alterar el orden utilizando la propiedad tabIndex. Esta propiedad indicar el
orden en el que se desplazar el cursor cada vez que pulsemos el Tabulador:
?

1
2
3
4
5

nombre_txt.tabIndex = 1;
mail_txt.tabIndex = 2;
mensaje_txt.tabIndex = 3;
reset_btn.tabIndex = 4;
submit_btn.tabIndex = 5;
Tambin podemos establecer el botn predeterminado del formulario para que
cuando se pulse la tecla Intro sea como si hicisemos clic en l. Escribe la siguiente lnea:

1
2
3
4

//En este caso, debemos de importar la clase para que la reconozca

import fl.managers.FocusManager;
var fm:FocusManager = new FocusManager(this);
fm.defaultButton = submit_btn;

De esta forma haremos que el botn predeterminado sea submit_btn. En este

caso, this se refiere a la pelcula principal, pero podemos indicar el contenedor que
contenga a nuestro formulario.

Estos conceptos son muy importantes de cara al usuario, ya que muchos estn
acostumbrados a cambiar de un control a otro con el Tabulador y a pulsar Intro para
enviarlo.

19.6. Recuperando informacin XML

En este apartado veremos cmo recuperar informacin de un archivo XML.
XML es un lenguaje de marcas estructuradas, en el que la informacin se clasifica en
elementos y sub elementos, con propiedades y atributos, utilizando etiquetas, de forma
muy similar al HTML. De hecho, existe XHTML, que no es ms que HTML que cumple las
reglas estrictas del XML.
Por ejemplo, nosotros vamos a trabajar con la siguiente informacin XML que tenemos
en un archivo, llamado comentarios.xml:
?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<?xml version="1.0" encoding="ISO-8859-1" ?>

<listadoComentarios>
<comentario>
<autor>jos</autor>
<email>jose@correo.com</email>
<mensaje>estoy escribiendo un mensaje</mensaje>
</comentario>
<comentario>
<autor>amparo</autor>
<email>amparo@correo.com</email>
<mensaje>este mensaje tambin se publicar</mensaje>
</comentario>
<comentario>
<autor>miguel</autor>
<email>miguel@correo.com</email>
<mensaje>mensaje de prueba</mensaje>
</comentario>
<comentario>
<autor>cristina</autor>
<email>cristina@correo.com</email>
<mensaje>esto funciona!</mensaje>
</comentario>
</listadoComentarios>

En Flash tenemos el elemento XML. En l almacenamos la informacin con la

estructura XML. Este objeto, nos permite recorrer esta informacin de forma
organizada.
A un elemento XML le podemos asignar directamente la informacin como si fuera un
String, pero sin encerrarla entre comillas. Por ejemplo:
?

1
2
3
4
5
6
7
8
9
10
11

var miXML:XML =
<pedido>
<articulo id='1' cantidad='1'>
<nombre>Raqueta Tenis</nombre>
<precio>33.95</precio>
</articulo>
<articulo id='2' cantidad='3'>
<nombre>Pelota Tenis</nombre>
<precio>4.45</precio>
</articulo>
</pedido>;

Pero en nuestro ejemplo, la informacin XML la tenemos en un archivo. Como ya

vimos, para

cargar

informacin

de

archivos

externos

necesitamos

un

elemento URLLoader.
Vamos a ver cmo hemos utilizado la informacin del archivo utilizando estos dos
elementos:
?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

//Para trabajar con datos XML utilizamos un objeto XML

var datosXML:XML = new XML();
datosXML.ignoreWhite = true; //Ignora elementos en blanco
//Para obtener informacin de un archivo, utilizamos un URLLoader
var cargadorXML:URLLoader = new URLLoader();
cargadorXML.load(new URLRequest('comentarios.xml'));
//Utilizamos el evento complete para no trabajar hasta que
//se haya cargado completamente
cargadorXML.addEventListener("complete", archivoCargado);
function archivoCargado(ev:Event):void {
comentarios_text.text="";
//Convertimos la info leda a XML y se la asignamos al objeto XML
datosXML=XML(cargadorXML.data);
var cadena:String;
//Con este bucle, reccoremos todos los elementos
for (var elemento:String in datosXML.comentario) {
//Para cada elemento, cremos una cadena de texto y la mostramos
cadena="<a href=\"mailto:"+datosXML.comentario.email[elemento]+"\">"+
datosXML.comentario.autor[elemento]+"</a>: <span class=\"mensaje\">"+
datosXML.comentario.mensaje[elemento]+"</span><br>\n";
comentarios_text.appendText(cadena);
}
}

21
22
23
Comenzamos declarandos el objeto XML, al que hemos llamado datosXML porque es
lo que contendr. Como todo objeto, tiene una serie de propieades que no vamos a
detallar. Hemos utilizado la propiedad ignoreWhitespace, que ignorar aquellos campos
que estn en blanco y as no tendremos que preocuparnos por posibles errores.
A continuacin, extraemos la informacin del archivo, para lo que hemos utilizado un
objeto URLLoader, al que hemos llamado cargadorXML. En su mtodo load le
indicamos el archivo a cargar. Adems, como venamos haciendo, para no continuar con
el trabajando hasta que no se haya terminado de cargar, utilizamos el evento complete.
En l, trataremos la informacin.
Llegados a este punto, tenemos la informacin cargada en la propiedad .data del
cargador. Como no hemos indicado otra cosa, se ha cargado todo el archivo como texto.
Utilizamos la funcin XML() para convertirlo a informacin XML, y se la asignamos a
nuestro objeto XML:
?

datosXML = XML(cargadorXML.data);
Ahora, ya tenemos datosXML con toda la informacin. Con este objeto es sencillo
acceder a ella, listarla, etc. En nuestro ejemplo, si queremos acceder al primer email
(posicin 0), lo podemos hacer escribiendo datosXML.comentario.email[0].
Basndonos en eso, hemos hecho un bucle for para recorrer todos los elementos, e ir
construyendo la cadena de texto que mostramos en la caja de texto.
Esta forma requiere que conozcamos la estructura del archivo, saber que se divide en
etiquetas <comentario> y que dentro de ella tenemos la etiqueta <email>.
Utilizando los ndices, podemos acceder a los distintos elementos de la jerarqua. Por
ejemplo:

1
2
3
4
5

trace
trace
trace
trace
//Los

('datosXML: ',datosXML); //Escribe todo el archivo

('datosXML.comentario[1]: ',datosXML.comentario[1]); //Escribe el segundo comentario
('datosXML.comentario[1].email: ',datosXML.comentario[1].email);
('datosXML.comentario.email[1]: ',datosXML.comentario.email[1]);
dos anteriores escriben el email del segundo comentario.
En el ejemplo hemos accedido a un archivo .xml, pero podemos hacerlo con cualquier
archivo que contenga la informacin XML debidamente estructurada. Por ejemplo, es muy
frecuente utilizarlo llamando a un archivo PHP que genera el XML de forma dinmica.

Haremos referencia a este mismo ejemplo al final del tema. Si quieres probarlo,
encontrars el archivo XML en la carpeta ejercicios/cargarXMLyCSS. Recuerda, que
para poder porbarlo antes hay que guardarlo.

19.7. HTML y CSS en cajas de texto

Si recordamos el ejemplo anterior, tras mostrar el contenido del XML, obtenamos el
siguiente texto en comentarios_text, una caja de texto:
?

1
2
3
4
5
6
7
8

<a href="mailto:ana@correo.com">ana</a>: <span class="mensaje">si actualizo aqu s

<br>
<a href="mailto:jesus@correo.com">jess</a>: <span class="mensaje">pues ya estamos
<br>
<a href="mailto:emilio@correo.com">emilio</a>: <span class="mensaje">yo tambin me
<br>
<a href="mailto:david@correo.com">david</a>: <span class="mensaje">bien, pero trae
<br>

Pero lo normal es que si escribimos cdigo HTML es porque queremos que se vea con
un determinado formato, no las etiquetas HTML.
Para

que

Flash

tome

el

contenido

como

HTML,

en

vez

de

utilizar

la

propiedad comentarios_text.text empleamos comentarios_text.htmlText para

establecer el texto.
Pero no slo queremos ocultar las etiquetas, queremos formatear el texto debidamente
utilizando la siguiente hoja de etilos, que tenemos en el archivo estilo_comentarios.css:
?

1
2
3
4
5
6
7
8

.mensaje {
font-style: italic;
color: #2C578F;
}
a {
font-weight: bold;
color: #CF406E;
}

Podemos distinguir dos estilos: uno aplicado a los elementos con la clase mensaje
(class="mensaje") y otro aplicado a los enlaces (<a href...).
Como siempre, e independientemente de para qu lo usemos, cargamos la informacin
del archivo con un objeto URLLoader, y preparamos el evento complete, para utilizar los
datos cuando estn listos:

1
2
3

var cargadorCSS:URLLoader=new URLLoader();

cargadorCSS.load(new URLRequest('comentarios.css'));
cargadorCSS.addEventListener('complete', estiloCargado);
El objeto que nos permite utilizar las propiedades CSS es del tipo StyleSheet. Lo
declaramos, y cuando el cargador tenga los datos listos es su propiedad .data, se los
asignamos a la hoja de estilo con su mtodo parseCSS. Y para acabar, con la
propiedad styleSheet de la caja de texto indicamos que usar nuestra hoja.

1
2
3
4
5
6
7

var miHojaEstilo:StyleSheet = new StyleSheet();

function estiloCargado(event):void {
//Convertimos los datos cargados
miHojaEstilo.parseCSS(cargadorCSS.data);
//E indicamos a la caja de texto que use esta hoja
comentarios_text.styleSheet = miHojaEstilo;
};

Esto debemos de realizarlo antes de rellenar la caja de texto con HTML, ya que
flash no trata igual el HTML si no tiene una hoja de estilo asociada.
Si queremos podemos cambiar la propiedad para utilizar otra hoja de estilo. O
aprovechando las funciones y objetos definidos, podemos crear un botn para que cargue
una nueva hoja:
?

1
2
3
4

btn.addEventListener(MouseEvent.CLICK, cambiarHoja);
function cambiarHoja(event) {
cargadorCSS.load(new URLRequest('comentarios2.css'));
}
Como el cargador ya tiene asociado el evento complete, se volver a ejecutar la
funcin estiloCargado asignando el nuevo estilo.

20.1. Introduccin

Los filtros son una potente herramienta que abre nuevas posibilidades en nuestras
animaciones Flash.
Su uso aumentar la capacidad de mejorar el aspecto y funcionamiento de nuestros
proyectos, aunque slo estn disponibles para los clips de pelcula, los botones y el
texto.

En este tema veremos los filtros disponibles, su uso y cmo manejarlos mediante el
panel Propiedades, el Editor de movimiento y sobre todo mediante ActionScript.
Para ilustrar su funcionamiento mostraremos ejemplos de cmo afectan los filtros a esta
imagen:

Antes de empezar resaltaremos una cosa. En ActionScript los colores se indican

mediante una cadena de 8 caracteres con un componente hexadecimal: 0xRRVVAA.
Las dos primeras sern siempre las mismas 0x, las dos siguientes correspondern a la
cantidad de color rojo, las dos siguientes de verde y las dos ltimas de azul.
De este modo 0x000000 sera el color negro (la ausencia de color), y 0xFFFFFF el
color blanco (con el rojo, azul y verde al mximo).
Veremos principalmente cmo crear los filtros mediante ActionScript, por ser la opcin
ms potente. Pero tambin puedes crear los filtros desde el panel de Propiedades,
pulsando el icono Nuevo en la seccin Filtros.

Nota: Antes de utilizar el filtro, observars que lo importamos con la sentecia import
flash.filters.tipoFiltro;.

Esto

no

es

necesario

si

trabajamos

panel Acciones, pero s si lo hacemos en otro archivo, por ejemplo, en una clase.

20.2. El filtro Sombra

Utilizando este filtro podremos aadirle una sombra a la imagen:

en

el

En la imagen de la izquierda vemos la imagen original ms la sombra, en la imagen de

la derecha slo se ve la sombra.

Puedes aplicar este filtro y todos los dems desde el panel Propiedades:
Sus opciones son las siguientes:

Desenfoque X: determina la cantidad de desenfoque horizontal en pxeles.

Desenfoque Y: determina la cantidad de desenfoque vertical en pxeles.

Intensidad: determina la intensidad de la sombra (de 0 a 100).
Calidad: nmero de veces que se aplica el filtro. Puede tomar
valores baja, media y alta.
ngulo: determina el ngulo de la sombra.
Distancia: determina la distancia de la sombra al objeto en pxeles.

los

Extractor: booleano, activa el filtro extractor, hace que el objeto se vuelva del color
del fondo.
Sombra interior: booleano, hace que la sombra sea interior.
Ocultar Objeto: booleano, esconde el objeto dejando slo la sombra.
Color: determina el color de la sombra.

Como hemos dicho, tambin podemos aplicar los filtros desde el Editor de
movimiento, tendramos las mismas opciones pero con las grficas propias del editor de
movimiento:

Si aplicamos el filtro desde Action Script, los parmetros son los mismos pero el
nombre hay que darlo en ingls, los valores correspondientes son los siguientes (adems
del valor alpha):

.blurX: determina la cantidad de desenfoque horizontal.

.blurY: determina la cantidad de desenfoque vertical.

.strength: determina la intensidad de la sombra.
.quality: nmero de veces que se aplica el filtro. Puede tomar los valores 1, 2 3.
Calidad baja, media y alta, respectivamente.

.angle: determina el ngulo de la sombra.

.distance: determina la distancia de la sombra al objeto.
.knockout: booleano, activa el filtro extractor, hace que el objeto se vuelva del color
del fondo.
.inner: booleano, hace que la sombra sea interior.
.hideObject: booleano, esconde el objeto dejando slo la sombra (segunda imagen).
.color: determina el color de la sombra (escrito 0xRRVVAA).
.alpha: determina la transparencia de la sombra (de 0 a 1).

Podremos utilizar el filtro Sombra escribiendo el siguiente cdigo:

?

1
2
3
4
5
6
7
8
9
10

import flash.filters.DropShadowFilter;
var sombra:DropShadowFilter = new DropShadowFilter();
sombra.strength = 5;
sombra.alpha = 0.50;
sombra.color = 0x000000;
...
miClip.filters = [sombra];

Tambin podramos crear la sombra directamente con todas sus propiedades en el

constructor de este modo:
?

1
2
3

var sombra:DropShadowFilter = new DropShadowFilter(distance, angle, color, alpha, b

miClip.filters = [sombra];
As en el constructor deberemos sustituir cada parmetro por el valor que queremos
darle.
Puedes omitir los parmetros que quieras, pero ten en cuenta que siempre se
interpretarn los valores que des en este orden hasta que no encuentre ms.

Para practicar la carga y modificacin de filtros te aconsejamos realizar el Ejercicio

Carga y modificacin de filtros.

20.3. El filtro Desenfoque

Utilizando este filtro podremos hacer que la imagen se muestre desenfocada:

Sus opciones son las siguientes:

.blurX (Desenfoque X): determina la cantidad de desenfoque horizontal.

.blurY (Desenfoque Y): determina la cantidad de desenfoque vertical.

.quality (Calidad): nmero de veces que se aplica el filtro. Puede tomar los
valores 1, 2 3. Calidad baja, media y alta, respectivamente.

Podremos utilizar el filtro Desenfoque escribiendo el siguiente cdigo:

?

1
2
3
4
5
6
7
8

import flash.filters.BlurFilter;
var desenfocar:BlurFilter = new BlurFilter ();
desenfocar.blurX = 5;
desenfocar.blurY = 5;
desenfocar.quality= 3;
miClip.filters = [desenfocar];

Tambin podremos crear el desenfoque directamente con todas sus propiedades en el

constructor, de este modo:
?

1
2
3

var desenfocar:BlurFilter = new BlurFilter(blurX, blurY, quality);

miClip.filters = [desenfocar];

As en el constructor deberemos sustituir cada parmetro por el valor que queremos

darle.
Puedes omitir los parmetros que quieras, pero ten en cuenta que siempre se
interpretarn los valores que des en este orden hasta que no encuentre ms.

20.4. El filtro Iluminado

Utilizando este filtro podremos aadirle un efecto de iluminacin a la imagen:

Sus opciones son las siguientes:

.alpha: determina la transparencia de la iluminacin (de 0 a 1).

.blurX: determina la cantidad de desenfoque horizontal.

.blurY: determina la cantidad de desenfoque vertical.
.color: determina el color de la iluminacin (escrito 0xRRVVAA).
.inner: booleano, hace que la iluminacin sea interior.
.knockout: booleano, activa el filtro extractor, hace que el objeto se vuelva del color
del fondo.
.quality: nmero de veces que se aplica el filtro. Puede tomar los valores 1, 2 3.
Calidad baja, media y alta, respectivamente.
.strength: determina la intensidad de la iluminacin.

Podremos utilizar el filtro Iluminado escribiendo el siguiente cdigo:

?

1
2
3
4
5
6
7
8
9
10
11

import flash.filters.GlowFilter;
var iluminado:GlowFilter = new GlowFilter();
iluminado.quality = 3;
iluminado.alpha = 0.50;
iluminado.color = 0x000000;
...
miClip.filters = [iluminado];

Tambin podramos crear la iluminacin directamente con todas sus propiedades en el

constructor, de este modo:
?

1
2
3

var iluminado:GlowFilter = new GlowFilter(color, alpha, blurX, blurY, strength, qua

miClip.filters = [iluminado];
As en el constructor deberemos sustituir cada parmetro por el valor que queremos
darle.

Puedes omitir los parmetros que quieras, pero ten en cuenta que siempre se
interpretarn los valores que des en este orden hasta que no encuentre ms.

20.5. El filtro Bisel

Utilizando este filtro podremos aadirle un bisel a la imagen:

Sus opciones son las siguientes:

.angle: determina el ngulo del bisel.

.blurX: determina la cantidad de desenfoque horizontal.

.blurY: determina la cantidad de desenfoque vertical.
.distance: determina la distancia que abarcar el bisel en el objeto.

.highlightAlpha: determina la transparencia del color de resaltado (bisel).

.hightlightColor: determina el color del resaltado (escrito 0xRRVVAA).
.knockout: booleano, activa el filtro extractor, hace que el objeto se vuelva del color
del fondo.
.quality: nmero de veces que se aplica el filtro. Puede tomar los valores 1, 2 3.
Calidad baja, media y alta, respectivamente.
.shadowAlpha: determina la transparencia del color de sombra del bisel.
.shadowColor: determina el color de la sombra del bisel (escrito 0xRRVVAA).
.strength: determina la intensidad del bisel.
.type:
indica
el
tipo
de
bisel
a
aplicar.
Puede
tomar
los
valores inner, outer y full. Interior, exterior y completo, respectivamente.

Podrs utilizar el filtro Bisel escribiendo el siguiente cdigo:

?

1
2
3
4
5
6
7
8
9
10

import flash.filters.BevelFilter;
var bisel:BevelFilter = new BevelFilter();
bisel.strength = 5;
bisel.angle = 45;
bisel.shadowColor = 0x000000;
...
miClip.filters = [bisel];

Tambin podras crear el bisel directamente con todas sus propiedades en el

constructor de este modo:
?

1
2
3
4
5
6
7
8
9

import flash.filters.BevelFilter;

var bisel:BevelFilter = new BevelFilter(distance, angle, highlightColor, highlightA

type, knockout);

miClip.filters = [bisel];
As en el constructor deberemos sustituir cada parmetro por el valor que queremos
darle.
Puedes omitir los parmetros que quieras, pero ten en cuenta que siempre se
interpretarn los valores que des en este orden hasta que no encuentre ms.

0.6. El filtro Iluminado degradado

Utilizando este filtro podremos aadirle una iluminacin (como en el filtro anterior) a la
imagen, pero con la caracterstica de que esta iluminacin estar compuesta por un
degradado:

Sus opciones son las siguientes:

.alphas: determina matriz de valores de transparencia alfa (de 0 a 1) para los

colores correspondientes de la matriz colors.

.angle: determina el ngulo de la iluminacin.

.blurX: determina la cantidad de desenfoque horizontal.
.blurY: determina la cantidad de desenfoque vertical.
.colors: conjunto de colores que definen el degradado (escritos 0xRRVVAA).
.distance: determina la distancia de la iluminacin al objeto.
.knockout: booleano, activa el filtro extractor, hace que el objeto se vuelva del color
del fondo.
.quality: nmero de veces que se aplica el filtro. Puede tomar los valores 1, 2 3.
Calidad baja, media y alta, respectivamente.
.ratios: matriz de proporciones de distribucin de color para los colores
correspondientes de la matriz colors (de 0 a 255).
.strength: determina la intensidad de la iluminacin.
.type: indica la colocacin de la iluminacin. Puede tomar los
valores inner, outer y full. Interior, exterior y completo, respectivamente.

Podrs utilizar el filtro Iluminado Degradado escribiendo el siguiente cdigo:

?

1
2
3
4
5
6
7
8
9
10
11

import flash.filters.GradientGlowFilter;
var iluminado:GradientGlowFilter = new GradientGlowFilter();
iluminado.angle = 45;
iluminado.colors = [0xFF0000, 0x00FF00, 0x0000FF];
iluminado.type = "inner";
...
miClip.filters = [iluminado];

Tambin podras crear la iluminacin directamente con todas sus propiedades en el

constructor de este modo:
?

1
2
3

var iluminado:GradientGowFilter = new GradientGowFilter(distance, angle, colors, al

knockout);
miClip.filters = [iluminado];
As en el constructor deberemos sustituir cada parmetro por el valor que queremos
darle.
Puedes omitir los parmetros que quieras, pero ten en cuenta que siempre se
interpretarn los valores que des en este orden hasta que no encuentre ms.

20.7. El filtro Bisel degradado

Igual que el filtro que hemos visto anteriormente, este filtro es capaz de mostrar un bisel
sobre el objeto, pero aadiendo un degradado a la forma de ste:

Sus opciones son las siguientes:

.alphas: determina matriz de valores de transparencia alfa (de 0 a 1) para los

colores correspondientes de la matriz colors.

.angle: determina el ngulo del bisel.

.blurX: determina la cantidad de desenfoque horizontal.
.blurY: determina la cantidad de desenfoque vertical.

.colors: conjunto de colores que definen el degradado (escritos 0xRRVVAA).

.distance: determina la distancia que abarcar el bisel en el objeto.
.knockout: booleano, activa el filtro extractor, hace que el objeto se vuelva del color
del fondo.
.quality: nmero de veces que se aplica el filtro. Puede tomar los valores 1, 2 3.
Calidad baja, media y alta, respectivamente.
.ratios: matriz de proporciones de distribucin de color para los colores
correspondientes de la matriz colors (de 0 a 255).
.strength: determina la intensidad del bisel.
.type:
indica
la
colocacin
del
bisel.
Puede
tomar
los
valores inner, outer y full. Interior, exterior y completo, respectivamente.

Podremos utilizar el filtro Bisel Degradado escribiendo el siguiente cdigo:

?

1
2
3
4
5
6
7
8
9
10

import flash.filters.GradientBevelFilter;
var bisel:GradientBevelFilter = new GradientBevelFilter();
bisel.angle = 90;
bisel.colors = [0xFF0000, 0x00FF00, 0x0000FF];
bisel.type = "full";
...
miClip.filters = [bisel];

Tambin podremos crear el bisel directamente con todas sus propiedades en el

constructor de este modo:

1
2
3
4
5

?
import flash.filters.GradientBevelFilter;
var bisel:GradientBevelFilter = new GradientBevelFilter(distance, angle, colors, alphas, ratios,
knockout);
miClip.filters = [bisel];
As en el constructor deberemos sustituir cada parmetro por el valor que queremos
darle.
Puedes omitir los parmetros que quieras, pero ten en cuenta que siempre se
interpretarn los valores que des en este orden hasta que no encuentre ms.

20.8. El filtro Ajustar color

Utilizando este filtro podremos cambiar todas las caractersticas correspondientes al
color de la imagen:

Slo tiene una opcin: .matrix.

En ella escribiremos una matriz de 20 elementos (4x5) que indicarn la cantidad de

cada color, su intensidad, brillo, saturacin y contraste.
Podrs modificar el filtro Ajustar Color escribiendo el siguiente cdigo:
?

1
2
3
4
5
6
7
8
9
10

import flash.filters.ColorMatrixFilter;
var miMatriz:Array =

[1, 0, 0, 0, 100,
0, 1, 0, 0, 100,
0, 0, 1, 0, 100,
0, 0, 0, 1,
0];

var ajustaColor:ColorMatrixFilter = new ColorMatrixFilter(miMatriz);

miClip.filters = [ajustaColor];

20.9. Acceder a los filtros de un elemento

Para modificar los filtros asociados a un objeto tendremos que acceder a su

propiedad filters.
Esta propiedad almacena una matriz que no puede ser editada directamente. As
que si queremos modificar los filtros que afectan a un objeto tendremos que darle una
nueva matriz a la propiedad y desechar la anterior.
As, si queremos aadirn nuevo filtro al objeto miClip deberemos escribir lo siguiente:
?

1
2
3
4
5
6

var sombra:DropShadowFilter = new DropShadowFilter();

var nuevaMatriz:Array = miClip.filters;
nuevaMatriz.push(sombra);
miClip.filters = nuevaMatriz;
Como puedes ver, lo que hacemos es guardar los filtros exitentes en una
matriz nuevaMatriz, introducimos el nuevo filtro en ella con el mtodo push() y luego le
asignamos los filtros que contiene miMatrizal clip miClip.

Como esta propiedad se trata de una matriz tambin podemos acceder a los filtros de
esta forma:
?

1
2
3
4
5
6

var nuevaMatriz:Array = miClip.filters;

nuevaMatriz[0].blurX = 15;
nuevaMatriz[0].blurY = 15;
miClip.filters = nuevaMatriz;
Descargamos los filtros en nuevaMatriz, y ahora accedemos al primer filtro
almacenado y cambiamos sus propiedades blurX y blurY. Una vez modificadas,
volvemos a volcar el contenido de nuevaMatrizen miClip.filters.

21.1. Introduccin

Con Flash cada vez es ms fcil aadir vdeos a nuestras presentaciones o webs. En
particular Flash CS5 incorpora una serie de caractersticas que facilitan la tarea al mximo
y permiten el uso de vdeos como si se tratase de cualquier otro objeto en pantalla.

A continuacin explicaremos cmo hacerlo y cules son las mejores alternativas.

Utilizaremos el siguiente ejemplo para documentar algunos de los pasos que deberemos
realizar.

21.2. Importando vdeos

Lo

primero

que

deberemos

hacer

es

transformar

nuestro

vdeo

de

formato avi, mpeg, mov, wmv o dv al formato que utiliza Flash: flv.
Este formato, adems de crear archivos de vdeo de buena calidad muy
comprimidos, te permitir introducir puntos de referencia desde donde controlaremos la
interaccin del entorno de la pelcula con el vdeo.
Haz clic en Archivo Importar Importar vdeo para empezar a configurar el
archivo .flv que crearemos.
Se abrir una pantalla como sta:

Aqu debers seleccionar el archivo que quieres importar para utilizarlo en tu pelcula.
Haz clic en el botn Examinar y bscalo en tus carpetas. Cuando lo hayas encontrado
pulsa el botn Aceptar y estars listo para seguir pulsando el botn Siguiente.
Tambin es posible marcar la opcin Ya se ha implementado en un servidor Web,
Flash Vdeo Streaming Service o Flash Communication Server. En este caso debers
introducir la URL del archivo, que previamente habr sido preparado para poder utilizarlo
en Flash.
La siguiente pantalla te permitir seleccionar el aspecto del reproductor:

La siguiente pantalla te mostrara la informacin del video que vamos a exportar, donde
se importara, etc:

A partir de este punto, ya tenemos el vdeo incorporado en nuestro proyecto.

21.3. Puntos de referencia

El vdeo se puede mostrar como un flujo, simplemente reproducirlo y pararlo. Pero
podemos hacer ms, podemos hacer que se pueda navegar a determinados momentos
del vdeo, o que se produzca un evento cuando alcance una posicin determinada. Pero
para hacer todo esto, tenemos que trabajar con puntos de referencia.
Podemos ver Puntos de referencia desde el panel de Propiedades del componente
de vdeo:

Existen dos tipos de puntos de referencia diferentes: puntos de referencia

codificados y puntos de referencia de ActionScript.
Los puntos de referencia codificados se aaden al codificar el vdeo con Adobe
Media Encoder. Pueden ser de Navegacin o de Evento.

Creando puntos de Navegacin podremos referenciarnos ms tarde a ellos

para saltar en la pelcula. Sera algo as como crear captulos sobre los que
podremos navegar utilizando botones y ActionScript.

El punto de Referencia de Evento nos permitir crear interacciones con el resto

de objetos en la pelcula. Estos puntos nos permitirn pasar parmetros que
podremos recuperar mediante ActionScript.
En la imagen anterior, vemos que hay 3 puntos de Navegacin, a los cuales
acudiremos pulsando los botones para saltar entre los captulos de la pelcula. Luego
hemos aadido 4 puntos de Eventodesde los que pasaremos un parmetro que
har que se muestre determinado fotograma de un clip que se encontrar en
el Escenario.
Realiza el siguiente ejercicio paso a paso para ver cmo Crear Puntos de
Referencia Codificados.

Los puntos de ActionScript, como su nombre indica, se codifican mediante

ActionScript. Por ello, podemos aadirlos directamente desde el panel de Propiedades.
Para hacerlo no tenemos ms que desplazar el cabezal del vdeo hasta el momento en el
que lo queramos aadir, y pulsar el icono ms + del panel.

Tanto los puntos de ActionScript como los codificados, pueden enviar parmetros, lo
que nos permite recibir informacin.

21.4. El componente FLVPlayback

El vdeo, no se reproduce directamente. Lo hace a travs de un reproductor, un
componente del tipo FLVPlayback.
Otra forma de insertar un vdeo en el escenario, es creando primero este componente,
e indicndole el vdeo a reproducir. Podemos hacerlo a travs del Panel Componentes,
accesible desde el men desde Ventana Componentes FLVPlayback.
Desde el inspector de Propiedades podemos configurarlo. Veamos sus opciones:

align: especifica el diseo del vdeo. Por ejemplo, lo podemos centrar con center.

autoPlay: puede tomar los valores true o false. Indican si el vdeo debe
reproducirse nada ms abrir el archivo o esperar a una orden para empezar a
reproducirse.
cuePoints: indica los puntos de referencia que estn incluidos en la pelcula. Una
vez importada la pelcula a formato flv no pueden ser modificados los puntos
codificados, aunque s los de ActionScript.
isLive: puede tomar los valores true o false. Este campo se utilizar para la
transmisin de vdeo en vivo y slo podr utilizarse a travs de un servidor
de Streaming.
preview: Permite obtener una previsualizacin desde una imagen png.
scaleMode: Indica si se altera la escala del vdeo: si muestra su tamao original, si
se ajusta al tamao de la escena, etc...
skin: desde aqu podemos modificar la apariencia de los controles de la pelcula y
seleccionar uno entre los predefinidos.
skinAutoHide: puede tomar los valores true o false. Indicar si los controles se
pueden esconder para volver a aparecer cuando el cursor se site sobre la pelcula.
skinBackgroundAlpha establece la transparencia del fondo del skin,
y skinBackgroundColor su color.
source es el archivo de vdeo que se mostrar en el reproductor.
volume: de 0 a 100. Indica el volumen mximo del vdeo.

A parte de las que se muestran en el panel, existen otras propiedades que pueden
sernos tiles:

autoRewind: puede tomar los valores true o false. Indica si el vdeo deber volver a
la posicin inicial despus de haberse reproducido completamente, o tras hacer
un stop.

autoSize: puede tomar los valores true o false. Indica si el control deber ajustarse
al tamao del vdeo, o por el contrario deber ser el vdeo el que se ajuste al tamao
del control.
bufferTime: especifica el nmero de segundos que se almacenarn en la memoria
antes de que se inicie la reproduccin del vdeo.
totalTime: indica el tiempo total del vdeo.

Recuerda que todas estas propiedades son accesibles desde ActionScript.

Una vez insertada la pelcula mediante la adicin de este componente o por importacin
deberemos darle un nombre de instancia para poder referirnos a l. Hazlo desde este
mismo panel o desde el Panel Propiedades.

21.5. Uso de componentes para la reproduccin

Usar componentes para controlar la pelcula es muy sencillo, slo debers arrastrarlos
desde el Panel Componentes al Escenario y escribir unas pocas lneas en el Panel
Acciones.

BackButton: retrocede el flujo del vdeo al punto de referencia inmediatamente

anterior o en su defecto al inicio de ste.

BufferingBar: muestra el progreso de descarga del vdeo.

ForwardButton: avanza el flujo del vdeo al punto de referencia inmediatamente
posterior o en su defecto al final de ste.
FullScreenButton: cambia al modo de pantalla completa.

MuteButton: establece el volumen de la pelcula directamente a 0. Actuara de

forma similar a la lnea:
?

miVideo.volume = 0;

PauseButton: pausa la pelcula en el momento en el que se pulse el botn.

PlayButton: reaunda (o comienza) la reproduccin a partir de donde se encuentre el

cabezal de reproduccin de vdeo.
PlayPauseButton: una mezcla de los dos anteriores, es capaz de pausar y reanudar
la reproduccin desde un mismo control.
SeekBar: desde esta barra avanzar y retroceder manualmente por la lnea de flujo
de la pelcula.
StopButton: detiene la reproduccin y posiciona el cabezal de reproduccin al
principio del vdeo.
VolumeBar: permite el aumento o disminucin del volumen del vdeo mediante una
barra de volumen.

Una vez aadidos los componentes necesarios al Escenario tendrs que darle un
nombre de instancia y luego asociarlo al reproductor empleando ActionScript.
Bsicamente, el reproductor tiene una propiedad que coincide con el tipo de componente,
por lo que hay que asignar cada instancia a su propiedad correspondiente. Un ejemplo
sera el siguiente:
?

1
2
3
4
5
6
7
8
9
10

miVideo.playButton = miBotonPlay;
miVideo.pauseButton = miBotonPausa;
miVideo.playPauseButton = miBotonPausaPlay;
miVideo.stopButton = miBotonStop;
mVideo.backButton = miBotonAtras;
miVideo.forwardButton = miBotonAdelante;
miVideo.muteButton = miBotonSilencio;
miVideo.volumeBar = miBarraVolumen;
miVideo.seekBar = miBarraDeslizadora;
miVideo.bufferingBar = miBarraProgreso;

El componente se asociar al vdeo y funcionar por s solo. Fcil, verdad?

Puedes modificar los componentes que aadas al Escenario haciendo doble clic sobre
ellos y cambiando su forma, tamao o color.

21.6. Crear controles propios

Crear controles propios no es muy complicado en Flash CS5. Slo tienes que crear los
botones

que

consideres

componente FLVPlayback.

necesarios

utilizar

las

propiedades

del

Puedes recurrir al panel Fragmentos de cdigo donde encontrars cdigos muy tiles
con las funciones bsicas.

play(): reproduce el vdeo.

?

miVideo.play();

stop(): detiene el vdeo y vuelve al inicio.

?

miVideo.stop();

pause(): detiene el vdeo conservando su posicin actual.

?

miVideo.pause();

seek(segundo:Number): permite el avance o retroceso de la pelcula de vdeo.

?

miVideo.seek(5);

Esta lnea colocar la cabeza lectora en el segundo 5 y reproducir a partir de ah.

volume: define el volumen del vdeo. Puedes introducir un valor entre 0 y 100.
?

miVideo.volume = 50;

Un ejemplo de cmo crear un botn de Play/Pause sera asociando el cdigo siguiente

a un botn:
?

1
2
3
4
5
6
7
8

miBoton.addEventListener(MouseEvent.CLICK,pararContinuar);
function pararContinuar(event:MouseEvent) {
if (miVideo.state==miVideo.PAUSED) {
miVideo.play();
} else {
miVideo.pause();
}
}

La propiedad state devuelve el estado en el que se encuentra nuestro vdeo en el

momento, puede tomar los siguientes valores:

miVideo.PAUSED: el vdeo se encuentra pausado.

miVideo.PLAYING: el vdeo se est reproduciendo.

miVideo.REWINDING: el vdeo est en estado de rebobinado.
miVideo.SEEKING: el vdeo est en estado de bsqueda.
miVideo.STOPPED: el vdeo se encuentra detenido.
miVideo.BUFFERING: el vdeo todava se est almacenando en el buffer.
miVideo.CONNECTION_ERROR: se ha producido un error de conexin y el vdeo
no podr visualizarse.
miVideo.DISCONNECTED: el vdeo est en estado de desconexin. Este estado se
producir hasta que se le asigne una ruta a la propiedad contentPath.
miVideo.LOADING: el vdeo est en estado de carga.

21.7. Navegar con los puntos de referencia

Ahora veremos como interactuar con los puntos de referencia que hayamos creado.
Principalmente, podemos usar los puntos de referencia de dos formas: usarlos apra
navegar por el vdeo, o esperar a que se produzcan y entonces realizar una accin.

Navegar con puntos de referencia

En el ejemplo hemos creado 3 botones que debern saltar a los tres puntos diferentes
que hemos creado: inicio, carrera1 y carrera2.
El cdigo asociado al botn sera el siguiente:
?

1
2
3
4
5

miBoton.addEventListener(MouseEvent.CLICK,reproducirInicio);
function reproducirInicio(event:MouseEvent) {
miVideo.seekToNavCuePoint("inicio");
miVideo.play();
}
Este trozo de cdigo utiliza la funcin seekToNavCuePoint para buscar el punto de
referencia que se le indique, luego tendremos que decirle que reanude la reproduccin.
Tambin

puedes

utilizar

funciones seekToNextNavCuePoint() y seekToPrevNavCuePoint() para

las
avanzar

retroceder, respectivamente, por los diferentes puntos de referencia de navegacin

creados.
?

1
2

miVideo.seekToNextNavCuePoint();
miVideo.seekToPrevNavCuePoint();

21.8. Trabajar con eventos de vdeo

Como vimos antes, podamos crear puntos de referencia de Eventos para pasar
parmetros a nuestra pelcula desde la reproduccin del vdeo.
Capturar el evento.
Imaginemos que tenemos un vdeo con un punto de referencia llamado susto, y que
cuando el vdeo lo alcance, queremos mostrar un texto determinado en un componente de
texto.
Lo

que

tenemos

que

hacer

es

escuchar

cundo

se

produce

el

evento MetadataEvent.CUE_POINT, y entonces llevar a cabo nuestra accin, como en el

siguiente ejemplo:
?

1
2
3
4
5
6
7
8
9
10
11

import fl.video.MetadataEvent; //Necesitamos importar el tipo de evento

reproudctor.addEventListener(MetadataEvent.CUE_POINT, fl_CuePointHandler);
function fl_CuePointHandler(event:MetadataEvent):void
{
//con event.info.name podemos conocer el nombre el punto
if(event.info.name=="susto") {
txtSalida.text="Atencin a la cara de Juanito";
}
}

Como vimos, tambin podamos recuperar parmetros del punto de referencia:

?

1
2
3
4
5
6
7
8

import fl.video.MetadataEvent;
reproductor.addEventListener(MetadataEvent.CUE_POINT,eventosVideo);
function eventosVideo(event:MetadataEvent ) {
if (event.info.parameters) {
mensaje.gotoAndPlay(event.info.parameters["fotograma"]);
}
}

Lo que hacemos en la condicin, es comprobar si hay informacin sobre los parmetros

(.info.parameters).
Si es as, sacamos la informacin del parmetro llamndolo por su nombre y actuamos
en consecuencia. Lo que hemos hecho, es hacer que el parmetro fotograma nos indique
la etiqueta a la que queremos desplazar el cabezal de mensaje.

En el ejemplo hemos creado un clip de pelcula que se llama mensaje. Cuando se van
produciendo determinados eventos en el vdeo vamos moviendo el cabezal de
reproduccin de dicho clip y as creamos una vinculacin entre ambos, el clip y el vdeo.

22.1. Introduccin
En este tema veremos los elementos bsicos que necesitaras a la hora de crear juegos
con Flash: el movimiento, los choques, la rotacin, creacin aleatoria de elementos,
etc.
A medida que avancemos en el tema iremos haciendo referencia a este juego que
hemos creado como ejemplo. Pero, primero empezaremos por lo bsico.

22.2. Manejando elementos

Cuando trabajemos con objetos necesitaremos acceder a algunas caractersticas
bsicas, como por ejemplo su anchura y altura o su posicin en el Escenario.
Podemos

modificar

el

tamao

del

objeto

utilizando

las

propiedades width, height, scaleX e scaleY.

Las dos primeras (width y height) modificarn o devolvern la anchura y altura,
respectivamente, en pxeles del objeto referenciado, por tanto, podemos cambiar el
tamao de un clip escribiendo lo siguiente:
?

1
2

miClip.width = 100;
miClip.height = 200
Las propiedades scaleX e scaleY cambian el tamao, pero de forma porcentual,
donde 1.0 equivale al 100%. Podemos utilizar estas propiedades para hacer un clip el
doble de grande que era, por ejemplo:

1
2

miClip.scaleX = 2;
miClip.scaleY = 2;
Har que su visualizacin sea del doble (200%).
Tambin podemos averiguar o modificar la posicin de un objeto, basta con trabajar con
sus propiedades x e y:

1
2
3

miClip.x = 50;
miClip.y = 150;

4
5

var posicionDeClipHorizontal:Number = miClip.x;

var posicionDeClipVertical:Number = miClip.y;
Recuerda que estas propiedades trabajan con pxeles.
De esta forma podemos mover el objeto de una forma muy fcil, por ejemplo para hacer
que se desplace hacia la derecha del Escenario debers escribir:

miClip.x = miClip.x + 1;
Utilizando estas propiedades y combinndola con las caractersticas de los
Movieclips podemos recrear de forma ms natural el movimiento.
Veamos este ejemplo:

Aqu hemos creado un clip de pelcula con tres posiciones, parado, izquierda y derecha:

As, podemos llamar mediante la instruccin gotoAndStop() a uno de los fotogramas

del clip para que se muestre dicha posicin y d ms realismo al movimiento.
El cdigo que hemos incluido en la pelcula es el siguiente:
?

1
2
3
4
5

var izquierda:Boolean = false;

var derecha:Boolean = false;
miClip.gotoAndStop("parado");
miClip.x = 10;

6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

miClip.addEventListener(MouseEvent.CLICK,iniciarMovimiento);
function iniciarMovimiento(event:MouseEvent):void{
if (miClip.x <= 10) {
miClip.gotoAndStop("derecha");
derecha = true;
}
if (miClip.x >= 495) {
miClip.gotoAndStop("izquierda");
izquierda = true;
}
}
miClip.addEventListener(Event.ENTER_FRAME,desplazar)
function desplazar(event):void{
if (derecha) {
if (miClip.x < 495) {
miClip.x = miClip.x + 6;
} else {
miClip.gotoAndStop("parado");
derecha = false;
}
}
if (izquierda) {
if (miClip.x > 10) {
miClip.x = miClip.x - 6;
} else {
miClip.gotoAndStop("parado");
izquierda = false;
}
}
}
Observa cmo hemos utilizado aqu el evento ENTER_FRAME. Nos valemos de ella

para crear el movimiento, de esta forma hacemos que la coordenada x del objeto se
incremente cada vez que entre en el fotograma de nuevo. Veremos esta funcin con
ms detalle a lo largo del tema.
Nota: Recuerda que el evento ENTER_FRAME se produce de forma continua y
constante, normalmente varias veces por segundo.
Hemos utilizado las variables derecha e izquierda (de tipo booleano) para evaluar si el
objeto debe desplazarse. En el evento ENTER_FRAME chequeamos estas variables y si
estn a true comenzamos el movimiento hasta la posicin que queramos.
A medida que vayamos avanzando en el tema veremos ms funciones y mtodos que
nos permitirn acciones ms verstiles y ajustadas a nuestras necesidades.

Otra forma de modificar la apariencia del objeto con el que trabajamos es utilizando
la propiedad rotation.
Esta propiedad acta sobre el objeto rotndolo tantos grados como especifiques
respecto a su posicin original. Por ejemplo:
?

miClip.rotation = 90;
Esta lnea har que el objeto rote 90 grados en el sentido de las agujas del reloj.
Para rotar un objeto hacia el lado contrario basta con aadirle un signo menos (-) antes
del ngulo:

miClip.rotation = -90;
Para devolver al objeto a su posicin original slo tendrs que escribir la siguiente lnea:

miClip.rotation = 0;
As la rotacin que acta sobre el objeto es nula y se muestra en su posicin original.
Recuerda que para que las rotaciones parezcan reales debers posicionar el objeto
dentro del clip en el centro absoluto, para que as la referencia del clip se encuentre en la
posicin adecuada.
Observa la diferencia entre estos dos clips:

En ambos la rotacin se aplicar respecto al punto de referencia, por lo que en la

edicin

de

ste

debers

utilizar

los

botones

del Panel

Alinear (Ventana Alinear) para centrar el objeto respecto al punto de referencia del
clip.

El problema ahora se nos plantea cuando queremos que el objeto se oriente hacia unas
coordenadas en concreto. Cmo calculamos el ngulo necesario para que nuestro
elemento se oriente hacia otro situado en las coordenadas 100, 200? La solucin no es
muy complicada: deberemos echar mano de la trigonometra.

En Flash tenemos una funcin muy til que nos ayuda a encontrar ngulos rpidamente.
Utilizando la funcin Math.atan2 recuperaremos el ngulo formado por unas
coordenadas en el espacio respecto a un punto central.
Veamos un ejemplo:
Trigonometria 1
Escribiendo la siguiente lnea recuperaremos el ngulo que buscamos:
?
1
var angulo:Number = Math.atan2(x, y);
Nota: Hay que tener en cuenta que el ngulo calculado est expresado en radianes.
Ahora veamos las tres consideraciones que tenemos que tener en cuenta.
Observa este ejemplo:
Trigonometria 2
Lo primero a tener en cuenta es que las coordenadas que tenemos del punto al que
queremos orientar el objeto no estn en relacin ste.
Podemos averiguarlas de forma muy fcil haciendo una pequea conversin restando
las coordenadas entre s:
Trigonometria 3
Ahora ya podemos emplear la funcin atan2:
?
1
var angulo:Number = Math.atan2(x1 - x2, y1 - y2);
Lo segundo que tendremos que saber es que esta funcin devuelve un ngulo medido en
el sentido contrario a las agujas del reloj, es decir:
Trigonometria 4
Por tanto si decimos a nuestro objeto que se oriente -30 grados se colocar de esa forma:
Trigonometria 5
Nuestro objeto se encuentra en otro cuadrante completamente diferente, pero si
observamos con atencin, la diferencia siempre ser de 90:
Trigonometria 6

Slo tenemos que sumarle 90 al ngulo resultante para que el objeto se oriente hacia el
lugar correcto.
As que solventaremos esto son una sola lnea. Pero antes convertiremos el ngulo
resultante en radianes a grados:
?
1
2
var grados:Number = Math.round(angulo*180/Math.PI);
miClip.rotation = grados + 90;
Desde luego la suma que hemos realizado es consecuencia directa de que el objeto este
orientado inicialmente hacia arriba (y empiece a contar los grados desde ese punto en
0).
Si partisemos de un estado original horizontal como el desfase del objeto ya se
encuentra a 90 grados no har falta realizarlo:
Trigonometria 7
Observa que en este caso si giramos el objeto -30 grados se colocar orientado hacia la
posicin que buscamos.
O incluso, si al contrario, el objeto se encuentra orientado hacia la izquierda deberemos
sumarle 180.
Trigonometria 8
Como ves, todo depender de la posicin original del objetos (y de que vrtice quieras
orientar). Lo ms aconsejable en este caso es que los objetos que vayan a rotar estn
orientados hacia la derecha, as no tendrs que preocuparte del desfase del ngulo.

Otra de las tcnicas que nos ser muy til es la carga y descarga de elementos
existentes en la biblioteca. Esto lo haremos con la funcin addChild.
Recordemos que esta funcin aade un elemento (hijo) a la lista de visualizacin de un
contenedor (padre). Si omitimos el objeto, lo aadimos a la pelcula general.
Tiene la siguiente sintaxis:
?

miContenedor.addChild(objeto);
Como ya vimos, esto lo emplebamos para cargar agregar archivos externos. Pero
ahora queremos cargar elementos que ya tengamos en la biblioteca. Para poder incluir
un clip desde la biblioteca, antes deberemos crear una clase para poder acceder a l

desde ActionScript. Puedes hacerlo haciendo clic derecho sobre el elemento en

la Biblioteca. Selecciona Propiedades (Botn Avanzado). Aqu, marcamos la
opcin Exportar para SctionScript, y le damos el nombre de la clase en Clase:.
Recuerda este nombre, porque es el que utilizaremos para crear los objetos.

Con esto, hemos creado la una clase (en la imagen, la clase miClip). Como no hemos
asociado nada de cdigo, esta clase se comportar exactamente como un MovieClip, ya
que es su clase base (caja de texto Clase base). Ahora, para agregar estos elementos,
slo tenemos que crear un nuevo objeto de la clase, y agregarlo al contenedor:
?

1
2

var miObjetoClip:miClip = new miClip;

miContenedor.addChild(miObjetoClip);
Para

eliminar

clips

utilizar removeChild() o removeChildAt(),

insertados
que

mediante addChild puedes

comentamos

al

hablar

de

los

contenedores.
?

miContenedor.removeChild(miClip);
Recuerda que antes de quitar un elemento, es recomendable borrar sus escuchadores
de eventos.

22.3. Interaccin con el ratn

Veamos ahora cmo interactuar con el ratn y el Escenario y sus elementos.

Empezaremos viendo una de las funciones ms tiles para el ratn: arrastrar y
colocar.
Utilizando las funciones StartDrag() y StopDrag() es muy sencillo arrastrar y colocar
objetos por el Escenario, como vimos en el primer ejercicio paso a paso de la unidad 18,
en el cual usbamos estas dos propiedades.
La funcin startDrag permite varios parmetros:
?

miObjeto.startDrag(bloqueaCentro, rectngulo);
En bloqueaCentro podremos pasarle un valor booleano (true o false) que indicar si el
arrastre se realizar desde el centro del clip (true) o desde el punto donde hizo clic el
usuario (false).
El otro parmetro, rectngulo, nos permite definir los lmites de la zona donde
podemos arrastrar. Esta opcin es muy til cuando queremos que el arrastre slo se
pueda realizar sobre una zona determinada, como por ejemplo las tizas de las barras de
desplazamiento, que no se pueden arrastrar fuera de la zona rectangular que delimitan
dichas barras.
Una propiedad muy til que tambin te ser de mucha ayuda es la de dropTarget. Te
permitir averiguar sobre qu objeto se ha soltado el objeto arrastrado:

1
2
3
4
5
6
7
8
9
10

miObjeto.addEventListener(MouseEvent.MOUSE_DOWN, arrastrar);
function arrastrar(event):void {
miObjeto.startDrag();
}
stage.addEventListener(MouseEvent.MOUSE_UP, soltar);
function soltar(event):void {
miObjeto.stopDrag();
trace(miObjeto.dropTarget);
}
Este

cdigo

devolver

al Panel

Salida el

tipo

de

objeto

(podemos

utilizar miObjeto.dropTarget.name si queremos saber el nombre de instancia) sobre el

cual se ha soltado. Si no hay ningn objeto, devolver NULL.
Observa tambin que al soltar, es la escena la que escucha el evento. Esto hace que lo
podamos soltar aunque, por lo que sea, el cursor ya no est sobre el objeto.

Realiza el ejercicio paso a paso de Arrastre y Orientacin de objetos para practicar

conceptos que hemos visto hasta ahora.

Otra cosa que nos ser de gran ayuda es poder localizar la posicin del ratn. De
este modo podramos hacer que los objetos se desplacen u orienten hacia el ratn
Para averiguar las coordenadas del ratn slo tendrs que recurrir a las
propiedades mouseX y mouseY:
?

1
2

var coordenadaX:Number = mouseX;

var coordenadaY:Number = mouseY;
Con todo lo que hemos aprendido podemos ya sustituir el cursor del ratn normal
por uno de nuestro agrado.
Para ello tenemos que escribir muy pocas lneas:

1
2
3
4
5
6
7
8
9

Mouse.hide(); //Ocultamos el cursor verdadero

addEventListener(Event.ENTER_FRAME,cambiarCursor);
function cambiarCursor(event):void {
texto.contador_txt.text="("+mouseX+", "+mouseY+")";
texto.x = mouseX; //Asignamos las coordenadas
texto.y = mouseY; //Al elemento de texto
miCursor.x = mouseX; //Y al clip que har de cursor
miCursor.y = mouseY;
}
Comenzamos ocultando el cursor verdadero, con el mtodo Mouse.hide();.
En la biblioteca tenemos dos clips miCursor, que es lo que queremos mostrar como
cursor, y texto, otro clip en el que mostramos las coordenadas. Como queremos que
ambos objetos sigan al cursor real, en un evento repetitivo como enterFrame, les
asignamos a ambos las coordenadas del ratn.
Podemos volver a visualizar el ratn, por ejemplo, porque cambiamos de fotograma,
con el cdigo:

1 Mouse.show();
22.4. Interaccin del teclado
Podemos aadir a nuestras pelculas interaccin con las teclas pulsadas, el
procedimiento es muy sencillo, basta con detectar los eventos que se producen al pulsar
las teclas y saber qu tecla lo ha originado.

Cuando recogemos un evento de teclado, disponemos del mtodo .keyCode, que nos
indica la tecla que se ha pulsado. Dependiendo de la que sea, haremos una cosa u otra.
Por ejemplo:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
addEventListener(KeyboardEvent.KEY_DOWN, capturarTeclado);
function capturarTeclado(tecla:KeyboardEvent):void{
//Es importante especificar que es un vento del tipo KeyboardEvent
//para poder emplear el mtodo .keyCode.
switch (tecla.keyCode){
case Keyboard.RIGHT:
//mover hacia la derecha
break;
case Keyboard.LEFT:
//mover hacia la izquierda
break;
}
}
Los cdigos de las teclas son bastante sencillos, las flechas UP, DOWN, RIGHT y
LEFT; la barra espaciadora SPACE; y las teclas especiales SHIFT, CONTROL, TAB,
CAPSLOCK, ESCAPE, ENTER, BACKSPACE, INSERT, DELETEKEY, HOME,
END, PGDN y PGUP. Siempre precedido por Keyboard.
Los eventos de teclado que podemos emplear son:
KeyboardEvent.KEY_DOWN ("keyDown") - Cuando se pulsa una tecla.
KeyboardEvent.KEY_UP ("keyDown") - Cuando se suelta.
Recordemos el ejemplo que vimos al principio del tema. Esta vez, lo vamos a cambiar
para mover el objeto con las teclas en vez de con el ratn:

Nota: Si no responde al teclado, haz clic primero para que tome el foco.

El cdigo que hemos incluido es el siguiente:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
var izquierda:Boolean=false;
var derecha:Boolean=false;

miClip.gotoAndStop("parado");
//Detectamos el evento al pulsar tecla, y marcamos
//La direccin del movimiento
addEventListener(KeyboardEvent.KEY_DOWN, capturarTeclado);
function capturarTeclado(tecla:KeyboardEvent):void {
switch (tecla.keyCode) { //Dependiendo de la tecla, indicamos
case Keyboard.RIGHT : //una direccin u otra
derecha=true;
break;
case Keyboard.LEFT :
izquierda=true;
break;
}
}
//En el evento onEnterFrame, comprobamos si estn activas
//Las variables que indican la direccin del movimiento
miClip.addEventListener(Event.ENTER_FRAME, movimiento);
function movimiento(event):void {
if (derecha) {
miClip.gotoAndStop("derecha");
if (miClip.x<490) {
miClip.x=miClip.x+7;
}
} else if (izquierda) {
miClip.gotoAndStop("izquierda");
if (miClip.x>7) {
miClip.x=miClip.x-7;
}
}
}
//Detectamos cundo se suelta la tecla
addEventListener(KeyboardEvent.KEY_UP, parar);
function parar(event):void {
derecha=false; //Y paramos el movimiento
izquierda=false;
miClip.gotoAndStop("parado");
}

22.5. Interaccin entre elementos

Una de las cosas que ms nos interesar realizar es el choque entre elementos en
el Escenario, y ya no el choque fsico en s, sino la coincidencia de dos elementos en
un mismo espacio.

Esto lo podremos evaluar y tratar con los mtodos hitTestPoint(x, y) para detectar si
una coordenada cae dentro del objeto, y hitTestObject(object) que nos indica si dos
objetos se solapan (chocan).
Su uso tiene dos posibilidades, ambas muy sencillas. Puedes evaluar si en un punto en
concreto se encuentra un objeto especfico (muy til para detectar los clics del ratn o
donde se encuentra en cada momento):
?

1
2
3
4
5
6
7

miClip.addEventListener(MouseEvent.MOUSE_UP, miFuncion);
function miFuncion(event:MouseEvent):void{
if (miClip.hitTestPoint(mouseX, mouseY) {
//coincidencia
}
}

Este cdigo evala la posicin del ratn a cada clic, si las coordenadas introducidas en
el mtodo hitTestPoint coinciden con el rea de miClip se produce colisin.
hitTestPoint admite un tercer parmetro booleano. ste indica si la colisin se calcula
con respecto a la forma del elemento (true) a al rectngulo delimitador del objeto (false).
La opcin por defecto es esta ltima.
Cuando

queremos

evaluar

si

un

objeto

"choca"

con

otro,

empleamos

el

mtodo hitTestObject:
?

miClip.hitTestObject(miOtroClip);
En ambos casos, el valor devuelto es true, si hay colisin, o false si no.
En desplazamientos utilizaremos mucho esta opcin para averiguar si el objeto que
estamos moviendo choca con una pared u otro objeto.
Ten en cuenta que la posicin que deberemos evaluar si hace colisin con la
pared debe ser aquella que adoptara el objeto despus de desplazarse. Si lo
desplazamos antes los objetos pueden quedar solapados, y eso, dependiendo del caso,
puede no ser adecuado para nuestro diseo.
Esto complica un poco las cosas, pues deberemos calcular primero dnde estarn las
coordenadas del objeto tras moverlo y calcular la colisin antes de moverlo.

miPared.hitTestPoint(coorXfinal_Clip, coorYfinal_Clip);

Pero, cmo conocemos las coordenadas de una forma?, cmo averiguo el punto
mximo que alcanza en la esquina abajo derecha?. Como siempre, Flash nos soluciona
esto incorporando un mtodo a los objetos de visualizacin que nos devuelve sus
medidas. El mtodo getBounds.

Haz clic y utiliza las flechas para moverte.

Su sintaxis es la siguiente:
?

miClip.getBounds(objetoReferencia);
En objetoReferencia indicaremos

el

objeto cuyo

sistema

de

coordenadas

utilizaremos como punto de referencia. Normalmente escribiremos stage, para que las
coordenadas dadas sean respecto a la pelcula en general y no sobre un clip en particular.
El mtodo nos devuelve un objeto Rectangle. Este tipo de objeto define un rea
rectangular, y nos permite conocer la posicin de sus cuatro lados con las siguientes
propiedades:

.top : lado superior (sera lo mismo que y).

.bottom : lado inferior (sera y + altura del objeto).

.lef : lado izquierdo (sera lo mismo que x).
.right: lado derecho (sera x ms el ancho).

1
2
3
4

miClip.getBounds(stage).left;
miClip.getBounds(stage).right;
miClip.getBounds(stage).top;
miClip.getBounds(stage).bottom;
Realiza el ejercicio paso a paso de Colisin y Movimiento para practicar este
concepto.

22.6. Funciones avanzadas

Tambin veremos otras opciones que nos ayudarn mucho a la hora de crear juegos.
Una de ellas es la de la posibilidad de darle aleatoriedad a los componentes.
Podemos utilizar la funcin que incorpora Flash Math.random() que devuelve un
nmero pseudo-aleatorio entre 1 y 0.
Su uso es simple slo debers escribir:
?
1
var miNumero:Number = Math.random();

Puedes comprobarlo probando el siguiente ejemplo:

?
1
2
3
4
trace(Math.random());
trace(Math.random());
trace(Math.random());
trace(Math.random());
Es tan til que a raz de esta funcin se ha creado este trozo de cdigo que casi utilizars
en la mayora de tus pelculas que contengan componentes aleatorios:
?
1
2
3
function num_aleatorio (min:Number ,max:Number):Number {
return (Math.floor(Math.random()*(max-min+1))+min);
}
Esta funcin te devuelve un nmero aleatorio dentro de un rango:
?
1
var miNumero:Number = num_aleatorio(1, 100);
En este ejemplo se almacenar un nmero de 1 a 100 en la variable miNumero.
En el juego de ejemplo que completaremos en el ejercicio final, hemos utilizado esta
funcin para generar de forma aleatoria desde dnde parten los proyectiles, dnde caen,
y su escala.
?
1
2
3
4
5
6
7
8
var escala:Number = num_aleatorio(0, 2); //escala influir en el tamao y la velocidad
this.velocidad = velocidad_base+nivel*1.5+(2-escala);
this.width = this.width*((10-escala)/10);
this.height = this.height*((10-escala)/10);
var puntoSalida:Number = num_aleatorio(this.width/2, ancho-this.width/2); //Zona de
salida
this.x=puntoSalida;
this.y = 0;

var puntoImpacto:Number = num_aleatorio(ancho*(1/4), ancho*(3/4));//Zona de

impacto
Como ves tenemos randomizados muchos de los procesos. El primer num_aleatorio lo
utilizamos para calcular la escala, un valor entre 2 y 0 que influir en el tamao del
proyectil y su velocidad. El segundo num_aleatorio calcula la posicin desde la que
parte el proyectil, y el ltimo num_aleatorio calcula la posicin hacia donde se dirige.
Adems, en el juego la hemos empleado ms veces, por ejemplo para decidir si se lanza
el proyectil o de que tipo ser.
De esta forma hemos logrado que en cada partida los proyectiles aparezcan de forma
distinta.

Otra de las funciones que te vendrn muy bien es la de dotar de velocidad a los
movimientos de los objetos.
Observa el cdigo que hemos introducido en el juego:
?
1
this.velocidad = velocidad_base+nivel*1.5+(2-escala);
En la definicin de la clase Proyectil, hemos creado una propiedad velocidad que
calculamos en funcin a una velocidad base a la que le sumamos la velocidad que
depende del nivel y de la escala del proyectil. De hecho, esa velocidad va aumentando a
medida que se van eliminando proyectiles y subiendo de nivel.
De ah que cuando asignamos el movimiento del elemento:
?
1
this.y += this.velocidad;
Lo hacemos refirindonos a la velocidad, as podemos variarla en cualquier momento
aumentndola o reducindola segn nuestros propsitos.
Por ltimo veremos algo que nos permitir mostrar informacin a los usuarios para que
ellos tengan conocimiento de cmo se est desarrollando la partida. Esto lo haremos con
los textFields. Los textFields pueden ser elementos que hayamos creado antes de
publicar la pelcula, as que no tendremos problemas con ellos. Definimos su aspecto y
propiedades en el panel de Propiedades, y utilizando su nombre de instancia, podemos
cambiar su contenido dinmicamente de la siguiente manera:
?
1
estadisticas_txt.text = "Estas son las estadsticas del juego";
Simplemente los declararemos como texto dinmico e iremos modificando su
contenido. Pero, Y si queremos crear un campo de texto mediante ActionScript?
Muy sencillo, te bastarn unas pocas lneas para conseguirlo:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//Creamos el formato
var miFormato:TextFormat = new TextFormat();
//Definimos el formato;
miFormato.bold = true;
miFormato.font = "Arial";
miFormato.size = 12;
miFormato.color = 0xFFFFFF;
miFormato.align = "left";
//Creamos el campo de texto
var estadisticas_txt:TextField = new TextField();
//Definimos la propiedades del campo de texto
estadisticas_txt.name = "estadisticas_txt";
estadisticas_txt.defaultTextFormat = miFormato; //asignamos el formato
estadisticas_txt.selectable = false;
estadisticas_txt.x = 10;
estadisticas_txt.y = 0;
estadisticas_txt.width = 530;
estadisticas_txt.height = 22;
estadisticas_txt.text = "Estas son las estadsticas del juego";
//Lo aadimos a la lista de visualizacin
addChild(estadisticas_txt);
En nuestro ejemplo, por comodidad no creamos todo el campo de texto desde el cdigo.

Puedes ver que hemos creado un objeto llamado miFormato que es del tipo formato de
texto, con unas caractersticas bsicas que podremos aplicar sobre cualquier texto de
nuestra pelcula. Luego mediante ActionScript hemos creado otro objeto estadisticas_txt
del tipo campo de texto, que ser el que mostrar el texto.
Ahora slo har falta remitirse a la propiedad text del texto que hemos creado para darle
un valor, y como hemos visto antes.

Las propiedades de formato de texto que hemos utilizado son las ms comunes, si
necesitas un listado completo de ellas puedes visitar nuestra seccin avanzada. tema
avanzado

Antes de realizar los ejercicios finales, te recomendamos seguir el ejercicio paso a paso
Crear una clase en ActionScript.

3.1. Movimiento de objetos mediante ActionScript

Para poder mover objetos con ActionScript debemos conocer el sistema de
coordenadas utilizado por Flash.
La esquina superior izquierda es la posicin x=0, y=0. (ver la imagen)
Para

mover

un

objeto

debemos

modificar

su

posicin

definida

por

las

propiedades objeto.x y objeto.y

Por ejemplo, si hacemos objeto.x += 10 estamos desplazando el objeto 10 pxeles
hacia la derecha.
Vamos a ver cmo mover un objeto a partir de este ejemplo de una bola botando.
El algoritmo es muy sencillo, se trata de ir modificando la posicin de la bola desde
una posicin inicial para que vaya bajando hasta que llegue al suelo, en ese
momento invertimos el movimiento para que suba y calculamos hasta el tope que tiene
que subir. As sucesivamente hasta que deje de botar.
Para que la bola baje debemos sumar una cantidad a la coordenada y, y para que suba
debemos restarle una cantidad. Si queremos que la bola se vaya desplazando hacia la
derecha debemos sumar una cantidad a la coordenada x.

Cuando la bola baja, segn el esquema de la imagen, pasa de la posicin (x 1, y1) a la

posicin (x2, y2), para ello se incrementa la x con el valor incre_x (que estara
representado por la lnea azul) y se incrementa la y con el valor incre_y (que estara
representado por la lnea roja).
Cuando la bola sube, la nica diferencia es que la coordenada y va disminuyendo en
lugar de aumentando, segn el esquema de la derecha, al subir se pasa de la posicin
(x'1, y'1) a la posicin (x'2, y'2), para ello se incrementa la x con el valor incre_x (que estara
representado por la lnea azul) y se decrementa la y con el valor incre_y (que estara
representado por la lnea roja)

Vamos a ver lo ms importante del cdigo ActionScript que tenemos un poco ms

abajo.
Hemos creado una bola azul y la hemos convertido en un movieclip, la instancia se
llama bola_mc.
Inicialmente la bola est en la posicin (bola_mc.x= 0,bola_mc.y= 0)
Mediante la variable baja, sabremos si la bola est bajando o subiendo. Cuando la
coordenada y llega al suelo, la bola pasar a subir, cuando la coordenada y llegue al tope
la bola comenzar a bajar.
En cada bote la bola ir perdiendo fuerza y el bote ser ms bajo, la
variable elasticidad determinar esta prdida de potencia.
Cada vez que la bola llega al tope calculamos el nuevo tope, para ello calculamos la
distancia de la bola al suelo, la dividimos por la elasticidad y esa cantidad se la sumamos
al tope.

En el esquema, la lnea naranja representa esa cantidad que le sumamos al tope

1 para pasar al tope 2.

Ya tenemos nuestro cdigo casi preparado, ahora slo falta hacer que el proceso se
repita un nmero determinado de veces. Esta pelcula Flash slo tiene un fotograma.
Cmo hacemos esto? Lo primero que se nos ocurre es incluir una instruccin while ...
o una instruccin for ... , si lo hacemos veremos que no funcionar porque la repeticin
es tan rpida que no da tiempo a ver nada.
La solucin est en introducir una instruccin que haga que el proceso se repita cada 35
milisegundos. Esto lo vamos a ver en el punto siguiente.
Hemos colocado un botn en la pelcula de forma que cada vez que se pulsa, se detiene
la ejecucin (si todava no haba acabado) y se lanza una nueva ejecucin.
Cuando el tope llega al suelo se detiene la ejecucin.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

32
33
34
35
btn_reproducir.addEventListener(MouseEvent.MOUSE_UP,playescena)
function playescena (event:MouseEvent):void {
var baja:Boolean = true; //Si la bola sube o baja
var incre_x:Number = 3.5; //Incremento vertical
var incre_y:Number = 8; //Incremento horizontal
var suelo:Number = 280; //Distancia a la que est el suelo
var tope:Number = 0; //Altura mxima del bote
var elasticidad:Number = 3; //Corrector del tope
bola_mc.y = 0; //Comienza en la esquina superior izquierda
bola_mc.x = 0;
tope += (suelo - bola_mc.y) / elasticidad; //calculamos el tope
var repeticion:Number;
clearInterval(repeticion);
repeticion = setInterval(botar, 35);//Repetimos botar cada 35 ms
function botar() {
if (baja) { // Si la bola baja...
bola_mc.y += incre_y;//Aumentamos Y
bola_mc.x += incre_x;
if (bola_mc.y>=suelo) {
baja = false; //Si ha llegado al suelo hacemos que suba
}
} else { // Si la bola sube...
bola_mc.y -= incre_y;//Disminuimos Y
bola_mc.x += incre_x;
if (bola_mc.y<=tope) { //Cuando alcance el tope
baja = true; //La hacemos bajar...
if (tope>=suelo) { //Cuando el tope est ms bajo que el suelo
incre_y = 0; //Ya no rebota ms
clearInterval(repeticion);//Fin de la repeticin
} //Al llegar abajo, calculamos el nuevo tope
tope += (suelo - bola_mc.y) / elasticidad;
}
}
}
}
En este sencillo ejemplo la trayectoria de la bola es rectilnea, para que fuese un
movimiento ms real debera seguir una trayectoria curva. Dibujar curvas es un poco
ms complicado que dibujar rectas. Flash nos ofrece una opcin ms sencilla para hacer
que un objeto siga una trayectoria curva: las guas de movimiento que veremos en este
mismo tema aplicadas al bote de una pelota.
Y si queremos que quede perfecto, en vez de utilizar una velocidad constante, esta
debera de depender de la altura, para que fuese decelerando al subir y acelerando al
bajar.

 Si deseas probar suerte con las curvas y ActionScript realiza el ejercicio paso a paso
Movimiento en espiral para empezar a familiarizarte con ellas.

23.2. Funcin setInterval y el evento ENTER_FRAME

La funcin setInterval se utiliza cuando queremos que se repita la ejecucin de un
cdigo ActionScript cada cierto nmero de milisegundos, y el evento ENTER_FRAME
("enterFrame") se utiliza cuando queremos ejecutar un cdigo ActionScript en funcin
de la velocidad de la pelcula Flash.
Estas funciones se pueden utilizar para controlar el tiempo cuando utilizamos
ActionScript y no nos interesa utilizar los fotogramas como forma de control del
tiempo.
Por ejemplo, podemos generar un objeto y hacer que se mueva 5 pixels cada 30 ms.
variando estos parmetros conseguiremos que el objeto se mueva ms o menos rpido.
bola naranja setInterval
El formato de esta funcin es el siguiente:
?
1
var retardo:Number = setInterval(queFuncion:Function, intervalo:Number,
[param1:Object, param2, ..., paramN]);
Donde,
queFuncion es la funcin que se va a repetir.
intervalo es el nmero de milisegundos que van a transcurrir entre cada llamada a la
funcin.
[param1:Object, param2, ..., paramN] es la lista opcional de parmetros que se pasan a
la funcin indicada en queFuncion.
retardo es una variable que identifica el intervalo y que nos permite emplear
clearInterval() para detener la ejecucin.
Por ejemplo, el cdigo siguiente escribe 10 veces el mensaje "contador" i, cada 2000
milisegundos (2 sg.).
?
1
2
3
4
5
6
7
8
var i:Number = 1;
var repeticion:Number = setInterval(contar, 2000);
function contar() {

trace("contador: "+ i++);

if (i>10) {
clearInterval(repeticion);//Fin de la repeticin
}
}
La funcin clearInterval sirve para detener la ejecucin de la funcin llamada desde
setInterval. Por lo tanto, conviene utilizar clearInterval siempre que usemos setInterval,
para evitar que la ejecucin contine indefinidamente.
En el ejemplo del punto anterior hemos definido la funcin setInterval para que la
funcin botar se ejecute cada 35 milisegundos.
bola naranjaENTER_FRAME ("enterFrame")
El controlador de eventos ENTER_FRAME, permite invocar a una funcin de forma
repetida tantas veces como fotogramas por segundo tenga definida la pelcula.
Este comportamiento ya lo hemos utilizado varias veces.
Por ejemplo, en el movieClip bola_mc:
?
1
2
3
4
5
var i:Number =0;
bola_mc.addEventListener(Event.ENTER_FRAME, miFuncion)
function miFuncion(event):void{
trace("ejecutando: "+ ++i);
}
Si la velocidad de la pelcula es de 12 fps, este cdigo escribira en la salida 12 lneas
por segundo, de esta forma:
ejecutando:1
ejecutando:2
ejecutando:3
...
bola naranja Aunque con este ejemplo no lo parezca, (slo pretende explicar la funcin)
estos dos tipos de funciones que se ejecutan repetitivamente pueden ser muy tiles en
determinadas ocasiones. A lo largo del cursos ya hemos visto algunos ejemplos de su
utilidad, a continuacin veremos otro ejemplo que puede sernos til.
Imagina que quieres que tu pelcula se detenga durante 2 segundos y luego contine.
Esta es una forma de hacerlo utilizando la funcin setInterval.

Colocaramos este cdigo en el frame que deseemos, llamamos a setInterval con 1 s

(1000 ms) y cuando se hayan cumplido dos llamadas detenemos setInterval y
continuamos con el siguiente frame de la pelcula.
?
1
2
3
4
5
6
7
8
9
10
11
var tope:Number = 1;
var repeticion:Number = setInterval(parar, 1000);
function parar() {
tope++;
if (tope > 2) {
clearInterval(repeticion);
nextFrame();
play();
}
}
stop();
23.3. Movimiento de objetos mediante gua
En esta unidad ya hemos visto como hacer botar una bola mediante ActionScript, ahora
vamos a recordar una tcnica que ya vimos en la unidad 12, animacin mediante trazado
o gua de movimiento.
En este caso, se trata de imitar el bote de una pelota, por lo tanto, dibujamos una curva
que imite dicho bote.
De esta forma conseguiremos una animacin que resulta ms natural que el bote con
trayectoria recta que vimos en el punto anterior.

Gua Bola
En las imgenes podrs ver qu proceso hemos seguido para dibujar el movimiento.
La gua la hemos dibujando sucesivas curvas de modo que la pelota invite el
movimiento que queremos crear.
Para darle mayor realismo hemos insertado fotogramas claves en puntos crticos para
achatar la pelota y dotarla de elasticidad.

guia bola
Ahora podrs combinar muchas de las tcnicas que hemos aprendido para generar algo
as:
(Haz clic en la pelcula y luego usa las teclas de movimiento a derecha e izquierda)

Hemos visto dos tcnicas diferentes para animar un objeto en Flash, mediante
ActionScript y mediante gua de movimiento.
Segn cada caso concreto resultar ms adecuado elegir una u otra tcnica. En general,
resulta ms fcil y rpido utilizar guas de movimiento que ActionScript, sobre todo si el
movimiento que tiene que seguir el objeto es sinuoso y difcil de definir en trminos de
una ecuacin matemtica.
Hay casos en los que ser ms adecuado utilizar ActionScript y otros casos en los que
slo ser posible crear el movimiento mediante ActionScript, por ejemplo, si queremos
que un objeto se mueva de forma aleatoria por un escenario.

23.4. Animaciones de rostros

Una de las bases para hacer animaciones de personajes es la animacin de rostros, en
esta pequea introduccin aprenderemos cmo hacer que un rostro pase de la risa al
enfado.
Todos sabemos que un rostro sonriente tiene las cejas, los ojos y la boca en distinta
posicin que un rostro enfadado. Vamos a ver cmo con unas sencillas transformaciones
de forma y de color obtenemos un buen resultado.
Lo primero que hay que tener en cuenta es dibujar los elementos que tienen que
moverse en una capa propia, as crearemos una capa para la boca, cejas, etc.
Dibujamos la boca con herramienta Lnea, en el fotograma 1, y creamos un frame
clave en el fotograma 17. Para convertir la lnea recta en una curva, volvemos al

fotograma 1 y activamos la herramienta Seleccin y nos aseguramos de

que la lnea de la boca no est seleccionada. Ahora acercamos el cursor a la lnea y
cuando aparezca una pequea lnea curva debajo del cursor hacemos clic y arrastramos
hacia abajo, as tendremos una boca sonriente. Vamos al fotograma 17 y hacemos lo
mismo pero arrastrando hacia arriba para conseguir una boca enfadada. Esto lo
tendremos que hacer con todos los elementos que queramos ver cambiar.
Es importante que arrastres desde el centro de la lnea y en direccin perpendicular
para que quede una curva simtrica. En el caso de las cejas, nos interesa que la curva no
sea simtrica y deberemos arrastrar desde un lateral de la lnea en lugar de desde el
centro.

23.5. Animaciones geomtricas en 3D

Vamos a ver como crear una animacin de una caja girando en tres dimensiones.
Para abordar una animacin de este tipo, evidentemente, debemos conocer como
dibujar objetos en tres dimensiones. Hay varios tipos de perspectiva que se pueden
utilizar: a) perspectiva caballera b)perspectiva isonomtrica y c) perspectiva cnica.

Estudiar perspectiva no es el objeto de este curso por lo tanto no vamos a ser muy
estrictos al hacer los dibujos y, como consecuencia de ello, el resultado final tampoco va a
ser una animacin perfectamente realista, pero lo que tratamos de explicar es nicamente
el proceso de animacin.
Se trata de hacer girar una caja desde una posicin inicial hasta una posicin fila. Para
hacer la animacin debemos dibujar la caja en varias posiciones intermedias. A
continuacin crearemos animaciones de forma para cada una de las caras visibles de la
caja.

Hay que tener en cuenta que inicialmente la cara de la derecha no es visible, pero se ira
haciendo visible segn avance el giro.

Luego deberemos introducir interpolaciones entre las diferentes posiciones para

terminar con un resultado parecido a este:

23.6. Cinemtica inversa

El mtodo de animacin cinemtica inversa nos permite mover objetos de forma ms

natural, a la vez que sencilla. La idea es unir los elementos con "huesos", de manera que
estos queden unidos formando articulaciones. Pensemos en un brazo creado con tres
huesos unidos por la mueca y codo. Al mover la mano, el antebrazo la seguira
doblndose por la mueca y por el codo.
Para crear los huesos, encontramos la herramienta Hueso

Podemos hacerlo de dos formas: creando un esqueleto dentro de una forma, o uniendo
smbolos con huesos.
Crear un esqueleto en una forma:
Partimos de una forma, como pueden ser elipses, rectngulos, trazos del pincel, etc.
Cualquier cosa que no se haya convertido en un smbolo. Con la herramienta Hueso,
vamos haciendo clic y arrastrando, dibujando los huesos. Debemos de comenzar por el
hueso raz, y seguir por los que cuelgan de este. Por ejemplo, para dibujar un brazo,
haramos clic sobre el hombro y arrastraramos hasta el codo. Volveramos a hacer clic
sobre el el codo y arrastraramos hasta la mueca.
En la siguiente imagen, partimos de un dibujo muy simple hecho con el Pincel, y le
hemos creado un esqueleto.

Podemos crear tantos huesos como queramos dentro de la forma. Si ahora intentas
arrastrar un brazo, vers que el resto del cuerpo le sigue. El inconveniente de la forma es
que puede deformarse y no podremos controlarlo.

Crear un esqueleto con smbolos:

Otra forma de trabajar es utilizando smbolos. Debemos de tener en cuenta que un
smbolo slo puede tener un hueso. Por tanto, necesitamos una instancia de smbolo
para cada seccin entre articulaciones.
Antes de comenzar a crear el esqueleto, colocamos todos los smbolos en el escenario,
colocados de la forma deseada. Despus, partiendo de la raz del esqueleto, del punto de
que saldrn todos los huesos, vamos enlazando los distintos smbolos, del comienzo del
primero al comienzo del siguiente.

Podemos mover los smbolos independientemente del esqueleto, si mantenemos

pulsada la tecla Alt. Si hemos colocado mal un hueso, podemos seleccionarlo haciendo
clic sobre l con la herramienta de seleccin, y eliminarlo con la tecla Supr.
Crear la animacin
Tanto si hemos utilizado formas, como si hemos trabajado con smbolos, veremos que
se ha creado una nueva capa, llamada Esqueleto donde se han movido todos los
elementos.
Creamos un nuevo fotograma en esa capa para tener una zona sobre la que trabajar.
No es necesario que sea un fotograma clave, aunque es una buena idea si queremos que
el ltimo movimiento coincida con el del primer fotograma. Veremos que los fotogramas
con movimiento aparecen de color verde oscuro:

Mover ahora nuestro esqueleto es tan sencillo como hacer clic en un fotograma, y
arrastrar los distintos elementos. No necesitamos crear fotogramas clave. Aunque s
veremos que aparece un punto negro en los fotogramas en los que hemos movido el
esqueleto. Lo que hemos creado ah es una Pose.
Al mover un hueso, el hueso del que cuelga le seguir. Si queremos mover nicamente
un hueso por la articulacin que lo une con el hueso del que cuelga, debemos hacerlo con
la tecla Shift (Maysculas) pulsada.
Seguimos creando poses. Si queremos duplicar una pose, podemos hacer clic derecho
sobre ella en la lnea de tiempo, copiarla, y pegarla en el fotograma que queramos.

De esta forma, vamos creando todas las poses necesarias hasta que consigamos el
efecto deseado.

Y reproducimos nuestra animacin:

Los huesos nos permiten dar an ms realismo. Podemos seleccionar un hueso, y
acceder a sus propiedades en el panel Propiedades.

Desde las propiedades podremos recorrer los huesos. Por defecto, los huesos tienen
activada la Union: Rotacin, que permiten que roten. PodemosRestringir el ngulo de
rotacin, por ejemplo para hacer que una rodilla slo se pueda mover hacia atrs, hasta
chocar con el muslo, y no hacia delante, con los valores Min y Max.

Por defecto, los huesos tienen un tamao fijo e invariable, pero podemos hacer que
esto cambie con los valores de Traslacin.

Y como siempre, lo que est disponible en las propiedades es acceseible a travs de

ActionScript, por lo que incluso podramos crear un script que moviese nuestro esqueleto.

Aunque la cinemtica inversa es una tcnica que con un poco de prctica resulta
sencilla, existen otras formas de crear movimientos complejos, como puedes ver en este
avanzado

23.7. Rotoscopia
La rotoscopia es una tcnica que utiliza un movimiento real como patrn para
calcar las imgenes de la animacin. Hace aos que se utiliza esta tcnica, por
ejemplo, en las pelculas de dibujos animados para conseguir movimientos realistas al
caminar.
Hay varios mtodos para ejecutar esta tcnica, nosotros vamos a hablar del mas
sencillo para utilizar en Flash. Un mtodo ms complejo sera colocar puntos blancos o
luces en diferentes partes del cuerpo de una persona vestida de negro y realizar una
pelcula sobre un fondo negro para luego generar el movimiento a partir de los puntos
captados.
Con una cmara de vdeo podemos grabar el efecto que queremos reproducir, por
ejemplo, una persona caminando,
Luego importaremos el vdeo al formato de Flash, pero esta vez lo haremos de forma
diferente a la que aprendimos en el tema Vdeos.
Del mismo modo deberemos hacer clic en Archivo Importar Importar vdeo y
seguir los pasos que aprendimos entonces, recuerda que los videos que importes deben
estar en formato FLV, si no fuera as puedes cambiarlos a este formato con la
herramienta Adobe Media Encoder que incluye Flash, slo que en la pantalla de
seleccin de mtodo de importacin deberemos seleccionar Incorporar vdeo FLV en
SWF y reproducir en la lnea de tiempo.

Esto har que el vdeo se exporte de forma que lo podremos visualizar fotograma a
fotograma. Sigue el resto de opciones hasta el final y el vdeo se colocar en la lnea de
tiempo.

Luego crearemos una nueva capa por encima y crearemos tantos fotogramas
claves como fotogramas de pelcula queramos copiar. El resto es sencillo, coge
un pincel y a calcar. Cuanta ms precisin consigas, ms impresionantes sern los
resultados.

Este proceso es muy laborioso, pero crea animaciones espectaculares.

Practica un poco y vers como no es nada complicado, te requerir bastante paciencia,

pero la pelcula final te valdr la pena.
El audio se insertara junto al vdeo, cuando elimines el vdeo este se eliminara tambin.

23.8. API de dibujo. Creando dibujos con ActionScript

En este apartado aprenderemos a manejar el API de dibujo de Flash.
Su uso es muy claro y sencillo, bastar con que comprendas unas cuantas
instrucciones.
Antes de empezar a dibujar debers tener un clip donde hacerlo, para ello nos
crearemos un clip vaco:
?

var miClip:MovieClip = new MovieClip;

Una vez creado el clip podemos pasar a dibujar sobre l.
Hacerlo es muy fcil, slo debers inicializar el proceso de dibujo escribiendo:

miClip.graphics.beginFill(color, alfa);
Donde color indicar el color de relleno que se le aplicar al dibujo. Deber estar en
hexadecimal, por ejemplo: 0x000000.
El parmetro alfa indicar la transparencia del relleno.

Luego nos valdremos de un par de funciones:

miClip.graphics.moveTo(x, y);

Esto hace que el punto de dibujo se coloque en las coordenadas especificadas.

Podemos empezar a pintar a partir de la coordenada (100, 100), por ejemplo.
Luego nos quedar solamente dibujar lneas en el espacio que contendrn el relleno de
nuestro dibujo. Utiliza la instruccin graphics.lineTo():
?

miClip.graphics.lineTo(x, y);

Esto har que el punto de dibujo se desplace hasta la posicin (x, y), desde donde se
crear el siguiente trazo de dibujo.
?

1
2
3
4
5
6
7
8

miClip.graphics.beginFill(0xFF0000);
miClip.graphics.moveTo(10, 10);
miClip.graphics.lineTo(10, 100);
miClip.graphics.lineTo(100, 100);
miClip.graphics.lineTo(100, 10);
miClip.graphics.lineTo(10, 10);
miClip.graphics.endFill();

Terminamos la instruccin con graphics.endFill().

Podemos establecer el tipo de lnea que rodear al dibujo escribiendo lo siguiente:
?

1
2

miClip.graphics.lineStyle(thickness:Number, color:uint = 0, alpha:Number = 1.0, pix

scaleMode:String = "normal", caps:String = null, joints:String = n
Nota: Esta instruccin deber estar colocada antes de utilizar la funcin beginFill(),
quedara de esta forma:

1
2
3
4
5
6
7
8
9

miClip.graphics.lineStyle(10, 0xFF0000, 1, false, LineScaleMode.VERTICAL,

CapsStyle.SQUARE, JointStyle.BEVEL, 10);
miClip.graphics.beginFill(0xFF0000);
miClip.graphics.moveTo(10, 10);
miClip.graphics.lineTo(10, 100);
miClip.graphics.lineTo(100, 100);
miClip.graphics.lineTo(100, 10);
miClip.graphics.lineTo(10, 10);
miClip.graphics.endFill();

Ahora explicaremos en detalle los parmetros de esta instruccin:

thickness (grosor): un nmero de 0 a 255 que indicar el grosor del borde, en

puntos.

color: en hexadecimal, el color del borde.

alpha (alfa): nivel de transparencia del borde, de 0 a 100.
pixelHinting (trazos): valor booleano, har que los anclajes de las lneas y curvas
se realicen de forma exacta. De este modo los trazos se dibujarn a pxeles exactos
en cualquier grosor (as no se vern lneas imprecisas).
scaleMode (escala): especifica cmo se tendr que efectuar la escala del borde.
Sus valores pueden ser "normal", que toma el modelo predeterminado; "none", que
obliga a no cambiar nunca la escala del borde; "vertical", que no cambiar la escala
si el objeto slo cambia su escala vertical; y "horizontal", que no cambiar la escala
si el objeto slo cambia su escala horizontal.
caps (extremos): define cmo se dibujarn los extremos de los bordes,

joints (uniones): establece el tipo de uniones que se establecern en el borde,

miterLimit (limiteEsquinas): un nmero entre 1 y 255, indica la distancia de la

esquina al trazo real,