Unidad 1.

Introduccin a Flash Professional CS5 (I)

1.1. Qu es Flash?

Flash Professional CS5 es una potente herramienta desarrollada por Adobe que ha
superado las mejores expectativas de sus creadores.
Flash fue creado con el objeto de realizar animaciones y diseos vistosos para la web, y
grficos interactivos.
Los motivos que han convertido a Flash en el programa elegido por la mayora de los
diseadores web profesionales y aficionados son varios. Veamos pues, porque es interesante
Flash Pro CS5.
Desde la web de Adobe te puedes descargar una versin de evaluacin de Flash
Professional CS5 vlida para 30 das. Esta versin estar disponible hasta que salga la
siguiente.
Los logotipos de Flash son propiedad de Adobe, as como las marcas registradas Flash y
Adobe. aulaClic no tiene ninguna relacin con Adobe.

1.2. Por qu usar Flash CS5?

Las posibilidades de Flash son extraordinarias, con cada nueva versin se han mejorado y
simplificado las herramientas, y cada vez es posible lograr mejores efectos con menos
trabajo.
Aunque su uso ms frecuente es el de crear animaciones (a lo largo de este curso veremos
lo sencillo que puede resultar) sus usos son muchos ms. Son tantos, que todos los
diseadores web deberan saber utilizar Flash.

Durante mucho tiempo, Flash consigui hacer posible lo que ms se echa en falta en
Internet: Dinamismo, y con dinamismo no slo nos referimos a las animaciones, sino que
Flash permite crear aplicaciones interactivas que permiten al usuario ver la web como algo
atractivo, no esttico. Con Flash podremos crear de modo fcil y rpido desde animaciones
simples para lograr algunos efectos visuales, hasta eplicaciones complejas, como juegos .
Adems sus desarrolladores estn apostando muy fuerte por ActionScript, el lenguaje de
programacin Flash. A cada versin se mejora y ofrece un abanico de posibilidades cada vez
mayor, por lo que adems de dinamismo, Flash nos ofrece la posibilidad de ser la plataforma
para aplicaciones web de un modo real.
Flash es fcil de aprender, tiene un entorno amigable que nos invita a sentarnos y pasar
horas y horas creando lo que nos dicte nuestra imaginacin, pero esto no es suficiente para
ser el preferido por los diseadores profesionales... Entonces qu es?

1.3. Novedades de Flash CS5

Adobe suele integrar todos sus productos en una suite nica en la que prima, sobre todo, la
compatibilidad entre ellos. As la compaa se desmarca del resto ofreciendo un paquete de
aplicaciones muy completas como hemos ido viendo ao tras ao, que son capaces de
interactuar entre ellas y nos ofrecen la posibilidad de reutilizar proyectos creados con un
programa en otro. De hecho, podemos usar herramientas ms potentes de dibujo, como
Illustrator, para crear nuestros grficos, y despus animarlos con Flash.
Vamos a ver las opciones ms destacadas que encontramos en esta ltima versin:
Motor de texto Text Layout Framework.
Flash CS5 ha cambiado profundamente el motor de texto que emplea. En nuevo motor TLF,
incluye bastantes mejoras, entre las que podemos destacar las siguientes:
Nuevos estilos de carcter y prrafo.
Se pueden aplicar efectos y atributos sobre el texto sin convertirlo a un clip de pelcula.
El texto pude fluir entre varios contenedores asociados.

El panel Fragmentos de cdigo.

Este panel nos permite insertar rpidamente el cdigo ActionScript 3 de las acciones ms
comunes.

Adems, podemos emplearlo para almacenar nuestro propio cdigo, y as poder reutilizarlo
cmodamente.

Empaquetado de aplicaciones para iPhone.

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

Mejoras del vdeo.

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

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

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

Mejora de la herramienta huesos.

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

Unidad 1. Introduccin a Flash Professional CS5 (II)

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.

Unidad 1. Introduccin a Flash Professional CS5 (III)

1.5. Mi primera animacin Flash
Una de las caractersticas principales de Flash es su sencillez, esta sencillez en su
utilizacin permite crear animaciones de un modo efectivo y rpido.
Pongmonos en situacin, supongamos que queremos crear una animacin en la que una
pelota realice un movimiento de "bote", es decir, que baje y suba. Puede parecer un trabajo de
horas,

pero

nada

ms

lejos

de

la

realidad.

Veamos cmo Flash nos lo pone fcil.

En este apartado no pretendemos ensear cmo crear una animacin Flash (pues eso se
ver ms adelante), el objetivo es que entendamos cmo crea Flash las animaciones y de que
modo nos facilita el trabajo.
A primera vista, lo lgico parece ser dibujar la pelota en cada instante del movimiento, de
modo que cuantos ms instantes dibujemos, ms real parecer el movimiento. Pues bien, con
Flash bastar con crear 3 fotogramas: en el primero dibujaremos la pelota en el instante inicial
(arriba del todo), en el segundo se dibujar la pelota en el momento de tocar el suelo y en el
tercero la pelota volver a estar arriba (en realidad este tercer fotograma no har falta crearlo,
pues bastar con copiar el primero). Por tanto, vemos que el trabajo ms largo (dibujar los
objetos) ya est hecho.

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

Observa cmo ha quedado:

Podis poner a prueba vuestros conocimientos realizando la: Prueba de la Unidad I
1. Flash CS5 es desarrollado por Adobe, de ah su perfecta integracin con Photoshop.
a) Verdadero.
b) Falso.

2. Flash comenz siendo un programa para crear animaciones web sencillas, gifs
animados ... y con el paso de los aos se ha convertido en el software referente de creacin
de aplicaciones web interactivas.
a) Verdadero.
b) Falso.

3. Con cada versin, Flash incorpora ms funciones, lo que lo torna un programa cada vez
ms complicado y costoso de aprender.
a) Verdadero
b) Falso.

4. Flash CS5 dispone de un corrector sintctico-semntico que facilita el trabajo con textos.
a) Verdadero.
b) Falso.

5. Flash soporta trabajar con numerosos formatos de ficheros, como ficheros EPS y PDF.

a) Verdadero.
b) Falso.

6. Flash incluye un buscador web, que nos permite localizar objetos, textos, animaciones
etc en Flash por toda la web.
a) Verdadero.
b) Falso.

7. Las animaciones o pelculas generadas por Flash CS5 tendrn un rendimiento

generalmente mayor que las creadas con versiones anteriores.
a) Verdadero.
b) Falso.

8. El lenguaje de programacin de Flash, es ampleado y mejorado con el programa. La

versin actual es ActionScript 3.
a) Verdadero.
b) Falso.

9. Las Hojas de Estilo en Cascada (CSS) no son compatibles con Flash CS5, lo que dificulta
la integracin con el diseo de nuestra pgina.
a) Verdadero.
b) Falso.

10. El anterior ActionScript 2 no es capaz de trabajar con Javascript, pues se ha quedado

desfasado.
a) Verdadero.
b) Falso.

11. Realizar una animacin en Flash es un proceso largo pero mecanizable.

a) Verdadero.
b) Falso.

12. Una animacin en Flash exige al autor representar todos los estados de la misma, si la
animacin consiste en botar una pelota hasta una altura de 20 cm., el autor deber
representar dicha pelota en todas sus posiciones posibles (unas 200 aproximadamente).
a) Verdadero.
b) Falso.

13. Realizar una animacin con Flash slo exige indicar a Flash los estados lmite de la
misma, entendiendo por estado lmite aquel que marca un cambio en la animacin (en
nuestro ejemplo seran los instantes en los que la pelota deja de subir y comienza a bajar o
viceversa).
a) Verdadero.
b) Falso.

14. Una vez tenemos dibujados los fotogramas que queremos que formen parte de la
animacin, nos falta indicar explcitamente a Flash que dichos fotogramas formarn una
animacin, pues Flash no es capaz de saber esto a priori.
a) Verdadero.
b) Falso.

Unidad 2. El entorno de Flash CS5 (I)

2.1. La interfaz de Flash Pro CS5
Flash CS5 cuenta con un entorno o interfaz de trabajo de lo ms manejable e intuitiva.
Adems, tiene la ventaja de que es casi idntica a la de otros programas de Adobe
(Photoshop, Dreamweaver, Illustrator...), todo esto hace ms fcil aprender Flash y ms
rpido su manejo y dominio. Esto es lo que nos encontraremos al abrir Flash CS5 por primera
vez:

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

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

Unidad 2. El entorno de Flash CS5 (II)

2.2. La barra de Mens

La Barra de Mens tiene como propsito facilitar el acceso a las distintas utilidades del
programa. Es similar a la de cualquier otro programa de diseo web o grfico, aunque tiene
algunas particularidades. Veamos los principales Submens a los que se puede acceder:
Archivo: Permite crear nuevos archivos, abrirlos, guardarlos... Destaca la potencia de la
utilidad Importar que inserta en la pelcula actual casi todo tipo de archivos (sonidos, vdeo,
imgenes e incluso otras pelculas Flash), o la de Configuracin de Publicacin desde
donde se pueden modificar las caractersticas de la publicacin. Tambin permite configurar la
impresin de las pginas, imprimirlas...
Edicin: Es el clsico men que te permite Cortar, Copiar, Pegar... tanto objetos o dibujos
como fotogramas; tambin permite personalizar algunas de las opciones ms comunes del
programa.
Ver: Adems de los tpicos Zooms, te permite moverte por los fotogramas y por las
escenas. Tambin incluye la posibilidad de crear una cuadrcula y unas guas. Esto se puede
seleccionar desde los submens Cuadrcula y Guas desde donde tambin se pueden
configurar sus opciones.
Insertar: Permite insertar objetos en la pelcula, as como nuevos fotogramas, capas,
acciones, escenas...
Modificar: La opcin Transformar permite modificar los grficos existentes en la pelcula, y
la opcin Trazar Mapa de Bits convierte los grficos en mapas vectoriales (este tema se
tratar ms adelante). El resto de opciones permite modificar caractersticas de los elementos
de la animacin Suavizar, Optimizar o de la propia pelcula (Capa, Escena ...).
Texto: Sus contenidos afectan a la edicin de texto. Ms adelante se tratar en
profundidad.

Comandos: Permite administrar los Comandos (conjunto de sentencias almacenadas que

permiten emular lo que un usuario pueda introducir en el entorno de edicin) que hayamos
almacenado en nuestra animacin, obtener otros nuevos de la pgina de Macromedia o
ejecutar los que ya tengamos.
Control: Desde aqu se modifican las propiedades de reproduccin de la pelcula.
Reproducir, Rebobinar, Probar Pelcula....
Depurar: Aqu encontraremos las opciones de depuracin de la pelcula que te ayudaran
a encontrar errores de progrmacin en ActionScrit, entre ellos se encuentran Entrar, Pasar,
Salir, Continuar...
Ventana: Este men, adems de las opciones clsicas acerca de cmo distribuir las
ventanas, incluye accesos directos a todos los paneles y tambin la posibilidad de crear tus
propios Espacios de Trabajo, guardarlos, cargarlos, etc.
Ayuda: Desde aqu podemos acceder a toda la ayuda que nos ofrece Adobe, desde el
manual existente, hasta el diccionario de Action Script, pasando por tutoriales, lecciones
guiadas etc...
Veamos un ejemplo prctico del uso de mens, realiza el Ejercicio utilizar la cuadrcula

Unidad 2. Ejercicio: Utilizar la cuadrcula

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

Ejercicio paso a paso.

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

la

opcin

Mostrar

Cuadrcula

para

hacerlo

visible.

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

gusto (tamao, color de fondo...)

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

Unidad 2. El entorno de Flash CS5 (III)

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

1) Los Fotogramas (frames) que vienen delimitados por lneas verticales (formando
rectngulos)
2) Los Nmeros de Fotograma que permiten saber qu nmero tiene asignado cada
fotograma, cunto dura o cundo aparecer en la pelcula.
Adems, en la parte inferior hay herramientas para trabajar con Papel cebolla e
informacin sobre el Nmero de Fotograma actual (1 en la imagen), la Velocidad de los
Fotogramas (24.0 en la imagen) y el Tiempo de pelcula transcurrido (0.0s en la imagen).
A nivel conceptual, la Lnea de Tiempo representa la sucesin de Fotogramas en el
tiempo. Es decir, la pelcula Flash no ser nada ms que los fotogramas que aparecen en la
Lnea de tiempo uno detrs de otro, en el orden que establece la misma Lnea de tiempo.
Para saber ms acerca de la Lnea de Tiempo y de los distintos tipos de fotogramas que
existen visita nuestra Pgina Avanzada

2.4. Las capas

El concepto de Capa es fundamental para manejar Flash de forma eficiente. Dada la
importancia de estas, se le dedicar un tema completo. An as, veamos a grandes rasgos
qu son las capas.
Una Capa se puede definir como una pelcula independiente de un nico nivel. Es decir,
una capa contiene su propia Lnea de Tiempo (con infinitos fotogramas).
Los objetos que estn en una determinada capa comparten fotograma y por tanto, pueden
"mezclarse" entre s. Esto es interesante a menudo, pero otras veces es conveniente separar
los objetos de modo que no interfieran entre s. Para ello, crearemos tantas capas como sea
necesario. El uso de mltiples capas adems, da lugar a pelculas bien ordenadas y de fcil
manejo (es conveniente colocar los el cdigo ActionScript en una capa independiente llamada
"acciones", por ejemplo). Las ventajas y desventajas de usar capas se ver en la unidad
referente a Capas.

2.5. El Escenario
A continuacin veremos las diferentes partes que conforman el rea de trabajo
empezaremos con la ms importante: el Escenario.
Sobre el escenario dibujaremos y colocaremos los diferentes elementos de la pelcula que
estemos realizando. El escenario tiene unas propiedades muy importantes, ya que coinciden
con las Propiedades del documento. Para acceder a ellas, hagamos clic con el botn
derecho sobre cualquier parte del escenario en la que no haya ningn objeto y despus sobre
Propiedades del documento:
Aade metadatos a tus archivos para una mejor inclusin de estos en los motores de
busqueda rellenando los campos de Ttulo y Descripcin.
Dimensiones: Determinan el tamao de la pelcula. El tamao mnimo es de 1 x 1 px
(pxeles) y el mximo de 2880 x 2880 px.
Unidades de Regla: Unidad que se emplear para medir las cantidades.
Coincidir: Provocan que el tamao de la pelcula coincida con el botn seleccionado
(tamao por defecto de la Impresora, Contenidos existentes o los elegidos como
Predeterminados)

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

instante en adelante. Estas propiedades por supuesto podrn ser alteradas desde este panel
cuando se desee.
Para practicar estas operaciones te aconsejamos realizar el ejercicio paso a paso
Cambiar las dimensiones de la pelcula

Unidad 2. Ejercicio: Cambiar las dimensiones de la pelcula

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

Ejercicio paso a paso.

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

Unidad 2. El entorno de Flash CS5 (IV)

2.6. Las Vistas o Zooms

La Herramienta Zoom

se emplea para acercar o alejar la vista de un objeto,

permitiendo abarcar ms o menos zona del Entorno de Trabajo. Cada vez que hagamos clic
en con el Zoom duplicaremos el porcentaje indicado en el desplegable Zooms.

Panel Zooms: Son un conjunto de accesos directos a Submens existentes en el Men

Ver. Son muy tiles y ayudan a acelerar el trabajo cuando se emplean correctamente.
Para saber ms acerca de los Zooms pgina Bsica

2.7. Los Paneles

Los Paneles son conjuntos de comandos agrupados segn su funcin (por ejemplo, todo lo
que haga referencia a las acciones, ir en el Panel Acciones). Su misin es simplificar y
facilitar el uso de los comandos.
Estos paneles o ventanas se encuentran organizados en el lateral derecho del rea de
trabajo. Pudindose expandir o minimizar con un clic de ratn.
Si no estn visibles en el lateral derecho, puedes visualizarlos desplegando el men
Ventana y haciendo clic sobre el nombre del panel que quieras mostrar.
Para mejorar la experiencia del usuario, Flash permite cargar y guardar tus propias
disposiciones de paneles, para que si en algn momento el entorno se vuelve un poco catico
puedas recuperar tu configuracin elegida desde el men Ventana.
Para ello debers acceder a la opcin Ventana Espacio de trabajo Nuevo espacio
de trabajo y asignar un nombre a nuestro nuevo espacio.

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

Panel Alinear: Coloca los objetos del modo que le indiquemos. Muy til.
Panel Color: Mediante este panel creamos los colores que ms nos gusten.
Panel Muestras: Nos permite seleccionar un color de modo rpido y grfico. (Incluidas
nuestras creaciones).
Panel Informacin: Muestra el tamao y las coordenadas de los objetos seleccionados,
permitindonos modificarlas. Muy til para alineaciones exactas.
Panel Escena: Modifica los atributos de las escenas que usemos.
Si an no sabes lo que son las Escenas, te lo explicamos en nuestro tema bsico

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

Panel Acciones: De gran ayuda para emplear Action Script y asociar acciones a nuestra
pelcula.
Panel Comportamientos: Permiten asignar a determinados objetos una serie de
caractersticas (comportamientos) que despus podrn almacenarse para aplicarse a
otros objetos de forma rpida y eficaz.
Panel Componentes: Nos permite acceder a los Componentes ya construidos y listos
para ser usados que nos proporciona Flash. Los componentes son objetos "inteligentes"
con propiedades caractersticas y muchas utilidades (calendarios, scrolls etc...)
Panel Cadenas: Mediante este panel Flash aporta soporte 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
Para practicar estas operaciones te aconsejamos realizar Ejercicio Acceder a los Paneles

Ejercicios unidad 2: El entorno de Flash CS5

Ejercicio 1: Crear una pelcula a nuestro gusto
Crea una pelcula que tenga las siguientes propiedades:
1. Un tamao de 300 x 100 px
2. Un color de fondo rojo
3. Un Velocidad de los Fotogramas de 14 fps

Ejercicio 2: Estructurar una pelcula

1. Abre una nueva pelcula
2. Crea 2 Escenas y llmalas Escena 1 y Escena 2
3. Crea 2 capas en cada una.

4. Llmalas E1_1, E1_2 y E2_1, E2_2

Ejercicio 3: Creando fotogramas

1. Crea en una pelcula nueva 3 fotogramas clave
2. Crea 3 fotogramas normales, cada uno asociado a un fotograma clave distinto

Ejercicio 4: Identificando fotogramas

1. Dada la siguiente pelcula

Identifica todos los tipos de fotogramas existentes y a qu tipo pertenecen. Recuerdas

para qu sirve cada uno?

Ejercicio 5: Paneles
1. Abre el Panel Color.
2. Abre el Panel Acciones.
3. Abre el Panel Alinear.
4. Cierra el Programa Flash CS5
5. Vuelve a abrirlo. Qu notas?

Si no tienes muy claro las operaciones a realizar, Aqu te ayudamos

Ayuda ejercicios unidad 2: El entorno de Flash CS5

Ejercicio 1: Crear una Pelicula a nuestro gusto
El apartado 1 nos propone cambiar las dimensiones del Escenario:
1. Hacemos clic con el botn derecho y pulsamos sobre Propiedades del Documento.
2. Pulsamos sobre la pestaa Unidades de Regla y seleccionamos Pxeles (px)
3. Introducimos las medidas pedidas (300 x 100) en Dimensiones.
El apartado 2 nos propone cambiar el color de fondo del Escenario:
1. Hacemos clic con el botn derecho y pulsamos sobre Propiedades del Documento
2. Pulsamos sobre la pestaa Color de fondo, el puntero se convertir en un
"cuentagotas".
3. Seleccionamos el color pedido.
El apartado 3 nos propone aumentar la velocidad de reproduccin de la pelcula

1. Hacemos clic con el botn derecho y pulsamos sobre Propiedades del Documento.
2. En Veloc. Fotogramas escribe 14 fps.
El resultado debe ser un rectngulo rojo con las medidas propuestas.

Ejercicio 2: Estructurar una Pelcula

Vamos a crear la pelcula pedida y a estructurarla tal y como piden
1. Abrimos una nueva Pelcula desde el men Archivo Nuevo
2. Accedemos al Panel Escena desde Ventana Otros Paneles Escena
3. Creamos una nueva Escena pulsando sobre el signo

4. Les cambiamos los nombres haciendo doble clic en sus nombres actuales
Ahora falta crear el nmero de capas pedido.
1. Seleccionamos la Escena E1 en el Panel Escena
2. Creamos otra capa ms, pulsando el signo

en la lnea de tiempo.

3. Les cambiamos los nombres a las 3 capas haciendo doble clic en sus nombres actuales
(por defecto Capa 1 y Capa 2)
Seleccionamos la Escena E2 en el Panel Escena y repetimos los pasos anteriores del 2
al 3.
El Panel Escena debera quedar as:

Y as las Capas:

Ejercicio 3: Creando Fotogramas

Vamos a crear los fotogramas pedidos:
1. Abrimos una nueva pelcula
2. Hacemos clic sobre el fotograma 2, pues en el 1 ya hay un Keyframe
3. Vamos al men Insertar y seleccionamos Fotograma Clave

4. Hacemos clic sobre el fotograma 3 y seleccionamos Insertar Lnea de Tiempo

Fotograma Clave
Ya tenemos los 3 Fotogramas Clave creados. Faltan los fotogramas normales
1. Seleccionamos el fotograma 1 y hacemos clic en el men Insertar Lnea de Tiempo
y seleccionamos Fotograma.
2. Ahora el fotograma 2 ser un fotograma normal y el 3 y el 4 sern Fotogramas Clave.
Seleccionamos el fotograma 3 y repetimos el proceso anterior.
3. Seleccionamos el fotograma 5 y lo volvemos a repetir. Esto ser lo que obtengamos:

Fijmonos en que no estn los puntos negros en los Fotogramas Clave ni los cuadrados
blancos en lo fotogramas normales.
Esto se debe a que no hay nada dibujado en dichos fotogramas.
si probamos a insertar algo en cada par de fotogramas, inmediatamente obtendremos esto:

Ejercicio 4: Identificando Fotogramas

Vamos a identificar los diferentes tipos de fotogramas:

1. Hay 3 Fotogramas Clave. Son el fotograma 1, el 7 y el 9. Los 2 primeros representan

una animacin de Movimiento. (probablemente contendrn al mismo objeto pero
cambiado de lugar). El tercero es un Fotogramas Clave normal.
2. Los fotogramas entre el 1 y el 7 y los fotogramas entre el 9 y el 13 (no incluidos) son
fotogramas normales. Simplemente determinan la duracin de los Keyframes a los que
van asociados.
3. Los fotogramas del 13 al 15 (incluidos) y el fotograma 8 son Fotogramas Contenedor.
Existen y en la pelcula se vern como fotogramas en blanco (o con el color de fondo
que hayamos seleccionado).
4. Los fotogramas del 16 en adelante son fotogramas vacos y no se vern en la pelcula.

Ejercicio 5: Paneles
1. Abrimos el Men Ventana.

2. Hacemos clic en Color. Se abrir el Panel correspondiente.

3. Repetimos los pasos del 1 al 2, pero abriendo el panel Alinear.
4. Cerramos el programa y lo volvemos a abrir.
5. Observamos que los Paneles siguen donde los dejamos. Flash adapta su entorno a
nuestras preferencias.

Unidad 3. Dibujar y colorear (I)

3.1. El dibujo en Flash CS5
Cuando se disea una pgina web o una animacin el diseador pasa por muchas fases.
Tras la fase de "Qu quiero crear y cmo va a ser" viene (normalmente) la fase de diseo
grfico. Llevar lo que ha producido tu imaginacin al papel (en este caso al papel de Flash).
No conviene engaarnos, Flash no es un programa de diseo grfico, pero su potencia en
este mbito es casi tan grande como la de stos programas. Vamos a ver cmo emplear cada
herramienta de dibujo para sacarle el mximo partido.

3.2. La barra de Herramientas. Herramientas bsicas

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

Herramienta Seleccin (flecha):

. Es la herramienta ms usada de todas. Su uso
principal es para seleccionar objetos, permite seleccionar los bordes de los objetos (con
doble clic), los rellenos (con un slo clic), zonas a nuestra eleccin... Su uso adecuado
puede ahorrarnos tiempo en el trabajo.
Herramienta Texto:
Crea un texto en el lugar en el que hagamos clic. Sus
propiedades se vern en el tema siguiente.
Herramienta Lnea:
Permite crear lneas rectas de un modo rpido. Las lneas se
crean como en cualquier programa de dibujo, se hace clic y se arrastra hasta donde
queramos que llegue la lnea recta. Una vez creada la podemos modificar situando el
cursor encima de los extremos para estirarlos y en cualquier otra parte cercana a la
recta para curvarla.

Herramienta de forma: Permite dibujar

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

La herramienta valo permite dibujar crculos o elipses de manera rpida y sencilla.

Para practicar el manejo de esta Herramienta, te aconsejamos realizar Ejercicio Crear
valo.
Herramienta Lpiz:
Es la primera herramienta de dibujo propiamente dicho. Permite
dibujar lneas con la forma que decidamos, modificando la forma de estas a nuestro
gusto. El color que aplicar esta herramienta se puede modificar, bien desde el Panel
Mezclador de Colores o bien desde el subpanel Colores que hay en la Barra de
Herramientas.
Herramienta Pincel:
Su funcionalidad es parecida a la del lpiz, pero por defecto su
trazo es ms grueso e irregular. Se suele emplear para aplicar rellenos. Se puede
modificar su herramientas.
Herramienta Cubo de pintura:
Permite aplicar rellenos a los objetos que hayamos
creado. Al contrario que muchos otros programas de dibujo, no permite aplicar rellenos
si la zona no est delimitada por un borde. El color que aplicar esta herramienta se
puede modificar, bien desde el Panel Color o bien desde el subpanel Relleno que hay
en la Barra de Herramientas.
Herramienta Borrador:
Su funcionamiento es anlogo a la Herramienta Pincel. Pero
su funcin es la de eliminar todo aquello que dibuje.

Unidad 3. Dibujar y colorear (II)

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

para seleccionar Poligono.

Herramienta Pluma:

Crea polgonos (y por tanto rectas, rectngulos...) de un modo

sencillo. Mucha gente encuentra esta herramienta complicada, aunque es una de las ms
potentes que ofrece Flash. Su empleo consiste en hacer clic en los lugares que queramos
definir como vrtices de los polgonos, lo que nos asegura una gran precisin. Para crear
curvas, hay que sealar los puntos que la delimitan y posteriormente trazar las tangentes a
ellas. Con un poco de prctica se acaba dominando.
Herramienta Subseleccin:

Esta Herramienta complementa a la Herramienta

Pluma, ya que permite mover o ajustar los vrtices que componen los objetos creados con
dicha herramienta.
Herramienta Bote de Tinta:

Se emplea para cambiar rpidamente el color de un

trazo. Se aplica sobre objetos, si tienen borde, cambia al color mostrado de dicho borde, por

el mostrado en el Panel Mezclador de Colores (que coincide con el subpanel Colores que
hay en la Barra de Herramientas.)
Herramienta Cuentagotas:

Su misin es "capturar" colores para que posteriormente

podamos utilizarlos. Para ver cmo funciona, consulta este videotutorial:

3.4. La barra de Herramientas. Opciones

Algunas Herramientas poseen unas opciones especiales que facilitan y potencian su uso.
Para acceder a estas utilidades, a veces no basta con hacer clic en la Herramienta
correspondiente sino que adems debemos hacer clic en la lnea o en el objeto que has
dibujado.
Entonces aparecer (o se iluminar si ya estaba presente) un submen como este:
Ajustar a Objetos :

Se usa para obligar a los objetos a "encajar" unos con otros,

es decir, para que en caso de ser posible, sus bordes se superpongan, dando la sensacin de
estar "unidos".
Suavizar:

Convierte los trazos rectos en lneas menos rgidas.

Enderezar:

Realiza la labor inversa. Convierte los trazos redondeados en ms

rectilneos.

Unidad 3. Dibujar y colorear (III)

3.5. El panel Color

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

. Al hacerlo aparecer un panel con multitud de colores para que

seleccionemos el que ms nos gusta. Tambin permite introducir el cdigo del color segn el
estndar.

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

As mismo se puede determinar el tipo de relleno que aplicaremos a los objetos creados
(mediante la herramienta Bote de Pintura).
Se pueden crear diferentes tipos de relleno:
Slido: Consiste en un relleno formado por un solo color.
Degradado Lineal: Es un tipo especial de relleno, de modo que un color se degrada
hasta convertirse en otro. Puede ir de arriba abajo o de un lado al otro
Degradado Radial: Es igual que el anterior, pero los degradados tiene forma circular.
Relleno de mapa de Bits: Permite colocar como relleno alguna imagen existente en la
pelcula (O ajena a ella si antes se "importa")
Para aprender a crear un color transparente (semi-transparente), realiza el ejercicio paso
a paso Crear transparencias.

3.6. El panel Muestras

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

Unidad 3. Ejercicio: Colorear un valo

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

Ejercicio paso a paso

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

Seleccionamos el Interior del valo

Seleccionamos el Borde del valo

Ejercicios unidad 3: Dibujar y colorear

Ejercicio 1: Bandera Olmpica
1. Dibuja 5 aros.
2. Cmbiale los colores. Por ejemplo, los colores de la bandera olmpica (azul, negro, rojo,
amarillo y verde)

3. nelos de modo que parezcan los aros olmpicos.

Ejercicio 2: Saturno
1. Dibuja un valo
2. Convierte su color de relleno un degradado de verde oscuro a verde claro (por ejemplo).
3. Crea el aro que le rodea.
4. Une los 2 objetos para que parezca el planeta Saturno

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

Ayuda ejercicios unidad 3: Dibujar y colorear

Ejercicio 1: Los Aros Olmpicos
Vamos a dibujar los aros olmpicos.
Como siempre, partiremos de un nuevo documento Action Script 3.0, a travs del men
Archivo Nuevo.
1. Seleccionamos la Herramienta valo.
2. Trazamos un valo, y para que sea perfectamente circular, mantenemos pulsada la tecla
Shift.
3. Ahora, podemos intentar crear los otro cuatro aros iguales, o seleccionarlos con la
herramienta Seleccin, copiarlos desde el men Edicin Copiar y pegarlos desde el
mismo men.
4. Una vez estn dibujados, seleccionamos el relleno de cada valo y pulsamos la tecla
Suprimir para eliminarlo. (Igualmente podamos haber seleccionado el color "ninguno"
y posteriormente creado los valos que hubieran aparecido sin color de fondo)
5. Ahora seleccionamos los bordes de cada aro y le damos el color que queramos
seleccionndolo en el Panel Color.
6. Ahora mueve cada aro hasta la posicin deseada. Para mover un objeto, selecciona la
Herramienta Seleccin, haz clic en el aro que quieras mover y arrstralo. Para
movimientos precisos, puedes utilizar las teclas con flechas.

Ejercicio 2: Saturno
Vamos a dibujar un planeta parecido a Saturno

1. Seleccionamos la Herramienta valo.

2. Creamos un valo circular, que har de planeta.
3. Eliminamos el borde, para ello, hacemos clic en l y pulsamos la tecla Suprimir.
4. Seleccionamos el relleno del valo y abrimos la opcin Relleno.
5. Seleccionamos la opcin Degradado Radial.

6. Pulsamos en
y seleccionamos los colores que
deseemos, (podemos aadir tantos colores como queramos y probar su efecto).
7. Dibujamos el anillo del planeta, por ejemplo creando otro valo con la forma adecuada.
No lo dibujes sobre el planeta.
8. Tenemos que cambiar la forma de uno de los 2 para que tenga la forma deseada. Por
ejemplo, borramos parte del planeta seleccionndola de forma rectangular y pulsando la
tecla Suprimir tal y como vimos en el paso 3.

9. Separa los dos hemisferios del planeta.

10. Pon el anillo sobre el hemisferio inferior, y despus, arrastra sobre el anillo la otra parte
del planeta.
Prueba evaluativa de la unidad III
1. El panel que contiene las utilidades necesarias para dibujar, pintar, etc se llama Barra de
Herramientas.
a) Verdadero
b) Falso

2. Flash CS5 trabaja con colores puros de alta definicin, lo que imposibilita su mezcla y por
tanto el uso de ms de 256 colores.
a) Verdadero
b) Falso

3. Flash dispone del efecto Alfa, que aade transparencia a los colores. Efecto muy atractivo
y vistoso.
a) Verdadero

b) Falso

4. Las herramientas
y
tienen la misma funcin, salvo que la primera se emplea para
objetos coloreados y la segunda para objetos sin color.
a) Verdadero
b) Falso

5. La herramienta Lazo es capaz de seleccionar formas y trazados no posibles con la

herramienta Seleccin.
a) Verdadero
b) Falso

6. La herramienta Cubo de pintura se emplea nicamente para dar color al fondo de las
pelculas.
a) Verdadero
b) Falso

7. El Panel de colores se emplea para crear nuestros propios colores, mezclarlos a nuestro
gusto y aadirles efectos tales como el Alfa.
a) Verdadero
b) Falso

8. La herramienta Cuentagotas sirve para contar el nmero de colores diferentes que

contiene una imagen.
a) Verdadero
b) Falso

9. Las herramientas y se diferencian en que el lpiz dibuja ms fino que el pincel.

a) Verdadero
b) Falso

10. Es posible en Flash crear un color de relleno a partir de una imagen de mapa de bits
previamente importada a nuestra pelcula.
a) Verdadero
b) Falso

Unidad 4. Textos (I)

4.1. El texto en Flash
Flash abarca todo aquello que nos pueda hacer falta a la hora de crear una animacin, y
por tanto, tambin todo aquello relativo a los textos. Sin embargo, Flash fue concebido para
crear animaciones grficas, de modo que tratar cualquier texto como si de un objeto ms se
tratase, listo para ser animado a nuestro gusto. Esto nos permitir posteriormente animar
textos y crear espectaculares animaciones con muy poco esfuerzo. Flash distingue entre 3
tipos de texto, texto esttico o normal, texto dinmico y texto de entrada (para que el usuario
introduzca sus datos, por ejemplo), tambin se puede crear texto que soporte formato HTML
etc...
Actualmente Flash utiliza dos motores para trabajar con texto: el motor clsico, heredado
de las anteriores versiones, y el llamado Text Layout Framework (TLF), el nuevo motor
incluido en Flash CS5. Este ltimo, es el utilizado por defecto en Flash.
Por defecto, salvo que indiquemos otra cosa, en nuestros ejemplos emplearemos el motor
de texto TLF.

4.2. Insertar texto

En la barra de Herramientas encontramos la herramienta Texto

, que es la que nos

permitir escribir texto en nuestros proyectos.

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

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

Para insertar un Texto de puntos, basta con hacer clic con la herramienta Texto y
comenzar a escribir. En cambio, si queremos introducir un Texto de rea, tenemos que hacer
clic y arrastrar para definir el tamao del rea. En cualquier caso, siempre podemos convertir
un Texto de puntos en rea simplemente cambiando su tamao, estirando de los controles de
transformacin que se muestran alrededor.
Para saber ms acerca de Cmo escribir textos visita nuestra pgina avanzada

Unidad 4. Avanzado: Escribir texto

Tras hacer clic con la Herramienta Texto en cualquier parte del fotograma actual, nos
aparecer algo as:

El recuadro que vemos es el recuadro que contendr al texto. En la

pelcula final no se ver, pero nos servir para localizar ms fcilmente el texto y para moverlo
o cambiar su tamao. Finalmente, el crculo que hay arriba a la derecha significa que el
recuadro del texto se expandir segn vayamos escribiendo y tambin el texto. Esto es, todo
lo que escribamos, estar en la misma lnea.
Si escribimos en el recuadro creado por defecto vemos como se alarga el recuadro que lo
contiene. Para cambiar de lnea, sera necesario pulsar la tecla Enter (Intro).

Si por otra parte, queremos delimitar lo que va a ocupar nuestro texto (cosa bastante
comn, acercaremos el cursor del ratn al borde del recuadro de texto, segn donde lo
acerquemos, se transformar en un smbolo o en otro.
Si lo acercamos al borde del recuadro, se le aadir debajo de la flecha una flecha
pequea de 4 direcciones como la que muestra la figura y que nos indica que podemos mover
el texto:

Si lo acercamos al crculo que est en el margen superior derecho, el cursor se convierte

en un flecha de "ensanchamiento", como la que muestra la figura:

Con el cursor convertido en flecha de "ensanchamiento", podemos estirar los lmites del
recuadro de texto, y adems, el crculo que apareca en el margen superior derecho, se
convierte en un cuadrado. Este cuadrado significa que los lmites del recuadro de texto han
quedado fijados, y que al insertar ms texto, se producir un salto de lnea en lugar de
ensanchar el recuadro de texto. Este sera su comportamiento al introducir texto:

Si quisiramos, (una vez definido el recuadro de texto) volver al modo anterior, basta con
hacer doble clic sobre el cuadrado que est en el margen superior derecho del recuadro de
texto. Tras hacerlo, se convertir en un crculo y su comportamiento ser el descrito al
principio de esta pgina.

Unidad 4. Textos (II)

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

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

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

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

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

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

Desde aqu, al igual que en

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

Tamao: El tamao de la tipografa empelada.

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

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

realice de modo automtico.

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

Utilizar fuentes de dispositivo: Se emplean las fuentes instaladas en el

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

Suavizado para legibilidad, favorece la legibilidad del texto. En este caso,

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

Suavizado para animacin, es la mejor opcin cuando pretendemos animar

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

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

Carcter avanzado:

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

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

Unidad 4. Textos (III)

Un Prrafo no es ms que un conjunto de caracteres con propiedades comunes a todos
ellos. Estos prrafos admiten ciertas opciones que nos permiten trabajar con bloques de texto.
El Panel Propiedades nos proporciona las siguientes opciones para trabajar con prrafos
(entre otras).
A la Izquierda:

Todas las lneas empezarn tan a la izquierda como sea posible (dentro

del recuadro de texto que hayamos definido).

Centrar:

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.

Unidad 4. Textos (IV)

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

Cuando todo el texto cabe en el elemento de texto, el puerto de salida aparece en blanco.
Pero cuando el texto desborda al elemento, el puerto de salida muestra el smbolo

. Cuando

dos elementos de texto aparecen enlazados, el que va primero muestra una flecha hacia
afuera en el puerto de salida, que est unido al puerto de entrada del siguiente elemento, que
muestra una flecha hacia adentro.

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

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

, dndonos dos opciones:

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

Trazar un nuevo elemento de texto, igual que con la herramienta Texto. Si esto lo
hacemos en un puerto ya enlazado, el nuevo elemento de texto se colocar entre los
elementos que estaban enlazados.
Para romper un enlace, podemos hacer doble clic sobre un puerto enlazado, lo que mueve
todo el texto al puerto de origen.

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

4.6. Incorporar fuentes

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

En el desplegable Familia seleccionamos la fuente que deseamos utilizar. Seleccionamos

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

De esta forma nos aseguramos que nuestro proyecto se ver tal cual lo creamos.

Unidad 4. Textos (V)

4.7. Introducir texto

Aunque el uso ms comn y principal de los contenedores de texto es mostrarlo, tambin

podemos emplearlos como un cuadro de entada de texto.
Para hacerlo, basta con seleccionar Texto editable en las propiedades del elemento.

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

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

Para recoger informacin de los usuarios, normalmente emplearemos componentes de

formulario, que son controles especficos para esta funcin. Pero a esto le dedicaremos un
tema completo ms adelante.
Pero cmo recogemos la informacin introducida en el cuadro de texto? Aunque an no lo
hemos explicado, el texto es un objeto. Y como tal, tiene una propiedad que nos permite leer
su contenido mediante ActionScript. Cuando comencemos a trabajar con ActionScript
veremos que esto, es una tarea muy sencilla.

Ejercicios unidad 4: Textos

Ejercicio 1: Crear textos
1. Crea una pelcula con 1 fotograma.
2. Crea un objeto de texto para lectura que diga: Bienvenido a mi pgina web.

3. Utiliza la fuente Verdana a un tamao de 45.

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

Ayuda ejercicios unidad 4: Textos

Ejercicio 1: Crear textos
1. Creamos la pelcula mediante Archivo Nuevo, eligiendo ActionScript 3 (por defecto
tendremos un nico fotograma).
2. Selecciona la herramienta Texto del Panel de Herramientas.
3. Haz clic sobre el escenario.

4. Veremos esta imagen

. Escribe dentro el texto Bienvenido a mi pgina web.

5. Centra el texto haciendo clic en

en el Panel de Propiedades.

6. Cambia la fuente del texto a Verdana seleccionndola en el desplegable Familia.

7. Haz clic sobre el control de Tamao y arrstralo hacia la derecha hasta que llegue a 45.
8. En el desplegable Suavizado, elige Legibilidad.
Prueba evaluativa de la unidad IV
1. Flash CS5 no puede trabajar con textos, ya que es un programa para realizar animaciones
grficas.
a) Verdadero
b) Falso

2. Flash nos permite escribir nuestros textos empleando cualquier fuente que tengamos
instalada en nuestro ordenador.
a) Verdadero
b) Falso

3. Flash incluye opciones para sus textos ms propias de CSS que de HTML, como por
ejemplo, sangrados de prrafo, espacios entre caracteres...
a) Verdadero
b) Falso

4. Flash es el nico programa que crea animaciones de texto fcilmente.

a) Verdadero
b) Falso

5. Cul de estas 3 afirmaciones es correcta?

a) Un texto marcado como Seleccionable, podr leerse, pero no copiarse.

b) Un texto marcado como editable permite introducir texto.
c) Un texto de solo lectura, puede ser seleccionado y copiado.

6. Cul de las siguientes afirmaciones es falsa?

a) Para que un usuario pueda introducir texto, debe de estar suavizado para

animacin.
b) Los Textos de punto pueden convertirse a Textos de rea solo con cambiar su

tamao.
c) Los Textos de rea se pueden dividir en columnas.

7. Es posible modificar el tamao de la caja de texto de entrada "tirando" de cualquiera de

los cuadrados que podemos encontrar en las cuatro esquinas del objeto.
a) Verdadero
b) Falso

8. Para que el texto fluya de un rea de texto a otra...

a) Tenemos que enlazar el puerto de salida de la primera con el puerto de entrada

de la segunda.
b) Podemos crear una nuevoa rea de texto enlazada haciendo clic en un puerto

de salida desbordado.
c) Podemos usar cualquiera de las dos opciones anteriores.

9. Podemos convertir un texto creado con el motor TLF a Texto clsico.

a) Verdadero
b) Falso

10. Para que el texto animado se vea lo mejor posible, debemos de suavizarlo para
legibilidad.
a) Verdadero
b) Falso

Unidad 5. Sonidos en Flash (I)

5.1. El sonido en Flash

Quin sera capaz de ver una pelcula muda? Y una animacin espectacular sin sonido?
Hasta hace poco, los nicos sonidos que oamos en las pginas web eran los famosos
"midis", de escaso tamao y de escasa calidad. De hecho, eran slo instrumentos musicales
sin voz, de ah su pequeo tamao (y calidad). An as, siempre exista algn creador de
pginas web que se aventuraba a poner algn sonido complejo (.wav o .mp3) en su pgina
web, por desgracia, su carga es tan lenta, que la mayora de los visitantes se iran de la
pgina sin llegar a escucharla.
Hoy, gracias a las conexiones de banda ancha orientadas a contenido multimedia, poner
sonido a las pginas web es un poco ms fcil, qu aporta Flash?
Flash nos permite insertar cualquier sonido que queramos en nuestras pelculas (.wav,
.aiff, .mp3, etc...) de forma fcil y muy efectiva, ya que es capaz de acelerar la descarga del
sonido siempre y cuando se descargue junto con nuestra pelcula.
Podemos dar a la pelcula efectos simples (el tpico "clic" al pulsar un botn), efectos
complejos (msica de fondo) e incluso podemos hacer que la animacin se desarrolle
conjuntamente con una msica (si bien esto ltimo necesitara que toda la pelcula estuviera
descargada previamente, para evitar "atascos" durante el desarrollo de la animacin). En
definitiva, Flash nos lo vuelve a poner fcil.
Pero hemos de tener cuidado al incluir sonidos, sobre todo si son melodas. Es preferible
que sea el usuario quien las active a travs de un botn, o si es necesario que se reproduzcan
automticamente, tener un control fcilmente localizable para silenciarlo.

5.2. Importar sonidos

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.

Unidad 5. Sonidos en Flash (II)

5.3. Propiedades de los sonidos

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

Veamos las partes que tiene este panel.

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

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

Sinc: Esta opcin nos permite determinar en qu momento comenzar a actuar nuestro
sonido, estas son las opciones que tenemos:
Evento: Sincroniza nuestro sonido con un evento determinado. Es la opcin por defecto
y provoca que el sonido se empiece a reproducir al pasar la pelcula por el fotograma en
el que est situado. Tambin se puede sincronizar el sonido con botones y los dems
tipos de smbolos. El sonido se repetir completamente, y si lo ejecutamos varias veces,
se reproducir de nuevo, aunque no hubiese acabado, provocando que el sonido se
solape.
Inicio: Su funcionamiento es equivalente al de "Evento", se diferencian en que si ya se
est reproduciendo, no se reproduce de nuevo.
Detener: Detiene el sonido seleccionado.
Flujo: Esta opcin sincroniza el sonido con el o los objetos con los que est asociado,
por tanto, si la carga de la pelcula es lenta y las imgenes no fluyen adecuadamente, el
sonido se detendr para sincronizarse con ellas. Este efecto puede dar la sensacin de
que la pelcula se corta de un modo muy brusco (pensar en que se considera normal
que una imagen tarde en cargarse, pero si se detiene un sonido mientras se reproduce,
produce una reaccin muy negativa en los que pueden estar viendo nuestra pelcula).
Por otra parte, es un efecto muy adecuado para algunas situaciones, por ejemplo, el
efecto de que un personaje hable durante una pelcula. En esta situacin, es muy
recomendable que el sonido y las imgenes estn sincronizadas.
Repetir: Determina el nmero de veces que se reproducir el sonido segn lo indiques
de la derecha. Tambin puedes seleccionar Reproducir indefinidamente para que el sonido
se reproduzca en un bucle hasta llegar al siguiente fotograma clave.
No recomendamos insertar sonidos con la opcin Flujo y a la vez la de Repetir, ya que al
estar sincronizados los sonidos con las imgenes, provocaramos que las imgenes (y los
fotogramas que las contengan) se dupliquen tambin, aumentando considerablemente el
tamao de la pelcula.

Unidad 5. Sonidos en Flash (III)

5.4. Insertar sonido en lnea de tiempo

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

Por tanto, el sonido se comenzar a reproducir en ese fotograma, y continuar hasta que sea
detenido. Esto es til, por ejemplo, para agregar msica a la pelcula.
Lo mejor ser crear una nueva capa para cada sonido. As lo controlaremos fcilmente.
Creamos un fotograma clave en el momento en que queremos que comience a reproducirse
el sonido, y lo arrastramos de la biblioteca al escenario. Tambin podemos elegirlo
directamente desde el panel de Propiedades.
Con el fotograma de la nueva capa seleccionado, accedemos a sus propiedades, a la
seccin de Sonido.

Seleccionamos los efectos deseados, y las veces que lo queremos Repetir.

En el men Sinc. seleccionamos la opcin de sincronizacin deseada. Por ejemplo, si
queremos que cada vez que se pase por ah, se lance un sonido breve, porque por ejemplo
se mueve un objeto, seleccionaremos evento. En cambio, si queremos iniciar la reproduccin
del sonido a partir de ah, marcamos Inicio. Si queremos iniciar el sonido en un fotograma
ms adelante, seleccionamos Detenido, y lo iniciamos creando un fotograma clave,
seleccionado el mismo sonido.

As representa Flash los sonidos insertados en Fotogramas

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

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

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

Para practicar la insercin de sonidos realiza el Ejercicio paso a paso Trabajar con
sonidos

Unidad 5. Ejercicio: Trabajar con Sonidos

Objetivo.

Insertar un sonido que reproduzca desde el fotograma 5 al 15.

Ejercicio paso a paso.

1. Creamos la pelcula mediante Archivo Nuevo, eligiendo ActionScript 3 (por defecto
tendremos un nico fotograma).
2. Creamos una nueva capa (icono Nueva capa de la lnea de tiempo) y la seleccionamos.
3. Insertamos un nuevo fotograma clave en la lnea de tiempo en el fotograma 5 y 15
(desde el Men Insertar Lnea de Tiempo Fotograma Clave, o pulsando F6).
4. Seleccionamos Archivo Importar Importar a Biblioteca, que se encuentra en el
Men Archivo.
5. Se abrir la clsica ventana de Windows para buscar un archivo. Buscamos el archivo
sonido.mp3 en la carpeta de ejercicios y pulsamos Abrir.
6. El sonido ya est insertado. Hacemos clic en el Panel Biblioteca (Ventana
Biblioteca) y comprobamos que se encuentra all.
7. Seleccionamos el fotograma 5 (donde queremos insertar el sonido).
8. Despus seleccionamos el sonido en el Panel Biblioteca y lo arrastramos hasta el
escenario.
9. Ve al panel de Propiedades, y la opcin Sinc. selecciona Evento.
10. Prueba la pelcula (tecla Intro) y comprobars que el sonido se reproduce hasta al
final. Pulsa varias veces Intro y comprobars que el sonido se reproduce varias veces
solapndose.
11. En el despegable Sinc de las Propiedades, cambia el valor a Flujo. Repite el paso
anterior y comprueba que el sonido se para al llegar al ltimo fotograma.
12. En el despegable Sinc de las Propiedades, cambia el valor a Iniciar. Repite el paso
anterior y comprueba que el sonido no se vuelve a iniciar si an no ha acabado, aunque
se reproduce hasta el final.
13. Selecciona el fotograma clave 15.
14. En el Panel Propiedades, en Sonido, elige el Nombre del archivo que estamos
utilizando.
15. En la opcin Sinc selecciona Detener.
16. Prueba la pelcula y comprobars que ahora se detiene al llegar la fotograma 15

Unidad 5. Sonidos en Flash (IV)

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

5.6. Editar Sonidos

Flash no fue creado como un editor de sonidos, por lo que su potencia en este campo es
limitada. An as, los efectos que permite aplicar de un modo sencillo suelen ser suficientes
para cualquier animacin que queramos realizar. Disponemos de estos efectos del panel
Propiedades:
Canal Izquierdo: El sonido tan slo se escuchar por el altavoz izquierdo.
Canal Derecho: El sonido tan slo se escuchar por el altavoz derecho.
Desvanecimiento de izquierda a derecha: El sonido se reproduce inicialmente en el
altavoz izquierdo para luego pasar al derecho.
Desvanecimiento de derecha a izquierda: El sonido se reproduce inicialmente en el
altavoz derecho para luego pasar al izquierdo.
Aumento Progresivo: El volumen de nuestro sonido aumenta progresivamente.
Desvanecimiento: El volumen de nuestro sonido disminuye progresivamente.
Personalizado: Esta opcin nos permite "editar" el sonido de un modo rpido y sencillo.
Desde este editor podemos decidir qu volumen tendr nuestro sonido y en qu altavoz.
Podemos crear los efectos anteriores ajustndolos a nuestro gusto y podemos crear
efectos ms complejos a nuestra medida.

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

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

Unidad 5. Sonidos en Flash (V)

5.7. Mp3 o Wav?

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

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

Resultado: Una pelcula con sonido (pelcula 2) que ocupa 145 KB

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

Msica de Fondo

Pelcula con sonido (msica) en formato .wav. 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
sonido
Tamao
Total:
9
KB.
Tamao
Total:
Calidad: Regular
Calidad: Buena

(voz)
en
67KB.

.mp3.

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

Ejercicios unidad 5: Sonidos en Flash

Ejercicio 1: Importar Sonidos
1. Crea una pelcula con 1 fotograma.
2. Localiza el archivo sonido.mp3 en la carpeta de ejercicios.

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

Ejercicio 2: Editar Sonidos

1. Modifica el sonido (usando Flash) de modo que en un principio no se oiga, y poco a
poco vaya aumentando de volumen.
2. Modifica el sonido de modo que al final del mismo, parezca que el sonido pasa de un
altavoz al otro.
Si no tienes muy claro cmo realizarlo, Aqu te ayudamos.

Ayuda ejercicios unidad 5: Sonidos en Flash

1. Creamos la pelcula mediante Archivo Nuevo, eligiendo archivo ActionScript 3 (por
defecto tendremos un nico fotograma).
2. Seleccionamos Importar Importar a Biblioteca, que se encuentra en el Men
Archivo.
3. Se abrir la clsica ventana de Windows para buscar un archivo. Buscamos el archivo
de sonido y pulsamos Abrir.
4. El sonido ya est insertado. Hacemos clic en el Panel Biblioteca (Ventana
Biblioteca) y comprobamos que se encuentra all.
5. Si no se encuentra all, revisaremos los pasos dados, pues algo no hemos hecho bien.
6. Creamos una nueva capa y la seleccionamos.
7. Despus seleccionamos el sonido en el Panel Biblioteca y lo arrastramos hasta el
escenario (hasta el fotograma actual).
8. Pulsamos Enter y el sonido deber escucharse.
9. Alargamos el fotograma actual hasta el nmero 4 (insertando fotogramas normales
desde
el
Men
Insertar

Lnea
de
Tiempo

Fotograma).

10. Insertamos un nuevo fotograma en la lnea de tiempo. En la posicin 5 (desde el Men

Insertar Lnea de Tiempo Fotograma Clave).
11. Abrimos el Panel Propiedades y seleccionamos uno de los fotogramas del 1 al 4.
12. En la opcin Sinc seleccionamos Flujo.
13. Acabamos de conseguir que el sonido slo se reproduzca cuando est en los
fotogramas indicados.
14. Insertamos un nuevo Fotograma Clave en la posicin 10.

15. Con el fotograma 10 seleccionado, vamos al panel Propiedades, y en las opciones de

Sonido, elegimos el Nombre del archivo que estamos utilizando.
16. En la opcin Sinc seleccionamos Inicio
Debe quedar parecido al grfico:

Ejercicio 2: Editar Sonidos

1. Utilizando el archivo anterior, nos situamos en el ltimo fotograma, donde se reproduce
todo el sonido.
2. Seleccionamos Aumento Progresivo dentro de la pestaa Efecto que se encuentra en
el Panel Sonidos.
3. Seleccionamos Personalizar dentro de la pestaa Efecto que se encuentra en el Panel
Sonidos.
4. Nos dirigimos al final del sonido y hacemos clic en el canal que queramos modificar (el
izquierdo est en la parte superior y el derecho en la inferior). Aparecer un recuadro
blanco, lo situamos en su parte ms baja para quitarle el sonido y en su parte ms alta
para drselo. Jugamos con los volmenes de ambos canales hasta obtener el efecto
deseado. Podemos ir probando cmo queda pulsando el Play que acompaa este
Panel.
5. Prueba evaluativa unidad 5
1. Desde un principio podemos trabajar con cualquier sonido que se encuentre en nuestro
disco duro.
a) Verdadero
b) Falso

2. Importar un sonido es lo mismo que insertarlo en un fotograma.

a) Verdadero
b) Falso

3. Desde el Panel Propiedades, si tenemos seleccionado un fotograma se puede seleccionar

qu sonido queremos reproducir, cuntas veces y qu efectos queremos darle.
a) Verdadero
b) Falso

4. La calidad del sonido es importante a la hora de importarlo en nuestra pelcula.

a) Verdadero
b) Falso

5. Cul de estas 3 afirmaciones es correcta?.

a) Si tenemos un sonido con formato MP3 y el mismo sonido en formato WAV,

importaremos y usaremos siempre el MP3.

b) Si tenemos un sonido con formato MP3 y el mismo sonido en formato WAV,

importaremos y usaremos siempre el WAV.

c) Si tenemos un sonido con formato MP3 y el mismo sonido en formato WAV,

usaremos uno u otro en funcin de ciertos parmetros tales como el tamao, la calidad y el
tipo de sonido que sea.
6. El efecto Canal Izquierdo aumenta la calidad del sonido, ya que lo concentra todo en un
nico altavoz, evitando la prdida de calidad.
a) Verdadero
b) Falso

7. Si configuramos un sonido para que se reproduzca 9999 veces...

a) Se reproducir indefinidamente.
b) La respuesta anterior es falsa.

8. Para efectos de voz en nuestras pelculas es mejor utilizar el mtodo...

a) Flujo.
b) Inicio - Detener.

9. El efecto Aumento Progresivo puede ser una buena forma de introducir un sonido, ya que
provoca que el sonido aumente de volumen progresivamente.
a) Verdadero
b) Falso

10. El efecto Desvanecimiento de izquierda a derecha crea una sensacin de movimiento, ya

que el sonido pasa de un altavoz a otro.
a) Verdadero
b) Falso

Unidad 6. Trabajar con objetos (I)

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

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

catlogo para un DVD o en cualquier otra cosa, tendremos que trabajar con objetos. A
grandes rasgos, podremos considerar un objeto todo aquello que aparezca en nuestra
pelcula y sea visible, de modo que podamos trabajar con l, por ejemplo, cualquier imagen
que creemos o importemos, un botn, un dibujo creado por nosotros mismos etc...
Los objetos de dibujo as considerados tienen 2 partes fundamentales:
El Borde: Consiste en una delgada lnea que separa el objeto del exterior, del escenario.
Puede existir o no, segn nos convenga. Cuando creamos un objeto, el borde se crea siempre
y su color ser el indicado en el Color de Trazo (dentro del Panel Mezclador de Colores). Si
queremos dibujar creando Bordes deberemos emplear las Herramientas Lpiz, Lnea o
Pluma y si queremos que nuestro dibujo no tenga borde, bastar con seleccionar el borde y
suprimirlo (ver siguiente punto).
El Relleno: El relleno no es ms que el propio objeto sin borde. Es, por tanto, la parte
interna del objeto. Su existencia tambin es arbitraria, ya que podemos crear un objeto cuyo
color de relleno sea transparente, como ya se vio en el tema de Dibujar, y por tanto, parecer
que dicho objeto no tiene relleno, aunque en realidad s que exista pero sea de color
transparente. Para dibujar Rellenos (sin borde) podemos usar herramientas tales como el
Pincel o el Cubo de Pintura.

6.2. Seleccionar

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

Objeto SIN seleccionar

Objeto con el BORDE seleccionado

Objeto con el RELLENO seleccionado

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

Unidad 6. Trabajar con objetos (II)

6.3. Colocando objetos. Panel Alinear

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

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

Alineamiento:

Sita los objetos en una determinada

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

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

Distribuir:

Sita los objetos en el escenario en funcin

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

Coincidir Tamao:

Hace coincidir los tamaos de los objetos. Si est

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

Espacio:

Espacia los objetos de un modo uniforme.

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

Para practicar la alineacin te aconsejamos realizar el Ejercicio Alineacin de objetos.

Unidad 6. Ejercicio: Alinear objetos

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

Ejercicio paso a paso

1. Abre un archivo nuevo.

2. Dibuja 4 rectngulos de diferentes colores situados en diferentes puntos del escenario.

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

Unidad 6. Trabajar con objetos (III)

6.4. Panel Informacin

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

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

Medidas del Objeto:

Aqu introduciremos un nmero que represente el tamao de

nuestro objeto en la medida seleccionada en las Propiedades del documento. AN: hace
referencia a la anchura y AL: a la altura.
Situacin del objeto:

Desde aqu controlamos la posicin del objeto en el escenario.

La X y la Y representan el eje de coordenadas (La X es el eje Horizontal y la Y el eje vertical).

Las medidas tambin van en funcin de las medidas elegidas para la pelcula. Estas medidas
se toman desde la esquina superior izquierda de la pantalla (X=0 e Y=0).

Color Actual:

Indica el color actual en funcin de la cantidad de Rojo (R), Verde (V),

Azul (A) y transparencia Alfa (A) que contenga.

Este indicador puede ser engaoso, el motivo es que indica el color que tiene el objeto por
el que en ese momento pasamos el cursor del ratn. Por tanto, podemos tener seleccionado
un objeto (haciendo clic en l) y ver en el Panel Informacin su tamao y su posicin, pero al
desplazar el ratn, el valor del color cambiar y ya no indicar el color del objeto
seleccionado, sino el del objeto por el que pase el cursor. Tened esto en cuenta para no
cometer errores o perder tiempo innecesario.
Posicin del Cursor:

Indica la posicin del cursor. Es til por si queremos que suceda

algo en la pelcula al pasar el cursor justo por una posicin determinada o para situar partes
del objeto en lugares especficos.

6.5. Los grupos

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

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

Crear grupos es muy til, ya que nos permite, como ya hemos dicho, tratar al conjunto de
objetos como un todo y por tanto, podemos aplicar efectos al conjunto, ahorrndonos la labor
de hacerlo de objeto en objeto.
Por ejemplo, supongamos que tenemos un dibujo que representa un conjunto de coches.
Tras dibujarlos todos, nos damos cuenta de que queremos aumentar el tamao de los coches.
Podemos aumentar el tamao de los coches de uno en uno, corriendo el riesgo de aumentar
unos ms que otros y perdiendo las proporciones entre ellos, o podemos formar un grupo con
los coches y aumentar el tamao del grupo, de modo que aumenten todos de tamao a la vez
y en la misma proporcin. De igual modo, podemos mover al grupo de posicin, hacer que
gire...

Al crear un grupo, simplemente estamos dando unas propiedades comunes a un conjunto

de objetos y, en ningn caso perdemos nuestro objeto. En cualquier momento podemos
deshacer el grupo, mediante el Men Modificar Desagrupar.
Adems, Flash nos permite modificar los elementos de un grupo sin tener que
desagruparlo. Para ello, seleccionamos el Grupo de elementos y hacemos clic en el Men
Edicin Editar Seleccionado, o directamente hacemos doble clic sobre el grupo con la
herramienta Seleccionar. Podremos editar los objetos que componen el grupo por separado
teniendo en cuenta que, como es lgico, los cambios realizados afectarn al grupo adems de
al elemento en cuestin.

Ejercicios unidad 6: Trabajar con objetos

Ejercicio 1: Rellenos y Bordes
1. Crea dos rectngulos con el interior de color verde y el borde negro.
2. En uno de ellos elimina el Relleno (rectngulo de la izquierda en la imagen).
3. En el otro, elimina el borde (rectngulo de la derecha en la imagen).

Ejercicio 2: Selecciones
1. Dibuja 5 valos. Dales el color de relleno y borde que quieras (elige un relleno que no
sea transparente

2. Selecciona 3 de ellos usando la tecla SHIFT.

3. Selecciona 3 de ellos usando la Herramienta Seleccin (Flecha).
4. Selecciona 3 nicamente los bordes de 3 de ellos.

Ejercicio 3: Alinear objetos

1. Dibuja 4 objetos (crculos, rectngulos...).
2. Coloca uno en cada esquina usando el Panel Alinear.

Ejercicio 4: Grupos
1. Agrupa los 4 objetos del ejercicio anterior en un nico grupo.
2. Cambia su posicin (colcalos, por ejemplo, en el centro de la pelcula).
3. Desagrpalos.
4. Si no tienes muy claro cmo realizarlo, Aqu te ayudamos.

Ayuda ejercicios unidad 6: Trabajar con objetos

Ejercicio 1: Rellenos y Bordes

Se nos pide crear 2 rectngulos y eliminar el relleno de uno de ellos y el borde del otro.
Procedemos del siguiente modo:
1. Seleccionamos los colores en el Panel Muestras o en el Panel Color, hacemos clic en
la Herramienta Rectngulo y dibujamos 2 rectngulos.

Los 2 rectngulos originales

2. Hacemos clic en el interior del primer rectngulo y pulsamos la tecla suprimir Supr.
3. Hacemos doble clic en el borde del otro rectngulo y volvemos a pulsar la tecla suprimir
Supr.

Rectngulo sin Relleno y Rectngulo sin Borde

Otra opcin podra haber sido crear un nico rectngulo con borde. Hacer clic sobre su
relleno para seleccionarlo, y arrastrarlo para "sacarlo" el rectngulo.

Ejercicio 2: Selecciones
El primer apartado nos pide crear 5 valos y seleccionar 3 de ellos con la tecla SHIFT.
1. Seleccionamos los colores que queramos en el Panel Muestras o en el Panel Color,
hacemos clic en la Herramienta valo (que aparece agrupada con la herramienta
rectngulo) y dibujamos 5 valos.
2. Hacemos doble clic en el relleno del primer crculo (doble clic para seleccionar tanto el
Relleno como el borde).
3. Ahora pulsamos la tecla SHIFT y sin soltarla, hacemos doble clic en otros 2 crculos
cualesquiera.
Ahora hacemos lo mismo usando la Herramienta Seleccin (Flecha), como pide el
segundo apartado.
1. Hacemos clic en una zona del escenario que nos permita capturar 3 crculos.
2. Arrastramos el ratn hasta crear un rea que envuelva completamente a 3 de los 5
crculos.
3. Si quedara alguna parte del crculo fuera de la seleccin, basta con usar la tecla SHIFT
para aadirlo a la seleccin actual.
Ahora se nos pide seleccionar nicamente los bordes de 3 de ellos.
1. Hacemos clic en el borde del primer valo (si hiciramos 2 clics se seleccionaran todos
los bordes del mismo color que estn en contacto con el borde sobre el que hacemos
clic).

2. Mantenemos pulsada la tecla SHIFT y repetimos el proceso con 2 valos ms.

Nota: Si en vez de valos hubieran sido rectngulos, hubiera hecho falta hacer 2 clics en el
borde de cada rectngulo para que este quede totalmente seleccionado. Comprubalo tu
mismo.

Ejercicio 3: Alinear Objetos

Se nos pide dibujar 4 objetos y colocarlos en las esquinas.
1. Dibujamos los 4 objetos pedidos, por ejemplo, 4 rectngulos.
2. Abrimos el Panel Alinear. desde el men Ventana Alinear.
3. Hacemos clic en Alinear en escenario para que las distribuciones de los objetos se
hagan en funcin del tamao del fotograma.
4. Seleccionamos el primer objeto y hacemos clic en
extremos izquierdo de la pelcula.

para alinear el objeto en el

5. Hacemos clic en
para situarlo en el borde superior de la pelcula. Como el objeto
est en el extremo superior izquierdo, est en la esquina superior izquierda.
6. Para alinear el segundo objeto en la esquina superior derecha hacemos clic en

.
7. Para alinear el tercer objeto en la esquina inferior izquierda hacemos clic en

8. Para alinear el cuarto objeto en la esquina inferior derecha hacemos clic en

Ejercicio 4: Grupos
La primera parte del ejercicio nos pide Agrupar un conjunto de elementos (que ya
tenemos).
1. Los seleccionamos todos del modo que prefiramos.
2. Hacemos clic en el Men Modificar Agrupar
La segunda parte del ejercicio nos pide Desagrupar el conjunto de elementos que
acabamos de agrupar.
1. Seleccionamos el Grupo haciendo clic en l.
2. Hacemos clic en el Men Modificar Desagrupar
Prueba evaluativa de la unidad 6
1. Todos los objetos tienen, en principio, borde y relleno.
a) Verdadero
b) Falso

2. Cuando seleccionamos un relleno, ste adquiere una textura para indicar que est
seleccionado.

a) Verdadero
b) Falso

3. No existe ningn panel en Flash para alinear objetos, hay que hacerlo "a mano".
a) Verdadero
b) Falso

4. Un grupo es un conjunto de objetos con propiedades comunes.

a) Verdadero
b) Falso

5. Para seleccionar un borde, debemos hacer doble clic sobre l, de lo contrario, no lo

seleccionaremos.
a) Verdadero
b) Falso

6. Para seleccionar un relleno, haremos doble clic sobre l.

a) Verdadero
b) Falso

7. Con la Herramienta Seleccin podemos seleccionar reas de cualquier forma y tamao (y

los objetos que se encuentren en ellas).
a) Verdadero
b) Falso

8. Si hacemos clic en la Lnea de Tiempo, se seleccionan todos los objetos existentes en el

fotograma seleccionado.
a) Verdadero
b) Falso

9. Cul de estas 3 afirmaciones es correcta?.

a) La tecla SHIFT selecciona objetos nicos en la pelcula.
b) Si seleccionamos un objeto y pulsamos la tecla SHIFT, este objeto queda

agrupado con todos los contiguos.

c) Si seleccionamos un objeto y pulsamos la tecla SHIFT , podremos aadir ms

objetos a nuestra seleccin actual.

10. Cul de las siguientes afirmaciones es falsa?.
a) Los Grupos permiten tratar a todos los objetos que los forman como a uno slo.
b) Los objetos agrupados pierden cualquier propiedad que tuvieran antes de

quedar agrupados.
c) Agrupar objetos sirve, por ejemplo, para mover varios objetos de una sla vez

manteniendo la distancia entre ellos.

11. El Panel Informacin muestra informacin acerca de los objetos que tenemos
seleccionados.
a) Verdadero
b) Falso

12. La opcin Alinear en escenario del Panel Alinear no tiene importancia, pues se usa para
centrar el objeto seleccionado en el escenario.
a) Verdadero
b) Falso

13. El Panel Informacin muestra, entre otros datos, la anchura, la altura o las coordenadas
del objeto seleccionado.
a) Verdadero
b) Falso

14. En Flash es posible colocar los objetos en lugares determinados, segn la referencia del
escenario o la de otros objetos.
a) Verdadero

b) Falso

Unidad 7. Las capas (I)

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

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

Otra razn para separar los objetos en capas, es que Flash nos obliga a colocar cada
animacin distinta en una capa. De lo contrario, todos los objetos que se encuentren en
dicha capa formarn parte de la animacin. Si queremos que un objeto no forme parte de una
animacin, deberemos quitarlo de la capa en la que se produce dicha animacin.
Siguiendo con el ejemplo del portero, si quisiramos crear un movimiento que haga que el
portero se desplace hacia un lado no hay ningn inconveniente, pero si la portera estuviera
en la misma capa que el portero, entonces ambos objetos se moveran hacia dicho lado, con
lo que resultara imposible que slo se moviera el portero. La solucin es separar los objetos
en 2 capas, como ya hemos hecho.

Las capas adems, tienen otras utilidades, nos permiten ordenar nuestra pelcula de forma
lgica, y nos ayudan en la edicin de dibujos (evitando que se "fundan" en uno slo, o
bloqueando el resto de capas de modo que slo podamos seleccionar la capa que nos
interese).

Otro motivo es para organizar mejor nuestro contenido. Igual que crebamos una capa
para los elementos de audio, crearemos capas para otros elementos, como el cdigo
ActionScript.

Unidad 7. Las capas (II)

7.2. Trabajar con capas

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

Nueva capa

: Como su nombre indica, sirve para Insertar una nueva capa en la escena

actual. Crea capas normales (en el siguiente punto se vern los distintos tipos de capas).
Crear carpeta

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

Unidad 7. Las capas (III)

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.

Unidad 7. Las capas (IV)

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

Capas normales

: Son las capas por defecto de Flash y tienen todas las propiedades

descritas en los puntos anteriores. Son las ms usadas y se emplean para todo, colocar
objetos, sonidos, acciones, ayudas...
Capas animacin movimiento

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

Podis poner a prueba vuestros conocimientos realizando:

Ejercicios unidad 7: Las capas

Ejercicio 1: Orden de Capas
1. Abre el archivo capas.fla que encontrars en la carpeta ejercicios del curso.
2. Modifica el orden de las capas para que se muestre como el siguiente dibujo:

Ejercicio 2: Planeta Saturno (II)

1. Abre un archivo nuevo e intenta reproducir el planeta Saturno (como hicimos en los
primeros temas).

2. En este caso debers utilizar capas de tipo Mscara.

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

Ayuda ejercicios unidad 7: Las capas

Ejercicio 1: Orden de Capas
1. Abre el archivo capas.fla que encontrars en la carpeta de ejercicios.
2. Haz clic en la capa Texto para seleccionarla.
3. Arrstrala hasta tenerla en la posicin superior (por encima de la capa Forma2).
4. Haz clic en la capa Forma que ahora se encuentra en la parte inferior para
seleccionarla.
5. Arrstrala hasta tenerla en la posicin superior (ahora por encima de la capa Texto).
Observa que la capa Texto es visible porque la pintura de relleno de la capa Forma tiene el
valor alfa al 50%.

Ejercicio 2: Planeta Saturno (II)

Como siempre, partimos de un nuevo archivo ActionScript 3.
1. Crea tres capas utilizando el botn

que encontrars en la lnea de tiempo.

2. Haz doble clic sobre el nombre de la capa que se encuentre ms abajo. Cmbialo por
Planeta.
3. Haz doble clic sobre el smbolo
Mscara y dale el tipo Mscara.

de la que se encuentra en la parte superior. Llmala

4. Finalmente haz doble clic sobre el smbolo

de la capa que se encuentra en medio.
Llmala
Aros
y
dale
el
tipo
con
Mscara.
En estos momentos debers tener algo como esto:

5. Selecciona la capa Planeta y dibuja un crculo (puedes aplicarle un relleno degradado y

quitarle el borde).

6. Selecciona la capa Aros y dibuja un crculo perfecto, rellenndolo con un degradado con
varias paradas (profundizaremos en los degradados ms adelante).
7. Selecciona el crculo que har de aro, y con la herramienta Transformacin libre
(debajo de las flechas), dale la forma deseada.
8. Utiliza el panel Alinear para centrar el planeta y el aro vertical y horizontalmente, y
queden perfectamente alineados.
9. Ahora selecciona la capa Mscara y con la herramienta pincel pinta sobre el Escenario
para tapar la forma ovalada de los aros de modo que slo pintes lo que quieras que se
muestre. Es decir, bastara con no pintar la parte que quedara detrs del planeta.
Aqu puedes ver un ejemplo de cmo quedara:

El planeta est en gris, los aros en rojo y la mscara en verde.

10. Ya casi lo tenemos, podemos mejorar el dibujo seleccionndolo todo (clic en la esquina
superior izquierda y sin soltar hasta la esquina inferior derecha) y seleccionando la
herramienta Transformacin libre para rotar el dibujo en su totalidad unos grados hacia
la izquierda.
11. Para probar el efecto de la mscara pulsa las teclas Ctrl + Enter en tu teclado.
Prueba evaluativa Unidad 7
1. El objetivo principal de las capas es aislar los objetos que contenga del resto de la
pelcula para conseguir independencia frente a estos.
a) Verdadero
b) Falso

2. Los objetos creados en una capa no pueden moverse a otra, pues cada capa est
ntimamente ligada a sus objetos.
a) Verdadero
b) Falso

3. Si activamos la opcin Mostrar contornos de una capa, podremos ver los bordes de todos
los objetos de dicha capa como si fuesen 3 veces ms grandes, ayudndonos a
distinguirlos entre el resto de capas (suponiendo que dicha opcin est inicialmente
desactivada).
a) Verdadero
b) Falso

4. Si activamos la opcin Bloquear capas de una capa, se nos garantiza que ningn objeto
de los que estn situados en dicha capa podr sufrir alteracin alguna (suponiendo que
dicha opcin est inicialmente desactivada).
a) Verdadero
b) Falso

5. Cmo deberamos organizar las capas de nuestra pelcula si queremos que dos objetos
se muevan sincronizadamente realizando el mismo movimiento?
a) Separando los objetos en dos capas diferentes.
b) Situndolos en la misma capa conseguiramos nuestro propsito de manera

rpida y eficaz.
c) Ambas respuestas son correctas.
d) Ninguna de las anteriores.

6. Qu sucedera si creamos una capa gua, pero ninguna capa guiada asociada a la misma.
a) Que no habra ningn problema, pues una misma capa puede servir como gua

para diversas capas guiadas.

b) Que la capa Gua no tendra ningn efecto ni se vera durante la animacin.
c) Que no podra realizarse, pues una capa slo puede estar guiada por una Gua

en cada instante de tiempo.

7. Si tenemos una capa A que es mscara de otra capa B, entonces la capa B queda
enmascarada por la capa A ... Son visibles todos los objetos de la capa B?
a) Si.
b) No.

8. Qu sucedera si quisiramos asociar una capa gua con varias capas guiadas
a) Que no habra ningn problema, pues una misma capa puede servir como gua

para diversas capas guiadas.

b) Que la capa Gua no tendra ningn efecto ni se vera durante la animacin.
c) Que no podra realizarse, pues una capa slo puede estar guiada por una Gua

en cada instante de tiempo.

9. Qu sucedera si quisiramos asociar a una capa guiada varias capas gua.
a) Que no habra ningn problema, pues una misma capa puede servir como gua

para diversas capas guiadas.

b) Que la capa Gua no tendra ningn efecto ni se vera durante la animacin.

c) Que no podra realizarse, pues una capa slo puede estar guiada por una Gua

en cada instante de tiempo.

10. Cmo deberamos organizar las capas de nuestra pelcula si queremos que dos objetos
presenten animaciones diferentes.
a) Situndolos en la misma capa conseguiramos nuestro propsito de manera

rpida y eficaz.
b) Si las animaciones deben producirse en instantes de tiempo comunes, sera

necesaria separar los objetos en dos capas diferentes. Si las animaciones pueden producirse
en instantes de tiempo disjuntos (que no coincidan en ningn instante) entonces podran estar
ambos objetos en la misma capa.
c) Deberamos separar los dos objetos en capas diferentes, pues de lo contrario

sera imposible que los objetos realizasen movimientos distintos durante los mismos instantes
de tiempo. Para sincronizar los movimientos podramos convertir un objeto en un grfico o en
un clip de pelcula, en funcin de nuestras necesidades

Unidad 8. Smbolos (I)

8.1. Qu son los smbolos
Los Smbolos provienen de objetos que hemos creado utilizando las herramientas que nos
proporciona Flash CS5.
Estos objetos al ser transformados en smbolos, son incluidos en una biblioteca en el
momento en que son creados, lo que permite que sean utilizados en varias ocasiones
(instancias), ya sea en la misma o en otra pelcula. Los smbolos nos resultarn
fundamentales a la hora de crear nuestras animaciones.

8.2. Cmo crear un smbolo

La accin de crear un nuevo smbolo es una de las ms usadas en Flash ya que es uno de
los primeros pasos para crear una animacin, como veremos ms adelante.
El procedimiento es el siguiente:
1. Seleccionamos el o los objetos que queramos convertir en un smbolo. Lo ms habitual
es partir de una forma.
2. Abrimos a la ventana Convertir en smbolo, accediendo al men Insertar Nuevo
Smbolo, desde el men contextual eligiendo Convertir en smbolo, o directamente
con las teclas Ctrl + F8 o F8.
3. Una vez hecho esto nos aparecer una ventana como la mostrada en la imagen.
Introducimos el nombre del smbolo que vamos a crear, y que nos permitir

identificarlo en la biblioteca, lo que se har imprescindible cuando tengamos muchos

smbolos.

4. Slo nos queda seleccionar el tipo de smbolo (desplegable Tipo) al que queremos
convertir nuestro objeto. Podemos elegir entre Clip de Pelcula, Botn y Grfico. Sus
caractersticas y las diferencias entre ellos las veremos en temas posteriores. Lo ms
habitual es Clips de pelcula para los objetos que queremos mostrar en el escenario, y
Botn si queremos que acte como tal.
5. Bastar con pulsar Aceptar para tener nuestro smbolo creado.

Para practicar estas operaciones te aconsejamos realizar Ejercicio Crear un smbolo.

Unidad 8. Ejercicio: Crear un smbolo

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

Ejercicio paso a paso

1. Abre el archivo trabajo.fla con el que venimos probando cosas a lo largo del curso.
2. Seleccionamos el valo haciendo doble clic sobre l.
3. Abrimos el men
Se
desplegar

Insertar
una

Nuevo
ventana

Smbolo... de
como
la

la

barra de
de
la

mens.
figura.

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

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

Unidad 8. Smbolos (III)

8.5. Modificar una instancia

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

8.6. Panel propiedades de instancia

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

Nombre y su icono correspondiente: El nombre de la instancia es muy importante,

pues permite identificarla durante la pelcula, y veremos ms adelante que resulta
imprescindible para acceder mediante ActionScript. El nombre, se introduce en el
recuadro donde pone por defecto <Nombre de instancia>, y debe de ser nico. El icono
asociado nos permite saber qu tipo de smbolo es de un vistazo rpido.

Tipo de la instancia. Por defecto se nos muestra el tipo al que perteneca el smbolo
original pero nosotros podemos cambiarlo para que cambie su comportamiento, aunque
pueda seguir manteniendo su estructura inicial (en la imagen es Botn).
Smbolo de la Instancia seleccionada (Instancia de:). Esta opcin nos muestra el
smbolo raz del que proviene la instancia que estamos modificando.
Intercambiar: Esta opcin merece especial atencin, pues es muy til y nos ahorrar
mucho trabajo cuando sea necesaria emplearla. Su funcin consiste en cambiar el
smbolo de la instancia por cualquier otro que tengamos en nuestra Biblioteca, por lo que
la instancia tomar el aspecto del nuevo smbolo. Puede parecer simple, pero durante el
desarrollo de un trabajo profesional rpidamente surge la necesidad de probar
situaciones y los diseos grficos definitivos no suelen estar disponibles hasta bien
avanzado
el
proyecto.
Gracias a esta opcin podemos trabajar tranquilamente con un "boceto" y sustituirlo de
un modo efectivo (el nuevo smbolo hereda las propiedades del antiguo smbolo, incluido
el nombre de instancia, las acciones que le afectarn, efectos grficos etc...) cuando
llegue
el
momento.
En la imagen se puede observar el panel Intercambiar Smbolo.

Este panel adems, incorpora el botn Duplicar Smbolo

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

Unidad 8. Smbolos (IV)

8.7. Efectos sobre instancias

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

A continuacin mostraremos los tipos de efectos. Para ello partiremos de la siguiente

imagen original:

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

Efecto Brillo del 50 %

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

Efecto Tinta del 50 % con el color verde (0 255 0)

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

Efecto Alfa del 65 % sobre el pez naranja

Avanzado. Aqu podemos aplicar todos los efectos anteriores al mismo tiempo de
manera ms precisa, con la ventaja de que podemos ponerle un poco de cada uno, dando
lugar a efectos de gran vistosidad.

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

Ejercicios unidad 8: Smbolos

Ejercicio 1: Crear Smbolo
1. Crea una pelcula con 1 fotograma.
2. Dibuja un crculo perfecto.
3. Convirtelo a smbolo de tipo Clip de pelcula.
4. Comprueba que est disponible en la Biblioteca.

Ejercicio 2: Insertar Instancia

1. Crea una nueva pelcula.

2. Inserta el Grfico de un botn cualquiera de las Bibliotecas comunes de Flash CS5.

3. Modifica su tamao.
4. Vuelve a realizar el paso 2 y comprueba que el botn se inserta en su tamao original.

Ejercicio 3: Duplicar Instancia

1. Sobre el ejercicio anterior, duplica la instancia del botn que has cambiado de tamao.
2. Desde esa instancia, suplica el smbolo.
3. Comprueba que se ha duplicado en la Biblioteca.

Ejercicio 4: Efectos sobre Instancias

1. Teniendo el botn ampliado del ejercicio 2 en el escenario, inserta el duplicado que
hemos creado de tal forma que se superpongan parcialmente.
2. Dale al botn que est tapando al otro un efecto Alfa del 40%.
3. Comprueba que ahora podemos ver los dos claramente.

Ayuda ejercicios unidad 8: Smbolos

Ejercicio 1: Crear Smbolo
1. Crea una pelcula con 1 fotograma con Archivo Nuevo, eligiendo archivo
ActionScript 3.
2. Para que el crculo no salga ovalado, selecciona la herramienta valo y mientras lo
dibujas, mantn pulsada la tecla Shift.
3. Accede a Insertar Nuevo Smbolo... o bien pulsa F8.
4. Accede a Ventana Biblioteca y busca el nombre que le diste al crearlo.

Ejercicio 2: Insertar Instancia

1. Selecciona la opcin Archivo Nuevo, eligiendo archivo ActionScript 3.
2. Ve a Ventana Bibliotecas Comunes Botones y selecciona un botn cualquiera
(para expandir las carpetas, haz clic con el botn derecho sobre una de ellas y
selecciona "Expandir Carpeta"). Arrastra el botn elegido hasta el escenario
3. Selecciona el smbolo, luego la herramienta Transformacin libre y arrastra alguno de
los puntos que aparecern alrededor del botn.
4. Debes ver que has modificado slo una instancia del smbolo, y no el smbolo en s.

Ejercicio 3: Duplicar Instancia

1. Selecciona la instancia a duplicar, y en el men Edicin elige Duplicar. Aparecer una
copia en el escenario.
2. Haz clic con el botn derecho sobre la instancia que quieras duplicar y selecciona
Duplicar Smbolo.
3. Accede a Ventana Biblioteca y busca el nombre que le diste al duplicarlo.

Ejercicio 4: Efectos sobre Instancias

1. Ve a Ventana Biblioteca para abrir la Biblioteca y busca el nombre del duplicado.

Arrstralo al escenario.
2. Abre el Panel Propiedades y selecciona en la pestaa Color Alfa e introduce en la
casilla donde pone 100% un 40%
3. Como el de arriba tiene un efecto Alfa (Transparencia) permite que el botn situado bajo
l se vea.
Evaluacin unidad 8
1. Darle un nombre concreto a los smbolos no es importante.
a) Verdadero
b) Falso

2. Las Bibliotecas Comunes de Flash aparecen desde la primera vez que abrimos el
programa.
a) Verdadero
b) Falso

3. Para insertar un smbolo de biblioteca en una pelcula abrimos la biblioteca y hacemos

doble clic sobre el smbolo.
a) Verdadero
b) Falso

4. Para cambiar el tamao de un smbolo, lo insertamos en nuestro documento y utilizamos

la herramienta "escalar".
a) Verdadero
b) Falso

5. Cul es cierta?
a) La Biblioteca nos permite guardar copias de todas las instancias que tengamos,

lo que nos ayuda en la organizacin de nuestra pelcula.

b) Con el panel Propiedades podemos modificar internamente la instancia

seleccionada.
c) Con el panel Propiedades podemos modificar externamente la instancia

seleccionada.
6. El efecto Alfa permite ver objetos situados en capas inferiores cuando su valor es distinto
del 100%.
a) Verdadero

b) Falso

7. Por razones de copyright no podemos utilizar ms de un smbolo de las bibliotecas

comunes por pelcula.
a) Verdadero
b) Falso

8. Todos los smbolos que incluyamos o podamos encontrar en nuestras pelculas sern de
estos tres tipos: Clip de pelcula, Grfico y Botn.
a) Verdadero
b) Falso

9. El efecto Tinta permite modificar uno a uno los colores presentes en la instancia.
a) Verdadero
b) Falso

10. El efecto Avanzado combina varios de los efectos sobre instancias que ofrece Flash.
a) Verdadero
b) Falso

Unidad 9. Grficos (I)

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

9.2. Tipos de grficos

Los grficos pueden ser:

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

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

Unidad 9. Bsico: Grficos vectoriales y mapas de bits

Cmo representar un grfico?

Probablemente hayas visto multitud de grficos con muchas extensiones distintas cada
uno: JPG, GIF, FLA, SWF, PNG ... Las extensiones nos indican el tipo de archivo o formato en
que se guard el grfico.
Existen muchsimos programas en el mercado que permiten visualizar, crear y modificar
grficos, y cada fabricante decide representar los grficos como mejor le conviene, o
simplemente da una extensin determinada a los grficos creados con su programa para
restringir su uso a programas de la misma compaa.

Pese a todo, la multitud de formatos en que se puede encontrar almacenado un grfico, se

pueden englobar en dos tipos bsicos: los grficos vectoriales y los mapas de bits o bitmaps.

Diferencia entre Grfico Vectorial y Mapa de Bits

La principal diferencia entre los Bitmaps y los Grficos Vectoriales est en su tamao. Los
grficos vectoriales tienen una ventaja de gran importancia: ocupan mucho menos espacio en
disco o en memoria y, por tanto, necesitan mucho menos tiempo para descargarlos desde una
aplicacin o pgina web.
La explicacin de este hecho se puede ver en la forma en la que estn creados y
representados cada uno de los dos tipos de grficos:
Los bitmaps o mapas de bits estn formados por grandes "rectngulos de datos"
(matrices) que contienen informacin sobre cada uno de los puntos (pixels) por los que
est formado el grfico, y que se corresponde aproximadamente con la percepcin que
nosotros vemos de ellos en nuestra pantalla.
A simple vista no apreciamos los pixels debido al pequeo tamao que tienen en general,
pero si ampliamos mucho un Bitmap los podemos observar como cuadrados de color, y
apreciamos un aspecto dentado en las curvas.

La informacin que almacenan estas matrices son las caractersticas de cada pixel. Las
caractersticas que se almacenan sobre los pixels son sus coordenadas dentro del grfico y
su color.
As, nuestro PC procesa esa informacin, y genera la imagen en el monitor u otro
dispositivo de salida, indicando qu color se debe poner en cada coordenada de la imagen.
Los pixels (cuadraditos), o unidades ms pequeas que forman una imagen, no son
apreciables a simple vista en una imagen de calidad, pero s con una ampliacin.

Los pixels no tienen siempre el mismo tamao ni se tienen porque encontrar en mismo
nmero en imgenes de las mismas dimensiones. La calidad de una imagen viene dada por
nmero de pixels en que dividamos una imagen (normalmente esto se mide en puntos por
pulgada o dpi, de hecho una cmara digital tiene mayor resolucin cuantos ms megapxel
puede capturar) y el nmero de colores que puedan tener y, evidentemente, ocuparn ms
espacio en disco en la medida que dicha calidad aumente. Como consecuencia de esto
aquellos grficos con ms calidad y nmero de pixels sern mucho ms costosos de
reproducir y transformar para nuestra aplicacin o reproductor grfico y ms lentos en la
descarga va web.
Entre los tipos de archivo de mapa de bits ms comunes tenemos: JPG, PCX, PNG, TIFF,
GIF, BMP, ...
Podemos encontrar formatos comprimidos, como GIF , PNG o JPG o no comprimidos,
como BMP.
Como hemos visto, para generar un grfico de mapa de bits, nuestro PC tiene que
almacenar y trabajar con una gran cantidad de informacin por la necesidad de mantener los
datos de cada pixel.
Sin embargo, para representar una imagen vectorial se considera que el grfico est
formado por un conjunto de vectores o lneas.
Esto es una gran ventaja, ya que una lnea, que en el caso de un bitmap estara compuesta
por muchos pixels, en una imagen vectorial solo se necesita almacenar informacin sobre su
principio, su final y su aspecto. Esto es as con las lneas y con cualquier figura ms compleja.
Por ejemplo, podramos representar un crculo simplemente guardando la informacin de su
centro y su radio, adems de indicar el color de contorno y el de fondo. Aqu reside el secreto
del reducido tamao de los grficos de este tipo.
Adems, si aumentamos el tamao de la imagen, slo hay que volver a generarla a partir
de sus coordenadas, lo que la mostrar perfectamente ntida por mucho que la aumentemos.

Cmo trabaja Flash?

Flash, aunque permite trabajar tambin con bitmaps, utiliza grficos vectoriales para
realizar sus animaciones. Esto permite que se generen animaciones de muy alta calidad y
dimensiones, reduciendo mucho su tiempo de carga cuando intentamos visualizarlas en
nuestro navegador web. Adems los ficheros Flash no necesitan ser descargados
completamente para visualizarse. En cuanto existe una informacin mnima suficiente el
fichero se puede mostrar mientras continua su descarga al mismo tiempo.

Unidad 9. Grficos (II)

9.3. Creando un grfico y comprobando sus propiedades
Como explicar tericamente las propiedades de un grfico resulta un tanto confuso, vamos
a ver de manera prctica lo que queremos explicar. Vamos a crear un grfico en Flash y a

comprobar las propiedades que hemos comentado en el primer apartado del tema. Para ello,
abre una nueva pelcula Flash (Archivo Nuevo, archivo ActionScript 3).
Ahora tenemos que crear el objeto que queremos convertir en un smbolo Grfico.
Dibujemos, por ejemplo, un valo en cualquier lugar del rea de trabajo con la herramienta
valo

de la barra de herramientas de dibujo y dmosle un color de relleno que ser lo

que despus animemos (Selecciona el fondo del valo y dale el color azul mediante la
herramienta Relleno de color.

).

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

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

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

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

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

Unidad 9. Grficos (III)

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

Unidad 9. Avanzado: Compatibilidad de archivos

Como vimos en la introduccin del curso, Adobe ha hecho grandes esfuerzos para integrar
Flash en el mismo paquete donde se incluyen el resto de programas que ao tras ao vienen
ofreciendo. Esto ha resultado en una compatibilidad casi perfecta entre los archivos de
todos los paquetes que integran la suite.
De esta forma ahora es muy sencillo incluir, por ejemplo, archivos de Photoshop en un
proyecto de Flash.
Para ello simplemente deberemos hacer clic en el men Archivo y seleccionar la opcin
Importar Importar a biblioteca.

Como hemos visto en el apartado anterior bastar con seleccionar el archivo PSD que
queremos aadir a la biblioteca. Una vez hecho se abrir el siguiente cuadro de dilogo:

Aqu Flash nos proporciona diferentes opciones.

Como puedes ver en la imagen, se muestra el archivo desglosado en las diferentes capas
que componen el archivo. Seleccionando una de ellas podremos ver las diferentes opciones
de importacin para cada una de ellas.
Si pulssemos Aceptar directamente aadiramos a nuestro proyecto las capas una a una
como mapa de bits. Pero podemos configurar de un modo ms preciso la forma en la que se
tratar cada capa. Para ello selecciona una de las capas para ver sus opciones.

Observa que es posible importar una capa como Imagen de mapa de bits con estilos de
capa editables. Esta opcin nos ser muy til si la capa en cuestin tiene estilos creados en
Photoshop y queremos que sean importados de forma separada para que mas tarde puedan
ser editados.
Tambin podremos decidir el grado de compresin, es decir, la calidad con la que la capa
se aadir al proyecto. Ten en cuenta que a mayor calidad mayor ser el peso del archivo final
de Flash. Por lo que para conseguir una descarga rpida del archivo no deberemos abusar
demasiado de esta caracterstica.
Una vez terminado pulsamos Aceptar y el archivo PSD se mostrar en nuestra biblioteca.

Podemos arrastrar directamente el objeto terminado en .psd al escenario para insertar en

la pelcula el proyecto completo de Photoshop como un mapa de bits. De esta forma la
imagen ser completamente editable, pudiendo entrar en cada una de las capas haciendo
doble clic sobre ella.
Aunque quizs una de las caractersticas ms interesantes de este mtodo sea la
posibilidad de poder acceder una a una las capas (ahora tratadas como objetos) para
editarlas por separado.
Del mismo modo tambin ser posible aadir nicamente una de ellas simplemente
arrastrndola sobre el escenario. De esta forma hemos conseguido importar un archivo de
Photoshop y trabajar con las distintas capas por separado gracias a la integracin de Flash en
la suite de Adobe.

Unidad 9. Grficos (IV)

9.6. Exportar un objeto Flash como mapa de bits

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

9.7. Publicar como un mapa de bits

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

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

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

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

Unidad 9. Grficos (V)

9.8. Crear un GIF animado con Flash

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

Y configuramos algunos parmetros pulsando en su pestaa:

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

Ejercicios unidad 9: Grficos

Ejercicio 1: Exportar a Grfico animado

1. Abre el archivo exportar.fla que se encuentra en la carpeta de ejercicios del curso.
2. Crea un archivo GIF transparente para que muestre la animacin.
3. Deber quedarte algo as:

Observa que esta animacin se trata de una imagen, no de un archivo Flash.

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

Ayuda ejercicios unidad 9: Grficos

Ejercicio 1: Exportar a Grfico animado
1. Abre el archivo exportar.fla de la carpeta ejercicios.
2. Abre el men Archivo finalmente Configuracin de publicacin. Se abrir un cuadro
de dilogo.
3. Entre todas las opciones de publicacin, marca nicamente imagen GIF.
4. Pulsa en la pestaa GIF. Se mostrarn sus opciones:

5. Maraca la opcin re reproduccin Animada.

6. Asegrate de que est marcada la opcin Repetir indefinidamente.
7. Selecciona la casilla Transparente para que el fondo de la pelcula quede transparente.
El resto de las opciones puedes dejarlas como estn.
8. Pulsa el botn Publicar y lo tendrs listo.
9. Ahora, podrs encontrar el GIF en la carpeta de ejercicios, o en la carpeta donde tengas
el archivo exportar.fla.
Evaluacin Unidad 9
1. Los grficos poseen lnea de tiempos propia.
a) Verdadero
b) Falso

2. Los grficos pueden ser estticos o dinmicos.

a) Verdadero
b) Falso

3. La lnea de tiempos de un grfico es independiente de la lnea de tiempos de la pelcula.

a) Verdadero

b) Falso

4. Flash admite importacin de archivos vectoriales.

a) Verdadero
b) Falso

5. Cul de estas 3 afirmaciones es correcta?.

a) La opcin "Importar" determina lo importante que es un grfico dentro de nuestra

pelcula.
b) Mediante la opcin "Exportar" podemos publicar imgenes Flash directamente

en la web.
c) Flash puede incluir en sus pelculas imgenes creadas con otros programas,

mediante la utilidad "Importacin".

6. Los grficos vectoriales que importemos podremos modificarlos usando Flash CS5, pues
este tipo de imgenes est soportado.
a) Verdadero
b) Falso

7. En un grfico no es posible incluir sonidos, controles ni otros smbolos grficos.

a) Verdadero
b) Falso

8. Es indiferente el uso de grficos y clips de pelcula, pues sus funciones son muy
parecidas.
a) Verdadero
b) Falso

9. Flash permite publicar imgenes como tales o como animaciones.

a) Verdadero
b) Falso

10. La opcin exportar es prcticamente equivalente a la opcin Publicar y pueden usarse

indistintamente en casi todas las ocasiones.
a) Verdadero

b) Falso

Unidad 10. Clips de Pelcula (I)

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

10.2. Comprobar las propiedades de un Clip

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

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

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

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

Unidad 10. Clips de Pelcula (II)

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

Observa cmo hacerlo

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

10.4. Importar y exportar MovieClips de la Biblioteca

Como para todos los smbolos los Clips se almacenan en la biblioteca del documento
cuando son creados. Esto es muy importante en muchos casos ya que habitualmente los clips
son muy reutilizables. Para importar clips de otra pelcula debemos abrir primero la biblioteca
en la que est contenido.

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

Aparecer la biblioteca con la lista de los smbolos correspondientes a los grficos, botones
y clips del documento en cuestin.
Es importante destacar que cuando insertemos un clip de una biblioteca, se insertarn a su
vez todos los smbolos que contenga, incluidos los clips.
Existe otra forma mucho ms cmoda: si tenemos dos documentos abiertos, podemos
arrastrar los elementos directamente de un escenario a otro.
Para ver cmo exportar e importar una pelcula completa como un slo movie clip y poder
usar esto para el desarrollo en programas como Swish, revisa nuestro tema avanzado: Otros
usos de los Movie Clips

Ejercicios unidad 10: Clips de Pelcula

Ejercicio 1: Crear un Clip a modo de Cuenta Atrs
1. Crea una pelcula con slo 1 fotograma.
2. Escribe un nmero cualquiera, por ejemplo un 3.
3. Convirtelo a smbolo de tipo Clip.
4. Crea una animacin fotograma a fotograma en la que se vea una cuenta atrs hasta el
cero.
5. Comprueba que pese a tener la pelcula original un frame y el clip cinco, la animacin se
ve completamente.
6. Gurdalo como cuenta.fla

Ejercicio 2: Crear un clip vaco y editarlo despus

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

Ejercicio 3: Exportar una pelcula con proteccin

1. Partimos del Clip del ejercicio 1, brelo.
2. Exporta la pelcula swf de forma que nadie la pueda importar despus.
Si no tienes muy claro cmo realizarlo, Aqu te ayudamos.

Ayuda ejercicios unidad 10: Clips de Pelcula

Ejercicio 1: Crear un Clip a modo de Cuenta Atrs
1. Crea una pelcula con 1 fotograma con Archivo Nuevo, eligiendo un archivo
ActionScript 3.
2. Accede a Insertar Nuevo Smbolo... o bien pulsa las teclas Control + F8.
3. Mediante la Herramienta Texto marcada en la barra de herramientas con una T escribe
el 3.
4. Pulsa F6 para crear tres fotogramas claves en los fotogramas 2, 3 y 4. Luego borra el 3
que aparecer en ellos y escribe un 2, un 1 y un 0 en su lugar.
5. Puedes reproducir la pelcula con Control + Enter.
6. Elige men Archivo Guardar Como... y dale el nombre cuenta.fla.

Ejercicio 2: Crear vaco y editarlo despus

1. Crea un nuevo archivo ActionScript 3, desde el men Archivo Nuevo.
2. Accede a Insertar Nuevo Smbolo o bien pulsa Control + F8
3. Pulsa en el icono de la escena principal, en este caso ser Escena 1, que est cerca de
la lnea de tiempo..
4. Abre la Biblioteca del documento mediante Ventana Biblioteca, pulsa con el botn
derecho sobre el nombre del clip y selecciona la opcin Editar del men emergente.

Ejercicio 3: Exportar una pelcula con proteccin

1. Abre mediante Archivo Abrir y selecciona el archivo cuenta.fla.
2. Exporta con Archivo Exportar Exportar Pelcula, selecciona el tipo de archivo
SWF y dale un nombre. En la ventana que aparece marca la opcin Proteger frente a
Importacin, y en el campo Contrasea escribe la clave que quieras.

Prueba de la Unida 10
. Un clip de pelcula puede contener una imagen esttica.

a) Verdadero
b) Falso

2. Un clip de pelcula puede contener una animacin.

a) Verdadero
b) Falso

3. Un clip de pelcula puede hacer las funciones de un Grfico.

a) Verdadero
b) Falso

4. Los Clips dan ms claridad a pelculas complejas.

a) Verdadero
b) Falso

5. Cul de estas afirmaciones es cierta?

a) Es imposible importar un archivo SWF que no es nuestro y usarlo como si fuera

un clip propio.
b) Si importamos un archivo SWF ajeno, la animacin se importa como una

secuencia, toda ella de fotogramas clave.

c) Es imposible impedir que alguien importe un clip guardado como SWF y que

hemos distribuido libremente.

6. La lnea temporal no est ligada a la lnea de tiempos del documento.
a) Verdadero
b) Falso

7. Un clip de pelcula puede contener cualquier otro tipo de smbolo.

a) Verdadero
b) Falso

8. Es posible proteger con contraseas los clips de pelcula para que no puedan ser
importados y utilizados por terceros.
a) Verdadero

b) Falso

9. Los smbolos de tipo Clip de Pelcula tienen una lnea de tiempos propia ligada a la de la
escena principal.
a) Verdadero
b) Falso

10. La pelcula principal es un MovieClip.

a) Verdadero
b) Falso

Unidad 11. Botones (I)

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

Reposo. Aspecto por defecto del botn, es decir, cuando el puntero del ratn no est
situado sobre l.
Sobre. Aspecto del botn cuando situamos el puntero sobre l.
Presionado. Apariencia que deseamos tenga nuestro botn mientras lo mantengamos
pulsado.

Zona activa. Aqu debemos indicar el rea real en la que queremos que acte nuestro
botn. Esto es importante sobre todo en botones compuestos slo por texto como
veremos ms adelante.
Parece que la limitacin de fotogramas podra implicar una limitacin en la capacidad de
espectacularidad y utilidad de estos smbolos, pero no es as. Ten en cuenta que podemos
tener todas las capas que queramos.
Los botones pueden contener a su vez otros smbolos, como clips o grficos (tambin de
tipo Bitmap). La unin de las posibilidades de todos los smbolos pueden dotar a los botones
de efectos asombrosos.
Todo esto es lo referente a la apariencia del botn. Despus, tenemos que programar lo
que queremos que haga el botn, cmo queremos que afecte a la pelcula. Y esto lo haremos
con ActionScript.

Unidad 11. Botones (II)

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

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

presionado y zona activa) y pulsaremos F6 para crear un fotograma clave en cada uno de
ellos.

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

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

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

Unidad 11. Botones (III)

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.
Practica con el ejercicio paso a paso Crear un botn con relieve.

Unidad 11. Ejercicio: Crear un botn con relieve

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

Ejercicio paso a paso.

1. Dibujamos un rectngulo en el rea de trabajo.
2. Seleccionamos el fondo.
3. Cambiamos el color de fondo del rectngulo. Por ejemplo a gris.
4. Con la herramienta texto escribimos el texto aulaClic en el interior del rectngulo.

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

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

en

cada

uno

de

los

fotogramas

13. Seleccionamos el fotograma Presionado.

14. Modifiquemos ahora el borde inferior y el derecho del botn aplicndole el color blanco.
15. Finalmente seleccionemos los bordes superior e izquierdo y dmosle el color negro.
Respecto a los fotogramas Sobre y Zona activa, los dejaremos tal y como estn puesto que
no deseamos que haga nada mientras no pulsemos el botn y el rea de accin es la que
comprende nuestro rectngulo.

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

Unidad 11. Botones (IV)

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:

El contenido de esta pgina requiere una versin ms reciente de Adobe Flash

Player.

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.

En este video tutorial puedes ver cmo insertar un clip en un botn.

Unidad 11. Botones (V)

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.

Unidad 11. Botones (VI)

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

Donde miBoton ser el nombre de la instancia del botn.

A esta instancia, le indicamos que queremos que reaccione al clic del ratn
(MouseEvent.CLICK), ejecutando las acciones llamadas accionesMiBoton (podemos darle el
nombre que queremos).
accionesMiBoton contiene las acciones a realizar, y podemos verlo a continuacin. Solo
habra que cambiar el texto //acciones por las acciones a realizar.
Si tenemos varios botones, a cada uno lo referiremos por su nombre de instancia que es
nico. Tambin tenemos que dar un nombre nico a accionesMiBoton para cada uno, a no
ser que queramos que realicen la misma accin.
Ahora veamos algunas de las acciones ms comunes.
1) Abrir una pgina web. Con esto conseguiremos abrir una pgina cualquiera de internet
(o una pelcula Flash), lo que nos servir para irnos desplazando por webs que contengan
ms de una pgina, o permitir al usuario descargarse archivos entre otras cosas.
La forma ms sencilla de hacerlo es seleccionar el botn que queramos usar (en el
siguiente ejemplo, hemos llamado a la instancia btnVisitarAulaclic) y buscar la accin que

queremos en el panel Fragmentos de cdigo. En la carpeta Acciones hacemos doble clic

sobre Hacer clic para ir a pgina Web. Se generar un cdigo como el siguiente:
?
1
2
3 /* Hacer clic para ir a pgina Web
4 Al hacer clic en la instancia del smbolo especificado, la direccin
URL se carga en una nueva ventana del navegador.
5
Instrucciones:
6
1. Reemplace http://www.adobe.com por la direccin URL que desee.
7
Conserve las comillas ("").
8
*/
9
btnVisitarAulaclic.addEventListener(MouseEvent.CLICK,
1 fl_ClickToGoToWebPage);
0
function fl_ClickToGoToWebPage(event:MouseEvent):void
11
{
1
2 navigateToURL(new URLRequest("http://www.adobe.com"), "_blank");
1 }
3
1
4

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

normalmente en gris claro, no se ejecuta como tal, y solo sirve para indicar cosas al usuario.
En este caso, nos da explicaciones de cmo usar el cdigo generado.
Lo nico que hemos de hacer es reemplazar la url de ejemplo (www.adobe.com) por la de
la pgina a la que queramos que nos enve el botn.
La instruccin en ActionScript que nos permite hacerlo es navigateToURL(new
URLRequest("http://www.mipagina.es"), "_blank");. "http://www.mipagina.es"
se refiere a la pgina que queremos abrir, y "_blank" indica que se abrir en una pgina
nueva.

Unidad 11. Botones (VII)

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
btnPausar.addEventListener(MouseEvent.CLICK, fl_PausarReproduccion);
2
function fl_PausarReproduccion(event:MouseEvent):void
3
{
4
stop();
5 }
6 btnContinuar.addEventListener(MouseEvent.CLICK,
7 fl_ContinuarReproduccion);
8 function fl_ContinuarReproduccion(event:MouseEvent):void
9 {
1 play();
0 }
11
Tal cual lo hemos puesto, afectara a la pelcula principal. Si lo que queremos parar o
reproducir es un clip determinado, habra que escribirlo delante de la accin, separado por un
punto. Por ejemplo miClip.stop();.
Reconocemos que aunque ActionScript 3.0 es ms potente que la versin 2.0, puede
resultar mas liosa para usuarios sin conocimientos previos. Si quieres ver cmo seran estos
mismos ejemplos en ActionScript 2, te invitamos a echar un vistazo a esta pgina de nuestro
curso de Flash CS3.
En este videotutorial de introduccin a ActionScript 3 puedes ver cmo empezar a poner
cdigo en un botn.

11.7. Incluir sonido en un botn

Si nuestras pginas van a tener sonido, el sonido en los botones es una parte fundamental.
Podemos hacer, por ejemplo que se activen sonidos al pulsar un botn.
Para ello, simplemente debemos editar nuestro botn y seleccionar el fotograma
Presionado, e insertar el sonido. Como vimos en el tema correspondiente. Es este caso, el
tipo de sincronizacin ms conveniente suele ser Evento.

Ejercicios unidad 11: Botones

Ejercicio 1: Crear un Botn en forma de Pldora

1. Abre un documento nuevo

2. En el primer fotograma dibuja un objeto con forma de pldora como el de la derecha y

escribe "STOP" sobre l.
3. Convirtelo a smbolo de tipo Botn
4. Crea distintas apariencias para distintos estados
5. Gurdalo como stop.fla.

Ejercicio 2: Ajustar el rea Activa

1. Crea una nueva pelcula
2. Escribe el texto: "VmOnoS" respetando las maysculas y minsculas como se
muestran
3. Convirtelo a Botn que slo funcione al pasar por la "O" central

Ejercicio 3: Botn con Sonido

1. Partimos del Botn del ejercicio 1. brelo.
2. Haz que emita un sonido de la Biblioteca Comn de Sonidos al pasar el ratn por
encima de l.
3. Haz que emita otro sonido de la Biblioteca Comn de Sonidos distinto al pulsarlo.

Ejercicio 4: Detener una Pelcula

1. Abre el documento exportar_stop.fla. Lo encontrars en la carpeta de ejercicios.
2. En el primer fotograma tenemos un clip de pelcula que contiene una animacin que
dura ms de 1 fotograma.
3. Ahora inserta en el clip el botn del ejercicio 1 de manera que se vea a lo largo de toda
su reproduccin.
4. Haz que se detenga el Clip al pulsar el botn.
Si no tienes muy claro cmo realizarlo, Aqu te ayudamos.

Ayuda ejercicios unidad 11: Botones

Ejercicio 1: Crear un Botn en forma de Pldora

1. Crea el nuevo documento con con Archivo Nuevo, y elige ActionScript 3.0.

2. Para dibujar la forma de pldora dibuja primero un crculo perfecto (con la herramienta
valo y la tecla Shift). Brrale el borde.
3. Con la forma seleccionada, selecciona la herramienta Cubo de Pintura y elige un
degradado radial de tonos azules, colocando los marcadores como se muestra en la
imagen de la derecha.
4. Con el Cubo de pintura, haz clic y arrastra sobre la forma. Vers como te permite
regular la direccin del degradado. Puedes hacerlo tantas veces como sea necesario
hasta lograr el degradado deseado.
5. Ahora, vamos a crear la pldora. Fuera del crculo, dibuja dos lneas paralelas
(Herramienta Lnea y tecla Shift). Agrpalas (Ctrl + G).
6. Utilizando el panel alinear, centra horizontalmente el crculo y las lneas (fig. b).
7. Desagrupa las lneas (Ctrl + Shift + G) y deseleccinalas.
8. Ahora podrs seleccionar independientemente los lados de la esfera. Sepralos (fig. c).
Puedes hacerlo con las teclas Shift + derecha o Shift + izquierda.
9. Con la herramienta Transformacin libre, estira la seccin que estaba entre las lneas
hasta completar la figura (fig. d).
10. Borra

las

lneas

negras.

11. Selecciona la pldora, y convirtela en un botn, haciendo clic derecho y eligiendo

Convertir en smbolo... o bien pulsando F8. Elige el tipo Botn.
12. Haz doble clic sobre l para acceder a su lnea de tiempo.

13. Crea fotogramas clave los estados que quieras modificar pulsando F6 y modifcalos para
crear el efecto que prefieras.
14. Crea una nueva capa encima de sa, e introduce ah el texto. A no ser que quieras variar
el texto segn el estado.
15. Gurdalo, pulsando Archivo Guardar Como... y llmalo stop.

Ejercicio 2: Ajustar el rea Activa

1. Hazlo tambin con Archivo Nuevo, eligiendo archivo ActionScript 3.
2. Utilizando la Herramienta Texto (marcada en la barra de Herramientas con una T)
escribe el texto: VmOnoS.
3. Haz clic en la Herramienta Seleccin y selecciona el texto que acabas de crear.
4. Convirtelo en un botn mediante Modificar Convertir en Smbolo... o bien
pulsando F8, y eligiendo el tipo Botn.
5. Haz doble clic sobre l para editar su lnea de tiempo.
6. Selecciona el fotograma Zona Activa, dibuja un valo de tal forma que tape por
completo la "O" y tenga el mismo tamao y forma. Luego borra el texto.

Ejercicio 3: Botn con Sonido

1. Abre el archivo stop.fla, creado en el primer ejercicio.
2. Haz doble clic sobre el botn con forma de pldora.
3. Crea una nueva capa para los sonidos.
4. Haz clic en el men Ventana Bibliotecas comunes Sonidos.
5. Arrastra al escenario los sonidos que quieres emplear.
6. En la nueva capa, crea fotogramas clave en Sobre y Presionado.
7. Selecciona el fotograma Sobre de la nueva capa, y en el panel Propiedades, elige el
sonido correspondiente en Nombre dentro de Sonido. En Sinc. elige Evento.
8. Repite el paso anterior, pero en el fotograma Presionado.
9. Gurdalo y cirralo.

Ejercicio 4: Detener una Pelcula

1. Abre el archivo exportar_stop.fla, que encontrars en la carpeta de ejercicios.
2. En el men Archivo, selecciona Importar Abrir biblioteca externa, e importa el
archivo stop.fla creado en los primeros ejercicios.
3. Desde el men Modificar elige Documento para cambiar su tamao, y cambia la altura
a 350px.
4. Crea una nueva capa en la Lnea de tiempo.
5. Selecciona el primer fotograma de la nueva capa.
6. De la biblioteca de stop.fla, arrastra el botn al escenario para crear una instancia.
7. Selecciona el botn, y en el panel Propiedades, escribe botonStop como nombre de la
instancia.

8. Selecciona la estrella, y en el panel Propiedades, escribe estrella como nombre de la

instancia.
9. Organiza la estrella y el botn en el escenario.
10. Selecciona la instancia del botn, y abre el panel Fragmentos de cdigo.
11. En el panel, selecciona Controladores de eventos Evento MouseClick y haz doble
clic.
12. Se crear una nueva capa con el cdigo ActionScript. Modifcalo para que al hacer clic
en el botn se detenga la estrella:
?
1
botonStop.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler);
2 function fl_MouseClickHandler(event:MouseEvent):void
3{
4 estrella.stop();
5}
6
13. Prueba la pelcula (Ctrl + Intro) y comprueba que funciona.

Prueba evaluativa Unida 11

1. Crear un botn en Flash es ms complicado que crearlo en lenguajes como Javascript.
a) Verdadero
b) Falso

2. Es posible determinar en qu zona del botn queremos que sean aplicables las acciones.
a) Verdadero
b) Falso

3. Los botones pueden contener cualquier otro smbolo en su interior.

a) Verdadero
b) Falso

4. La lnea de tiempos de un botn slo puede tener una capa y cuatro fotogramas.
a) Verdadero
b) Falso

5. Un botn es capaz de controlar la reproduccin de toda una pelcula.

a) Verdadero
b) Falso

6. Cul de estas afirmaciones es cierta?

a) Para crear acciones en un botn, debemos insertar en cada botn el cdigo

desde el panel Fragmentos de cdigo.

b) Las acciones de una instancia las incluiremos en su fotograma clave, y las

editaremos desde el panel Acciones.

7. Podemos asociar acciones a un botn para que, por ejemplo, abra una ventana nueva y la
direccione a aulaclic.es.
a) Verdadero
b) Falso

8. Para asociar un comportamiento a un botn en un archivo de Flash ActionScript 3.0,

tenemos que...
a) Escribir las acciones a realizar en lenguaje ActionScript.
b) Elegir las acciones a realizar en el panel de Propiedades.

9. Si en un botn no definimos la Zona Activa el no reaccionar ante ninguna accin.

a) Verdadero
b) Falso

10. Los botones son la base de la interactividad de Flash.

a) Verdadero
b) Falso

Unidad 12. Animaciones de movimiento (I)

12.1. La animacin en Flash
Flash es un programa bsicamente orientado a la animacin, de ah la gran importancia de
este tema. No obstante, para ir creando animaciones cada vez ms complicadas se necesita,
sobre todo, mucha prctica, aparte de conocer bien las herramientas.
En este tema y los sucesivos mostraremos las tcnicas bsicas de animacin en Flash. La
unin de estas tcnicas ser la que nos permita crear las ms variadas y vistosas
animaciones.
En el tema de la animacin, Flash ofrece unas facilidades muy grandes, consiguiendo
efectos que normalmente requieren ciertos conocimientos y espacio de almacenamiento para
ser creados, como es el caso por ejemplo de los GIF animados o lenguajes de programacin
como JavaScript, de una manera muy sencilla, sin necesidad de excesivos conocimientos y
ocupando muy poco espacio en disco.

Aunque Flash ofrece tcnicas mejores, tambin se pueden crear animaciones a modo de
GIF animado. Se les denomina animaciones Fotograma a Fotograma. Estas son las
animaciones ms bsicas y conviene conocerlas. Para ello conviene visitar nuestro tema
bsico:

Animaciones Fotograma a Fotograma.

A continuacin veremos distintos tipos de animaciones que el creador de pelculas Flash

deber tomar como gua inicial. Cabe destacar que podremos aplicar varias de estas
animaciones colocndolas en distintas capas. Con esto es con lo que conseguiremos los
efectos ms espectaculares a la par que tiles.
Desde el punto de vista del diseo general de una pgina web es muy importante tener
claro un concepto: no se debe crear animaciones en pginas que no lo necesitan ni crear
animaciones que distraigan al que visualice nuestros documentos de lo realmente importante,
el mensaje.
Ya en la versin anterior de Flash se hicieron cambios importantes en el tema de
animaciones. Lo que hasta entonces se llamaba interpolacin de movimiento, pasa a llamarse
interpolacin clsica y la interpolacin de movimiento actual es totalmente nueva, ms potente
y verstil.

12.2. Interpolacin de movimiento

Aqu puedes ver cmo realizar una interpolacin de movimiento
Es la accin bsica de las animaciones en Flash. Permite desplazar un smbolo Flash de un
lugar a otro del escenario, siendo necesarios nicamente dos fotogramas, lo que optimiza
mucho el rendimiento de la pelcula.
Es importante destacar que para que una Interpolacin de movimiento se ejecute
correctamente aquellos objetos que intervengan debern haber sido previamente
convertidos a smbolos. Los grficos, clips de pelcula, textos y botones son algunos de los
smbolos que se pueden interpolar.
Tambin se debe tener cuidado al realizar una interpolacin con dos smbolos que se
encuentren en la misma capa, ya que el motor de animacin los agrupar como uno slo y el
resultado no ser el esperado. Por esto es conveniente asegurarse de dos cosas:
1. Separar en distintas capas los objetos fijos y los que estarn animados.
2. Poner tambin en distintas capas objetos que vayan a ser animados con
direcciones o formas distintas.
Pasemos pues al tema en cuestin. Una interpolacin de movimiento, como hemos dicho,
es el desplazamiento de un smbolo de un punto a otro del escenario. El hecho de que slo se
necesiten dos fotogramas es debido a que Flash, nicamente con la posicin inicial y final,
calcula una trayectoria en lnea recta y la representa (veremos que tambin se pueden
realizar movimientos no rectilneos).

Crearla es tan simple como hacer clic derecho sobre el fotograma que contiene los
elementos y elegir Crear interpolacin de movimiento. Por defecto, se aadirn unos
cuantos fotogramas, rellenos de un color azulado.
Ahora vamos al fotograma final, o creamos uno clave de propiedad donde nos plazca. Y
desplazamos el smbolo. Veremos que aparece una lnea punteada, por defecto recta, que
representa el trazado de la animacin.
Cuando realicemos la interpolacin correctamente observaremos un aspecto como este en
la lnea de tiempo, en el que los fotogramas aparecen de color azul.

Esto indica que la animacin cambiar la posicin del smbolo del fotograma 1 hasta la
posicin del mismo smbolo en el fotograma 24, utilizando precisamente 24 fotogramas. El
nmero de fotogramas que se usen en la interpolacin indicar las subetapas de que constar
la animacin. Cuantas ms subetapas ms sensacin de "continuidad" (menos saltos
bruscos) pero a la vez menos velocidad en el movimiento.
Podemos seleccionar cualquier fotograma y ver dnde se sita el clip en cada punto. De
hecho, si en alguno de estos fotogramas lo cambiamos, se crear un fotograma clave de
propiedad, mostrndose como un diamante en la lnea de tiempo.
La velocidad en el movimiento de las pelculas la podemos cambiar tambin modificando su
parmetro en la lnea de tiempo,

pero esto no cambiar lo que hemos

comentado anteriormente respecto al nmero de fotogramas.

La velocidad est expresada en Fotogramas Por Segundo (fps) y se puede modificar
haciendo doble clic en el lugar que hemos indicado de la lnea de tiempo. A mayor valor ms
velocidad, pero se deben poner siempre suficientes fotogramas para que se desarrolle la
animacin como queremos.
El trazado recto generado por defecto podemos modificarlo directamente haciendo clic y
arrastrndolo, una vez seleccionada previamente la herramienta Seleccin .

En cualquier fotograma de la interpolacin podemos cambiar la posicin del smbolo (o

cualquier otra propiedad), creando ah un fotograma clave de propiedad, que se representa
por un pequeo rombo en la lnea de tiempo.
La interpolacin de movimiento permite modificar muchos parmetros del movimiento
mediante el Editor de movimientoque veremos a continuacin.
Para practicar con las interpolaciones, realiza el ejercicio paso a paso Crear interpolaciones
de movimiento.

Unidad 12. Ejercicio: Crear interpolaciones de movimiento

Objetivo
Crear un movimiento multidireccional encadenando interpolaciones de movimiento.

Ejercicio paso a paso

1. Abre un nuevo archivo ActionScript 3 y dibuja un valo (o lo que ms te agrade) en el

fotograma 1.
2. Seleccinalo y convirtelo en un Clip de Pelcula pulsando F8.
3. Situamos el Clip en el lado izquierdo del escenario.
4. Hacemos clic con el botn derecho sobre el nico fotograma existente en este
momento.
5. Seleccionamos la opcin Crear Interpolacin de movimiento.
6. Vamos al fotograma nmero 30 y pulsamos F6 para crear un fotograma clave.
Observaremos que se crea la Animacin de 30 fotogramas de duracin. En ese mismo
fotograma (el 30).
7. Desplazamos
el
smbolo
al
extremo
derecho
del
escenario.
Ahora ya tenemos la interpolacin base, en ella hemos marcado nicamente la posicin
inicial y final del movimiento. Si lo dejramos as, el clip seguira una lnea recta, como
muestra
la
lnea
gua.
Vamos a hacer que llegue a su origen haciendo zigzag:
8. Hacemos clic del ratn sobre el fotograma 10.
9. Desplacemos nuestro clip hacia arriba.
10. Hacemos clic sobre el fotograma 20.
11. Desplacemos
nuestro
clip
hacia
abajo.
Observa que ahora, en la lnea de tiempo, aparecen rombos en los fotogramas que

hemos cambiado la posicin. Adems, la trayectoria ahora es en zigzag

12. Ahora, crearemos trayectorias curvas. Sobre el escenario, haz clic y arrastra la gua
punteada para crear curvas.
13. Como podemos comprobar, el clip se desplaza ahora en siguiendo trayectorias curvas
pero pasando por las posiciones clave indicadas.

Unidad 12. Animaciones de movimiento (II)

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

Aqu puedes ver cmo utilizar el editor de movimiento

Unidad 12. Animaciones de movimiento (III)

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.

Unidad 12. Animaciones de movimiento (IV)

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 y animarlas independientemente

Aqu tienes un ejemplo de una presentacin sencilla mediante texto utilizando esta tcnica.

Si no tienes claro cmo realizar una animacin te recomendamos que realices el Ejercicio
Animar texto por bloques

Unidad 12. Ejercicio: Animar texto por bloques

Objetivo.
Crear una animacin sobre un texto separndolo en bloques de letras cuyo movimiento
ser tratado de manera independiente, dando al texto un efecto vistoso que pudiera servir
como presentacin de entrada a una web u otro tipo de pelcula.

Ejercicio paso a paso.

Vamos a basarnos en el ejemplo que acabamos de ver, para tener claro nuestro objetivo.
Luego podremos extrapolarlo a cualquier otro texto. Veamos cmo conseguir esos efectos
combinando las tcnicas vistas hasta el momento.
1. Escribimos el texto en cuestin, en nuestro caso "aulaClic".
2. Seleccionamos el texto recin escrito.
3. Abrimos el panel Propiedades (con el texto seleccionado) y seleccionamos el tipo de
letra. Nosotros hemos elegido "Papyrus", pero cualquiera es vlida.
4. Accedemos al men Modificar Separar. Con esto separamos cada letra ya que de
no hacerlo Flash tratara todo el texto como un bloque y no podramos dar el efecto a las
letras.

Vamos a separar el texto en los siguientes bloques: "a", "u", "la" y "Clic". Podramos cambiar
los bloques si quisiramos dar otro efecto en concreto.
5. Seleccionamos dichos bloques y los convertimos a smbolos, dndoles un nombre
identificativo y el Tipo Grfico, ya que no los animaremos "internamente".
6. Creamos 5 nuevas capas, una por cada bloque que hemos creado.

Esto ltimo es necesario ya que si no lo hiciramos Flash aplicara el movimiento a todo

aquello que encontrara en dicha capa, ya que como hemos comentado anteriormente, lo
convertira todo a smbolo automticamente.
7. Nombramos cada una de las capas segn el bloque de texto que vaya a contener, pero
en orden inverso en el que vaya a producirse la animacin, para que el objeto en
movimiento se superponga a los que no lo estn. Esto es, la capa de ms arriba se
llamar "Clic", la siguiente "la" y as sucesivamente.

8. Hacemos clic con el botn derecho sobre el nico fotograma con elementos que
tenemos en la lnea de tiempo y en el men emergente seleccionamos Copiar
Fotogramas. A continuacin vamos pegando los fotogramas (botn derecho Pegar
Fotogramas) en todas las capas.
9. Seleccionamos cada capa y vamos borrando las partes del texto que no corresponden
con la parte del texto que debe contener. Es recomendable bloquear el resto de capas
cuando se haga esto para asegurarnos de que borramos las letras de esa capa (hay que
tener en cuenta que al principio todas las capas contienen lo mismo y superpuesto).
10. Situamos (arrastrando) el fotograma de cada capa a los siguientes frames:
1. "A" : Fotograma 1.
2. "U" : Fotograma 6.
3. "LA" : Fotograma 12.
4. "Clic" : Fotograma 18.
11. Seleccionamos el fotograma que ocupa cinco posiciones despus del fotograma de
cada capa y pulsamos F6 cada vez. En la capa "Clic" selecciona el fotograma 30 y pulsa
tambin F6.
12. Hacemos clic con el botn derecho en los fotogramas centrales que hay entre los
fotogramas clave y seleccionamos cada vez Crear Interpolacin Clsica.

13. Extendemos la imagen los ltimos fotogramas de cada capa hasta que ocupen el
fotograma 30 (Botn derecho Insertar Fotograma Clave).
14. Exceptuando la capa "Clic" seleccionamos el primer fotograma de cada interpolacin
y aumentamos el tamao del bloque que contiene.
15. Movemos ahora fuera del escenario el bloque "Clic".
16. An en esta capa, hacemos clic con el botn derecho sobre el fotograma 24 y
seleccionamos Insertar Fotograma Clave.

17. En este fotograma recin creado reducimos el ancho del bloque de texto y lo
colocamos junto a la ltima "a".
Y ya tenemos la animacin creada. Como vemos hemos utilizado todo tipo de tcnicas de
interpolacin, aunque todava puede complicarse ms como veremos ms adelante

Unidad 12. Animaciones de movimiento (V)

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.

Aqu mostramos la forma de crear una animacin de este tipo.

Unidad 12. Animaciones de movimiento (VI)

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.

Muchos movimientos complicados pueden ser duplicados fcilmente sobre otros objetos
utilizando ActionScript 3, puedes ver cmo realizarlo en este videotutorial:
Podis poner a prueba vuestros conocimientos realizando:

Ayuda ejercicios unidad 12: Animaciones de movimiento

Ejercicio 1: Mscara en Movimiento
1. Abre un nuevo archivo ActionScript 3 desde el men Archivo Nuevo.
2. Crea una nueva capa haciendo clic en el botn

3. Selecciona la capa superior y haz doble clic sobre su smbolo

4. Llmala Mscara y selecciona el tipo Mscara.

5. Selecciona la capa inferior y haz doble clic sobre su smbolo

6. Llmala Texto y selecciona el tipo Con mscara.

7. En la capa Texto escribe aulaClic.
8. Selecciona el fotograma 1 de la capa Mscara, dibuja un circulo en l.
9. Selecciona el crculo y transfrmalo en un Clip de pelcula pulsando la tecla F8.
10. Selecciona el smbolo que acabamos de crear y muvelo a la izquierda del texto sin
taparlo (da igual si sale de la Escena).
11. Haz clic derecho sobre el fotograma de la capa Mscara y selecciona Crear
interpolacin de movimiento en el men contextual.
12. Selecciona el fotograma 40 de la capa Mscara y crea un nuevo fotograma clave de
propiedad, pulsando la tecla F6.
13. Sitate en el fotograma 20 de la capa Mscara.
14. Selecciona el clip del crculo, y con la tecla Shift pulsada, para desplazarlo en
horizontal, muvelo hasta la derecha del texto (sin taparlo).
15. Selecciona el fotograma 40 de la capa Texto y crea un nuevo fotograma pulsando la
tecla F5.
16. Prueba la pelcula pulsando la combinacin de teclas CTRL + INTRO.
Prueba evaluativa unidad 12
1. Flash CS5 es capaz de realizar animaciones con texto de modo fcil y eficiente.
a) Verdadero
b) Falso

2. Las Guas de movimiento provocan que todos los objetos de su mismo fotograma
realicen el movimiento que sta indica, independientemente de la relacin que exista entre
las capas.

a) Verdadero
b) Falso

3. Una capa Gua es la mejor solucin para realizar un movimiento en lnea recta.
a) Verdadero
b) Falso

4. Una capa Gua es la mejor solucin para realizar un movimiento enrevesado con
numerosos cambios de direccin.
a) Verdadero
b) Falso

5. Cul de estas 3 afirmaciones es correcta?.

a) Para que las animaciones se realicen correctamente, los objetos que participen

en ella debern convertirse previamente en smbolos.

b) Dada la gran potencia de Flash CS5 para crear animaciones, debemos explotar

esta cualidad al mximo y poner animaciones en todas las pginas webs que creemos.
c) Las animaciones fotograma a fotograma son tan eficientes en cuanto a espacio y

rapidez de ejecucin como las animaciones creadas con las utilidades de Flash
(interpolaciones).
6. Flash necesita disponer de tantos fotogramas clave como duracin tenga la animacin de
movimiento.
a) Verdadero
b) Falso

7. Crear animaciones fotograma a fotograma ocupa menos espacio en el archivo final que
hacer una interpolacin de movimiento.
a) Verdadero
b) Falso

8. En las animaciones guiadas es necesario que el objeto este SIEMPRE en contacto con la
lnea de gua en los fotogramas inicial y final.
a) Verdadero
b) Falso

9. Todos los objetos presentes en una misma capa y un mismo fotograma formarn parte de

las animaciones que afecten a dicho fotograma.

a) Verdadero
b) Falso

10. Las interpolaciones de movimiento permiten aplicar otros efectos adems del propio
movimiento, tales como cambios en los tamaos, colores etc...
a) Verdadero
b) Falso

Unidad 13. Animacin por Forma (I)

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.

Unidad 13. Animacin por Forma (II)

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.

Aqu mostramos cmo realizar una animacin de este tipo.

Unidad 13. Animacin por Forma (III)

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

Ejercicios unidad 13: Animacin por Forma

Ejercicio 1: Babosa arrastrndose
1. Abre un documento nuevo
2. En el primer fotograma dibuja una especie de babosa como la de la abajo.
1. Haz que cambie de forma y vaya de un lado a otro del escenario, dando la sensacin de
que est reptando.
2. Gurdalo como babosa.fla.

Ejercicio 2: Cambio de Forma y Tamao

1. Abre el archivo babosa.fla.
2. Cambia el movimiento de forma para que a mitad del trayecto de la impresin de que se
est acercando a nosotros.
3. Cambia el color de la babosa cuando est ms cerca de nosotros.
Nota: Utilizaremos este archivo en la siguiente unidad.

Ejercicio 3: Cambiar la Forma de un Texto

1. Escribe en distintas capas las letras de tu nombre.
2. Crea una animacin de forma que pase de una letra a la siguiente.
3. Cambia los colores y el tamao de cada letra.

Ayuda ejercicios unidad 13: Animacin por Forma

Ejercicio 1: Babosa arrastrndose
1. Crea un nuevo Archivo de Flash ActionScript 3 desde el men Archivo Nuevo.
2. Utiliza la Herramienta Lpiz para crear la forma de la babosa.
3. Pulsa con el botn derecho sobre el primer fotograma y elige la opcin Crear
Interpolacin de Forma.
4. Ve ahora al fotograma 20 y pulsa F6. En ese mismo fotograma, arrastra la babosa al otro
lado del escenario y mediante la Herramienta de Subseleccin modifica su forma.
5. Gurdalo con Archivo Guardar Como y llmalo babosa.fla.

Ejercicio 2: Cambio de Forma y Tamao

1. Si lo has cerrado, abre el archivo con Archivo Abrir.
2. Selecciona el fotograma 10. Mueve el objeto hasta la parte inferior del escenario y
aumenta su tamao. La parte inferior siempre da sensacin de proximidad.
3. Selecciona la Herramienta Cubo de Pintura, elige un nuevo color y pincha sobre el
relleno anterior.

Ejercicio 3: Cambiar la Forma de un Texto

1. Crea mediante F6 un fotograma clave en el introduce en el centro del escenario una
letra de tu nombre.
2. Selecciona la letra creada y activa la opcin Modificar Separar.
3. Pulsa con el botn derecho sobre el primer fotograma y elige la opcin Crear
Interpolacin de Forma.
4. Ve cinco fotogramas en adelante y pulsa F6. Borra la letra y escribe la siguiente.
5. Repite los pasos hasta que hayas escrito todas las letras.
6. Cambia los colores utilizando el Cubo de Pintura y la herramienta Transformacin
libre para cambiar la forma.

Prueba evaluativa de la unidad 13

1. Para crear una Interpolacin por Forma slo necesitamos dos fotogramas clave.
a) Verdadero
b) Falso

2. No se puede aplicar una interpolacin de forma a un texto.

a) Verdadero
b) Falso

3. La forma de aplicar el cambio de forma la decide siempre Flash.

a) Verdadero
b) Falso

4. Se pueden crear infinitos consejos de Forma.

a) Verdadero
b) Falso

5. Un objeto sin perfil no se puede Interpolar para cambiar su forma.

a) Verdadero
b) Falso

6. Para realizar una Interpolacin por Forma. Debemos convertir el objeto a Smbolo?
a) S, porque una Interpolacin de Forma es como una Interpolacin de

Movimiento.
b) No, porque slo se puede hacer con smbolos de tipo Clip.
c) No, porque un smbolo no se puede modificar internamente, y la Interpolacin de

Forma requiere modificar el perfil del objeto.

7. Es necesario convertir un texto en forma para poder hacer una animacin de forma sobre
l.
a) Verdadero
b) Falso

8. Es posible aadir consejos de forma en otro sitio que no sea ni borde ni vrtice.
a) Verdadero

b) Falso

9. Un objeto con el perfil transparente se puede interpolar con normalidad para cambiar su
forma.
a) Verdadero
b) Falso

10. Las pistas de forma nos permiten decidir cmo se realizar el cambio de forma.
a) Verdadero
b) Falso

Unidad 14. Efectos sobre animaciones (I)

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.
Como sta, existen muchas otras aplicaciones. Para comprenderlo mejor recomendamos
hacer el Ejercicio Acelerar movimiento.

4. La funcin push() introduce un elemento en una matriz en ltimo puesto.

a) Verdadero
b) Falso

5. La propiedad filters de un objeto no puede editarse directamente.

a) Verdadero

b) Falso

6. La propiedad filters de un objeto contiene una matriz de filtros aplicados a dicho objeto.
a) Verdadero
b) Falso

7. Al aplicar o modificar un filtro ste no se redibujar directamente sobre el objeto.

a) Verdadero
b) Falso

8. Para poder modificar un filtro deberemos recordar su posicin en la matriz de filtros.

a) Verdadero
b) Falso

9. La propiedad knockout de los filtros hace que el objeto desaparezca y reste su silueta al
filtro aplicado.
a) Verdadero
b) Falso

Unidad 21. Vdeo (I)

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.

Unidad 21. Vdeo (II)

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 Evento desde 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
skinBackgroundColor su color.

la

transparencia

del

fondo

del

skin,

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.

Unidad 21. Vdeo (III)

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:
?
1

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

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;

10 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 necesarios y utilizar las propiedades del componente FLVPlayback.
Puedes recurrir al panel Fragmentos de cdigo donde encontrars cdigos muy tiles con
las funciones bsicas.
play(): reproduce el vdeo.
?
1

miVideo.play();

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

?
1

miVideo.stop();

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

?
1

miVideo.pause();

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

?
1

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

miVideo.volume = 50;

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

botn:
?
1 miBoton.addEventListener(MouseEvent.CLICK,pararContinuar);
2 function pararContinuar(event:MouseEvent) {
if (miVideo.state==miVideo.PAUSED) {

miVideo.play();

} else {

miVideo.pause();

6
}

7
8}

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 miBoton.addEventListener(MouseEvent.CLICK,reproducirInicio);
2 function reproducirInicio(event:MouseEvent) {
3

miVideo.seekToNavCuePoint("inicio");

miVideo.play();

5}

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

las

funciones

seekToNextNavCuePoint()

seekToPrevNavCuePoint() para avanzar y retroceder, respectivamente, por los diferentes

puntos de referencia de navegacin creados.
?
1 miVideo.seekToNextNavCuePoint();
2 miVideo.seekToPrevNavCuePoint();

Unidad 21. Vdeo (IV)

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 import fl.video.MetadataEvent; //Necesitamos importar el tipo de evento
2
3 reproudctor.addEventListener(MetadataEvent.CUE_POINT,
fl_CuePointHandler);
4
5

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

1
0

11 }

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

?
1 import fl.video.MetadataEvent;
2
3 reproductor.addEventListener(MetadataEvent.CUE_POINT,eventosVideo);
4 function eventosVideo(event:MetadataEvent ) {
5

if (event.info.parameters) {

mensaje.gotoAndPlay(event.info.parameters["fotograma"]);

8}

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.

Ejercicios unidad 21: Vdeo

Ejercicio 1: Mi Vdeo
Debers reproducir la siguiente pelcula Flash:
Utiliza el archivo fuente video.fla que encontrars en la carpeta ejercicios/video del curso.
Tu tarea consistir en importar el video video.mov que encontrars en la misma carpeta y
crear 6 puntos de navegacin, en los segundos 0, 10, 20, 30, 40 y 50.
Luego debers aadirle funcionalidad a los botones mediante ActionScript.
Si no tienes muy claro cmo realizarlo, Aqu te ayudamos.

Ayuda ejercicios unidad 21: Vdeo

Ejercicio 1: Mi Vdeo
1. Abre el archivo video.fla que encontrars en la carpeta ejercicios/video del curso.
2. Haz clic en Archivo Importar Importar Vdeo para acceder al dilogo Importar
vdeo.
3. En dilogo, pulsa en el botn Iniciar Adobe Media Encoder.
4. En Adobe Media Encoder, pulsa el botn Aadir y selecciona el archivo video.flv que
encontrars en la misma carpeta.

5. Aadiremos el video al que queremos insertar los puntos de referencia, el video tiene
que estar en formato .flv o .f4v, para ello pulsamos en el botn Ajustes.

6. Ahora ya podemos insertar nuestros puntos de referencia en el hueco que tenemos

debajo de la previsualizacion del video.

7. Pulsa el botn
Navegacin .

para aadir un punto de referencia, llmalo 1 y dale el tipo

8. Sita el cabezal de reproduccin en el segundo 10 y pulsa el botn

de referencia 2 y dale el tipo Navegacin.

, llama al punto

9. Sita el cabezal de reproduccin en el segundo 20 y pulsa el botn

de referencia 3 y dale el tipo Navegacin.

, llama al punto

10. Sita el cabezal de reproduccin en el segundo 30 y pulsa el botn

de referencia 4 y dale el tipo Navegacin.

, llama al punto

11. Sita el cabezal de reproduccin en el segundo 40 y pulsa el botn

de referencia 5 y dale el tipo Navegacin.

, llama al punto

12. Sita el cabezal de reproduccin en el segundo 50 y pulsa el botn

de referencia 6 y dale el tipo Navegacin.

, llama al punto

13. Pulsa Aceptar cuando ya tengas los puntos de referencia insertados.

14. Una vez terminado pulsamos Iniciar Cola, esto guardara nuestro video con los puntos
de referencia ya insertados en l.
15. Cuando se haya completado, cierra Adobe Media Encoder.
16. Volvers al dilogo Importar vdeo. Cirralo tambin.
17. Selecciona el componente FLVPlayback que haba en el Escenario y accede a sus
Propiedades.
18. Busca la propiedad source y haz clic sobre ella para buscar un archivo.

19. Busca el archivo que se ha creado (video.flv o video.f4v segn el formato elegido) y
brelo.
Ahora, insertaremos el cdigo ActionScript necesario para controlar el vdeo. Para ello,
lo primero que has de hacer es dares nombres a las distintas instancias que hay en el
escenario.
20. Al
componente
de
vdeo,
llmalo
miVideo.
Al
botn
de
retroceder,
llmalo
retro_rapido.
Al
botn
de
parar,
llmalo
btnStop.
Al
botn
de
reproducir,
llmalo
btnPlay.
Al
botn
de
pausar,
llmalo
btnPause.
Al
botn
de
avanzar,
llmalo
avance_rapido.
Al
botn
de
subir
volumen,
llmalo
vol_mas.
Al botn de bajar volumen, llmalo vol_men.
21. Para acabar, creamos una nueva capa llamada acciones donde insertamos el cdigo
necesario:
?
1 miVideo.autoRewind=true; //Para que al pulsar STOP vuelva
//al principio

2
3 //Boton retroceso <<

4 retro_rapido.addEventListener(MouseEvent.CLICK,retroceder);
5 function retroceder(event:MouseEvent):void {
6

miVideo.seekToPrevNavCuePoint();

7 }
8 //Boton stop []
9 btnStop.addEventListener(MouseEvent.CLICK,detener);
10 function detener(event:MouseEvent):void {
11

miVideo.stop();

12 }
13 //Boton play >
14 btnPlay.addEventListener(MouseEvent.CLICK,reproducir);
15 function reproducir(event:MouseEvent):void {
16

miVideo.play();

17 }
18 //Boton pausa ||
19 btnPause.addEventListener(MouseEvent.CLICK, pausar);
20 function pausar(event:MouseEvent):void {
21

miVideo.pause();

22 }
23 //Boton avance >>
24 avance_rapido.addEventListener(MouseEvent.CLICK, avanzar);
25 function avanzar(event:MouseEvent):void {

26

miVideo.seekToNextNavCuePoint();

27 }
28 //Volumen
29 //Subir +
30 vol_mas.addEventListener(MouseEvent.CLICK, subirVolumen);
31 function subirVolumen(event:MouseEvent):void {
32

if (miVideo.volume<100) {
miVideo.volume=miVideo.volume+10;

33
34

35 }
36 //Bajar 37 vol_men.addEventListener(MouseEvent.CLICK, bajarVolumen);
38 function bajarVolumen(event:MouseEvent):void {
39

if (miVideo.volume>0) {
miVideo.volume=miVideo.volume-10;

40
41

42 }
22. Y solo queda probarlo.

Unidad 22. Juegos interactivos (I)

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

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

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 miClip.x = 50;
2 miClip.y = 150;
3
4 var posicionDeClipHorizontal:Number = miClip.x;
5 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:
?
1

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 var izquierda:Boolean = false;
2 var derecha:Boolean = false;
3
4 miClip.gotoAndStop("parado");
5 miClip.x = 10;
6
7 miClip.addEventListener(MouseEvent.CLICK,iniciarMovimiento);
8 function iniciarMovimiento(event:MouseEvent):void{
9

if (miClip.x <= 10) {

10

miClip.gotoAndStop("derecha");

11

derecha = true;

12

13

if (miClip.x >= 495) {

14

miClip.gotoAndStop("izquierda");

15

izquierda = true;

16

17 }
18
19 miClip.addEventListener(Event.ENTER_FRAME,desplazar)
20 function desplazar(event):void{
21
22
23

if (derecha) {
if (miClip.x < 495) {
miClip.x = miClip.x + 6;

24

} else {

25

miClip.gotoAndStop("parado");

26

derecha = false;

27

28

29

if (izquierda) {
if (miClip.x > 10) {

30

miClip.x = miClip.x - 6;

31

} else {

32
33

miClip.gotoAndStop("parado");

34

izquierda = false;
}

35
}

36
37 }

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:
?
1

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:
?
1

miClip.rotation = -90;

Para devolver al objeto a su posicin original slo tendrs que escribir la siguiente lnea:
?
1

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.

Realiza el paso a paso de rotacin para ver mejor como funciona

Unidad 22. Ejercicio: Rotacin

Ejercicio paso a paso.
1. Abre el archivo movimiento_rotacion.fla
ejercicios/movimiento_rotacion.

que

encontrars

en

la

carpeta

2. Observa que al clip le hemos dado el nombre de instancia miClip. Ahora abre el Panel
Acciones (Ventana Acciones o pulsando la tecla F9).
3. Escribe el siguiente fragmento de cdigo:
?
1

var izquierda:Boolean = false;

var derecha:Boolean = false;

miClip.x = 30;

4
5
6

miClip.addEventListener(MouseEvent.CLICK,rotar);

function rotar(event:MouseEvent):void{

if (miClip.x <= 30) {

miClip.rotation = 10;

10

derecha = true;

11 }
12

if (miClip.x >= 515) {

13

miClip.rotation = -10;

14

izquierda = true;

15

16 }
17 miClip.addEventListener(Event.ENTER_FRAME,para)
18 function para(event:Event):void{
19

if (derecha) {

20

if (miClip.x < 515) {

21

miClip.x = miClip.x + 6;

22

23

else {

24

miClip.rotation = 0;

25

derecha = false;
}

26
27

28

if (izquierda) {
if (miClip.x > 30) {

29

miClip.x = miClip.x - 6;

30
31

32

else {

33

miClip.rotation = 0;

34

izquierda = false;
}

35
36

37 }
4. Estaremos listos, podrs previsualizar la pelcula pulsando Ctrl+Enter.
Como puedes observar el cdigo es

Unidad 22. Juegos interactivos (II)

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:

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:

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:

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:

Por tanto si decimos a nuestro objeto que se oriente -30 grados se colocar de esa forma:

Nuestro objeto se encuentra en otro cuadrante completamente diferente, pero si

observamos con atencin, la diferencia siempre ser de 90:

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 var grados:Number = Math.round(angulo*180/Math.PI);

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

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.

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.

Unidad 22. Juegos interactivos (III)

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:
?
1 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 var miObjetoClip:miClip = new miClip;
2 miContenedor.addChild(miObjetoClip);

Para eliminar clips insertados mediante addChild puedes utilizar removeChild() o

removeChildAt(), que comentamos al hablar de los contenedores.
?
1 miContenedor.removeChild(miClip);

Recuerda que antes de quitar un elemento, es recomendable borrar sus escuchadores de

eventos.
Realiza el ejercicio paso a paso Agregar objetos dinmicamente para practicar mejor
estas funciones, y crear el ejemplo anterior.

Unidad 22. Ejercicio: Agregar objetos dinmicamente

Ejercicio paso a paso.
1. Abre el archivo attach.fla que encontrars en la carpeta ejercicios/attach del curso.
2. Selecciona el clip estrella en la Biblioteca y haz clic derecho sobre l.
3. Selecciona Propiedades - botn Avanzado.
4. Se abrir una ventana donde debers hacer clic en la opcin Exportar para
ActionScript.
5. Deja estrella en el campo clase y pulsa OK.
6. Selecciona el primer fotograma de la Capa 1 y escribe el siguiente fragmento de cdigo
en el Panel Acciones (tecla F9):
?
1 var contenedor:Sprite=new Sprite; //Creamos un contenedor
2 addChild(contenedor); //Y lo mostramos en la escena
Con esto creamos una objeto contenedor Sprite para que este contenga las estrellas.
Usaremos frecuentemente contenedor.numChildren para saber cuntas estrellas se
muestran.
7. Ahora para el botn de aadir estrellas (btn_aadir), aadiremos el siguiente codigo:
?
1 btn_aadir.addEventListener(MouseEvent.CLICK, aadir);
2 function aadir(event):void {
3
4

if (contenedor.numChildren<30) { // si el contenedor contiene menos de

30 estrellas
//podemos aadir ms

var miEstrella:estrella=new estrella; // creamos una estrella en

6 miEstrella
7

var posY:Number; //creamos una variable para calcular la posicin Y

var posX:Number; // creamos otra variable para calcular la posicin

X

// calculamos la posicion "x" e "y" en relacin con el nm. de

estrellas
9

posY=Math.floor(contenedor.numChildren/6)*miEstrella.height;

10

posX=(contenedor.numChildren%6)*miEstrella.width;

11

miEstrella.x=posX; // asignamos las variables de las posiciones a

las coordenadas

12

miEstrella.y=posY; // de posicin de la estrella

13

contenedor.addChild(miEstrella); // por ultimo aadimos la estrella

al contenedor

14
15

}
}

Observa como calculamos las posiciones x e y:

Para la posicin Y, dividimos contenedor.numChildren (nmero de hijos que
contiene el contenedor) entre 6, que ser el nmero mximo de estrellas que
ponemos en una fila, lo que nos indica en qu fila tendr que ir la nueva estrella. El
resultado lo multiplicamos por miEstrella.height (alto de la estrella), y esa ser la
distancia con la parte superior (.y).
Para la posicin X, calculamos el resto (%) de numChildren entre 6, lo que nos
indica las estrellas que hay en la fila. Lo multiplicamos por miEstrella.width (ancho
de la estrella), para calcular la distancia con el lado izquierdo (.x).
8. Ahora para el botn de quitar estrellas aadimos el siguiente cdigo:
?
btn_quitar.addEventListener(MouseEvent.CLICK, quitar);
1

function quitar(event) {

if (contenedor.numChildren) { // si hay ms de 0 hijos devolvera el

3 valor true
4
5

// quitamos siempre numChildren - 1, que es el ltimo elemento

aadido
contenedor.removeChildAt(contenedor.numChildren-1);

6
}

7
}

El mtodo contenedor.removeChildAt borra el elemento con el ndice dado. Como

queremos borrar el ltimo ndice, lo calculamos con contenedor.numChildren-1.
Restamos uno, porque el ndice es en base 0. Es decir, si hay dos elementos (ndices 0
y 1), numChildren devolver 2.
Ya hemos creado una pelcula que aade un nmero concreto de elementos
automatizadamente.

Unidad 22. Juegos interactivos (IV)

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:
?
1 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 miObjeto.addEventListener(MouseEvent.MOUSE_DOWN, arrastrar);
2 function arrastrar(event):void {
miObjeto.startDrag();

3
4 }
5

6 stage.addEventListener(MouseEvent.MOUSE_UP, soltar);
7 function soltar(event):void {
8

miObjeto.stopDrag();

trace(miObjeto.dropTarget);

10 }

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 var coordenadaX:Number = mouseX;
2 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 Mouse.hide(); //Ocultamos el cursor verdadero
2 addEventListener(Event.ENTER_FRAME,cambiarCursor);
3 function cambiarCursor(event):void {
4

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;

9}

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();

Unidad 22. Juegos interactivos (V)

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 addEventListener(KeyboardEvent.KEY_DOWN, capturarTeclado);
2
3

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;

10

case Keyboard.LEFT:

11

//mover hacia la izquierda

12

break;
}

13
14 }

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 var izquierda:Boolean=false;
2 var derecha:Boolean=false;
3 miClip.gotoAndStop("parado");
4
5 //Detectamos el evento al pulsar tecla, y marcamos
6 //La direccin del movimiento
7 addEventListener(KeyboardEvent.KEY_DOWN, capturarTeclado);
8 function capturarTeclado(tecla:KeyboardEvent):void {
9

switch (tecla.keyCode) { //Dependiendo de la tecla, indicamos

10

case Keyboard.RIGHT :

11

derecha=true;

12

break;

13

case Keyboard.LEFT :

14

izquierda=true;

15

break;

16

//una direccin u otra

17 }
18
19 //En el evento onEnterFrame, comprobamos si estn activas
20 //Las variables que indican la direccin del movimiento
21 miClip.addEventListener(Event.ENTER_FRAME, movimiento);
22
23 function movimiento(event):void {
24

if (derecha) {

25

miClip.gotoAndStop("derecha");

26

if (miClip.x<490) {

27

miClip.x=miClip.x+7;

28

} else if (izquierda) {

29
30

miClip.gotoAndStop("izquierda");

31

if (miClip.x>7) {
miClip.x=miClip.x-7;

32
}

33
34
35

36 }
37 //Detectamos cundo se suelta la tecla
38 addEventListener(KeyboardEvent.KEY_UP, parar);
39
40 function parar(event):void {
41

derecha=false; //Y paramos el movimiento

42

izquierda=false;

43

miClip.gotoAndStop("parado");

44 }

Unidad 22. Juegos interactivos (VI)

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 miClip.addEventListener(MouseEvent.MOUSE_UP, miFuncion);
2
3 function miFuncion(event:MouseEvent):void{
4

if (miClip.hitTestPoint(mouseX, mouseY) {
//coincidencia

5
6

7}

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:
?
1 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.
?
1 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:
?

1 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 miClip.getBounds(stage).left;
2 miClip.getBounds(stage).right;
3 miClip.getBounds(stage).top;
4 miClip.getBounds(stage).bottom;

Realiza el ejercicio paso a paso de Colisin y Movimiento para practicar este concepto.

Unidad 22. Ejercicio: Colisin y Movimiento

Colisin y Movimiento
Reproduciremos la pelcula que vimos en la teora:

Ejercicio paso a paso.

1. Abre el archivo colision.fla que encontrars en la carpeta ejercicios/colision del curso.
En l encontrars dos elementos: miClip que ser el cuadradito que se desplazar, y
fondo, que delimita el rea por el que se puede desplazar.
2. Selecciona el primer fotograma y abre el Panel Acciones, escribe en l lo siguiente:
?
1 //definimos las variables que vamos a utilizar

2 //Variables que indican la direccin del movimiento

3 var izquierda:Boolean=false;
4 var derecha:Boolean=false;
5 var subir:Boolean=false;
6 var bajar:Boolean=false;
7 var velocidad:Number=1;//Espacio que se desplazar
8
9 //Al pulsar una tecla...
10 stage.addEventListener(KeyboardEvent.KEY_DOWN, capturarTeclado);
11 //Averiguamos la tecla pulsada para decidir la direccin
12 function capturarTeclado(tecla:KeyboardEvent):void {
13

switch (tecla.keyCode) {

14

case Keyboard.RIGHT :

15

derecha=true;

16

break;

17

case Keyboard.LEFT :

18

izquierda=true;

19

break;
case Keyboard.UP :

20
21

subir=true;

22

break;

23

case Keyboard.DOWN :

24

bajar=true;

25

break;

26

27 }
28
29 //Al soltar una tecla
30 stage.addEventListener(KeyboardEvent.KEY_UP, parar);
31 //Anulamso el movimiento en direccin de la tecla
32 function parar(tecla:KeyboardEvent):void {
33
34

switch (tecla.keyCode) {
case Keyboard.RIGHT :

35

derecha=false;

36

break;

37

case Keyboard.LEFT :

38

izquierda=false;

39

break;

40

case Keyboard.UP :

41

subir=false;

42

break;

43

case Keyboard.DOWN :

44

bajar=false;

45

break;
}

46
47 }

Este cdigo se parece mucho al que vimos en la teora. Lo nico que hacemos es
obtener qu tecla se ha pulsado y en funcin de la direccin, activamos una variable
booleana que indica que se ha de mover el objeto en esa direccin. Cuando se
suelte la tecla, hacemos lo mismo para desactivar la variable.
3. Vamos ahora con el movimiento. Lo haremos en el evento "enterFrame" del objeto que
se mueve. Aade el siguiente cdigo:
?
1 //En el enterFrame del clip, comprobamos la posicin futura, y si no
hay impacto, movemos
2
miClip.addEventListener(Event.ENTER_FRAME, mover);
3
function mover(event):void {
4
//Utilizamos un objeto rectngulo para que nos sea ms cmodo
5 acceder a las propiedades
6
7
8

var rect:Rectangle= miClip.getBounds(stage);

if (bajar) { //Comprobamos la colisin abajo - izquierda y abajo derecha, aumentando abajo

if (!(fondo.hitTestPoint(rect.left, rect.bottom+velocidad, true)

9 || fondo.hitTestPoint(rect.right, rect.bottom+velocidad, true))) {
10
11

miClip.y+=velocidad;
posicin del objeto.

14

no

hay

colisin,

cambiamos

la

12
13

//Si

}
if (subir) { //Comprobamos la colisin izquierda - arriba y derecha
- arriba, aumentando arriba

15

if (!(fondo.hitTestPoint(rect.left, rect.top-velocidad, true) ||

16 fondo.hitTestPoint(rect.right, rect.top-velocidad, true))) {
miClip.y-=velocidad;

17
18

}
if (izquierda) { //Comprobamos la colisin izquierda - arriba e
izquierda - abajo, aumentando izquierda
if (!(fondo.hitTestPoint(rect.left-velocidad, rect.top, true) ||
19 fondo.hitTestPoint(rect.left-velocidad, rect.bottom, true))) {
20

miClip.x-=velocidad;

21

}
}

22
23
24

if (derecha) {//Comprobamos la colisin derecha - arriba y derecha abajo, aumentando derecha

if (!(fondo.hitTestPoint(rect.right+velocidad, rect.top, true)

25 || fondo.hitTestPoint(rect.right+velocidad, rect.bottom, true))) {
26

miClip.x+=velocidad;
}
}
}

Parece un poco complicado pero en esencia es ms largo, pero sencillo. Para cada uno de
los movimiento (arriba, abajo, izquierda y derecha) tendremos que evaluar si se produce
colisin

con

el

objeto

miClip

el

clip

fondo.

Pero no bastar con hacerlo slo de una esquina, veamos un ejemplo para verlos con ms
claridad:

Como ves en la imagen, deberemos ver si se producen dos colisiones. En el movimiento

hacia abajo una ser la de la esquina inferior izquierda y la otra de la esquina inferior
derecha. Si por ejemplo, no evalusemos el choque con la esquina inferior izquierda e
intentsemos realizar un movimiento hacia abajo, ste se realizara! Y en definitiva es lo que
queremos evitar.
Hemos empleado un objeto Rectngulo al que le hemos dados las medidas del objeto para
que nos sea ms cmodo trabajar. Por ejemplo, para acceder a la parte superior, tendramos
que escribir miClip.getBounds(fondo).top cada vez, mientras que as solo ponemos
rect.top.
Observa tambin que para realizar el hitTestPoint hemos tenido en cuenta la posicin que
adoptar el objeto despus del movimiento (sumndole la velocidad, o lo que es lo mismo, el

nmero de pxeles que se desplaza el objeto a cada pulsacin). Adems, le hemos

enviado un tercer parmetro true para que tenga en cuenta la forma del objeto (del fondo).

Unidad 22. Juegos interactivos (VII)

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

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 function num_aleatorio (min:Number ,max:Number):Number {
return (Math.floor(Math.random()*(max-min+1))+min);

2
3}

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.
?
1var escala:Number = num_aleatorio(0, 2); //escala influir en el tamao y

la velocidad
2this.velocidad = velocidad_base+nivel*1.5+(2-escala);
3this.width = this.width*((10-escala)/10);
4this.height =

this.height*((10-escala)/10);

5var puntoSalida:Number = num_aleatorio(this.width/2, ancho-this.width/2);

//Zona de salida
6
this.x=puntoSalida;
7
this.y = 0;
8
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 //Creamos el formato
2 var miFormato:TextFormat = new TextFormat();
3 //Definimos el formato;
4 miFormato.bold = true;
5 miFormato.font = "Arial";
6 miFormato.size = 12;
7 miFormato.color = 0xFFFFFF;
8 miFormato.align = "left";
9
10//Creamos el campo de texto
11 var estadisticas_txt:TextField = new TextField();
12//Definimos la propiedades del campo de texto
13estadisticas_txt.name = "estadisticas_txt";
14estadisticas_txt.defaultTextFormat = miFormato; //asignamos el formato
15estadisticas_txt.selectable = false;
16estadisticas_txt.x = 10;
17estadisticas_txt.y = 0;
18estadisticas_txt.width = 530;
19estadisticas_txt.height = 22;
20estadisticas_txt.text = "Estas son las estadsticas del juego";
21
22//Lo aadimos a la lista de visualizacin
23addChild(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.

Antes de realizar los ejercicios finales, te recomendamos seguir el ejercicio paso a paso
Crear una clase en ActionScript.
1. La propiedad scaleX permite...
a) determinar la coordenada x del objeto.
b) determinar la anchura del objeto absoluta.
c) determinar la anchura del objeto respecto a su valor absoluto.

2. La propiedad rotation te permite rotar un objeto tomando como referencia la vertical de

ste.
a) Verdadero.
b) Falso.

3. La funcin atan2 nos ayudar a encontrar ngulos de objetos respecto a un punto (0,0).
a) Verdadero.
b) Falso.

4. Podemos conocer el objeto sobre el que se solt un elemento que estaba arrastrndose
con la propiedad...
a) dragtarget.
b) droptarget.

5. Qu evento utilizaremos para la reproduccin continuada de determinadas funciones?

a) Enter_Frame.
b) onLoad.

6. Qu devolver la funcin hitTestPoint si la ejecutamos contra dos elementos que

ocupan el mismo espacio?
a) True.
b) False.

7. La funcin getBounds() nos permite averiguar las X y las Y mximas y mnimas de

posicin de un objeto.
a) Verdadero.
b) Falso.

8. La funcin random() devuelve...

a) Un nmero aleatorio entre 0 y 1.
b) Un nmero aleatorio entre 1 y 100.

9. La funcin del objeto TextFormat es...

a) Poder darle el mismo formato a diferentes objetos de texto.
b) Formatear un texto independientemente del resto de propiedades que

aadamos.
c) Las dos anteriores son correctas.

Unidad 23. Animaciones avanzadas (I)

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

Unidad 23. Animaciones avanzadas (II)

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 btn_reproducir.addEventListener(MouseEvent.MOUSE_UP,playescena)
2 function playescena (event:MouseEvent):void {
3

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

1
0

bola_mc.x = 0;
tope += (suelo - bola_mc.y) / elasticidad; //calculamos el tope

11

var repeticion:Number;

1
2

clearInterval(repeticion);
repeticion = setInterval(botar, 35);//Repetimos botar cada 35 ms

1
3

function botar() {

1
4

if (baja) { // Si la bola baja...

bola_mc.y += incre_y;//Aumentamos Y

1
5

bola_mc.x += incre_x;

1
6

if (bola_mc.y>=suelo) {
baja = false; //Si ha llegado al suelo hacemos que suba

1
7

}
} else { // Si la bola sube...

1
8

bola_mc.y -= incre_y;//Disminuimos Y

1
9

bola_mc.x += incre_x;
if (bola_mc.y<=tope) { //Cuando alcance el tope

2
0

baja = true; //La hacemos bajar...

2
1 suelo

if (tope>=suelo) { //Cuando el tope est ms bajo que el

2
2

incre_y = 0;

clearInterval(repeticion);//Fin de la repeticin

2
3

} //Al llegar abajo, calculamos el nuevo tope

2
4

tope += (suelo - bola_mc.y) / elasticidad;

}

2
5
2
6

//Ya no rebota ms

}
}
}

2
7
2
8
2
9
3
0
3
1
3
2
3
3
3
4
3
5

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.

Unidad 23. Animaciones avanzadas (III)

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.
setInterval
El formato de esta funcin es el siguiente:

?
var retardo:Number = setInterval(queFuncion:Function,
1
[param1:Object, param2, ..., paramN]);

intervalo:Number,

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 var i:Number = 1;
2 var repeticion:Number = setInterval(contar, 2000);
3 function contar() {
4

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

if (i>10) {
clearInterval(repeticion);//Fin de la repeticin

6
}

7
8}

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.

Unidad 23. Animaciones avanzadas (IV)

ENTER_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 var i:Number =0;

2
3
4

bola_mc.addEventListener(Event.ENTER_FRAME, miFuncion)
function miFuncion(event):void{
trace("ejecutando: "+ ++i);

5
}

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
...
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 var tope:Number = 1;
2 var repeticion:Number = setInterval(parar, 1000);
3 function parar() {
4

tope++;

if (tope > 2) {

clearInterval(repeticion);

nextFrame();

play();

1 }
0
stop();
1
1

Unidad 23. Animaciones avanzadas (V)

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.

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.

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.

Unidad 23. Animaciones avanzadas (VI)

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.

Unidad 23. Animaciones avanzadas (VII)

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:

Unidad 23. Animaciones avanzadas (VIII)

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.

Unidad 23. Animaciones avanzadas (IX)

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

Unidad 23. Animaciones avanzadas (X)

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.

Unidad 23. Animaciones avanzadas (XI)

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:
?
1 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:
?
1 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:

?
1 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():
?
1 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 miClip.graphics.beginFill(0xFF0000);
2
3 miClip.graphics.moveTo(10, 10);
4 miClip.graphics.lineTo(10, 100);
5 miClip.graphics.lineTo(100, 100);
6 miClip.graphics.lineTo(100, 10);
7 miClip.graphics.lineTo(10, 10);
8 miClip.graphics.endFill();

Terminamos la instruccin con graphics.endFill().

Este ejemplo dibujara un cuadrado en la posicin (10, 10). Sencillo, verdad?

Unidad 23. Animaciones avanzadas (XII)

Podemos establecer el tipo de lnea que rodear al dibujo escribiendo lo siguiente:
?
miClip.graphics.lineStyle(thickness:Number,
color:uint
1alpha:Number = 1.0, pixelHinting:Boolean = false

0,

null,

scaleMode:String = "normal",
joints:String = null, miterLimit:Number = 3);

caps:String

Nota: Esta instruccin deber estar colocada antes de utilizar la funcin beginFill(),
quedara de esta forma:
?
miClip.graphics.lineStyle(10,
1LineScaleMode.VERTICAL,
2
3
4
5
6
7
8
9

0xFF0000,

1,

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();

false,

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,

1. Si aumentamos las coordenadas de un objeto, hacia que lado se mover?

a) Hacia arriba.
b) Hacia la derecha.

c) Hacia abajo.

2. La funcin clearInterval para la pelcula los milisegundos que le indiques.

a) Verdadero.
b) Falso.

3. La instruccin setInterval repite la ejecucin de la funcin que le indiques cada x

milisegundos.
a) Verdadero.
b) Falso.

4. Los eventos vinculados al evento ENTER_FRAME se reproducirn cada segundo.

a) Verdadero.
b) Verdadero slo si la velocidad de la pelcula es de 1 fps.
c) Verdadero slo si la velocidad de la pelcula es de 12 fps.

5. En la tcnica de rotoscopia slo hace falta que dibujemos un fotograma, el resto se

genererarn a partir de ste.
a) Verdadero.
b) Falso.

6. Cuando utilicemos la API de Flash para dibujar, podremos declarar la forma del borde
en cualquier momento.
a) Verdadero.
b) Falso.

7. En una lnea de contorno, el borde ninguno y el cuadrado son iguales.

a) Verdadero.
b) Falso.

8. 1.000.000 milisegundos equivalen a:

a) 10 segundos.
b) 100 segundos.
c) 1000 segundos.

9. En la repeticin de funciones con la instruccin setInterval es posible el envo de

parmetros.
a) Verdadero.
b) Falso.