You are on page 1of 0

Unidad 1.

Introducción a Flash CS4 (I)
1.1. ¿Qué es FLASH?
Flash CS4 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 diseños vistosos para la web,
así como para crear
Los motivos que han convertido a Flash CS4 en el programa elegido por la mayoría de
los diseñadores web profesionales y aficionados son varios. Veamos pues, porque es
interesante Flash CS4.
Desde la web de http://www.adobe.com/es/products/flash/ te puedes descargar una
versión de evaluación de Flash CS4 válida para 30 días.
Los logotipos de Flash son propiedad de Adobe, así como las marcas registradas Flash
y Adobe. EDI no tiene ninguna relación con Adobe.

1.2. ¿Por qué usar Flash CS4?
Las posibilidades de Flash son extraordinarias, cada nueva versión ha mejorado a la
anterior, y el actual Flash CS4 no ha sido menos. Aunque su uso más frecuente es el de
crear animaciones (a lo largo de este curso veremos lo sencillo que puede resultar) sus
usos son muchos más. Son tantos, que todos los diseñadores web deberían saber utilizar
Flash.
Flash ha conseguido hacer posible lo que más se echa en falta en Internet:
Dinamismo, y con dinamismo no sólo nos referimos a las animaciones, sino que Flash
permite crear aplicaciones interactivas que permiten al usuario ver la web como algo
atractivo, no estático (en contraposición a la mayoría de las páginas, que están realizadas
empleando el lenguaje HTML). Con Flash podremos crear de modo fácil y rápido
animaciones de todo tipo, desde un botón a un complejo juego.


Además sus desarrolladores están apostando muy fuerte por ActionScript, el lenguaje
de programación Flash. A cada versión se mejora y ofrece un abanico de posibilidades
cada vez mayor, por lo que además de dinamismo, Flash nos ofrece la posibilidad de ser
la plataforma para aplicaciones web de un modo real.
Flash es fácil de aprender, tiene un entorno amigable que nos invita a sentarnos y pasar
horas y horas creando lo que nos dicte nuestra imaginación, pero esto no es suficiente
para ser el preferido por los diseñadores profesionales... ¿Entonces qué es?
1.3. De Flash CS3 a Flash CS4

Adobe suele integrar todos sus productos en una suite única en la que prima sobre todo
la compatibilidad entre ellos. Así la compañía se desmarca del resto ofreciendo un
paquete de aplicaciones muy completas como hemos ido viendo año tras año que son
capaces de interactuar entre ellas y nos ofrecen la posibilidad de rehusar proyectos de un
programa en otro.
Vamos a ver las opciones más destacadas que encontramos en esta última versión:
Mejora del trabajo con objetos. Las interpolaciones de movimiento se aplican
sobre los objetos, y no sobre los fotogramas, permitiéndonos un mayor control, ya que
sólo tenemos que modificar el objeto, y Flash se encargara de crear los fotogramas clave
necesarios.
Además podemos emplear el panel Editor de movimiento para afinar más aún el
comportamiento de la interpolación fotograma a fotograma, y regular sus valores de forma
visual.



Además de lo que podremos lograr con este panel, Flash incluye ahora una serie de
movimientos predefinidos que podremos utilizar, además de permitirnos guardar nuestros
movimientos favoritos.
El uso del panel y las animaciones prediseñadas nos ahorrarán mucho tiempo.

Las herramientas Pincel rociador y Deco nos permiten utilizar nuestros símbolos
para crear patrones y rellenos, llegando a conseguir efectos vistosos pero sencillos de
aplicar.
La herramienta Hueso, y la técnica de trabajo cinemática inversa, nos permiten
crear animaciones naturales con sorprendente facilidad. Creando un esqueleto interno que
determina cómo se relacionan nuestros símbolos, nos permite definir cómo pueden
moverse entre ellos, formando cadenas que sólo se doblan por las articulaciones.
Las herramientas de rotación en 3D nos permitirán ahora girar nuestros símbolos en
los tres ejes (X, Y, Z).
Como en el resto de productos de Adobe, en esta última versión el interfaz ha
cambiado para mejorar la experiencia del usuario, haciéndolo más accesible, pero sobre
todo más personalizable.





Unidad 1. Introducción a Flash CS4 (II)
1.4. Flash, ventajas y desventajas
El principal uso de Flash se da en el mundo de la web. Desde la creación de pequeños
botones o banners publicitarios, hasta webs totalmente basadas en esta tecnología,
Internet está repleta de animaciones Flash.
Como todo, Flash presenta tanto ventajas como inconvenientes:
El tiempo de carga. Mientras que una página HTML puede ocupar unos 10-20 KB
como media, una animación Flash ocupa mucho más. Evidentemente depende del
contenido que tenga, pero suelen superar los 100 KB con facilidad, y si además
incorpora sonidos es fácil que la cifra se dispare. Al ocupar más espacio, el tiempo
que tarda en estar visible el contenido Flash es mayor y no todos los visitantes están
dispuestos a esperar... simplemente, se irán a otra página.
Los buscadores. Son capaces de indexar el contenido de nuestra página, el texto,
pero no el contenido del Flash, ya que no lo pueden leer, lo que afectará
negativamente al posicionamiento de la página. Y hoy en día 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 diseño 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,
impedirán la visualización del Flash. Este plugin lo suelen incorporar la mayoría de
navegadores, es gratuito y se puede instalar de forma muy intuitiva, pero siempre
habrá usuarios que prefieran salir de nuestra página si tienen que instalar "algo
raro".
Compatibilidad con distintos dispositivos. Cada vez es más frecuente acceder a
la web con teléfonos móviles y PDAs, y muchos de ellos no soportan Flash.
Flash es una tecnología propietaria de Adobe, por lo que su futuro depende de lo
que esta compañía quiera hacer con él.
Otro aspecto a tener en cuenta es la usabilidad de las páginas Flash, a veces se
cae en la tentación de dar demasiada importancia al diseño y olvidarse de que la
página debe ser fácil de usar, aunque es más un error de diseño que del propio
Flash.
Por supuesto su fuerte uso en la web se debe a que también aporta ventajas:
La web se vuelve muy vistosa y atractiva, además de añadirle más 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 práctica, el desarrollo con Flash se vuelve rápido.
Flash permite comportamientos que de otra forma no podríamos lograr.
Compatibilidad con navegadores. Uno de los principales problemas en el diseño
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 página web puede ser cuestionable,
aunque depende de muchas cosas. Aún así, no hemos de olvidar que Flash tiene
muchísimas aplicaciones más (hecho que ha provocado que otras compañías traten de
sacar a la venta "clónicos" del Flash). Por ejemplo, se puede usar Flash para la creación
de DVDs interactivos (como los que incluyen las revistas de informática, entre otras), la
creación de banners publicitarios o lo que más está de moda ahora: la creación de dibujos
animados (os sorprendería saber la cantidad de dibujos animados conocidos creados o
animados mediante Flash). Además, Flash tiene uso industrial, pues se emplea para
optimizar planos, crear diseños de interiores y trabajar con imágenes vectoriales en
general. No dejéis de aprender a manejar el programa con más futuro... (al menos en
cuanto a diseño web)
Nuestro consejo es emplear Flash únicamente en lo imprescindible en nuestra web
dejando el contenido principal de la web y los elementos de navegación 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 sea una web la que su valor es justamente su
contenido interactivo o visual en Flash.














Unidad 1. Introducción a Flash CS4 (III)
1.5. Mi Primera Animación Flash
Una de las características principales de Flash es su sencillez, esta sencillez en su
utilización permite crear animaciones de un modo efectivo y rápido.
Pongámonos en situación, supongamos que queremos crear una animación en la que
una pelota realice un movimiento de "bote", es decir, que baje y suba. Puede parecer un
trabajo de horas, pero nada más lejos de la realidad.
Veamos cómo Flash nos lo pone fácil.
En este apartado no pretendemos enseñar cómo crear una animación Flash (pues eso
se verá más adelante), el objetivo es que entendamos cómo crea Flash las animaciones y
de que modo nos facilita el trabajo.
A primera vista, lo lógico parece ser dibujar la pelota en cada instante del movimiento,
de modo que cuantos más instantes dibujemos, más 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 más 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 animación de movimiento entre estos fotogramas. Fácil
¿verdad?



Prueba evaluativa unidad 1: Introducción a Flash CS4
Sólo una respuesta es válida por pregunta. Haz clic en la respuesta que consideres
correcta.
1. Flash CS4 fue creado por Adobe, de ahí su perfecta integración 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 años se ha convertido en el software referente de
creación de aplicaciones web interactivas.
a) Verdadero.
b) Falso.
3. Flash CS4 resulta un poco más incómodo de manejar que su versión anterior, pues
contiene nuevas funcionalidades que complican su manejo.
a) Verdadero
b) Falso.
4. Flash CS4 dispone de un corrector sintáctico-semántico que facilita el trabajo con
textos.
a) Verdadero.
b) Falso.
5. Flash CS4 soporta trabajar con nuevos formatos de ficheros, tales como ficheros EPS
y PDF.
a) Verdadero.
b) Falso.
6. El nuevo Flash incluye un buscador web, que nos permite localizar objetos, textos,
animaciones etc por toda la web.
a) Verdadero.
b) Falso.
7. Las animaciones o películas generadas por Flash CS4 tendrán un rendimiento
generalmente mayor que las creadas con Flash 8.
a) Verdadero.


b) Falso.
8. El lenguaje de programación de Flash, ha sido mejorado en la nueva versión, Flash
CS4, y ahora se llama ActionScript 3.
a) Verdadero.
b) Falso.
9. Las Hojas de Estilo en Cascada son una gran innovación para la edición de texto y
Flash CS4 no es capaz de competir con su capacidad para trabajar con ellos.
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 animación en Flash es un proceso largo pero mecanizable.
a) Verdadero.
b) Falso.
12. Una animación en Flash exige al autor representar todos los estados de la misma, si
la animación 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 animación con Flash sólo exige indicar a Flash los estados límite de la
misma, entendiendo por estado límite aquel que marca un cambio en la animación (en
nuestro ejemplo serían 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
animación, nos falta indicar explícitamente a Flash que dichos fotogramas formarán una
animación, pues Flash no es capaz de saber esto a priori.
a) Verdadero.
b) Falso.





Unidad 2. El entorno de Flash CS4 (I)
2.1. La interfaz de Flash CS4
Flash CS4 cuenta con un entorno o interfaz de trabajo renovada de lo más manejable e
intuitiva. Además, tiene la ventaja de que es similar a la de otros programas de Adobe
(Photoshop, Dreamweaver, Illustrator...), todo esto hace más fácil aprender Flash y más
rápido su manejo y dominio. Esto es lo que nos encontraremos al abrir Flash CS4


A lo largo de todo el curso trabajaremos con la versión de evaluación de Flash CS4 en
castellano.
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 menús. Todos se irán viendo a lo largo de este curso
aunque no aparezcan en esta imagen, que sólo pretende mostrar las partes principales de
la interfaz de Flash. Veamos cuáles son:













Unidad 2. El entorno de Flash CS4 (II)
2.2. La Barra de Menús

La Barra de Menús tiene como propósito facilitar el acceso a las distintas utilidades del
programa. Es similar a la de cualquier otro programa de diseño web o gráfico, aunque
tiene algunas particularidades. Veamos los principales Submenús a los que se puede
acceder:
Archivo: Permite crear nuevos archivos, abrirlos, guardarlos... Destaca la potencia de
la utilidad Importar que inserta en la película actual casi todo tipo de archivos (sonidos,
vídeo, imágenes e incluso otras películas Flash), o la de Configuración de Publicación
desde donde se pueden modificar las características de la publicación. También permite
configurar la impresión de las páginas, imprimirlas...
Edición: Es el clásico menú que te permite Cortar, Copiar, Pegar... tanto objetos o
dibujos como fotogramas; también permite personalizar algunas de las opciones más
comunes del programa.
Ver: Además de los típicos Zooms, te permite moverte por los fotogramas y por las
escenas. También incluye la posibilidad de crear una cuadrícula y unas guías. Esto se
puede seleccionar desde los submenús Cuadrícula y Guías desde donde también se
pueden configurar sus opciones.
Insertar: Permite insertar objetos en la película, así como nuevos fotogramas, capas,
acciones, escenas...
Modificar: La opción Transformar permite modificar los gráficos existentes en la
película, y la opción Trazar Mapa de Bits convierte los gráficos en mapas vectoriales
(este tema se tratará más adelante). El resto de opciones permite modificar características
de los elementos de la animación Suavizar, Optimizar o de la propia película (Capa,
Escena ...).
Texto: Sus contenidos afectan a la edición de texto. Más 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 edición) que


hayamos almacenado en nuestra animación, obtener otros nuevos de la página de
Macromedia o ejecutar los que ya tengamos.
Control: Desde aquí se modifican las propiedades de reproducción de la película.
Reproducir, Rebobinar, Probar Película....
Depurar: Aquí encontraremos las opciones de depuración de la película que te
ayudarán a encontrar errores de programación en ActionScrit, entre ellos se encuentran
Entrar, Pasar, Salir, Continuar...
Ventana: Este menú, además de las opciones clásicas acerca de cómo distribuir las
ventanas, incluye accesos directos a todos los paneles y también 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 práctico del uso de menús
Unidad 2. Ejercicio paso a paso: Utilizar la cuadrícula
Objetivo
Crear una cuadrícula que quedará visible al fondo del fotograma (posteriormente no
saldrá en la película) y que nos servirá como guía para poder dibujar objetos de forma
exacta y precisa.
Ejercicio paso a paso.
1. Pulsa en el menú Archivo.
2. Selecciona la opción Nuevo.
3. Elige Archivo de Flash (ActionScript 3.0).
4. Aparecerá una nueva película. Si deseas crear la cuadrícula sobre una película ya
empezada, sáltate los 2 primeros pasos.
5. Selecciona la opción Mostrar cuadrícula del menú Ver.
6. Se desplegará un submenú como el de la figura.
7. Selecciona la opción Mostrar Cuadrícula para hacerlo visible.

8. Selecciona la opción Editar Cuadrícula para ajustar los parámetros de la cuadrícula
a tu gusto (tamaño, color de fondo...)


9. Selecciona la opción Ajustes → Ajustar a Cuadrícula del menú Ver para que los
objetos que crees se acomoden a las líneas de la cuadrícula, consiguiendo
alinearlos de un modo fácil.
Unidad 2. El entorno de Flash CS4 (III)
2.3. La Línea de Tiempo
La Línea de Tiempo representa una forma de ver los fotogramas de modo
simplificado. Consta de 2 partes.

1) Los Fotogramas (frames) que vienen delimitados por líneas verticales (formando
rectángulos)
2) Los Números de Fotograma que permiten saber qué número tiene asignado cada
fotograma, cuánto dura o cuándo aparecerá en la película.
Además, en la parte inferior hay herramientas para trabajar con Papel cebolla e
información sobre el Número de Fotograma actual (1 en la imagen), la Velocidad de los
Fotogramas (24.0 en la imagen) y el Tiempo de película transcurrido (0.0s en la
imagen).
A nivel conceptual, la Línea de Tiempo representa la sucesión de Fotogramas en el
tiempo. Es decir, la película Flash no será nada más que los fotogramas que aparecen en
la Línea de tiempo uno detrás de otro, en el orden que establece la misma Línea de
tiempo.
Para saber más acerca de la Línea de Tiempo y de los distintos tipos de fotogramas :
Unidad 2. Avanzado: La Línea de Tiempo - Fotogramas
Un fotograma representa el contenido de la película en un instante de tiempo. Por
tanto, una animación no es más que una sucesión de fotogramas. Todo esto se puede
controlar desde la Línea de Tiempo, pero no todos los fotogramas tienen el mismo
comportamiento ni se tratan igual. Veamos qué tipos de fotogramas hay y cuáles son sus
rasgos.


Fot. Clave
Fotograma Clave (KeyFrame) : Son fotogramas con un contenido especifico, se
crean, por tanto, para insertar en ellos un nuevo contenido no existente en la película. Se
identifican por tener un punto negro en el centro y cuando esté vacío se le diferencia por
una línea negra vertical.
Por ejemplo, en el ejemplo de la "pelota" que rebotaba en el suelo habría 3 Keyframes.
Uno para cada posición distinta de la pelota.
Fot. Normal
Fotograma Normal (Normal Frame) : Estos fotogramas siempre siguen a los
fotogramas clave, no representan contenido nuevo y son de color gris.
El último fotograma de una secuencia de fotogramas normales viene representado por
un cuadrado blanco sobre fondo gris.
En el ejemplo, los fotogramas del 2 - 4 son fotogramas normales, su contenido no es
nuevo, esto es, es el mismo que el del fotograma 1. Como vemos, su misión es prolongar
la duración de un fotograma clave o keyframe.
Fotograma Contenedor: No son fotogramas propiamente dichos, sino que
representan un lugar dentro de la Línea de Tiempo en la que se puede insertar uno. Por
defecto ocupan toda la película y Flash no los tendrá en cuenta al publicar la película. En
la imagen anterior, son fotogramas contenedores todos los fotogramas a partir del 11
(incluido). 1 de cada 5 fotogramas contenedor es gris, el resto, blancos.
Fot. vacío
Fotograma Vacío: Son fotogramas sin contenido, Su color es blanco.
En la imagen, los fotogramas del 6 al 10 (incluidos) son fotogramas vacíos. No
debemos confundirlos con los fotogramas contenedor, pues estos últimos vienen


delimitados por líneas verticales grises (no negras). Si se inserta algo en estos
fotogramas, pasan a ser Keyframes.
Es importante resaltar que Flash no ignora estos fotogramas y simplemente mostrará
una imagen en blanco. (No dará por terminada la animación). De modo que si queremos
que un objeto aparezca en el fotograma 1 y después otra vez en el fotograma 10. Los
fotogramas del 2 al 9 deberán ser fotogramas vacíos ya que así el objeto "desaparecerá"
y volverá a aparecer.
Fot. Etiquetado.
Fotograma Etiquetado (Label Frame): Contiene en la parte superior una "bandera"
roja que indica que tienen un nombre asociado. Dicho nombre se establece desde el
Panel Propiedades. Si la duración del frame es la suficiente, se puede leer el nombre (o
etiqueta) que identifica al conjunto de fotogramas.
Fot.con Acciones
Fotograma con Acciones asociadas: Contienen en la parte superior una "a" que
indica que tienen una acción asociada. Estos fotogramas son especialmente importantes,
pues estas acciones, en principio "ocultas" (para verlas hay que acceder al Panel
Acciones) pueden cambiar el comportamiento de la película. En la imagen, la acción
existente en el fotograma 1 afecta también al 2 y al 3 (por ser fotogramas normales). El
fotograma 4 no tiene acciones y sí las tiene el 5.
Fotogramas Animados: Pueden ser de 2 tipos:
Fot. de Anim de Mov.
1) Fotogramas de Animación de Movimiento: Vienen caracterizados por el color
morado y representa el movimiento (con o sin efectos) de un objeto, que pasa de la
posición del Keyframe inicial al final. Para representar esta animación aparece una flecha
entre estos Keyframes.


Esta imagen representa el ejemplo de la pelota. Del frame 1 se pasa al 6, (Flash
representará el movimiento entre ambas posiciones en la película final) y del 6 al 11. Otro
movimiento.
Fot. de Anim de Forma.
2) Fotogramas de animación de Forma: Vienen caracterizados por el color verde y
representan un cambio en la forma de un objeto, que pasa de la forma que tenía en el
Keyframe inicial a la del final. Para representar esta animación aparece una flecha entre
estos Keyframes.
Este ejemplo, similar al de arriba representa el cambio de forma de la pelota. En el
frame 1 tendría la forma original, en el frame 5, forma de cuadrado (por ejemplo) y en el
11, otra forma distinta.
En esta última imagen aparecen casi todos los tipos de fotogramas, ¿los reconoces?


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. Aún así, veamos a grandes rasgos
qué son las capas.
Una Capa se puede definir como una película independiente de un único nivel. Es decir,
una capa contiene su propia Línea de Tiempo (con infinitos fotogramas).
Los objetos que estén 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 múltiples capas además, da lugar a películas
bien ordenadas y de fácil manejo (es conveniente colocar los el código ActionScript en
una capa independiente llamada "acciones", por ejemplo). Las ventajas y desventajas de
usar capas se verán en la unidad referente a Capas.



2.5. El Escenario
A continuación veremos las diferentes partes que conforman el Área de trabajo
empezaremos con la más importante: el Escenario.
Sobre el escenario dibujaremos y colocaremos los diferentes elementos de la película
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 botón derecho sobre cualquier parte del escenario en la que no haya ningún objeto y
después sobre Propiedades del documento:
Añade metadatos a tus archivos para una mejor inclusión de estos en los motores de
búsqueda rellenando los campos de Título y Descripción.
Dimensiones: Determinan el tamaño de la película. El tamaño mínimo es de 1 x 1 px
(píxeles) y el máximo de 2880 x 2880 px.
Coincidir: Provocan que el tamaño de la película coincida con el botón seleccionado
(tamaño 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 película.



Veloc. Fotogramas: O número de fotogramas por segundo que aparecerán en la
película.
Unidades de Regla: Unidad que se empleará para medir las cantidades.
Transformar en predeterminado: Este botón, propio de la nueva versión de Flash,
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 podrán 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 película
Unidad 2. Ejercicio paso a paso: Cambiar las dimensiones de la
película
Objetivo.
Practicar cómo se pueden cambiar algunos atributos fundamentales de las
películas.
Ejercicio paso a paso.
1. Haz clic con el botón derecho sobre el fondo de la película.
2. Selecciona Propiedades del Documento.
3. En Unidades de Reglas selecciona Centímetros.
4. A continuación selecciona Dimensiones y escribe en las casillas Anchura 22.46 y
en Altura 16.84.
5. Pulsa en Aceptar y observa cómo cambia el tamaño. Estas medidas equivalen
aproximadamente a las estándar 640 x 480 px.



Unidad 2. El entorno de Flash CS4 (IV)
2.6. Las Vistas o Zooms

La Herramienta Zoom se emplea para acercar o alejar la vista de un objeto,
permitiendo abarcar más 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 Submenús existentes en el
Menú Ver. Son muy útiles y ayudan a acelerar el trabajo cuando se emplean
correctamente.
Para saber más acerca de los Zooms página Básica
Unidad 2. Básico: Zooms
El efecto Zoom consiste en acercar o alejar la "mirada" de un determinado lugar. En
realidad, lo que se hace es aumentar o reducir el tamaño de un objeto, de modo que
parece que nos hayamos acercado o alejado de él.
Es muy útil para poder ver con más detalle ciertos puntos de la animación (gráficos
principalmente) y para poder retocar algunas partes que no son visibles desde lejos.
Igualmente, resulta útil ver la animación desde lejos para tener una visión global de ella.
Veamos cómo trabaja Flash con los Zooms.
Panel Zoom



Se puede acceder a todas las funciones de los Zooms desde el Menú Ver. En cualquier
caso, Flash incluye un submenú de acceso rápido para dichos comandos. Veamos en qué
consisten:
Mostrar Fotograma: Muestra el contenido del Fotograma actual en su totalidad. Es
decir, amplia el tamaño del fotograma hasta ocupar todo el Área de Trabajo. si hay objetos
fuera del Área de Trabajo, no se verán.
Mostrar Todo: Muestra en el Área de Trabajo todos los objetos que haya en la
película, adaptando el tamaño del fotograma al espacio necesario para que quepan. Si
todos los objetos están en la parte izquierda de un fotograma, la parte derecha no se verá.
Como podemos ver, ambas selecciones son útiles, pero tienen sus desventajas. Para
darnos libertad total, Flash nos permite elegir el tamaño del Escenario.
25%, 50%...: Muestra el fotograma con el tamaño que indiquemos en % teniendo en
cuenta que el 100% es el tamaño de referencia. Es decir, el 100% es el tamaño original de
la película (ocupa lo que se verá al publicar la película), todo lo demás depende de cuánto
sea el 100 %. Es decir, si el 100% son 640 x 480 px. El 50% será justo la mitad de esta
cantidad y el 200% será el doble de 640 x 480 px.

2.7. Los Paneles
Los Paneles son conjuntos de comandos agrupados según su función (por ejemplo,
todo lo que haga referencia a las acciones, irá en el Panel Acciones). Su misión es
simplificar y facilitar el uso de los comandos.
Estos paneles o ventanas se encuentran organizados en el lateral derecho del área de
trabajo. Pudiéndose expandir o minimizar con un clic de ratón.
Si no están 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 algún momento el entorno se vuelve un poco
caótico puedas recuperar tu configuración elegida desde el menú Ventana.
Para ello deberás acceder a la opción Ventana → Espacio de trabajo → Nuevo
espacio de trabajo y asignar un nombre a nuestro nuevo espacio.



Ahora sólo bastará darle un nombre a la disposición y será accesible desde el mismo
elemento de menú Espacio de trabajo en cualquier momento.
Todos los paneles se estudiarán en profundidad a lo largo del curso. Aún así, vamos a
nombrarlos y a resumir las funciones de la mayoría de ellos.
Panel Alinear: Coloca los objetos del modo que le indiquemos. Muy útil.
Panel Color: Mediante este panel creamos los colores que más nos gusten.
Panel Muestras: Nos permite seleccionar un color de modo rápido y gráfico.
(Incluidas nuestras creaciones).
Panel Información: Muestra el tamaño y las coordenadas de los objetos
seleccionados, permitiéndonos modificarlas. Muy útil para alineaciones exactas.
Panel Escena: Modifica los atributos de las escenas que usemos.
Si aún no sabes lo que son las Escenas,te lo explicamos en nuestro tema básico
(Unidad 2. Básico: Escenas
Escenas
Una Escena no es más que una porción de la Línea de Tiempo, con todo lo que
ésta incluya (capas, fotogramas...).
Su finalidad principal es la de organizar la película, de modo que las partes de la
película que no tengan relación entre sí o no estén una a continuación de la otra (seguida
en la línea de tiempo). De este modo, separando una película en 3 escenas, conseguimos
tener 3 líneas de tiempo, 3 conjuntos de capas y 3 conjuntos de fotogramas, que veremos
y editaremos como si de 3 películas diferentes se tratara.
No debemos olvidar que aunque en apariencia sean películas distintas, la Línea de
Tiempo es la misma y que al acabar la primera escena se reproducirá la segunda y así
sucesivamente...
Las Escenas se pueden añadir, eliminar, editar... desde el Menú Escena al que se
accede desde Ventanas → Escena. )

Panel Transformar: Ensancha, encoge, gira ... los objetos seleccionados.
Panel Acciones: De gran ayuda para emplear Action Script y asociar acciones a
nuestra película.
Panel Comportamientos: Permiten asignar a determinados objetos una serie de
características (comportamientos) que después podrán almacenarse para aplicarse
a otros objetos de forma rápida 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 características y muchas utilidades (calendarios,
scrolls etc...)
Panel Cadenas: Mediante este panel Flash aporta soporte multi-idioma a nuestras
películas.
Panel Respuestas: Macromedia pone a nuestra disposición ayuda y consejos
accesibles desde este panel.
Panel Propiedades: Sin duda, el panel más usado y más importante. Nos muestra
las propiedades del objeto seleccionado en ese instante, color de borde, de fondo,
tipo de trazo, tamaño de los caracteres, tipografía, propiedades de los objetos (si hay
interpolaciones etc...), coordenadas, tamaño etc... Es fundamental, no debeis
perderlo de vista nunca.
Panel Explorador de Películas: Nos permite acceder a todo el contenido de nuestra
película de forma fácil y rápida
Para practicar estas operaciones te aconsejamos realizar Ejercicio Acceder a los
Paneles
Unidad 2. Ejercicio paso a paso: Accediendo a Paneles Objetivo
Abrir los Panel de Muestras y seleccionar una muestra de color.
Ejercicio paso a paso.
1. 1 Pulsa en el menú Ventana.
2. 2 Selecciona la opción Muestras, si ya tuviera una señal junto al nombre del Panel,
significa que ya está abierto. Si no, haz clic sobre él.
3. 3 Ahora selecciona el color verde de dicho panel, observa que al acercar el cursor,
éste tomará la forma de la herramienta cuentagotas (que servía para seleccionar un
color).
4. 4 Todo lo que dibujemos de ahora en adelante, será de color verde (podemos usar
este mecanismo para cambiar el color de relleno o el color del trazo)



Ejercicios unidad 2: El entorno de Flash CS4
Ejercicio 1: Crear una Película a nuestro gusto
Crea una película que tenga las siguientes propiedades:
1. Un tamaño de 300 x 100 px
2. Un color de fondo rojo
3. Un Velocidad de los Fotogramas de 14 fps
Ejercicio 2: Estructurar una Película
1. Abre una nueva película
2. Crea 2 Escenas y llámalas Escena 1 y Escena 2
3. Crea 2 capas en cada una.
4. Llámalas E1_1, E1_2 y E2_1, E2_2
Ejercicio 3: Creando Fotogramas
1. Crea en una película 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 película

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 CS4
5. Vuelve a abrirlo. ¿Qué notas?




Ayuda ejercicios unidad 2: El entorno de Flash CS4
Ejercicio 1: Crear una Película a nuestro gusto
El apartado 1 nos propone cambiar las dimensiones del Escenario:
1. Hacemos clic con el botón derecho y pulsamos sobre Propiedades del Documento.
2. Pulsamos sobre la pestaña Unidades de Regla y seleccionamos Píxeles (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 botón derecho y pulsamos sobre Propiedades del Documento
2. Pulsamos sobre la pestaña Color de fondo, el puntero se convertirá en un
"cuentagotas".
3. Seleccionamos el color pedido.
El apartado 3 nos propone aumentar la velocidad de reproducción de la película
1. Hacemos clic con el botón derecho y pulsamos sobre Propiedades del Documento.
2. En Veloc. Fotogramas escribe 14 fps.
El resultado debe ser un rectángulo rojo con las medidas propuestas.
Ejercicio 2: Estructurar una Película
Vamos a crear la película pedida y a estructurarla tal y como piden
1. Abrimos una nueva Película 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 número de capas pedido.
1. Seleccionamos la Escena E1 en el Panel Escena
2. Creamos otra capa más, pulsando el signo en la linea 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 debería quedar así:



Y así las Capas:


Ejercicio 3: Creando Fotogramas
Vamos a crear los fotogramas pedidos:
1. Abrimos una nueva película
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 → Línea 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 → Línea de
Tiempo y seleccionamos Fotograma.
2. Ahora el fotograma 2 será un fotograma normal y el 3 y el 4 serán 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:



Fijémonos en que no están 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 animación de Movimiento. (probablemente contendrán 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 duración 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 película se verán como fotogramas en blanco (o
con el color de fondo que hayamos seleccionado).
4. Los fotogramas del 16 en adelante son fotogramas vacíos y no se verán en la
película.
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 CS4 adapta su
entorno a nuestras preferencias.

Prueba evaluativa unidad 2: El entorno de Flash CS4
Sólo una respuesta es válida por pregunta. Haz clic en la respuesta que consideres
correcta.
Contesta todas las preguntas y haz clic en el botón Corregir para ver la solución.
Si pulsas Restablecer podrás repetir la evaluación.
1. Flash CS4 fue concebido para crear páginas web estándares.
a) Verdadero
b) Falso
2. El manejo de Flash requiere unos amplios conocimientos de programación,
necesarios para crear animaciones vistosas.
a) Verdadero
b) Falso
3. Los fotogramas de la imagen podrían intercambiarse sin que se notase.
a) Verdadero
b) Falso
4. Flash no puede trabajar con textos, sólo trabaja con gráficos.
a) Verdadero
b) Falso
5. ¿Cuál de estas 3 afirmaciones es correcta?.
a) Para cambiar el color de fondo de la película hay que hacerlo fotograma a
fotograma.
b) Para cambiar el fondo de la película basta modificar el valor Color de Fondo en el
Panel Propiedades de Película.
c) Para cambiar el color de fondo se pinta cada fotograma con el pincel y luego se
hace todo lo demás encima.


6. ¿Cuál de las siguientes afirmaciones es falsa?.
a) Desde el Panel Info se puede cambiar el color de relleno de un objeto.
b) Para girar un objeto 90º, debería ir al Panel Transformar.
c) Los Zooms permiten acercar o alejar los objetos.
7. Si creo una película Flash y añado la Escena 2 y luego la Escena 3. El orden de
ejecución de las escenas será el mismo que se empleó para crearlas.
a) Verdadero
b) Falso
8. Si en el Panel Zoom pone 50%, quiere decir que lo veo todo más grande que cuando
pone 75%.
a) Verdadero
b) Falso
9. Los fotogramas de las dos imágenes se diferencian en que en unos hay
objetos y en los otros no.
a) Verdadero
b) Falso
10. Los fotogramas de la imagen tienen asociadas acciones, por eso se les marca
con una bandera roja.
a) Verdadero
b) Falso









Unidad 3. Dibujar y colorear (I)
3.1. El dibujo en Flash CS4
Cuando se diseña una página web o una animación el diseñador pasa por
muchas fases. Tras la fase de "Qué quiero crear y cómo va a ser" viene
(normalmente) la fase de diseño gráfico. Llevar lo que ha producido tu
imaginación al papel (en este caso al papel de Flash).
No conviene engañarnos, Flash no es un programa de diseño gráfico, pero su
potencia en este ámbito es casi tan grande como la de estos programas. Vamos
a ver cómo emplear cada herramienta de dibujo para sacarle el máximo partido.
3.2. La barra de Herramientas. Herramientas básicas
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 más
importantes:
Herramienta Selección (flecha): . Es la herramienta más usada de todas. Su
uso principal es para seleccionar objetos, permite seleccionar los bordes de los
objetos (con doble clic), los rellenos (con un sólo clic), zonas a nuestra elección...
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 verán en el tema siguiente.
Herramienta Línea: Permite crear líneas rectas de un modo rápido. Las líneas
se crean como en cualquier programa de dibujo, se hace clic y se arrastra hasta
donde queramos que llegue la línea 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 círculos o elipses de manera rápida y sencilla.

Para practicar el manejo de esta Herramienta, te aconsejamos realizar.
(Unidad 3. Ejercicio paso a paso: Crear un óvalo
Objetivo.
Crear un óvalo con las medidas y la forma que queramos
Ejercicio paso a paso.
1 Pulsa sobre la Herramienta Óvalo que se encuentra en la Barra de
Herramientas.
2 Situa el cursor del ratón en el Escenario (dentro del fotograma actual).
3 Haz clic y arrastra el ratón hacia el lugar que desees. Observarás que el movimiento
de tu ratón provoca la creación de un óvalo (figura 1). Cuando el óvalo tenga la forma
deseada, suelta el ratón. El resultado será similar al de la figura 2.
4 Guarda el archivo como trabajo.fla. Lo volveremos a utilizar más adelante.
Figura 1 Figura 2
Truco: Si quieres crear un círculo perfecto, mantén pulsada la tecla SHIFT mientras das
forma al óvalo. (Sucede igual con la Herramienta Rectángulo) )
Herramienta Lápiz: Es la primera herramienta de dibujo propiamente dicho. Permite
dibujar líneas 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 lápiz, pero por defecto
su trazo es más grueso e irregular. Se suele emplear para aplicar rellenos. Se puede
modificar sus 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 análogo a la Herramienta Pincel.
Pero su función 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 función es complementaria a la de la herramienta Flecha, pues puede seleccionar
cualquier cosa, sin importar la forma, (la Herramienta Flecha sólo puede seleccionar
objetos o zonas rectangulares o cuadradas). En contrapartida, la Herramienta Lazo no
puede seleccionar rellenos u objetos (a menos que hagamos la selección a mano).
Al seleccionar esta herramienta, en el Panel de Herramientas aparecen estos botones:
. Esto es la herramienta Varita Mágica, tan popular en otros programas de
dibujo. Permite hacer selecciones según los colores de los objetos. El tercer dibujo que
aparece es este: para seleccionar Poligono.
Herramienta Pluma: Crea polígonos (y por tanto rectas, rectángulos...) de un
modo sencillo. Mucha gente encuentra esta herramienta complicada, aunque es una de
las más potentes que ofrece Flash. Su empleo consiste en hacer clic en los lugares que
queramos definir como vértices de los polígonos, lo que nos asegura una gran precisión.
Para crear curvas, hay que señalar los puntos que la delimitan y posteriormente trazar las
tangentes a ellas. Con un poco de práctica se acaba dominando.
Herramienta Subseleccionador: Esta Herramienta complementa a la
Herramienta Pluma, ya que permite mover o ajustar los vértices que componen los
objetos creados con dicha herramienta.
Herramienta Bote de Tinta: Se emplea para cambiar rápidamente 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 misión es "capturar" colores para que
posteriormente podamos utilizarlos.
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 además debemos hacer clic en la línea 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
sensación de estar "unidos".
Suavizar: Convierte los trazos rectos en líneas menos rígidas.
Enderezar: Realiza la labor inversa. Convierte los trazos redondeados en más
rectilíneos.
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 más nos gusten.

Para seleccionar un color determinado, bastará con hacer clic en las pestañas que se
encuentran junto a los iconos de las herramientas de Lápiz y de Bote de Pintura. (Si
queremos modificar el color de un borde, pulsaremos sobre el color que está junto al lápiz


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 más nos gusta. También permite introducir el código del color según
el estándar
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:
Sólido: 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.
Mapa de Bits: Permite colocar como relleno alguna imagen existente en la película
(O ajena a ella si antes se "importa")
Para aprender a crear un color transparente (semi-transparente), realiza el ejercicio
paso a paso .
Unidad 3. Ejercicio paso a paso: Crear un color
transparente
Objetivo
Crear un objeto cuyo color sea transparente, de modo que se vean los objetos de
detrás.
Ejercicio paso a paso.
1 Abre el archivo transparencia.fla que encontrarás en la carpeta de ejercicios.
2 Seleccionamos el relleno del Rectángulo y modificamos el valor Alfa desde el
Panel de Herramientas o desde el panel Propiedades. Por ejemplo, escribimos un
valor de 45%.

Rectángulo Azul


Ahora con Transparencia
El efecto alfa trabaja de forma que si situamos cualquier objeto o imagen detrás de
él, podemos ver como un efecto de transparencia que mostrará parte de lo que se
encuentre detrás de nuestro relleno.




3.6. El panel Muestras

El Panel Muestras sirve para poder ver de un modo rápido y claro los colores de que
disponemos, tanto sólidos (un solo color) como degradados (lineales o radiales). Además,
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
rápidamente cada vez que trabajemos con nuestra película.
Cada película tiene su propio conjunto de muestras y cada vez que la abramos para
editarla, podremos usar las muestras que teníamos la última vez que trabajamos con
dicha película.
Para practicar el manejo de este panel, te aconsejamos realizar el ejercicio paso a
paso.
Unidad 3. Ejercicio paso a paso: Colorear un óvalo
Objetivo


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

Seleccionamos el Interior del Óvalo


Seleccionamos el Borde del Óvalo
3 Una vez hecho esto, nos fijamos en el Panel de Muestras, que se encuentra en el
lateral derecho del área de herramientas y seleccionamos el color que nos guste.

Para modificar el color del interior del óvalo también podemos seleccionar un color
directamente haciendo clic sobre el Panel de Colores existente en el Panel de
herramientas junto a la imagen del "Bote de Pintura". O si deseamos modificar el borde,
sobre el Panel existente junto al "Lápiz".
Ejercicios unidad 3: Dibujar y colorear
Ejercicio 1: Bandera Olímpica
1. Dibuja 5 aros.
2. Cámbiale los colores. Por ejemplo, los colores de la bandera olímpica (azul, negro,
rojo, amarillo y verde)
3. Únelos de modo que parezcan los aros olímpicos.
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. Úne los 2 objetos para que parezca el planeta Saturno



Ayuda ejercicios unidad 3: Dibujar y colorear
Ejercicio 1: Los Aros Olímpicos
Vamos a dibujar los aros olímpicos.
Como siempre, partiremos de un nuevo Documento de Flash (Action Script 3.0), a
través del menú Archivo → Nuevo.
1. Seleccionamos la Herramienta Óvalo.
2. Trazamos un óvalo, y para que sen perfectamente circulare, mantenemos pulsada la
tecla Shift.
3. Ahora, podemos intentar crear los otro cuatro aros iguales, o seleccionarlos con la
herramienta Selección, copiarlos desde el menú Edición y pegarlos.
4. Una vez estén dibujados, seleccionamos el relleno de cada óvalo y pulsamos la tecla
Suprimir para eliminarlo. (Igualmente podíamos 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
seleccionándolo en el Panel Color.
6. Ahora mueve cada aro hasta la posición deseada. Para mover un objeto, selecciona
la Herramienta Selección, haz clic en el aro que quieras mover y arrástralo.

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



1. Seleccionamos la Herramienta Óvalo.
2. Creamos un óvalo
3. Eliminamos el borde, para ello, hacemos clic en él y pulsamos la tecla Suprimir.
4. Seleccionamos el Relleno del óvalo y abrimos la opción Relleno.
5. Seleccionamos la opción Degradado Radial.
6. Pulsamos en y seleccionamos los colores que
deseemos, (podemos añadir tantos colores como queramos y probar su efecto).
7. Dibujamos el anillo de Saturno, 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 seleccionándola 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 después, arrastra sobre el anillo la otra
parte del planeta.
11. Prueba evaluativa unidad 3: Dibujar y colorear
13. Sólo una respuesta es válida por pregunta. Haz clic en la respuesta que consideres
correcta.
Contesta todas las preguntas y haz clic en el botón Corregir para ver la solución.
Si pulsas Restablecer podrás repetir la evaluación.
1. El panel que contiene las utilidades necesarias para dibujar, pintar, etc se llama Barra
de Herramientas.
a) Verdadero
b) Falso
2. Flash CS4 trabaja con colores puros de alta definición, lo que imposibilita su mezcla y
por tanto el uso de más de 256 colores.
a) Verdadero


b) Falso
3. Flash dispone del efecto Alfa, que añade transparencia a los colores. Efecto muy
atractivo y vistoso.
a) Verdadero
b) Falso
4. Las herramientas y tienen la misma función, 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 Selección.
a) Verdadero
b) Falso
6. La herramienta Cubo de pintura se emplea únicamente para dar color al fondo de las
películas.
a) Verdadero
b) Falso
7. El Panel de colores se emplea para crear nuestros propios colores, mezclarlos a
nuestro gusto y añadirles efectos tales como el Alfa.
a) Verdadero
b) Falso
8. La herramienta Cuentagotas sirve para contar el número de colores diferentes que
contiene una imagen.
a) Verdadero
b) Falso
9. Las herramientas y se diferencian en que el lápiz dibuja más fino que el pincel.
a) Verdadero
b) Falso
10. Es posible en Flash CS4 crear un color de relleno a partir de una imagen de mapa de
bits previamente importada a nuestra película.
a) Verdadero


b) Falso








Unidad 4. Textos (I)
4.1. Comenzando

Flash abarca todo aquello que nos pueda hacer falta a la hora de crear una animación,
y por tanto, también todo aquello relativo a los textos. Sin embargo, Flash fue concebido
para crear animaciones gráficas, de modo que tratará cualquier texto como si de un objeto
más 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 estático o normal, texto dinámico y texto de entrada (para que
el usuario introduzca sus datos, por ejemplo), también se puede crear texto que soporte
formato HTML etc...
4.2. Propiedades de los textos
Para poder escribir, deberemos hacer clic en la Herramienta Texto y posteriormente en
el punto del escenario en el que queramos empezar a escribir.
Para saber más acerca de Cómo escribir textos
(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 película final no se verá, pero nos servirá para localizar más fácilmente el texto y para


moverlo o cambiar su tamaño. Finalmente, el círculo que hay arriba a la derecha significa
que el recuadro del texto se expandirá según vayamos escribiendo y también el texto.
Esto es, todo lo que escribamos, estará en la misma línea.
Si escribimos en el recuadro creado por defecto vemos como se alarga el recuadro que
lo contiene. Para cambiar de línea, sería necesario pulsar la tecla Enter (Intro).

Si por otra parte, queremos delimitar lo que va a ocupar nuestro texto (cosa bastante
común, acercaremos el cursor del ratón al borde del recuadro de texto, según donde lo
acerquemos, se transformará en un símbolo o en otro.
Si lo acercamos al borde del recuadro, se le añadirá debajo de la flecha una flecha
pequeña de 4 direcciones como la que muestra la figura y que nos indica que podemos
mover el texto:

Si lo acercamos al círculo 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 límites del
recuadro de texto, y además, el círculo que aparecía en el margen superior derecho, se
convierte en un cuadrado. Este cuadrado significa que los límites del recuadro de texto
han quedado fijados, y que al insertar más texto, se producirá un salto de línea en lugar de
ensanchar el recuadro de texto. Este sería su comportamiento al introducir texto:

Si quisiéramos, (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 círculo y su comportamiento será el
descrito al principio de esta página.)



El Panel Propiedades contiene las principales propiedades de todos los objetos que
empleemos durante nuestra película, de modo que si seleccionamos un texto, podremos
ver en él todo lo que nos hace falta conocer sobre nuestro texto, respecto a la anterior
versión la interfaz de las propiedades de texto a cambiado considerablemente.

Panel Propiedades


Veamos a fondo el Panel Propiedades:
Posición y Tamaño: Dado que Flash trata los
textos como objetos, éstos también 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 tipografías son una parte muy importante y deben
respetarse.
Familia: Desde aquí, al igual que
en los editores de texto más comunes podemos seleccionar el tipo de letra o "fuente" que
más nos guste.
Espaciado entre letras: Determina el espaciado entre los
caracteres. Útil cuando la tipografía que empleamos muestra las letras muy juntas o para
dar efectos concretos al texto.
Ajuste automático: Activar esta casilla provoca que la separación
entre caracteres se realice de modo automático.
Configuración: Son las clásicas
opciones que permiten convertir el texto en Negrita (B), Cursiva (I), cambiar el color del
texto y el tamaño.

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 de la impresora, lo
que hace más liviano el archivo SWF al no incluir la fuente. Aunque nos
exponemos a que la fuente no esté instalada, por lo que se empleará otra.
Sólo deberíamos de utilizar esta opción para las más comunes.
o Texto de mapa de bits, no realiza suavizado, ocupando más tamaño y
perdiéndose resolución al redimensionar.
o Suavizado para animación, es la mejor opción cuando pretendemos
animar texto.
o Suavizado para legibilidad, favorece la legibilidad, pero no debemos de
emplearla en textos animados.
o Suavizado personalizado, nos permite ajustarlo manualmente.


Orientación: Cambia la orientación del texto de horizontal a vertical, tanto de
izquierda a derecha como de derecha a izquierda.
Seleccionable: Determina si el usuario pordrá seleccionar el texto.
Posición: Nos permite convertir nuestro texto en subíndices o en superídices.
Vínculo: Si queremos que al pulsar
sobre nuestro texto, el usuario vaya a una dirección web, nada más fácil que escribirla ahí.
Flash la asociará al texto que estés 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
...
Comportamiento: Si el texto que
vamos a incluir es dinámico (de lo contrario aparece sin activar), esta opción nos permite
determinar cómo queremos que aparezcan las líneas (línea única, multilínea o multilínea
sin ajuste).

Un Párrafo no es más que un conjunto de caracteres con propiedades comunes a
todos ellos. Estos párrafos admiten ciertas opciones que nos permiten trabajar con
bloques de texto. El Panel Propiedades nos proporciona las siguientes opciones para
trabajar con párrafos (entre otras).
A la Izquierda: Todas las líneas empezarán tan a la izquierda como sea posible
(dentro del recuadro de texto que hayamos definido).
Centrar: Las líneas se distribuyen a la derecha y a la izquierda del punto medio del
párrafo.
A la derecha: Todas las líneas empezarán 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 límites.
El resto de opciones nos permiten determinar los márgenes (izquierdo y derecho), los
sangrados de párrafo y el espacio interlineal.



Para practicar estas propiedades te aconsejamos realizar


Unidad 4. Ejercicio paso a paso: Propiedades del texto
Objetivo.
Crear un texto cualquiera y asignarlelas propiedades que más nos interesen.
Ejercicio paso a paso.
1 Abre el archivo trabajo.fla, creado en la unidad anterior.
2 Creamos una nueva capa (ya veremos más adelante para que sirven) haciendo clic
en el botón en la línea de tiempo.
3 Hacemos clic en la Herramienta Texto y después en el escenario.
4 Veremos esta imagen . Escribe dentro el texto Esto es un texto de prueba.
5 Hacemos clic en el Propiedades, si es que teníamos minimizado este Panel.
6 Haz que el texto se encuentre centrado haciendo clic en
7 Cambia la fuente del texto a Verdana seleccionándola en el desplegable
.
8 Cambia el espaciado entre caracteres del texto a 2 escribiéndolo en la opción
.
9 Por último cambia el tamaño del texto a 30 y ponlo en Negrita utilizando estos
controles:
Unidad 4. Textos (II)
4.3. Tipos de textos


Como ya hemos comentado, Flash distingue entre diversos tipos de textos y les da un
tratamiento especial, según el tipo que sean.
Todos los tipos de textos responden a las propiedades comentadas en los puntos
anteriores, y es en el Tipo de texto en lo que se diferencian. El tipo de texto se puede
modificar desde el Panel Propiedades sin más que haciendo clic sobre la pestaña Tipo
de texto: .
4.4. Texto estático
El Texto Estático se caracteriza por no presentar ningún cambio a lo largo de la
animación. Es importante que no confundamos la palabra "estático" con que el texto no se
mueva o malinterpretemos la frase es el texto que no presenta cambios a lo largo de la
animación.
Lo que queremos decir es que no cambia el contenido del recuadro de texto, es
decir, que el texto puede estar animado (girar, cambiar de color...) y sin embargo ser
estático. Así, un recuadro de texto en el que pone "Aprende Flash CS4" durante toda la
película, es estático, aunque dicho texto cambie de posición, forma o color. Sin embargo,
si en ese mismo recuadro de texto pasa a poner "Con este Curso", este recuadro de texto
NO es estático. Se insistirá en este punto en los ejercicios de evaluación.
4.5. Texto dinámico
El Texto Dinámico en contraposición al estático sí que puede cambiar su contenido
(además de estar animado). Su uso es bastante más complejo que el del Texto Estático,
ya que cada recuadro de texto Dinámico puede ser una variable modificable mediante
ActionScript, esto quiere decir que los valores y propiedades de este tipo de textos se
pueden modificar mediante programación, lo que nos saca del objetivo de este curso. Un
uso común que suelen tener es el de representar los textos introducidos mediante Textos
de Entrada (ver siguiente punto).
Tienen multitud de propiedades, accesibles desde el Panel Propiedades, se puede
decidir el número de líneas que van a tener, se puede introducir texto HTML, se puede
añadir fácilmente un borde al texto o dar nombre a la variable que represente al texto
Dinámico.
Una opción interesante es el botón , que nos permite
indicar qué caracteres incluir en el archivo SWF. Aquí debemos de indicar los carácteres
que esperamos que muestre el texto dinámico.


Al editar nuestra película, distinguieremos los textos dinámicos por aparecer
enmarcados en una línea discontinua.
4.6. Introducción de texto
El Texto de Entrada o Introducción de texto tiene básicamente las mismas
propiedades que el Texto Dinámico, junto con algunas propias de un tipo de texto
orientado a la introducción de datos por parte de usuario, como por ejemplo el número
máximo de líneas que puede introducir en ese campo de texto o si queremos que lo que el
usuario escriba en dicho campo aparezca como asteriscos (para las contraseñas).
Evidentemente este tipo de texto se reflejará en nuestra película como un recuadro de
texto SIN contenido, ya que lo deberá introducir el usuario.
Como hemos mencionado antes, este tipo de texto se puede combinar con el Texto
Dinámico.
Para aprender a cambiar el tipo de texto, te aconsejamos realizar el ejercicio
. Unidad 4. Ejercicio paso a paso: Cambiar el tipo de texto
Objetivo.
Crear un texto cualquiera y asignarle el Tipo que más nos interese.
Ejercicio paso a paso.
1. Abre el archivo trabajo.fla, utilizado en ele ejercicio anterior.
2. Selecciona el texto que creamos en el ejercicio anterior.
3. Hacemos clic en el Panel Propiedades, si es que teníamos minimizado este Panel.
4. Una vez podamos ver el panel seleccionamos el desplegable en la que pondrá el
tipo de texto y elegimos el tipo de texto que queramos.
Veremos que, al hacer clic fuera del texto, cambia la línea que rodea al recuadro de
texto, pasando a ser discontinua y no desapareciendo aunque no escribamos nada
dentro. (Los textos estáticos desaparecen si no escribes nada y haces clic en
cualquier lugar del escenario). Esto es lógico, ya que los textos Dinámicos y los de
entrada no tienen porque tener "contenido".




Panel Propiedades

Flash permite crear animaciones de texto tan interactivas como las que pueden crear
con imágenes (ya hemos visto lo sencillo que es convertir un texto en un enlace a otra
página web). Aún así, crear animaciones con textos, que sobrepasen a las que Flash
incorpora por defecto (colores, transparencias, brillos, rotaciones, movimientos o


combinaciones de estos) puede resultar un trabajo de muchísimas horas y mucha
paciencia. Los resultados son increíbles, pero puede resultar recomendable en estos
casos usar algunos programas diseñados con este objetivo. Entre otros destacan el
Swish, el FlaX o el MiX-Fx, con ellos podrás crear efectos de texto asombrosos en pocos
minutos, aunque no podrás gozar del entorno de Flash CS4 ni podrás emplear el resto de
herramientas de que dispone.
4.7. Incorporar Fuentes
Al crear un archivo de flash, y utilizar texto dinámico o textos de entrada, tenemos que
tener presente que si hemos elegido una fuente que no está disponible en el sistema que
se reproduce la película, se sustituirá por otra fuente disponible. Esto es un problema, ya
que puede alterar bastante nuestro diseño.
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.
Esto sólo será necesario hacerlo para los textos dinámicos, ya que el texto estático
se guarda como un gráfico vectorial, y no habrá problemas.
Para incorporar una fuente en la película hacemos clic derecho en alguna parte vacía
de la Biblioteca, y seleccionamos Nueva fuente.
Se abrirá el siguiente cuadro de diálogo:

En el desplegable Fuente seleccionamos la fuente que deseamos utilizar.
Seleccionamos los estilos que vamos a utilizar (Negrita, Cursiva y Tamaño).
El nombre que le demos se mostrará en la Biblioteca y estará lista para utilizarse.
Cuando creemos un campo de texto dinámico o de entrada, seleccionamos nuestra
fuente, que aparecerá señalada con un asterisco (*).



De esta forma nos aseguramos que nuestro proyecto se verá tal cual lo creamos.
Ejercicios unidad 4: Textos
Ejercicio 1: Crear Textos Estáticos
1. Crea una película con 1 fotograma.
2. Crea un objeto de tipo texto estático que diga: Bienvenido a mi página web.
3. Utiliza la fuente Verdana a un tamaño de 45.
Ayuda ejercicios unidad 4: Textos
Ejercicio 1: Crear Textos Estáticos
1. Creamos la película mediante Archivo → Nuevo, eligiendo Achivo de Flash (AS
3.0) (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 página web.
5. Centra el texto haciendo clic en en el Panel de Propiedades.
6. Cambia la fuente del texto a Verdana seleccionándola en el desplegable
.


7. Por último cambia el tamaño del texto a 45 este controles:

8. Prueba evaluativa unidad 4: Textos
10. Sólo una respuesta es válida por pregunta. Haz clic en la respuesta que consideres
correcta.
Contesta todas las preguntas y haz clic en el botón Corregir para ver la solución.
Si pulsas Restablecer podrás repetir la evaluación.
1. Flash CS4 no puede trabajar con textos, ya que es un programa para realizar
animaciones gráficas.
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 más propias de CSS que de HTML, como por
ejemplo, sangrados de párrafo, espacios entre caracteres...
a) Verdadero
b) Falso
4. Flash es el único programa que crea animaciones de texto fácilmente.
a) Verdadero
b) Falso
5. ¿Cuál de estas 3 afirmaciones es correcta?.
a) Un texto estático no puede cambiar de posición durante toda la película.
b) Un texto estático no puede cambiar de posición mientras duren los fotogramas en
los que está incluido.
c) Un texto estático puede cambiar de posición sin que por ello deje de ser estático.
6. ¿Cuál de las siguientes afirmaciones es falsa?.
a) Los textos Dinámicos sirven, entre otras cosas, para mostrar datos al usuario
introducidos desde otros campos de texto.


b) A los textos de entrada se les debe desactivar la opción Borde, sino, pasan a ser
textos Dinámicos.
c) Los textos de entrada leen cadenas de caracteres introducidas por el usuario y
pueden almacenarlas en variables que podremos usar después.
7. Es posible modificar el tamaño 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. Los textos introdución de texto y los dinámicos pueden ser modificados a voluntad
por el usuario siempre.
a) Verdadero
b) Falso
9. Los textos de Entrada no comparten propiedades con los textos estáticos o
dinámicos.
a) Verdadero
b) Falso
10. Este botón sirve para cambiar el texto a subíndice o superíndice
a) Verdadero
b) Falso























Unidad 5. Sonidos (I)
5.1. Comenzando
¿Quién sería capaz de ver una película muda? ¿Y una animación espectacular sin
sonido?
Hasta hace poco, los únicos sonidos que oíamos en las páginas web eran los famosos
"midis", de escaso tamaño y de escasa calidad. De hecho, eran sólo instrumentos
musicales sin voz, de ahí su pequeño tamaño (y calidad). Aún así, siempre existía algún
creador de páginas web que se aventuraba a poner algún sonido complejo (.wav o .mp3)
en su página web, por desgracia, su carga es tan lenta, que la mayoría de los visitantes se
irían de la página sin llegar a escucharla.
Hoy, gracias a las conexiones de banda ancha orientadas a contenido multimedia,
poner sonido a las páginas web es un poco más fácil, ¿qué aporta FLASH?
Flash nos permite insertar cualquier sonido que queramos en nuestras películas (.wav,
.aiff, .mp3, etc...) de forma fácil y muy efectiva, ya que es capaz de acelerar la descarga
del sonido siempre y cuando se descargue junto con nuestra película.
Podemos dar a la película efectos simples (el típico "clic" al pulsar un botón), efectos
complejos (música de fondo) e incluso podemos hacer que la animación se desarrolle
conjuntamente con una música (si bien esto último necesitaría que toda la película
estuviera descargada previamente, para evitar "atascos" durante el desarrollo de la
animación). En definitiva, Flash nos lo vuelve a poner fácil.
5.2. Importar Sonidos

Si alguna vez habéis intentado añadir un sonido a vuestra animación Flash
probablemente os hayáis llevado una gran decepción al no conseguirlo. Esto se debe a
que no se tiene en cuenta que para poder emplear un objeto en nuestra película, o bien lo
creamos nosotros (como llevamos haciendo hasta ahora) o bien lo conseguimos de
cualquier otro modo y lo insertamos en nuestra película.
A esto último se le llama "Importar" y se puede hacer con sonidos, gráficos, e incluso
con otras películas Flash. Importar por tanto, no es más que decirle a Flash que añada un
determinado archivo a nuestra película, para que podamos usarlo cuando queramos. En
realidad, lo añade a nuestra Biblioteca, que es el Panel en el que están todos los objetos
que participan en la película (este Panel se verá más adelante).


Así pues si queremos manejar un sonido en nuestra película, 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 diálogo de Importar a biblioteca. Allí deberás 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
película. Selecciónalo haciendo clic sobre él y haz pulsa el botón Aceptar.
El sonido estará listo para usarlo donde quieras, podrás encontrarlo en la Biblioteca
(menú Ventana → Biblioteca).
Unidad 5. Sonidos (II)
5.3. Propiedades de los Sonidos
En Flash CS4, 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
ningún 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 de Propiedades
Nombre: En este desplegable nos aparecerán las canciones que tenemos
importadas, deberemos seleccionar la canción que pretendamos añadir a nuestra película
(en el siguiente punto veremos cómo insertarlo). Si no queremos reproducir sonido,
seleccionamos Ninguno.
Efecto: Desde aquí podremos añadir algún efecto a nuestro sonido, como por
ejemplo que el sonido pase del canal izquierdo al derecho (esto crea la sensación 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 añadir complejos efectos sonoros, deberemos tratar adecuadamente el
sonido con algún programa creado específicamente para este propósito antes de
importarlo.
En el punto Editar Sonidos se tratará en más profundidad estos efectos.
Sinc: Esta opción 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 opción por
defecto y provoca que el sonido se empiece a reproducir al pasar la película por el
fotograma en el que está situado. También se puede sincronizar el sonido con
botones y los demás tipos de símbolos. 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 opción sincroniza el sonido con el o los objetos con los que esté
asociado, por tanto, si la carga de la película es lenta y las imágenes no fluyen
adecuadamente, el sonido se detendrá para sincronizarse con ellas. Este efecto
puede dar la sensación de que la película 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 reacción muy negativa en los que
pueden estar viendo nuestra película).
Por otra parte, es un efecto muy adecuado para algunas situaciones, por ejemplo, el
efecto de que un personaje hable durante una película. En esta situación, es muy
recomendable que el sonido y las imágenes estén sincronizadas.
Repetir: Determina el número de veces que se reproducirá el sonido según lo que
escribas en la caja de texto de la derecha. También puedes seleccionar Reproducir
indefinidamente para que el sonido se reproduzca en un bluce hasta llegar al siguiente
fotograma clave.
No recomendamos insertar sonidos con la opción Flujo y a la vez la de Repetir, ya que
al estar sincronizados los sonidos con las imágenes, provocaríamos que las imágenes (y
los fotogramas que las contengan) se dupliquen también, aumentando considerablemente
el tamaño de la película.












Unidad 5. Sonidos (III)
5.4. Insertar un Sonido

Una vez importado el sonido, vamos a configurarlo para que se reproduzca como
queramos:
Sonido en la línea de tiempo.
Veamos cómo hacer que el sonido se reproduzca con nuestra película.
Lo mejor será crear una nueva capa para cada sonido. Así lo controlaremos
fácilmente. Después, arrastramos el sonido de la biblioteca al escenario, sobre la
nueva capa.
Con el primer fotograma de la nueva capa seleccionado, accedemos a sus
propiedades, a la sección de Sonido.
Seleccionamos el Nombre del archivo, los efectos deseados, y las veces que lo
queremos Repetir.
En el menú Sinc. Seleccionamos la opción de sincronización 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
reproducción del sonido a partir de ahí, marcamos Inicio. Si queremos inciar el sonido en
un fotograma más 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
que importarlo todo cuando genera un archivo más grande? Por supuesto, podemos ahcer
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 sería utilizar la opción Flujo.



Al seleccionar esta opción, el sonido se reproducirá hasta que se acabe o llegue a un
fotograma clave, siguiendo la película. Sólo es aconsejable esta opción si realmente la
necesitamos.
En esta animación, veremos cómo:
Para practicar la inserción de sonidos realiza:
Unidad 5. Ejercicio paso a paso: Trabajar con Sonidos
Objetivo.
Insertar un sonido que reproduzca desde el fotograma 5 al 15.
Ejercicio paso a paso.
1. Creamos la película mediante Archivo → Nuevo, eligiendo Archivo de Flash (AS
3.0) (por defecto tendremos un único fotograma).
2. Creamos una nueva capa (icono Nueva capa de la línea de tiempo) y la
seleccionamos.
3. Insertamos un nuevo fotograma clave en la línea de tiempo en el fotograma 5 y 15
(desde el Menú Insertar → Línea 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 clásica 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. Después seleccionamos el sonido en el Panel Biblioteca y lo arrastramos hasta el
escenario (hasta el fotograma actual).
9. Por defecto, en propiedades, la opción Sinc. está marcada como Evento. Prueba la
película (tecla Intro) y comprobarás que el sonido se reproduce hasta al final.
Pulsa varias veces Intro y comprobarás que el sonido se reproduce varias veces
solapándose.
10. 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 aún no ha acabado.
11. Selecciona el fotograma clave 15.
12. En el Panel Propiedades, en Sonido, elige el Nombre del archivo que estamos
utilizando.
13. En la opción Sinc selecciona Detener.
14. Prueba la película y comprobarás que ahora se detiene al llegar la fotograma 15.

Sonidos en objetos.
Como clips de película y botones tienen líneas de tiempo propias, como ya veremos,
podemos insertar ahí los sonidos como hemos visto hasta ahora, por ejemplo, para hacer
que al pulsar un botón se reproduzca un clic.












Unidad 5. Sonidos (IV)
5.5. Editar Sonidos
Flash no fue creado como un editor de sonidos, por lo que su potencia en este campo
es limitada. Aún así, los efectos que permite aplicar de un modo sencillo suelen ser
suficientes para cualquier animación que queramos realizar. Disponemos de estos
efectos:
Canal Izquierdo: El sonido tan sólo se escuchará por el altavoz izquierdo.
Canal Derecho: El sonido tan sólo 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 opción nos permite "editar" el sonido de un modo rápido y
sencillo. Desde este editor podemos decidir qué volumen tendrá nuestro sonido y en
qué altavoz. Podemos crear los efectos anteriores ajustándolos a nuestro gusto y
podemos crear efectos más complejos a nuestra medida.

Esta es la apariencia del cuadro de diálogo Personalizar Sonido. La parte superior
representa el canal izquierdo y la parte inferior el canal derecho. Entre las 2 partes hay
una línea de tiempo que nos indica el tiempo de sonido transcurrido en cada punto.
Las líneas 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
máximo), pero el canal derecho empieza en silencio, para poco a poco alcanzar el
volumen normal (este efecto equivaldría a un Aumento Progresivo en el canal derecho).
Unidad 5. Sonidos (V)
5.6. ¿Mp3 o Wav?
Como ya se ha comentado, los sonidos que Flash CS4 puede importar casi
cualquier tipo de sonido, aunque los más empelados son MP3 y WAV. Si no sabes
las diferencias entre estos tipos de archivos, puedes consultar nuestro tema básico
(Unidad 5. Básico: Sonidos MP3 y WAV
Sonidos WAV
Los sonidos con extensión WAV (.wav) son sonidos con una calidad muy buena,
concretamente, su calidad es unas 13 veces inferior a un sonido original, cantidad más
que aceptable si tenemos en cuenta que, por ejemplo, el sonido de una llamada telefónica
es 100 veces peor que el sonido original y un sonido que escuchamos por la radio (FM),
es unas 24 veces peor que el original. Partiendo de ahí, comprenderemos que el espacio
que ocupa en el disco duro sea muy grande.
¿Es necesaria tanta calidad? ¿Es necesario siempre que el sonido sea completamente
limpio? Evidentemente no, y es por esto que surgen otros formatos de audio, otros
formatos que sin perder mucha calidad, consigan ahorrar espacio en el disco duro (y en
nuestras películas Flash) y den flexibilidad a estos sonidos que antes era imposible
manejar dado su tamaño. (Una canción de 4 minutos de duración ocupa 50 MBytes en
formato WAV).
El formato de audio que ha adquirido mayor popularidad es el formato MP3. Veamos
por qué.
Sonidos MP3
El MP3 (.mp3) es una tecnología de compresión de archivos de audio. Su nombre
completo es MPEG-1 Audio Layer 3 y surgió hace unos 15 años con el objeto de reducir el
enorme tamaño que ocupaban hasta entonces los archivos de audio (por ejemplo, los
WAV).
MP3 consigue combinar calidad de sonido con un tamaño de archivo pequeño,
convirtiéndose en un standard de audio en Internet. Su clave se encuentra en que un


sonido MP3 no contiene todos los detalles del audio que no son captables por el oído
humano y que sí que están en los sonidos originales. Es decir, si un detalle del sonido no
puede ser escuchado por el oído humano, ¿por qué no eliminarlo?
Y así se hace, el resultado es un sonido prácticamente idéntico (muchas veces
completamente idéntico, depende del grado de compresión aplicado) al sonido original. A
este sonido sin información innecesaria, se le aplican unos métodos de compresión muy
potentes y el resultado final es un archivo de audio MP3, con una calidad buena y un
tamaño muy reducido (la canción de 4 minutos del ejemplo anterior pasa a ocupar sólo 3,9
MBytes), lo que nos permite almacenar un número casi ilimitado de canciones en nuestro
ordenador, en CDs, en nuestro reproductor MP3 o trabajar con ellas en Internet...)

Por tanto, cuando queramos añadir un sonido a nuestra película, 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 extensión .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 ¿Cuál es mejor? ...
Esta pregunta es más importante de lo que parece, ya que si decidimos que nuestra
película tenga sonidos, deberemos asumir una carga muy importante en cuanto a tamaño
de la película y en consecuencia en cuanto a tiempo de descarga. Lo habitual es que los
sonidos ocupen más de la mitad del espacio total y muchas veces no valdrá la pena
insertarlos...
Una vez decididos a insertar el sonido, la lógica 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 película. Esto es una aproximación, ya que Flash comprime todo aquello que
insertamos en nuestras películas.
Como ya sabemos, los sonidos .mp3 ocupan un espacio mucho menor que los sonidos
.wav (10 veces menos o más), 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 extensión .mp3, ¿podrá Flash volver a
comprimirlo? La respuesta es NO. Flash comprime los sonidos que insertamos en
nuestras películas, 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 más de
lo que comprime el formato .mp3, para ver bien este aspecto, hemos preparado varios
ejemplos...
Ejemplo:
Contamos con una película con un único frame que está vacío. Esta
película, 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 prácticamente idéntica).
Ahora insertamos el sonido .wav en la película original y la exportamos
(esto se trata en el último tema).
Resultado: Una película con sonido (película 1) que ocupa 37KB.
Insertamos después el sonido .mp3 en la película original.
Resultado: Una película con sonido (película 2) que ocupa 145 KB
Conclusión: La película 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 compresión de audio que logra Flash es muy
grande). Como contrapartida, podría apreciarse pérdida de calidad en el
sonido que se escucha en la película 1. Esta pérdida será importante
según el tipo de sonido que sea. Si es una voz, por ejemplo, deberíamos
insertar .mp3 ya que necesariamente deberá escucharse bien, si es
música de fondo, es probable que aunque se pierda calidad, el resultado
final sea aceptable y sea conveniente quedarnos con la película de menor
tamaño. Lo mejor es probar ambas versiones y evaluar el resultado.
Por último, comentar que Flash no puede importar sonidos en formato MIDI (.mid). Aún
así, si estamos empeñados en que en nuestra animación 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 Java script.
Igualmente, como se comentó en el Tema 1, Flash CS4 permite cargar sonidos de un
modo dinámico (sin que ocupen espacio), esto se tratará en el Tema 17 "Action Script".



Ejercicios unidad 5: Sonidos
Ejercicio 1: Importar Sonidos
1. Crea una película con 1 fotograma.
2. Localiza el archivo sonido.mp3 en la carpeta de ejercicios.
3. Impórtalo a tu película.
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 combinación de teclas te permite "probar" la película).
7. Consigue que el sonido deje de escucharse al llegar la película 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.
Ayuda ejercicios unidad 5: Sonidos
1. Creamos la película mediante Archivo → Nuevo, eligiendo Archivo de Flash (AS
3.0) (por defecto tendremos un único fotograma) .
2. Seleccionamos Importar → Importar a Biblioteca, que se encuentra en el Menú
Archivo.
3. Se abrirá la clásica 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. Después 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 número 4 (insertando fotogramas normales
desde el Menú Insertar → Línea de Tiempo → Fotograma).



10. Insertamos un nuevo fotograma en la línea de tiempo. En la posición 5 (desde el
Menú Insertar → Línea de Tiempo → Fotograma Clave).
11. Abrimos el Panel Propiedades y seleccionamos uno de los fotogramas del 1 al 4.
12. En la opción Sinc seleccionamos Flujo.
13. Acabamos de conseguir que el sonido sólo se reproduzca cuando esté en los
fotogramas indicados.
14. Insertamos un nuevo Fotograma Clave en la posición 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 opción Sinc seleccionamos Inicio
Debe quedar parecido al gráfico:

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 pestaña Efecto que se encuentra
en el Panel Sonidos.
3. Seleccionamos Personalizar dentro de la pestaña 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 más baja para quitarle el sonido y en su
parte más alta para dárselo. Jugamos con los volúmenes de ambos canales hasta
obtener el efecto deseado. Podemos ir probando cómo queda pulsando el Play que
acompaña este Panel.
5. Prueba evaluativa unidad 5: Sonidos
7. Sólo una respuesta es válida por pregunta. Haz clic en la respuesta que consideres
correcta.
Contesta todas las preguntas y haz clic en el botón Corregir para ver la solución.
Si pulsas Restablecer podrás repetir la evaluación.
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, cuántas veces y qué efectos queremos
darle.
a) Verdadero
b) Falso
4. La calidad del sonido es importante a la hora de importarlo en nuestra película.
a) Verdadero
b) Falso
5. ¿Cuál 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 función de ciertos parámetros tales como el tamaño, 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 pérdida 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 películas es mejor utilizar el método...
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 sensación 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. Iniciación
En los primeros temas vimos las herramientas para dibujar elementos en nuestra
película, obteniendo formas. En este tema profundizaremos en cómo trabajar con estas
formas u objetos, para ajustarlos a nuestras necesidades.

Independientemente de si estamos trabajando en una animación, en una página web,
en un catálogo 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
película y sea visible, de modo que podamos trabajar con él, por ejemplo, cualquier
imagen que creemos o importemos, un botón, un dibujo creado por nosotros mismos etc...
Los objetos así considerados tienen 2 partes fundamentales:
El Borde: Consiste en una delgada línea que separa el objeto del exterior, del
escenario. Puede existir o no, según 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 Lápiz, Línea 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 más que el propio objeto sin borde. Es, por tanto, la parte
interna del objeto. Su existencia también 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 para indicar que
están seleccionadas.

Objeto SIN seleccionar

Objeto con el BORDE seleccionado

Objeto con el RELLENO seleccionado

Veamos cómo 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 líneas) de un mismo color que estén en contacto:
Hacer doble clic sobre una de las líneas que tenga el color que pretendamos seleccionar.
Seleccionar un Símbolo, un texto, o un grupo: Clic en el Símbolo, en el texto o en el
grupo. Estos tipos de objetos mostrarán un borde de color azul (por defecto, depende de
la capa) al estar seleccionados.
Seleccionar Varios elementos: Mantendremos pulsada la tecla SHIFT (Mayúsculas)
mientras seleccionamos los objetos que queramos.
Seleccionar los objetos que se encuentran en una determinada zona: Para ello
usaremos la Herramienta Selección (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, sólo quedará seleccionada la parte del objeto
que esté dentro del área que hemos delimitado. Si quisiéramos incluir dicho objeto,
bastaría con usar la tecla SHIFT y seleccionar la parte del objeto que falta por seleccionar.
Este modo de seleccionar objetos permite seleccionar muchos objetos rápidamente,
además de permitirnos seleccionar determinadas zonas de los objetos, para cortarlas,
pegarlas ...
Además de la Herramienta Flecha, también podemos usar la Herramienta Lazo, más
útil aún 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 Línea de Tiempo: Si seleccionamos un determinado
fotograma en la línea de tiempo, se seleccionan automáticamente todos los objetos que
estén en dicho fotograma. Esto es útil para modificar de un modo rápido todos los
elementos del fotograma.
Seleccionar Todo: La forma más natural de seleccionar todo, consiste en hacer clic en
el menú Edición → 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 cómo colocarlos en el Escenario.
Para colocarlos de un modo preciso (por no decir exacto), Flash pone a nuestra
disposición el Panel Alinear. Este Panel lo podemos encontrar en el Menú Ventana →
Alinear. Así funciona:

El Panel Alinear permite colocar los objetos tal y cómo le indiquemos. Antes de ver las
posibilidades, debemos hacer hincapié en la opción En Escena. Esta opción nos permite
decir a Flash que todas las posiciones que indiquemos para nuestros objetos tomen como
referencia el escenario.



Si esta opción no está seleccionada, los objetos toman como referencia al conjunto de
objetos en el que se encuentran, y se colocan en función de ellos. Lo más habitual es
seleccionar En Escenario, para que los objetos se coloquen según los límites de la
película, en el centro del fotograma etc...
Conozcamos un poco mejor el Panel Alinear y sus posibilidades:
Alineamiento: Sitúa los objetos en una determinada
posición 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 quisiéramos situar un objeto en la
esquina inferior izquierda, bastaría pulsar el primer y el sexto botón consecutivamente.
Distribuir: Sitúa los objetos en el escenario en función de
unos ejes imaginarios que pasan por cada uno de ellos, de modo que la distribución de los
mismos sea uniforme. Por ejemplo, si tenemos 2 cuadrados y pulsamos el primer botón de
la izquierda. Cada uno de los 2 cuadrados se situará en un extremo de la película (uno
arriba y otro abajo).
Coincidir Tamaño: Hace coincidir los tamaños de los objetos. Si está
activo "En Escena" estirará los objetos hasta que coincidan con el ancho y el largo de la
película. Si no está activo, la referencia será el resto de objetos. Por ejemplo, si tenemos 2
cuadrados distintos y la opción "En Escena" no está activada, al hacer clic en el primer
botón de "Coincidir Tamaño", el cuadrado más estrecho pasará a tener la anchura del
cuadrado más ancho. Si "En Escena" 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, podéis ver la animación situada arriba al
principio del capítulo.

Para practicar la alineación te aconsejamos realizar:


(Unidad 6. Ejercicio paso a paso: Alineación de objetos
Objetivo
Crear un texto cualquiera y asignarle las propiedades que más nos interesen.
Ejercicio paso a paso
1. Abre un archivo nuevo.
2. Dibuja 4 rectángulos de diferentes colores situados en diferentes puntos del
escenario.
3. Haz clic en la herramienta Selección.
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 botón del ratón
arrastramos hasta la esquina inferior derecha y soltamos (asegúrate de que todos
los elementos se encuentran en el área de selección).
5. Abrimos el panel de Alineación, esta vez lo haremos pulsando la combinación de
teclas CTRL + K (aunque también podrías abrirlo desde el menú Ventana).
6. Marca la opción En escena .
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 (aun selecionados) a la izquierda del escenario haciendo
clic en .
Fíjate que los objetos ahora se han movido al lado contrario. Alineándose su borde
izquierdo con el borde izquierdo del escenario.)

6.4. Panel Información

Además de controlar la posición de los objetos desde el Panel Alineamiento, también
podemos hacerlo, de un modo más exacto (más matemático) desde otro panel, el Panel
Información.
A este Panel se puede acceder desde el Menú Ventana → Información. 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 número que represente el tamaño de
nuestro objeto en la medida seleccionada en las Propiedades del documento. An: hace
referencia a la anchura y Al: a la altura.
Situación del objeto: Desde aquí controlamos la posición 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 también van en función de las medidas elegidas para la
película.
Color Actual: Indica el color actual en función de la cantidad de Rojo (R), Verde
(V), Azul (A) y efecto Alfa (Alfa) que contenga.
Este indicador puede ser engañoso, el motivo es que indica el color que tiene el objeto
por el que en ese momento pasamos el cursor del ratón. Por tanto, podemos tener
seleccionado un objeto (haciendo clic en él) y ver en el Panel Información su tamaño y su
posición, pero al desplazar el ratón, 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.
Posición del Cursor: Indica la posición del cursor. Es útil por si queremos que
suceda algo en la película al pasar el cursor justo por una posición determinada o para
situar partes del objeto en lugares específicos.
6.5. Los Grupos

Un Grupo no es más 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 después 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


demás. Además, aparece el rectángulo azul (por defecto) que rodea al grupo, definiéndolo
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, ahorrándonos 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 tamaño
de los coches. Podemos aumentar el tamaño de los coches de uno en uno, corriendo el
riesgo de aumentar unos más que otros y perdiendo las proporciones entre ellos, o
podemos formar un grupo con los coches y aumentar el tamaño del grupo, de modo que
aumenten todos de tamaño a la vez y en la misma proporción. De igual modo, podemos
mover al grupo de posición, hacer que gire...
Al crear un grupo, simplemente estamos dando unas propiedades comunes a un
conjunto de objetos y, en ningún caso perdemos nuestro objeto. En cualquier momento
podemos deshacer el grupo, mediante el Menú Modificar → Desagrupar.
Además, 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ú
Edición → Editar Seleccionado. Podremos editar los objetos que componen el grupo por
separado teniendo en cuenta que, como es lógico, los cambios realizados afectarán al
grupo además de al elemento en cuestión.










Ejercicios unidad 6: Trabajar con objetos
Ejercicio 1: Rellenos y Bordes
1. Crea dos rectángulos con el interior de color verde y el borde negro.
2. En uno de ellos elimina el Relleno (rectángulo de la izquierda en la imagen).
3. En el otro, elimina el borde (rectángulo 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 Selección (Flecha).
4. Selecciona 3 únicamente los bordes de 3 de ellos.
Ejercicio 3: Alinear Objetos
1. Dibuja 4 objetos (círculos, rectángulos...).
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 posición (colócalos, por ejemplo, en el centro de la película).
3. Desagrúpalos.
Ayuda ejercicios unidad 6: Trabajar con objetos
Ejercicio 1: Rellenos y Bordes
Se nos pide crear 2 rectángulos 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 Rectángulo y dibujamos 2 rectángulos.

Los 2 rectángulos originales
2. Hacemos clic en el interior del primer rectángulo y pulsamos la tecla suprimir Supr.
3. Hacemos doble clic en el borde del otro rectángulo y volvemos a pulsar la tecla
suprimir Supr.

Rectángulo sin Relleno y Rectángulo sin Borde
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
rectángulo) y dibujamos 5 óvalos.
2. Hacemos doble clic en el relleno del primer círculo (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 círculos
cualesquiera.
Ahora hacemos lo mismo usando la Herramienta Selección (Flecha), como pide el
segundo apartado.
1. Hacemos clic en una zona del escenario que nos permita capturar 3 círculos.
2. Arrastramos el ratón hasta crear un área que envuelva completamente a 3 de los 5
círculos.
3. Si quedara alguna parte del círculo fuera de la selección, basta con usar la tecla
SHIFT para añadirlo a la selección actual.
Ahora se nos pide seleccionar únicamente los bordes de 3 de ellos.
1. Hacemos clic en el borde del primer óvalo (si hiciéramos 2 clics se seleccionarían
todos los bordes del mismo color que estén en contacto con el borde sobre el que
hacemos clic).
2. Mantenemos pulsada la tecla SHIFT y repetimos el proceso con 2 óvalos más.


Nota: Si en vez de óvalos hubieran sido rectángulos, hubiera hecho falta hacer 2 clics
en el borde de cada rectángulo para que este quede totalmente seleccionado.
Compruébalo 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 rectángulos.
2. Abrimos el Panel Alinear. desde el menú Ventana → Alinear.
3. Hacemos clic en En Escenario para que las distribuciones de los objetos se hagan
en función del tamaño del fotograma.
4. Seleccionamos el primer objeto y hacemos clic en para alinear el objeto en el
extremos izquierdo de la película.
5. Hacemos clic en para situarlo en el borde superior de la película. 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 y
.
7. Para alinear el tercer objeto en la esquina inferior izquierda hacemos clic en y
.
8. Para alinear el cuarto objeto en la esquina inferior derecha hacemos clic en y
.
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 unidad 6: Trabajar con objetos
Sólo una respuesta es válida por pregunta. Haz clic en la respuesta que consideres
correcta.
Contesta todas las preguntas y haz clic en el botón Corregir para ver la solución.
Si pulsas Restablecer podrás repetir la evaluación.
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 ningún 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. preguntaCon la Herramienta Selección (Flecha) podemos seleccionar áreas de
cualquier forma y tamaño (y los objetos que se encuentren en ellas).
a) Verdadero
b) Falso
8. Si hacemos clic en la Línea de Tiempo, se seleccionan todos los objetos existentes en
el fotograma seleccionado.


a) Verdadero
b) Falso
9. ¿Cuál de estas 3 afirmaciones es correcta?.
a) La tecla SHIFT selecciona objetos únicos en la película.
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 añadir más
objetos a nuestra selección actual.
10. ¿Cuál de las siguientes afirmaciones es falsa?.
a) Los Grupos permiten tratar a todos los objetos que los forman como a uno sólo.
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 sóla vez
manteniendo la distancia entre ellos.
11. El Panel Información muestra información acerca de los objetos que tenemos
seleccionados.
a) Verdadero
b) Falso
12. La opción En Escena del Panel Alinear no tiene importancia, pues se usa para centrar
el objeto seleccionado en el escenario.
a) Verdadero
b) Falso
13. El Panel Información 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, según la referencia
del escenario o la de otros objetos.
a) Verdadero
b) Falso
Unidad 7. Las Capas (I)


7.1. Las Capas. Entendámoslas
Todo el mundo ha visto alguna vez cómo trabajan los dibujantes de dibujos animados.
Y todos hemos visto cómo colocan una hoja semitransparente (láminas de acetato) con
dibujos sobre otras y la superposición 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 mayoría 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 Línea de Tiempo y por tanto, sus distintos fotogramas se
reproducirán simultáneamente.
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 portería de fútbol. En la otra los fotogramas del 1 al 5 contienen
el dibujo de un portero (del 5 en adelante están vacíos).
Pues bien, esta película nos mostrará inicialmente (durante el tiempo que duren los
primeros 5 fotogramas) la portería con el portero, para después (durante los fotogramas
del 5 al 10) mostrar la portería sin portero.
De este modo la portería es independiente del portero, y podemos tratar estos objetos
con total libertad, ya que no interfieren entre ellos para nada.



Otra razón para separar los objetos en capas, es que Flash nos obliga a colocar
cada animación distinta en una capa. De lo contrario, todos los objetos que se
encuentren en dicha capa formarán parte de la animación. Si queremos que un objeto no
forme parte de una animación, deberemos quitarlo de la capa en la que se produce dicha
animación.
Siguiendo con el ejemplo del portero, si quisiéramos crear un movimiento que haga que
el portero se desplace hacia un lado no hay ningún inconveniente, pero si la portería
estuviera en la misma capa que el portero, entonces ambos objetos se moverían hacia
dicho lado, con lo que resultaría imposible que sólo se moviera el portero. La solución es
separar los objetos en 2 capas, como ya hemos hecho.
Las capas además, tienen otras utilidades, nos permiten ordenar nuestra película de
forma lógica, y nos ayudan en la edición de dibujos (evitando que se "fundan" en uno sólo,
o bloqueando el resto de capas de modo que sólo podamos seleccionar la capa que nos
interese).
Otro motivo es para organizar mejor nuestro contendio. Igual que creábamos una
capa para los elementos de audio, crearemos capas para otros elementos, como el código
ActionScript.




Unidad 7. Las Capas (II)
7.2. Trabajar con Capas

La vista estándar de una capa es la que muestra la imagen. Veamos para qué sirven
los distintos botones y cómo 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 verán los distintos tipos de
capas).
Crear carpeta : Nos sirve para crear carpetas, que nos ayudarán 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 en 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 más de menor importancia.



Aquí puedes cambiar diferentes opciones sobre la capa, como su nombre o su color.
También puedes bloquearla u ocultarla.
Pero haremos especial hincapié en la opción Tipo cuyas opciones, Guía y Máscara,
veremos más adelante en el curso.
Unidad 7. Las Capas (III)
7.3. Trabajar con Capas. Opciones Avanzadas

Mostrar / Ocultar Capas : Este botón permite ver u ocultar todas las capas de la
película. Es muy útil cuando tenemos muchas capas y sólo queremos ver una de ellas ya
que permite ocultar todas a la vez, para después mostrar sólo 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 edición 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 botón nos muestra/oculta los
contenidos de todas las capas como si sólo estuviesen formados por bordes. De este
modo y ante un conjunto numeroso de objetos, podremos distinguirlos a todos de forma
fácil y podremos ver en qué capa está cada uno de ellos.
También 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 opción, lo mismo sucede con el botón Bloquear
capas. En la columna Mostrar capas como contornos aparece un cuadrado con relleno,
lo que simboliza que los objetos se mostrarán completos y no sólo 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 opción.
Además, 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 podéis ver cómo queda un objeto en función de tener activada o no
la opción contorno:

7.4. Reorganizar las Capas



Como ya se ha comentado, las distintas capas tienen muchas cosas en común unas
con otras. Lo primero y principal es la Línea de tiempo, todas las capas de una misma
escena comparten la misma línea de tiempos y por tanto, los objetos de todos los
fotogramas 1 de todas las capas se verán al mismo tiempo en la película superpuestos
unos sobre otros. ¿y qué objeto está delante de los demás? Pues este criterio viene dado
por la colocación de las Capas en la película. Los objetos que se mostrarán delante de
todos los demás serán aquellos que se encuentren en la capa situada más arriba.
Es decir, si nos fijamos en el ejemplo anterior:
El portero aparece delante de la portería, porque la capa "Portero" está situada encima
de la capa "Portería", como puede apreciarse en la imagen. Si quisiéramos cambiar esta
distribución, basta con hacer clic en la capa que queramos mover y arrastrarla hacia arriba
o hacia abajo hasta la posición deseada.
Veremos como los objetos se colocan delante o detrás de los de la capa seleccionada
según 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. También se puede Copiar el
fotograma y luego pegarlo en la capa de destino.









Unidad 7. Las Capas (IV)
7.5. Tipos de Capas
Como habréis podido comprobar al ver las propiedades generales de una capa o al
hacer clic con el botón derecho del ratón 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 más usadas y se emplean para
todo, colocar objetos, sonidos, acciones, ayudas...
Capas animación movimiento : Son las capas que continenen una animación
por interpolación de movimiento.
Capas Guía / : Son capas especiales de contenido específico. 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 misión es representar la trayectoria de un objeto
animado, su contenido suele ser una línea (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 línea curva. La segunda capa la hemos definido como
Capa Guía, para que al realizar la animación de movimiento (esto lo veremos en un tema
posterior) su contenido no se vea en la película, sino que sirva de recorrido para la
bola azul.
Es importante recordar que el contenido de las Capas Guía no se verá en la película
final. Su efecto hará que la pelota azul se desplace de un extremo de la línea al otro
siguiendo esa ruta.

Capas guiadas (Guided Layers) : Definir una capa como guía no tiene sentido hasta
que definamos también una capa guiada. Esto es, una capa que quedará afectada por
la guía definida en la Capa guía.


Si no definimos una capa guiada, la capa guía no tendrá ningún efecto y si bien no se
verá en la película (por ser una capa guía) tampoco provocará ningún efecto en las demás
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 guía.
Las capas guía y las capas guiadas se relacionan entre sí de un modo evidente. A cada
capa guía le corresponden una serie de capas guiadas.
Al asociar una capa guía con una capa guiada, el icono que representa a la capa guía
cambia, indicándonos que está realizando correctamente su labor.
En la imagen podemos ver un ejemplo de capa guía y capa guiada correctamente
asociadas entre sí. (La capa llamada inferior es, evidentemente, la capa con Guía)

El funcionamiento de las Capas Guía y sus utilidades lo veremos a fondo en el tema de
las Animaciones
Capas Máscara : 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 sólo dejan que se vea la parte de éstas que tapan los objetos situados en
las capas máscara (son como filtros). Al igual que las capas guía, los objetos existentes
en este tipo de capas tampoco se ven en la película final. Sí se verán los objetos de su
correspondiente capa enmascarada a los que estén "tapando".
Capas Enmascaradas : Estas capas funcionan conjuntamente con las anteriores,
ya que son las capas que están bajo las máscaras y a las que afectan. Al igual que las
capas guía y las capas guiadas deben ir asociadas unas a otras para que su efecto sea
correcto.
Sus objetos sí que son visibles en la película final, pero sólo cuando algún objeto de la
capa Máscara está sobre ellos.

Veamos el funcionamiento de estas capas con un ejemplo. En este ejemplo, los
rectángulos azules forman parte de la Capa Enmascarada y por tanto se verán en la


película final (pero sólo lo que tape la capa máscara). El óvalo rojo está situado en la capa
Máscara y no se verá en la película, pero sólo se verá lo que él "tape", que es lo que se ve
en la imagen de la derecha. Así se emplean las máscaras...

Podéis poner a prueba vuestros conocimientos realizando:

Ejercicios unidad 7: Las Capas
Ejercicio 1: Orden de Capas
1. Abre el archivo capas.fla que encontrarás 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).



3. En este caso deberás utilizar capas de tipo Máscara.

Ayuda ejercicios unidad 7: Las Capas
Ejercicio 1: Orden de Capas
1. Abre el archivo capas.fla que encontrarás en la carpeta de ejercicios.
2. Haz clic en la capa Texto para seleccionarla.
3. Arrástrala hasta tenerla en la posición 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. Arrástrala hasta tenerla en la posición 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 de Flash (AS 3.0).
1. Crea tres capas utilizando el botón que encontrarás en la línea de tiempo.
2. Haz doble clic sobre el nombre de la capa que se encuentre más abajo. Cámbialo
por Planeta.
3. Haz doble clic sobre el símbolo de la que se encuentra en la parte superior.
Llámala Máscara y dale el tipo Máscara.
4. Finalmente haz doble clic sobre el símbolo de la capa que se encuentra en
medio. Llámala Aros y dale el tipo con Máscara.
En estos momentos deberás tener algo como esto:



5. Selecciona la capa Planeta y dibuja un círculo (puedes aplicarle un relleno
degradado y quitarle el borde).
6. Selecciona la capa Aros y dibuja un círculo perfecto, rellenándolo con un degradado
con varias paradas (profundizaremos en los degradados más adelante).
7. Selecciona el círculo que hará de aro, y con la herramienta Transformación 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 Máscara y con la herramienta pincel pinta sobre el
Escenario para tapar la forma ovalada de los aros de modo que sólo pintes lo que
quieras que se muestre. Es decir, bastaría con no pintar la parte que quedaría detrás
del planeta.
Aquí puedes ver un ejemplo de cómo quedaría:

El planeta está en gris, los aros en rojo y la máscara en verde.
10. Ya casi lo tenemos, podemos mejorar el dibujo seleccionándolo todo (clic en la
esquina superior izquierda y sin soltar hasta la esquina inferior derecha) y
seleccionando la herramienta Transformación libre para rotar el dibujo en su
totalidad unos grados hacia la izquierda.
11. Para probar el efecto de la máscara pulsa las teclas Ctrl + Enter en tu teclado.








Prueba evaluativa unidad 7: Las Capas
Sólo una respuesta es válida por pregunta. Haz clic en la respuesta que consideres
correcta.
Contesta todas las preguntas y haz clic en el botón Corregir para ver la solución.
Si pulsas Restablecer podrás repetir la evaluación.
1. El objetivo principal de las capas es aislar los objetos que contenga del resto de la
película 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 opción Mostrar contornos de una capa, podremos ver los bordes de
todos los objetos de dicha capa como si fuesen 3 veces más grandes, ayudándonos a
distinguirlos entre el resto de capas (suponiendo que dicha opción esté inicialmente
desactivada).
a) Verdadero
b) Falso
4. Si activamos la opción Bloquear capas de una capa, se nos garantiza que ningún
objeto de los que estén situados en dicha capa podrá sufrir alteración alguna
(suponiendo que dicha opción esté inicialmente desactivada).
a) Verdadero
b) Falso
5. ¿Cómo deberíamos organizar las capas de nuestra película si queremos que dos
objetos se muevan sincronizadamente realizando el mismo movimiento?
a) Separando los objetos en dos capas diferentes.
b) Situándolos en la misma capa conseguiríamos nuestro propósito de manera
rápida y eficaz.
c) Ambas respuestas son correctas.
d) Ninguna de las anteriores.
6. Qué sucedería si creamos una capa guía, pero ninguna capa guiada asociada a la
misma.
a) Que no habría ningún problema, pues una misma capa puede servir como guía


para diversas capas guiadas.
b) Que la capa Guía no tendría ningún efecto ni se vería durante la animación.
c) Que no podría realizarse, pues una capa sólo puede estar guiada por una Guía
en cada instante de tiempo.
7. Si tenemos una capa A que es máscara 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é sucedería si quisiéramos asociar una capa guía con varias capas guiadas
a) Que no habría ningún problema, pues una misma capa puede servir como guía
para diversas capas guiadas.
b) Que la capa Guía no tendría ningún efecto ni se vería durante la animación.
c) Que no podría realizarse, pues una capa sólo puede estar guiada por una Guía
en cada instante de tiempo.
9. Qué sucedería si quisiéramos asociar a una capa guiada varias capas guía.
a) Que no habría ningún problema, pues una misma capa puede servir como guía
para diversas capas guiadas.
b) Que la capa Guía no tendría ningún efecto ni se vería durante la animación.
c) Que no podría realizarse, pues una capa sólo puede estar guiada por una Guía
en cada instante de tiempo.
10. Cómo deberíamos organizar las capas de nuestra película si queremos que dos
objetos presenten animaciones diferentes.
a) Situándolos en la misma capa conseguiríamos nuestro propósito de manera
rápida y eficaz.
b) Si las animaciones deben producirse en instantes de tiempo comunes, sería
necesaria separar los objetos en dos capas diferentes. Si las animaciones pueden
producirse en instantes de tiempo disjuntos (que no coincidan en ningún instante)
entonces podrían estar ambos objetos en la misma capa.
c) Deberíamos separar los dos objetos en capas diferentes, pues de lo contrario
sería imposible que los objetos realizasen movimientos distintos durante los mismos
instantes de tiempo. Para sincronizar los movimientos podríamos convertir un objeto en un
gráfico o en un clip de película, en función de nuestras necesidades.


Unidad 8. Símbolos (I)
8.1. Qué son los símbolos
Los Símbolos provienen de objetos que hemos creado utilizando las herramientas que
nos proporciona Flash CS4.
Estos objetos al ser transformados en símbolos, son incluidos en una biblioteca en el
momento en que son creados, lo que permite que sean utilizados en varias ocasiones, ya
sea en la misma o en otra película. Los símbolos nos resultarán fundamentales a la hora
de crear nuestras animaciones.
8.2. Cómo crear un símbolo
La acción de crear un nuevo símbolo es una de las más usadas en Flash ya que es uno
de los primeros pasos para crear una animación, como veremos más adelante.
El procedimiento es el siguiente:
1. Seleccionamos el o los objetos que queramos convertir en un símbolo símbolo. Lo
más habitual es partir de una forma.
2. Abrimos a la ventana Convertir en símbolo, accediendo al menú Insertar → Nuevo
Símbolo, desde le menú contextual eligiendo Convertir en símbolo, o directamente
con las teclas Ctrl + F8 o F8.
3. Una vez hecho esto nos aparecerá una ventana. Introducimos el nombre del
símbolo que vamos a crear, y que nos permitirá identificarlo en la biblioteca, lo que
se hará imprescindible cuando tengamos muchos símbolos.
4. Sólo nos queda seleccionar el tipo de símbolo (desplegable Tipo) al que queremos
convertir nuestro objeto. Podemos elegir entre Clip de Película, Botón y Gráfico.
Sus características y las diferencias entre ellos las veremos en temas posteriores. Lo
más habitual es Clips de película para los objetos que queremos mostrar en el
escenario, y Botón si queremos que actúe como tal.
5. Bastará con pulsar Aceptar para tener nuestro símbolo creado.

Para practicar estas operaciones te aconsejamos realizar






Unidad 8. Ejercicio paso a paso: Crear un símbolo
Objetivo
Crear un símbolo de gráfico que nos permitirá coger destreza en una acción que será
básica en la creación de animaciones.
Ejercicio paso a paso
1. Abre el archivo trabajo.fla con el que venimos probando cosas a lolargo del curso.
2. Seleccionamos el óvalo haciendo doble clic sobre él.
3. Abrimos el menú Insertar→ Nuevo Símbolo... de la barra de menús.
Se desplegará una ventana como la de la figura.
4. En el campo Nombre introducimos el nombre de nuestro gráfico, por ejemplo "Mi
Primer Símbolo".

5. Seleccionamos la opción Gráfico en el apartado Tipo. Con esto le decimos a Flash
que el nuevo símbolo será un gráfico.
6. Pulsamos Aceptar y ya tenemos nuestro primer símbolo gráfico creado.
Unidad 8. Símbolos (II)
8.3. Las Bibliotecas
En Flash CS4 podemos encontrar dos tipos de bibliotecas, las bibliotecas comunes y
de ejemplos y aquellas asociadas a las películas que hemos creado. Todas ellas las
tenemos a nuestra disposición para utilizar los símbolos que contienen.
Para acceder a las bibliotecas comunes que nos ofrece Flash simplemente tenemos
que ir a al menú Ventana → Bibliotecas Comunes y seleccionar alguna de las que se
nos ofrecen. Las hay de todo tipo de símbolos: botones, clips o gráficos.



Para acceder a la biblioteca de símbolos de la película que estamos creando, de nuevo
vamos a la Barra de Menús, Ventana → Biblioteca. En esta biblioteca aparecerán todos
los símbolos que hemos creado hasta el momento.
Podemos comprobar cómo el nuevo símbolo que hemos creado en el ejercicio paso a
paso de la unidad anterior se ha añadido a nuestra biblioteca accediendo a ella como
acabamos de indicar.
Los símbolos contenidos en las bibliotecas están identificados por su nombre y por un
icono que representa el tipo de símbolo que representan:
Clip Botón Gráfico
Para utilizar un símbolo de una biblioteca basta con pulsar en el nombre de dicho
símbolo y arrastrarlo a cualquier lugar del área de trabajo.
8.4. Diferencia entre símbolo e instancia
Como hemos comentado anteriormente, cuando creamos un símbolo, Flash lo
almacena en una biblioteca. Pues bien, cada vez que utilicemos ese objeto en una


película, éste se convierte en una instancia del símbolo.

Por tanto, podemos crear muchas instancias de un símbolo, pero a una instancia
solo le corresponderá un símbolo.
Aunque parece que sean lo mismo, la importancia de esta distinción es que cuando
utilicemos un símbolo que hayamos creado previamente en una película y lo
modifiquemos, solo alteraremos ésa instancia, mientras que el objeto seguirá intacto, tal y
como era en el momento de su creación, de manera que podremos volverlo a utilizar en
otro momento. En cambio, si modificamos el símbolo de la biblioteca, alteraremos todas
sus instancias.
A la derecha tenemos un ejemplo de una biblioteca. Cada elemento de la biblioteca es
un símbolo.

Para entender mejor este concepto te aconsejamos realizar:







Unidad 8. Ejercicio paso a paso: Modificar una instancia
Objetivo
Comprender la diferencia entre un símbolo y una instancia de este símbolo.
Ejercicio paso a paso.
1. Vamos al menú Ventana → Bibliotecas Comunes.
2. Seleccionamos la primera opción del submenú que aparecerá (Botones). Aparecerá
la librería de botones predefinidos de Flash CS4.
3. Hacemos doble clic sobre la carpeta Classic buttons y luego sobre la primera
carpeta que aparece en la lista (Arcade buttons).
Se abrirá una lista con todos los símbolos contenidos en la carpeta.
4. Arrastramos el primer símbolo (arcade button - blue) a nuestra área de trabajo.
Aparecerá en el escenario el símbolo que habíamos arrastrado. Esto es una
instancia del símbolo llamado arcade button - blue. Comprobémoslo.
5. Seleccionamos nuestra nueva instancia.
6. Seleccionamos la herramienta Transformación Libre y modificamos el tamaño
de la instancia arrastrando los extremos del objeto.
7. Bien, ahora hemos modificado la instancia. Comprobemos que el símbolo sigue
intacto. Accedemos a la biblioteca de nuestro documento (Ctrl + L), ya que ahora
también aparece aquí el símbolo
8. Arrastramos el símbolo al escenario, creando así una segunda instancia.
Como vemos, el botón ha aparecido de nuevo, pero no con el tamaño que le acabamos
de dar, sino con su tamaño original. Esto sucede porque lo que hemos reducido de
tamaño era tan sólo una instancia del símbolo, no el símbolo mismo, y esto es lo que
se ha modificado.
Por tanto podemos seguir insertando y modificando ese símbolo y cualquier otro en
esta u otra película ya que estaremos insertando instancias.




















Unidad 8. Símbolos (III)
8.5. Modificar una instancia
Hemos visto en el ejercicio anterior que podemos modificar una instancia de un símbolo
sin modificar el símbolo original en cuestión. Sin embargo, al no tratarse de un gráfico
vectorial (veremos que significa esto más adelante), no podemos modificar las instancias
con las herramientas de dibujo de Flash CS4, pero sí mediante el Panel de Propiedades,
que permite la manipulación "externa" de la instancia.
Así, este panel, que como hemos visto resulta sumamente útil, no nos permite
modificar la estructura básica de la instancia, pero sí otras propiedades, esto es,
podremos hacer que la instancia tenga más brillo, pero no transformar una estrella en un
círculo).
Esos cambios debemos de hacerlos directamente sobre el símbolo. Aunque sí
podremos crear un símbolo a partir de una instancia, lo que desvinculará la instancia del
símbolo 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 símbolo, el Panel Propiedades
mostrará las propiedades del objeto en cuestión, pero no las características propias de los
símbolos (cambios de color, intercambios etc...)
En el momento que seleccionemos un símbolo aparecerán una serie de propiedades y
opciones que comentamos a continuación:
Nombre y su icono correspondiente: El nombre de la instancia es muy importante,
pues permite identificarla durante la película, y veremos más 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 símbolo es de un vistazo rápido.
Tipo de la instancia. Por defecto se nos muestra el tipo al que pertenecía el
símbolo original pero nosotros podemos cambiarlo para que cambie su
comportamiento, aunque pueda seguir manteniendo su estructura inicial (en la
imagen es Botón).
Símbolo de la Instancia seleccionada (Instancia de:). Esta opción nos muestra el
símbolo raíz del que proviene la instancia que estamos modificando.


Intercambiar: Esta opción merece especial atención, pues es muy útil y nos
ahorrará mucho trabajo cuando sea necesaria emplearla. Su función consiste en
cambiar el símbolo de la instancia por cualquier otro que tengamos en nuestra
Biblioteca, por lo que la instancia tomará el aspecto del nuevo símbolo. Puede
parecer simple, pero durante el desarrollo de un trabajo profesional rápidamente
surge la necesidad de probar situaciones y los diseños gráficos definitivos no suelen
estar disponibles hasta bien avanzado el proyecto.

Gracias a esta opción podemos trabajar tranquilamente con un "boceto" y sustituirlo
de un modo efectivo (el nuevo símbolo hereda las propiedades del antiguo símbolo,
incluido el nombre de instancia, las acciones que le afectarán, efectos gráficos etc...)
cuando llegue el momento.
En la imagen se puede observar el panel Intercambiar Símbolo.

Este panel además, incorpora el botón Duplicar Símbolo cuya funcionalidad es la
que nos podemos imaginar. Es muy útil cuando queremos hacer pruebas con un
símbolo y no queremos perderlo. Lo duplicamos y trabajamos tranquilamente con la
copia.











Unidad 8. Símbolos (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 gráfico de la derecha se puede observar la pestaña
Estilo: del Panel Propiedades.
Hay varios tipos de efectos. Si el símbolo se acaba de crear o si no tiene efecto
asignado aparecerá en la pestaña Ninguno.
En el siguiente apartado comentamos los distintos efectos aplicables a una instancia.

A continuación 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 opción permite cambiar el color de la instancia, pero puesto que, como
dijimos, no podemos modificar la instancia internamente, al variar el color en la pestaña
Tinta o bien mediante los valores RGB (cantidad de rojo, verde y azul), se cambiará el
color de toda la instancia como si la estuviéramos tiñendo o poniendo una capa imaginaria
de un color determinado. El grosor o intensidad de esta "capa" la podemos modificar en
porcentaje mediante la primera pestaña 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 cuestión. También se puede modificar mediante valor directo o con la barra deslizante
y es muy útil para animaciones de aparición y desaparición 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 través de la instancia.

Efecto Alfa del 65 % sobre el pez naranja
Avanzado. Aquí podemos aplicar todos los efectos anteriores al mismo tiempo de
manera más 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 translúcido que se observa.
A medida que modifiquemos los efectos sobre las instancias, podremos ir viendo el
resultado sobre el propio escenario.
Ejercicios unidad 8: Símbolos
Ejercicio 1: Crear Símbolo
1. Crea una película con 1 fotograma.
2. Dibuja un círculo perfecto.
3. Conviértelo a símbolo de tipo Clip de película.
4. Comprueba que está disponible en la Biblioteca.
Ejercicio 2: Insertar Instancia
1. Crea una nueva película.
2. Inserta el Gráfico de un botón cualquiera de las Bibliotecas comunes de Flash CS4.
3. Modifica su tamaño.
4. Vuelve a realizar el paso 2 y comprueba que el botón se inserta en su tamaño
original.
Ejercicio 3: Duplicar Instancia
1. Sobre el ejercicio anterior, duplica la instancia del botón que has cambiado de
tamaño.
2. Dersde esa instancia, suplica el símbolo.
3. Comprueba que se ha duplicado en la Biblioteca.
Ejercicio 4: Efectos sobre Instancias
1. Teniendo el botón ampliado del ejercicio 2 en el escenario, inserta el duplicado que
hemos creado de tal forma que se superpongan parcialmente.


2. Dale al botón que está tapando al otro un efecto Alfa del 40%.
3. Comprueba que ahora podemos ver los dos claramente.

Ayuda ejercicios unidad 8: Símbolos
Ejercicio 1: Crear Símbolo
1. Crea una película con 1 fotograma con Archivo → Nuevo, eligiendo Archivo de
Flash (AS 3.0).
2. Para que el círculo no salga ovalado, selecciona la herramienta óvalo y mientras lo
dibujas, mantén pulsada la tecla Shift.
3. Accede a Insertar → Nuevo Símbolo... 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 opción Archivo → Nuevo, eligiendo Archivo de Flash (AS 3.0).
2. Ve a Ventana → Bibliotecas Comunes → Botones y selecciona un botón
cualquiera (para expandir las carpetas, haz clic con el botón derecho sobre una de
ellas y selecciona "Expandir Carpeta"). Arrastra el botón elegido hasta el escenario
3. Selecciona el símbolo, luego la herramienta Transformación libre y arrastra alguno
de los puntos que aparecerán alrededor del botón.
4. Debes ver que has modificado sólo una instancia del símbolo, y no el símbolo en sí.
Ejercicio 3: Duplicar Instancia
1. Selecciona la isntancia a duplicar, y en el menú Edición elige Duplicar. Apareecerá
una copioa en el escenario.
2. Haz clic con el botón derecho sobre la instancia que quieras duplicar y selecciona
Duplicar Símbolo.
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.
Arrástralo al escenario.
2. Abre el Panel Propiedades y selecciona en la pestaña 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 botón situado
bajo él se vea.





Prueba evaluativa unidad 8: Símbolos
Sólo una respuesta es válida por pregunta. Haz clic en la respuesta que consideres
correcta.
Contesta todas las preguntas y haz clic en el botón Corregir para ver la solución.
Si pulsas Restablecer podrás repetir la evaluación.
1. Darle un nombre concreto a los símbolos 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 símbolo de biblioteca en una película abrimos la biblioteca y hacemos
doble clic sobre el símbolo.
a) Verdadero
b) Falso
4. Para cambiar el tamaño de un símbolo, lo insertamos en nuestro documento y
utilizamos la herramienta "escalar".
a) Verdadero
b) Falso
5. ¿Cuál es cierta?.
a) La Biblioteca nos permite guardar copias de todas las instancias que tengamos,
lo que nos ayuda en la organización de nuestra película.
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 más de un símbolo de las bibliotecas
comunes por película.
a) Verdadero
b) Falso
8. Todos los símbolos que incluyamos o podamos encontrar en nuestras películas serán
de estos tres tipos: Clip de película, Gráfico y Botón.
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. Gráficos (I)
9.1. ¿Qué es un gráfico?
Los Gráficos son símbolos que nos permiten representar objetos estáticos y
animaciones sencillas.
En caso de que utilicemos un símbolo gráfico para realizar una animación, debemos
tener en cuenta que ésta estará ligada a la línea de tiempo de la película en la que se
encuentre. Es decir, la animación se reproducirá siempre y cuando la película original
también se esté reproduciendo. Esto hace que, pese a tener su propia línea de tiempo, no
puedan contener sonidos, controles ni otros símbolos gráficos.
Así pues, normalmente utilizaremos los gráficos para imágenes estáticas o para cuando
nos convenga que una animación se reproduzca sólo cuando determinado frame de la
línea de tiempo de la película esté en marcha, ya que para los casos que hemos
comentado anteriormente en los que un gráfico no nos es útil, Flash nos ofrece otro tipo
de símbolos como veremos en temas posteriores.
9.2. Tipos de gráficos
Los gráficos pueden ser:

Gráfico estático
a) Estáticos: estos gráficos se mantienen sin cambios cuando pasa el tiempo. Estos
gráficos son los típicos en los fondos y en los objetos que no desempeñan ninguna
función especial. Su tamaño y por tanto, el tiempo de carga de este tipo de gráficos,
aunque siempre dependerá de la resolución, de sus dimensiones y de la forma en la que
estén creados *, será en general reducido.

Animación
b) Animaciones: este tipo de gráfico varía su forma, posición u otras propiedades a
medida que va pasando el tiempo. Puesto que para realizar la animación se deben usar
varios gráficos más además del original o bien realizar determinadas acciones que


modifiquen el estado inicial, el tamaño de esta clase de gráficos, para las mismas
dimensiones y forma de creación, será mucho mayor que uno estático.
Por esto, aunque las animaciones dan a nuestra web un aspecto más 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 tamaño excesivamente grande.
2) Aunque no se traten de mapas de bits, por ejemplo, si son
animaciones típicas de Flash, cuyo tamaño no es excesivo, el hecho de
poner muchas animaciones puede llegar a "marear" un poco al visitante
de nuestro sitio y desviar su atención de lo que realmente importa, su
contenido.
(*) Los tipos de gráfico anteriores pueden ser, a su vez de dos tipos, según la forma en
la que estén creados: Gráfico Vectorial o Mapa de Bits. Para saber más acerca de estos
dos tipos de gráfico, échale un vistazo a nuestro tema básico :

Unidad 9. Básico: Gráficos vectoriales y mapas de bits
¿Cómo representar un gráfico?
Probablemente hayas visto multitud de gráficos 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 gráfico.
Existen muchísimos programas en el mercado que permiten visualizar, crear y modificar
gráficos, y cada fabricante decide representar los gráficos como mejor le conviene, o
simplemente da una extensión determinada a los gráficos creados con su programa para
restringir su uso a programas de la misma compañía.
Pese a todo, la multitud de formatos en que se puede encontrar almacenado un gráfico,
se pueden englobar en dos tipos básicos: los gráficos vectoriales y los mapas de bits o
bitmaps.
Diferencia entre Gráfico Vectorial y Mapa de Bits
La principal diferencia entre los Bitmaps y los Gráficos Vectoriales está en su tamaño.
Los gráficos 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 aplicación o página web.
La explicación de este hecho se puede ver en la forma en la que están creados y
representados cada uno de los dos tipos de gráficos:
Los bitmaps o mapas de bits están formados por grandes "rectángulos de
datos" (matrices) que contienen información sobre cada uno de los puntos (pixel) por
los que está formado el gráfico, y que se corresponde aproximadamente con la percepción
que nosotros vemos de ellos en nuestra pantalla.
A simple vista no apreciamos los pixel debido al pequeño tamaño 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 información que almacenan estas matrices son las características de cada pixel. Las
características que se almacenan sobre los pixels son sus coordenadas dentro del gráfico
y su color.
Así, nuestro PC procesa esa información, 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 más pequeñas que forman una imagen, no son
apreciables a simple vista en una imagen de calidad, pero sí con una ampliación.


Los pixels no tienen siempre el mismo tamaño ni se tienen porque encontrar en mismo
número en imágenes de las mismas dimensiones. La calidad de una imagen viene dada
por número de pixel en que dividamos una imagen (normalmente esto se mide en puntos
por pulgada o dpi, de hecho una cámara digital tiene mayor resolución cuantos más
megapíxel puede capturar) y el número de colores que puedan tener y, evidentemente,
ocuparán más espacio en disco en la medida que dicha calidad aumente. Como
consecuencia de esto aquellos gráficos con más calidad y número de pixels serán mucho
más costosos de reproducir y transformar para nuestra aplicación o reproductor gráfico y
más lentos en la descarga vía web.
Entre los tipos de archivo de mapa de bits más comunes tenemos: JPG, PCX, PNG,
TIFF, GIF, BMP, ...
Podmeos encontrar formatos comprimidos, como GIF o JPG o no comprimidos, como
BMP.
Como hemos visto, para generar un gráfico de mapa de bits, nuestro PC tiene que
almacenar y trabajar con una gran cantidad de información por la necesidad de mantener
los datos de cada pixel.
Sin embargo, para representar una imagen vectorial se considera que el gráfico
está formado por un conjunto de vectores o líneas.
Esto es una gran ventaja, ya que una línea, que en el caso de un bitmap estaría
compuesta por muchos pixels, en una imagen vectorial solo se necesita almacenar
información sobre su principio, su final y su aspecto. Esto es así con las líneas y con
cualquier figura más compleja. Por ejemplo, podríamos representar un círculo
simplemente guardando la información de su centro y su radio, además de indicar el color
de contorno y el de fondo. Aquí reside el secreto del reducido tamaño de los gráficos de
este tipo.
Además, si aumentamos el tamaño de la imagen, sólo hay que volver a generarla a
partir de sus coordenadas, lo que la mostrará perfectamente nítida por mucho que la
aumentemos.
¿Cómo trabaja Flash CS4?
Flash CS4, aunque permite trabajar también con bitmaps, utiliza gráficos 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. Además los ficheros Flash CS4 no necesitan ser


descargados completamente para visualizarse. En cuanto existe una información mínima
suficiente el fichero se puede mostrar mientras continua su descarga al mismo tiempo.
Unidad 9. Gráficos (II)
9.3. Creando un gráfico y comprobando sus propiedades
Como explicar teóricamente las propiedades de un gráfico resulta un tanto confuso,
vamos a ver de manera práctica lo que queremos explicar. Vamos a crear un gráfico en
Flash y a comprobar las propiedades que hemos comentado en el primer apartado del
tema. Para ello, abre una nueva película Flash (Archivo→ Nuevo, Archivo de Flash (AS
3.0)).
Ahora tenemos que crear el objeto que queremos convertir en un símbolo Gráfico.
Dibujemos, por ejemplo, un óvalo en cualquier lugar del área de trabajo con la herramienta
Óvalo de la barra de herramientas de dibujo y démosle un color de relleno que será lo
que después 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 símbolo gráfico ¿lo
recuerdas ?
Selecciona el objeto, haz clic derecho sobre el o haz clic en el menú modificar y
selecciona Convertir en Símbolo, lo convertimos en un símbolo como ya habíamos visto
y dándole el nombre GráficoAnimado y seleccionando el Tipo Gráfico:
Ahora vamos a crear la animación del gráfico. Puesto que todavía no hemos visto a
fondo las animaciones, la vamos a realizar de una forma que quizá no sería la más
apropiada la mayoría de las veces, pero nos servirá muy bien para este ejemplo. Para ello
selecciona nuestro gráfico y pulsa el botón derecho del ratón. Se desplegará un
menú, en el que seleccionaremos la opción Edición para modificar el gráfico y acceder
a su línea de tiempos. Comprueba que estás en la línea de tiempos del gráfico (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 - Gráfico
Animado" y, por tanto estamos dentro del gráfico (y la línea de tiempos que vemos es
la del gráfico, y no la de la película principal)



Crearemos a continuación nuevos fotogramas clave seleccionando uno a uno los
frames número 2, 3 y 4 y pulsando F6 cuando los seleccionemos.
Pulsa sobre el frame 2 y cámbiale el color de fondo al óvalo como hicimos antes. Haz lo
mismo en los dos siguientes frames.
Tu línea de tiempos debería tener este aspecto:

Pulsa donde pone Escena 1 justo encima del escenario y de este modo volveremos al
nivel inicial (Película principal) y podremos ver nuestro gráfico "desde fuera".
Ahora ya tenemos completo nuestro gráfico animado. ¿Qué crees que sucederá si
reproducimos la película? Comprobémoslo pulsando Control + Intro, se visualizará la
película.
¿Y bien? Nada. Nada en absoluto. El óvalo sigue tal cual. ¿Por qué? La respuesta está
en las características de los gráficos que habíamos explicado: la línea de tiempos del
gráfico va ligada a la de la película.
En este caso la línea de tiempos de la película tenía un solo frame, mientras que la del
gráfico tenía 4, por tanto, no le hemos dado tiempo al gráfico a desarrollar su animación;
sólo ha reproducido un frame, el primero.
¿Cómo podemos solucionarlo?
Muy sencillo. Basta con recordar lo que hemos comentado, Cierra la ventana del
reproductor de Flash, selecciona el fotograma 5 de la película principal y pulsa F6.
Ahora tenemos 5 fotogramas en la película principal.
Pulsa de nuevo Control + Intro.






Unidad 9. Gráficos (III)
9.4. Introducir un Mapa de Bits
Los gráficos de tipo Mapa de Bits pueden crearse con muchos programas. Si deseas
que en tus películas hayan mapas de bits lo más seguro es que prefieras crearlos y
hacerlos más espectaculares en otro programa más apropiado que Flash para el manejo
de Bitmaps: Photoshop, Fireworks, GIMP, etc...
Flash CS4 permite importar mapas de bits de otros programas, cuando han sido
guardados en formatos gráfico GIF, JPG, TIFF y muchos más. También nos permite
modificarlos en cierto modo. Podemos cambiarle el tamaño y convertirlo en un símbolo
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 símbolo
más.
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 diálogo de Importar, allí deberás seleccionar el formato de
imagen que quieres importar seleccionándolo en el desplegable Tipo. Luego navega por
las carpetas hasta encontrarlo. Selecciónalo haciendo clic sobre él y pulsa el botón Abrir.
La imagen se incluirá en el escenario y estará lista para trabajar con ella.
9.5. Introducir un archivo vectorial


Al igual que los mapas de bits, hay otros programas que trabajan con gráficos
vectoriales como también hace Flash CS4.
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
continuación, seleccionamos el tipo de archivo correspondiente al gráfico 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
gráficos de este tipo.
Concretamente, Illustrator pertenece también a Adobe, igual que Flash, con lo que la
compatibilidad en este caso es total.
Si quieres saber más sobre compatibilidad de archivos en Flash lee lo siguiente:





Unidad 9. Avanzado: Compatibilidad de archivos
Como vimos en la introducción del curso, Adobe ha hecho grandes esfuerzos para
integrar Flash en el mismo paquete donde se incluyen el resto de programas que año tras
año 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
opción Importar → Importar a biblioteca
Como hemos visto en el apartado anterior bastará con seleccionar el archivo PSD que
queremos añadir a la biblioteca. Una vez hecho se abrirá un cuadro de diálogo:
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 importación para cada una de ellas.
Si pulsásemos Aceptar directamente añadiríamos a nuestro proyecto las capas una a
una como mapa de bits. Pero podemos configurar de un modo más 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 opción nos será muy útil si la capa en cuestión tiene estilos
creados en Photoshop y queremos que sean importados de forma separada para que más
tarde puedan ser editados.
También podremos decidir el grado de compresión, es decir, la calidad con la que la
capa se añadirá 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 rápida del archivo no
deberemos abusar demasiado de esta característica.
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 película 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 quizás una de las características más interesantes de este método sea la
posibilidad de poder acceder una a una las capas (ahora tratadas como objetos) para
editarlas por separado.
Del mismo modo también será posible añadir únicamente una de ellas simplemente
arrastrándola sobre el escenario. De esta forma hemos conseguido importar un archivo de
Photoshop y trabajar con las distintas capas por separado gracias a la integración de
Flash en la suite de Adobe.




















Unidad 9. Gráficos (IV)
9.6. Exportar un objeto Flash como mapa de bits
La interfaz de dibujo de Flash, como hemos visto, resulta muy cómoda en determinadas
ocasiones para realizar dibujos. Así podría interesarnos utilizar Flash CS4 para crear un
dibujo y después 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 básico,
que la mayoría de mapas de bits no permiten animaciones, por esto el objeto flash que
exportemos no debería contener animación 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 cómo te aconsejamos realizar:
Unidad 9. Ejercicio paso a paso: Exportar un objeto como mapa
de bits
Objetivo
Exportar un objeto Flash CS4 como un gráfico de tipo mapa de bits. En este caso, lo
exportaremos como JPG.
Ejercicio paso a paso
1 Abre el archivo trabajo.fla y selecciona el rectángulo que vamos a exportar.
2 Vamos al menú Archivo→ Exportar → Exportar Imagen...
Ahora estaremos delante de una ventana:



3 Buscamos en la pestaña Guardar en la carpeta en la que quieras guardar el archivo.
4 En el apartado Nombre de Archivo introducimos el nombre que queramos que tenga
nuestra nueva imagen.
5 Abrimos la pestaña de Tipos de archivo.
6 Buscamos entre todos los tipos el formato JPG o JPEG.
7 Pulsamos Guardar.

Y ya está exportado. Para comprobarlo accede a la carpeta en la que lo guardaste y
verás un archivo con el nombre que le diste y la extensión .jpg

9.7. Exportar un objeto Flash como animación
Como vimos en el tema básico hay tipos de archivo de mapa de bits que soportan
animaciones, como los GIF. Pues bien, con Flash también podemos crear una animación
y exportarla como un GIF animado. Sin embargo, como vimos, el GIF animado consiste en
una secuencia de imágenes mostradas secuencialmente y es por esto que para exportar
un objeto Flash CS4 como GIF animado es necesario que todos los fotogramas de
esta animación sean clave, ya que el GIF no lo reconocerá en caso contrario y no
veremos el efecto deseado.
Para exportar un símbolo y guardarlo como una imagen deberemos antes que nada
seleccionarlo con la herramienta Selección.
Una vez seleccionado deberemos hacer clic en el menú Archivo → Exportar →
Exportar imagen... y se abrirá un cuadro de diálogo.



En este cuadro de diálogo deberemos introducir el nombre del archivo que crearemos y
seleccionar en el desplegable Tipo el formato de imagen con el que queremos guardarlo.
Una vez rellenados todos los campos y elegida la carpeta donde se guardará el archivo
pulsa el botón Guardar y el archivo de imagen se creará y estará listo si quieres incluirlo
en una página web estática o modificarlo con cualquier programa de imagen.
Podéis poner a prueba vuestros conocimientos realizando:

Ejercicios unidad 9: Gráficos
Ejercicio 1: Exportar a Gráfico animado
1. Abre el archivo exportar.fla que se encuentra en la carpeta de ejercicios del curso.
2. Exporta la película como un archivo GIF transparente para que muestre la
animación.
3. Deberá quedarte algo así:



Observa que esta animación se trata de una imagen, no de un archivo FLASH.


Ayuda ejercicios unidad 9: Gráficos
Ejercicio 1: Exportar a Gráfico animado
1. Abre el archivo exportar.fla de la carpeta ejercicios.
2. Abre el menú Archivo, selecciona la opción Exportar y finalmente Exportar
película. Se abrirá un cuadro de diálogo.
3. Selecciona la carpeta donde quieres guardar el archivo y selecciona el tipo GIF
animado.
4. Haz clic en el botón Guardar. Se abrirá el siguiente cuadro de diálogo:



5. Marca la casilla Transparente para que el fondo de la película quede transparente.
El resto de las opciones puedes dejarlas como están.
6. Pulsa el botón Aceptar y lo tendrás listo.










Prueba evaluativa unidad 9: Gráficos
Sólo una respuesta es válida por pregunta. Haz clic en la respuesta que consideres
correcta.
Contesta todas las preguntas y haz clic en el botón Corregir para ver la solución.
Si pulsas Restablecer podrás repetir la evaluación.
1. Los gráficos poseen línea de tiempos propia.


a) Verdadero
b) Falso
2. Los gráficos pueden ser estáticos o dinámicos.
a) Verdadero
b) Falso
3. La línea de tiempos de un gráfico es independiente de la línea de tiempos de la
película.
a) Verdadero
b) Falso
4. Flash admite importación de archivos vectoriales.
a) Verdadero
b) Falso
5. ¿Cuál de estas 3 afirmaciones es correcta?.
a) La opción "Importar" determina lo importante que es un gráfico dentro de nuestra
película.
b) Mediante la opción "Exportar" podemos publicar imágenes Flash directamente en
la web.
c) Flash puede incluir en sus películas imágenes creadas con otros programas,
mediante la utilidad "Importación".
6. Los gráficos vectoriales que importemos podremos modificarlos usando Flash CS4,
pues este tipo de imágenes está soportado.
a) Verdadero
b) Falso
7. En un gráfico no es posible incluir sonidos, controles ni otros símbolos gráficos.
a) Verdadero
b) Falso
8. Es indiferente el uso de gráficos y clips de película, pues sus funciones son muy
parecidas.
a) Verdadero
b) Falso


9. Flash permite exportar imágenes como tales o como animaciones.
a) Verdadero
b) Falso
10. La opción exportar es prácticamente equivalente a la opción Publicar y pueden
usarse indistintamente en casi todas las ocasiones.
a) Verdadero
b) Falso















Unidad 10. Clips de Película (I)
10.1. ¿Qué es un clip de película?
Un Clip de Película, simplemente Clip o MovieClip es una película 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 incluímos en otra película,


formando un símbolo. Por tanto, cualquier clip siempre podrá estar comueto por otros clips
insertados en él, que a su vez estén formados por otros, etc.
Al igual que los otros tipos de símbolos de Flash, los clips de película tienen su propia
línea de tiempo. Sin embargo, y a diferencia de los Gráficos (como veremos a
continuación), esta línea temporal no está ligada a la línea de tiempo del documento que
lo contiene, de tal forma que su ejecución es independiente, y en un fotograma de la
palícula principl se puede estar reproduciendo repetidamente un clip.
Este tipo de símbolos puede contener cualquier otro tipo de símbolo: gráfico, clip o
botón, así como cualquier objeto creado con Flash, ya que un clip es realmente una
película.
Otra de las ventajas de los Clips la encontramos cuando realizamos películas de gran
complejidad y tamaño, en la que intervienen un número muy elevado de fotogramas,
debido a que en la vista general del documento, nosotros sólo veremos un fotograma por
clip, el cual puede estar compuesto por muchos frames, lo que nos permitirá tener una
mejor visión de cómo se desarrolla nuestra animación, y una línea de tiempo más clara y
"limpia"
Los Clips son una de las herramientas que dan mayor potencia a Flash CS4,
permitiéndonos crear películas de gran complejidad y multiplicar los efectos visuales, ya
que se pueden crear múltiples movimientos independientes entre sí y crear conexiones
entre los diferentes Clips de un documento.
Todas aquellas cosas que no podíamos hacer con un símbolo de tipo Gráfico, lo
podemos hacer con un Clip, además de poder realizar también todo aquello que nos
permitía dicho símbolo. Por esto, normalmente se utilizan los clips para cualquier tipo de
animación debido a su gran flexibilidad, dejando los gráficos sólo para imágenes estáticas.
10.2. Comprobar las propiedades de un Clip

Como hicimos con los gráficos, vamos a ver como la línea de tiempo de un clip no está
ligada a la línea de tiempo del documento que lo contiene y, a la vez, veremos la
diferencia entre los clips y los símbolos Gráficos, que supone una de las razones de la
mayor utilización de los primeros en lo que se refiere a la creación de animaciones.
Para ello abriremos una nueva película Flash (Archivo → Nuevo, Archivo de Flash
(AS 3.0)). Después importaremos una imagen cualquiera o bien crearemos una. La
convertimos en Símbolo (botón derecho, Convertir en símbolo...) y seleccionamos en
Tipo "Clip de Película"


Arrastramos al escenario (si no está ya allí) nuestro clip de película.
Ahora tenemos nuestro Clip, insertado en nuestro nuevo documento Flash. Es decir,
tenemos dos películas, cada una con su línea de tiempos.
Ahora veamos que son independientes, siguiendo un proceso similar al que utilizamos
con los símbolos de tipo Gráfico.
Observa la línea de tiempo de la película principal y comprueba que sólo tiene un
fotograma.
Editemos el Clip que insertamos en el documento, haciendo doble clic sobre él y
examinemos su línea de tiempos. Aparecerá un único MovieClip. Podemos realizar algo
similar a lo realizado con los gráficos. SI creásemos una animación de movimiento, como
veremos más adelante, nos quedaría así:

Como vemos, la duración del clip que hemos insertado es mucho mayor que la
película nueva que lo contiene. Si el símbolo fuera un gráfico ya hemos visto que al
reproducir la película no ocurriría nada, porque sólo se reproduciría el primer fotograma de
su línea de tiempo. En cambio, al tratarse de un clip, comienza a reproducirse al pasar por
el primer fotograma, y como la línea de tiempo es independiente, sigue reproduciéndose
aunque la línea de tiempo principal haya acabado.




Unidad 10. Clips de Película (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 símbolo 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 gráficos, 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 vacío.
Por esto, es interesante aprender cómo crear un símbolo, en este caso un clip, de la
nada para después modificarlo.
Para insertar un clip vacío haz clic en Insertar → Nuevo símbolo y se abrirá el cuadro
de diálogo de Crear un nuevo símbolo.
Allí deberás darle un Nombre para identificarlo más tarde en la Biblioteca y
seleccionar la opción Clip de Película en el desplegable Tipo.
A partir de este momento tendremos un nuevo clip (vacío) al cual podremos acceder
desde nuestra Biblioteca (menú Ventana → Biblioteca), si hacemos clic derecho sobre
él y seleccionamos Edición, podremos editarlo y trabajar con él.
Cuando estudiemos las animaciones haremos ejemplos de animaciones mediante clips
de película y veremos el potencial real de este tipo de símbolos.
10.4. Importar y Exportar Movie Clips de Biblioteca
Como para todos los símbolos 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 ícula debemos abrir primero la biblioteca en
la que está contenido.
Hemos visto en el tema de Símbolos, dos tipos de bibliotecas: las que están asociadas
a documentos u otras películas y las que nos proporciona Flash CS4. Pues bien, no sólo
podemos utilizar símbolos 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 exportación mediante biblioteca se hace
automáticamente 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 símbolos de biblioteca y pulsar Abrir.
Aparecerá la biblioteca con la lista de los símbolos correspondientes a los gráficos,
botones y clips del documento en cuestión.


Es importante destacar que cuando insertemos un clip de una biblioteca, se insertarán a
su vez todos los símbolos que contenga, incluidos los clips.
A continuación mostramos un ejemplo en el que veremos cómo importar clips de esta
forma además de comprobar las propiedades de los clips y sus líneas de tiempo
independientes mediante la reproducción simultánea de dos películas, creando un efecto
bastante vistoso utilizando "aparentemente" un sólo frame.
Para ver cómo exportar e importar una película completa como un sólo movie clip
poder usar esto para el desarrollo en programas como Swish, revisa nuestro tema
avanzado: Otros usos de los Movie Clips

Unidad 10. Avanzado: Otros usos de los Movie Clips
Hemos visto cómo importar y exportar clips desde librerías procedentes de archivos
.fla. Ahora veremos otra forma de importar y exportar Clips de tal forma que nos permita
una mayor flexibilidad en el uso de Flash y además nos proporcione una eficaz interacción
con otros programas que se complementan con Flash y que nos permiten potenciar sus
características.
Si queremos coger el grueso de una película, de la cual no tenemos su archivo .fla y
hacer que se comporte en nuestro documento como si de un Clip de Película propio se
tratase, no es tan sencillo como si tuviéramos dicho fuente .fla, ya que al importar la
película "pública" que viene en formato .swf la animación se importa fotograma a
fotograma. Por esto, si importáramos el archivo sobre la película principal nos
encontraríamos con un gran número de fotogramas claves consecutivos que entre otras
cosas, estropearían la apariencia y la claridad de nuestra línea de tiempos, y nos
impediría tratar la película como un todo. Esto representa una especie de mecanismo de
seguridad.
Debido a la importación fotograma a fotograma, también aumenta el tamaño de nuestro
archivo y por tanto su tiempo de descarga, sin embargo habitualmente este aumento no
es tan importante y puede que nos convenga tener esa película para utilizarla como si de
un Movie Clip propio se tratara.
Para conseguir esto debemos seguir los siguientes pasos:
1) Crear el símbolo de tipo Clip que va a contener la película. Accediendo al menú
Insertar → Nuevo Símbolo...


Automáticamente Flash nos colocará dentro del Clip como si lo
hubiéramos editado nosotros mismos.
2) En esta situación iremos al menú Archivo → Importar → Importar a escenario.
3) Seleccionamos el tipo de archivo swf y buscamos la película que queramos importar.

4) Pulsamos Aceptar y ya tenemos la película insertada en el Clip.
Si volvemos a la línea de tiempo principal veremos nuestra película ocupando un simple
frame y si ejecutamos la película el efecto que veremos será el mismo que el que tenía la
película que habíamos importado. De esta forma ya podemos aplicarle todas las
propiedades de los Clips.
Como vemos este "mecanismo de seguridad" de las películas swf no es suficiente. Si
creamos una película y la distribuimos, pero queremos impedir que alguien la modifique y
la redistribuya, es decir, impedir que sea importada con Flash CS4 por otro usuario como
acabamos de hacer nosotros, se nos brinda la oportunidad de proteger la película que
hemos creado.
Para ello, podemos editar, como veremos más adelante, el formato de exportación de
nuestras películas (ver imagen superior). De modo que para dar una protección extra a
nuestras películas debemos exportar el archivo como swf y activar en Opciones, la opción
Proteger Frente a Importación e introducir una contraseña. Con esto se le reclamará


dicha contraseña al que intente importar nuestra película. Si no introduce dicha
contraseña, simplemente no podrá importar la película.
También podemos exportar nuestros clips y utilizarlos en programas del estilo de Swish,
para aprovechar la capacidad de Flash para la animación gráfica y el dominio de la
animación de textos de Swish. Esto lo podemos conseguir simplemente exportando
nuestro clip de la manera habitual y dándole siempre el formato swf de Flash CS4.
Es de vital importancia el hecho de poder combinar las utilidades de varios programas y
en esto Flash es especialmente bueno ya que permite interactuar de manera bastante
fiable con programas de tratamiento de imágenes, programas de dibujo vectorial,
reproductores de vídeo, etc.
Ejercicios unidad 10: Clips de Película
Ejercicio 1: Crear un Clip a modo de Cuenta Atrás
1. Crea una película con sólo 1 fotograma.
2. Escribe un número cualquiera, por ejemplo un 3.
3. Conviértelo a símbolo de tipo Clip.
4. Crea una animación fotograma a fotograma en la que se vea una cuenta atrás hasta
el cero.
5. Comprueba que pese a tener la película original un frame y el clip cinco, la
animación se ve completamente.
6. Guárdalo como cuenta.fla
Ejercicio 2: Crear un clip vacío y editarlo después
1. Crea una nueva película.
2. Crea un nuevo símbolo de tipo Movie Clip vacío.
3. Sal a la línea de tiempos principal.
4. Vuelve a editar el símbolo.
Ejercicio 3: Exportar una película con protección
1. Partimos del Clip del ejercicio 1, ábrelo.
2. Exporta la película swf de forma que nadie la pueda importar después.
Ayuda ejercicios unidad 10: Clips de Película
Ejercicio 1: Crear un Clip a modo de Cuenta Atrás
1. Crea una película con 1 fotograma con Archivo → Nuevo, eligiendo un Archivo de
Flash (AS 3.0).


2. Mediante la Herramienta Texto marcada en la barra de herramientas con una T
escribe el 3.
3. Accede a Insertar → Nuevo Símbolo... o bien pulsa las teclas Control + F8.
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 película con Control + Enter.
6. Elige menú Archivo → Guardar Como... y dale el nombre cuenta.fla.
Ejercicio 2: Crear un clip vacío y editarlo después
1. Crea un nuevo Archivo de Flash (AS 3.0), desde el menú Archivo → Nuevo.
2. Accede a Insertar → Nuevo Símbolo 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 línea de tiempo..
4. Abre la Biblioteca del documento mediante Ventana → Biblioteca, pulsa con el
botón derecho sobre el nombre del clip y selecciona la opción Editar del menú
emergente.
Ejercicio 3: Exportar una película con protección
1. Abre mediante Archivo → Abrir y selecciona el archivo cuenta.fla.
2. Exporta con Archivo → Exportar → Exportar Película, selecciona el tipo de
archivo SWF y dale un nombre. En la ventana que aparece marca la opción
Proteger frente a Importación, y en el campo Contraseña escribe la clave que
quieras.








Prueba evaluativa unidad 10: Clips de Película
Sólo una respuesta es válida por pregunta. Haz clic en la respuesta que consideres
correcta.
Contesta todas las preguntas y haz clic en el botón Corregir para ver la solución.
Si pulsas Restablecer podrás repetir la evaluación.


1. Un clip de película puede contener una imagen estática.
a) Verdadero
b) Falso
2. Un clip de película puede contener una animación.
a) Verdadero
b) Falso
3. Un clip de película puede hacer las funciones de un Gráfico.
a) Verdadero
b) Falso
4. Los Clips dan más claridad a películas complejas.
a) Verdadero
b) Falso
5. ¿Cuál 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 animación 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 línea temporal no está ligada a la línea de tiempos del documento.
a) Verdadero
b) Falso
7. Un clip de película puede contener cualquier otro tipo de símbolo.
a) Verdadero
b) Falso
8. Es posible proteger con contraseñas los clips de película para que no puedan ser
importados y utilizados por terceros.
a) Verdadero
b) Falso
9. Los símbolos de tipo Clip de Película tienen una línea de tiempos propia ligada a la de


la escena principal.
a) Verdadero
b) Falso
10. La película principal e sun MovieClip.
a) Verdadero
b) Falso












































Unidad 11. Botones (I)
11.1. ¿Qué es un Botón?
Los símbolos de tipo Botón son los que aportan la mayor parte de la interactividad de
las películas Flash con aquel que la está visualizando. Un botón, en Flash, es igual que
cualquier botón de cualquier entorno informático, sea web o cualquier otro.


Son elementos que se prestan a que el usuario los presione, desencadenando al
hacerlo una serie de acciones. También es habitual ver cómo este tipo de elementos
reaccionan cuando se les pasa el ratón por encima o cuando están pulsados.
Pues bien, para conseguir los efectos interactivos que acabamos de mencionar en otros
lenguajes orientados a la web, que es el caso que nos ocupa, debemos crear programas
relativamente grandes. Esto es un inconveniente ya que el uso de los botones es una
práctica muy habitual en el diseño en Internet. Sin embargo, en Flash no ocurre así. Su
interfaz está diseñada de manera especial para la creación de botones, lo que nos permite
crear todos estos efectos de una manera muy sencilla.
Al igual que los otros símbolos de Flash CS4, los botones tienen su propia línea de
tiempo. Esta es independiente pero, sin embargo, está formada únicamente por cuatro
fotogramas, uno para cada estado posible del botón.

Reposo. Aspecto por defecto del botón, es decir, cuando el puntero del ratón no
está situado sobre él.
Sobre. Aspecto del botón cuando situamos el puntero sobre él.
Presionado. Apariencia que deseamos tenga nuestro botón mientras lo
mantengamos pulsado.
Zona activa. Aquí debemos indicar el área real en la que queremos que actúe
nuestro botón. Esto es importante sobre todo en botones compuestos sólo por texto
como veremos más adelante.
Parece que la limitación de fotogramas podría implicar una limitación en la capacidad
de espectacularidad y utilidad de estos símbolos, pero no es así.
Los botones pueden contener a su vez otros símbolos, como clips o gráficos (también
de tipo Bitmap). La unión de las posibilidades de todos los símbolos pueden dotar a los
botones de efectos asombrosos.
Unidad 11. Botones (II)
11.2. Creación de un Botón


En la creación de un botón podemos considerar dos fases. En la primera vamos a
convertir nuestro objeto a símbolo de tipo botón y posteriormente veremos cómo
completarlo internamente, lo que nos ayudará a entender mejor dicha estructura.
Comenzamos creando el objeto que representará el aspecto por defecto de
nuestro botón con las herramientas que nos ofrece Flash CS4.
Seleccionaremos el objeto y accederemos al menú Insertar → Convertir en Símbolo,
le daremos el Tipo Botón y asignaremos un nombre a nuestro nuevo símbolo.
De esta forma ya tenemos transformado el objeto para que se comporte como un botón.
Ahora lo completaremos internamente.
Para determinar cómo debe reaccionar el botón en función de las acciones del ratón, lo
editaremos haciendo clic con el botón derecho del ratón sobre nuestro nuevo botón y
seleccionando la opción Editar.
Cuando tengamos delante la línea de tiempo del botón (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 botón para cada posición del cursor y
marcar el área de acción del botón (fotograma Hit) en la que simplemente podremos dejar
la misma figura que la inicial (en este caso sólo 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 botón.
Este es un botón muy básico, como veremos se pueden complicar mucho, pero para
empezar nos servirá con este. Observa como cambian los estados de reposo (rojo pálido),
sobre (rojo) y pulsado (azul).
Si una vez creado el botón queremos observar sus distintos estados y todavía no
hemos terminado la película entera y por tanto no deseamos tener que reproducirla toda
podemos hacerlo accediendo a la Biblioteca de nuestra película y seleccionando el botón
creado. Para ver lo que comentábamos bastará con pulsar el icono situado a la
derecha de la vista previa del símbolo.


Unidad 11. Botones (III)
11.3. Formas en los Botones
Los botones son símbolos que pueden tener multitud de formas. Si bien lo más habitual
es ver botones rectangulares, cuadrados y circulares, cuya creación es inmediata como
vimos en el punto anterior, también hay otros muchos tipos de botones que, pese a ser
menos utilizados, es muy habitual verlos en multitud de páginas web.
Entre estos están los creados mediante formas poligonales, aquellos que están
formados por texto únicamente, dibujos con diferentes motivos, etc. Es interesante su uso
para dar más vistosidad ya que algunos resultan más expresivos, y en esto Flash nos
ayuda mucho, debido a la relativa sencillez de creación de botones que sus herramientas
de dibujo nos ofrece.
Hay varias formas de botón también muy extendidas, como el botón con relieve sencillo
o los botones en forma de píldora. Puesto que existen muchas formas de conseguir estos
efectos, a continuación tienes un ejercicio paso a paso que muestra una forma de
conseguir el relieve en un botón rectangular.
Ejercicio paso a paso
Unidad 11. Ejercicio paso a paso: Crear un botón con relieve
Objetivo
Crear un botón con efecto relieve de forma rectangular tipo formulario de manera
rápida y sencilla.
Ejercicio paso a paso.
1. Dibujamos un rectángulo en el área de trabajo.
2. Seleccionamos el fondo.
3. Cambiamos el color de fondo del rectángulo. Por ejemplo a gris.
4. Con la herramienta texto escribimos el texto EDI en el interior del
rectángulo.

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


Ya va tomando relieve, ahora vamos a crear los diferentes estados.
8. Seleccionamos el botón.
9. Hacemos clic derecho sobre él y elegimos Convertir en símbolo...
10. Marcamos el Tipo botón y le damos un nombre. Pulsamos Aceptar.
11. Hacemos doble clic sobre el botón para editarlo.
12. Mediante F6 creamos fotogramas clave en cada uno de los fotogramas
correspondientes a los estados del botón.
13. Seleccionamos el fotograma Presionado.
14. Modifiquemos ahora el borde inferior y el derecho del botón aplicándole el color
blanco.
15. Finalmente seleccionemos los bordes superior e izquierdo y démosle el color
negro.
Respecto a los fotogramas Sobre y Zona activa, los dejaremos tal y como están puesto
que no deseamos que haga nada mientras no pulsemos el botón y el área de acción es la
que comprende nuestro rectángulo.

Unidad 11. Botones (IV)
11.4. Incluir un clip en un botón
La inclusión de clips de película en los botones puede dotar a éstos de más vistosidad.
Es habitual colocar un clip en el fotograma Sobre para indicar algún tipo de información
extra o una animación para ir más allá de un cambio de color.
También es común ver un clip de película actuando como un botón. Esto caso se puede
hacer por ejemplo poniendo el clip en el fotograma Reposo.
Incluir un Clip en un botón es muy sencillo. Tomando este ejemplo, y partiendo de que
tenemos los dos textos como clips en la biblioteca, sólo tendremos que:
- Hacer doble clic sobre el botón para entrar en su modo de edición.
- 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 opción más práctica:
- En las propiedades de la instancia, pulsamos Intercambiar... y elegimos el nuevo
objeto de texto.
- Por último, centramos el nuevo texto en el botón, si es necesario.
Ya está listo, ahora cuando pases el ratón sobre el botón el clip de película empezará a
reproducirse.
Unidad 11. Botones (V)
11.5. Bitmaps y botones
Además de clips, los botones también pueden contener símbolos de tipo Gráfico.
Puesto que, como ya hemos visto, todo lo que se puede hacer con un gráfico se puede
hacer con un clip, vamos a centrarnos en los Bitmaps que Flash nos permite importar, ya
que están muy extendidos como forma de expresión gráfica 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 creación de botones, pero no es así.
Básicamente podemos hacer dos cosas:
1) Incluir en cada uno de los fotogramas del botón un bitmap distinto, obteniendo un
efecto como el que se consigue con lenguajes como javascript (siempre considerando la
mayor sencillez de Flash).
2) Aprovechar las propiedades de los Gráficos en Flash. Para esto, deberíamos
importar primero el Bitmap y después convertirlo a símbolo botón. Posteriormente lo
editaríamos y, después de insertar cada fotograma clave, convertiríamos su contenido a
símbolo Gráfico. Una vez hecho esto, variando los efectos de las instancias en Flash (Alfa,
Tinta, Brillo) podremos conseguir efectos bastante buenos.
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 CS4 vamos a comentar dos de las más comunes.
Nota: Al crear un archivo, habrás visto que podemos elegir distintas versiones de
ActionScript (AS 3.0, AS 2.0...). Esto se refiere al lenguaje de programación que
podemos empelar en Flash y que lo convierte en una herramienta realmente potente. En
las versiones 1 y 2, se podían agregar comportamientos directamente en las propiedades
de los botones. Pero nosotros venimos empleando las versión 3.0 a lo largo del curso, por
ser la más actual y potente. Esta versión nos obliga a escribir el código ActionScript.
Veremos cosas básicas, y entraremos un poco más en ActionScript a partir del tema 16.
Comenzamos por crear o añadir nuestro botón, y asignarle un nombre de
instancia. El nombre que le demos es muy importante, porque nos permitirá acceder a él
desde el código.
Aunque podemos escribir el código en la misma capa, recomendamos crear una capa
exclusivamente para el código, por tenero todo mejor organizado.
Ahora, abrimos en el panel Acciones (menú Ventana → Acciones). Se mostrará un
área en blanco en la que podemos escribir:

Sin entrar en detalle de qué es cada palabra, pues esto ya lo veremos, este es el código
que debemos de escribir para asociar acciones a un botón:
miBoton.addEventListener('click', accionesMiBoton);


function accionesMiBoton(event):void{
//Acciones
}
Donde miBoton será el nombre de la instancia del botón.
accionesMiBoton contiene las acciones a realizar. Observa que aparece en dos sitios.
El nombre que le hemos dado es el que queramos.
Si tenemos varios botones, a cada uno lo referiremos por su nombre de instancia que
es único. También tenemos que dar un nombre único a accionesMiBoton para cada uno,
si no todos realizarían las mismas acciones.
Ahora, cambiamos donde pone //Acciones por lo que queramos que haga. Veamos las
más comunes:
1) Abrir una página web. Con esto conseguiremos abrir una página cualquiera de
internet (o una película Flash), lo que nos servirá para irnos desplazando por webs que
contengan más de una página, o permitir al usuario descargarse archivos entre otras
cosas.
La instrucción en ActionScript que nos permite hacerlo es navigateToURL(new
URLRequest("http://www.mipagina.es"), "_blank");.
"http://www.mipagina.es" se refiere a la página que queremos abrir, y "_blank" indica
que se abrirá en una página nueva.
Por lo tanto, si tenemos un botón cuyo nombre de instancia es btnVisitarAulaclic que
queremos que abra la web http://www.aulaclic.es, escribiríamos:
btnVisitarAulaclic.addEventListener('click', visitarAulaclic);
function visitarAulaclic(event):void{
navigateToURL(new URLRequest("http://www.aulaclic.es"),
"_blank");
}
Unidad 11. Botones (VII)
2) Controlar una película en curso. Si estamos reproduciendo una película 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 botón btnPausar para parar la película y el botón
btnContinuar para reproducirla:
btnPausar.addEventListener('click', pausar);
function pausar(event):void{
stop();
}
btnContinuar.addEventListener('click', continuar);
function continuar(event):void{
play();
}
Tal cual lo hemos puesto, afectaría a la película principal. Si lo que queremos parar o
reproducir es un clip determinado, habría que escribirlo delante de la acción, separado por
un punto. Por ejemplo miClip.stop();.
11.7. Incluir sonido en un botón
Si nuestras páginas van a tener sonido, el sonido en los botones es una parte
fundamental. Podemos hacer, por ejemplo que se activen sonidos al pulsar un botón.
Para ello, simplemente debemos editar nuestro botón y seleccionar el fotograma
Presionado, e insertar el sonido. Como vimos en el tema correspondiente. Es este caso,
el tipo de sincronización más conveniente suele ser Evento.
Por ejemplo podríamos importar uno desde nuestro disco duro o bien tomar alguno que
ya tengamos en la biblioteca.
Ejercicios unidad 11: Botones
Ejercicio 1: Crear un Botón en forma de Píldora



1. Abre un documento nuevo
2. En el primer fotograma dibuja un objeto con forma de píldora como el de la derecha
y escribe "STOP" sobre él.
3. Conviértelo a símbolo de tipo Botón
4. Crea distintas apariencias para distintos estados
5. Guárdalo como stop.fla.
Ejercicio 2: Ajustar el Área Activa
1. Crea una nueva película
2. Escribe el texto: "VámOnoS" respetando las mayúsculas y minúsculas como se
muestran
3. Conviértelo a Botón que sólo funcione al pasar por la "O" central
Ejercicio 3: Botón con Sonido
1. Partimos del Botón del ejercicio 1. Ábrelo.
2. Haz que emita un sonido de la Biblioteca Común de Sonidos al pasar el ratón por
encima de él.
3. Haz que emita otro sonido de la Biblioteca Común de Sonidos distinto al pulsarlo.
Ejercicio 4: Detener una Película
1. Abre el documento exportar.fla. Lo encontrarás en la carpeta de ejercicios.
2. En el primer fotograma tenemos un clip de película que contiene una animación que
dura más de 1 fotograma.
3. Ahora inserta en el clip el botón del ejercicio 1 de manera que se vea a lo largo de
toda su reproducción.
4. Haz que se detenga el Clip al pulsar el botón.

Ayuda ejercicios unidad 11: Botones
Ejercicio 1: Crear un Botón en forma de Píldora


1. Crea el nuevo documento con con Archivo → Nuevo, y elige Archivo de Flash (AS
3.0).
2. Para dibujar la forma de píldora dibuja primero un círculo perfecto (con la
herramienta Óvalo y la tecla Shift). Bórrale 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. Verás como te permite
regular la dirección del degradado. Puedes hacerlo tantas veces como sea necesario
hasta lograr el degradado deseado.
5. Ahora, vamos a crear la píldora. Fuera del círculo, dibuja dos líneas paralelas
(Herramienta Línea y tecla Shift). Agrúpalas (Ctrl + G).
6. Utilizando el panel alinear, centra horizontalmente el círculo y las líneas (fig. b).
7. Desagrupa las líneas (Ctrl + Shift + G) y deselecciónalas.
8. Ahora podrás seleccionar independientemente los lados de la esfera. Sepáralos (fig.
c). Puedes hacerlo con las teclas Shift + derecha o Shift + izquierda.
9. Con la herramiena Transformación libre, estira la sección que estaba entre las
líneas hasta completar la figura (fig. d).
10. Borra las líenas negras.



11. Selecciona la píldora, y conviértela en un botón, haciendo clic derecho y eligiendo
Convertir en símbolo... o bien pulsando F8. Elige el tipo Botón.
12. Haz doble clic sobre él para acceder a su línea de tiempo.
13. Crea fotogramas clave los estados que quieras modificar pulsando F6 y modifícalos
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 según el estado.
15. Guárdalo, pulsando Archivo → Guardar Como... y llámalo stop.
Ejercicio 2: Ajustar el Área Activa
1. Hazlo también con Archivo → Nuevo, eligiendo Archivo de Flash (AS 3.0).
2. Utilizando la Herramienta Texto (marcada en la barra de Herramientas con una T)
escribe el texto: VámOnoS.
3. Haz clic en la Herramienta Selección y selecciona el texto que acabas de crear.
4. Conviértelo en un botón mediante Modificar → Convertir en Símbolo... o bien
pulsando F8, y eligiendo el tipo Botón.
5. Haz doble clic sobre él para editar su línea de tiempo.
6. Selecciona el fotograma Zona Activa, dibuja un óvalo de tal forma que tape por
completo la "O" y tenga el mismo tamaño y forma. Luego borra el texto.
Ejercicio 3: Botón con Sonido
1. Abre el archivo stop.fla, creado en el primer ejercicio.
2. Haz doble clic sobre el botón con forma de píldora.
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. Guárdalo y ciérralo.
Ejercicio 4: Detener una Película
1. Abre el archivo exportar.fla, que encontrarás 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. De la biblioteca de stop.fla, arrastra el botón al escenario para crear una instancia.
4. Selecciona el botón, y en el panel Propiedades, escribe botonStop como nombre
de la instancia.
5. Selecciona la estrella, y en el panel Propiedades, escribe estrella como nombre de
la instancia.


6. Organiza la estrella y el botón en el escenario.
7. Crea una nueva capa para introducir el código ActionScript.
8. Selecciona el fotograma de la nueva capa y abre el panel Acciones (tecla F9).
9. Ahora, escribe el siguiente código que hará que al hacer clic en el botón se detenga
la estrella:
10. botonStop.addEventListener("click", pararEstrella);
11. function pararEstrella(event):void {
12. estrella.stop();
}
13. Prueba la película (Ctrl + Intro) y comprueba que funciona.







Prueba evaluativa unidad 11: Botones
Sólo una respuesta es válida por pregunta. Haz clic en la respuesta que consideres
correcta.
Contesta todas las preguntas y haz clic en el botón Corregir para ver la solución.
Si pulsas Restablecer podrás repetir la evaluación.
1. Crear un botón en Flash es más complicado que crearlo en lenguajes como
Javascript.
a) Verdadero
b) Falso
2. Es posible determinar en qué zona del botón queremos que sean aplicables las
acciones.


a) Verdadero
b) Falso
3. Los botones pueden contener cualquier otro símbolo en su interior.
a) Verdadero
b) Falso
4. La línea de tiempos de un botón sólo puede tener una capa y cuatro fotogramas.
a) Verdadero
b) Falso
5. Un botón es capaz de controlar la reproducción de toda una película.
a) Verdadero
b) Falso
6. ¿Cuál de estas afirmaciones es cierta?.
a) Flash crea los botones sustituyendo siempre para cada estado del botón su
aspecto por un nuevo mapa de bits, al contrario de lo que hace Javascript. Por esto, un
botón creado en Javascript, ocupa menos espacio en disco y tarda menos en ser cargado
b) Javascript crea los botones sustituyendo siempre para cada estado del botón su
aspecto por un nuevo mapa de bits, al contrario de lo que hace Flash. Por esto, un botón
creado en Flash, ocupa menos espacio en disco y tarda menos en ser cargado.
7. Podemos asociar acciones a un botón 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 botón en un archivo de Flash AS 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 botón no definimos la Zona Activa el no reaccionará ante ninguna acción.
a) Verdadero
b) Falso
10. Los botones contribuyen a la interactividad de Flash.


a) Verdadero
b) Falso










































Unidad 12. Animaciones de movimiento (I)
12.1. La animación en Flash
Flash es un programa básicamente orientado a la animación, de ahí la gran importancia
de este tema. No obstante, para ir creando animaciones cada vez más complicadas se
necesita, sobre todo, mucha práctica, aparte de conocer bien las herramientas.
En este tema y los sucesivos mostraremos las técnicas básicas de animación en Flash.
La unión de estas técnicas será la que nos permita crear las más variadas y vistosas
animaciones.
En el tema de la animación, 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
programación como Java Script, de una manera muy sencilla, sin necesidad de excesivos
conocimientos y ocupando muy poco espacio en disco.
Aunque Flash ofrece técnicas mejores, también se pueden crear animaciones a modo
de GIF animado. Se les denomina animaciones Fotograma a Fotograma. Estas son las
animaciones más básicas y conviene conocerlas. Para ello conviene leer nuestro tema
básico:
Unidad 12. Básico: Animaciones fotograma a fotograma
La Animación en Flash
Una animación no es más que una secuencia de fotogramas reproducidos a una
velocidad tan alta que el ojo humano no es capaz de darse cuenta del cambio de una
imagen a otra.
Aunque el límite en el que el ojo humano detecta estos cambios en el monitor de un
ordenador ronda los 18 fotogramas por segundo, Flash coloca por defecto sus líneas de
tiempo a 24 fps.
Por esto, aunque Flash CS4 incorpore técnicas que aparentemente no utilicen
secuencias sucesivas de fotogramas, como las interpolaciones de movimiento, esto no es
así. En estos casos, simplemente no vemos los fotogramas "físicamente", esto es, si la
animación ocupa 20 fotogramas en la línea de tiempos, el hecho de que no todos sean
fotogramas clave indica simplemente una mejora en la capacidad de almacenamiento
porque Flash no necesita saber cuáles son los pasos intermedios de la animación. Si
todos fueran claves, el tamaño del archivo aumentaría considerablemente.
Esto último sucede, por ejemplo con los GIFs animados, muy comunes sobre todo en el
mundo de la web. No sólo están compuestos por bitmaps (ya comentamos el mayor
tamaño de estos gráficos), sino que cada fotograma es un mapa de bits completo, lo que
aumenta mucho su espacio de almacenamiento en memoria y disco.
Crear una animación Fotograma a Fotograma
Aunque Flash incorpora técnicas mucho mejores que estas, también permite "simular"
la forma de animación de los GIF animados, ya que en ocasiones la animación es muy
brusca o el cambio no es realizable "automáticamente" con Flash o simplemente nuestro
objetivo es exportar el gráfico creado como este tipo de mapa de bits.


Para crear una animación fotograma a fotograma basta introducir la apariencia inicial
del objeto en el primer fotograma, hacer claves todos aquellos fotogramas que vayan a
intervenir en ella, e ir modificándolos uno a uno, progresivamente, ya que una diferencia
muy grande de un fotograma al siguiente crearía un golpe brusco para el que la visualiza.
Una vez completada la animación tendremos algo como lo que mostramos a
continuación en nuestra línea de tiempos:

Veamos la diferencia de tamaños de las diferentes técnicas de animación para una
misma película:
Tenemos la siguiente animación. La apariencia se mantendrá prácticamente igual en
todos estos casos, pero cabe la posibilidad de que al hacerlo fotograma a fotograma, se
cometan pequeños errores de posicionamiento en la trayectoria que Flash no cometería:
Y tenemos estas tres formas de crearlo con sus respectivos tamaños:
1. Interpolación de movimiento. Ésta es su línea de tiempo:

Tamaño: 961 Bytes (0,93 KB)
2. Fotograma a Fotograma exportado como película Flash (SWF): La línea de
tiempos como vemos tiene todos los fotogramas como fotogramas clave:

Tamaño: 1 Kbyte
3. Fotograma a Fotograma exportado GIF Animado La línea de tiempos igual que en
el caso anterior:



Tamaño: 2 Kbytes
Aunque las diferencias se observarían mejor en películas más complejas, en este
ejemplo ya podemos ver como es menor el tamaño utilizando la técnica de Flash
Interpolación de Movimiento, es sensiblemente mayor en la animación fotograma a
fotograma y es el doble para el caso del GIF animado.

A continuación veremos distintos tipos de animaciones que el creador de películas
Flash deberá tomar como guía inicial. Cabe destacar que podremos aplicar varias de
estas animaciones colocándolas en distintas capas. Con esto es con lo que
conseguiremos los efectos más espectaculares a la par que útiles.
Desde el punto de vista del diseño general de una página web es muy importante tener
claro un concepto: no se debe crear animaciones en páginas que no lo necesitan ni
crear animaciones que distraigan al que visualice nuestros documentos de lo realmente
importante, el mensaje.
En esta versión de Flash CS4 ha habido un cambio importante en las animaciones, lo
que hasta ahora se llamaba interpolación de movimiento, pasa a llamarse interpolación
clásica y la interpolación de movimiento actual es totalmente nueva, más potente y
versátil.
12.2. Interpolación de movimiento
Es la acción básica de las animaciones en Flash. Permite desplazar un símbolo Flash
de un lugar a otro del escenario, siendo necesarios únicamente dos fotogramas, lo que
optimiza mucho el rendimiento de la película.
Es importante destacar que para que una Interpolación de movimiento se ejecute
correctamente aquellos objetos que intervengan deberán haber sido previamente
convertidos a símbolos. Los gráficos, clips de película, textos y botones son algunos de
los símbolos que se pueden interpolar.
También se debe tener cuidado al realizar una interpolación con dos símbolos que se
encuentren en la misma capa, ya que el motor de animación los agrupará como uno sólo 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 estarán animados.
2. Poner también en distintas capas objetos que vayan a ser animados con
direcciones o formas distintas.
Pasemos pues al tema en cuestión. Una interpolación de movimiento, como hemos
dicho, es el desplazamiento de un símbolo de uno a otro punto del escenario. El hecho de
que sólo se necesiten dos fotogramas es debido a que Flash, únicamente con la posición
inicial y final, "intuye" una trayectoria en línea recta y la representa (veremos que también
se pueden realizar movimientos no rectilíneos).
Crearla es tan simple como hacer clic derecho sobre el fotograma que contiene los
elementos y elegir Crear interpolación de movimiento. Por defecto, se añadirán unos
cuantos fotogramas, rellenos de un color azulado.
Ahora vamos al fotograma final, o creamos uno clave donde nos plazca. Y desplazamos
el símbolo. Veremos que aparece una línea punteada, por defecto recta, que representa el
trazado de la animación.
Cuando realicemos la interpolación correctamente observaremos un aspecto como este
en la línea de tiempo.

Esto indica que la animación cambiará la posición del símbolo del fotograma 1 hasta la
posición del mismo símbolo en el fotograma 24, utilizando precisamente 24 fotogramas. El
número de fotogramas que se usen en la interpolación indicará las subetapas de que
constará la animación. Cuantas más subetapas más sensación de "continuidad" (menos
saltos bruscos) pero a la vez menos velocidad en el movimiento.
La velocidad en el movimiento de las películas la podemos cambiar también
modificando su parámetro en la línea de tiempo, pero esto no
cambiará lo que hemos comentado anteriormente respecto al número 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 línea de tiempo. A mayor valor
más velocidad, pero se deben poner siempre suficientes fotogramas para que se
desarrolle la animación como queremos.
El trazado recto generado por defecto podemos modificarlo directamente haciendo clic
y arrastrándolo, una vez seleccionada previamente la herramienta Selección .

En cualquier fotograma de la interpolación podemos cambiar la posición del símbolo (o
cualquier otra propiedad), creando ahí un fotograma clave de propiedad, que se
representa por un pequeño rombo en la línea de tiempo.
La interpolación de movimiento permite modificar muchos parámetros del movimiento
mediante el Editor de movimiento, que veremos a continuación.

















Unidad 12. Animaciones de movimiento (II)
12.3. El editor de movimiento
En la versión de Flash, CS4, encontramos un nuevo panel llamado Editor de
movimiento. Para acceder a él basta tener seleccionada una interpolación de


movimiento y hacer clic en la pestaña Editor de movimiento que aparece junto a la
línea de tiempo. Como cualquier panel, también es accesible desde el menú Ventanas.
Este panel nos permite controlar multitud de propiedades y efectos que afectan a una
animación con total precisión, fotograma a fotograma.
Podemos ver, a la izquierda una columna con las propiedades que podemos modificar,
divididas en Movimiento básico, Transformación, 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 línea de tiempo.
En la siguiente columna podemos establecer si el valor se aplica con aceleración o no.
En la columna Fotogramas, podemos recorrer o eliminar los distintos fotogramas clave.
También los controles - y + que nos permiten añadir efectos.
Y a la derecha del todo encontramos la gráfica. Podemos ver que cada propiedad tiene
una gráfica específica, que indica los fotogramas en horizontal y los valores de la
propiedad en vertical. Si hacemos clic sobre una propiedad, veremos que su gráfica se
expande para editarla con facilidad. En la gráfica encontramos los fotogramas clave
marcados como un cuadrado negro, o verde cuando está seleccionado. Estirando de
ellos, o de la línea de la gráfica podemos alterar los valores.
En la gráfica, vemos que los puntos suelen formar un vértice. Una opción muy
interesante es poder transformarlos en puntos suavizados (desde el menú contextual del
fotograma), creando una curva Bezier, lo que formará transiciones más suaves entre los
picos de valor. Esto no es aplicable a las propiedades X,Y, Z.
A lo largo de los siguientes temas veremos cómo utilizarlo de forma concreta, ahora
vamos a ver en un video tutorial, cómo podemos utilizar el editor de movimiento para
realizar la animación del bote de la pelota del tema 2, utilizando una interpolación de
movimiento, en lugar de una interpolación clásica como se hizo en ese tema.

12.4. Interpolación clásica
En la versión anterior Flash CS3 sólo había una interpolación de movimiento disponible,
y se llamaba precisamente así, interpolación de movimiento, en la versión Flash CS4 esa
interpolación de movimiento se llama interpolación clásica. Por lo tanto, si utilizamos


archivos creados con la versión CS3 las interpolaciones de movimiento existentes ahora
serán mostradas como interpolaciones clásicas.
Una interpolación clásica, igual que una interpolación de movimiento, es el
desplazamiento de un símbolo de uno a otro punto del escenario, muchos de los
conceptos vistos en las interpolaciones de movimiento son los mismos para las
interpolaciones clásicas. Por ejemplo, las animaciones también han de ser sobre símbolos
y deben estar en una capa. Los Fotogramas Por Segundo (fps) tienen el mismo
significado.
Para crear una interpolación clásica hay que hacer clic derecho sobre el fotograma que
contiene los elementos y elegir Crear interpolación clásica.
Cuando realicemos la interpolación correctamente observaremos un aspecto como este
en la línea de tiempo.

Vemos que la animación va desde el fotograma 1 hasta el fotograma 20. Aparece una
flecha que no aparece en la interpolación de movimiento y el icono que hay a la derecha
del nombre de la capa es distinto.

Unidad 12. Animaciones de movimiento (III)
Por supuesto, al realizar una interpolación clásica el fotograma inicial y final deberán ser
diferentes, en caso contrario no se creará ningún tipo de animación.
Observa en las siguientes imágenes dónde está situada la pelota en el primer
fotograma de la animación y su posición final en el último fotograma:






Si el objeto con el que queremos hacer la interpolación clásica no está convertido a
símbolo nos encontraremos con algo así...

... y la animación no funcionará.
También podemos realizar la interpolación de otra forma, sin convertir previamente el
objeto a símbolo, ya que Flash lo convierte a símbolo automáticamente si no lo hacemos,
dándole el nombre "Animar" más un número. Esto quizá no sea lo más conveniente en
películas grandes, debido a lo que ya comentamos de la gran cantidad de símbolos que
pueden aparecer y la confusión que crean muchos símbolos con nombres parecidos.
Para crear una interpolación de este tipo, basta con tener un fotograma clave.
Hacemos clic con el botón derecho sobre el fotograma en la línea de tiempo, y
seleccionamos Crear Interpolación Clásica. Ahora, creamos un nuevo fotograma clave
donde queremos que finalice la interpolación, y modificamos los símbolos en los
fotogramas clave.
Veremos que si seleccionamos uno intermedio, se muestran los símbolos en su
transición al fotograma final. Podemos decidir cómo mostrar el símbolo en ese fotograma,
por ejemplo moviéndolo. Al hacerlo automáticamente 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 más.
Para entender mejor este concepto recomendamos hacer :








Unidad 12. Ejercicio paso a paso: Encadenar interpolaciones
Objetivo
Crear un movimiento multidireccional encadenando interpolaciones de movimiento.
Ejercicio paso a paso

1. Abre un nuevo Archivo de Flash (AS 3.0) y dibuja un óvalo en el fotograma 1.
2. Selecciónalo y convertírtelo en un Clip de Película pulsando F8.
3. Situamos el Clip en el lado izquierdo del escenario.
4. Hacemos clic con el botón derecho sobre el único fotograma existente en este
momento.
5. Seleccionamos la opción Crear Interpolación Clásica.
6. Vamos al fotograma número 20 y pulsamos F6 para crear un fotograma clave.
Observaremos que se crea la Animación de 20 fotogramas de duración. En ese
mismo fotograma (el 20).
7. Desplazamos el símbolo al extremo derecho del escenario.

Ahora ya tenemos la interpolación base, en ella hemos marcado únicamente la
posición inicial y final del movimiento. Si lo dejáramos así, el clip seguiría una línea
recta.
Vamos a hacer que llegue a su origen haciendo zig-zag con un par de acciones muy
sencillas, aprovechando el hecho de tener la interpolación ya creada.
Comprobemos que la línea de tiempos está de la siguiente forma:

8. Hacemos clic del ratón sobre el fotograma 5.
Comprobemos que el clip de película ya no está en el origen si no que ya está
"haciendo camino".
9. Desplacemos nuestro clip hacia arriba.
10. Hacemos sobre el fotograma 10.
11. Desplacemos nuestro clip hacia abajo.
12. Repite estos dos últimos pasos para los fotogramas 15 y 20 y prueba la película.
13. Como podemos comprobar, el clip se desplaza ahora en línea recta pero en varias
direcciones distintas, haciendo zig-zag.





Unidad 12. Animaciones de movimiento (IV)
12.5. Diferencias entre interpolación de movimiento e interpolación
clásica
En general las interpolaciones de movimiento son más fáciles de utilizar y más potente,
no obstante las interpolaciones clásicas tienen características que pueden hacerlas más
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 animación clásica no existe el trazado, a menos que lo creemos expresamente.
- Sólo se permiten realizar interpolaciones con símbolos, si aplicamos una interpolación
de movimiento a un objeto que no es un símbolo, Flash lo convertirá en un clip de película,
mientras que si se trata de una interpolación clásica lo convertirá en un símbolo gráfico.
- En las interpolaciones clásicas cuando cambia una propiedad se crea un fotograma
clave y cambia la instancia del objeto, mientras que en las interpolaciones de movimiento
sólo 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 símbolo, como ocurre en las clásicas.
- En un grupo de interpolación de movimiento no está permitido usar scripts de
fotograma, mientras que sí es posible en las clásicas.
- Los grupos de interpolaciones de movimiento se pueden cambiar de tamaño en la
línea de tiempo. Se tratan como un objeto único. Las interpolaciones clásicas están
formadas por grupos de fotogramas que se pueden
seleccionar de forma independiente.
- Las interpolaciones de movimiento sólo pueden aplicar un efecto de color por
interpolación, mientras que las clásicas pueden aplicar más de uno.
- Los objetos 3D sólo pueden animarse en interpolaciones de movimiento, no en
clásicas.
- Sólo las interpolaciones de movimiento se pueden guardar como configuraciones
predefinidas de movimiento.


12.6. Cambio de forma en una Interpolación de movimiento
Acabamos de ver las interpolaciones de movimiento y las interpolaciones clásicas como
un mecanismo para desplazar un símbolo Flash de un lado a otro del escenario. Sin
embargo, podemos aprovechar una interpolación para realizar animaciones en las que
nuestro objeto aumente o disminuya de manera progresiva su tamaño.
Esto es muy sencillo con Flash CS4, basta con modificar la instancia del símbolo en el
último fotograma de la interpolación de movimiento o de la interpolación clásica, pero esta
vez cambiándole el tamaño. Podemos utilizar la herramienta Tranformación libre para
cambiar el tamaño.
Por supuesto, podemos aplicar ambos efectos a la vez, de manera que el cambio de
tamaño se producirá mientras el objeto se desplaza. También podemos hacer el cambio
de tamaño en varias fases o secuencias encadenadas como en las interpolaciones de
movimiento comunes.

Y la línea de tiempo que nos queda es algo tan sencillo como esto:

12.7. Animación de textos
Es indudable que para comunicar algún mensaje, en la mayoría de las ocasiones, no
basta con imágenes o iconos, y es aquí donde el texto cobra gran importancia. No
obstante, se debe tener cuidado con la animación de los textos, ya que resulta bastante
complicado leer un texto que se desplaza o cambia de tamaño.
Por este motivo, un texto animado debería estar sólo en las presentaciones o bien
formar parte de una animación corta y, lo que es más importante no debería estar
reproduciéndose infinitamente.
En las presentaciones, se utilizan multitud de efectos que veremos más adelante. Sin
embargo, con lo visto hasta ahora se pueden obtener efectos interesantes. Una de las
opciones más utilizadas es separar las letras de los textos y animarlas
independientemente



Si no tienes claro cómo realizar una animación te recomendamos que realices:

Unidad 12. Ejercicio paso a paso: Animar texto por bloques
Objetivo.
Crear una animación sobre un texto separándolo en bloques de letras cuyo movimiento
será tratado de manera independiente, dando al texto un efecto vistoso que pudiera servir
como presentación de entrada a una web u otro tipo de película.
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 cómo conseguir
esos efectos combinando las técnicas vistas hasta el momento.
1. Escribimos el texto en cuestión, en nuestro caso "aulaClic".
2. Seleccionamos el texto recién escrito.
3. Abrimos el panel Propiedades (con el texto seleccionado) y seleccionamos el tipo
de letra. Nosotros hemos elegido "Papyrus", pero cualquiera es válida.
4. Accedemos al menú Modificar → Separar. Con esto separamos cada letra ya que
de no hacerlo Flash trataría todo el texto como un bloque y no podríamos dar el
efecto a las letras.

Vamos a separar el texto en los siguientes bloques: "a", "u", "la" y "Clic". Podríamos
cambiar los bloques si quisiéramos dar otro efecto en concreto.
5. Seleccionamos dichos bloques y los convertimos a símbolos, dándoles un nombre
identificativo y el Tipo Gráfico, 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 hiciéramos Flash aplicaría el movimiento a todo
aquello que encontrara en dicha capa, ya que como hemos comentado
anteriormente, lo convertiría todo a símbolo automáticamente.
7. Nombramos cada una de las capas según el bloque de texto que vaya a contener,
pero en orden inverso en el que vaya a producirse la animación, para que el objeto
en movimiento se superponga a los que no lo están. Esto es, la capa de más arriba
se llamará "Clic", la siguiente "la" y así sucesivamente.
8. Hacemos clic con el botón derecho sobre el único fotograma con elementos que
tenemos en la línea de tiempo y en el menú emergente seleccionamos Copiar
Fotogramas. A continuación vamos pegando los fotogramas (botón 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 después del fotograma de
cada capa y pulsamos F6 cada vez. En la capa "Clic" selecciona el fotograma 30 y
pulsa también F6.
12. Hacemos clic con el botón derecho en los fotogramas centrales que hay entre los
fotogramas clave y seleccionamos cada vez Crear Interpolación Clásica.
13. Extendemos la imagen los últimos fotogramas de cada capa hasta que ocupen el
fotograma 30 (Botón derecho → Insertar Fotograma Clave).
14. Exceptuando la capa "Clic" seleccionamos el primer fotograma de cada
interpolación y aumentamos el tamaño del bloque que contiene.
15. Movemos ahora fuera del escenario el bloque "Clic".
16. Aún en esta capa, hacemos clic con el botón derecho sobre el fotograma 24 y
seleccionamos Insertar Fotograma Clave.
17. En este fotograma recién creado reducimos el ancho del bloque de texto y lo
colocamos junto a la última "a".
Y ya tenemos la animación creada. Como vemos hemos utilizado todo tipo de técnicas
de interpolación, aunque todavía puede complicarse más como veremos más adelante.






Efectos que la hagan vistosa sin necesidad de cargar mucho la película visualmente, y
en cuanto a tamaño de archivo se refiere.
Esto lo podemos conseguir simplemente animando líneas y haciendo que se muevan por
el escenario. Esta técnica nos permite dar dinamismo a la animación o crear formas
distintas a lo largo de su recorrido.
Son especialmente útiles y vistosas en fondos oscuros y se suelen usar para formar
rectángulos que se aprovechan para insertar imágenes.
Para crear esta animación deberás crear tantas capas como animaciones de líneas
vayas a crear, en el ejemplo hemos creado 4 capas. Una para el movimiento de líneas 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.
También crearemos una capa que situaremos en la posición superior donde
colocaremos las imágenes que formarán el mensaje de bienvenida.
El funcionamiento de la animación es claro, deberemos crear interpolaciones de
movimiento para cada una de las capas de líneas que en su posición final emplazaremos
en su lado contrario de la pantalla, por ejemplo, las líneas situadas en un principio en la
parte inferior al final de la animación se encontrarán en la parte superior. Realizaremos
esto con las 4 capas de líneas.
En la capa Imágenes crearemos animaciones que harán aparecer las imágenes 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
imágenes para colocarlas en su lugar en el fotograma. Estas imágenes se mostrarán
únicamente durante el tiempo que dure el fotograma para desaparecer más tarde dando
paso a la otra imagen.
Consejo: Si quieres añadir un fondo deberás hacerlo en una nueva capa y colocar ésta
debajo de todas las existentes.





Unidad 12. Animaciones de movimiento (VI)
12.9. Interpolación guiada
Anteriormente hemos visto como las interpolaciones de movimiento incluyen por
defecto el trazado con la trayectoria del objeto, y que este trazado puede modificarse
fácilmente, sin embargo las interpolaciones clásicas no lo incluyen. Si deseamos que el
objeto siga una trayectoria no rectilínea en una animación clásica hemos de crear una
capa guía de movimiento.
Una guía es una capa especial que marca una trayectoria para los símbolos de la
capa a la que afecta, para que dichos símbolos la sigan, durante el movimiento. Esta
capa es invisible durante la reproducción y permite dibujar cualquier tipo de dibujo
vectorial, que nos permitirá crear un movimiento no forzosamente rectilíneo.
Crear un movimiento mediante esta técnica es bastante sencillo. Partimos de una capa
con una interpolación clásica:
Sobre la capa en la línea de tiempo, hacemos clic derecho y seleccionamos Añadir
guía de movimiento clásica.
Creamos el trazado de la guía en la nueva capa, por ejemplo dibujando con el Lápiz.
Y para acabar, hacemos coincidir el fotograma final de la interpolación con el final del
trazado de la guía. Es importante que el símbolo esté encontacto con la guía. No es
necesario colocarlos al principio del trazado ya que Flash lo hace automáticamente.
Vemos como la capa a la que se asocia la guía aparece debajo y indentada a la
derecha.

Podemos ver un efecto más vistoso que el que realizamos con la interpolación sencilla
del principio del tema.
Una opción que puede resultar muy interesante es Orientar según el trazado, la cual
encontramos en el panel de Propiedades. Esta opción hará que el símbolo vaya girando
para seguir la línea del trazado, lo que en la animación anterior habría puesto el avión
boca abajo al hacer el "loop".


Tanto si el trazado es de una interpolación de movimiento, como si es de una
interpolación clásica, podemos modificarlo de varias formas:
- Seleccionando la herramienta Selección y haciendo clic sobre el trazado y
arrastrándolo.
- Seleccionando la herramienta Subselección y haciendo clic en el trazado, aparecerán
los controladores de curva, moviéndolos modificaremos el trazado.
- Seleccionando la herramienta Transformación libre y haciendo clic en el trazado,
aparecerán los controladores de transformación libre, moviéndolos modificaremos el
trazado.
Si se trata de un trazado de una interpolación de movimiento, adicionalmente
disponemos de otros métodos para modificar el trazado:
- Moviendo la posición del objeto en el escenario, esto hace que se cree
automáticamente un fotograma clave de propiedad y se modifique el trazado. Esta es,
quizás, la forma más fácil de modificar un trazado.
- Utilizar el editor de movimiento para modificar los valores de X, Y, Z.
Si estamos modificando el trazado de una interpolación clásica, debemos tener cierto
cuidado con no producir discontinuidades en el trazado, ya que esto haría que la
animación se detuviera en ese punto. En general es más fácil y flexible utilizar los
trazados con las interpolaciones de movimiento que con las interpolaciones clásicas.

Muchos movimientos complicados pueden ser duplicados fácilmente sobre otros
objetos utilizando ActionScript 3

Ejercicios unidad 12: Animaciones de movimiento
Ejercicio 1: Máscara en Movimiento
1 Abre un documento nuevo.
2 Crea los pasos necesarios para crear una animación utilizando una máscara en
movimiento.



Ayuda ejercicios unidad 12: Animaciones de movimiento
Ejercicio 1: Máscara en Movimiento
1. Abre un nuevo Archivo de Flash (AS 3.0) desde el menú Archivo → Nuevo.
2. Crea una nueva capa haciendo clic en el botón .
3. Selecciona la capa superior y haz doble clic sobre su símbolo .
4. Llámala Máscara y selecciona el tipo Máscara.
5. Selecciona la capa inferior y haz doble clic sobre su símbolo .
6. Llámala Texto y selecciona el tipo Con máscara.
7. En la capa Texto escribe edi.
8. Selecciona el fotograma 1 de la capa Máscara, dibuja un circulo en él.
9. Selecciona el círculo y transfórmalo en un Clip de película pulsando la tecla F8.
10. Selecciona el símbolo que acabamos de crear y muévelo a la izquierda del texto sin
taparlo.
11. Selecciona el fotograma 20 de la capa Máscara y crea un nuevo fotograma clave
pulsando la tecla F6.
12. Selecciona el fotograma 40 de la capa Máscara y crea un nueva fotograma clave
pulsando la tecla F6.
13. Selecciona el fotograma 40 de la capa Texto y crea un nuevo fotograma pulsando
la tecla F5.
14. Selecciona el fotograma 20 de la capa Máscara y desplaza el círculo hasta la
derecha del texto (sin taparlo).
15. Haz clic derecho sobre cualquiera de los fotogramas entre el 1 y el 20 de la capa
Máscara y selecciona Crear interpolación Clásica
16. Repite lo mismo para los fotogramas situados entre el 20 y el 40.
17. Prueba la película pulsando la combinación de teclas CTRL + INTRO.









18.Prueba evaluativa unidad 12: Animaciones de movimiento
19. Sólo una respuesta es válida por pregunta. Haz clic en la respuesta que consideres
correcta.
Contesta todas las preguntas y haz clic en el botón Corregir para ver la solución.
Si pulsas Restablecer podrás repetir la evaluación.
1. Flash CS4 es capaz de realizar animaciones con texto de modo fácil y eficiente.
a) Verdadero
b) Falso
2. Las Guías de movimiento provocan que todos los objetos de su mismo fotograma
realicen el movimiento que ésta indica, independientemente de la relación que exista
entre las capas.
a) Verdadero
b) Falso
3. Una capa Guía es la mejor solución para realizar un movimiento en línea recta.
a) Verdadero
b) Falso
4. Una capa Guía es la mejor solución para realizar un movimiento enrevesado con
numerosos cambios de dirección.
a) Verdadero
b) Falso
5. ¿Cuál de estas 3 afirmaciones es correcta?.
a) Para que las animaciones se realicen correctamente, los objetos que participen
en ella deberán convertirse previamente en símbolos.
b) Dada la gran potencia de Flash CS4 para crear animaciones, debemos explotar
esta cualidad al máximo y poner animaciones en todas las páginas webs que creemos.
c) Las animaciones fotograma a fotograma son tan eficientes en cuanto a espacio y
rapidez de ejecución como las animaciones creadas con las utilidades de Flash
(interpolaciones).
6. Flash necesita disponer de tantos fotogramas claves como duración tenga la
animación de movimiento.
a) Verdadero
b) Falso


7. Crear animaciones fotograma a fotograma ocupa menos espacio en el archivo final
que hacer una interpolación de movimiento.
a) Verdadero
b) Falso
8. En las animaciones guiadas es necesario que el objeto este SIEMPRE en contacto con
la línea de guía en los fotogramas inicial y final.
a) Verdadero
b) Falso
9. Todos los objetos presentes en una misma capa y un mismo fotograma formarán parte
de las animaciones que afecten a dicho fotograma.
a) Verdadero
b) Falso
10. Las interpolaciones de movimiento permiten aplicar otros efectos además del propio
movimiento, tales como cambios en los tamaños, colores etc...
a) Verdadero
b) Falso








































Unidad 13. Animación por Forma (I)
13.1. Interpolación por forma
Cuando lo que queramos no sea cambiar la posición de un objeto en el escenario, sino
su forma de manera progresiva (o ambas cosas a la vez), Flash CS4 nos ofrece la técnica
de la Interpolación 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 interpolación por forma, es muy semejante a crear una interpolación de
movimiento. Flash genera fotogramas intermedios en los que va variando ligeramente la
forma del fotograma anterior. Así como hacíamos en el tema anterior, sólo 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 Interpolación por Forma
funcione como es debido aquellos objetos que intervengan deberán ser objetos
vectoriales (no símbolos Flash).
Debemos tener también dos aspectos en cuenta:
1) Separar en distintas capas los objetos fijos y los que estarán 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 interpolación.
Las consideraciones sobre la velocidad y el número de fotogramas que vimos en las
interpolaciones de movimiento se pueden aplicar también a la interpolación por forma y a
cualquier animación hecha con Flash.
Para crear la interpolación, una vez tengamos los fotogramas de inicio y fin de la
animación hacemos clic derecho en alguno de los fotogramas intermedios, y
seleccionamos la opción del menú Crear interpolación de forma.
Recuerda que podemos alterar el fotograma final todo lo que queramos.
También podemos realizar interpolaciones de forma en varias fases de manera análoga
a como lo hacíamos en el tema anterior. De esta forma podemos hacer que un
determinado objeto se convierta en otro antes de adoptar su forma definitiva.


Lo hemos conseguido simplemente haciendo clic con el botón derecho sobre el
fotograma 10 y creando un fotograma clave (Insertar Fotograma Clave). Luego sólo
tenemos que borrar el objeto que aparece en el escenario y dibujar el triángulo.

Unidad 13. Animación 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. Añadimos así una posibilidad más para realizar
logotipos o presentaciones vistosas y transmitir información de manera espectacular.
Recordemos que para realizar una interpolación 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 función 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 hubiéramos repasado con la herramienta lápiz el contorno de
cada letra.
¿Posibilidades de esta técnica en textos? Muchísimas, 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 transición. También es conveniente dar un
tiempo para que cada letra sea mostrada y pueda ser visualizada y "entendida" por aquel
que vea la película, porque si no lo hacemos corremos el riesgo de que la animación
parezca sólo un garabato revolviéndose.
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 transición también en el color. Observemos a su vez como cuando se forma
cada letra, mantenemos su imagen el tiempo suficiente como habíamos indicado que era
necesario.
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 animación creada con una forma en el fotograma inicial y un
texto en el final veremos que la interpolación 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 interpolación 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. Deberás
ejecutar de nuevo el comando para que estas letras se separen y creen una forma.

Unidad 13. Animación por Forma (III)
13.3. Consejos de Forma
Como ocurría en el tema anterior, a veces no nos viene bien el tipo de acción que hace
Flash por defecto. En las interpolaciones de movimiento lo solucionábamos mediante la
guía de movimiento.
En el caso de la interpolación por forma, es posible que Flash realice la transformación
de los objetos de una forma que no es la que esperábamos y que no nos conviene para
llevar a cabo nuestro propósito.
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 generarán.
Para añadir un consejo de forma a una interpolación nos situaremos en el fotograma
inicial y pulsaremos Control + Shift + H (o bien ir al menú Modificar → Forma →
Añadir Consejo de Forma).



Aparecerá un círculo 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 están colocados sobre una curva
(vector) que forma un contorno son amarillos para el objeto inicial y verdes para el final.
Dicho círculo debemos colocarlo en un punto del contorno de la figura inicial.
Automáticamente 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 más de uno serán
marcados con las letras "b", "c", "d" ... hasta la z, que es el límite (26 como máximo).
Vamos a insertar un consejo de forma en el punto indicado en los gráficos situados un
poco más abajo:
Fijémonos en las posiciones inicial y final del Consejo de Forma y en el seguimiento del
mismo, posteriormente comprobaremos que Flash realiza lo que le pedimos:
Punto Inicial

Punto Final

Seguimiento


Como vemos el punto que hemos marcado en el objeto inicial se acaba
correspondiendo con con el punto que marcamos en el final, con lo que hemos
conseguido forzar la transformación que nosotros queríamos.
Para practicar estos conceptos realiza:

Unidad 13. Ejercicio paso a paso: Consejos de forma
Ejercicio paso a paso.
1 Utiliza la Herramienta Lápiz para crear la flecha y luego el Bote de pintura para crear
el degradado.
2 Pulsa con el botón derecho sobre el fotograma que contiene la flecha y elige la opción
Crear Interpolación de Forma.
Ve al fotograma 20 y pulsa F6.
Invierte la imagen del fotograma 20 para que adopte su posición final mediante
Modificar → Transformar → Voltear Horizontalmente y colócalo de manera que su
punta y la de la flecha original coincidan.

Si ejecutáramos la animación ahora no conseguiríamos el efecto deseado.
3 En el fotograma 1, activa la opción Modificar → Forma → Añadir Consejo de forma
para añadir un nuevo consejo de forma. Colócalo en una de las esquinas de la flecha y ve
al fotograma 20 para colocar el consejo creado en la esquina que se corresponda con la
anterior.
Haz esto último para todas las esquinas. De manera que quede como la figura de
arriba.








Ejercicios unidad 13: Animación por Forma
Ejercicio 1: Babosa arrastrándose
1. Abre un documento nuevo
2. En el primer fotograma dibuja una especie de babosa como la de la abajo.

3. Haz que cambie de forma y vaya de un lado a otro del escenario, dando la
sensación de que está reptando.
4. Guárdalo como babosa.fla.
Ejercicio 2: Cambio de Forma y Tamaño
1. Abre el archivo babosa.fla.
2. Cambia el movimiento de forma para que a mitad del trayecto de la impresión de que
se está acercando a nosotros.
3. Cambia el color de la babosa cuando está más 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 animación de forma que pase de una letra a la siguiente.
3. Cambia los colores y el tamaño de cada letra.

Ayuda ejercicios unidad 13: Animación por Forma
Ejercicio 1: Babosa arrastrándose
1. Crea un nuevo Archivo de Flash (AS 3.0) desde el menú Archivo → Nuevo.
2. Utiliza la Herramienta Lápiz para crear la forma de la babosa.


3. Pulsa con el botón derecho sobre el primer fotograma y elige la opción Crear
Interpolación 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 Subselección modifica su
forma.
5. Guárdalo con Archivo → Guardar Como y llámalo babosa.fla.
Ejercicio 2: Cambio de Forma y Tamaño
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 tamaño. La parte inferior siempre da sensación 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 opción Modificar → Separar.
3. Pulsa con el botón derecho sobre el primer fotograma y elige la opción Crear
Interpolación 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 Transformación
libre para cambiar la forma.
7. Prueba evaluativa unidad 13: Animación por Forma
9. Sólo una respuesta es válida por pregunta. Haz clic en la respuesta que consideres
correcta.
Contesta todas las preguntas y haz clic en el botón Corregir para ver la solución.
Si pulsas Restablecer podrás repetir la evaluación.
1. Para crear una Interpolación por Forma sólo necesitamos dos fotogramas clave.
a) Verdadero
b) Falso
2. No se puede aplicar una interpolación 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 Interpolación por Forma. ¿Debemos convertir el objeto a Símbolo?.
a) Sí, porque una Interpolación de Forma es como una Interpolación de Movimiento.
b) No, porque sólo se puede hacer con símbolos de tipo Clip.
c) No, porque un símbolo no se puede modificar internamente, y la Interpolación de
Forma requiere modificar el perfil del objeto.
7. Es necesario convertir un texto en forma para poder hacer una animación de forma
sobre él.
a) Verdadero
b) Falso
8. Es posible añadir consejos de forma en otro sitio que no sea ni borde ni vértice.
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 cómo se realizará el cambio de forma.
a) Verdadero
b) Falso








Unidad 14. Efectos sobre animaciones (I)
14.1. Introducción
Si no te parecen suficientes las interpolaciones de forma y de movimiento, y quieres
realizar animaciones más complejas, puedes combinar las interpolaciones de movimiento
con los efectos y transformaciones que se pueden realizar sobre los símbolos que las
componen y aplicar efectos sobre las mismas interpolaciones.
Una vez comprendidas todas las técnicas de este tema, estaremos en disposición de
realizar todo tipo de animaciones en Flash. Sólo tendremos que poner un poco de
imaginación 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 también
podemos usar el Editor de movimiento para controlar gran parte de los efectos.
14.2. Efectos sobre la interpolación
Para describir todos los efectos que podemos aplicar sobre una interpolación de
movimiento previamente creada, sin necesidad de tocar ningún símbolo, nos centraremos
en el panel Propiedades. Si seleccionamos un fotograma y un objeto perteneciente a una
interpolación, y abrimos el panel Propiedades, desde el botón 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 variarán según el
tipo de interpolación, según puedes ver en las siguientes imágenes correspondientes a las
propiedades de la interpolación de movimiento, interpolación guiada e interpolación 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.
Tamaño: La propiedad tamaño se representa por los valores W (anchura) y H (altura)
y para modificarla basta colocar el cursor sobre el valor y aparecerá un deslizador que


podemos mover a izquierda o derecha, también podemos hacer clic sobre el valor y
teclear el nuevo valor.

Desde el Editor de movimiento también podemos modificar el tamaño 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 Tranformación libre también podemos variar
las dimensiones del objeto.
Escala: En las interpolaciones guiadas, esta casilla, al activarla, permite un
incremento/decremento progresivo del tamaño del objeto inicial cuando sus dimensiones
son distintas a las del objeto que está en la posición final de la animación.
En las interpolaciones de movimiento esta opción está activada por defecto.
Como vemos Flash hace el desplazamiento de posición, pero el cambio de tamaño se
produce bruscamente en el último fotograma.
Aceleración: Esta barra deslizante nos permite determinar la aceleración del primer
tramo de la animación. Podemos elegir valores entre -100 y 100. Si el valor de aceleración
es negativo el símbolo se moverá despacio primero e irá acelerando de manera
progresiva. Si dicho valor es positivo provocará un efecto opuesto.



Podemos por ejemplo dar la impresión de que un objeto, por ejemplo un coche,
arranca, va cogiendo velocidad poco a poco (valor -100) y después va frenando y
disminuyendo su velocidad hasta pararse.
Como ésta, existen muchas otras aplicaciones. Para comprenderlo mejor recomendamos
hacer:
Unidad 14. Ejercicio paso a paso: Acelerar movimiento
Objetivo
Comprender el efecto de aceleración sobre una interpolación de movimiento.
Ejercicio paso a paso
Primero vamos a crear la interpolación sobre la que aplicaremos el efecto.
1. Crea un óvalo en el fotograma 1.
2. Conviértelo en un clip de película pulsando la tecla F8.
3. Pulsa el botón derecho del ratón sobre el fotograma que contiene el clip de película
4. Selecciona Crear interpolación de Movimiento del menú emergente.
5. Selecciona el fotograma 20 y pulsa F6.
6. Desplaza el Clip de Película de ese fotograma a la parte derecha del área de
trabajo.
7. Pulsa Intro para ver la animación sin salir del entorno de trabajo.

8. Ahora selecciona el fotograma 1 con el botón derecho y selecciona Propiedades
para abrir el panel Propiedades del fotograma. (si no está ya abierto)
9. Introduce un 100 en la casilla Aceleración (fuera), para hacer que acelere al
principio y vaya frenando poco a poco.
10. Comprueba que el resultado se comporta bien.
11. Intoduce ahora un -100 en la casilla Aceleración (dentro), para hacer que
aumente progresivamente su velocidad.
Ahora ya hemos comprobado los distintos efectos de aceleración. Comprueba el
mismo ejercicio con otros valores de aceleración para observar su efecto.









Unidad 14. Efectos sobre animaciones (II)
Rotación: Esta opción es muy interesante ya que nos da la posibilidad de aplicar una
rotación al objeto mientras se produce el movimiento. Podemos especificar el número de
veces o vueltas que se produzca la rotación durante los fotogramas que dure la
interpolación, o también podemos indicar los grados que queremos que rote el objeto.

Si se trata de una interpolación de movimiento, nos presenta un submenú Dirección,
con tres opciones:
Ninguno. Con esto le indicamos a Flash que no aplique rotación alguna sobre el
símbolo en movimiento. Es la opción por defecto en las interpolaciones de
movimiento.
Antihorario (CCW). Permite realizar el número de rotaciones completas o el valor de
grados en la dirección contraria a la de las agujas del reloj,
Horario (CW). Realiza lo mismo que la opción anterior pero en la dirección de las
agujas del reloj (hacia la derecha).
Si se trata de una interpolación clásica, nos presenta un submenú Dirección, con una
opción más:
Auto. Marcando esta opción hacemos que se produzca la rotación en aquella dirección
que necesite menos movimientos. Si cuesta lo mismo hacerlo por un lado o y por el otro,
es decir, cuando la imagen inicial y final está en la misma posición (en cuanto a rotación
se refiere), el hecho de activar esta opción no tendrá ningún efecto.
Esta opción es la que está marcada por defecto en las interpolaciones clásicas y por eso
no hemos visto hasta ahora un objeto rotar en nuestras interpolaciones clásicas. Para que
hubiera tenido efecto deberíamos haber rotado la última
imagen de la interpolación.
Desde el Editor de movimiento, también podemos
especificar los grados de una rotación.



Orientar según trazado: Si activamos esta casilla, tanto si la interpolación sobre la
que actuamos es una interpolación guiada, como si es de movimiento, Flash hará que el
símbolo tome la dirección de la guía, rotando para orientarse en la misma posición que
adopta la línea.
Sincronizar (Sinc): Con esto evitamos que no se reproduzca el último bucle de un
símbolo gráfico incluido en nuestra película con una animación en su línea de tiempo
interna, cuando el número de fotogramas que ocupa en la línea principal no es múltiplo de
los fotogramas que contiene la instancia.
Ajustar: Si activamos esta opción, el centro de la instancia (identificado con una
cruz) se ajustará forzosamente a la guía que hemos marcado en la correspondiente capa.
De hecho si intentamos mover la instancia en un fotograma de la animación, Flash la
volverá a colocar sobre la guía de manera automática.
Unidad 14. Efectos sobre animaciones (III)
14.3. Efectos sobre el símbolo interpolado
Ya vimos en temas pasados cómo aplicar efectos sobre instancias de símbolos y vimos
que se podía lograr efectos vistosos. No obstante, cuando los efectos muestran su
verdadera potencia es cuando el símbolo forma parte de una animación.
Para explicar y demostrar las posibilidades de estos efectos vamos a abrir el panel
Propiedades, que nos mostrará, en el desplegable Color los posibles efectos a aplicar si
seleccionamos una instancia de un símbolo cualquiera de nuestra película.
Podemos aplicar los efectos sobre cualquier símbolo de cualquier fotograma de la
animación, tanto sobre el fotograma inicial o el final como en los intermedios. En este
último caso, si se trata de una interpolación clásica, deberemos convertir a fotograma
clave aquel que contenga la instancia y después aplicar el efecto. El efecto se irá
aplicando de forma gradual. De hecho, es frecuente utilizar interpolaciones clásicas
únicamente para aplicar efectos.


Para entender bien lo que sigue, es necesario controlar la aplicación de efectos sobre
instancias. Esto lo vimos en el Tema 9 y por eso omitiremos detalles sobre cómo aplicar
efectos concretos sobre símbolos.
14.4. Efecto brillo
El efecto de brillo, como su propio nombre indica, nos viene muy bien para simular el
hecho de que algún objeto se encienda o brille, o por el contrario se apague o pierda brillo.
Para conseguir esto hemos creado una interpolación para cada luz, formada por tres
fotogramas claves. El tercero lo hemos colocado justo en el medio de la secuencia de
fotogramas. A la primera luz y a la última le hemos dado el mismo valor de brillo, y en la
del medio le hemos dado un valor más alto o más bajo según fuera el símbolo de abajo o
el de arriba.
Como los movimientos de las luces son distintos e independientes los hemos colocado
en distintas capas.
Para la luz superior los valores de brillo fueron: 0 para el primer fot. clave, -46 para el
central y 0 para el del medio.
Y en la luz inferior al contrario: -46 para el primer fot. clave, 0 para el central y -46
para el del medio.

Unidad 14. Efectos sobre animaciones (IV)
14.5. Efecto tinta
El efecto de tinta, tiene un amplio marco de posibilidades de uso. Es muy usado en
textos y en botones, por ejemplo haciendo que cambien progresivamente de color al
pasarles el ratón por encima o simplemente efectos de cambio de color en
presentaciones.
El tintar colores supone un toque alegre y muy vistoso en las presentaciones y si se
usan varios efectos, combinados adecuadamente, dota de un ritmo rápido a la animación,
como una explosión de color que sorprenda al receptor de la película.
Otro interesante uso de este efecto es simular la proyección de una luz de color sobre
un objeto que se va acercando al foco.




14.6. Efecto transparencia (Alfa)
Este es probablemente el efecto más utilizado debido a la versatilidad del hecho de
controlar el grado de visibilidad de los objetos. Podemos, por ejemplo, simular un foco
apuntando a un escenario o, lo más común, hacer aparecer objetos de la nada y también
hacer que se desvanezcan poco a poco.

Ejercicios unidad 14: Efectos sobre animaciones
Ejercicio 1: Efecto Rotación

1. Crea un nuevo archivo.
2. Dibuja una rueda y haz que se desplace de un lado al otro del escenario.
3. Haz que ruede mientras hace el desplazamiento.
4. Guárdalo como rueda.fla.
Ejercicio 2: Efecto Aceleración
1. Abre el archivo rueda.fla.
2. Haz que vaya frenando en su movimiento hasta pararse.
Ejercicio 3: Orientar según el Trazo
1. Abre el archivo babosa.fla que creamos en el tema anterior.
2. Dibuja una guía con forma de montañas para que sea recorrida por nuestra babosa.
3. Puesto que así parecerá que la babosa esté volando, haz que se arrastre por el
borde de la montaña.
Ejercicio 4: Efecto Alpha
1. Escribe tu nombre.
2. En una nueva capa escribe tu apellido.
3. Haz que el nombre vaya desapareciendo y que antes de que lo haga aparezca poco
a poco el apellido por detrás de él.
4.


1. Crea un nuevo Archivo de Flash (AS 3.0) desde el menú Archivo → Nuevo.
2. Dibuja la rueda con las herramientas de dibujo de Flash, y conviértela en un símbolo.
3. Haz clic con el botón derecho sobre el primer fotograma y selecciona Crear
Interpolación Clásica Pulsa F6 en el fotograma 20 y pon la rueda en el otro
extremo del escenario.
4. Haz clic sobre el Fotograma 1 para seleccionarlo y ve al panel de Propiedades. En
El panel que aparece selecciona el valor CW de la opción de Rotación para girar
hacia la derecha y dar la sensación de avance. Deja el valor por defecto de una
vuelta..
5. Ve al menú Archivo → Guardar Como y guarda el archivo como rueda.fla.

Ejercicio 2: Efecto Aceleración
1. Si los has cerrado, abre el archivo rueda.fla creado en el ejercicio anterior.
2. En la línea de tiempo, selecciona alguno de los fotogramas de la interpolación.
3. En el panel Propiedades, introduce el valor 100 de la opción de Aceleración.
Ejercicio 3: Orientar según el Trazo
1. Utiliza Archivo → Abrir para abrir el archivo babosa.fla.
2. Haz clic derecho sobre la capa de la interpolación, y elige la opción Añadir guía de
movimiento clásica.
3. Crea la guía con la forma de las montañas.
4. Coloca la instancia del primer y el último fotograma al principio y al final de la guía
respectivamente.
5. Ahora haz clic sobre el un fotograma de la interpolación, y en el panel Propiedades
marca la casilla Orientar según trazado.
Ejercicio 4: Efecto Alfa
1. Utiliza la Herramienta Texto y escribe en el primer fotograma tu nombre.
2. Crea una nueva capa, e introduce un texto con tu apellido.
3. Convierte ambos textos en símbolos.
4. En ambas capas, crea fotogramas clave en los fotogramas 10, 20, 30 y 40.
5. En la primera capa, para el símbolo del nombre, pon a 0 el valor para el efecto Alfa
de la instancia en los fotogramas 20 y 30.
6. En la segunda capa, para el símbolo del apellido, pon a 0 el valor para el efecto Alfa
de la instancia en los fotogramas 1, 10 y 40.


7. Para la primera capa, haz clic derecho entre los fotogramas 10 y 19 y elige Crear
interpolación clásica.
8. Para la primera capa, haz clic derecho entre los fotogramas 30 y 39 y elige Crear
interpolación clásica.
9. Repite los pasos 8 y 9 con la segunda capa.
10. Prueba la animación.
11. Prueba evaluativa unidad 14: Efectos sobre
animaciones
13. Sólo una respuesta es válida por pregunta. Haz clic en la respuesta que consideres
correcta.
Contesta todas las preguntas y haz clic en el botón Corregir para ver la solución.
Si pulsas Restablecer podrás repetir la evaluación.
1. Se pueden aplicar efectos sobre la forma de hacer el movimiento y sobre los efectos
que en él intervienen.
a) Verdadero
b) Falso
2. La opción escalar permite un cambio progresivo de tamaño durante el movimiento.
a) Verdadero
b) Falso
3. Para hacer que un objeto aparezca poco a poco ante nuestros ojos utilizaremos el
efecto Tinta.
a) Verdadero
b) Falso
4. Un valor de Aceleración (Borrar) de -100 hace que el objeto empiece rápido y vaya
frenando poco a poco.
a) Verdadero
b) Falso
5. No podemos hacer que un objeto se oriente según la dirección de la guía de
movimiento que hemos creado.
a) Verdadero
b) Falso
6. Para hacer aparecer progesivamente un objeto podemos usar el efecto Alfa.
a) Verdadero


b) Falso
7. El campo Etiqueta de fotograma ayuda a identificar la interpolación en la barra de
tiempos.
a) Verdadero
b) Falso
8. Para hacer aparecer progesivamente un objeto podemos usar el efecto Brillo.
a) Verdadero
b) Falso
9. Si en la propiedad Rotar del fotograma tenemos Auto...
a) Hace que el objeto gire siempre en sentido contrario a las agujas de un reloj.
b) Hace que el objeto gire en la dirección que necesite menos movimiento.
c) Ninguna de las anteriores.
10. Para que una rotación se produzca seguro...
a) Debemos elegir la opción Auto para que lo haga automáticamente.
b) Elegiremos CMR o CCMR.
c) Elegiremos Ninguna.













Unidad 15. Generar y publicar películas (I)
15.1. Consideraciones sobre el tamaño de las películas
Antes de aventurarnos a publicar nuestra película para que otros la vean, sobre todo si
la vamos a publicar en una página web, donde el tamaño de descarga es de vital
importancia, debemos tener en cuenta los siguientes aspectos:
CONSIDERACIONES EN EL DIBUJO:
Aunque los degradados queden muy vistosos, también requieren más memoria, por
lo que debemos evitar su uso excesivo, en la medida de lo posible.
La herramienta Pincel gasta más memoria que el resto de herramientas de dibujo,
por lo que deberíamos elegir estas últimas en la medida de lo posible.
Hemos visto que la animación de líneas es bastante útil. Sin embargo el uso de
líneas que no sean las definidas por defecto y que usamos en el capítulo que hemos
comentado, hará que el tamaño de la descarga aumente. Por tanto evitemos las
líneas discontinuas, de puntos ...
Dibujar las curvas con el menor número de nodos posible.
CONSIDERACIONES EN LA ORGANIZACIÓN:
Agrupar los objetos que estén relacionados, con el comando Modificar → Agrupar.
Si hemos creado un objeto que va a aparecer varias veces, deberíamos convertirlo
a símbolo, ya que como hemos visto, Flash lo colocará en la biblioteca y cada vez
que quiera mostrarlo, hará referencia a una única posición de memoria.
Ya hemos comentado el mayor tamaño de los mapas de bits, lo que hace que
debamos minimizar el número de apariciones de éstos en nuestra película.
CONSIDERACIONES EN LOS TEXTOS:
Hemos podido observar, cuando manejábamos textos, que cuando abrimos el menú
de tipos de letras, las tres primeras son siempre "_sans", "_serif" y "_typewriter".
Esto no es una casualidad. Están colocadas ahí para resaltar que estas fuentes
ocupan un mínimo de memoria, por lo que se recomienda su uso.
CONSIDERACIONES EN LA ANIMACIÓN:
Utilizar lo más que podamos las interpolaciones de movimiento y las guías para
reducir el número de fotogramas clave y el tamaño de la película.
Evitar el uso de la interpolación por forma para animaciones de cambio de color,
cuando sea posible.
Independientemente de la optimización que hagamos, a veces no se puede evitar
que el tamaño de la película aumente. Es recomendable entonces hacer un
preloader (precarga) cuando la película que queramos publicar sea de tamaño
superior a unos 80KB.



Unidad 15. Generar y publicar películas (II)
15.2. Preloader. Cargar la Película entera antes de reproducirla
Un preloader se usa principalmente para evitar la carga parcial de la película, mientras
ésta se está reproduciendo, lo que, en ocasiones en las que la película es de un tamaño
considerable, hace que la película se vea entrecortada.
Normalmente, los preloaders se hacen vistosos para que el observador no se aburra y
deje de lado la opción de visitar nuestra web. Suelen llevar alguna animación sencilla que
se va reproduciendo mientras se está cargando simultáneamente la película principal,
mucho más grande.
Se pueden complicar mucho más, pero nosotros haremos uno sencillo que nos sirva
para entender bien el concepto, y la manera de hacerlo.
Partimos de que ya tenemos nuestra película terminada. Si queremos saber su tamaño
podemos ir a Archivo → Configuración de publicación seleccionar la pestaña Flash, y
marcar la casilla Generar Informe de Tamaño. Si pulsamos el botón Publicar, aparecerá
en nuestro directorio un archivo de texto donde se explica con detalle el tamaño de
nuestra película.

Ahora insertaremos una nueva escena (Insertar→ Escena). Deberá ser la primera que
se ejecute. Para asegurarnos de ello accedemos a Ventana → Otros Paneles→ Escena,
y en la ventana que aparece arrastramos la escena que acabamos de crear hasta que
esté la primera. En nuestro ejemplo le hemos llamado "Preloader" y hemos supuesto que
la Escena con la película se llama "Película" (lógicamente). Deberá quedar algo similar a
lo que muestra la imagen.
En la escena recién creada insertaremos otra capa, de manera que nos queden dos
capas a las que llamaremos, "Acción" y "Cargando".


En la capa "Cargando" crearemos una animación sencilla. Por ejemplo, hagámosle
honor al título y escribamos "Cargando ..."; puedes aplicarle la animación que prefieras,
siempre que no sea muy compleja. En nuestro ejemplo, esta capa tiene por lo menos
dos fotogramas.
En la capa "Acción" diseñaremos el "corazón" del preloader. Vamos a hacer que la
animación de nuestra escena de carga se ejecute repetidas veces, hasta que se haya
cargado la escena que contiene la película principal, mediante las acciones ActionScript 3
de Flash. Para ello abrimos el panel de Acciones.
Vamos a emplear la función gotoAndPlay de ActionScript, que como ya comentamos
nos permite ir a un fotograma determinado. Podemos escribirlo gotoAndPlay(1,
"Escena") para ir al primer fotograma de la escena indicada.
Podemos saber cuántos fotogramas se han cargado hasta ahora con la propiedad
this.framesLoaded, y cuantos fotogramas hay en total con this. totalFrames.
Conociendo estos datos, lo único que tenemos que hacer es preguntar si los
fotogramas cargados igualan a los totales . Si es que sí, ya podemos avanzar hasta la
siguiente escena. Y si no, podemos volver al principio de nuestro loader, lo que lo irá
repitiendo en bucle.
Para expresar esto en ActionScript, lo haríamos así:
if(this.framesLoaded==this.totalFrames) {
gotoAndPlay(1, "Película")
} else {
gotoAndPlay(1, "Cargador")
}
Si no entiendes exactamente el código no te preocupes, lo veremos más adelante. Lo
importante ahora es el concepto.
Por lo tanto, lo que hará esta instrucción es reproducir la escena Cargador, y al final
comprobar el estado de la carga. Si se no se ha completado, vuelve al principio del
cargador, lo que hará que vuelva a pasar por la instrucción. Cuando la carga esté
completa, iniciamos la Película.
Y esto es todo lo que hay que hacer para crear un preloader (aunque por supuesto se
puede hacer más sofisticado), con lo que los visitantes ya no huirán de nuestra web. En


los primeros temas de Java Script veremos como mostrar en el preloader el estado de la
carga.
Unidad 15. Generar y publicar películas (III)
15.3. Distribución como archivo swf en un reproductor autónomo
Para poder distribuir películas creadas en Flash que la gente pueda ver, son
necesarias dos cosas: crear un archivo SWF y que el que la quiera visualizar tenga
instalado el Reproductor de Flash.
Flash nos ofrece varias opciones y funcionalidades para la creación de un archivo SWF.
Estas opciones se pueden ver en el panel de Configuración de Publicación, al que
podemos acceder mediante el menú Archivo → Configuración de Publicación (Pestaña
Flash).
Veamos cuáles son estas opciones:



Reproductor: Si queremos publicar nuestra película para que sea vista con
versiones anteriores de Flash, debemos seleccionar aquí la versión deseada.
Versión de ActionScript: El uso de ActionScript 3 nos permitirá usar las novedades
relativas a objetos, clases etc... Si hemos introducido código ActionScript debemos
de respetar la versión elegida al crear el archivo, si no se pueden producir errores.
Calidad JPEG: Si en el panel de propiedades del mapa de bits no hemos indicado
una compresión concreta, aquí podremos determinar su grado de compresión, que
determinará a su vez el espacio ocupado en memoria por este tipo de imágenes. A
mayor compresión, menos espacio en memoria ocupará la imagen, pero también su
calidad será menor.
Establecer Flujo de Audio o Evento de Audio: Esta opción nos permite acceder al
Panel "Configuración de Sonido" desde donde podemos configurar, para cada tipo
de sonidos, sus características.


Suplantar configuración de sonido: Con esto se suplantarán los niveles de
compresión seleccionados para cada archivo de sonido de nuestro documento.
Comprimir película: Comprime la película al máximo posible.
Generar Informe de tamaño: Esta opción la hemos usado en el apartado anterior.
Si la activamos, se creará un archivo de texto con una relación detallada del tamaño
del documento.
Proteger Frente a Importación: Activando está casilla hara que cuando otro
usuario (o nosotros mismos) queramos importarla no podamos o tengamos que
introducir una contraseña si se ha escogido alguna.
Omitir acciones de trace: Las acciones de traza se emplean para comprobar el
correcto funcionamiento de la película durante la creación de esta (durante las
pruebas). También se consideran trazas los comentarios que insertemos en el
código ActionScript. Si activamos esta señal, la película creada no los incluirá,
ocupará menos tamaño y ahorraremos tiempo innecesario. Es recomendable
cuando se publique la película de un modo definitivo.
Permitir depuración: Permite que se pueda depurar el archivo SWF. También exige
la introducción de una contraseña ya que se debe tener permiso del creador para
Importar el archivo y depurarlo.
Para entender mejor este concepto te recomendamos hacer el ejemplo siguiente:
Unidad 15. Ejercicio paso a paso: Generar y publicar películas
Objetivo
Aprender a publicar una película Flash como archivo SWF independiente, así como
configurar las opciones de publicación.
Ejercicio paso a paso
1. Accedemos al menú Archivo → Abrir y abrimos el archivo publicacion.fla que se
encuentra en la carpeta ejercicios .
2. Abrimos la biblioteca del documento mediante Ventana → Biblioteca.
3. Vamos al menú Archivo → Configuración de publicación para abrir la ventana
Configuración de Publicación.
4. Abre la pestaña Formatos y desactiva la casilla HTML, porque no vamos a utilizar la
película vía web.
5. Abre la pestaña Flash.
6. En la barra deslizante Calidad JPEG ponemos el valor 0 para reducir la calidad al
mínimo.
7. Vamos a protegerlo para que nadie lo pueda importar.
Marcamos la casilla de verificación Proteger frente a Importación e introducimos
en el campo Contraseña la palabra de paso que deseemos.
8. Pulsamos el botón Publicar.
9. Accede al directorio de Flash donde se ha exportado el archivo SWF y ejecútalo.

Comprueba que la calidad de las imágenes no es buena.


10. Abrimos ahora el menú Archivo→ Importar y seleccionamos el archivo que
acabamos de publicar.
11. Comprueba que nos pide la clave para poder hacerlo.
Ahora tenemos una película que no podrán importar y cuyo espacio en memoria será
menor debido al menor tamaño de sus bitmaps.
Unidad 15. Generar y publicar películas (IV)
15.4. Distribución para páginas web
Esta es una parte importante, ya que normalmente las películas de Flash están
orientadas a la publicación vía Web.
Para publicar una película Flash en Internet de manera que forme parte de una página
web deberemos insertarla en un archivo típico de páginas web cuyo lenguaje de
programación sea del estilo del HTML. Para ello debemos atender a las opciones de
publicación HTML que nos ofrece Flash, y que nos ayudarán a que nuestra película se
visualice como realmente queremos.
Las opciones de este tipo de publicación están en Archivo → Configuración de
Publicación... (Pestaña HTML).

Plantilla: Para incrustar una película Flash en un documento HTML, hay que escribir
una serie de códigos de programa algo complejos y laboriosos de hacer a mano.
Para facilitarnos esta tarea Flash hace esto automáticamente pero, puesto que cada
web es distinta y nuestras necesidades van a ser muy distintas, los códigos también serán
muchos y distintos, por esto Flash incluye Plantillas, que crean este código
automáticamente según el tipo de publicación que deseemos:
En el botón Información que está a la derecha de la pestaña "Plantilla" se nos muestra
información muy útil sobre cada tipo de plantilla. Estas son las plantillas más comunes:
Sólo Flash: Esta es la opción predeterminada y utiliza el reproductor Flash CS4.
Flash con FSCommand: Imprescindible cuando se usen FSCommands. Permiten
controilar el reproductor desde la película.
Mapa de Imágenes: Si hemos incluido una Image Map (imágenes completas que
ejecutan distintas acciones según la coordenada que se pulse) debemos activar esta
opción.
QuickTime: Permite incluir una película QuickTime.
etc ...


Detectar Versión de Flash: Desde aquí podemos seleccionar si queremos que
nuestra película detecte la existencia o no existencia del plugin de Flash en el ordenador
del usuario, así como las páginas web donde se insertará el código encargado de
comprobarlo y las páginas web a las que se irá en caso de disponer del Plugin o no
disponer de él.
Dimensiones: Especifica la unidad en la que mediremos las dimensiones del
Documento.
Anchura X Altura: Aquí introduciremos la anchura y altura, teniendo en cuenta que
a veces un objeto más grande que estas dimensiones provocará un cambio en
éstas.
Reproducción: Permite realizar determinados cambios en cuanto a la reproducción
de la película:
Pausa al Comienzo: Permite que sea el usuario quien haga que se inicie la
reproducción, que inicialmente aparecerá detenida.
Reproducción Indefinida: Cuando la película termine, volverá a empezar desde el
principio. Esto lo hará infinitamente.
Visualizar Menú: Permite que al hacer el usuario clic con el botón derecho del ratón
sobre la película, el menú emergente tenga todas las opciones por defecto. Si la
desactivamos sólo aparecerá la opción "Acerca de Flash".
Fuentes de Dispositivo: Sustituye las fuentes utilizadas en los textos sin animación
de la película por las fuentes predeterminadas en la máquina de quien la visualice.

. Unidad 15. Generar y publicar películas (V)
Calidad: Aquí podemos modificar la calidad de visualización de la película, que
depende del suavizado de la imagen y el tiempo de reproducción. Las opciones son:
Baja No hay suavizado. El tiempo de reproducción es el de máxima velocidad.
Baja Automática: El reproductor detecta si la máquina soporta en cada instante un
ligero suavizado, si lo soporta, lo aplica. El tiempo sigue siendo muy rápido.
Alta Automática: Pone al mismo nivel el tiempo y el suavizado, pero si hay alguna
limitación, siempre dará preferencia a la velocidad.
Media: Valores intermedios de velocidad y suavizado. No suaviza los bitmaps.
Alta: Usa siempre el suavizado, los mapas de bits se suavizan sólo si no hay
animación. Da preferencia a la buena visualización.
Óptima: Se suaviza todo, incluidos los mapas de bits en cualquier caso. Total
preferencia de la apariencia frente a la velocidad.


Modo de Ventana: Opciones para la reproducción dentro de las ventanas de
Windows:
Ventana: Se reproduce la película en la ventana de la web en la que está insertada.
Opaco sin Ventanas: Hace que los objetos situados en capas situadas detrás de la
película no se vean (en páginas DHTML).
Transparente sin Ventanas: Es el opuesto al anterior. Permite que los objetos
situados detrás se vean.
Alineación HTML: Posición relativa de la película dentro de la página web HTML.
Tenemos varias opciones:
Predeterminada: Centra la película en la página. Si no cabe se cortan los extremos.
Izquierda: Alineación a la izquierda. También se recortan los bordes si no cabe.
Derecha: Alineación a la derecha.
Superior: Alineación en el borde superior de la página.
Inferior: Alineación en el borde inferior de la página.
Escala: Si hemos especificado el tamaño en píxeles o en tanto por ciento, podemos
decirle a Flash cómo distribuir la película en el rectángulo que hemos decidido que la
contenga:
Predeterminada: Se ve toda la película guardando las proporciones originales.
Sin Borde: Recorta (en caso de que la película sea más grande que el rectángulo)
todo lo que sobre con el fin de mantener las proporciones.
Ajuste Exacto: Distorsiona las proporciones si es necesario para conseguir que la
película ocupe el rectángulo completo.
Alineación Flash: Se hace necesario alinear la película cuando esta no tiene las
mismas dimensiones que el rectángulo definido. Las opciones son:
Alineación Horizontal: Podemos escoger entre Centro, Izquierda o Derecha.
Alineación Vertical: Podemos escoger entre Centro, Superior o Inferior.
Mostrar Mensajes de advertencia: Permite que se muestren los posibles mensajes
de error de código ActionScript.

Además, Flash creará el código Javas Script que detecte la versión de Flash y otras
acciones.


De todas formas, lo más habitual es utilizar un editor web, como Dreamweaver para
crear la página web, y desde ahí insertar el archivo SWF, por lo que será el propio editor
el que se encargue de generar este código.

Ejercicios unidad 15: Generar y publicar películas
Ejercicio 1: Código para incrustar Flash en HTML
Cuando exportamos una película Flash para publicarla en una página web, Flash
introduce entre las líneas HTML un código de etiquetas (como el HTML) que muestra al
navegador qué película tienen que reproducir y cómo.
El código se divide en dos partes: al principio un script que intenta reproducir el Flash
utilizando Java Script. Después entre las etiquetas <noscript></noscript> el código
necesario para mostrar el Flash en caso de que el script esté desactivado.
Céntrate en el código que aparece entre AC_FL_RunContent( y ); //end AC. En
cada línea encontramos un parámetro y su valor. Intenta deducir e identificar aquellos
elementos que podamos haber indicado nosotros en las propiedades de exportación, y
que están estrechamente relacionados con la visualización que tendrá de ella la gente en
el navegador.
<script language="JavaScript" type="text/javascript">
AC_FL_RunContent(
'codebase',
'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.
cab#version=10,0,0,0',
'width', '550',
'height', '400',
'src', 'aulaClic',
'quality', 'high',
'pluginspage',
'http://www.adobe.com/go/getflashplayer_es',
'align', 'middle',
'play', 'true',
'loop', 'false',
'scale', 'showall',
'wmode', 'window',
'devicefont', 'false',
'id', 'pub',
'bgcolor', '#ffffff',
'name', 'aulaClic',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'aulaClic',
'salign', ''
); //end AC code


</script>
<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash
/swflash.cab#version=10,0,0,0" width="550" height="400" id="pub"
align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="aulaClic.swf" /><param
name="loop" value="false" /><param name="quality" value="high"
/><param name="bgcolor" value="#ffffff" />
<embed src="aulaClic.swf" loop="false" quality="high"
bgcolor="#ffffff" width="550" height="400" name="aulaClic"
align="middle" allowScriptAccess="sameDomain"
allowFullScreen="false" type="application/x-shockwave-
flash" pluginspage="http://www.adobe.com/go/getflashplayer_es" />
</object>
</noscript>


Ayuda ejercicios unidad 15: Generar y publicar películas
Solución al ejercicio:
AC_FL_RunContent(
'codebase', 'http://download...',
'width', '550',
'height', '400',
'src', 'aulaClic',
'quality', 'high',
'pluginspage', 'http://www.adobe...',
'align', 'middle',
'play', 'true',
'loop', 'false',
'scale', 'showall',
'wmode', 'window',
'devicefont', 'false',
'id', 'pub',
'name', 'aulaClic',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'aulaClic',
'salign', ''
); //end AC code
codebase: Es la URL de la definición del código Flash.
width y height son el ancho y alto de la película.


src: Aquí se está indicando la ruta donde está y el nombre del archivo SWF que hemos
exportado y que queremos que se reproduzca en nuestra página.
quality: indica la calidad de reproducción de la película (como hemos visto en este
tema, esta viene determinada por la velocidad y el suavizado o calidad de imagen) y sus
posibles valores pueden ser los allí
pluginspace: Aquí se indica la página desde la que se puede descargar el plug-in
necesario para ver la película.
align: Indica el lugar en el que hayamos alineado la película página web.
loop: Indica si se repetirá en bucle.
play : indica si se reproducirá automáticamente la película
scale: Indica si el tipo de escala.
wmode: Indica el modo de ventana.
devicefonts: Indica si la opción fuente de dispositivo está activa.
id: Atributo HTML que identifica el elemento.
name: Es el nombre de la película que hemos publicado.













Prueba evaluativa unidad 15: Generar y publicar películas
Sólo una respuesta es válida por pregunta. Haz clic en la respuesta que consideres
correcta.
Contesta todas las preguntas y haz clic en el botón Corregir para ver la solución.
Si pulsas Restablecer podrás repetir la evaluación.
1. Flash CS4 nos permite trabajar con total libertad, sin preocuparnos por el tamaño de
los objetos que dibujemos.
a) Verdadero
b) Falso
2. Agrupar los objetos o convertirlos en símbolos suelen conllevar un ahorro en espacio,
pues Flash reutilizará los objetos en lugar de crear otros nuevos desde cero.
a) Verdadero
b) Falso
3. Los mapas de bits, al estar formados por bits individuales, consumen menos espacio
que una imagen vectorial, con complejos cálculos matemáticos.
a) Verdadero
b) Falso
4. Si a pesar de todo, nuestra película supera los 80 KB, situar un cargador o preloader
puede ser una buena solución para evitar los retardos y la mala reproducción de la
película.
a) Verdadero
b) Falso
5. Flash permite publicar películas para sus distintas versiones desde la versión 1,
pasando por la versión de Flash 5, hasta la actual Flash CS4.
a) Verdadero
b) Falso
6. Flash sólo es capaz de utilizar las fuentes (tipografías) existentes en el servidor, pues
no puede acceder a las del disco duro del usuario.
a) Verdadero


b) Falso
7. Desde el cuadro de diálogo de Configuración de Publicación podemos determinar los
metadatos del archivo.
a) Verdadero
b) Falso
8. Desde el cuadro de diálogo de Configuración de Publicación es posible Publicar
directamente el archivo sin necesidad de ejecutar el comando Archivo → Publicar.
a) Verdadero
b) Falso
9. Los ficheros de Flash son públicos y resulta muy complejo evitar que otros puedan
importar nuestras películas, ya que Flash no incluye ningún mecanismo de seguridad.
a) Verdadero
b) Falso
10. Las imágenes JPG insertadas en nuestra película se insertan con una calidad
determinada y ésta no puede modificarse desde Flash.
a) Verdadero
b) Falso
11. Flash nos permite ocultar al usuario determinadas propiedades de la película
accesibles por los usuarios una vez esté ésta publicada, tales como la opción de
imprimir o modificar su calidad (accesibles mediante el botón derecho).
a) Verdadero
b) Falso
12. Flash CS4 nos ayuda considerablemente en la tarea de publicar nuestra película,
pues nos permite crear automáticamente un fichero HTML en el que esté contenida la
película. También nos permite modificar distintas propiedades de esta publicación, tales
como la alineación de la película dentro de la página web, el tamaño, la escala etc.
a) Verdadero
b) Falso






















Unidad 16. Introducción a ActionScript 3 (I)
16.1. ¿Qué es el ActionScript?
El ActionScript es el lenguaje de programación que ha utilizado Flash desde sus
comienzos, y que por supuesto, emplea Flash CS4. A grandes rasgos, podemos decir que
el ActionScript nos permitirá realizar con Flash CS4 todo lo que nos propongamos, ya que
nos da el control absoluto de todo lo que rodea a una película Flash. Absolutamente de
todo.
Sin embargo, en estos temas sólo vamos a ver una pequeña introducción a
ActionScript 3 que servirá para sentar las bases que permitirán empezar a trabajar con
ActionScript. Enseñar a programar con ActionScript requeriría otro curso completo.
Profundizar en el conocimiento de este lenguaje queda por cuenta del lector.
Recomendamos seguir la estupenda Ayuda incluida en Flash CS4.
Todo lo referente a este curso hace referencia a la versión 3 de ActionScript. Si
buscas información sobre ActionScript 2.0, te recomendamos el curso de Flash CS3, en el
que resolvemos los mismos ejemplos, pero con AS 2.0.

Características generales
Como ya hemos comentado, el ActionScript es el lenguaje de programación propio
de Flash, tal y como el Lingo lo es de Macromedia Director, por ejemplo. El
ActionScript está basado en la especificación ECMA-262, al igual que otros
lenguajes como Javascript.
ActionScript es, como su nombre indica, un lenguaje de script, esto quiere decir que
no hará falta crear un programa completo para conseguir resultados, normalmente la
aplicación de fragmentos de código ActionScript a los objetos existentes en nuestras
películas nos permiten alcanzar nuestros objetivos.
ActionScript 3 es un lenguaje de programación orientado a objetos. Tiene
similitudes, por tanto, con lenguajes tales como los usados en el Microsoft Visual
Basic, en el Borland Delphi etc... y aunque, evidentemente, no tiene la potencia de
estos lenguajes, cada versión se acerca más. Así, la versión 3.0 utilizada en Flash
CS4 es mucho más potente y mucho más "orientada a objetos" que su anterior
versión 2.0.
La sintaxis ActionScript presenta muchísimos parecidos con el Javascript o PHP; si
estamos familiarizados con estos lenguajes, la sintaxis y el estilo de ActionScript nos


resultarán muy familiares. Las diferencias entre JavaScript y ActionScript las
podemos encontrar en la ayuda que acompaña al Flash CS4.
En la mayor parte de las ocasiones, será necesario "programar". Flash CS4 pone a
nuestra disposición una biblioteca de funciones, clases y métodos (de momento
entenderemos esto como "código ActionScript que realiza una función determinada")
ya implementadas que realizan lo que buscamos, bastará con colocarlas en el lugar
adecuado.
Vamos a ver muchas de estas funciones en este curso, pero antes recomendamos
tener claros ciertos conceptos relacionados con la programación. Para ello,
recomendamos echar un vistazo a nuestro tema básico:

Unidad 16. Básico: Conceptos iniciales de AS3 (I)
Introducción a la Programación con ActionScript
Si bien el objetivo de este tema NO es enseñar programación, no podemos pasar
por alto que ciertos conceptos relacionados con ella deben conocerse para poder llegar a
entender el ActionScript. Vamos pues a explicar algunos conceptos fundamentales,
necesarios para abordar la programación mediante ActionScript.
Script: Código escrito en cualquier lenguaje de programación que realiza una tarea
determinada. Así por ejemplo, el código ActionScript necesario para que al pulsar un
botón de Flash pasemos al fotograma siguiente es un script.
Variable: Vamos a explicar la interpretación del término variable en programación
mediante un ejemplo sencillo.
Si tenemos la expresión: x = 3;
Tenemos que x es una variable que toma el valor 3. Se llama variable precisamente
porque puede cambiar de valor en cualquier momento durante la ejecución de nuestra
película Flash. Todos los datos que se manejan normalmente son variables (salvo
aquellos constantes, por ejemplo el número 3). Así, en un formulario de introducción de
datos personales, el nombre es una variable (de tipo cadena de caracteres o string), el
apellido también, la dirección, el teléfono etc...
La primera vez que utilicemos una variable en nuestro código, tenemos que definirla
con la palabra reservada var, seguida del nombre que le queramos asignar, dos puntos y
el tipo de datos que contendrá. Y si queremos, también, podemos asignarle un valor
inicial. Es decir, utilizaremos el siguiente formato:


var nombreVariable:TipoDato = valorInicial;
El tipo de dato puede ser cualquier objeto, por ejemplo un MovieClip. Habitualmente
utilizaremos el tipo String para cadenas de texto y el tipo Number para números.
Expresión: Conjunto de operadores, constantes, variables o acciones que permiten
obtener un valor.
Sentencia o instrucción: Provocan un resultado o una acción determinada y
concreta. Por ejemplo, una asignación, la llamada a una función, etc. Deben ir terminados
por ' ; ' (punto y coma).
Función: Una función es una porción de código (ActionScript en nuestro caso) que
tiene un nombre determinado y que realiza una labor concreta generalmente devolviendo
un determinado valor. Ejemplo, la siguiente definición de función:
function Incrementa(x) {
return x + 1;
}
Realiza la función de tomar la variable "x" y devuelve su valor sumándole uno. Si
quisiéramos ejecutarla en algún lugar de nuestra película, bastaría con escribir:
valor=Incrementa(3), siempre y cuando la definición de la función (que es el código
mostrado arriba) esté en cualquier parte de la película. Esto provocaría que la función
calculase el valor 4 (3 + 1) y lo guardase en la variable valor.
Acción: Flash llama Acción a funciones que él mismo ha implementado y que no
requieren ser definidas para ser usadas. Basta por tanto, con escribir el nombre de la
acción. Estas acciones son lo que usaremos la mayoría de las veces, pues resultan
sumamente fáciles de usar y muy potentes. Las acciones aparecen en el Panel Acciones
y se pueden insertar en nuestro código con un simple clic de ratón.
Por ejemplo gotoAndPlay(3); es una acción.
Ahora que entendemos qué son las funciones, deberemos comprender también, que en
alguna parte, Flash ha definido la función gotoAndPlay (tal y como hemos hecho
nosotros anteriormente con la función Incrementa) y ha escrito un código que provoca el
efecto ya comentado. Por suerte todo esto no nos debe preocupar, Flash CS4 se encarga
de todo. Nos basta con conocer cómo usarlas.


Parámetro o argumento: Un parámetro es una variable que entra o sale de una
acción o función. Ponemos un ejemplo:
Tenemos la siguiente definición de función:
function areaRectangulo(lado1, lado2) {
return lado1*lado2;
}
Imaginemos que queremos calcular el área de un rectángulo con un lado1 = 2 y un
lado2 = 3, y guardarlo en la variable area. Ejecutaríamos la función areaRectangulo del
siguiente modo: area = areaRectangulo(2, 3);. Vamos a ver qué hace
exactamente la función con los parámetros lado1 y lado2.
Al ejecutar areaRectangulo(2, 3), Flash busca definiciones de funciones que se
llamen areaRectangulo, enseguida encontrará la definición que hemos escrito arriba,
(que deberá estar escrita en alguna parte de nuestra película, en el mismo fotograma o en
alguno anterior al que utilizamos). Cuando lo hace, comprueba que la función que
ejecutamos COINCIDE con la cabecera de la definición, esta cabecera abarca el nombre
de la función y todo lo que venga a continuación hasta que se cierre el paréntesis. En
nuestro caso, la cabecera sería areaRectangulo(lado1, lado2).
Aquí viene la pregunta inminente, ¿Coinciden?. La respuesta es SÍ, para que coincidan
DEBE coincidir el NOMBRE de la función y el número de parámetros, que serán variables
o valores separados por comas. Como tenemos 2 parámetros en cada parte, todo
coincide y pasa a ejecutarse la función. La función ejecutada es areaRectangulo(2,
3), por lo que lo que en realidad se ejecutará:
function areaRectangulo(2, 3) {
return 2*3;
}
Tras ejecutarse esta función, se calcula el área y se devuelve (return) su valor. Como
le asignábamos el valor a una variable (area = areaRectangulo(2, 3);), el valor
devuelto queda almacenado en esa variable.
Unidad 16. Básico: Conceptos inciales de AS3 (II)


Programación Orientada a Objetos (POO): ActionScript 3 es un lenguaje orientado
a objetos, esto quiere decir que la información se organiza en grupos denominados
clases. Cuando queremos emplear una clase en nuestra película, usamos una instancia
de ella, denominada objetos. Los objetos, y por tanto, las clases, tienen Propiedades
(características, que a nivel interno son variables) y Métodos (comportamientos, que a
nivel interno son funciones).
El objeto Persona tiene:
o Propiedades:Nombre, edad, altura ...
o Comportamientos: hablar, correr, saltar ...
El objeto Clip de Película tiene:
o Propiedades: rotación, anchura, altura ...
o Comportamientos: reproducir, ir a un fotograma, parar, ...
Evidentemente el primer objeto es meramente didáctico, el segundo objeto es un objeto
de Flash (salvo que las propiedades están definidas en inglés), y probablemente el más
importante...

Los objetos los podemos encontrar también en el Panel Acciones, su uso es sencillo.
Veamos un ejemplo:
Tenemos el objeto Clip1, que es una instancia de la Clase MovieClip y por tanto, tiene
sus mismas Propiedades y Métodos.
Clip1.height = 20;
Con la línea anterior, estamos diciendo a Flash que el objeto Clip1 tiene una altura de
20 (inmediatamente Flash la modificará en el fotograma en el que se encuentre). La
sintaxis de Flash establece que debe existir el separador ".", no vale la pena entrar a
describir el porqué. Siempre será así, no lo olvidemos.
Clip1.play();
Esta acción ejecutará el método play, que pertenece a los Clips de Película, provocará
que se comience a ejecutar la línea de tiempos del Clip1. Nótese que termina con (), ya
que play es una función y todas las funciones deben llevar paréntesis aunque no tengan
parámetros..



Eventos. Con lo que hemos visto, ya podemos realizar algunos cambios o ejecutar
instruciones en nuestras películas. ¿Pero cuándo? Flash suele interactuar mucho con el
usuario, y está esperando que él haga algo (hacer clic, parar el ratón por encima, pulsar
un botón) para ejecutar determinado código. Este es el mecanismo de los eventos.
Al utilizar los eventos, le decimos a nuestros objetos que estén a la escucha, para que
cuando detecten determinada acción, ejecuten la función que le indiquemos.
Por ejemplo, con el siguiente código...
miBoton.addEventListener(MouseEvent.MOUSE_CLICK,
funcionAlHacerClick);
function funcionAlHacerClick(event:MouseEvent):void
{
this.gotoAndPlay(15);
}
Le estamos diciendo al objeto miBoton que esté a la escucha (.addEventListener),
atento para detectar el evento MOUSE_CLICK, que se produce al hacer clic sobre él. Y le
indicamos que cuando lo detecte, ejecute la función que hemos llamado
funcionAlHacerClick, en la que hemos escrito las acciones que queremos que realice.
Los eventos son fundamentales en la programación con Action Script, y los iremos
viendo en el curso.

Ya conocemos los conceptos básicos de Flash CS4. Si pensamos en que, con sólo 1
línea podemos modificar la altura de un objeto de nuestra película durante la ejecución
de la misma (y no mientras la creábamos como hasta ahora), podremos hacernos una
idea de lo que nos permitirá el ActionScript ... Podremos dar vida a nuestras animaciones
y conseguir una interactividad total con el usuario. Podremos conseguir una película
completamente multimedia e interactiva.

El conocimiento y comprensión de estos conceptos no es un requisito obligado para
comenzar a programar con ActionScript, programar por "copia y pega" es una práctica
muy común en este tipo de lenguajes. En este curso recomendamos saber lo que se está
haciendo en todo momento y conocer bien qué es cada cosa, y pensamos que hacer un


esfuerzo inicial nos gratificará constantemente durante nuestro aprendizaje de
ActionScript, pues con todo lo anterior claro y un poco de trabajo, pronto pasaremos a ser
programadores expertos.




Unidad 16. Introducción a ActionScript 3 (II)
16.2. El Panel Acciones

En Flash CS4, el Panel Acciones sirve para programar scripts con ActionScript, por
tanto lo aquí introduzcamos le afectará de menor o mayor medida. Debemos tener claro
desde un principio que el Panel Acciones puede hacer referencia a Fotogramas u
objetos, de modo que el código ActionScript introducido afectará tan sólo a aquello a lo
que referencia el Panel. Por ejemplo, en la imagen inferior, se puede distinguir que el
Panel Acciones hace referencia al Fotograma 1 de la Capa 1 (en el
nombre de la pestaña de la zona de la derecha y en la zona izquierda en el apartado
Selección actual).



El Panel Acciones se divide en 2 partes, a la izquierda tenemos una ayuda facilitada
por Flash que nos da acceso de un modo rápido y muy cómodo a todas las acciones,
objetos, propiedades etc... que Flash tiene predefinidos. Estos elementos están divididos
en carpetas, que contienen a su vez más carpetas clasificando de un modo eficaz todo lo
que Flash pone a nuestra disposición. Para insertarlos en nuestro script bastará con un
doble clic sobre el elemento elegido.
En la parte derecha tenemos el espacio para colocar nuestro script, el código de
ActionScript. El código lo podemos insertar en cualquier fotograma clave, aunque lo más
"limpio" es crear una capa para el código.

El Panel Acciones de Flash CS4, no tiene únicamente un modo de edición.
Podemos utilizar el , en el que en vez de escribir directamente,
seleccionamos los distintos elementos desde listas. Puede resultar útil al principio, cuando
aún no estamos familiarizados, pero nos limita mucho al escribir.
Cuando ya tenemos cierta soltura nos encontraremos más cómodos con el Asistente de
escript desactivado, lo que nos permite escribir directamente el código. Este último modo
nos dará más libertad y agilidad si sabemos qué hacer, pero también es más fácil que
cometamos errores.
En la parte superior encontramos herramientas que nos ayudarán. Veamos las más
útiles:
Buscar: Busca un texto en el código. Útil, por ejemplo, si queremos buscar en
todos los sitios que empleamos un objeto.
Revisar sintaxis. Comprobará errores en la sintaxis, normalmente que hayamos
olvidado cerrar paréntesis o corchetes. Si encuentra alguno, nos mostrará un
mensaje como el siguiente:



En el panel ERRORES DE COMPILADOR se mostrarán los errores indicando la capa,
fotograma y línea. Podemos ir al lugar del error haciendo doble clic.
Formato automático. Al escribir en cualquier lenguaje, es muy importante
hacerlo ordenadamente y con el formato adecuado. Este botón lo hace
automáticamente, siempre que no haya errores de sintaxis.
Cuando tenemos mucho código, nos resultará más cómodo si
contraemos ciertas partes. Con estos botones, podemos, de izquierda a derecha,
contraer el espacio entre llaves, contraer la selección o expandir todo.
Cuando estamos programando, es frecuente que queramos comentar un
fragmento de código apra que no se ejecute o que queramos añadir comentarios
descriptivos. Con estos botones, podemos comentar el texto seleccionado, o
descomentarlo.



Aunque la sintaxis sea correcta, puede que que al probar nuestra película se sigan
produciendo errores (errores de compilación). Por ejemplo porque accedemos a una
propiedad de un objeto que no existe, o nos hemos equivocado al escribir el nombre de
una variable. Estos errores también nos aparecerán en el panel Errores de compilador.
En este caso, fíjate en el número de línea del error, ya que al hacer doble clic, a veces no
va al lugar correcto si el código tiene comentarios.
Para entender mejor este concepto te recomendamos hacer el ejemplo siguiente:
Unidad 16. Ejercicio paso a paso: Código en el panel Acciones
Ejercicio paso a paso.
1. Sobre un nuevo archivo de Flash AS 3 dibuja un rectángulo y conviértelo en un
botón pulsando la tecla F8.
2. En el panel de propiedades, asígnale botonInicio como nombre de instancia.
3. Crea una nueva capa para poder insertar nuestro Código de ActionScript.
4. Selecciona el fotograma 1 y abre el panel Acciones mediante Ventana →
Acciones.
5. Ahora escribe en el panel de ActionScript lo siguiente:
6. //Detenemos la película
7. this.stop();
8. //Definimos la función que reproduce la película
9. function reproducirPelicula(event:MouseEvent):void {
10. this.play();
11. }
12. //Indicamos que al hacer clic sobre el botón, se
llame a la
13. //función anterior
botonInicio.addEventListener(MouseEvent.CLICK,
reproducirPelicula);
(botonInicio es el nombre de instancia del botón y this es el nombre especial, que
significa “el objeto actual”).
14. En este momento has hecho que la película se detenga al llegar al fotograma 1, es
decir, nada más empezar, y comience cuando se pulse el botón.


15. Para verlo, en la capa del rectángulo crea un fotograma clave (F6) sobre el
fotograma 2.
16. Mueve el rectángulo.
17. En el panel de acciones, sin tener el rectángulo seleccionado, escribe stop();.
18. Si pruebas la película (Ctrl + Intro), verás que se detiene. Al hacer clic sobre el
botón, avanzas hasta el fotograma 2 donde se vuelve a detener. Si vuelves a hacer
clic, vuelves al fotograma 1 y se detiene de nuevo.
19. Unidad 16. Introducción a ActionScript 3 (III)
20. 16.3. Los operadores y expresiones
21. Entrando un poco más a fondo en la sintaxis y el manejo del ActionScript, vamos a
comenzar hablando de los operadores y de las expresiones, por ser la parte más
elemental de una acción de ActionScript (y de cualquier otro lenguaje de
programación).
22. Un operador es un tipo de carácter que realiza una acción especial dentro de una
expresión de ActionScript. Una expresión no es más que un conjunto de operadores,
variables y constantes relacionados entre sí de un cierto modo.
23. Por ejemplo:
24. x = 3 ; --> Es una expresión cuyo resultado será asignarle a la variable ' x ' el
valor 3 (que es una constante). A partir de este punto, la variable x vale 3.
25. y = 5 + x ; --> Es una expresión cuyo resultado será asignarle a la variable ' y '
la suma de la constante 5 y la variable ' x ' que sabemos que vale 3 (porque le
hemos asignado este valor antes). Por tanto, el resultado de esta expresión es
asignarle 8 a y. También se puede considerar como asignar a y el valor de la
expresión 5 + x
26. Flash nos permite usar multitud de operadores, vamos a comentar los más comunes.
El lector puede acceder a los demás (y a estos) desde el Panel Acciones en la
carpeta Elementos de lenguaje → Operadores. Vamos a clasificar los operadores
tal y cómo lo hace Flash.
27. Operadores Aritméticos
28. Son los operadores empleados en operaciones matemáticas.
Operador Descripción Ejemplo
+ Suma 5 + 5 = 10
- Resta 5 - 5 = 0
* Multiplicación 5 * 5 = 25
/ División 5 / 5 = 1
% Resto o Módulo 10%8 = 2
++ Incremento. Suma 1 al valor valor++ equivaldría a valor = valor + 1
-- Decremento. Resta 1 al valor valor-- equivaldría a valor = valor - 1


29.
30. Operadores de Asignación
31. Asigna el valor de una variable.
Operador Descripción Ejemplo
= Asigna a la variable de la izquierda el valor de la derecha
variable vale 3;
variable = 5;
variable vale 5;
+=
Suma con asignación. Le añade a la variable el valor de la
derecha.
variable vale 3;
variable += 5;
variable vale 8;
-= Resta con asignación. Le resta el valor de la derecha.
variable vale 3;
variable -= 5;
variable vale -2;
*= Multiplicación con asignación.
variable vale 3;
variable *= 5;
variable vale
15;
/= División con asignación
variable vale
15;
variable /= 5;
variable vale 3;
32.
33. Operadores de Comparación
34. Empleados en expresiones decondicionales, devuelven un valor lógico, verdadero
(TRUE o 1) si la comparación es cierta, o falso (FALSE o 0) si no lo es.
Operador Descripción Ejemplo
> Mayor que 6 > 5 es verdadero.
< Menor que 6 < 5 es falso.
>= Mayor o igual que 6 >= 5 es verdadero.
<= Menor o igual que 6 >= 6 es verdadero.
== Igual 'hola' == 'hola' es verdadero.
!= Distinto 'hola' != 'hola' es verdadero.

Unidad 16. Introducción a ActionScript 3 (IV)
Operadores lógicos.
Evalúan valores lógicos. Normalmente se emplean para comparar dos expresiones con
operadores relacionales, y devuelve verdadero o falso.


Operador Descripción Ejemplo
&&
And (Y) Devuelve verdadero si los dos valores son
verdaderos
(6 > 5) && (1==1) devuelve
verdadero
(6 > 5) && (1==0) devuelve
falso
||
Or (O) Devuelve verdadero si alguno de los valores
es verdadero
(6 > 5) || (1==1) devuelve
verdadero
(6 > 5) || (1==0) devuelve
verdadero
(6 > 6) || (1==0) devuelve
falso
!
Not (Negado) Devuelve verdadero si el valor era
falso, y al revés.
!(9 > 2) devuelve falso
!(9 ==9) devuelve falso
Esta posibilidad de comprobar si una expresión es igual a otra, nos será muy útil para
comprobar muchas cosas durante nuestra película y en función de ellas, hacer unas cosas
u otras.
Pondremos un ejemplo; imaginemos que le pedimos a un usuario que introduzca su
edad en un campo de texto de nuestra película flash. A ese campo le llamamos
edad_usuario. Le hacemos pulsar un botón Continuar y en ese momento comprobamos
su edad, si tiene 20 años, le decimos una cosa, de lo contrario, le decimos otra. Bastaría
con hacer algo así:
if (edad_usuario==20) {
dar_mensaje_1();
} else {
dar_mensaje_2();
}
Aquí lo que estamos diciendo es lo siguiente: "Si edad_usuario es igual a 20, entonces
damos el mensaje 1, sino damos el mensaje 2.
El significado de 'if' y 'else' lo veremos más adelante, de modo que no nos
preocupemos por no entender perfectamente el código escrito arriba. También faltaría,
lógicamente, crear las funciones "dar_mensaje_1" y "dar_mensaje_2".
Orden de precedencia
Cuando en una expresión se combinan varios operadores, el orden en que se ejecutan
puede variar el resultado de la expresión, por eso es muy importante saber en qué orden


se ejecutarán. El orden no es aleatorio sino que sigue unas reglas de precedencia al igual
que en una operación matemática.
Primero se evalúan los operadores de dentro de los paréntesis.
Cuando dos operadores están al mismo nivel, unos operadores tienen preferencia con
respecto a otros, y estos se calculan primero. En el caso de que tengan la misma
preferencia, se calcularán de izquierda a derecha.
En la siguiente tabla, vemos el orden de precedencia, de mayor a menor, se ejecutan
primero los de mayor orden.
Orden de precedencia
Negación (!) / Incremento (++) / Decremento (--)
Multiplicación (*) / División (/) / Resto (%)
Suma (+) / Resta (-)
Relacionales mayor - menor (>, <, >=, <=)
Igualdad (==) / Desigualdad (!=)
And lógico (&&)
Or lógico (||)
Asignación (=, +=, -=...)
Otros Elementos del lenguaje
( ) : Paréntesis. Sirven, como es de esperar, para agrupar términos y dar preferencias
en las operaciones (al igual que en matemáticas). También se usa, como ya vimos, para
pasar parámetros a funciones o acciones.
" " : Comillas. En ActionScript, todo lo que va entre comillas, pasa a considerarse una
cadena de caracteres. Así por ejemplo, mientras que x representa una variable con un
valor determinado, si escribimos "x", estamos escribiendo en realidad el carácter o la letra
"x". Por tanto, podremos añadirlo a una palabra, compararlo con otras letras, escribirlo por
pantalla etc.. pero ya no será una variable.
//: Comentario de línea. Indica que el texto a partir de ahí, y en esa línea, es un
comentario, y no se ejecutará como código.
/* ....... */: Comentario de bloque. Cualquier texto de una o más líneas encerrado entre
estos caracteres es un comentario, y no se ejecutará como código.
Unidad 16. Introducción a ActionScript 3 (V)


16.4. Los Objetos
Los Objetos, como ya hemos visto en el tema básico, los objetos son instancias de una
determinada clase. Esto es, son representantes de una clase ya definida. Cada objeto
tiene las propiedades y métodos propios de la clase, y normalmente son independientes
unos de otros. Así, son objetos, por ejemplo, un botón, un clip de película, un gráfico o un
sonido... es decir, que prácticamente todo es un objeto en Flash CS4.
Vamos a ver los objetos más usados en Flash y una breve descripción de cada uno de
ellos. Como ya se ha explicado en el tema básico, cada objeto tiene una serie de
Propiedades (que veremos después), unos Métodos y eventos, que dan funcionalidad a
los objetos. Cuando un componente de Flash pasa a ser un objeto, automáticamente pasa
a tener todas las propiedades definidas por Flash para ese objeto y pasa a reaccionar
ante los Métodos y eventos que tiene definidos. Podemos encontrar una lista con todas
las propiedades, métodos y eventos de un objeto en el panel Acciones.
Objeto "Button" (Botón)
Los objetos de tipo Botón es un tipo de MovieClip especialmente pensado para que
el usuario interactúe con él, permitiéndonos diferenciar entre sus estados, y crear
una apariencia para cada uno.
Cuando nos interese que una imagen que hayamos diseñado se comporte como un
botón, bastará convertirla a botón (del modo visto en el capítulo correspondiente) y
ya podremos usar los eventos típicos de un botón.
Objeto "MovieClip" (Clip de Película)
Cuando necesitemos crear una película Flash dentro de otra película, pero no
queramos tener 2 ficheros separados ni molestarnos en cargar una película u otra,
deberemos crear un objeto movieclip. Entre sus propiedades especiales destaca que
los objetos "clip de película" tienen, internamente, una línea de tiempos que corre
independiente de la línea de tiempos de la película principal de Flash, lo que nos
permite crear animaciones tan complejas e independientes como queramos
(podemos crear tantos clips de película dentro de otros como queramos, por
ejemplo). Realmente, toda nuestra película es un MovieClip.
Objeto "DisplayObject" (Objeto de visualización)
Esta clase engloba a todos los objetos que podemos ver en nuestra película, como
los Clips de película y botones, y definde las propiedades y métodos comunes para
todos ellos.
Objeto "Sound" (Sonido) y SoundChanel (Canal de sonido)
Los objetos sonidos no son visuales, y por tanto, no podremos ver como quedan en
los fotogramas, al igual que haríamos con un botón o un clip de película. Deberemos
controlarlos, por tanto, desde el Panel Acciones y usando ActionScript. Tienen
multitud de métodos especiales, muy potentes y útiles, podemos parar un sonido,
crear un bucle, darle efectos sonoros etc... Utilizando el canal de sonido, podremos
aprarlo, ajustar el volumen, etc.
Podríamos, por ejemplo, crear un objeto de tipo sonido y después hacer que al
pulsar un botón suene. (Más adelante se verá algún ejemplo de uso de sonidos).
Objeto "Mouse" (Ratón)


El objeto mouse es uno de los objetos de Flash que ya está definido por Flash, pues
hace referencia al ratón de Windows (al que manejará el usuario que vea nuestra
película). Si lo usamos, podremos acceder a las propiedades del ratón de Windows,
tipo de cursos, efectos asociados, detección de su posición etc...
Vale la pena insistir en que su manejo no es análogo al de otros objetos como el
botón, pues podemos crear tantos botones como queramos y hacer con ellos lo que
decidamos, pero el objeto Mouse es único y actúa sobre el ratón del PC del usuario
que vea nuestra película. Se puede decir que es un objeto "externo" que permite que
otras partes del Sistema Operativo interactúen con nuestra película Flash. Por tanto,
es muy potente.
Objeto "Math" (Matemáticas)
Es uno de los múltiples objetos "abstractos" de Flash, ni es visual, ni parece que
corresponda a nada existente en el sistema (como el objeto "Mouse"). Su función es
muy importante, pues nos permite usar fórmulas matemáticas de modo muy sencillo.
En el tema siguiente veremos algún ejemplo de su uso.
Objeto "String" (Cadena)
Es otro objeto peculiar, pues corresponde a un tipo de datos. Los strings o cadenas
son secuencias de caracteres. Si definimos una secuencia de caracteres como
objeto de tipo String, podremos usar los métodos que Flash implementa sobre ellas:
Seleccionar subcadenas de letras, buscar una determinada letra en una palabra,
convertir la palabra a letras mayúsculas y un largo etc...
Objeto "Loader" (Cargador) y Objeto "URLLoader" (Cargador de información)
Los objetos Loader nos permitirán cargar archivos para mostrarlos (imágenes,
archivos swf, etc...) en nuestra película, mientras que los objetos URLLoader nos
permitirán cargar información de archivos (archivos de texto, XML, páginas web...).


Unidad 16. Introducción a ActionScript 3 (VI)
16.5. Las Acciones - Métodos comunes
Flash CS4 llama acciones a lo referente al código ActionScript, lo que nos permite dar
comportamientos a los objetos.
Estas acciones son funciones predefinidas de ActionScript, es decir: Flash CS4 las
crea, y nosotros sólo tenemos que usarlas de la manera que se nos indica. No tenemos
que definir las funciones ni nada por el estilo, ni siquiera necesitamos saber cómo están
hechas... Lo importante es que están listas para usar, lo que facilita el uso de este
lenguaje de programación y sobre todo, haga muy rápido comenzar a programar.
Por supuesto, cuando tengamos más conimientos, veremos que no es dificil completar
estas acciones ya creadas con las nuestras propias.


Explicaremos las Acciones más importantes, y a medida que avancemos en el curso,
añadiremos algunas más. Para una referencia más completa, recomendamos mirar la
ayuda del programa.
Las acciones son métodos de los objetos (funciones internas a estos), por lo que no
todas están disponibles para todos los objetos.
Definiremos las acciones escribiendo su cabecera (nombre + parámetros con un
nombre genérico) para después explicar qué es cada parámetro.
Acciones - Control de Película
Estas acciones se emplean, como su nombre indica, para controlar el flujo de nuestra
película, esto es, para indicar a Flash en todo momento qué fotograma tiene que mostrar,
cuándo tiene que parar, dónde seguir etc...
Estas acciones son métodos de la clase MovieClip. Podemos aplicarlas a cualquier
MovieClip de nuestra película, siguiendo el siguiente formato:
nombreMovieClip.accion();. Si escribimos la función directamente, es decir, si no
indicamos el objeto, estamos haciendo referencia a la película general.
Veamos las más importantes para entenderlas mejor:
gotoAndPlay: Esta acción será, probablemente la que más usemos durante la
realización de nuestras películas. La acción que realiza consiste en mover la cabeza
lectora al fotograma que le indiquemos. La cabeza lectora es lo que determina qué
fotograma de nuestra película se está reproduciendo en cada momento. Si, por ejemplo,
lo movemos del fotograma 1 al 25, lo que veremos instantáneamente será el fotograma
25 y la película continuará reproduciéndose a partir de ahí.
Sintaxis:
gotoAndPlay(escena, fotograma):
o escena: Nombre de la escena a la que queremos enviar la cabeza lectora.
Debe ir entre comillas dobles.
o fotograma: Número o nombre del fotograma al que queremos enviar la
cabeza lectora. Si es un nombre (una etiqueta), debe ir entre comillas
dobles, si es un número, no.
Ejemplo:
miClip.gotoAndPlay("Escena2", 7); → Esta acción lleva la cabeza lectora al
fotograma 7 de la escena llamada "Escena2" del MovieClip con el nombre de
instancia miClip.
play: Da comienzo a la reproducción de la película o la continúa desde el punto detenido.
Sintaxis:
play();
No tiene Parámetros.
Ejemplo:
this.play(); → Inicia la reproducción del objeto actual.


stop: Detiene la reproducción de la película. Se puede usar en un fotograma, cuando
queramos detenernos en él (porque es un menú, por ejemplo), en un botón, (para que
detenga la película), etc..
Sintaxis:
stop();
No tiene Parámetros.
Unidad 16. Introducción a ActionScript 3 (VII)
Acciones - Navegador / Red
Estas acciones tiene diversas funciones, describimos las más importantes:
fscommand: Esta acción, es capaz de ejecutar ciertos comandos muy potentes. Lo más
cómodo es pasar a Asistente de Script (sino estábamos ya) e insertarla, nos aparecerá
una pestaña con los posibles comandos que admite. Sirve para interactuar con la
aplicación que reproduce la película, por ejemplo Flash Player o el navegador web, como
IE o Firefox. Veamos esos comandos:
fullscreen (true o false): Si se activa pone nuestra película a pantalla
completa. Muy útil para presentaciones en CD-Rom, por ejemplo.
allowscale (true o false): Controla el redimensionamiento de los objetos
insertados en la película cuando el usuario estira los bordes de la misma (o de
la página web en la que se encuentre) ¿Queremos mantener las
proporciones? Este comando nos permite controlarlo.
showmenu (true o false): Si has visto el menú que aparece al pulsar el botón
derecho del ratón sobre una película Flash, seguro que has pensado en
hacerlo desaparecer ... puede que no interese que los usuarios puedan
moverse a sus anchas por nuestra película. Ejecutando esta sentencia del
modo adecuado (false), podremos ocultarlo.
trepallkeys (true o false): Sirve para detectar las pulsaciones de todas las
teclas durante la reproducción de nuestras películas.
exec (ruta de la aplicación): Ejecuta una aplicación desde el reproductor.
quit (ninguno): Cierra el reproductor Flash.
Todas estas alternativas, comparten modo de uso, veámoslo:
Sintaxis:
fscommand(comando, [argumentos])
comando: El comando a ejecutar (fullscreen, allowscale, etc...)
argumentos: En la mayoría de los casos debemos escribir true o false,
según queramos desactivar la opción o activarla. Por ejemplo, en el caso
del comando quit lo dejaremos vacío.
Ejemplo:
fscommand("fullscreen", "true"); -> Activa la pantalla completa.
navigateToURL() : Esta acción se emplea para abrir el navegador web e ir a la página
indicada.
Sintaxis:
navigateToURL(url , [ventana]);


url: Dirección web a la que queremos acceder (se abrirá una ventana).
Este parámetro es un objeto del tipo URLRequest. Si queremos utilizar
una dirección como cadena de texto, podemos hacerlo escribiendo new
URLRequest("http://www.direccion.coms").
ventana: Parámetro OPCIONAL. Modo en el que queremos abrir la
ventana (en la ventana actual (_self) en otra nueva (_blank) etc...).
Ejemplo:
navigateToURL(new
URLRequest("http://www.escueladeingenieros.com"), "_blank"); -->
Abre la web de escueladeingenieros en una ventana nueva.
load(): Este método nos permite cargar nuevas películas Flash o imágenes en nuestra
película de forma dinámica (la película se cargará cuando se lo indiquemos, y no antes),
en un objeto de la clase Loader, o cargar información en un objeto URLLoader. Para
utilizarlo, primero tenemos que crear un objeto de este tipo.
Sintaxis:
objetoCargador.load(direccion:URLRequest, [contexto]);
direccion: Dirección absoluta o relativa donde está situada la película
SWF o la imagen a cargar. Es un objeto URLRequest, como en el caso
de navigateToURL().
contexto: Es un parámetro opcional, en el que se indica algunas
propiedades más avanzadas que no veremos en este curso.
Ejemplo:
var cargadorPeli:Loader = new Loader(); -> Creamos un objeto Loader donde
cargar el archivo.
cargadorPeli:Loader.load(new URLRequest("archivo.swf"));-> LLamamos
al método load() para que cargue el archivo indicado.
Nota: Cargamos el archivo en nuestra película, pero no lo mostramos. Para verlo,
tenemos que añadir el cargador a la lista de visualización, como ya veremos, por ejemplo
con addChild(cargadorPeli);.
Acciones - Condiciones
Estas acciones sirven para controlar la lógica de la película. Se puede decir que nos
permiten "hablar" con Flash para indicarle lo que debe hacer ante distintas situaciones.
Por ejemplo, ahora que conocemos algunas Acciones, ¿Cómo indicarle a Flash que "si la
variable x = 3, entonces vaya al fotograma 5, y si no, vaya al fotograma 10"?. Sabemos
comparar, sabemos ir a los fotogramas, pero no sabemos decirle a Flash "Si pasa esto,
haz una cosa, y sino, haz la otra...". Veamos cómo decírselo:
if ... else: Si partimos de que la traducción literal de if es "si..." y la de else es "si no ...",
nos encontramos de repente con todas las herramientas para decirle a Flash: "si (pasa
una condición) {haz esto} si no {haz lo otro}"
Veamos antes que nada su sintaxis para comprenderlo mejor:
Sintaxis:
if (condición) {sentencia_si_se_cumple; } else
{sentencias_si_no; }
if: Indica que acción que viene a continuación entre paréntesis es una condición.


condicion: Indica una condición que debe cumplirse, es decir, debe tener como
resultado true, o lo que es lo mismo, verdadero, o lo que es lo mismo, 1. De ahí la
importancia de los operadores de comparación y el valor que devuelven. La
condición siempre debe de ir entre paréntesis.
sentencia_si_se_cumple;: Conjunto de acciones que sucederán si la condición se
evalúa como verdadera. Estas sentencias deben de ir entre llaves. Podemos poner
el bloque de código que queramos: varias líenas, objetos, otros if...
else: Especifica la alternativa si condición se evalúa a falsa. Es optativo. Si no
existe, y no se cumple la condición, no se hará nada, pues no lo hemos
especificado.
sentencias_si_no; Conjunto de acciones que sucederán si la condición se evalúa
como falsa. Deben incluirse entre llaves.
Ejemplo:
if (x == 2) {miClip.gotoAndPlay(6); } --> Si la variable x vale 2, entonces saltamos al
fotograma 6 de miClip, si no, no hacemos nada.
if (y > 7) { stop(); } else {gotoAndPlay(1); } --> si la variable y es mayor que 7, paramos
la película, sino, volvemos al fotograma 1.

Aunque if es la más utilizada, existen otras estructuras de control, como bucles, que
podemos emplear en nuestro código. Puedes verlas en este avanzado:



Unidad 16. Avanzado: Estructuras de control (I)
Sentencia IF [ELSE]
La sentencia If evalúa una condición, expresada entre paréntesis ( ). Si esta se
cumple, ejecuta el bloque de instrucciones que tiene entre llaves { }.
if (condición) {
bloque de instrucciones;
}


También podemos indicar un bloque de instrucciones, con la palabra else, que se
ejecutará si no se cumple la instrucción.
if (condición) {
bloque de instrucciones si se cumple;
} else {
bloque de instrucciones si nos e cumple;
}
Podemos poner varios else, con otras condiciones entre paréntesis. Se irán evaluando
todas las condiciones hasta encontrar la primera cierta. Si una se cumple, se ejecutarán
sólo esas instrucciones, aunque hubiesen otras condiciones ciertas. Si no se ha cumplido
ninguna, se ejecutará el último else, si no tiene condición.
if (condición1) {
bloque de instrucciones si se cumple condición1;
} else if (condición2) {
bloque de instrucciones si se cumple condición2;
} else if (condición3) {
bloque de instrucciones si se cumple condición3;
} else {
bloque de instrucciones si no se ha cumplido ninguna;

}
Por ejemplo:
if (nota >= 0 && nota < 5) {
return 'Suspenso';
} else if (nota >= 5 && nota < 6) {
return 'Suficiente';
} else if (nota >= 6 && nota < 7) {
return 'Bien';


} else if (nota >= 7 && nota < 9) {
return 'Notable';
} else if (nota >= 9 && nota <= 10) {
return 'Sobresaliente';
} else {
return 'La nota no es válida. Tiene que estar entre 0 y 10';

}
Las sentencias If se pueden anidar, siempre que una quede completamente dentro de
otra. Por ejemplo:
if (condición1) {
if (condición2) {
si se cumple condición 1 y condición2;
} else {
si se cumple condición 1 pero no condición2;
}
} else {
si no se cumple condición1
}
Cuando se emplea la sentencia If para asignar un valor a una variable, se suele utilizar
la siguiente estructura, más compacta:
variable = (condición) ? valor_si_se_cumple : valor_si_no;
Por ejemplo:
calificacion = (nota < 5) ? 'Suspenso' : 'Aprobado';
La sentencia SWITCH


De forma parecida al If se comporta la sentencia Switch. Se indica entre paréntesis una
variable o expresión, y se compara su valor con cada valor de case. Se ejecutará el
código de la primera coincidencia encontrada. Si no encuentra ninguna, se ejecuta el
código de default.
switch(expresion) {
case valor1:
instrucciones si coincide;
break;
case valor2:
instrucciones si coincide;
break;
default:
instrucciones si no coincide ninguna;
}
Por ejemplo:
function paginaFlores(categoria){
switch(categoria) {
case "silvestres":
return "silvestres.html";
break;
case "ornamentales":
return "ornamentales.html";
break;
case "exóticas":
return "exoticas.html";
break;
case "plantas":
return "palntas.html";
break;;


default:
alert('No existe esa categoría');
return "index.html";
}

}
A la función anterior, se le pasa como parámetro el nombre de una categoría, y busca
en el Switch una coincidencia con el parámetro para devolver la página de la categoría. Si
no encunetra ninguna coincidencia, muestra un mensaje y devuelve la página de inicio.
Unidad 16. Avanzado: Estructuras de control (II)
El bucle WHILE
Los bucles son estructuras fundamentales en programación, ya que permiten repetir
una instrucción un número determinado de veces, o hasta que se cumpla una
determinada condición (o deje de cumplirse).
En bucle While, evalúa una condición. Si se cumple, ejecuta su bloque de instrucciones,
y vuelve a evaluar la condición. Si se cumple, vuelve a ejecutar las instrucciones, y así
sucesivamente mientras que la condición se cumpla.
while (condición) {

bloque de sentencias;
}
Por ejemplo, el siguiente bucle mostraría 5 mensajes. La variable i inicialmente vale 0.
En cada vuelta del bucle, se comprueba si es menor de 5. Si lo es, se incrementa en 1 en
la primera instrucción (recuerda que i++ equivale a i+=1, que equivale a i=i+1), se
muestra el mensaje en la segunda, y vuelve a comenzar el ciclo. Cuando i sea 5, mostrará
el quinto mensaje, y en la siguiente comprobación, la condición será falsa.
var i:Number = 1;
while (i <= 5) {




trace('Mensaje número ' + i);
i++;
}
El bucle While se puede expresar al revés, para que primero ejecute las instruciones, y
después evalúe la condición. Esto asegura que por lo menos se ejecuten las instrucciones
una vez, y se repitan mientras se cumpla la condición. Su sintaxis es:
do {
bloque de sentencias;
} while (condición)
El bucle FOR
El bucle FOR se emplea normalmente cuando necesitamos un contador que vaya
tomando valores siguiendo una progresión, por ejemplo para realizar una repetición un
número determinado de veces.
Se define con un valor inicial para la variable que actúa como contador, la condición
que se ha de cumplir para que el bucle se repita, y la actualización de la variable
(normalmente un incremento). Estos tres parámetros, se separan por punto y coma (;).
for (valor_inicial; condición; actualización) {
bloque de sentencias;
}
El orden de ejecución sería: asignar el valor inicial, evaluar la condición, si se cumple,
ejecutar las sentencias, actualizar la variable, evaluar la condción, si se cumple ejecutar
las sentencias, actualizar la variable, etc...
El mismo ejemplo que hemos utilizado con el bucle While para mostrar 5 mensajes, lo
podemos expresar con un For como:
for (i=1; i<=5; i++) {


alert('Mensaje número ' + i);
}
Una variante del For es la estructura For .. In, que nos permite recorrer los elementos
de un array o de un objeto.
for (variable in objeto) {
bloque de sentencias;
}
Si lo utilizamos con un array, lo que hará el bucle, es que para cada vuelta, variable
tomará el valor de un elemento del array, comenzando por el primero, y se repetirá una
vez para cada uno.
Unidad 16. Introducción a ActionScript 3 (VIII)
16.6. Propiedades de los objetos de visualización

Los Métodos y Propiedades suelen ser específicos de cada objeto, y su estudio
requeriría un nuevo curso completo, (recomendamos consultar la ayuda incorporada en el
Flash CS4 cuando surjan dudas), pero hay bastantes propiedades de los objetos que son
comunes a muchos de ellos. Vamos a ver las más utilizadas, que afectan a los objetos de
visualización, que son con los que trabajaremos habitualmente.
Hay que entender que las clases se heredan. Es decir, una clase genérica, tiene
subclases más concretas. Las sublaceses, tienen todos los métodos y propiedades de la
clase de la que heredan, y además agregan sus propios métodos y funciones.
Los objetos que se visualizan en Flash, pertenecen a la clase DisplayObject. A su vez,
los clips de película pertenecen a la clase MovieClip, que es una subclase de la anterior.
Por tanto, todos los MovieClip tendrán los métodos y propiedades de DisplayObject, pero
no al revés.
Para usar las propiedades, se debe colocar el nombre de la instancia del objeto seguido
de un punto (.) y después la propiedad y su valor (objeto.propiedad = valor). Algunas
propiedades se pueden escribir sin el nombre del objeto al que hacen referencia
delante, en ese caso, harán referencia a la película principal, que también es un
MovieClip, aunque en este caso es recomendable utilizar la palabra reservada this.


Propiedades de DisplayObject, comunes a todos los objetos que se visualizan.
alpha
Hace referencia a la opacidad del objeto al que afecte. La opacidad se puede definir
como la no-transparencia. De modo que un 100% de transparencia equivale a un 0
de opacidad, o a un 0 de alpha.
height
Devuelve o establece la altura del objeto en píxeles. Por ejemplo, si tenemos un clip
de película llamado "Clip1" y escribimos "Clip1.height" obtendremos la altura de
Clip1. Del mismo modo, podemos cambiarla sin más que hacer: Clip1.height = 100;
(la altura del Clip1 pasaría a ser de 100 píxeles)
width
Propiedad idéntica a la anterior, pero devuelve o establece la anchura.
visible
Determina si el objeto está o no visible en nuestra película. Cuando vale 1 o True, lo
está, cuando vale 0 o False, pasa a ser invisible. Es muy útil para hacer desaparecer
partes de una película en un momento determinado. Por ejemplo, si queremos que
al pulsar un botón desaparezca el clip de película llamado "Clip2", haremos esto: ....
... Clip2.visible = 0; ... ....
x
Con esta propiedad obtenemos o establecemos las coordenadas del objeto respecto
del eje de las X (horizontal). Sirve para averiguar la posición o para asignarla de
forma dinámica (durante la ejecución de nuestra película Flash)
y
Con esta propiedad obtenemos las coordenadas del objeto respecto del eje de las Y
(vertical). Sirve para averiguar la posición o para asignarla de forma dinámica
(durante la ejecución de nuestra película Flash).
rotation
Con esta propiedad obtenemos o establecemos el giro del objeto, su rotación,
expresado en grados.
name
Con esta propiedad obtenemos o establecemos el nombre de la instancia.

Unidad 16. Introducción a ActionScript 3 (IX)
Propiedades de MovieClip.
framesloaded
Sólo lectura. Son los fotogramas de un clip de película o de la película principal que
el sistema lleva cargados en memoria. (Si se usa sin nombre de objeto delante
obtenemos los fotogramas cargados de la película principal). Muy útil para crear
cargadores o "preloaders".
totalframes


Sólo lectura. Devuelve la cantidad de fotogramas que contiene el clip de película al
que hace referencia. Si se emplea sin ningún nombre delante, nos devuelve la
cantidad de fotogramas de la película Flash actual. También usado en la creación de
cargadores (en el tema siguiente veremos cómoutilizar estas propiedades).
currentFrame
Sólo lectura. Indica el número de frame en el que se encuentra la cabeza de
reproducción del MovieClip.

Veremos un ejemplo para utilizar ActionScript y referirnos a las propiedades de los
símbolos de nuestras películas. Creamos dos rectángulos, y los convertimos a símbolos,
uno como botón y otro como clip de película. Lo primero que debemos hacer es darles un
nombre de instancia (al cual nos referiremos cuando escribamos el código). Para ello, y
con el símbolo seleccionado abrimos el panel Propiedades.

Remplazamos el texto <nombre de instancia> por el nombre. Por ejemplo
boton_reducir para el botón y rectángulo para el clip. Los objetos estarán listos para ser
tratados.
Vamos al panel de acciones, y escribimos el siguiente código, para que al pulsar el
botón, el clip del rectángulo reduzca su tamaño a la mitad.
boton_reducir.addEventListener(MouseEvent.CLICK,
encogerRectangulo);


function encogerRectangulo(event):void {
rectangulo.height = rectangulo.height/2;
rectangulo.width = rectangulo.width/2;


}
Como veremos más adelante, indicamos al botón que cuando hagan clic, llame a la
función encogerRectangulo. Esta función, lee el valor de las propiedades alto y ancho del
clip, las divide entre dos, y se las vuelve a asignar. Con esto, reduce el tamaño a la mitad.










Prueba evaluativa unidad 16: Introducción a ActionScript 3
Sólo una respuesta es válida por pregunta. Haz clic en la respuesta que consideres
correcta.
Contesta todas las preguntas y haz clic en el botón Corregir para ver la solución.
Si pulsas Restablecer podrás repetir la evaluación.
1. Para poder comenzar a programar con ActionScript, es necesario conocerlo en
profundidad.
a) Verdadero
b) Falso
2. Todo el código relacionado con la inserción de código ActionScript se lleva a cabo
desde el Panel Acciones.
a) Verdadero


b) Falso
3. Dado que Flash CS4 ha eliminado el Modo Asistente de Script, ahora sólo se puede
programar a mano, sin la ayuda de las funciones que Flash ofrecía en su versión
anterior.
a) Verdadero
b) Falso
4. Flash pone a nuestra disposición una enorme cantidad de Acciones, propiedades y
métodos predefinidos, que convierten la programación con ActionScript en un trabajo
rápido y cómodo.
a) Verdadero
b) Falso
5. ¿Cuál de estas Acciones NO tendría ningún efecto nunca?.
a) miClip.gotoAndPlay(15);
b) miClip.goto(15);
c) miClip.play();
d) miClip.gotoAndPlay("Fotograma15");
6. Suponiendo que tenemos 15 fotogramas con contenidos distintos y sólo contiene
código ActionScript el fotograma 1 ¿Qué sucederá si el código existente en el fotograma
1 es éste?.
gotoAndPlay(15);
goto("ae"2313"asd");
Nota: Sabemos que el código de la segunda línea es ERRÓNEO y que Flash va a detectar
ese error.
a) Que la película irá del fotograma 1 al 15 directamente (tal y como indica la acción
"gotoAndPlay(15)" ignorando la segunda línea del código, pues contiene un error.
b) Que la película se detendrá en el fotograma 1, pues al encontrar un error en
dicho fotograma no dejará que continúe la película.
c) Que la película ignorará todo el código existente en el fotograma 1 (por haber un
error en él) y pasará del fotograma 1 al 2, luego al 3 y así sucesivamente ...
7. El operador más-igual (+=) es un operador...
a) Aritmético.
b) De asignación.
c) Este operador no existe.
8. La versión 3 de ActionScript es una novedad de la versión CS4.


a) Falso
b) Veradero
9. El símbolo = es un operador de comparación que comprueba la igualdad.
a) Verdadero
b) Falso
10. En la acción if la condición se tiene que escribir entre paréntesis.
a) Siempre
b) Nunca
c) Como se quiera, a no ser que tengamos varias condiciones y queramos cambiar
el orden de evaluación de las mismas.



















Unidad 17. Ejemplos de ActionScript 3.0 (I)
17.1. Ejemplos de uso del código ActionScript
Vamos a mostrar los usos más característicos de código ActionScript en los diferentes
objetos existentes en Flash CS4. De este modo lo comprenderemos mejor y porqué no,
nos ahorraremos trabajo al tener ya hechos aquí muchos de los códigos que usaremos en
nuestras películas. Mostraremos el código y a continuación, una explicación del mismo.
Algunas cosas que debemos de tener en cuenta si estamos familiarizados con la
programación en ActionScript 2, es que con ActionScript 3.0 no podemos utilizar:
1. alert()
2. La forma de tratar eventos, como on (event){}, onClipEvent(event){}, object.onEvent
= function(){} , addListener , etc. La forma de tratarlos ahora es agregando un
escuchador al objeto, con el método addEventListener, indicando el evento, y una
única función de escucha.


3. Guiones bajos ( _ ) antes del nombre de las propiedades.
4. Variables globales (_global).
5. _root y _parent para acceder a elementos superiores.
17.2. Código ActionScript para Botones
Los Botones (objeto Button para Flash CS4) tienen mucha utilidad siempre que
queramos que nuestra película interactúe con el usuario. Dado que esto va a ser
prácticamente siempre, es conveniente estudiar y entender bien algunos códigos típicos
que tendremos que usar para conseguir nuestros propósitos.
Para tener el código organizado, es mejor crear una nueva capa e insertarlo ahí.
Veamos algunos de ellos:
import flash.events.MouseEvent;

miBoton.addEventListener(MouseEvent.MOUSE_CLICK,
funcionAlHacerClick);

function funcionAlHacerClick(event:MouseEvent):void
{
this.gotoAndPlay(15);
}
Esta acción provoca que al hacer clic en el botón vayamos directamente al Fotograma
número 15 de la película.
Utiliza la sentencia import para especificar el nombre completo de la clase, de modo
que el compilador de ActionScript sepa dónde encontrarlo. En este momento queremos
importar la clase MouseEvent, le especificamos la clase de flash que debe importar:
import flash.events.MouseEvent;
La segunda línea indicamos qué tiene que suceder (el evento) para que se realice la
función que indicamos "funcionAlHacerClick".
En la tercera línea ya indicamos nuestra función y dentro escribimos lo que queremos
que pase al hacer clic en el botón.
import flash.events.*;


import flash.net.*;
miBoton.addEventListener(MouseEvent.MOUSE_UP, miFuncion);
var miURL:URLRequest = new
URLRequest("http://www.escueladeingenieros.com");
function miFuncion(event:MouseEvent):void
{
navigateToURL(miURL, "_blank");
}
Esta acción provoca que al pulsar un botón se abra una nueva página web en nuestro
navegador por defecto y nos muestre la página www.escueladeingenieros.com
La primera línea, la segunda y la tercera tienen la misma función que en el caso anterior
La cuarta línea creamos una variable nueva para pasarle la web a la cual queremos que
nos lleve al pulsar el botón.
import flash.events.*;
miBoton.addEventListener(MouseEvent.MOUSE_UP, miFuncion);
function miFuncion(event:MouseEvent):void
{
r1.width=350;
}
Esta acción provoca que al pulsar un botón se modifiquen las propiedades del objeto
cuyo nombre de instancia aparece delante de la propiedad.
La primera línea y la segunda tienen la misma función que en el caso anterior
En la tercera línea definimos la función y podemos ver la propiedad .width (anchura),
vemos que hay un operador de asignación ( = ), luego deducimos que vamos a asignar
una anchura determinada a un objeto. ¿Qué anchura? Pues 350, que es la cantidad que
aparece en la parte derecha de la expresión. ¿Y a qué objeto? Al que va delante del ".", o
lo que es lo mismo, al afectado por la propiedad.
Por tanto, al pulsar el botón vamos a modificar la anchura del objeto r1, que pasará a
ser de 350 px.


Unidad 17. Ejemplos de ActionScript 3.0 (II)
17.3. Código ActionScript para Clips de película
Los Clips de Película (objeto MovieClip) son películas dentro de películas. Pueden tener
código AS dentro de sí mismos, aunque suele ser más común que algún otro código
externo (situado en fotogramas) les haga referencia. Para que el código que contengan
los clips de película sea válido, éstos deben tener algún evento de clip asociado (Load,
KeyDown etc) que determine cuándo se ejecutará este código (al cargarse el clip, al
pulsar alguna tecla ...)
import flash.events.*;
miBoton.addEventListener(MouseEvent.MOUSE_UP, miFuncion);
function miFuncion(event:MouseEvent):void
{
r1.gotoAndPlay(2);
}
Esta acción provoca que al pulsar un botón vayamos al fotograma 2 de un Clip de
Película determinado. El fotograma de la película principal no variará.
Las primeras líneas son las comentadas anteriormente.
Partimos de una película con 2 fotogramas distintos.
En el primer fotograma están el botón y el clip de película (r1) correspondientes. El clip
de película tiene en su línea de tiempos una animación, inicialmente detenida. Veamos
que pasa si se accede a su fotograma 2.
En el segundo fotograma no nos importa lo que haya porque la acción situada a la
izquierda no nos llevará hasta allí. La cabeza lectora de la película principal es
independiente.
17.4. Sonidos con ActionScript 3
Aunque la idea de objeto no suele llevarnos a pensar en un sonido, en Flash CS4 los
sonidos también son objetos y podemos manejarlos usando adecuadamente ActionScript.
Veamos unos cuantos códigos muy comunes y un completo ejemplo de cómo usarlos:
//Código 1



var req:URLRequest = new URLRequest("sonido.mp3");
var musica:Sound = new Sound(req);
var canal:SoundChannel = new SoundChannel();
sonido.mp3 es el nombre del archivo de sonido que se va a cargar, seria aquí donde
deberíamos sustituir éste y poner el nombre del sonido que queramos nosotros, y deberá
encontrarse en el mismo directorio que se encuentre el archivo Flash que estamos
creando, o indicar la ruta completa.
En musica, que es un objeto Sound, almacenamos el sonido. Para controlarlo,
utilizaremos canal, un objeto SoundChanel.
// Código 2

canal.stop();
Este código detiene el sonido que se esté reproduciendo por el canal de sonido canal.
// Código 3

canal.stop();
canal = musica.play(0,99);
La primera línea detiene el sonido, como hemos visto antes.
La segunda, provoca que el sonido música comience a reproducirse (play) a partir de
su posición inicial (el 0 indica los segundos transcurridos desde el comienzo) y lo haga 99
veces (esto se llama loop o bucle). Si ponemos sólo musica.play();, se reproducirá
desde el principio y sólo una vez, como vemos en el siguiente código:
// Código 4

canal.stop();
canal = musica.play();


Ahora que ya sabemos controlar los sonidos mediante ActionScript, veamos un ejemplo
que reune todo lo visto anteriormente.
En este ejemplo:
- Tenemos un único fotograma con 3 botones. En este fotograma
tenemos insertado el Código 1.
- Los 3 botones tienen distintas funcionalidades:
- En el botón rojo, está insertado el Código 2
- En el botón azul, está insertado el Código 3
- En el botón verde, está insertado el Código 4

Unidad 17. Ejemplos de ActionScript 3.0 (III)
17.5. El objeto MATH

Como ya sabemos, los objetos no visibles también se controlan con ActionScript.
Vamos a ver algunos ejemplos del funcionamiento del objeto Math y como sacarle partido.
x = Math.random();
El método random del objeto Math genera un número aleatorio entre 0 y 1. En este
caso, el resultado lo almacenamos en la variable x, para poder usarlo después...
Las utilidades de este método son muchas, generar claves secretas, passwords,
números de lotería etc...

x = Math.round(4.3);
El Método "round" REDONDEA el parámetro introducido eliminando la parte decimal del
mismo. Aunque nuestra configuración utilice la coma para separar los decimales, en Flash
debemos utilizar el punto.
En el ejemplo, x pasaría a valer 4.



x = Math.max(5 , 2);
El Método "max" obtiene el valor máximo entre 2 números.
En el ejemplo, x pasaría a valer 5.

El objeto Math es muy útil y nos ahorra mucho trabajo, pues hay multitud de
operaciones que responden a alguno de sus métodos y que no tenemos porqué
implementar. Basta buscarlos en el manual y usarlos.
17.6. Creación de un cargador o preloader

Vamos a analizar el código de un cargador o preloader para acabar de afianzar
nuestros conocimientos de ActionScript:
Los cargadores o preloaders sólo son necesarios cuando las películas adquieren un
tamaño considerable y resulta inviable visionar la película sin tenerla toda cargada (porque
se atasca, aparecen partes incompletas etc...). Vamos a suponer pues, que tenemos una
película con 150 fotogramas. Los 3 primeros los reservaremos para crear nuestro
cargador. En el Fotograma 4 comienza la película.
Nota: Junto a cada línea hemos insertado comentarios (texto entre los símbolos /* y */)
que son líneas que Flash reconoce como tales y que no tiene en cuenta a la hora de
ejecutar el código (es como si no existieran). Se usan para clarificar y explicar el código
que escribamos y para eso lo usaremos a continuación. Les cambiaremos el color para
aclarar que es un comentario. Evidentemente no son necesarios en el código que
finalmente insertemos en nuestra película.
Este es el código que insertaremos:
/* FOTOGRAMA 1 */
var bytes_totales:Number; /*Estas son las variable que
iremos utilizando*/
var bytes_cargados:Number;
var porcentaje:Number;

bytes_totales = this.getBytesTotal(); /* Hallamos el tamaño
de nuestra película


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

//---------------------------------------------------------------
--------------
/* FOTOGRAMA 2 */
bytes_cargados = this.getBytesLoaded(); /* Hallamos los bytes
que llevamos cargados en memoria
hasta el momento.
Este valor lo asignamos a la
variable
bytes_cargados */
if (bytes_cargados >= bytes_totales) { /* Esta es la lógica
del cargador. Si llevamos cargados en memoria
los mismos bytes o
más de los que ocupa la película, ejecutamos
la siguiente línea
*/
this.gotoAndPlay(4); /* Si hemos llegado hasta
aquí es porque toda la película está
cargada en memoria
(bytes_cargados >= bytes_totales) y podemos
comenzar a ver la
película. Ejecutamos gotoAndPlay(4) que nos
llevará hasta al
fotograma donde comienza la película. */
} else { /* Si aun no hemos
cargado toda la película */
porcentaje = ((bytes_cargados/bytes_totales)*100);/*
Averiguamos el porcentaje que llevamos cargado

realizando la división entre los bytes_cargados
y los
bytes_totales y multiplicándolo por 100 */
txt_salida.text = Math.floor(porcentaje)+"%"; /*
Mostramos en el texto "txt_salida" el porcentaje
que
llevamos junto al símbolo "%",que nos mostrará el


porcentaje
de película que llevamos cargado en cada instante*/
}

//---------------------------------------------------------------
--------------
/* FOTOGRAMA 3 */
this.gotoAndPlay(2); /* Si llegamos al fotograma 3 es porque no
está cargada toda la película, de lo contrario
estaríamos ya en el fotograma 4. Como aún no está
cargada, volvemos al fotograma anterior
para ver si ya lo está (mediante
gotoAndPlay(2);). Esto lo haremos tantas veces como haga
falta para dar tiempo al ordenador del usuario a
ir cargando en memoria la película. */
Resumiendo:
Fotograma 1: En el Fotograma 1 se calculan los bytes totales que ocupa la película.
Después pasamos al Fotograma 2.
Fotograma 2: Cada vez que accedamos al Fotograma 2, nuestro código ActionScript
averigua los bytes que llevamos cargados en memoria y los compara con los totales (que
se hallaron en el Fotograma 1 y no vuelven a averiguarse, pues no varían). Si ya está toda
la película cargada, vamos al fotograma 4 y comenzamos a reproducir la película, sino,
pasamos al fotograma 3
Fotograma 3: El Fotograma 3 volverá a mandar la cabeza lectora al fotograma 2.
Haciendo este ciclo, damos tiempo al ordenador a ir cargando poco a poco la película,
hasta que llegue un momento que esté toda cargada y pasemos al Fotograma 4. El
cálculo del porcentaje es un "adorno" que nos permitimos, pues con un poco más de
esfuerzo averiguamos cuánta película llevamos cargada y la mostramos por pantalla de
un modo elegante (en porcentaje) haciendo la espera del usuario menos aburrida.
Fotograma 4: Aquí comienza la película... (Ya no se volverá nunca a ninguno de los
fotogramas anteriores).
Abajo mostramos el resultado. La película se comenzará a cargar al pulsar el botón. El
código insertado es el que se muestra arriba, no hay NADA MÁS. Tan sólo se han


añadido unos textos y unas imágenes para aumentar el tamaño de la película, de lo
contrario la carga sería demasiado rápida y no llegaría a verse.
También se ha insertado el texto dinámico que muestra el porcentaje.
Si el cargador no llega a verse, lo más probable sea que ya esté cargada en la memoria
caché del ordenador o que estéis viendo este curso desde el DVD o desde vuestro propio
Disco Duro, donde la velocidad de descarga es tan rápida que sería necesaria una
película de varios MBytes para que hiciera falta un cargador. Podemos encontrar otro
ejemplo de cargador en los videotutoriales del curso.
Probad el código en una película que coloquéis en un servidor web y podréis ver los
resultados sin problemas.
Para poner a prueba lo aprendido, recomendamos realizar la:








Prueba evaluativa unidad 17: Ejemplos de ActionScript 3.0
Sólo una respuesta es válida por pregunta. Haz clic en la respuesta que consideres
correcta.
Contesta todas las preguntas y haz clic en el botón Corregir para ver la solución.
Si pulsas Restablecer podrás repetir la evaluación.
1. A pesar de la potencia de los clips de película, es común que el código ActionScript
que les afecte sean llamadas o modificaciones de sus propiedades realizadas desde
otros objetos o desde la propia película principal.
a) Verdadero.
b) Falso.
2. ¿Qué indica esta instrucción miBoton.addEventListener(MouseEvent.MOUSE_CLICK,
miFuncion);?
a) Indica lo que se ejecutará cuando el usuario haga clic en la película.
b) Indica que cuando se haga clic en miBoton se ejecute la función miFuncion.


c) Indica qué hará la función miFuncion.
3. Si asociamos la siguiente función al clic del ratón en un botón:
function miFuncion () {
r1.gotoAndPlay(2);
}
Al pulsarlo, iremos al fotograma 5 de la película principal.
a) Verdadero.
b) Falso.
4. Es una buena costumbre buscar por Internet código ActionScript hecho por otros
expertos en Flash, estudiarlo, aprender de él y adaptarlo a nuestras necesidades si esto
es posible.
a) Verdadero
b) Falso
5. El método round del objeto Math nos genera un número redondeado y aleatorio entre
0 y 46550.
a) Verdadero.
b) Falso.
6. ¿Cuál de las siguientes sentencias nos devolvería el porcentaje de Bytes cargados
hasta el momento en una película Flash?
a) porcentaje = getBytesTotal();
b) porcentaje = ((bytes_cargados / bytes_totales)*100);
c) porcentaje = ((getBytesLoaded() / getBytesTotal())*100);
d) porcentaje = getBytesLoaded() / 100;
7. Si definimos un objeto de sonido llamado miSonido y luego escribimos el método
miSonido.play(0,3);.
a) El sonido se reproducirá durante 3 segundos.
b) El sonido se reproducirá durante 3 fotogramas.
c) El sonido se reproducirá tres veces.
d) El sonido no se reproducirá al haber escrito un 0.
8. ¿Cuál de estas afirmaciones es correcta?
a) height se refiere a la anchura del objeto.
b) _width se refiere a la anchura del objeto .
c) height se refiere a la altura del objeto .


d) Todas las anteriores son falsas.
9. función bytesTotales() nos devuelve los bytes totales que ocupa una película.
a) Verdadero .
b) Falso.
10. La función max(5,2) nos devuelve el valor máximo entre 5 y 2, esto es, el número 5.
a) Verdadero .
b) Falso.


















Unidad 18. Navegación - ActionScript (I)
En este tema veremos los puntos más importantes en los que te podrás apoyar para
realizar tus animaciones en Flash usando ActionScript.
Esta unidad, la de Navegación, está especialmente orientada a la web, pues veremos
cómo crear elementos que te ayudarán más tarde a crear tus propias presentaciones,
secciones, etc. Todo ello apoyado con animaciones y vinculadas entre sí.

18.1. Los Botones

Uno de los elementos que más nos van a ayudar a la hora de añadir interactividad en el
diseño son los botones.
En el ejemplo nos hemos ayudado de los botones para crear la navegación entre las
diferentes secciones.



Así que el primer paso, después de haber creado la interfaz de la película en una capa,
será crear e insertar los botones en una nueva capa para trabajar con mayor facilidad.
Para asignarle una acción a un botón es necesario darle un nombre de instancia.
Para ello (y como hemos visto en unidades anteriores) escribimos el nombre que
queramos (al cual nos referiremos más tarde para llamar al botón) en el Inspector de
Propiedades, en este caso lo hemos llamado equipo.

Luego, creamos otra capa para poder insertar las acciones que necesitarán nuestros
botones, abrimos el Panel Acciones y añadiremos el código que deberá realizar el botón.
Ésta es la parte más importante pues deberemos decidir a qué evento responderá el
botón. Existen varios eventos que son capturados en Flash, nombraremos los más
importantes:
MouseEvent.MOUSE_DOWN: ejecuta la acción al presionarse el botón.
MouseEvent.MOUSE_UP: ejecuta la acción al soltarse el botón (después de
haberlo presionado).
MouseEvent.MOUSE_OVER: ejecuta la acción al desplazar el cursor dentro del
botón
MouseEvent.MOUSE_OUT: ejecuta la acción al desplazar el cursor fuera del botón.


Nota: ActionScript diferencia entre mayúsculas y minúsculas, por lo que si
escribes, por ejemplo, mouse_up no será reconocido.
Para capturar el evento tenemos que añadir un escuchador que se encargue de estar
pendiente de si sucede ese evento, al elemento correspondiente. En nuestro caso, al
botón. Además del evento, debemos de indicar el nombre de una función, que será el
código que se ejecute al producirse el evento.
Por tanto, si no hemos creado ya esa función, la tenemos que definir, con el mismo
nombre y pasándole como parámetro el evento. Como siempre, entre las llaves {}
introduciremos el código que queremos que ejecute la función.
miBoton.addEventListener(MouseEvent.MOUSE_UP, miFuncion);

function miFuncion(e:MouseEvent):void
{
//código de la función
}
Puedes ver los todos los eventos de ratón en la siguiente sección Los eventos de ratón
no sólo afectan a botones, pueden ser capturados por cualquier objeto de visualización
(MovieClips, controles de formulario, imágenes, etc...).
Unidad 18. Avanzado: ActionScript 3. Eventos de ratón
Cuando capturamos un evento, lo que realmente estamos utilizando es un string, una
cadena de texto. Por ejemplo al escribir MouseEvent.CLICK, estamos accediendo a la
propiedad CLICK de la calse MouseEvent, que nos devuelve un string cuyo valor es
'click'.
Por tanto, nos daria lo mismo capturar este ecento utilizando:
miBoton.addEventListener(MouseEvent.MOUSE_UP, miFuncion);
Que utilizar la cadena equivalente:
miBoton.addEventListener('click', miFuncion);
Únicamente comentamos esto porque puede que a alguien le sea más cómodo utilizarlo
de una forma u otra, o que no se extrañe si en algún ejemplo lo ve así.


Veamos todos los eventos que que porduce el ratón. Sólo se se producirán cuando la
acción se realize sobre el elemento que tiene el escuchador:
MouseEvent.CLICK ("click") - Se procue al hacer clic (pulsar y soltar el botón
ratón).
MouseEvent.DOUBLE_CLICK ("doubleClick") - Se produce al hacer doble clic.
MouseEvent.MOUSE_DOWN ("mouseDown") - Se produce al pulsar el botón del
ratón (antes de soltarlo).
MouseEvent.MOUSE_MOVE ("mouseMove") - Se produce cuando el ratón se
mueve sobre el elemento.
MouseEvent.MOUSE_OUT ("mouseOut") - Se produce cuando se saca el cursor
de encima del elemento.
MouseEvent.MOUSE_OVER ("mouseOver") - Se produce cuando el ratón se
coloca sobre el objeto.
MouseEvent.MOUSE_UP ("mouseUp") - Se produce cuando se suelta el botón del
ratón.
MouseEvent.MOUSE_WHEEL ("mouseWheel") - Se produce al presionar la rueda
del cursor.
MouseEvent.ROLL_OUT ("rollOut") - Se produce cuando se mueve el ratón fuera
del elemeto.
MouseEvent.ROLL_OVER ("rollOver") - Se produce cuandos e mueve el ratón
sobre el elemento.

Por ejemplo, el flash que vemos a continuación tiene el siguiente código que hace que
al producirse un evento, se muestre su nombre:
texto.addEventListener(MouseEvent.CLICK, funcion);
texto.addEventListener(MouseEvent.DOUBLE_CLICK, funcion);
texto.addEventListener(MouseEvent.MOUSE_DOWN, funcion);
texto.addEventListener(MouseEvent.MOUSE_MOVE, funcion);
texto.addEventListener(MouseEvent.MOUSE_OUT, funcion);
texto.addEventListener(MouseEvent.MOUSE_OVER, funcion);
texto.addEventListener(MouseEvent.MOUSE_UP, funcion);
texto.addEventListener(MouseEvent.MOUSE_WHEEL, funcion);
texto.addEventListener(MouseEvent.ROLL_OUT, funcion);
texto.addEventListener(MouseEvent.ROLL_OVER, funcion);
function funcion (e:MouseEvent):void {
texto.text="\n"+e.type;


}
Observa que no vemos todos los eventos, porque algunos se producen a la vez o my
seguidos. Por ejemplo, al abandonar el cuadro de texto se produce MOUSE_OUT y
ROLL_OVER. Como este último se produce después, es el que aparece en la caja de
texto.






Unidad 18. Navegación - ActionScript (II)
18.2. Controladores de la línea de tiempo
Una vez insertados los botones y definidos los eventos sobre los que deben actuar,
tendremos que decidir qué queremos que hagan.
De esta forma podremos crear dinamismo entre nuestras secciones.
Imagina que tenemos la siguiente línea de tiempo:

Observa la capa Contenido. En ella se encuentran todo el contenido de las secciones.
De esta forma, si no aplicásemos ninguna acción sobre la línea de tiempo, todas las
secciones se ejecutarían una seguida de la otra. Lo que queremos conseguir es que se
ejecute la primera (para mostrar la sección principal) y el cabezal se pare hasta nueva
orden (para mostrar la segunda).
Para ello utilizaremos la función stop().
Esta función sirve para parar el cabezal de la línea de tiempo donde sea colocada.
Así que seleccionamos el último fotograma de la sección y abrimos el Panel Acciones.


Allí deberemos escribir únicamente la línea:
stop();
Esto hará que cuando la animación llegue a ese punto se detenga a la espera de nueva
orden.
Nosotros hemos colocado las acciones en una capa aparte llamada Acciones para así
poder acceder más rápido a ella. El método es el mismo, solamente habrá que crear
fotogramas claves en aquellos sitios en los que queramos insertar un stop().

Ya hemos conseguido detener la presentación. Pero, ¿cómo hacemos que se muestre
la segunda? Muy sencillo.
Los botones nos ayudarán a desplazar el cabezal por la línea de tiempo. Así que
modificaremos el código de uno de los botones:

De esta forma, al hacer clic sobre ese botón, el cabezal de reproducción se
desplazará hasta el fotograma que tiene la etiqueta "Encuentranos" y reproducirá a partir
de allí.
Si añadimos un stop() en el último fotograma de la segunda sección, cuando éste se
reproduzca se parará y el contenido permanecerá estático en espera de una nueva orden.

Existe otra forma, muy útil, para nombrar los fotogramas. Del mismo modo que
dábamos un nombre de instancia a un botón lo haremos con un fotograma.


Basta con introducir una Etiqueta de fotograma para poder remitir el cabezal a éste:



Además de estos controladores podemos utilizar también:
gotoAndStop(fotograma), que situará el cabezal en el fotograma indicado y parará
la reproducción.
play(), que hará que la reproducción prosiga en el fotograma en el que se encuentre
el cabezal.
prevFrame(), que hará que el cabezal retroceda al fotograma anterior al que nos
encontramos.
nextFrame(), que hará que el cabezal avance al fotograma siguiente al que nos
encontramos.
Existen los controladores prevScene() y nextScene() que hacen avanzar el cabezal a
escenas anteriores o siguientes. Así que veremos qué son las escenas para poder
utilizarlos también.
Unidad 18. Navegación - ActionScript (III)
18.3. Las Escenas
Flash permite el uso de escenas para separar diferentes temas en una sola película. Se
suelen utilizar sobre todo en animaciones, donde una parte de la acción transcurre sobre
un fondo y la siguiente sobre otro completamente diferente.
De este modo podemos usar las escenas para representar diferentes secciones muy
diferentes en nuestra película, por ejemplo, crear una escena para el cargador, otra para
la película principal y una tercera para una sección que se diferencie completamente del
resto y nos sea más cómodo trabajar con ella independientemente.
A pesar del hecho de que las escenas se trabajan como líneas de tiempo diferentes, al
crear el archivo SWF éstas se alinean en orden reproduciéndose una detrás de otra.


Por ello, al publicar el documento los fotogramas de las escenas se numerarán respecto
a esto. Es decir, si tenemos una primera escena que va del fotograma 1 al 50, la segunda
escena comenzará en el fotograma 51.
Todo esto hace que las escenas, en algunos casos estén desaconsejadas por las
siguientes razones:
El uso de escenas obliga al usuario a descargar el documento en su totalidad, a
pesar de que es posible que no navegue por todas las secciones. Existe la
posibilidad, como veremos más adelante, de cargar en cualquier momento archivos
SWF para reproducirlos en la pantalla principal. De esta forma emularíamos el uso
de las escenas cargando diferentes documentos dependiendo de la sección a
mostrar.
Cuando añadimos ActionScript a nuestras escenas el resultado puede ser, a veces,
imprevisible. Como hemos explicado anteriormente, al crearse un archivo con una
línea de tiempo continua las acciones a realizar pueden ser inesperadas.
En el Panel Escena (ábrelo desde Ventana → Otros paneles → Escena) podrás ver
las escenas actuales de la película.

En principio solamente encontrarás una (Escena 1), es posible añadir más escenas
pulsando el botón Añadir escena . Para cambiar el nombre de una escena haz doble
clic sobre su nombre en el panel y escribe el que quieras.
Puedes eliminar una escena utilizando el botón Eliminar escena o duplicarla con el
botón Duplicar escena .
Como hemos comentado antes (y si no existe código ActionScript que modifique esto)
las escenas se reproducen una después de la otra en el orden en el que se encuentran en
el Panel Escena. Puedes cambiar este orden con solo arrastrar y colocar la escena en
cuestión en su lugar correspondiente.
Trabajar con una escena es muy sencillo, basta con seleccionarla en el panel y su
contenido se mostrará en el Escenario. Podrás trabajar con ella como si se tratase de una
película independiente.
Pero veamos cómo podemos utilizar ActionScript para desplazarnos de escena a
escena.


Antes hemos mencionado las funciones prevScene() y nextScene(). Estos comandos
hacen que el cabezal de reproducción se desplace de una escena a otra en el orden en el
que se encuentran en el Panel Escena.
Pero existe otra posibilidad.
Según el ejemplo que estamos siguiendo creamos una nueva escena llamada
escena_otros. En el botón Otros Restaurantes hemos añadido el siguiente código:
import flash.events.*;
miBoton.addEventListener(MouseEvent.MOUSE_UP, miFuncion);

function miFuncion(event:MouseEvent):void
{
gotoAndPlay("escena_otros", 1);
}
Con esto estamos indicando que al soltarse el botón el cabezal se desplace al
fotograma 1 de la escena escena_otros y empiece a reproducirse a partir de allí.

Unidad 18. Navegación - ActionScript (IV)
18.4. Los MovieClips
En el tema de Clips de Película vimos que se tratan de objetos con línea de tiempo
propia.
Podemos utilizarlos para incluir elementos en nuestra película con una animación
independiente. De este modo aunque la película principal esté detenida el clip seguirá
actuando según su propio cabezal de reproducción.
Existen métodos para manejar la línea de tiempo de los clips, idénticas a las anteriores,
y que veremos a continuación.
Lo primero que deberemos aprender es a acceder a las propiedades y métodos de los
objetos. Esto es un recurso muy utilizado pero a la vez es muy sencillo. Lo veremos con
un ejemplo.


Queremos que al pulsar un botón el movieclip avance en su línea de tiempo hasta su
fotograma 20.
Fíjate en cómo hemos escrito la función. Primero hemos señalado el clip sobre el que
queremos actuar escribiendo su nombre de instancia:

Y después de añadir un punto hemos indicado la función que se ejecutará.
miBoton.addEventListener(MouseEvent.MOUSE_UP, miFuncion);

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

function miFuncion(event:MouseEvent):void {
miClip.visible = false;
}
Para hacerlo un poco más complicado podríamos encontrarnos en el siguiente
supuesto. Imagina que tenemos un movieclip llamado clipPadre. Dentro de este clip de
película tendremos más símbolos y uno de ellos puede ser otro movieclip llamado
clipHijo.
¿Cómo accedemos a las propiedades y funciones de clipHijo? Muy fácil. Suponiendo
que estamos trabajando desde la película principal donde tenemos insertado el clipPadre,
escribiremos lo siguiente:
Así haremos que la reproducción de clipHijo se reanude.


clipPadre.clipHijo.play();
Unidad 18. Navegación - ActionScript (V)
Pero, ¿qué pasa si queremos ejecutar la orden desde dentro de clipPadre? Imagina
que dentro del movieclip hay un botón y el clip clipHijo. Queremos que al pulsar el botón
se reproduzca el fotograma 20 de clipHijo, entonces deberíamos escribir lo siguiente en
las acciones del botón:
import flash.events.*;

miBoton.addEventListener(MouseEvent.MOUSE_UP, miFuncion);

function miFuncion(event:MouseEvent):void
{
clipHijo.gotoAndPlay(20);
}
Como puedes ver esta vez no hemos mencionado a clipPadre en la línea de código.
No es necesario porque ya nos encontramos dentro de él.
También podemos referenciarnos a elementos superiores utilizando la propiedad
parent. De este modo si nos encontrásemos dentro de clipHijo y quisiésemos avanzar al
fotograma 20 de clipPadre podríamos escribir:
with (parent) {
this.parent.gotoAndPlay(20);
}
Donde this indica el clip donde nos encontramos y parent hace que nos coloquemos
en el nivel inmediatamente superior.
De esta forma, sólo deberemos escribir la ruta de contenedores o padres hasta llegar al
objeto del cual queremos modificar o ejecutar un método.


Podemos hacer que el elemento padre escuche eventos producidos dentro del hijo, con
lo que denominamos propagación en burbuja. Puedes ver cómo en este avanzado
. Unidad 18. Avanzado: ActionScript 3 - Eventos de hijo a padre
Crear nuestros propios eventos
A parte de los eventos que tiene Flash, podemos producir los nuestros propios. Basta
con utilizar el siguiente código:
objeto.dispatchEvent(new Event("miNombreDeEvento"));
El método dispatchEvent es el que hace que se produzca el evento indicado como
parámetro. Podemos pasarle un evento existente, o crear uno propio utilizando new Event
indicando el nombre que le queramos dar.
En el ejemplo anterior, podemos capturar el evento como hemos visto hasta ahora:
this.addEventListener("miNombreDeEvento", miFuncion);
Propagación de eventos
Al crear un evento, podemos añadir un parámetro booleano más, la propagación. En
resumen, cuando hay propagación el evento se propaga fuera del MovieClip hacia los
elementos padres, permitiendo así que estos puedan escuchar ese evento.
Por ejemplo, podemos lanzar un evento personalizado con propagación así:
objeto.dispatchEvent(new Event("miNombreDeEvento", true));
Esto resulta muy útil. Imaginemos que tenemos un MovieClip con varios botones,
destinado a ser utilizado dentro de otro MovieClip para navegar por él. Podríamos
introducir el código directamente utilizando parent, pero sólo nos serviría para una acción
específica. ¿Pero y si queremos utilizar el mismo archivo en otros proyectos?
Con lo que hemos visto, bastaría con poner el siguiente código en cada botón:
botonAvanzar.addEventListener(MouseEvent.MOUSE_UP, miFuncion);

function miFuncion(event:MouseEvent):void


{
dispatchEvent(new Event("botonAvanzarPulsado", true));
}
Luego, en la película padre, bastaría con capturar el evento botonAvanzarPulsado
como hemos visto hasta ahora, y dar la funcionalidad que queramos al botón.
Por ejemplo, esto es lo que hemos hecho en las páginas del periódico digital, ejercicio
propuesto que encontrarás al final del tema.

Por lo demás, el funcionamiento de un clip no se diferencia en nada a la línea de
tiempos de cualquier otra película. Podemos etiquetar los fotogramas de igual modo
para llamarlos directamente por su nombre:
miClip.gotoAndStop("etiqueta");
Y saltar de fotograma a fotograma para manejar las animaciones de la forma en que
nosotros queramos.

Igual que vimos antes con los botones, los movieclips tienen manejadores de eventos
que nos permitirán ejecutar código dependiendo de los eventos que se produzcan sobre
ellos.
Responden a los a todos los eventos de ratón que ya hemos visto, y cualquier evento
que comparta con el resto de objetos de visualización (DisplayObject). Vamos a ver los
eventos específicos del MovieClip:
Event.ADDED ("added") - Se produce cuando el movieclip se añade a la lista de
visualización de un contenedor (contenedor.addChild(miClip)).
Event.ENTER_FRAME ("enterFrame") - Se produce cuando la cabeza lectora entra
en un fotograma, pero también se produce constantemente si sólo hay un fotograma
o si la reproducción está parada. En este caso, depende de la velocidad del
MovieClip. Por ejemplo, un MovieClip que se reproduce a 24 FPS produce este
evento 24 veces por segundo. Recuerda este evento porque es muy útil.
Event.EXIT_FRAME ("exitFrame") - Igual que el anterior, pero se produce al salir
del fotograma.
Event.REMOVED ("removed") - Se produce cuando el MovieClip se quita de la lista
de visualización de un contenedor (contenedor.removeChild(miClip)).


Unidad 18. Navegación - ActionScript (VI)
Veamos el ejemplo:
Si observas tenemos dos movieclips en la película, uno de ellos llamado estrella, y
el otro detalle. La línea de tiempo de estos movieclips tendría este aspecto:


Como puedes ver tenemos una cuarta capa que se llama acciones. Allí
colocaremos las acciones que se asociarán a este fotograma:
estrella.addEventListener(MouseEvent.MOUSE_UP,funcion_desapare
ce);

function funcion_desaparece(event:MouseEvent):void {
estrella.gotoAndPlay("desaparece");
detalle.gotoAndPlay("aparece");
}
Este código hará que cuando se presione el clip estrella se desplacen los cabezales
en los clips detalle y estrella a las etiquetas de fotogramas que se indican.
Para hacer desaparecer el clip detalle incluiremos el siguiente fragmento de código:
Esto hará algo parecido a lo anterior, cuando se presione el clip detalle los
cabezales de ambas películas se desplazarán a las respectivas etiquetas de
fotograma.
detalle.addEventListener(MouseEvent.MOUSE_UP,funcion_aparece);

function funcion_aparece(event:MouseEvent):void {
estrella.gotoAndPlay("aparece");
detalle.gotoAndPlay("desaparece");
}
Unidad 18. Navegación - ActionScript (VII)
18.5. Las Variables
Las variables son contenedores donde podremos almacenar información para trabajar
con ella. Esta información puede ser modificada y leída.
Aunque parece un concepto muy complejo su uso es bastante sencillo.


En ActionScript existen muchos tipos diferentes de variables, de hecho en una variable
podemos guardar cualquier tipo de objeto. Vamos a ver ahora los más comunes, los que
emplearemos para guardar texto, números o valores booleanos (verdadero - falso):
Boolean: o booleano, puede almacenar sólo dos valores, o true (verdadero) o false
(falso).
Number: puede almacenar números enteros o decimales, positivos o negativos. El
signo decimal en ActionScript es el punto (.). Podrás realizar operaciones
matemáticas con estas variables.
String: puede almacenar cadenas de caracteres, es decir, un conjunto de caracteres
alfanuméricos. Las variables de tipo String deben ir entre comillas dobles
("cadena") o ('cadena').
Array: en los arrays o matrices podemos almacenar distintos valores en distintas
posiciones. A estas posiciones accedemos con un índice numérico (utilizando 0 para
la primera posición) que indicamos entre corchetes tras el nombre del array
(nombreArray[3]=valor;). Puedes ver un ejemplo práctico de los arrays en este
básico.
Unidad 18. Básico: ActionScript 3. Arrays
Crear un array
Como siempre, comenzamos declarando el array, con la sintaxis var
miArray:Array. Después podemos asignarle los valores de varias formas:
//Asignando el valor a cada posición
var miMatriz1:Array = new Array();
miMatriz1[0] = "Lunes";
miMatriz1[1] = "Martes";
miMatriz1[2] = "Miércoles";
miMatriz1[3] = "Jueves";
miMatriz1[4] = "Viernes";
miMatriz1[5] = "Sábado";
miMatriz1[6] = "Domingo";

//O asignándolos todos a la vez
var miMatriz2:Array = new
Array("Lunes","Martes","Miércoles","Jueves","Viernes","Sábado"
,"Domingo");

var miMatriz3:Array =
["Lunes","Martes","Miércoles","Jueves","Viernes","Sábado","Dom
ingo"];
En cualquiera de los casos anteriores obtenemos un array de 7 posiciones con los
días de la semana.
Recorrer un array
Una forma cómoda de recorrre una Array es con un bucle for, como en el siguiente
ejemplo:
var miMatriz:Array = ["Lunes","Martes","Miércoles",
"Jueves","Viernes","Sábado","Domingo"];

for (var i:Number = 0; i < miMatriz.length(); i++) {


trace(miMatriz[i]);

}
Lo que hacemos es declarar una variable i que hará de contador.
El array es un objeto con métodos. En este caso, el método length nos devuelve el
número de elementos del array. Ten el cuenta que el primer elemento del array es el
elemento 0. Por tanto, para un array de 2 elementos, debemos recorrer las
posiciones 0 y 1. Por eso, iniciamos el contador en 0, y repetimos el bucle
mientras el contador sea menor que el número de elementos.
Como resultado, el se mostrará una vez cada elemento en el panel de salida.


Antes de utilizar una variable, tenemos que declararla. Para declarar (crear) una
variable sólo tendrás que escribir la siguiente línea:
var nombreVariable:tipoVariable = valorVariable;
Veamos el ejemplo para verlo más claro. Haremos que el clic sobre el movieclip
estrella sólo se ejecute si el detalle no está aún mostrado.
Y al revés. Que sólo se ejecute el código al hacer clic en el detalle si éste se encuentra
fuera.
Fíjate en la primera líneas, se declaran la variable booleana, que dice si la estrella se
encuentra activada.
var estrella_activada:Boolean = true;

estrella.addEventListener(MouseEvent.CLICK,funcion_desaparece);

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


}
}

detalle.addEventListener(MouseEvent.CLICK, funcion_aparece);

function funcion_aparece(event:MouseEvent):void {
if (estrella_activada==false) {
estrella.gotoAndPlay("aparece");
detalle.gotoAndPlay("desaparece");
estrella_activada=true;
}
}
Al hacer clic en el movieclip estrella se evalúa la variable estrella_activada si ésta es
verdadera (true) entonces permite que se realicen las acciones. En caso contrario, sale de
la condición.
Al entrar en la condición se desplazan los cabezales y se modifica el valor de la variable
a falso para que la próxima vez que intente entrar no puedan ejecutarse las acciones.
En el click del clip detalle se evalúa de nuevo la variable. Esta vez debería estar en
false porque si el detalle está fuera es porque ya se ha hecho clic sobre la estrella y ha
pasado por el anterior bloque.
A medida que vayamos avanzando iremos usando otras variables de diferentes tipos.
Verás que su uso no difiere mucho al que hemos explicado ahora.
Antes de terminar con este tema deberíamos ver algo muy importante: el ámbito de las
variables.
Esto es, el sitio donde puedan utilizarse las variables.
Nota: Para explicar el ámbito de las variables utilizaremos la función trace(variable);
que envía el contenido de la variable al Panel Salida, lo que nos permitirá ver el valor que
va tomando. Puedes abrir este panel desde Ventana → Salida.
Unidad 18. Navegación - ActionScript (VIII)


Existen 2 ámbitos de variables: el local y el de línea de tiempo.

Las variables declaradas en la línea de tiempo pueden utilizarse en cualquier
fotograma posterior y su contenido se mantendrá intacto.
Por ejemplo, declaramos la siguiente variable en el fotograma 1:
var miVariable:String = "Esta es mi variable";
Y en el fotograma 15 colocamos las siguientes líneas en el Panel Acciones:
trace(miVariable);
stop();
Verás como al probar la película en el Panel de Salida aparece escrito el Esta es mi
variable, que es el texto que le hemos dado.
Ten en cuenta que si declaras la variable en el fotograma 2 no estará disponible
en fotogramas anteriores, es decir en el 1.

Las variables declaradas en un ámbito local sirven sólo para un bloque de función.
Veamos este ejemplo:
var miVariable:String = "Esta es mi variable";
var miVariable2:String = "Esta también lo es";

function miFuncion() {
var miVariable:Number = 1;
trace(miVariable);
trace(miVariable2);
miVariable2 = "La cambio";
var otraVariable:Number = 10;
trace(otraVariable);


}

miFuncion();

trace(miVariable);
trace(miVariable2);
trace(otraVariable);
Antes de la función, en la línea de tiempo definimos dos variables miVariable y
miVariable2.
Después definimos una funcióndefinimos una función (hablaremos de ellas más a fondo
en el siguiente apartado).
En esta función se declara una variable (miVariable). Tiene el mismo nombre que la
variable de la línea de tiempo, pero no es la misma variable, es local a la función. Si la
enviamos al Panel Salida comprobaremos que muestra el valor asignado dentro de la
función (1). En cambio, si dentro de la función mostramos el contenido de miVariable2,
definida en la línea de tiempo veremos Esta también lo es que es su valor inicial, ya que
no la hemos reemplazado por otra local que se llame igual. Lo modificamos. Por último,
hemos declarado y mostrado una última variable local (otraVariable) con valor 10.
Recuerda que la función no se ejecutará hasta que no la llamemos, y es lo que
hacemos en la siguiente línea después de definirla.
A continuación, en la línea de tiempo mostramos el contenido de miVariable, y
comprobamos que muestra el valor inicial Esta es mi variable. La función no la ha
alterado, ya que aunque compartían nombre, eran dos variables distintas.
En cambio al mostrar el valor de miVariable2 comprobamos que si que ha cambiado,
mostrando La cambio. Como esta variable no es local a la función, si la alteramos si
que cambia.
Por último mostramos el contenido de otraVariable. Como esta había sido definida
dentro de la función, es una variable local, por lo que fuera de la función no existe, no está
definida, por lo que muestra UNDEFINED.



Por tanto, las variables declaradas dentro de la función son locales, y sólo existen
dentro de ésa función. Si dentro de una función queremos emplear una variable definida
en la línea de tiempo, no debemos de definir una variable local con el mismo nombre.

Las variables de ámbito global serían aquellas accesibles indistintamente desde
cualquier parte del proyecto, desde distintos MovieClips. En ActionScript 3 ya no se
permite el uso de este tipo de variables, que en la versión anterior se hacía
precediendo el nombre de la variable con _global.. No obstante, podemos simular
variables globales creando una clase, como se explica en este avanzado:


. Unidad 18. Avanzado: ActionScript 3 - Crear una clase para
variables globales
Una variable global es aquella a la que podemos acceder desde cualquier parte del
proyecto.
En ActionScript 2 podíamos crear una variable global de la siguiente manera:
//Código ActionScript 2
_global.miVariable = "Esta es una variable global";
Esto ya no es válido en ActionScript 3. Pero en su lugar podemos crear una clase y
guardar en ella estas variables.
La clase la escribimos en un archivo .as (Archivo → Nuevo → Archivo de
ActionScript).
Aunque no es obligatorio, lo habitual es crear un patrón de diseño Singleton. No vamos
a detallar que és. A grandes rasgos, es una forma de escribir una clase de manera que no
se creen objetos distintos, y se utilice una instancioa única. Recordemos que si tenemos
varios objetos, cada uno puede asignar valores distintos a sus variables.
Su estrucura en el archivo as (al que llamaremos variablesGlobales.as, el mismo
nombre que daremos a la clase)sería la siguiente:


package {
public class variablesGlobales {
// Aquí declaramos nuestras variables
public var miVariableTexto:String = "Hola";
public var miVariableNumero:Number = 100;
///

private static var instancia:variablesGlobales;
public function variablesGlobales() {
}
public static function variables():variablesGlobales
{
if (!instancia) {
instancia = new variablesGlobales();
}
return instancia;
}
}
}
Es importante declarar nuestras variables como public var para que puedan ser
accedidas desde fuera.
Guardamos el archivo en la misma carpeta en la que estamos trabajando.
Ahora podemos acceder a enuestras variables con la siguiente sintaxis:
variablesGlobales.variables().nombreVariable
Por ejemplo:
trace(variablesGlobales.variables().miVariableTexto);
variablesGlobales.variables().miVariableNumero = 5;


Nota: en vez de variablesGlobales podemos emplear el nombre que queramos,
cambiándolo en todos los sitios donde corresponda. De igual manera, podemos cambiar el
nombre del método con el que accedemos a las variables (variables()). Lo habitual es
llamarlo getInstance() porque lo que realmente hace es devolver la instancia única del
objeto.






Unidad 18. Navegación - ActionScript (IX)
18.6. Las Funciones
Como habrás visto en los ejemplos anteriores, una función es un bloque de código
que podemos utilizar en cualquier parte del archivo, siempre que haya sido definida
en el mismo o en un fotograma anterior. Si definimos una función dentro de otra tendrá
un ámbito local, como ocurría con las variables.
Como ya hemos visto, las funciones se definen con la palabra function. El ejemplo
sencillo sería:
function saludar() {
trace('Hola');
}
Lo único que hace es mostrar Hola en el panel de salida.
Para que se ejecute la función, debemos de llamarla en alguna parte del código:
saludar();
Parámetros o argumentos


Como ves, crear funciones es bastante sencillo. Además podemos crear funciones un
poco más complejas enviándole parámetros:
function saludar(nombre:String) {
trace('Hola '+nombre);
}
Observa que en el parámetro hemos indicado el tipo de dato que será, es este caso del
tipo String.
Ahora para llamarla usaríamos por ejemplo:
saludar("Bruno"); //Escribiría: Hola Bruno
Podemos envair varios parámetros separados por comas. Si al parámetro le damos un
valor, este se convertirá en un parámetro opcional, y podemos enviarlo al llamar a la
función o no. Por ejemplo:
function saludar(nombre:String, pregunta:String='¿qué tal?') {
trace('Hola '+nombre+' '+pregunta);
}
Ahora podemos llamarla de dos formas: enviando todos los parámetros, o no enviando
los parámetros opcionales, por lo que tomará el valor por defecto:
saludar("Bruno"); //Escribiría: Hola Bruno ¿qué tal?
saludar("Bruno", "¿cómo va?"); //Escribiría: Hola Bruno ¿cómo va?
Habrás observado que cuando creábamos una función para tratar un evento siempre
recogemos un parámetro:
miBoton.addEventListener(MouseEvent.MOUSE_UP, miFuncion);

function miFuncion(e:MouseEvent):void {
gotoAndPlay(1);


}
El parámetro que recogemos es el evento. Cada evento tiene unos métodos que
podemos emplear si definimos su tipo. En el ejemplo anterior, declaramos el parámetro e
que era del tipo MouseEvent. En las funciones activadas por eventos siempre
debemos de recoger ese parámetro, aunque si no lo pensamos usar no es necesario
especificar su tipo.
Una propiedad muy útil es event.target (en el ejemplo anterior se usaría
e.event.target) que nos indica el objeto que ha producido el evento.
Esto nos permite utilizar la misma función para varios objetos, pero que la función sólo
modifique propiedades del elemento que la llama en cada momento.

Devolver valores.
En vez de que la función realice una acción, también podemos utilizarla para que
devuelva valores u objetos. Por ejemplo:
function saludar(nombre:String):String {
return 'Hola '+nombre;
}
Observa que hemos indicado detrás de la función el tipo de valor a devolver (en este
caso devolverá un String), tal como hacíamos con las variables.
En muchos ejemplos habrás visto que el tipo indicado es :void. Esto no es un tipo de
datos, si no todo lo contrario. :void indica que esa función no devuelve ningún valor.
El valor que devuelve es lo indicado la instrucción return.
En el ejemplo anterior la función no realiza ninguna acción, sólo devuelve un valor:
saludar("amigo"); //No haría nada
trace(saludar("amigo")); //Mostraría en alida: Hola amigo
var saludo:String = saludar("amigo"); //Guarda en la variable
saludo


//Lo que devuelve la
función
Unidad 18. Navegación - ActionScript (X)
18.7. Contenedores y listas de visualización
Con respecto a los elementos que vemos en nuestra película con ActionScript 3,
tenemos que tener claros un par de conceptos:
Los objetos que vemos son llamados objetos visibles o de visualización, y todos
pertenecen a la clase DisplayObject o a una subclase heredada de esta. Siempre
han de estar dentro de un contenedor para que se vean.
Los objetos están agrupados dentro de un contenedor, que hace de elemento padre.
A su vez, dentro de un contenedor podemos tener otros contenedores con sus
respectivos elementos. Los contenedores pertenecen a la clase
DisplayObjectContainer, y aunque pueda parecer lioso, a su vez un contenedor es
un objeto de visualización, y se puede tratar como tal.
La lista de visualización es cómo están ordenados los objetos dentro del
contenedor, y establece el orden de apilamiento de los objetos.

Los contenedores:
En nuestra película podemos tener cuatro tipos de contenedores:
La escena (stage). Es el contenedor general de nuestra película. Todo lo que se ve,
está dentro de la escena.
Loader. Nos permite cargar un archivo externo en él. Lo veremos en el siguiente
apartado.
MovieClip. Aunque normalmente no lo tratamos como tal, un MovieClip contiene un
archivo SWF con una línea de tiempo propia. Por ejemplo, dentro de él podemos
acceder a los distintos símbolos que lo forman.
Sprite. Es como una carpeta, a la que podemos ir añadiendo y quitando objetos.
Podemos crear tantos sprites como queramos.
El que más utilizaremos como contenedor será el Sprite, aunque en muchos casos lo
hagamos directamente sobre la escena.
Declararemos un Sprite como cualquier objeto:
var miContenedor:Sprite = new Sprite;


Ahora tenemos un contenedor, pero vacío. Podemos añdirle elementos que pasaran a
ser elementos hijos del contenedor. Para ello podemos utilizar uno de los métodos de los
contenedores:
miContenedor.addChild(miObjeto1);
miContenedor.addChild(miObjeto2);
Ahora tenemos el contenedor con dos objetos. Pero aún no se ven, porque no hemos
añadido el contenedor al elemento principal, a la escena. Vamos a hacerlo:
addChild(miContenedor);
Ahora ya vemos el contenedor. Bueno, realmente no vemos el contenedor, vemos los
elementos de visualización que contiene.
Nuestro contenedor tiene una lista de visualización con dos elementos.


Unidad 18. Navegación - ActionScript (XI)
Listas de visualización:
Los elementos añadidos a un contenedor forman su lista de visualización. La
posición dentro de esta lista establece el orden de apilamiento. Es decir, los objetos con
un índice menor se verán por debajo de los elementos con un índice mayor.
Vamos a ver cómo accedemos y tratamos estos elementos con los métodos y
propiedades de DisplayObjectContainer.
numChildren - Esta propiedad nos devuelve el número de elementos de la lista. En
el ejemplo anterior, miContenedor.numChildren devuelve 2.
getChildIndex(objeto) - Nos permite conocer el índice de un elemento.
addChild(objeto) - Añade el elemento al final de la lista, encima del resto.
addChildAt(objeto, indice) - Añade un elemento y nos permite indicar en qué
posición colocarlo. Por ejemplo, si tenemos el la lista el objeto3, y queremos añadir
el objeto7 justo antes que este para que quede debajo, podemos emplear:
addChildAt(objeto7, getChildIndex(objeto3));
para saber el índice del objeto3 y colocar ahí el objeto7, desplazando el resto hacia
el final.


setChildIndex(objeto, indice) - Nos permite cambiar el orden de un objeto dentro
de la lista.
getChildByName(nombre_instancia) - Nos permite obtener un objeto conociendo
su nombre de instancia.
getChildAt(índice) - Nos permite obtener un objeto conociendo su índice.
contains(objeto) - Devuelve verdadero si el objeto ya está en la lista.
removeChild(objeto) - Quita el objeto indicado de la lista.
removeChildAt(objeto) - Quita de la lista el objeto con el índice indicado.
Nota: Antes de quitar un objeto de la lista, es recomendable borrar sus eventos si
los tiene, ya que esto puede producir errores. Además, si no los quitamos, el objeto sigue
ocupando memoria. Para borrar un evento, utilizamos el método removeEventListener,
con los mismos parámetros que empleamos en addEventListener. Por ejemplo:
objeto.removeEventListener(Event.ENTER_FRAME, miFuncion);









Unidad 18. Navegación - ActionScript (XII)
18.8. Cargando Archivos
Ahora veremos como modificar el contenido de un clip de película y cargar en él
otro archivo SWF o incluso una imagen con formato JPG, GIF o PNG.
Vamos al ejemplo. En la sección Encuéntranos hacemos clic en un botón de tipo texto
y nos aparece el mapa donde localizar el restaurante:
El código que hemos insertado es el siguiente:
carga.addEventListener(MouseEvent.MOUSE_UP, abrir);

function abrir (e:Event): void{
var miCargador:Loader = new Loader();
miCargador.load(new URLRequest("mapa.swf"));


miCargador.contentLoaderInfo.addEventListener(Event.COMPLETE,
insertMovie);
function insertMovie(evt:Event):void{
addChild(miCargador);
}
}
Vemos que empleamos un contenedor Loader para cargar el archivo, al que le
indicamos el archivo a cargar en su método load.
var miCargador:Loader = new Loader();
miCargador.load(new URLRequest("mapa.swf"));
Una vez cargado, lo añadimos a un contenedor o directamente a la escena, como en el
ejemplo, para que se visualice.
addChild(miCargador);
Pero esto no lo hemos hecho directamente, si no que lo hemos hecho en el siguiente
evento:
miCargador.contentLoaderInfo.addEventListener(Event.COMPLETE,
insertMovie);
¿Por qué? Porque este evento se produce cuando el archivo está completamente
cargado. Esto evita que intentemos mostrar un objeto que aún no se ha cargado del todo.

Utilizaremos un nuevo cargador si queremos añadir otro archivo. Por ejemplo, si
queremos ir mostrando imágenes en la misma posición, cada vez que queramos cambiar
la imagen sólo habrá que volver llamar al método load(), que reemplazará el contenido
actual del cargador por la nueva imagen.

Sigue el siguiente ejercicio paso a paso para ver cómo crear película cargando
archivos:
Unidad 18. Ejercicio paso a paso: Crear una película cargando
archivos


Objetivo.

Crearemos una película:

Ejercicio paso a paso.

Como siempre, utilizaremos el tipo de documento Archivo de flash (AS 3.0).
Vamos a crear el elemento con forma de estrella. Para el resto, seguiremos los mismos
pasos:
1. Haz clic en el botón Nuevo Símbolo al pie de la Biblioteca.
2. Dale un nombre, en nuestro ejemplo estrella, y selecciona Clip de película.
3. Dibuja la forma que quieras mostrar en el escenario.
4. Con ayuda del panel Alinear (Ctrl + K) coloca la forma centrada con respecto al
punto de referencia (mira el ejemplo).

5. Haz clic en Escena 1 en la línea de tiempo para volver a la película principal.
6. Arrastra el símbolo que acabamos de crear y añádelo al Escenario.
7. Dale un nombre de instancia significativo al cual nos referiremos más tarde, en
nuestro ejemplo hemos usado estrella.
8. Crea una nueva capa y añade la siguiente línea en el Panel Acciones para el
fotograma 1 de la película principal:
9. estrella.addEventListener(MouseEvent.MOUSE_DOWN,arrastrar)
;
10. function arrastrar(event):void { //Nombre de la
nuestra función
11. estrella.startDrag(); //Nombre del
símbolo
12. }
13.
14. estrella.addEventListener(MouseEvent.MOUSE_UP,solta
r);
15. function soltar(event):void { //Nombre de la
nuestra función


16. estrella.stopDrag(); //Nombre del
símbolo
}
Este código hace que al pulsar el ratón, se comience a arrastrar el elemento, y al
soltarlo deje de hacerlo.
17. Guarda el documento con el nombre estrella, publica la película desde Archivo →
Publicar, y ciérralo.
18. Repite estos pasos para cada una de las formas que quieras añadir.
Ahora pasaremos a crear la película principal.
1. Abre un documento en blanco.
2. Dibuja un rectángulo y dale las dimensiones del documento utilizando el botón
del Panel Alinear. Puedes hacer que tome un mapa de bits como fondo
seleccionando Mapa de bits en el desplegable Tipo del Panel Color.
3. Ahora añadiremos los botones que utilizaremos. Nosotros hemos importado la
biblioteca de los elementos anteriores para utilizar las mismas formas. Para ello haz
clic en Archivo → Importar → Abrir biblioteca externa.
4. Seleccionar los archivos que quieras abrir y arrastra el símbolo al Escenario. En
nuestro caso, comenzamos por estrella.fla.
5. Redimensiónalo con la herramienta Transformación Libre .
6. En el panel de Propiedades, le damos el nombre a la instancia. En nuestro ejemplo
la hemos llamado btn_mostrarEstrella por ser el botón que mostrará la estrella.
7. También en el panel propiedades, especificamos el tipo Botón. Lo hacemos
únicamente para que el cursor cambie a la mano al pasar sobre él.

8. Arrastra otro símbolo y colócalo al pie del Escenario (este será el que hará que rote
el elemento).
9. Redimensiónalo si lo crees necesario, dale un nombre de instancia y conviértelo a
botón. Nosotros lo hemos llamado btn_rotarEstrella.
10. Repite estos pasos para cada una de las formas que hayas creado, utilizando los
nombres de instancia apropiados.



11. Una vez ya estén todos los botones en el Escenario pasaremos a escribir el código
asociado. Para ver como hacerlo, vamos a cargarlo los archivos publicados (swf)
desde el código.
12. Crea una nueva capa pulsando el botón Insertar Capa .
13. En el fotograma 1 de la nueva capa escribe lo siguiente en el Panel Acciones, que
afectará al símbolo estrella:
14. var estrella:Loader = new Loader();//Utilizamos un
Loader para cargar archivos
15. estrella.load(new
URLRequest("estrella.swf"));//Indicamos la ruta del
archivo
16. var estrellaMC:MovieClip; //Un objeto MovieClip que
será la estrella
17. estrella.contentLoaderInfo.addEventListener(Event.C
OMPLETE, insertarEstrella);
18. //Utilizamos este evento para asegurarnos de que se
ha cargado completamente
19. //antes de agregarlo a la escena
20. function insertarEstrella(e:Event):void {
21. estrellaMC = e.target.content; //Almacenamos el
elemento que produce el evento
22. //en nuestro movie clip
23. estrellaMC.visible = false; //Lo ocultamos para que
no se vea por defecto
24. estrellaMC.x=100;
25. estrellaMC.y=80; //Le damos la posición inicial que
queramos
26. addChild(estrellaMC) as MovieClip;//Añadimos el
archivo cargado a la escena
27. //Aún no se verá porque visible=false
28. }
29.
30. btn_mostrarEstrella.addEventListener(MouseEvent.MOU
SE_UP, mostrarOcultarEstrella);
31. //Detectamos cuando se pulsa el botón para
mostrar/ocultar el elemento
32. function mostrarOcultarEstrella(e:Event):void {
33. estrellaMC.visible=! estrellaMC.visible;


34. //Al negar una propiedad booleana como esta
la invertimos.
35. //por lo que cada al puslar el botón se
mostrará si está oculta o
36. //o se ocultará si está visible
}
37. Guarda el proyecto y pruébalo (Control → Probar película) para ver que funciona.
38. Ahora escribiremos el código necesario para que al pulsar el otro botón
(btn_rotarEstrella) el elemento gire:
39. btn_rotarEstrella.addEventListener(MouseEvent.CLICK
, girarEstrella);
40. function girarEstrella(event):void {
41. //Para que gire, aumentamos la propiedad
rotation
42. estrellaMC.getChildAt(0).rotation+=15;
43. //Utilizamos getChildAt porque en nuestro
caso no queremos que rote todo
44. //el SWF, sólo el elemento que pusimos
dentro como un símbolo, que al ser
45. //el único hijo, está en la posición 0
}
Como puedes ver, utilizamos la propiedad rotation, para referenciarnos al objeto en
cuestión sólo es necesario escribir delante de la propiedad la variable que lo
contiene. Definimos la función que al hacer clic girará nuestro objeto.

46. Repite estos pasos para cada uno de los botones. Recuerda escribir bien los
nombres de instancia y los nombre de funciones.
47. Una vez terminado prueba la película desde Control → Probar película.

El uso de estas funciones es bastante sencillo y te ayudarán mucho en la eficiencia de
tus películas. Ten en cuenta lo que decíamos antes de las escenas.


Así, cargaremos partes de la película sólo si el usuario accede a ellas.
Unidad 18. Navegación - ActionScript (XIII)
18.9. Cargando información

En este apartado veremos cómo utilizar un cargador para recoger información de un
archivo y mostrarla en una película Flash.
Encontrarás los archivos necesarios en la carpeta ejercicios/presentacion.
Observa la línea de tiempo:

En la capa de acciones escribiremos todo el código para que funcione la película. La
capa diapositivas contiene el efecto que hace que la imagen se desvanezca para volver a
aparecer.
Ahora explicaremos cómo lo hemos hecho.
Antes que nada añadimos un stop() en el primer fotograma para detener la acción y
reanudarla más tarde con cuando pulsemos el botón.
Igualmente hemos añadido un stop() en el fotograma 11, el último. para que se detenga
la transición y espere a que se pulse de nuevo el botón.
La transición es muy sencilla. En la capa diapositivas hemos añadido un clip de película
llamado contenedor del tamaño de la película, que será donde carguemos las imágenes,
y hemos incluido dos interpolaciones de movimiento. En el fotograma 6 bajaremos la
propiedad Alfa al 0% en el Panel Propiedades. Así conseguiremos el efecto de la
transición.
Ahora que conocemos el funcionamiento veamos el código que hemos añadido en el
fotograma 1.
// FOTOGRAMA 1


stop();

var total:Number=4;
var imagenActual:Number=0;
//Utilizamos un objeto Loader para cargar las imagenes
var cargadorImagen = new Loader();
contenedor.addChild(cargadorImagen);


//Para cargar datos (texto), emplearemos un objeto URLLoader
var cargadorTexto:URLLoader = new URLLoader();
//Indicamos el formato de los datos que leerá
cargadorTexto.dataFormat=URLLoaderDataFormat.VARIABLES;
//Y la ubicación del archivo
cargadorTexto.load(new URLRequest("diapositivas.txt"));
cargadorTexto.addEventListener(Event.COMPLETE, textoCargado);

function textoCargado(ev:Event):void {
if (Event.COMPLETE) {
gotoAndPlay(6);
} else {
textoDiapositiva.descripcion_txt.text="No se ha
podido cargar el texto";
textoDiapositiva.titulo_txt.text="Error";
}
}

boton.addEventListener(MouseEvent.MOUSE_UP, siguiente);
function siguiente(event):void {
gotoAndPlay(2);


}
Las variables que vamos a utilizar son:
La variable total almacena el número total de imágenes que vamos a mostrar. En
nuestro caso, son 4.
La variable imagenActual almacenará el número de la imagen que vamos a
mostrar, la inicializamos a 1 para mostrar la primera imagen.
Tenemos que ontener datos externos, para eso hemos empleados dos objetos:
Un Loader llamado cargadorImagen, donde cargaremos los archivos de imagen.
Un URLLoader, llamado cargadorTexto, que es un objeto que nos permite extraer
datos de archivos. En nuestro caso, texto de un archivo de texto.
El Loader ya lo conocemos, y de momento sólo lo hemos añadido al MovieClip
contenedor. Vamos a centrarnos en cómo utilizamamos el URLLoader.
var cargadorTexto:URLLoader = new URLLoader();
cargadorTexto.dataFormat=URLLoaderDataFormat.VARIABLES;
Tras declararlo, debemos indicar el formato de datos, con la propiedad
cargadorTexto.dataFormat. Puede ser de tres valores:
URLLoaderDataFormat.TEXT, si el archivo que queremos cargar es todo texto, y
queremos cargarlo como tal. Esta es la opción por defecto.
URLLoaderDataFormat.BINARY, si los datos son binarios sin formato.
URLLoaderDataFormat.VARIABLES, si los datos del archivo siguen el formato de
las variables URL, cuya sintaxis sería
variable1=valor&variable2=valor&variable3=valor&variable4=valor. Es decir
separamos cada variable y su valor por el signo =. Y separamos cada par
variable=valor por el signo &.
Esta última es la opción que hemos elegido, porque aunque queremos cargar texto, lo
tenemos dividido en variables. Por lo tanto, escribimos en el archivo diapositivas.txt el
texto que queremos mostrar con el siguiente formato:
titulo1=Los mejores sándwiches
&descripcion1=En sa cuina creamos los sándwiches mas originales
y sabrosos de toda la ciudad.
&titulo2=Calidad Superior
&descripcion2=Nos cuidamos siempre de que nuestros platos
ofrezcan la máxima calidad.


&titulo3=Productos seleccionados
&descripcion3=Seleccionamos los productos uno a uno y de
distribuidores de confianza.
&titulo4=Nuestras especialidades
&descripcion4=No olvides probar nuestras especialidades en
ensaladas y postres.

Unidad 18. Navegación - ActionScript (XIV)
Por tanto, lo siguiente ha sido indicar a nuestro URLLoader cuál es el archivo que
contendrá esas variables.
cargadorTexto.load(new URLRequest("diapositivas.txt"));
cargadorTexto.addEventListener(Event.COMPLETE, textoCargado);

function textoCargado(ev:Event):void {
if (Event.COMPLETE) {
gotoAndPlay(6);
} else {
textoDiapositiva.descripcion_txt.text="No se ha
podido cargar el texto";
textoDiapositiva.titulo_txt.text="Error";
}
}

boton.addEventListener(MouseEvent.MOUSE_UP, siguiente);
function siguiente(event):void {
gotoAndPlay(2);
}


Y como ya vimos con los cargadores, hemos utilizado el evento Event.COMPLETE
para saber si se ha cargado correcta y completamente. Si no se ha cargado, mostramos
un error. Si todo es correcto, pasamos al fotograma 6.
Al final, hemos añadidio el código necesario para que al pulsar en boton vayamos al
fotograma 2.

Ahora, vamos al fotograma 6. Cada vez que se pase por aquí, cambiaremos la imagen
y el texto. Hemos elegido este fotograma porque aquí habíamos cambiado el valor de
Alffa a 0. Es decir, aquí es donde ha acabado de desvancerse la imagen y donde
empieza a cargarse la siguiente. Veamos el código que hemos puesto:
if (imagenActual==total) {
imagenActual=0;
}
imagenActual++;
//Cambiamos el texto
textoDiapositiva.titulo_txt.text=cargadorTexto.data['titulo'+imag
enActual];
textoDiapositiva.descripcion_txt.text=cargadorTexto.data['descrip
cion'+imagenActual];
//Y cambiamos la imagen
cargadorImagen.load(new URLRequest
("imagenes/imagen"+imagenActual+".jpg"));
Lo primero que hacemos es comprobar si hemos llegado a la última imagen (total), y si
es así, volvemos a la primera. Aumentamos el contador de imágenes (imagenActual++).
Ahora, tenemos que extraer los valores correspondientes del cargadorTexto. Podemos
acceder al contenido del archivo cargado con la propiedad .data. Si además ese
archivo lo forman variables, como en nuestro caso, podemos utilizar data como un array y
acceder a una variable concreta escribiendo data['nombreVariable']. También podríamos
hacerlo como una propiedad (data.nombreVariable).
En nuestro caso hemos extraído las variables con el título y la descripción y las hemos
mostrado en los textos textoDiapositiva.titulo_txt y textoDiapositiva.descripcion_txt.
Y para acabar, hemos cargado la imagen con el método load del cargadorImagen. Por
tanto, cada vez que pasemos por aquí, el cargador reemplazará la imagen que contiene.
Observa que hemos elegido unos nombres que contienen el número de imagen (tituloX
y descripcionX para las variables, e imagenes/imagenX.jpg). Esto nos facilita el trabajo,
ya que sólo tenemos que cambiar la X por el número de imagen que corresponde.


Ejercicios unidad 18: Navegación - ActionScript
Ejercicio 1: Periódico Digital

1. Abre el programa Flash CS4.
2. Haz clic en Archivo → Nuevo para crear un nuevo documento.
3. Selecciona Archivo de Flash (AS 3.0) en el diálogo que se abrirá y pulsa Aceptar.
4. Se abrirá un documento en blanco. Lo guardaremos para darle un nombre y poder
guardar nuestros progresos de vez en cuando. Para ello haz clic en Archivo →
Guardar. Dale un nombre (por ejemplo periodico), selecciona una la carpeta donde
tienes los swf de las páginas del periódico, que encontrarás en la carpeta
ejercicios/periodico y pulsa Guardar.

Ahora podrás guardar el documento siempre que quieras pulsando Ctrl + S o
haciendo clic en Archivo → Guardar.

5. Empecemos a crear el documento. Primero cambiaremos su tamaño. Haz clic
derecho en cualquier parte del área de trabajo y selecciona Propiedades del
Documento....
6. Introduce 600 en Anchura y 400 en Altura. Pulsa Aceptar para aplicar los cambios.
7. Inserta 3 nuevas capas utilizando el botón Insertar capa en la línea de tiempo.
8. Nómbralas de arriba abajo: acciones, hoja, derecha e izquierda.

En la capa acciones introduciremos el código que vamos a utilizar en la línea de
tiempo principal. La capa hoja contendrá la animación de la hoja pasándose.

En las capas derecha e izquierda introduciremos dos movieclips donde
cargaremos las páginas que querremos visualizar en cada momento.
9. Nuestro próximo paso será crear movieclips donde colocaremos las páginas
derecha e izquierda. Abre la Biblioteca, si no está ya abierta, desde Ventana →
Biblioteca y pulsa el botón Nuevo Símbolo situado al pie de esta.
10. Dale el nombre de pagina y selecciona Clip de película. Se creará el clip, pero
como no queremos introducir nada en él lo dejaremos vacío y pulsaremos Escena 1
para volver a la Escena principal.
11. Ahora introduciremos instancias del clip pagina en las capas derecha e izquierda.
Selecciona la capa derecha y arrastra el símbolo que acabamos de crear de la
Biblioteca al Escenario.
12. En el Panel Propiedades cambiaremos las coordenadas de posición, en X
escribiremos 300 y en Y 0. Así se colocará el clip en el medio del documento, que es
donde se encontrará la esquina superior izquierda de la página derecha.
13. Dale el nombre de instancia pagina_derecha.
14. Ahora crearemos una instancia para la página izquierda. Selecciona la capa
izquierda y arrastra el clip pagina sobre el Escenario.
15. En el Panel Propiedades dale las coordenadas de posición X 0 e Y 0.
16. Cambia su nombre de instancia a pagina_izquierda.


17. Ahora crearemos el movimiento de la hoja. Para ello crearemos un clip de película
que representará la hoja. Haz clic en Nuevo Símbolo (al pie de la Biblioteca) y dale
el nombre hoja. Selecciona Clip de película y pulsa el botón Aceptar.
18. Selecciona la herramienta Rectángulo y dibuja un rectángulo en el Escenario.
19. Selecciona le herramienta Selección y haz doble clic sobre el rectángulo que
acabas de crear para seleccionarlo completamente.
20. En el Panel Propiedades cambia su Ancho a 300 y su Alto a 400 . Colócalo en la
posición X 0 e Y 0.
21. Para que te sea más cómodo, puedes darle un color de releno al rectángulo.
22. Ahora crearemos la animación que recreará el movimiento de la hoja. Para ello
creamos un nuevo clip, haz clic en el botón Nuevo Símbolo y llámalo
hoja_movimiento, selecciona Clip de película y pulsa Aceptar.
23. Entraremos en el modo de edición del nuevo clip. Arrastra el símbolo hoja que
acabamos de crear al Escenario.
24. Primero crearemos la animación que se reproducirá cuando pasemos a la hoja
siguiente. Así que la posición inicial de la página será en la parte de la derecha.
Cambiamos la posición desde el Panel Propiedades a X 0 e Y 0.
25. Y le damos al símbolo el nombre de instancia pagina. En este clip cargaremos las
páginas para que de la sensación de que estamos pasando las hojas.
26. Nos colocamos en el fotograma 2 y creamos un nuevo fotograma clave pulsando
F6. Dejaremos el fotograma 1 libre para detener la película ahí y avanzar al
fotograma 2 más tarde para iniciar la animación.
27. Nos colocamos en el fotograma 41 y creamos otro fotograma clave (F6), aquí
terminará la animación de la hoja.
28. En el fotograma 41 situaremos el símbolo pagina en las coordenadas X -300 e Y 0.
Este sería el punto final de la animación, con la hoja totalmente pasada.
29. Sobre la línea de tiempo, hacemos clic derecho, y en el menú contextual elegimos
Crear interpolación clásica. Hemos creado la interpolación.
30. Ahora crearemos el punto intermedio. Nos colocamos en el fotograma 21 y creamos
un fotograma clave (de nuevo F6).
31. En este fotograma, seleccionamos el símbolo pagina y modificamos las
coordenadas del símbolo en el Panel Propiedades a X 0 e Y 0, y su ancho W a 1
px.
32. Ya tenemos la primera animación de la hoja. Ahora crearemos la animación de
simulará que pasamos a la hoja anterior. Para ello creamos un nuevo fotograma
clave en la posición 42 (que será la posición inicial de la hoja) y otro en el
fotograma 82 (la posición final).
33. Igual que antes, colocamos la hoja en su sitio en el fotograma 82, esto es, en la
parte derecha. Para ello, selecciona el fotograma y en él haz clic en el símbolo.
Modifica las coordenadas del Panel Propiedades a X 0 e Y 0.
34. En la línea de tiempo, hacemos clic derecho en cualquier fotograma intermedio (por
ejemplo, 60) y seleccionamos Crear interpolación clásica.
35. Ahora crearemos un fotograma clave en el fotograma 62, donde crearemos la
posición intermedia.
36. Modifica las coordenadas a X 0 e Y 0 en el Panel Propiedades, y el ancho W a 1.


37. Ya tenemos la animación creada. Mejorémosla ajustando la aceleración de ésta.
Para ello, selecciona un fotograma intermedio de la primera animación (por ejemplo,
10) y en el Panel Propiedades escribe -100 en el campo Aceleración.
38. Haz lo mismo para la tercera animación (en el fotograma 50, por ejemplo).
39. Para la segunda y cuarta animación (fotogramas 30 y 70, por ejemplo) escribe 100
en Aceleración.

Ahora sí hemos terminado.
40. Ahora crearemos una nueva capa donde introduciremos las acciones. Pulsa el botón
Insertar capa y llámala acciones.
41. Crea fotogramas clave en las posiciones 1, 2, 21, 41, 42, 62 y 82. O lo que es lo
mismo, en las mismas posiciones en las que encontraras fotogramas claves en la
capa de la animación.
42. Abre el Panel Acciones desde Ventana → Acciones selecciona el fotograma 1 y
escribe en el Panel Acciones stop();. Haz lo mismo en los fotogramas 41 y 82.
Esto es para que la animación se detenga en el principio del todo y después de que
realice la pasada de hoja.
43. Crearemos las etiquetas de fotograma que indicaba el enunciado. Selecciona el
fotograma 2 de la capa donde tienes la animación y escribe en el Panel
Propiedades siguiente.
44. Le damos la etiqueta anterior al fotograma 42 del mismo modo.
45. Ahora sólo faltará introducir el código para que se carguen las películas. Pero antes
colocaremos el clip que hemos creado en la película principal. Haz clic en Escena 1.
46. Ahora selecciona la capa hoja y arrastra el clip de película hoja_movimiento al
Escenario.
47. Modifica sus coordenadas en el Panel Propiedades y colócalo en X 300 e Y 0.
48. Dale el nombre de instancia hoja_movimiento para poder referirnos a él desde el
código.
49. Ahora pasaremos a introducir el código que necesitamos. Sitúate en el fotograma 1
de la capa acciones en la película principal y abre el Panel Acciones (F9).
50. Escribe lo siguiente:
51. stop();
52.
53. addEventListener("irSiguiente",irSiguiente);
54. function irSiguiente(event) {
55. hoja_movimiento.gotoAndPlay('siguiente');
56. }
57.
58. addEventListener("irAnterior",irAnterior);
59. function irAnterior(event) {


60. hoja_movimiento.gotoAndPlay('anterior');
}
Como se comentaba en el enunciado, al pulsar en los botones de las páginas, se
producen los eventos "irAnterior" e "irSiguiente", porque así lo hemos programado
en las páginas. Lo que haremos será escuchar esos eventos, y cuando se
produzcan, ir a la etiqueta correspondiende de hoja_movimiento para simular el
movimiento.
61. Haz doble clic sobre el símbolo hoja_movimiento para acceder a su línea de
tiempo.
62. En el primer fotograma de la capa acciones, introduce el siguiente código:
63. stop();
64.
65. var vista:Number=0;
66. var
hojasIzquierda:Array=["","contenido_actualidad.swf","cont
enido_deportes.swf",
67.
"contenido_naturaleza.swf","contenido_ultima.swf"];
68. var
hojasDerecha:Array=["contenido_portada.swf","contenido_ci
encia.swf",

"contenido_espectaculos.swf","contenido_politica.swf",""]
;
Aquí hemos parado la película y hemos definido las variables que utilizaremos en el
resto de la película.

En la variable vista almacenamos el momento en el que nos encontramos, y en los
arrays hojasIzquierda y hojasDerecha introducimos los archivos SWF que
deberemos cargar. Para ello hemos tenido en cuenta la siguiente tabla:
vista hojasIzquierda hojasDerecha
0 portada
1 actualidad ciencia
2 deportes espectaculos
3 naturaleza politica


4 ultima


Acude a esta tabla para entender los siguientes fragmentos de código.
69. Como el código para cargar los archivos SWF va a ser repetitivo, lo simplificaremos
creando la siguiente función:
70. function cargarSWF(enPagina:MovieClip,
archivo:String) {
71. if(archivo!="") {
72. enPagina.visible = true;
73. var loader:Loader;
74. loader = new Loader();
75. loader.load(new
URLRequest(archivo));
76.
loader.contentLoaderInfo.addEventListener(Event.COM
PLETE, insertar);
77. function insertar(event):void {
78. enPagina.addChild(loader);
79. }
80. } else {
81. enPagina.visible=false;
82. }
}
Lo que hace esta función es utilizar un objeto Loader para cargar un archivo que
indicamos en el parámetro archivo y mostrarlo en la página que le indiquemos en
enPagina. Además, si archivo está vacío, oculta la página.
83. Por último, en este mismo fotograma, cargamos la primerá página para que no
quede la página vacía. Lo ahcemos llamando a la función que hemos definido:
cargarSWF(pagina, hojasDerecha[vista]);
Con esto haremos que en el símbolo pagina (que se encuentra sobre los símbolos
pagina_izquierda y pagina_derecha) se cargue la primera hoja del periódico.
Recuerda que la variable vista todavía tiene el valor 0.


84. Selecciona el fotograma 2 y escribe lo siguiente en el Panel Acciones:
85. with (parent) {
86. cargarSWF(this.parent.pagina_derecha,
hojasDerecha[vista+1]);
87. }
cargarSWF(pagina, hojasDerecha[vista]);
Observa el uso de parent para acceder al símbolo pagina_derecha. Lo empleamos
porque este símbolo no está dentro del actual (hoja_movimento, a la que nos
referimos como this), si no en el nivel superior, en la película general, que es el
elemento padre (parent).

Por tanto, lo que que hacemos es cargar el contenido de la hoja de periódico que se
va a ver por detrás de hoja_movimiento en pagina_derecha cunado pasemos la
página.

También cargamos en el símbolo pagina la hoja actual.
88. Selecciona el fotograma 21 y escribe lo siguiente en el Panel Acciones:
89. cargarSWF(pagina, hojasIzquierda[vista+1]);
vista++;
En este punto el símbolo pagina se encuentra reducido tanto que es invisible.
Aprovechamos y cambiamos el contenido con la siguiente hoja (que se encontrará
almacenada en la posición vista+1).

Aumentamos la variable vista en 1 con vista++; y listo.
90. Selecciona el fotograma 41 y escribe lo siguiente en el Panel Acciones después de
la línea stop();
91. stop();
92. with (parent) {
93. cargarSWF(this.parent.pagina_izquierda,
hojasIzquierda[vista]);
}


Aquí actualizamos el contenido del símbolo pagina_izquierda por si decidiésemos
retroceder en el periódico. Así cuando le demos la vuelta a la página se verá el
contenido correcto.
94. El código en el resto de fotogramas claves es idéntico al que hemos visto (pues la
acción es similar) pero disminuyendo la variable vista a cada pasada de página y
permutando las matrices hojasIzquierda y hojasDerecha.

El código en el fotograma 42 es:
95. with (parent) {
96. cargarSWF(this.parent.pagina_izquierda,
hojasIzquierda[vista-1]);
97. }
98.
cargarSWF(pagina, hojasIzquierda[vista]);
El código en el fotograma 62 es:
cargarSWF(pagina, hojasDerecha[vista-1]);
vista--;
Y el código en el fotograma 82 es:
stop();
with (parent){
cargarSWF(this.parent.pagina_derecha,
hojasDerecha[vista]);
}
Prueba evaluativa unidad 18: Navegación - ActionScript
Sólo una respuesta es válida por pregunta. Haz clic en la respuesta que consideres
correcta.
Contesta todas las preguntas y haz clic en el botón Corregir para ver la solución.
Si pulsas Restablecer podrás repetir la evaluación.
1. El evento "click" al pulsar un botón se ejecuta nada más apretar el botón .


a) Verdadero
b) Falso
2. Las funciones gotoAndPlay() y gotoAndStop() actuarán del mismo modo si indicamos
un número de fotograma o si, por el contrario, utilizamos una etiqueta de fotograma.
a) Verdadero
b) Falso
3. prevFrame() hace que el cabezal de reproducción avance un fotograma.
a) Verdadero
b) Falso
4. Cuando estamos referenciando objetos, la propiedad parent nos inidica el contenedor
al que pertenece.
a) Verdadero
b) Falso
5. Una variable de tipo Boolean puede almacenar:
a) Cualquier tipo de número.
b) Verdadero o Falso .
c) Una cadena de caracteres alfanuméricos.
6. Las variables declaradas en la línea de tiempo pueden utilizarse en todo el documento.
a) Verdadero
b) Falso
7. Puedes crear funciones con tantos parámetros como quieras .
a) Verdadero
b) Falso
8. Todos los objetos que se muestran están en un contenedor.
a) Verdadero
b) Falso
9. Para añadir un elemento hijo a un contenedor, podemmos emplear el método...
a) addChild()
b) setChildIndex()


c) addChildrensAt()
10. Si queremos cargar y mostrar el contenido de un archivo de texto, utilizaremos un
objeto del tipo...
a) MovieClip
b) Loader
c) URLLoader





















Unidad 19. Formularios - ActionScript (I)
19.1. Los Elementos de Formulario

En el uso de formularios podremos utilizar muchos elementos. Pero los principales
serán siempre los mismos: cajas de texto y botones.
De vez en cuando utilizaremos otros elementos como los radioButtons, checkBoxes,
comboBoxes o listBoxes. Veremos cómo utilizarlos y sacarles el mayor partido.
Flash ofrece estos objetos como componentes. Para acceder a ellos sólo tendrás que
abrir el Panel Componentes desde Ventana → Componentes.
Una vez abierto el panel haz clic en User Interface para desplegar sus elementos y
verás todos los componentes que podrás utilizar.



Incluso para la introducción de texto en formularios es aconsejable el uso de
componentes, pues veremos que poseen propiedades que las simples cajas de texto no
tienen.
Para utilizar alguno de estos componentes basta con arrastrarlo del panel al escenario,
o puedes arrastrarlo a la biblioteca para utilizarlo más tarde.
En cualquier caso, cuando hayamos añadido el componente a nuestra película
deberemos darle un nombre de instancia para poder acceder a él desde el código y
configurar sus opciones en el Panel Propiedades y en el panel Inspector de
Componentes:






















Unidad 19. Formularios - ActionScript (II)
Veamos cuales son las opciones para los diferentes componentes:
TextInput (Introducción de texto):
editable: true o false. Permite que el texto se pueda editar o no.
password: true o false. Oculta el contenido del texto mostrándose un asterisco por
carácter.
text: Indica el texto inicial de la caja.
TextArea (Área de texto):
editable: true o false. Permite que el texto se pueda editar o no.
html: true o false. Permite que se acepte contenido HTML dentro de la caja de
texto. Propiedad muy útil para incluir enlaces en el texto.
text: Indica el texto inicial de la caja.
wordWrap: true o false. Permite que se pueda realizar un desplazamiento del texto
de arriba abajo. En caso de que no se permita (false) cuando el texto sobre pase el
área del componente aparecerá una barra de desplazamiento que permitirá mover el
texto de izquierda a derecha.
Button (Botón):
icon: Añade un icono al botón. Para insertar un icono deberemos crear un gráfico o
clip de película y guardarlo en la Biblioteca. Una vez allí lo seleccionamos y
haciendo clic derecho sobre él, seleccionamos Vinculación. Marcamos la casilla
Exportar para ActionScript en el cuadro de diálogo que aparecerá y le damos un
nombre en Identificador. Este nombre es el que deberemos escribir en el campo
icon del componente botón. Ni el botón ni el símbolo se ajustará al tamaño del otro,
así que deberemos modificar sus tamaños para que el icono no sobresalga del
botón.
label: Texto que se leerá en el botón.
labelPlacement: left, right, top o bottom. Indica la posición de la etiqueta de texto
en caso de que se utilice junto a un icono. Respectivamente, izquierda, derecha,
arriba y abajo.
selected: true o false. Indica si el botón se encuentra seleccionado.
toggle: true o false. Cuando se encuentra a true hace que el botón pueda tomar
dos posiciones, presionado y no presionado.
RadioButton (Botón de opción):
data: Especifica los datos que se asociarán al RadioButton. La propiedad data
puede ser cualquier tipo de datos. Podemos acceder a esta propiedad a través de
código para ver que contiene.


groupName: Nombre del grupo. En un grupo de botones de opción sólo uno de ello
puede estar seleccionado. Definiremos este grupo mediante esta propiedad. Todos
los botones que tengan el mismo nombre en groupName pertenecerán al mismo
grupo.
label: Texto que se leerá al lado del botón.
labelPlacement: left, right, top o bottom. Indica la posición de la etiqueta de texto
respecto al botón. Respectivamente, izquierda, derecha, arriba y abajo.
selected: true o false. Indica si el botón se haya seleccionado o no. De nuevo, en
un mismo grupo sólo un botón de opción puede estar seleccionado.
Unidad 19. Formularios - ActionScript (III)
CheckBox (Casilla de verificación):
label: Texto que se leerá al lado de la casilla.
labelPlacement: left, right, top o bottom. Indica la posición de la etiqueta de texto
respecto a la casilla. Respectivamente, izquierda, derecha, arriba y abajo.
selected: true o false. Indica si la casilla de verificación se haya seleccionada.
ComboBox (Lista desplegable):
data: Matriz donde determinaremos el valor qué devolverá el componente al
seleccionar determinada posición.
editable: true o false. Permite la edición del campo. Mediante ActionScript podemos
hacer que se añadan nuevos elementos a la lista.
labels: Matriz donde determinaremos el nombre de los elementos de la lista. Estos
elementos se corresponderán uno a uno a los valores de la matriz introducida en
data. Para ambas propiedades se abrirá el siguiente cuadro de diálogo:






Desde aquí podremos añadir o quitar elementos utilizando los botones y . O
alterar el orden de éstos subiéndolos o bajándolos en la lista con los botones y .

rowCount: Número máximo de elementos visibles en la lista. Si este número es
superado por los elementos se añadirá una barra de desplazamiento.
List (Lista):
data: Matriz donde determinaremos el valor qué devolverá el componente al
seleccionar determinada posición.
labels: Matriz donde determinaremos el nombre de los elementos de la lista. Estos
elementos se corresponderán uno a uno a los valores de la matriz introducida en
data. Para ambas propiedades se abrirá el mismo cuadro de diálogo visto para el
ComboBox.
multipleSelection: true o false. Permite la selección múltiple de elementos
manteniendo la tecla Ctrl presionada. También es posible seleccionar un rango de
elementos seleccionando uno de ellos y pulsando la tecla Shift mientras
seleccionamos otro diferente, todos los elementos intermedios resultarán también
seleccionados.
rowHeight: Número máximo de filas visibles en la lista. Si este número es superado
por los elementos se añadirá una barra de desplazamiento.
NumericStepper (Contador numérico):
maximum: Establece el número máximo del contador.
minimum: Establece el número mínimo del contador.


stepSize: Establece el intervalo en el que se aumenta o disminuye el número del
campo al pulsar los botones del componente.
value: Valor inicial del campo.
Nota: Todas las propiedades mencionadas para cada uno de los componentes son
accesibles a través de ActionScript escribiendo el nombre de instancia del componente
seguido de un punto y el nombre de la propiedad:
miBoton.label = "Haz clic aquí";
Unidad 19. Formularios - ActionScript (IV)
19.2. Botones de Formulario
En los formularios, normalmente, incluiremos dos botones: Enviar y Limpiar.
Imagina que llamamos al componente botón de limpiar btn_borrar, su código asociado
sería sencillo:
btn_borrar.addEventListener(MouseEvent.CLICK,boton);

function boton(event:MouseEvent):void{
nombre.text = "";
email.text = "";
mensaje.text = "";
}
Como puedes ver, hemos creado un escuchador para btn_borrar. Cuando se activa
simplemente vaciamos el contenido de los campos de texto que queramos.
También podríamos iniciar los campos de otra forma:
nombre.text = "Escribe aquí tu nombre";
email.text = "Escribe aquí tu e-mail";
mensaje.text = "Escribe aquí tu mensaje";
En definitiva, puedes tratar los campos como quieras.


Para el botón de envío deberás asociar un escuchador del mismo modo, pero el código
que irá incluido en él deberá de validar los datos y enviarlos, que será lo que veamos en el
siguiente apartado.
txt_aviso.text="Introduce tu nombre"; //Indicamso el
error
return false; //Devolvemos falso
} else if (!chk_condiciones.selected) {
//Comprobamos que la casilla esté marcada
chk_condiciones.stage.focus = chk_condiciones;
txt_aviso.text="Debes aceptar las condiciones";
return false;
} else {
if (esNumero(txt_edad.text)) { //Comprobamos si es un
número
if (Number(txt_edad.text)<18) { //comprobamos
si es mayor
txt_edad.stage.focus=txt_edad;
txt_aviso.text="Tienes que ser mayor
de edad";
return false;
} else {
//Si llega hasta aquí, es que todo se
ha validado
//Devolvemos true
return true;
}
} else {
txt_edad.stage.focus=txt_edad;
txt_aviso.text="Introduce tu edad";
return false;
}

}


}
Como se ve, comprobamos si el campo txt_nombre tiene texto, si la casilla
chk_condiciones está marcada, y si txt_edad es un número mayor que 18.
A esta función, la llamaríamos al pulsar el botón de envío (btn_enviar). Lo que hará
será validar, y si el resultado es correcto, llamará a la función que envía los datos
(enviarDatos) que veremos en el próximo apartado.
btn_enviar.addEventListener('click', validaryEnviar);
function validaryEnviar(event):void {
if (validarDatos()) { //validamos
enviarDatos(); //Y si es True, enviamos
}
}
Unidad 19. Formularios - ActionScript (VI)
19.4. Envío de formularios
Vamos a crear el código estándar que nos permite enviar el formulario.
Antes de enviar los datos, hemos validado los datos como vimos en el punto anterior.
Lo normal, tras rellenar un formulario en una página web, es que esta los envíe a una
página dinámica, en PHP o ASP. Esta página se encargará de recoger los datos, volverlos
a validar, y hacer lo que corresponda con ellos, como guardarlos en una base de datos, o
enviar un correo. Con Flash haremos lo mismo. En nuestro ejemplo, enviaremos los datos
a enviarCorreo.php.
Vamos a utilizar tres objetos:
Un objeto URLVariables. Este objeto nos permite componer cómodamente variables
de URL, con el formato var1=valor1&var2=valor2&var3=valor3...
Un objeto URLRequest. Nos permite configurar la dirección web de envío, cómo se
enviarán los datos y asignarle esos datos con un objeto URLVariables.
Un objeto URLLoader. Aunque normalmente lo empleamos para obtener
información de archivos, también nos sirve para enviar información al archivo
indicado como un URLRequest.
Veamos el código:
//Función que se ejecuta al presionar el botón botón de envío
function enviarDatos(event:MouseEvent):void {


System.useCodepage = true;//Esta línea coge la página de
carácteres
//del sistema, para mostrarlos
correctamente
//Utilizamos un objeto URLVariables para guardar los datos
de nuestros campos.
var datosFormulario:URLVariables = new URLVariables();
//Definimos los campos y les agregamos el valor de las cajas
de texto.
datosFormulario.nombre = txtNombre.text;
datosFormulario.apellidos = txtApellidos.text;
datosFormulario.email = txtEmail.text;

//Con un obj. URLRequest generamos la URL a la que se
envíand los datos
var paginaEnvio:URLRequest=new
URLRequest("enviarCorreo.php");
//Indicamos el método de envío y le cargamos misVariables.
paginaEnvio.method=URLRequestMethod.POST;
paginaEnvio.data=misVariables;

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


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


btn_enviar.addEventListener('click', validaryEnviar);
function validaryEnviar(event):void {
if (validarDatos()) { //validamos
enviarDatos(); //Y si es True, enviamos
}
}
Podemos ver que para crear las variables en el objeto URLVariables, no tenemos más
que escribir el nombre que le queremos dar como una propiedad, y asignarle el valor que
queremos guardar en la variable:
datosFormulario.nombre = txtNombre.text;
datosFormulario.apellidos = txtApellidos.text;
datosFormulario.email = txtEmail.text;
Al objeto URLRequest, le indicamos el nombre de archivo (nuestra página), el método
de envio (method), como en los formularios HTML, y los datos (data) que hemos
configurado en el objeto URLVariables.
var paginaEnvio:URLRequest=new
URLRequest("enviarCorreo.php");


paginaEnvio.method=URLRequestMethod.POST;
paginaEnvio.data=misVariables;
Y por último utilizamos el objeto URLLoader para comunicarnos con el archivo cuya
ubicación se indica en el objeto URLRequest. Cargamos la información hacia él, y
comprobamos si se ha completado el envío o se ha producido un error, para avisar al
usuario.
El script enviarCorreo.php se encargaría de recibir los datos, generar el correo y
enviarlo.
Nota: Para poder ejecutar una página dinámica, como la que envía el correo en PHP,
hay que tener instalado un servidor web en el equipo. Por lo que si no lo tienes, no se
enviará el correo, aunque tampoco dará ningún error si se encuentra el archivo.
Unidad 19. Formularios - ActionScript (VII)
19.5. Otras propiedades de los Formularios
Además de todo lo que hemos visto existen, también, otras propiedades bastante
interesantes.
Por ejemplo, el orden de tabulación. Esta propiedad establece como actúa el cursor a
las repetidas pulsaciones de la tecla Tabulador.
Podemos alterar el orden utilizando la propiedad tabIndex. Esta propiedad indicará el
orden en el que se desplazará el cursor cada vez que pulsemos el Tabulador:
nombre_txt.tabIndex = 1;
mail_txt.tabIndex = 2;
mensaje_txt.tabIndex = 3;
reset_btn.tabIndex = 4;
submit_btn.tabIndex = 5;
También podemos establecer el botón predeterminado del formulario para que
cuando se pulse la tecla Intro sea como si hiciésemos clic en él. Escribe la siguiente línea:
//En este caso, debemos de importar la clase para que la
reconozca


import fl.managers.FocusManager;
var fm:FocusManager = new FocusManager(this);
fm.defaultButton = submit_btn;
De esta forma haremos que el botón predeterminado sea submit_btn. En este caso,
this se refiere a la película principal, pero podemos indicar el contenedor que contenga a
nuestro formulario.

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

Unidad 19. Formularios - ActionScript (VIII)
19.6. Recuperando información XML
En este apartado veremos cómo recuperar información de un archivo XML.
XML es un lenguaje de marcas estructuradas, en el que la información se clasifica en
elementos y sub elementos, con propiedades y atributos, utilizando etiquetas, de forma
muy similar al HTML. De hecho, existe XHTML, que no es más que HTML que cumple las
reglas estrictas del XML.
Por ejemplo, nosotros vamos a trabajar con las siguiente información XML que tenemos
en un archivo, llamado comentarios.xml:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<listadoComentarios>
<comentario>
<autor>josé</autor>
<email>jose@correo.com</email>
<mensaje>estoy escribiendo un mensaje</mensaje>
</comentario>
<comentario>
<autor>amparo</autor>
<email>amparo@correo.com</email>
<mensaje>este mensaje también se publicará</mensaje>
</comentario>
<comentario>
<autor>miguel</autor>
<email>miguel@correo.com</email>
<mensaje>mensaje de prueba</mensaje>
</comentario>


<comentario>
<autor>cristina</autor>
<email>cristina@correo.com</email>
<mensaje>esto funciona!</mensaje>
</comentario>
</listadoComentarios>
En Flash tenemos el elemento XML. En él almacenamos la información con la
estructura XML. Este objeto, nos permite recorrer esta información de forma
organizada.
A un elemento XML le podemos asignar directamente la información como si fuera un
String, pero sin encerrarla entre comillas. Por ejemplo:
var miXML:XML =
<pedido>
<articulo id='1' cantidad='1'>
<nombre>Raqueta Tenis</nombre>
<precio>33.95</precio>
</articulo>
<articulo id='2' cantidad='3'>
<nombre>Pelota Tenis</nombre>
<precio>4.45</precio>
</articulo>
</pedido>;
Pero en nuestro ejemplo, la información XML la tenemos en un archivo. Como ya
vimos, para cargar información de archivos externos necesitamos un elemento
URLLoader.
Unidad 19. Formularios - ActionScript (IX)
Vamos a ver cómo hemos utilizado la información del archivo utilizando estos dos
elementos:
//Para trabajar con datos XML utilizamos un objeto XML
var datosXML:XML = new XML();
datosXML.ignoreWhite = true; //Ignora elementos en blanco
//Para obtener información de un archivo, utilizamos un URLLoader
var cargadorXML:URLLoader = new URLLoader();
cargadorXML.load(new URLRequest('comentarios.xml'));
//Utilizamos el evento complete para no trabajar hasta que
//se haya cargado completamente
cargadorXML.addEventListener("complete", archivoCargado);
function archivoCargado(ev:Event):void {
comentarios_text.text="";
//Convertimos la info leída a XML y se la asignamos al
objeto XML


datosXML=XML(cargadorXML.data);
var cadena:String;
//Con este bucle, reccoremos todos los elementos
for (var elemento:String in datosXML.comentario) {
//Para cada elemento, cremos una cadena de texto y la
mostramos
cadena="<a
href=\"mailto:"+datosXML.comentario.email[elemento]+"\">"+
datosXML.comentario.autor[elemento]+"</a>: <span
class=\"mensaje\">"+

datosXML.comentario.mensaje[elemento]+"</span><br>\n";
comentarios_text.appendText(cadena);
}
}
Comenzamos declarando el objeto XML, al que hemos llamado datosXML porque es lo
que contendrá. Como todo objeto, tiene una serie de propieades que no vamos a detallar.
Hemos utilizado la propiedad ignoreWhitespace, que ignorará aquellos campos que
estén en blanco y así no tendremos que preocuparnos por posibles errores.
A continuación, extraemos la información del archivo, para lo que hemos utilizado un
objeto URLLoader, al que hemos llamado cargadorXML. En su método load le
indicamos el archivo a cargar. Además, como veníamos haciendo, para no continuar con
el trabajando hasta que no se haya terminado de cargar, utilizamos el evento complete.
En él, trataremos la información.
Llegados a este punto, tenemos la información cargada en la propiedad .data del
cargador. Como no hemos indicado otra cosa, se ha cargado todo el archivo como texto.
Utilizamos la función XML() para convertirlo a información XML, y se la asignamos a
nuestro objeto XML:
datosXML = XML(cargadorXML.data);
Ahora, ya tenemos datosXML con toda la información. Con este objeto es sencillo
acceder a ella, listarla, etc. En nuestro ejemplo, si queremos acceder al primer email
(posición 0), lo podemos hacer escribiendo datosXML.comentario.email[0].
Basándonos en eso, hemos echo un bucle for para recorrer todos los elementos, e ir
construyendo la cadena de texto que mostramos en la caja de texto.
Esta forma requiere que conozcamos la estructura del archivo, saber que se divide en
etiquetas <comentario>y que dentro de ella tenemos la etiqueta <email>.
Utilizando los índices, podemos acceder a los distintos elementos de la jerarquía. Por
ejemplo:


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

Haremos referencia a este mismo ejemplo al final del tema. Si quieres probarlo,
encontrarás el archivo XML en la carpeta ejercicios/cargarXMLyCSS. Recuerda, que
para poder probarlo antes hay que guardarlo.
Unidad 19. Formularios - ActionScript (X)
19.7. HTML y CSS en cajas de texto
Si recordamos el ejemplo anterior, tras mostrar el contenido del XML, obteníamos el
siguiente texto en comentarios_text, una caja de texto:
<a href="mailto:ana@correo.com">ana</a>: <span
class="mensaje">si actualizo aquí se verá en otra
ventana?</span>
<br>
<a href="mailto:jesus@correo.com">jesús</a>: <span
class="mensaje">pues ya estamos todos</span>
<br>
<a href="mailto:emilio@correo.com">emilio</a>: <span
class="mensaje">yo también me apunto</span>
<br>
<a href="mailto:david@correo.com">david</a>: <span
class="mensaje">bien, pero trae algo para cenar, no tengo nada en
la nevera</span>
<br>


Pero lo normal es que si escribimos código HTML es porque queremos que se vea con
un determinado formato, no las etiquetas HTML.
Para que Flash tome el contenido como HTML, en vez de utilizar la propiedad
comentarios_text.text empleamos comentarios_text.htmlText para establecer el texto.
Pero no sólo queremos ocultar las etiquetas, queremos formatear el texto debidamente
utilizando la siguiente hoja de etilos, que tenemos en el archivo estilo_comentarios.css:
.mensaje {
font-style: italic;
color: #2C578F;
}
a {
font-weight: bold;
color: #CF406E;
}
Podemos distinguir dos estilos: uno aplicado a los elementos con la clase mensaje
(class="mensaje") y otro aplicado a lso enlaces (<a href...).
Como siempre, e independientemente de para qué lo usemos, cargamos la información
del archivo con un objeto URLLoader, y preparamos el evento complete, para utilizar los
datos cuando estén listos:
var cargadorCSS:URLLoader=new URLLoader();
cargadorCSS.load(new URLRequest('comentarios.css'));
cargadorCSS.addEventListener('complete', estiloCargado)
El objeto que nos permite utilizar las propiedades CSS es del tipo StyleSheet. Lo
declaramos, y cuando el cargador tenga los datos listos es su propiedad .data, se los
asignamos a la hoja de estilo con su método parseCSS. Y para acabar, con la propiedad
styleSheet de la caja de texto indicamos que usará nuestra hoja.
var miHojaEstilo:StyleSheet = new StyleSheet();
function estiloCargado(event):void {
//Convertimos los datos cargados
miHojaEstilo.parseCSS(cargadorCSS.data);
//E indicamos a la caja de texto que use esta hoja
comentarios_text.styleSheet = miHojaEstilo;
};


Esto debemos de realizarlo antes de rellenar la caja de texto con HTML, ya que
flash no trata igual el HTML si no tiene una hoja de estilo asociada.
Si queremos podemos cambiar la propiedad para utilizar otra hoja de estilo. O
aprovechando las funciones y objetos defininidos, podemos crear un botón para que
cargue una nueva hoja:
btn.addEventListener('click', cambiarHoja);
function cambiarHoja(event) {
cargadorCSS.load(new URLRequest('comentarios2.css'));
}
Como el cargador ya tiene asociado el evento complete, se volverá a ejecutar la funcón
estiloCargado asignando el nuevo estilo.
Ejercicios unidad 19: Formularios - ActionScript
Ejercicio 1: Formulario
Deberás reproducir un formulario Flash:
También deberás establecer el orden de tabulación de los objetos y el botón por
defecto.
Además, deberás darle funcionalidad al botón Reset y Enviar. El primero limpiando los
datos del formulario y el segundo recogiéndolos validándolos y enviándolos a un archivo
php.
El validador del email deberá comprobar que la dirección esta correctamente escrita
(para ello utiliza función indexOf y lastIndexOf).



Ayuda ejercicios unidad 19: Formularios - ActionScript
Ejercicio 1: Formulario
1. Abre el programa Flash CS4.


2. Crea un nuevo documento haciendo clic en Archivo → Nuevo.
3. Selecciona Documento de Flash en el diálogo que se abrirá y pulsa Aceptar.
4. Se abrirá un documento en blanco. Lo guardaremos para darle un nombre y poder
guardar nuestros progresos de vez en cuando. Para ello haz clic en Archivo →
Guardar. Dale un nombre, selecciona una carpeta y pulsa Guardar.

Ahora podrás guardar el documento siempre que quieras pulsando Ctrl + S o
haciendo clic en Archivo → Guardar.
5. Primero insertaremos los elementos de formulario que vamos a utilizar, para ello
antes tendremos que abrir el Panel Componentes desde Ventana →
Componentes.
6. Haz clic sobre el elemento User Inteface y arrastra a la Biblioteca los siguientes
elementos: Button, CheckBox, ComboBox, Label, RadioButton y TextInput.
7. Ahora que ya tenemos los elementos que necesitaremos vamos a crear instancias
de ellos en el Escenario. Arrastra un elemento TextInput y un Label al Escenario.
8. En el Panel Inspector de Componentes (Ventana -- Inspector de Componentes)
modificaremos el campo text de Label a Nombre:. Le daremos a TextInput el
nombre de instancia nombre_txt.
9. Arrastramos otro TextInput y un Label al Escenario, en el Inspector de
Componentes modificamos el campo text de Label a Apellidos: y le damos a
TextInput el nombre de instancia apellidos_txt.
10. Arrastramos otro TextInput y un Label al Escenario, en el Inspector de
Componentes modificamos el campo text de Label a E-mail: y le damos a
TextInput el nombre de instancia mail_txt.
11. Arrastramos un elemento ComboBox al Escenario, en el Inspector de
Componentes modificamos el campo data y añadimos la siguiente lista de
elementos:
12. word2007
13. excel2007
14. access2007
15. powerp2007
outlook2007
16. En el campo labels introduciremos la siguiente lista de elementos:
17. Microsoft Word 2007
18. Microsoft Excel 2007
19. Microsoft Access 2007
20. Microsoft PowerPoint 2007


Microsoft Outlook 2007
21. Le damos el nombre de instancia producto_cmb.
22. Arrastramos de la Biblioteca tres componentes RadioButton al Escenario, en el
Panel Parámetros les daremos los siguientes valores:
23. Botón de opción 1:
24. nombre de instancia: buscadores_rdo
25. groupName=encontrar
26. label= Buscadores
27. selected=true
28. value=buscadores
29.
30. Botón de opción 2:
31. nombre de instancia: publicidad_rdo
32. groupName=encontrar
33. label= Publicidad
34. selected=false
35. value=publicidad
36.
37. Botón de opción 3:
38. nombre de instancia: otros_rdo
39. groupName=encontrar
40. label= Otros:
41. selected=false
value=
42. Arrastramos un componente TextInput que situaremos a la derecha del botón de
opción Otros, en el Inspector de Componentes le cambiaremos el campo editable
a false y le daremos el nombre de instancia otros_txt.
43. Arrastramos un componente CheckBox al Escenario, en el Inspector de
Componentes cambia el campo label a Desea recibir información de nuestras
novedades, y el campo selected a true.


44. Dale el nombre de instancia info_chk.
45. Arrastra dos componentes Button al Escenario, en el Inspector de Componentes
dale a uno el valor Reset en label y el nombre de instancia reset_btn. Al otro
llámale enviar_btn y modifica el campo label a Enviar.
46. Ya tenemos todos los objetos de formulario en la película. Selecciona la herramienta
Transformación Libre y modifica los anchos de aquellos elementos que, o bien
no se puedan leer completamente, o necesiten más espacio (como los campos
apellidos, email y productos).
47. Una vez tengas el formulario entero haz clic sobre la herramienta Selección y
emplaza los objetos de manera correcta.
48. Ahora pasaremos a crear las acciones. Para ello creamos una nueva capa haciendo
clic en el botón Insertar capa en la línea de tiempos y la llamamos acciones.
49. Seleccionamos el fotograma 1 de la capa acciones y abrimos el Panel Acciones
(Ventana → Acciones).
50. Al principio del todo escribimos:
51. stop();
System.useCodepage = true;
Paramos la animación en la primera línea, no necesitamos que haga nada más
porque no existen más fotogramas. Si no lo hiciésemos estaría reproduciéndose
todo el rato el fotograma 1 una vez detrás de otra.

Con la segunda línea hacemos que Flash utilice la página de códigos tradicional del
sistema operativo en el que se ejecuta el reproductor para que los acentos y eñes
que escribamos se envíen correctamente al archivo php que enviará el formulario
por mail.
52. Ahora escribe lo siguiente:
53. nombre_txt.tabIndex=1;
54. apellidos_txt.tabIndex=2;
55. mail_txt.tabIndex=3;
56. producto_cmb.tabIndex=4;
57. buscadores_rdo.tabIndex=5;
58. publicidad_rdo.tabIndex=6;
59. otros_rdo.tabIndex=7;
60. otros_txt.tabIndex=8;
61. info_chk.tabIndex=9;


62. reset_btn.tabIndex=10;
63. enviar_btn.tabIndex=11;
64.
65. import fl.managers.FocusManager;
66. var def:FocusManager = new FocusManager (this);
67. def.defaultButton = enviar_btn;
68.
nombre_txt.stage.focus=nombre_txt;
Esto hará que se establezca el orden de tabulación. Las últimas líneas establecen
el botón Enviar como el botón por defecto y colocan el foco en el campo Nombre.
69. Seguimos con:
70. reset_btn.addEventListener(MouseEvent.CLICK,
escuchadorLimpiar);
71. function escuchadorLimpiar(event) {
72. nombre_txt.text="";
73. apellidos_txt.text="";
74. mail_txt.text="";
75. producto_cmb.selectedIndex=0;
76. buscadores_rdo.selected=true;
77. otros_txt.text="";
78. otros_txt.editable=false;
79. info_chk.selected=true;
80. salida_txt.text="";
}
Para limpiar los campos cuando se pulse el botón Reset. Hemos creado un
escuchador asociado al botón reset_btn. Dentro del evento click inicializamos todos
los campos a sus estados iniciales.
81. Después escribimos:


82. otros_rdo.addEventListener(Event.CHANGE,
escuchadorOtros);
83. function escuchadorOtros(event) {
84. if (otros_rdo.selected) {
85. otros_txt.editable=true;
86. otros_txt.stage.focus = otros_txt;
87. } else {
88. otros_txt.text="";
89. otros_txt.editable=false;
90. }
}
Aquí hemos configurado un escuchador para el boton otros_rdo, si este se ecuentra
seleccionado otros_txt sera editable y el foco se pasara alli, si no se econtrara
seleccionado, se vacía el contenido de otros_txt y deja de ser editable.
91. Ahora escribe la parte de envío:
92. enviar_btn.addEventListener("click", verificar);
93. function verificar(event) {
94. salida_txt.text="";
95. if (nombre_txt.text.length==0)
{//Verificación del Nombre
96. salida_txt.text="No ha Introducido
su nombre";
97. nombre_txt.stage.focus=nombre_txt;
98. return false;
99. } else if (apellidos_txt.text.length == 0)
{//Verificación del Apellido
100. salida_txt.text="No ha Introducido
sus apellidos";
101.
apellidos_txt.stage.focus=apellidos_txt;
102. return false;


103. } else if (!esMail(mail_txt.text))
{//Verificación del correo
104. salida_txt.text="No ha Introducido
un correo electrónico válido";
105. mail_txt.stage.focus=mail_txt;
106. return false;
107. } else if (otros_rdo.selected &&
otros_txt.text.length == 0) {//Verificación de otros_txt
108. salida_txt.text="Indique dónde nos
econtró";
109. otros_txt.stage.focus=otros_txt;
110. return false;
111. }
112.
113. //Guardamos las variables para el envio
114. var envio:URLVariables = new
URLVariables();
115. envio.nombre=nombre_txt.text;
116. envio.apellidos=apellidos_txt.text;
117. envio.email=mail_txt.text;
118. envio.producto=producto_cmb.selectedItem;
119. if (buscadores_rdo.selected) {
120.
envio.encontrar=buscadores_rdo.value;
121. } else if (publicidad_rdo.selected) {
122.
envio.encontrar=publicidad_rdo.value;
123. } else if (otros_rdo.selected) {
124. envio.encontrar=otros_txt.text;
125. }
126. envio.masinfo=info_chk.selected;
127. //Envio a la pagina .php
128. var urlPhp:URLRequest=new
URLRequest("enviarCorreo.php");


129. urlPhp.method=URLRequestMethod.POST;
130. urlPhp.data=envio;
131.
132. var enviar:URLLoader = new URLLoader();
133. enviar.addEventListener( Event.COMPLETE,
enviado );//Si es enviado, realizara la función enviado
134. enviar.addEventListener(
IOErrorEvent.IO_ERROR, erroNoEnvio );//Si ocurre un
error, realizara la función errorNoEnvio
135. enviar.load( urlPhp );
136.
137. trace(envio);
138.
139.
140. }
141. //Función para vereificar el correo
142. function esMail(mail:String) {
143. if
(mail.indexOf("@")>0&&mail.indexOf("@")==mail.lastIndexOf
("@")) {
144. if
(mail.lastIndexOf(".")>mail.indexOf("@")+1&&mail.lastInde
xOf(".")) {
145. return true;
146. } else {
147. return false;
148. }
149. } else {
150. return false;
151. }
152. }
153.
154. //Función si és enviado
155. function enviado( e:Event ):void {


156. escuchadorLimpiar();
157. salida_txt.text="Mensaje enviado!";
158. }
159. //Función si no és enviado
160. function erroNoEnvio( e:IOErrorEvent ):void {
161. salida_txt.text="Error intenta
nuevamente.";
}
Hemos configurado un escuchador para el botón Enviar. Cuando se hace clic en él
se ejecuta todo este código.

Presta especial atención a la validación del email.
162. El archivo enviarCorreo.php podría tener esta estructura:
163. <?php
164. header("Cache-Control: no-cache, must-revalidate");
165. $mensaje = $_POST['nombre'] . " " .
$_POST['apellidos'] . " ";
166. $mensaje .= "(" . $_POST['email'] . ")\r\n\n";
167. $mensaje .= "Quiere información sobre: " .
$_POST['producto'] . "\r\n\n";
168. $mensaje .= "Conoció la web a través de " .
$_POST['encontrar'] . "\r\n\n";
169. $mensaje .= ($_POST['masinfo'] ? "Sí" : "No") . "
quiere más información.\r\n";
170. $cabeceras = "From: webmaster@dominio.com" . "\r\n"
. "Reply-To: webmaster@dominio.com" . "\r\n";
171. mail('nombre@correo.com', 'Formulario', $mensaje,
$cabeceras);
172. echo ("exito=true");
?>
Pero esto queda totalmente en tus manos.




Prueba evaluativa unidad 19: Formularios - ActionScript
Sólo una respuesta es válida por pregunta. Haz clic en la respuesta que consideres
correcta.
Contesta todas las preguntas y haz clic en el botón Corregir para ver la solución.
Si pulsas Restablecer podrás repetir la evaluación.
1. En un mismo grupo de RadioButtons sólo uno de ellos puede estar seleccionado.
a) Verdadero
b) Falso
2. En un mismo grupo de CheckBoxes sólo uno de ellos puede estar seleccionado.
a) Verdadero
b) Falso
3. Podemos emplear el método Alert() para lanzar un aviso al usuario.
a) Verdadero
b) Falso
4. En esencia, un comboBox y una lista son identicos, aunque en la lista es posible la
selección de elementos múltiples.
a) Verdadero
b) Falso
5. Si quisiéramos colocar el foco en el elemento miControl de un furmario,
utilizaríamos...
a) miCintro.setFocus()
b) miControl.stage.focus = miControl
6. Podemos acceder a los elementos de un objeto XML como propiedades, o utilizando
índices entre corechetes.
a) Verdadero
b) Falso
7. Es posible asignar un estilo CSS a un campo de texto que no admita HTML.


a) Verdadero
b) Falso
8. Para que se muestre la fuente que utilizamos en los textos estáticos, dinámicos y de
entrada deberemos incorporarla a la Biblioteca.
a) Verdadero
b) Falso
9. Para mostrar un icono en el componente botón...
a) Antes deberemos vincularlo
b) Antes deberemos añadirlo al Escenario
10. Para enviar un correo con los datos recogidos en un formulario Flash...
a) Debemos de utilizar los objetos de Flash preparados para enviar correos.
b) Debemos de enviar los datos a una página HTML.
c) Debemos de enviar los datos a una página PHP o ASP.





Unidad 20. Los Filtros (I)
20.1. Introducción

Los filtros son una potente herramienta que abre nuevas posibilidades en nuestras
animaciones Flash.
Su uso aumentará la capacidad de mejorar el aspecto y funcionamiento de nuestros
proyectos, aunque sólo están disponibles para los clips de película, los botones y el
texto.
En este tema veremos los filtros disponibles, su uso y como manejarlos mediante el
panel Propiedades, el Editor de movimiento y sobre todo mediante ActionScript.
Para ilustrar su funcionamiento mostraremos ejemplos de cómo afectan los filtros a esta
imagen:



Antes de empezar resaltaremos una cosa. En ActionScript los colores se indican
mediante una cadena de 8 caracteres con un componente hexadecimal: 0xRRVVAA.
Las dos primeras serán siempre las mismas 0x, las dos siguientes corresponderán a la
cantidad de color rojo, las dos siguientes de verde y las dos últimas de azul.
De este modo 0x000000 sería el color negro (la ausencia de color), y 0xFFFFFF el
color blanco (con el rojo, azul y verde al máximo).
Nota: Antes de utilizar el filtro, observarás que lo importamos con la sentecia import
flash.filters.tipoFiltro;. Esto no es necesario si trabajamos en el panel
Acciones, pero sí si lo hacemos en otro archivo, por ejemplo, en una clase.
20.2. El Filtro Sombra
Utilizando este filtro podremos añadirle una sombra a la imagen:



En la imagen de la derecha vemos la imagen original más la sombra, en la imagen de la
derecha sólo se ve la sombra.

Puedes aplicar este filtro y todos los demás desde el panel Propiedades:
Sus opciones son las siguientes:
Desenfoque X: determina la cantidad de desenfoque horizontal en pixels.
Desenfoque Y: determina la cantidad de desenfoque vertical en pixels.
Intensidad: determina la intensidad de la sombra (de 0 a 100).
Calidad: número de veces que se aplica el filtro. Puede tomar los valores baja,
media y alta.
Ángulo: determina el ángulo de la sombra.
Distancia: determina la distancia de la sombra al objeto en pixels.
Extractor: booleano, activa el filtro extractor, hace que el objeto se vuelva del color
del fondo.
Sombra interior: booleano, hace que la sombra sea interior.
Ocultar Objeto: booleano, esconde el objeto dejando sólo la sombra.
Color: determina el color de la sombra.



Como hemos dicho, también podemos aplicar los filtros desde el Editor de
movimiento, tendríamos las mismas opciones pero con las gráficas propias del editor de
movimiento:


Si aplicamos el filtro desde Action Script, los parámetros son los mismos pero el
nombre hay que darlo en inglés, los valores correspondientes son los siguientes ( además
del valor alpha):
.blurX: determina la cantidad de desenfoque horizontal.
.blurY: determina la cantidad de desenfoque vertical.
.strength: determina la intensidad de la sombra.
.quality: número de veces que se aplica el filtro. Puede tomar los valores 1, 2 ó 3.
Calidad baja, media y alta, respectivamente.
.angle: determina el ángulo de la sombra.
.distance: determina la distancia de la sombra al objeto.
.knockout: booleano, activa el filtro extractor, hace que el objeto se vuelva del color
del fondo.
.inner: booleano, hace que la sombra sea interior.


.hideObject: booleano, esconde el objeto dejando sólo la sombra (segunda imagen).
.color: determina el color de la sombra (escrito 0xRRVVAA).
.alpha: determina la transparencia de la sombra (de 0 a 1).
Podremos utilizar el filtro Sombra escribiendo el siguiente código:
import flash.filters.DropShadowFilter;

var sombra:DropShadowFilter = new DropShadowFilter();
sombra.strength = 5;
sombra.alpha = 0.50;
sombra.color = 0x000000;

...

miClip.filters = [sombra];
También podriamos crear la sombra directamente con todas sus propiedades en el
constructor de este modo:
var sombra:DropShadowFilter = new DropShadowFilter(distance,
angle, color, alpha, blurX, blurY, strength, quality, inner,
knockout, hideObject);

miClip.filters = [sombra];
Así en el constructor deberemos sustituir cada parámetro por el valor que queremos
darle.
Puedes omitir los parámetros que quieras, pero ten en cuenta que siempre se
interpretarán los valores que des en este orden hasta que no encuentre más.
Para practicar la carga y modificación de filtros te aconsejamos realizar
















Unidad 20. Ejercicio paso a paso: Carga y modificación de
filtros
Objetivo
Cargar filtros mediante ActionScript dándoles las propiedades que queramos.
Ejercicio paso a paso.
1. Abre el archivo pez.fla que encontrarás en la carpeta ejercicios/pez del curso,
observa que tanto los campos del formulario como el clip de película ya tienen un
nombre de instancia asignado.
2. Abre el Panel Acciones desde Ventana → Acciones o pulsando la tecla F9.
3. Elimina la línea que dice
//código para añadir el filtro
y escribe lo siguiente en su lugar:
import flash.filters.DropShadowFilter;
Esto hará que el filtro se importe a la película. Normalmente no es necesario
porque trabajamos en el panel de acciones, pero si lo necesitamos si trabajamos,
por ejempolo, en un archivo as externo.
4. Despues de esto escribe:
var sombra:DropShadowFilter = new DropShadowFilter();
Hemos creado una variable llamada sombra que es un filtro de Sombra.
5. Como tenemos que asociar el cambio de efecto al botón aplicar, creamos la función
que controla al evento:
6. btn_aplicar.addEventListener("click", cambiarSombra);
7. function cambiarSombra(event):void {
8.


}
9. Luego accederemos a las propiedades de sombra y le daremos los valores que
hay en los campos del formulario. Todo esto, dentro de la función que se ejecutará
al pusar el botón:
10. sombra.distance = distance_stp.value;
11. sombra.angle = angle_stp.value;
12. sombra.color = 0x000000;
13. sombra.alpha = alpha_stp.value;
14. sombra.blurX = blur_stp.value;
15. sombra.blurY = blur_stp.value;
16. sombra.strength = strength_stp.value;
17. sombra.quality = quality_cmb.selectedItem.data;
18. sombra.inner = inner_chk.selected;
19. sombra.knockout = knockout_chk.selected;
sombra.hideObject = hideObject_chk.selected;
20. Finalmente asociamos el filtro sombra que hemos creado a la propiedad filters del
clip, también dentro de la función:
pez.filters = [sombra];
Hemos creado una película donde podemos cambiar las propiedades de un filtro
dinámicamente.











Unidad 20. Los Filtros (II)
20.3. El Filtro Desenfocar

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

Sus opciones son las siguientes:
.blurX (Desenfoque X): determina la cantidad de desenfoque horizontal.
.blurY (Desenfoque Y): determina la cantidad de desenfoque vertical.
.quality (Calidad): número de veces que se aplica el filtro. Puede tomar los valores
1, 2 ó 3. Calidad baja, media y alta, respectivamente.

Podremos utilizar el filtro Desenfocar escribiendo el siguiente código:
import flash.filters.GlowFilter;

var desenfocar:BlurFilter = new BlurFilter ();
desenfocar.blurX = 5;
desenfocar.blurY = 5;
desenfocar.quality= 3;

miClip.filters = [desenfocar];
También podremos crear el desenfoque directamente con todas sus propiedades en el
constructor, de este modo:


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

miClip.filters = [desenfocar];
Así en el constructor deberemos sustituir cada parámetro por el valor que queremos
darle.
Puedes omitir los parámetros que quieras, pero ten en cuenta que siempre se
interpretarán los valores que des en este orden hasta que no encuentre más.





















Unidad 20. Los Filtros (III)
20.4. El Filtro Iluminado

Utilizando este filtro podremos añadirle un efecto de iluminación a la imagen:

Sus opciones son las siguientes:

.alpha: determina la transparencia de la iluminación (de 0 a 1).
.blurX: determina la cantidad de desenfoque horizontal.


.blurY: determina la cantidad de desenfoque vertical.
.color: determina el color de la iluminación (escrito 0xRRVVAA).
.inner: booleano, hace que la iluminación sea interior.
.knockout: booleano, activa el filtro extractor, hace que el objeto se vuelva del color
del fondo.
.quality: número de veces que se aplica el filtro. Puede tomar los valores 1, 2 ó 3.
Calidad baja, media y alta, respectivamente.
.strength: determina la intensidad de la iluminación.
Podremos utilizar el filtro Iluminado escribiendo el siguiente código:
import flash.filters.GlowFilter;

var iluminado:GlowFilter = new GlowFilter();

iluminado.quality = 3;
iluminado.alpha = 0.50;
iluminado.color = 0x000000;

...

miClip.filters = [iluminado];
También podríamos crear la iluminación directamente con todas sus propiedades en el
constructor, de este modo:
var iluminado:GlowFilter = new GlowFilter(color, alpha, blurX,
blurY, strength, quality, inner, knockout);

miClip.filters = [iluminado];
Así en el constructor deberemos sustituir cada parámetro por el valor que queremos
darle.
Puedes omitir los parámetros que quieras, pero ten en cuenta que siempre se
interpretarán los valores que des en este orden hasta que no encuentre más.




Unidad 20. Los Filtros (IV)
20.5. El Filtro Bisel

Utilizando este filtro podremos añadirle un bisel a la imagen:

Sus opciones son las siguientes:

.angle: determina el ángulo del bisel.
.blurX: determina la cantidad de desenfoque horizontal.
.blurY: determina la cantidad de desenfoque vertical.
.distance: determina la distancia que abarcará el bisel en el objeto.
.highlightAlpha: determina la transparencia del color de resaltado (bisel).


.hightlightColor: determina el color del resaltado (escrito 0xRRVVAA).
.knockout: booleano, activa el filtro extractor, hace que el objeto se vuelva del color
del fondo.
.quality: número de veces que se aplica el filtro. Puede tomar los valores 1, 2 ó 3.
Calidad baja, media y alta, respectivamente.
.shadowAlpha: determina la transparencia del color de sombra del bisel.
.shadowColor: determina el color de la sombra del bisel (escrito 0xRRVVAA).
.strength: determina la intensidad del bisel.
.type: indica el tipo de bisel a aplicar. Puede tomar los valores inner, outer y full.
Interior, exterior y completo, respectivamente.
Podrás utilizar el filtro Bisel escribiendo el siguiente código:
import flash.filters.BevelFilter;

var bisel:BevelFilter = new BevelFilter();
bisel.strength = 5;
bisel.angle = 45;
bisel.shadowColor = 0x000000;

...

miClip.filters = [bisel];
También podrías crear el bisel directamente con todas sus propiedades en el
constructor de este modo:
import flash.filters.BevelFilter;



var bisel:BevelFilter = new BevelFilter(distance, angle,
highlightColor, highlightAlpha, shadowColor, shadowAlpha, blurX,
blurY, strength, quality, type, knockout);





miClip.filters = [bisel];
Así en el constructor deberemos sustituir cada parámetro por el valor que queremos
darle.
Puedes omitir los parámetros que quieras, pero ten en cuenta que siempre se
interpretarán los valores que des en este orden hasta que no encuentre más.




















Unidad 20. Los Filtros (V)
20.6. El Filtro Iluminado Degradado

Utilizando este filtro podremos añadirle una iluminación (como en el filtro anterior) a la
imagen, pero con la característica de que esta iluminación estará compuesta por un
degradado:

Sus opciones son las siguientes:



.alphas: determina matriz de valores de transparencia alfa (de 0 a 1) para los
colores correspondientes de la matriz colors.
.angle: determina el ángulo de la iluminación.
.blurX: determina la cantidad de desenfoque horizontal.
.blurY: determina la cantidad de desenfoque vertical.
.colors: conjunto de colores que definen el degradado (escritos 0xRRVVAA).
.distance: determina la distancia de la iluminación al objeto.
.knockout: booleano, activa el filtro extractor, hace que el objeto se vuelva del color
del fondo.
.quality: número de veces que se aplica el filtro. Puede tomar los valores 1, 2 ó 3.
Calidad baja, media y alta, respectivamente.
.ratios: matriz de proporciones de distribución de color para los colores
correspondientes de la matriz colors (de 0 a 255).
.strength: determina la intensidad de la iluminación.
.type: indica la colocación de la iluminación. Puede tomar los valores inner, outer y
full. Interior, exterior y completo, respectivamente.
Podrás utilizar el filtro Iluminado Degradado escribiendo el siguiente código:
import flash.filters.GradientGlowFilter;

var iluminado:GradientGlowFilter = new GradientGlowFilter();

iluminado.angle = 45;
iluminado.colors = [0xFF0000, 0x00FF00, 0x0000FF];
iluminado.type = "inner";

...



miClip.filters = [iluminado];
También podrías crear la iluminación directamente con todas sus propiedades en el
constructor de este modo:
var iluminado:GradientGowFilter = new GradientGowFilter(distance,
angle, colors, alphas, ratios, blurX, blurY, strength, quality,
type, knockout);

miClip.filters = [iluminado];
Así en el constructor deberemos sustituir cada parámetro por el valor que queremos
darle.
Puedes omitir los parámetros que quieras, pero ten en cuenta que siempre se
interpretarán los valores que des en este orden hasta que no encuentre más.




Unidad 20. Los Filtros (VI)
20.7. El Filtro Bisel Degradado

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

Sus opciones son las siguientes:



.alphas: determina matriz de valores de transparencia alfa (de 0 a 1) para los
colores correspondientes de la matriz colors.
.angle: determina el ángulo del bisel.
.blurX: determina la cantidad de desenfoque horizontal.
.blurY: determina la cantidad de desenfoque vertical.
.colors: conjunto de colores que definen el degradado (escritos 0xRRVVAA).
.distance: determina la distancia que abarcará el bisel en el objeto.
.knockout: booleano, activa el filtro extractor, hace que el objeto se vuelva del color
del fondo.
.quality: número de veces que se aplica el filtro. Puede tomar los valores 1, 2 ó 3.
Calidad baja, media y alta, respectivamente.
.ratios: matriz de proporciones de distribución de color para los colores
correspondientes de la matriz colors (de 0 a 255).
.strength: determina la intensidad del bisel.
.type: indica la colocación del bisel. Puede tomar los valores inner, outer y full.
Interior, exterior y completo, respectivamente.
Podremos utilizar el filtro Bisel Degradado escribiendo el siguiente código:
import flash.filters.GradientBevelFilter;

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

...

miClip.filters = [bisel];


También podremos crear el bisel directamente con todas sus propiedades en el
constructor de este modo:
import flash.filters.GradientBevelFilter;

var bisel:GradientBevelFilter = new GradientBevelFilter(distance,
angle, colors, alphas, ratios, blurX, blurY, strength, quality,
type, knockout);

miClip.filters = [bisel];
Así en el constructor deberemos sustituir cada parámetro por el valor que queremos
darle.
Puedes omitir los parámetros que quieras, pero ten en cuenta que siempre se
interpretarán los valores que des en este orden hasta que no encuentre más.
















Unidad 20. Los Filtros (VII)
20.8. El Filtro Ajustar Color

Utilizando este filtro podremos cambiar todas las características correspondientes al
color de la imagen:

Sólo tiene una opción: .matrix.

En ella escribiremos una matriz de 20 elementos (4x5) que indicarán la cantidad de
cada color, su intensidad, brillo, saturación y contraste.
Podrás modificar el filtro Ajustar Color escribiendo el siguiente código:
import flash.filters.ColorMatrixFilter;

var miMatriz:Array = [1, 0, 0, 0, 100,
0, 1, 0, 0, 100,
0, 0, 1, 0, 100,


0, 0, 0, 1, 0];

var ajustaColor:ColorMatrixFilter = new
ColorMatrixFilter(miMatriz);

miClip.filters = [ajustaColor];
20.9. Acceder a los Filtros de un Elemento

Para modificar los filtros asociados a un objeto tendremos que acceder a su propiedad
filters.
Esta propiedad almacena una matriz que no puede ser editada directamente. Así
que si queremos modificar los filtros que afectan a un objeto tendremos que darle una
nueva matriz a la propiedad y desechar la anterior.
Así, si queremos añadirán nuevo filtro al objeto miClip deberemos escribir lo siguiente:
var sombra:DropShadowFilter = new DropShadowFilter();

var nuevaMatriz:Array = miClip.filters;
nuevaMatriz.push(sombra);

miClip.filters = nuevaMatriz;
Como puedes ver, lo que hacemos es guardar los filtros exitentes en una matriz
nuevaMatriz, introducimos el nuevo filtro en ella con el método push() y luego le
asignamos los filtros que contiene miMatriz al clip miClip.

Como esta propiedad se trata de una matriz también podemos acceder a los filtros de
esta forma:
var nuevaMatriz:Array = miClip.filters;



nuevaMatriz[0].blurX = 15;
nuevaMatriz[0].blurY = 15;

miClip.filters = nuevaMatriz;
Descargamos los filtros en nuevaMatriz, y ahora accedemos al primer filtro
almacenado y cambiamos sus propiedades blurX y blurY. Una vez modificadas,
volvemos a volcar el contenido de nuevaMatriz en miClip.filters.
Fácil, ¿verdad? El único problema que tiene este método es que deberás recordar el
lugar que ocupa cada filtro en la matriz. Recuerda que el método push() inserta un
elemento en una matriz siempre en último lugar.




Ejercicios unidad 20: Los Filtros
Ejercicio 1: Selector de Filtros
Deberás reproducir la película Flash:
Utiliza el archivo fuente filtros.fla que encontraras en la carpeta ejercicios/filtros del
curso.
Como ya hemos visto, averiguar los filtros que afectan a un clip es realmente
complicado, deberás idear una forma para poder gestionarlos y mantener los que estén
activos cada vez que se pulse uno de los botones.
No deberás reproducir el aspecto de los filtros, puedes personalizarlos como más te
guste.












Ayuda ejercicios unidad 20: Los Filtros


Ejercicio 1: Selector de Filtros
1. Abre el archivo filtros.fla que encontrarás en la carpeta ejercicios/filtros del curso.
2. Haz clic en el primer fotograma de la capa acciones, abre el Panel Acciones desde
Ventana → Acciones o pulsando la tecla F9. Aquí introduciremos el código
necesario para darle funcionalidad a la película.
3. Ahora crearemos unas cuantas variables para saber en cada momento si un filtro
se encuentra activo o no. Escribe lo siguiente a continuación:
var filtroSombra:Boolean = false;
var filtroDesenfocar:Boolean = false;
var filtroIluminado:Boolean = false;
var filtroBisel:Boolean = false;
var filtroIluminadoDeg:Boolean = false;
var filtroBiselDeg:Boolean = false;
var filtroAjustarColor:Boolean = false;
4. A continuación, definimos cada uno de los filtros, ya que sus propiedades no
cambian:
5. var sombra:DropShadowFilter=new
DropShadowFilter(20,70,0x000000,0.5,5,5,10,3);
6. var desenfocar:BlurFilter=new BlurFilter(5,5,3);
7. var iluminado:GlowFilter=new
GlowFilter(0xFFFF00,0.7,20,20,50,3);
8. var bisel:BevelFilter=new
BevelFilter(1,45,0xFFFFFF,0.5,0x000000,0.5,5,5,10,3,"inne
r");
9. var iluminadoDeg:GradientGlowFilter=new
GradientGlowFilter(0,45,[0xFFFFFF,0xFF0000],[0,1],[0,255]
,100,100,2,3,"outer");
10. var biselDeg:GradientBevelFilter=new
GradientBevelFilter(3,45,[0x0000FF,0xFF0000,0xFFFFFF],[1,
0,1],[0,128,255],20,20,3.4,3,"inner");
11. var ajustarColor:ColorMatrixFilter=new
ColorMatrixFilter([0.250807255506516,0.00463615544140339,
0.684556603431702,0,34.8300018310547,0.271924287080765,0.
806314527988434,-0.13823889195919,0,34.8300018310547,-
0.359950125217438,0.976227760314941,0.323722183704376,0,3
4.8299980163574,0,0,0,1,0]);


12. Ahora, para cada botón deberemos creamos la función que alterna la variable que
indica si está activo. Para ello la negamos. Después llamamos a la función
mostrarFiltros, que es la que se encarga de aplicar los filtros al elemento.
sombra_btn.addEventListener(MouseEvent.MOUSE_UP,aplicarSomb
ra);
function aplicarSombra(event:MouseEvent):void {
filtroSombra=! filtroSombra;
mostrarFiltros();
}

desenfocar_btn.addEventListener(MouseEvent.MOUSE_UP,aplicar
Desenfocar);
function aplicarDesenfocar(event:MouseEvent):void {
filtroDesenfocar=! filtroDesenfocar;
mostrarFiltros();
}

iluminado_btn.addEventListener(MouseEvent.MOUSE_UP,aplicarI
luminado);
function aplicarIluminado(event:MouseEvent):void {
filtroIluminado=! filtroIluminado;
mostrarFiltros();
}

bisel_btn.addEventListener(MouseEvent.MOUSE_UP,aplicarBisel
);
function aplicarBisel(event:MouseEvent):void {
filtroBisel=! filtroBisel;
mostrarFiltros();
}

iluminadoDeg_btn.addEventListener(MouseEvent.MOUSE_UP,aplic
arIluminadodeg);
function aplicarIluminadodeg(event:MouseEvent):void {


filtroIluminadoDeg=! filtroIluminadoDeg;
mostrarFiltros();
}

biselDeg_btn.addEventListener(MouseEvent.MOUSE_UP,aplicarBi
seldeg);
function aplicarBiseldeg(event:MouseEvent):void {
filtroBiselDeg=! filtroBiselDeg;
mostrarFiltros();
}

ajustarColor_btn.addEventListener(MouseEvent.MOUSE_UP,aplic
arColor);
function aplicarColor(event:MouseEvent):void {
filtroAjustarColor=! filtroAjustarColor;
mostrarFiltros();
}
13. Finalmente definiremos la función mostrarFiltros que se ejecutará cada vez que se
pulse un botón. Evalúa cada variable apra decidir si aplica el filtro o no:
14. function mostrarFiltros() {
15. var matrizFiltros:Array=[];
16. if (filtroSombra) {
17. matrizFiltros.push(sombra);
18. }
19. if (filtroDesenfocar) {
20. matrizFiltros.push(desenfocar);
21. }
22. if (filtroIluminado) {
23. matrizFiltros.push(iluminado);
24. }
25. if (filtroBisel) {


26. matrizFiltros.push(bisel);
27. }
28. if (filtroIluminadoDeg) {
29. matrizFiltros.push(iluminadoDeg);
30. }
31. if (filtroBiselDeg) {
32. matrizFiltros.push(biselDeg);
33. }
34. if (filtroAjustarColor) {
35. matrizFiltros.push(ajustarColor);
36. }
37. miClip.filters=matrizFiltros;
}
Al principio de la función creamos una variable de tipo Array que almacenará los
filtros activos (los que se encuentren a true). Luego utilizando el condicional if
vemos si el filtro se encuentra activado, en caso afirmativo, creamos el filtro (con las
opciones que pusimos la principio) e introducimos el filtro en la matriz matrizFiltros.

Al final volcamos los filtros guardados en matrizFiltros en la propiedad filters de
miClip.

Hemos conseguido que se puedan cargar y descargar los filtros con una simple
variable que evalúa si el filtro se encuentra activo o no.






















Prueba evaluativa unidad 20: Los Filtros
Sólo una respuesta es válida por pregunta. Haz clic en la respuesta que consideres
correcta.
Contesta todas las preguntas y haz clic en el botón Corregir para ver la solución.
Si pulsas Restablecer podrás repetir la evaluación.
1. El color 0x00FF00 correspondería a:
a) El color Rojo.
b) El color Verde.
c) El color Azul.
2. Es posible combinar más de un efecto en un objeto.
a) Verdadero
b) Falso
3. Podemos asociar tantos filtros como queramos a un símbolo de tipo gráfico.
a) Verdadero
b) Falso
4. La función 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 posición 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. Vídeo (I)
21.1. Introducción

Con Flash cada vez es más fácil añadir vídeos a nuestras presentaciones o webs. En
particular Flash CS4 incorpora una serie de características que facilitan la tarea al máximo
y permiten el uso de vídeos como si se tratase de cualquier otro objeto en pantalla.
A continuación explicaremos cómo hacerlo y cuáles son las mejores alternativas.


21.2. Importando Vídeos
Lo primero que deberemos hacer es transformar nuestro vídeo de formato avi, mpeg,
mov, wmv o dv al formato que utiliza Flash: flv.
Este formato, además de crear archivos de vídeo de buena calidad muy
comprimidos, te permitirá introducir puntos de referencia desde donde controlaremos la
interacción del entorno de la película con el vídeo.
Haz clic en Archivo → Importar → Importar vídeo para empezar a configurar el
archivo .flv que crearemos.
Se abrirá una pantalla como esta:





Aquí deberás seleccionar el archivo que quieres importar para utilizarlo en tu película.
Haz clic en el botón Examinar y búscalo en tus carpetas. Cuando lo hayas encontrado
pulsa el botón Aceptar y estarás listo para seguir pulsando el botón Siguiente.
También es posible marcar la opción Ya se ha implementado en un servidor Web,
Flash Vídeo Streaming Service o Flash Communication Server. En este caso deberás
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 información del video que vamos a exportar, donde
se importara, etc:




Ahora podremos añadir nuestros Puntos de referencia desde el panel Inspector de
Componentes, en la opción cuePoints.



Desde aquí podremos configurar puntos en nuestra película.


Unidad 21. Vídeo (II)
Existen dos tipos de puntos de referencia diferentes: el de Navegación y el de Evento.
Creando puntos de Navegación podremos referenciarnos más tarde a ellos para saltar
en la película. Sería algo así como crear capítulos 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 película. Estos puntos nos permitirán pasar parámetros que podremos
recuperar mediante ActionScript.
En el ejemplo hemos creado los siguientes puntos de referencia:



Como vemos hay 3 de Navegación, a los cuales acudiremos pulsando los botones
para saltar entre los capítulos de la película. Luego hemos añadido 4 puntos de Evento
desde los que pasaremos un parámetro que hará que se muestre determinado fotograma
de un clip que se encontrará en el Escenario.

Puedes realizar el ejercicio paso a paso de Puntos de Referencia para ver cómo lo
hacerlo.
21.3. El Componente FLVPlayback


Si ya tuvieses el archivo importado a flv no haría falta que realizases las acciones
anteriores, sólo deberás insertar en el escenario un componente que incorpora Flash para
la reproducción de éste.
Abre el Panel Componentes desde Ventana → Componentes y haz clic sobre
FLVPlayback. Arrastra un componente FLVPlayBack al Escenario.
Desde el Panel Inspector de componentes podrás configurarlo. Allí encontrarás las
siguientes opciones:

align: especifica el diseño del vídeo. Por ejemplo, lo podemos centrar con center.
autoPlay: puede tomar los valores true o false. Indican si el vídeo debe
reproducirse nada más abrir el archivo o esperar a una orden para empezar a
reproducirse.
cuePoints: indica los puntos de referencia que están incluidos en la película. Una
vez importada la película a formato flv no pueden ser modificados.
isLive: puede tomar los valores true o false. Este campo se utilizará para la
transmisión de vídeo en vivo y sólo podrá utilizarse a través de un servidor de
Streaming.
preview: Permite obtener una previsualización desde una imagen png.
scaleMode: Indica si se altera la escala del vídeo: si muestra su tamaño original, si
se ajusta al tamaño de la escena, etc...
skin: desde aquí podemos modificar la apariencia de los controles de la película y
seleccionar uno entre los predefinidos.
skinAutoHide: puede tomar los valores true o false. Indicará si los controles se
pueden esconder para volver a aprecer cuando el cursor se sitúe sobre la película.


skinBackgroundAlpha establece la transparencia del fondo del skin, y
skinBackgroundColor su color.
source es el archivo de vídeo que se mostrará en el reproductor.
volume: de 0 a 100. Indica el volumen máximo del vídeo.
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 vídeo deberá volver a
la posición inicial después de haberse reproducido completamente, o tras hacer un
stop.
autoSize: puede tomar los valores true o false. Indica si el control deberá ajustarse
al tamaño del vídeo, o por el contrario deberá ser el vídeo el que se ajuste al tamaño
del control.
bufferTime: especifica el número de segundos que se almacenarán en la memoria
antes de que se inicie la reproducción del vídeo.
totalTime: indica el tiempo total del vídeo.
Recuerda que todas estas propiedades son accesibles desde ActionScript.
Una vez insertada la película mediante la adición de este componente o por importación
deberemos darle un nombre de instancia para poder referirnos a él. Hazlo desde este
mismo panel o desde el Panel Propiedades.
Unidad 21. Vídeo (III)
21.4. Uso de Componentes para la Reproducción
Usar componentes para controlar la película es muy sencillo, sólo deberás arrastrarlos
desde el Panel Componentes al Escenario y escribir unas pocas líneas en el Panel
Acciones.
Para añadir estos componentes haz clic en el elemento FLV Playback Custom UI y
arrastra el que tu quieras al Escenario, veamos cuáles son sus funciones.

BackButton: retrocede el flujo del vídeo al punto de referencia inmediatamente
anterior o en su defecto al inicio de éste.
BufferingBar: muestra el progreso de descarga del vídeo.
ForwardButton: avanza el flujo del vídeo al punto de referencia inmediatamente
posterior o en su defecto al final de éste.
MuteButton: establece el volumen de la película directamente a 0. Actuaría de
forma similar a la línea:


miVideo.volume = 0;
PauseButton: pausa la película en el momento en el que se pulse el botón.
PlayButton: reaunda (o comienza) la reproducción a partir de donde se encuentre el
cabezal de reproducción de vídeo.
PlayPauseButton: una mezcla de los dos anteriores, es capaz de pausar y
reanudar la reproducción desde un mismo control.
SeekBar: desde esta barra avanzar y retroceder manualmente por la línea de flujo
de la película.
StopButton: detiene la reproducción y posiciona el cabezal de reproducción al
principio del vídeo.
VolumeBar: permite el aumento o disminución del volumen del vídeo mediante una
barra de volumen.
Una vez añadidos los componentes necesarios al Escenario tendrás que darle un
nombrede instancia y luego escribir lo siguiente (dependiendo de los controles que hayas
arrastrado) en el Panel Acciones del fotograma 1:
miVideo.playButton = miBotonPlay;
miVideo.pauseButton = miBotonPausa;
miVideo.playPauseButton = miBotonPausaPlay;
miVideo.stopButton = miBotonStop;
mVideo.backButton = miBotonAtras;
miVideo.forwardButton = miBotonAdelante;
miVideo.muteButton = miBotonSilencio;
miVideo.volumeBar = miBarraVolumen;
miVideo.seekBar = miBarraDeslizadora;
miVideo.bufferingBar = miBarraProgreso;
El componente se asociará al vídeo y funcionará por sí solo. Fácil, ¿verdad?
Puedes modificar los componentes que añadas al Escenario haciendo doble clic sobre
ellos y cambiando su forma, tamaño o color.
21.5. Crear Controles Propios


Crear controles propios no es muy complicado en Flash CS4. Sólo tienes que crear los
botones que consideres necesarios y utilizar las propiedades del componente
FLVPlayback.
play(): reproduce el vídeo.
miVideo.play();
stop(): detiene el vídeo y vuelve al inicio.
miVideo.stop();
pause(): detiene el vídeo conservando su posición actual.
miVideo.pause();
seek(segundo:Number): permite el avance o retroceso de la película de vídeo.
miVideo.seek(5);
Esta línea colocará la cabeza lectora en el segundo 5 y reproducirá a partir de ahí.

volume: define el volumen del vídeo. Puedes introducir un valor entre 0 y 100.
miVideo.volume = 50;
Un ejemplo de cómo crear un botón de Play/Pause sería asociando el código siguiente
a un botón:
miBoton.addEventListener(MouseEvent.MOUSE_UP,pararContinuar);
function pararContinuar(event:MouseEvent) {
if (miVideo.state==miVideo.PAUSED) {
miVideo.play();
} else {
miVideo.pause();
}


}
La propiedad state devuelve el estado en el que se encuentra nuestro vídeo en el
momento, puede tomar los siguientes valores:
miVideo.PAUSED: el vídeo se encuentra pausado.
miVideo.PLAYING: el vídeo se está reproduciendo.
miVideo.REWINDING: el vídeo está en estdo de rebobinado.
miVideo.SEEKING: el vídeo está en estado de búsqueda.
miVideo.STOPPED: el vídeo se encuentra detenido.
miVideo.BUFFERING: el vídeo todavía se está almacenando en el buffer.
miVideo.CONNECTION_ERROR: se ha producido un error de conexión y el vídeo
no podrá visualizarse.
miVideo.DISCONNECTED: el vídeo está en estado de desconexión. Este estado se
producirá hasta que se le asigne una ruta a la propiedad contentPath.
miVideo.LOADING: el vídeo está en estado de carga.
Ahora veremos como interactuar con los puntos de referencia que hayamos creado.
En el ejemplo hemos creado 3 botones que deberán saltar a los tres puntos diferentes
que hemos creado: inicio, carrera1 y carrera2.
El código asociado al botón sería el siguiente:
miBoton.addEventListener(MouseEvent.MOUSE_UP,reproducirInicio);
function reproducirInicio(event:MouseEvent) {
miVideo.seekToNavCuePoint("inicio");
miVideo.play();
}
Este trozo de código utiliza la función seekToNavCuePoint para buscar el punto de
referencia que se le indique, luego tendremos que decirle que reanude la reproducción.
También puedes utilizar las funciones seekToNextNavCuePoint() y
seekToPrevNavCuePoint() para avanzar y retroceder, respectivamente, por los
diferentes puntos de referencia de navegación creados.
miVideo.seekToNextNavCuePoint();


miVideo.seekToPrevNavCuePoint();



Unidad 21. Vídeo (IV)
21.6. Interacción de Vídeo y Elementos Externos
Como vimos antes, podíamos crear puntos de referencia de Eventos para pasar
parámetros a nuestra película desde la reproducción del vídeo.
Su uso no es muy complicado, deberemos crear un escuchador que esté pendiente de
los puntos de referencia que se vayan reproduciendo en el vídeo de la siguiente forma:
import fl.video.MetadataEvent; //Necesitamos el importar

miVideo.addEventListener(MetadataEvent.CUE_POINT,eventosVideo);
function eventosVideo(puntoRef:MetadataEvent ) {
if (puntoRef.info.parameters) {

mensaje.gotoAndPlay(puntoRef.info.parameters["fotograma"]);
}
}
Lo que hacemos en la conidición, es comprobar si hay información sobre los
parámatros (.info.parameters).
Si es así, sacamos la información del parámetro llamándolo por su nombre y actuamos
en consecuencia. Lo que hemos hecho, es hacer que el parámetro fotograma nos indique
la etiqueta a la que queremos desplazar el cabezal de mensaje.
En el ejemplo hemos creado un clip de película que se llama mensaje. Cuando se van
produciendo determinados eventos en el vídeo vamos moviendo el cabezal de
reproducción de dicho clip y así creamos una vinculación entre ambos, el clip y el vídeo.


Si escribieses lo siguiente te devolvería al Panel Salida el nombre del punto de
referencia.
trace(puntoRef.info.name);


Ejercicios unidad 21: Vídeo
Ejercicio 1: Mi Vídeo
Utiliza el archivo fuente video.fla que encontrarás en la carpeta ejercicios/video del
curso.
Tu tarea consistirá en importar el video video.mov que encontrarás en la misma
carpeta y crear 6 puntos de navegación, en los segundos 0, 10, 20, 30, 40 y 50.
Luego deberás añadirles funcionalidad a los botones mediante ActionScript.

Ayuda ejercicios unidad 21: Vídeo
Ejercicio 1: Mi Vídeo
1. Abre el programa Flash CS4.
2. Crea un nuevo documento haciendo clic en Archivo → Nuevo.
3. Selecciona Documento de Flash en el diálogo que se abrirá y pulsa Aceptar.
4. Se abrirá un documento en blanco. Lo guardaremos para darle un nombre y poder
guardar nuestros progresos de vez en cuando. Para ello haz clic en Archivo →
Guardar. Dale un nombre, selecciona una carpeta y pulsa Guardar.

Ahora podrás guardar el documento siempre que quieras pulsando Ctrl + S o
haciendo clic en Archivo → Guardar.
5. Haz clic en Archivo → Importar → Importar Vídeo para comenzar la importación.
6. Pulsa el botón Examinar en la ventana que se abrirá y busca el archivo video.mov,
haz clic en Abrir cuando lo encuentres.
7. Ahora deberemos insertar los puntos de referencia, hacemos clic en Iniciar Adobe
Media Encoder.



8. Añadiremos el video al que queremos insertar los puntos de referencia, el video
tiene que estar en formato .flv o .f4v sino no lo reconocerá, una vez añadido
hacemos clic en la pestaña de ajustes preestablecidos y pulsamos Editar ajustes
de exportación.

9. Una vez hecho esto hacemos clic en mostrar avanzado.



10. Ahora ya podemos insertar nuestros puntos de referencia en el hueco que aparecio
debajo de la previsualizacion del video.



11. Pulsa el botón para añadir un punto de referencia, llámalo 1 y dale el tipo
Navegación .
12. Sitúa el cabezal de reproducción el el segundo 10 y pulsa el botón , llama al
punto de referencia 2 y dale el tipo Navegación.
13. Sitúa el cabezal de reproducción el el segundo 20 y pulsa el botón , llama al
punto de referencia 3 y dale el tipo Navegación.
14. Sitúa el cabezal de reproducción el el segundo 30 y pulsa el botón , llama al
punto de referencia 4 y dale el tipo Navegación.
15. Sitúa el cabezal de reproducción el el segundo 40 y pulsa el botón , llama al
punto de referencia 5 y dale el tipo Navegación.
16. Sitúa el cabezal de reproducción el el segundo 50 y pulsa el botón , llama al
punto de referencia 6 y dale el tipo Navegación.
17. Pulsa Aceptar cuando ya tengas los puntos de referencia insertados.
18. Una vez terminado pulsamos Inciar Cola, esto guardara nuestro video con los
puntos de referencia ya insertados en el.

19. Ahora buscamos el video que acabamos de crear en nuestra pantalla de Flash y
pulsamos siguiente.

20. Selecciona Ninguno en el desplegable Aspecto y pulsa Siguiente.
21. Haz clic en Finalizar y el vídeo comenzará a importarse.
22. Una vez importado se añadirá al Escenario. Borrarlo, pues ya tenemos una
instancia de FLVPlayback en el Escenario. Para ello, selecciónalo y pulsa la tecla
Suprimir.


23. Selecciona el componente FLVPlayback que había en el Escenario y accede a sus
propiedades en el Inspector de Componentes.
24. Busca la propiedad source y haz clic sobre ella para introducir un valor.
25. Busca el archivo que se ha creado (video.flv) y selecciónalo.

Ya hemos asociado el video al componente. Observa que su nombre de instancia es
miVideo Ahora pasaremos a darle funcionalidad a los botones.
26. Ahora le damos un nombre de instancia a cada boton e insertamos las acciones en
otra capa llamada acciones:
miVideo.autoRewind=true; //Para que al pulsar STOP vuelva
//al principio
//Boton retroceso <<
retro_rapido.addEventListener(MouseEvent.MOUSE_UP,retroce
der);
function retroceder(event:MouseEvent):void {
miVideo.seekToPrevNavCuePoint();
}
//Boton stop []
btnStop.addEventListener(MouseEvent.MOUSE_UP,detener);
function detener(event:MouseEvent):void {
miVideo.stop();
}
//Boton play >
btnPlay.addEventListener(MouseEvent.MOUSE_UP,reproducir);
function reproducir(event:MouseEvent):void {
miVideo.play();
}
//Boton pausa ||
btnPause.addEventListener(MouseEvent.MOUSE_UP, pausar);
function pausar(event:MouseEvent):void {
miVideo.pause();
}
//Boton avance >>
avance_rapido.addEventListener(MouseEvent.MOUSE_UP,
avanzar);
function avanzar(event:MouseEvent):void {
miVideo.seekToNextNavCuePoint();
}
//Volumen
//Subir +
vol_mas.addEventListener(MouseEvent.MOUSE_UP,
subirVolumen);
function subirVolumen(event:MouseEvent):void {
if (miVideo.volume<100) {
miVideo.volume=miVideo.volume+10;
}
}
//Bajer -
vol_men.addEventListener(MouseEvent.MOUSE_UP,
bajarVolumen);
function bajarVolumen(event:MouseEvent):void {
if (miVideo.volume>0) {
miVideo.volume=miVideo.volume-10;
}
}


Prueba evaluativa unidad 21: Vídeo
Sólo una respuesta es válida por pregunta. Haz clic en la respuesta que consideres
correcta.
Contesta todas las preguntas y haz clic en el botón Corregir para ver la solución.
Si pulsas Restablecer podrás repetir la evaluación.
1. Flash puede importar los siguientes tipos de archivo:
a) avi y mpeg.
b) mov, wmv y dv.
c) Todos los anteriores.
2. Podemos utilizar la función seekToNavCuePoint("puntoRef") para saltar a puntos de
referencia de tipo... a) de Evento.
b) de Navegación.
3. ¿A qué valor cambiaremos la propiedad autoPlay si queremos que se reproduzca el
vídeo nada más cargarse?.
a) True .
b) False .
4. Podemos utilizar la función seek() para saltar a un segundo determinado del vídeo.
a) Verdadero.
b) Falso.
5. Si el vídeo esta en estado de DISCONNECTED...
a) Es que no se ha producido un error de conexión y no podrá visualizarse.
b) Es que aun no se le ha asignado una ruta a la propiedad contentPath .
6. La función seekToNavCuePoint("puntoREF") se sitúa en un punto de referencia ya
definido y comienza la reproducción a partir de ahí.
a) Verdadero.
b) Falso.
7. Podemos asignar un número indeterminado de parámetros a los puntos de referencia
para consultarlos más tarde a través de ActionScript.
a) Verdadero.
b) Falso.


8. El componente SeekBar muestra el porcentaje de vídeo almacenado en el buffer.
a) Verdadero.
b) Falso.
9. Además de elegir el aspecto de los controles antes de importar el vídeo, también es
posible editarlo cuando ya está importado y se encuentra en el Escenario .
a) Verdadero.
b) Falso.
10. La propiedad skinAutoHide sirve para:
a) Esconder los controles del vídeo si no tiene el cursor sobre ellos.
b) Hacer que los controles no puedan taparse por ningún otro objeto del escenario.

Unidad 22. Juegos (I)
22.1. Introducción
En este tema veremos los elementos básicos que necesitaras a la hora de crear juegos
con Flash: el movimiento, los choques, la rotación, creación 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 básico.
22.2. Manejando Elementos
Cuando trabajemos con objetos necesitaremos acceder a algunas características
básicas, como por ejemplo su anchura y altura o su posición en el Escenario.
Podemos modificar el tamaño del objeto utilizando las propiedades width, height,
scaleX e scaleY.
Las dos primeras (width y height) modificarán o devolverán la anchura y altura,
respectivamente, en píxeles del objeto referenciado, por tanto, podemos cambiar el
tamaño de un clip escribiendo lo siguiente:
miClip.width = 100;
miClip.height = 200


Las propiedades scaleX e scaleY cambian el tamaño, 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:
miClip.scaleX = 2;
miClip.scaleY = 2;
Hará que su visualización sea del doble (200%).
También podemos averiguar o modificar la posición de un objeto, basta con trabajar con
sus propiedades x e y:
miClip.x = 50;
miClip.y = 150;

var posicionDeClipHorizontal:Number = miClip.x;
var posicionDeClipVertical:Number = miClip.y;
Recuerda que estas propiedades trabajan con píxeles.
De esta forma podemos mover el objeto de una forma muy fácil, por ejemplo para hacer
que se desplace hacia la derecha del Escenario deberás escribir:
miClip.x = miClip.x + 1;
Utilizando estas propiedades y combinándola con las características de los
Movieclips podemos recrear de forma más natural el movimiento.
Aquí hemos creado un clip de película con tres posiciones, parada, izquierda y derecha:





Así, podemos llamar mediante la instrucción gotoAndStop() a uno de los fotogramas
del clip para que se muestre dicha posición y dé más realismo al movimiento.
El código que hemos incluido en la película es el siguiente:
var izquierda:Boolean = false;
var derecha:Boolean = false;

miClip.gotoAndStop("parado");
miClip.x = 10;

miClip.addEventListener(MouseEvent.MOUSE_UP,iniciarMovimiento);
function iniciarMovimiento(event:MouseEvent):void{
if (miClip.x <= 10) {
miClip.gotoAndStop("derecha");
derecha = true;
}
if (miClip.x >= 495) {
miClip.gotoAndStop("izquierda");
izquierda = true;
}
}

miClip.addEventListener(Event.ENTER_FRAME,desplazar)


function desplazar(event):void{
if (derecha) {
if (miClip.x < 495) {
miClip.x = miClip.x + 6;
} else {
miClip.gotoAndStop("parado");
derecha = false;
}
}
if (izquierda) {
if (miClip.x > 10) {
miClip.x = miClip.x - 6;
} else {
miClip.gotoAndStop("parado");
izquierda = false;
}
}
}

Observa cómo 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 función con
más 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
están a true comenzamos el movimiento hasta la posición que queramos.
A medida que vayamos avanzando en el tema veremos más funciones y métodos que
nos permitirán acciones más versátiles y ajustadas a nuestras necesidades.


Otra forma de modificar la apariencia del objeto con el que trabajamos es utilizando la
propiedad rotation.
Esta propiedad actúa sobre el objeto rotándolo tantos grados como especifiques
respecto a su posición original. Por ejemplo:
miClip.rotation = 90;
Esta línea 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 añadirle un signo menos (-) antes
del ángulo:
miClip.rotation = -90;
Para devolver al objeto a su posición original sólo tendrás que escribir la siguiente línea:
miClip.rotation = 0;
Así la rotación que actúa sobre el objeto es nula y se muestra en su posición original.
Recuerda que para que las rotaciones parezcan reales deberás posicionar el objeto
dentro del clip en el centro absoluto, para que así la referencia del clip se encuentre en la
posición adecuada.
Observa la diferencia entre estos dos clips:

En ambos la rotación se aplicará respecto al punto de referencia, por lo que en la
edición de éste deberás utilizar los botones y del Panel Alinear (Ventana →
Alinear) para centrar el objeto respecto al punto de referencia del clip.
Realiza el paso a paso de rotación para ver mejor como funciona.
Unidad 22. Ejercicio paso a paso: Rotación


Ejercicio paso a paso.
1. Abre el archivo movimiento_rotacion.fla que encontrarás en la carpeta
ejercicios/movimiento_rotacion.

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 código:
4. var izquierda:Boolean = false;
5. var derecha:Boolean = false;
6. miClip.x = 30;
7.
8.
9. miClip.addEventListener(MouseEvent.MOUSE_UP,rot);
10. function
rot(event:MouseEvent):void{
11. if (miClip.x <= 30) {
12. miClip.rotation = 10;
13. derecha = true;
14. }
15. if (miClip.x >= 515) {
16. miClip.rotation = -10;
17. izquierda = true;
18. }
19. }
20.
miClip.addEventListener(Event.ENTER_FRAME,para)
21. function para(event):void{
22. if (derecha) {
23. if (miClip.x < 515) {
24. miClip.x = miClip.x + 6;
25. }


26. else {
27. miClip.rotation = 0;
28. derecha = false;
29. }
30. }
31. if (izquierda) {
32. if (miClip.x > 30) {
33. miClip.x = miClip.x - 6;
34. }
35. else {
36. miClip.rotation = 0;
37. izquierda = false;
38. }
39. }
}

40. Estaremos listos, podrás previsualizar la película pulsando Ctrl+Enter.
Como puedes observar el código es idéntico al anterior pero cambiando las
sentencias de salto de fotograma por cambios de rotación en el clip.

Unidad 22. Juegos (II)
El problema ahora se nos plantea cuando queremos que el objeto se oriente hacia
unas coordenadas en concreto. ¿Cómo calculamos el ángulo necesario para que
nuestro elemento se oriente hacia otro situado en las coordenadas 100, 200? La solución
no es muy complicada: deberemos echar mano de la trigonometría.
En Flash tenemos una función muy útil que nos ayuda a encontrar ángulos
rápidamente.


Utilizando la función Math.atan2 recuperaremos el ángulo formado por unas
coordenadas en el espacio respecto a un punto central.
Veamos un ejemplo:

Escribiendo la siguiente línea recuperaremos el ángulo que buscamos:
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 están en relación éste.
Podemos averiguarlas de forma muy fácil haciendo una pequeña conversión restando
las coordenadas entre sí:



Ahora ya podemos emplear la función atan2:
var angulo:Number = Math.atan2(x
1
- x
2
, y
1
- y
2
);
Lo segundo que tendremos que saber es que esta función 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 atención, la diferencia siempre será de 90º:



Sólo tenemos que sumarle 90 al ángulo resultante para que el objeto se oriente hacia
el lugar correcto.
Así que solventaremos esto son una sola línea. Pero antes convertiremos el ángulo
resultante en radianes a grados:
var grados:Number = Math.round(angulo*180/Math.PI);
miClip.rotation = grados + 90;
Desde luego la suma que hemos realizado es consecuencia directa de que el objeto
este orientado inicialmente hacia arriba (y empiece a contar los grados desde ese
punto en 0).
Si partiésemos 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 posición que buscamos.
O incluso, si al contrario, el objeto se encuentra orientado hacia la izquierda
deberemos sumarle 180º.



Como ves, todo dependerá de la posición original del objetos (y de que vértice quieras
orientar). Lo más aconsejable en este caso es que los objetos que vayan a rotar estén
orientados hacia la derecha, así no tendrás que preocuparte del desfase del ángulo.
Unidad 22. Juegos (III)
Otra de las técnicas que nos será muy útil es la carga y descarga de elementos
existentes en la biblioteca. Esto lo haremos con la función addChild.
Recordemos que esta función añade un elemento (hijo) a la lista de visualización de un
contenedor (padre). Si omitimos el objeto, lo añadimos a la película general.
Tiene la siguiente sintaxis:
miContenedor.addChild(objeto);
Como ya vimos, esto lo empleabamos 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 → (Botón Avanzado). Aquí, marcamos la opción
Exportar para ActionScript, 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 código, esta clase se comportará exacatamente como un MovieClip, ya
que es su clase base (caja de texto Clase base). Ahora, para agreagar estos elementos,
sólo tenemos que crear un nuevo objeto de la clase, y agregarlo al contenedor:
var miObjetoClip:miClip = new miClip;
miContenedor.addChild(miObjetoClip);


Para eliminar clips insertados mediante addChild puedes utilizar removeChild() o
removeChildAt(), que comentamos al hablar de los contenedores.
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 dinámicamente para practicar mejor
estas funciones, y crear el ejemplo anterior.
Unidad 22. Ejercicio paso a paso: Agregar objetos
dinámicamente
Ejercicio paso a paso.
1. Abre el archivo attach.fla que encontrarás en la carpeta ejercicios/attach del curso.
2. Selecciona el clip estrella en la Biblioteca y haz clic derecho sobre él.
3. Selecciona Propiedades - botón Avanzado.
4. Se abrirá una ventana donde deberás hacer clic en la opción 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
código en el Panel Acciones (tecla F9):
7. var contenedor:Sprite=new Sprite; //Creamos un contenedor
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
cuántas estrellas se muestran.
8. Ahora para el botón de añadir estrellas (btn_añadir), añadiremos el siguiente
codigo:
9. btn_añadir.addEventListener(MouseEvent.CLICK, añadir);
10. function añadir(event):void {
11. if (contenedor.numChildren<30) { // si el
contenedor contiene menos de 30 estrellas


12. //podemos añadir
más
13. var miEstrella:estrella=new estrella; //
creamos una estrella en miEstrella
14. var posY:Number; //creamos una variable para
calcular la posicion Y
15. var posX:Number; // creamos otra variable para
calcular la posicion X
16. // calculamos la posicion "y" e "x" en
funcirelación con el núm. de estrellas
17.
posY=Math.floor(contenedor.numChildren/6)*miEstrella.heig
ht;
18.
posX=(contenedor.numChildren%6)*miEstrella.width;
19. miEstrella.x=posX; // asignamos las variables
de las posiciones a las coordenadas
20. miEstrella.y=posY; // de posicion de la
estrella
21. contenedor.addChild(miEstrella); // por ultimo
añadimos la estrella al contenedor
22. }
23. }
Observa como calculamos las posiciones x e y:
Para la posición Y, dividimos contenedor.numChildren (número de hijos que
contiene el contenedor) entre 6, que será el número máximo 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 posición 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).
24. Ahora para el botón de quitar estrellas añadimos el siguiente código:
25. btn_quitar.addEventListener(MouseEvent.CLICK,
quitar);
26. function quitar(event) {


27. if (contenedor.numChildren) { // si hay más de 0
hijos devolvera el valor true
28. // quitamos siempre numChildren - 1, que es el
último elemento añadido
29.
contenedor.removeChildAt(contenedor.numChildren-1);
30. }
}
El método 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 ínidice es en base 0. Es decir, si hay dos elementos
(ínidces 0 y 1), numChildren devolverá 2.
Ya hemos creado una película que añade un número concreto de elementos
automatizadamente.






Unidad 22. Juegos (IV)
22.3. Interacción con el ratón
Veamos ahora cómo interactuar con el ratón y el Escenario y sus elementos.
Empezaremos viendo una de las funciones más útiles para el ratón: 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 usabamos estas dos propiedades.
La función startDrag permite varios parámetros:
miObjeto.startDrag(bloqueaCentro, rectángulo);
En bloqueaCentro podremnos 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 parámetro, rectángulo, nos permite definir los límites de la zona donde
podemos arrastrar. Esta opción es muy útil cuando queremos que el arrastre sólo 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 también te será de mucha ayuda es la de dropTarget. Te
permitirá averiguar sobre qué objeto se ha soltado el objeto arrastrado:
miObjeto.addEventListener('mouseDown', arrastrar);
function arrastrar(event):void {
miObjeto.startDrag();
}

miObjeto.addEventListener('moseUp', soltar);
function soltar(event):void {
miObjeto.stopDrag();
trace(miObjeto.dropTarget);
}
Este código 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 ningun objeto, devolverá NULL.


Realiza el ejercicio paso a paso de Arrastre y Orientación de objetos para practicar
conceptos que hemos visto hasta ahora.
Unidad 22. Ejercicio paso a paso: Arrastre y orientación de
objetos
Ejercicio paso a paso.
1. Abre el archivo trigonometria.fla que encontrarás en la carpeta
ejercicios/trigonometría del curso. En él, tenemos dos objetos con los nombre de
instancia pelota y nave.
2. Crea una nueva capa para añadir el código.
3. Añadiremos primero el código para hacer que la pelota se pueda arrastrar y
colocar con el ratón. Selecciona el primer fotograma de la nueva capa y abre el
Panel Acciones (tecla F9). Escribe el siguiente fragmento de código:
4. pelota.addEventListener(MouseEvent.MOUSE_DOWN,
arrastrarPelota);
5. function arrastrarPelota(event:MouseEvent):void { //al
pulsar el botón
6. pelota.startDrag(); //Comenzamos a arrastrar
7. }
8.
9. pelota.addEventListener(MouseEvent.MOUSE_UP,
soltarPelota);
10. function soltarPelota(event:MouseEvent):void { //Al
soltarlo
11. pelota.stopDrag(); //Dejamos de arrastrar
}
12. Ahora haremos que la nave se oriente hacia la pelota en cada momento
(realmente lo que haremos será asociar el código al evento onEnterFrame para que
se refresque a cada vuelta al fotograma). Abre el Panel Acciones y escribe los
siguiente:
13. nave.addEventListener(Event.ENTER_FRAME,
orientarHaciaPelota);
14. function orientarHaciaPelota(event):void {
15. //A partir de las coordenadas de cada
objeto, calculamos el ángulo


16. var radianes:Number = Math.atan2((pelota.y-
nave.y), (pelota.x-nave.x));
17. //Lo convertimos se radianes a grados
18. var
grados:Number=Math.round(radianes*180/Math.PI);
19. //Y rotamos la nave esos grados
20. nave.rotation=grados;
}
Lo que hemos hecho en un principio es, como vimos en la teoría, es calcular el
ángulo que hay entre las coordenadas de la pelota y las de la nave. El ángulo
obtenido, convertido en grados, será lo que hay que rotar (rotation) la nave para
que apunte a la pelota.
Nota: Observa que inicialmente la nave está orientada a la derecha, así que no hará
falta solventar el desfase de ángulo.

Otra cosa que nos será de gran ayuda es poder localizar la posición del ratón. De
este modo podríamos hacer que los objetos se desplacen u orienten hacia el ratón
Para averiguar las coordenadas del ratón sólo tendrás que recurrir a las propiedades
mouseX y mouseY:
var coordenadaX:Number = mouseX;
var coordenadaY:Number = mouseY;

Con todo lo que hemos aprendido podemos ya sustituir el cursor del ratón normal
por uno de nuestro agrado.
Para ello tenemos que escribir muy pocas líneas:
Mouse.hide(); //Ocultamos el cursor verdadero
addEventListener(Event.ENTER_FRAME,cambiarCursor);
function cambiarCursor(event):void {
texto.contador_txt.text="("+mouseX+", "+mouseY+")";


texto.x = mouseX; //Asignamos las coordenadas
texto.y = mouseY; //Al elemento de texto
miCursor.x = mouseX; //Y al clip que hará de cursor
miCursor.y = mouseY;
}
Comenzamos ocultando el cursor verdadero, con el método Mouse.hide();.
En la bliblioteca 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 ratón.
Podemos volver a visualizar el ratón, por ejemplo, porque cambiamos de fotograma,
con el código:
Mouse.show();


















Unidad 22. Juegos (V)
22.4. Interacción del Teclado


Podemos añadir a nuestras películas interacción 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 método .keyCode, que nos
indica la tecla que se ha pulsado. Dependiendo de la que sea, haremos una cosa u otra.
Por ejemplo:
addEventListener(KeyboardEvent.KEY_DOWN,direccion);
function direccion(tecla:KeyboardEvent):void{
//Es importante especificar que es un vento del tipo
KeyboardEvent
//para poder emplear el método .keyCode.
switch (tecla.keyCode){
case Keyboard.RIGHT:
//mover hacia la derecha
break;
case Keyboard.LEFT:
//mover hacia la izquierda
break;
}
}
Los códigos 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 ratón:


Nota: Si no responde al teclado, haz clic primero para que tome el foco.
El codigo que hemos incluido es el siguiente:
var izquierda:Boolean=false;
var derecha:Boolean=false;
miClip.gotoAndStop("parado");

//Detectamos el evento al pulsar tecla, y marcamos
//La dirección del movimiento
addEventListener(KeyboardEvent.KEY_DOWN,direccion);
function direccion(tecla:KeyboardEvent):void {
switch (tecla.keyCode) { //Dependiendo de la tecla,
indicamos
case Keyboard.RIGHT : //una dirección u otra
derecha=true;
break;
case Keyboard.LEFT :
izquierda=true;
break;
}
}

//En el evento onEnterFrame, comprobamos si están activas
//Las variables que indican la direción del movimeinto
miClip.addEventListener(Event.ENTER_FRAME, movimiento);
function movimiento(event):void {
if (derecha) {
miClip.gotoAndStop("derecha");
if (miClip.x<490) {
miClip.x=miClip.x+7;
}


} else if (izquierda) {
miClip.gotoAndStop("izquierda");
if (miClip.x>7) {
miClip.x=miClip.x-7;
}

}
}
//Detectamos cuándo se suelta la tecla
addEventListener(KeyboardEvent.KEY_UP, parar);
function parar(event):void {
derecha=false; //Y paramos el movimiento
izquierda=false;
miClip.gotoAndStop("parado");
}



















Unidad 22. Juegos (VI)
22.5. Interacción entre Elementos
Una de las cosas que más nos interesará realizar es el choque entre elementos en el
Escenario, y ya no el choque físico en sí, sino la coincidencia de dos elementos en un
mismo espacio.


Esto lo podremos evaluar y tratar con los métodos 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 específico (muy útil para detectar los clics del ratón o
donde se encuentra en cada momento):
miClip.addEventListener(MouseEvent.MOUSE_UP,miFuncion);
function miFuncion(event:MouseEvent):void{
if (miClip.hitTestPoint(mouseX,mouseY) {
//coincidencia
}
}
Este código evalúa la posición del ratón a cada clic, si las coordenadas introducidas en
el método hitTestPoint coinciden con el área de miClip se produce colisión.
hitTestPoint admite un tercer parámetro booleano. Éste inidca si la colisión se calcula
con respecto a al forma del elemento (true) a al rectángulo delimitador del objeto (false).
La opción por defecto es esta última.
Cuando queremos evaluar si un objeto "choca" con otro, empleamos el método
hitTestObject:
miClip.hitTestObject(miOtroClip);
En ambos casos, el valor devuelto es true, si hay colision, o false si no.
En desplazamientos utilizaremos mucho esta opción para averiguar si el objeto que
estamos moviendo choca con una pared u otro objeto.
Ten en cuenta que la posición que deberemos evaluar si hace colisión con la pared
debe ser aquella que adoptaría el objeto después de desplazarse. Si lo desplazamos
antes los objetos pueden quedar solapados, y eso, dependiendo del caso, puede no ser
adecuado para nuestro diseño.
Esto complica un poco las cosas, pues deberemos calcular primero dónde estarán las
corrdenadas del objeto tras moverlo y calcular la colisión antes de moverlo.


miPared.hitTestPoint(coorXfinal_Clip, coorYfinal_Clip);
Pero, ¿cómo conocemos las coordenadas de una forma?, ¿cómo averiguo el punto
máximo que alcanza en la esquina abajo derecha?. Como siempre, Flash nos soluciona
esto incorporando un método a los onjetos de visualización que nos devuelve sus
medidas. El método getBounds.
Haz clic y utiliza las flechas para moverte.
Su sintaxis es la siguiente:
miClip.getBounds(objetoReferencia);
En objetoReferencia indicaremos el objeto cuyo sistema de coordenadas
utilizaremos como punto de referencia. Normalmente escribiremos stage, para que las
coordenadas dadas sean respecto a la película en general y no sobre un clip en particular.
El método nos devuleve un objeto Rectangule. Este tipo de objeto define un área
rectangular, y nos permite conocer la posición de sus cuatro lados con las siguientes
propiedades:
.top : lado superior (sería lo mismo que y).
.bottom : lado inferior (sería y + altura del objeto).
.lef : lado izquierdo (sería lo mosmo que x).
.right: lado derecho (sería x más el ancho).
miClip.getBounds(stage).left;
miClip.getBounds(stage).right;
miClip.getBounds(stage).top;
miClip.getBounds(stage).bottom;
Realiza el ejercicio paso a paso de Colisión y Movimiento para practicar este
concepto.
Unidad 22. Ejercicio paso a paso: Colisión y Movimiento
Colisión y Movimiento
Reproduciremos la película que vimos en la teoría:


Ejercicio paso a paso.
1. Abre el archivo colision.fla que encontrarás en la carpeta ejercicios/colision del
curso.
En él encontrarás 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:
3. //definimos las variables que vamos a utilizar
4. //Variables que indican la dirección del movimiento
5. var izquierda:Boolean=false;
6. var derecha:Boolean=false;
7. var subir:Boolean=false;
8. var bajar:Boolean=false;
9. var velocidad:Number=1;//Espacio que se desplazará
10.
11. //Al pulsar una tecla...
12. stage.addEventListener(KeyboardEvent.KEY_DOWN,direc
cion);
13. //Averiguamos la tecla pulsada para decidir la
dirección
14. function direccion(tecla:KeyboardEvent):void {
15. switch (tecla.keyCode) {
16. case Keyboard.RIGHT :
17. derecha=true;
18. break;
19. case Keyboard.LEFT :
20. izquierda=true;
21. break;
22. case Keyboard.UP :
23. subir=true;
24. break;
25. case Keyboard.DOWN :
26. bajar=true;
27. break;


28. }
29. }
30.
31. //Al soltar una tecla
32. stage.addEventListener(KeyboardEvent.KEY_UP,parar);
33. //Anulamso el movimiento en dirección de la tecla
34. function parar(tecla:KeyboardEvent):void {
35. switch (tecla.keyCode) {
36. case Keyboard.RIGHT :
37. derecha=false;
38. break;
39. case Keyboard.LEFT :
40. izquierda=false;
41. break;
42. case Keyboard.UP :
43. subir=false;
44. break;
45. case Keyboard.DOWN :
46. bajar=false;
47. break;
48. }
}
Este código se parece mucho al que vimos en la teoría. Lo único que hacemos es
obtener qué tecla se ha pulsado y en función de la dirección, activamos una
variable booleana que indica que se ha de mover el objeto en esa dirección.
Cuandos e suelte la tecla, hacemos lo mismo para desactivar la variabe.
49. Vamos ahora con el movimiento. Lo haremos en el evento "enterFrame" del objeto
que se mueve. Añade el siguiente código:
50. //En el enterFrame del clip, comprobamos la
posición futura, y si no hay impacto, movemos


51. miClip.addEventListener(Event.ENTER_FRAME,mover);
52. function mover(event):void {
53. //Utilizamos un objeto rectángulo para que
nos sea más cómodo acceder a las propiedades
54. var rect:Rectangle=
miClip.getBounds(stage);
55. if (bajar) { //Comprobamos la colisión
abajo - izquierda y abajo - derecha, aumentando abajo
56. if (!(fondo.hitTestPoint(rect.left,
rect.bottom+velocidad, true) ||
fondo.hitTestPoint(rect.right, rect.bottom+velocidad,
true))) {
57. miClip.y+=velocidad; //Si no
hay colisión, cambiamos la posición del objeto.
58. }
59. }
60. if (subir) { //Comprobamos la colisión
izquierda - arriba y derecha - arriba, aumentando arriba
61. if (!(fondo.hitTestPoint(rect.left,
rect.top-velocidad, true) ||
fondo.hitTestPoint(rect.right, rect.top-velocidad,
true))) {
62. miClip.y-=velocidad;
63. }
64. }
65. if (izquierda) { //Comprobamos la colisión
izquierda - arriba e izquierda - abajo, aumentando
izquierda
66. if (!(fondo.hitTestPoint(rect.left-
velocidad, rect.top, true) ||
fondo.hitTestPoint(rect.left-velocidad, rect.bottom,
true))) {
67. miClip.x-=velocidad;
68. }
69. }
70. if (derecha) {//Comprobamos la colisión
derecha - arriba y derecha - abajo, aumentando derecha
71. if
(!(fondo.hitTestPoint(rect.right+velocidad, rect.top,


true) || fondo.hitTestPoint(rect.right+velocidad,
rect.bottom, true))) {
72. miClip.x+=velocidad;
73. }
74. }
}
Parece un poco complicado pero en esencia es más largo, pero sencillo. Para cada uno
de los movimiento (arriba, abajo, izquierda y derecha) tendremos que evaluar si se
produce colisión con el objeto miClip y el clip fondo.
Pero no bastará con hacerlo sólo de una esquina, veamos un ejemplo para verlos con
más 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 evaluásemos el choque con la esquina
inferior izquierda e intentásemos realizar un movimiento hacia abajo, ¡éste se realizaría!
Y en definitiva es lo que queremos evitar.
Hemos empleado un objeto Rectángulo al que le hemos dados las medidas del objeto
para que nos sea más cómodo trabajar. Por ejemplo, para acceder a la parte superior,
tendríamos que escribir miClip.getBounds(fondo).top cada vez, mientras que así
solo ponemos rect.top.
Observa también que para realizar el hitTestPoint hemos tenido en cuenta la posición
que adoptará el objeto después del movimiento (sumándole la velocidad, o lo que es lo
mismo, el número de píxeles que se desplaza el objeto a cada pulsación). Además, le
hemos enviado un tercer parámetro true para que tenga en cuenta la forma del objeto (del
fondo).
Unidad 22. Juegos (VII)


22.6. Funciones Avanzadas
También veremos otras opciones que nos ayudarán mucho a la hora de crear juegos.
Una de ellas es la de la posibilidad de darle aleatoriedad a los componentes.
Podemos utilizar la función que incorpora Flash Math.random() que devuelve un
número pseudo-aleatorio entre 1 y 0.
Su uso es simple sólo deberás escribir:
var miNumero:Number = Math.random();
Puedes comprobarlo probando el siguiente ejemplo:
trace(Math.random());
trace(Math.random());
trace(Math.random());
trace(Math.random());
Es tan útil que a raíz de esta función se ha creado este trozo de código que casi
utilizarás en la mayoría de tus películas que contengan componentes aleatorios:
function num_aleatorio (min:Number ,max:Number):Number {
return (Math.floor(Math.random()*(max-min+1))+min);
}
Esta función te devuelve un número aleatorio dentro de un rango:
var miNumero:Number = num_aleatorio(1, 100);
En este ejemplo se almacenará un número de 1 a 100 en la variable miNumero.
En el juego de ejemplo que estamos viendo hemos utilizado esta función para generar
de froma aleatoria desde donde parten los proyectiles, dónde caen, y su escala.
var escala:Number = num_aleatorio(0, 2); //escala influirá en el
tamaño y la velocidad
this.velocidad = velocidad_base+nivel*1.5+(2-escala);


this.width = this.width*((10-escala)/10);
this.height = this.height*((10-escala)/10);
var puntoSalida:Number = num_aleatorio(this.width/2, ancho-
this.width/2); //Zona de salida
this.x=puntoSalida;
this.y = 0;
var puntoImpacto:Number = num_aleatorio(ancho*(1/4),
ancho*(3/4));//Zona de impacto
Como ves tenemos randomizados muchos de los procesos. El primer num_aleatorio lo
utilizamos para calcular la escala, un valor entre 2 y 0 que influirá en el tamaño del
proyectil y su velocidad. El segundo num_aleatorio calcula la posición desde la quer
parte el proyectil, y el último num_aleatorio calcula la posición hacia donde se dirije.
Además, en el juego la hemos empleado más 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
distina.

Otra de las funciones que te vendrán muy bien es la de dotar de velocidad a los
movimientos de los objetos.
Observa el código que hemos introducido en el juego:
this.velocidad = velocidad_base+nivel*1.5+(2-escala);
En la definición de la clase Proyectil, hemos creado una propiedad velocidad que
calculamos en función 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 subiendod e nivel.
De ahí que cuando asignamos el movimiento del elemento:
this.y += this.velocidad;
Lo hacemos refiriéndonos a la velocidad, así podemos variarla en cualquier momento
aumentándola o reduciéndola según nuestros propósitos.


Por último veremos algo que nos permitirá mostrar información a los usuarios para
que ellos tengan conocimiento de cómo se está desarrollando la partida. Esto lo haremos
con los textFields. Los textFields pueden ser elementos que hayamos creado antes de
publicar la película, 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 dinámicamente de la siguiente manera:
estadisticas_txt.text = "Estas son las estadísticas del juego";
Simplemente los declararemos como texto dinámico e iremos modificando su
contenido. Pero, ¿Y si queremos crear un campo de texto mediante ActionScript?
Muy sencillo, te bastarán unas pocas líneas para conseguirlo:
//Creamos el formato
var miFormato:TextFormat = new TextFormat();
//Definimos el formato;
miFormato.bold = true;
miFormato.font = "Arial";
miFormato.size = 12;
miFormato.color = 0xFFFFFF;
miFormato.align = "left";

//Creamos el campo de texto
var estadisticas_txt:TextField = new TextField();
//Definimos la propiedades del campo de texto
estadisticas_txt.name = "estadisticas_txt";
estadisticas_txt.defaultTextFormat = miFormato; //asignamos el
formato
estadisticas_txt.selectable = false;
estadisticas_txt.x = 10;
estadisticas_txt.y = 0;
estadisticas_txt.width = 530;
estadisticas_txt.height = 22;


estadisticas_txt.text = "Estas son las estadísticas del juego";

//Lo añadimos a la lista de visualización
addChild(estadisticas_txt);
En nuestro ejemplo, por comodidad no creamos todo el campo de texto desde el
código.
Puedes ver que hemos creado un objeto llamado miFormato que es del tipo formato de
texto, con unas características básicas que podremos aplicar sobre cualquier texto de
nuestra película. Luego mediante hemso creado otro objeto estadisticas_txt del tipo
campo de texto, que será el que mostrará el texto..
Ahora sólo hará falta remitirse a la propiedad text del texto que hemos creado para
darle un valor, y como gemos visto antes.

Las propiedades de formato de texto que hemos utilizado son las más comunes, si
necesitas un listado completo de ellas puedes visitar nuestra sección avanzada.
Unidad 22. Avanzado: Propiedades del formato de texto
Aquí podrás encontrar una referencia a todas las propiedades del Objeto TextFormat:
align: indica el alineamiento del texto. Puede tomar los valores: "left", "right",
"center" y "justify".
bold: puede tomar los valores true o false. Determina si el texto se mostrará en
negrita.
italic: puede tomar los valores true o false. Indica si el texto se verá en cursiva.
underline: puede tomar los valores true o false. Determina si el texto aparecerá
subrayado.
color: determina el color del texto, debe estar escrito en hexadecimal, por ejemplo
0x000000.
font: indica el nombre de la fuente a utilizar (ej. "Courier", "New Times Roman",
etc...).
size: determina el tamaño del texto en puntos.
bullet: puede tomar los valores true o false. Si se activa esta opción se mostrará el
texto como una lista no ordenada. Cada párrafo será un elemento de la lista.
indent: determina el espacio de sangría de la primera línea del texto.
blockindent: determina el espacio de sangría de un bloque completo de texto.


kerning: indica el ajuste entre caracteres del texto.
leading: determina el interlineado. Introduce un valor en píxeles.
letterSpacing: indica el espacio entre las letras del texto.
leftMargin: determina la distancia en puntos del bloque de texto al margen
izquierdo.
rightMargin: determina la distancia en puntos del bloque de texto al margen
derecho.
tabStops: crea tabulaciones personalizadas en el texto. Deberás introducir las
tabulaciones como \t cuando escribas. Deberás introducir una matriz de números
positivos, cada uno de ellos sera un punto de tabulación.
url: indica el vínculo web que se le aplicará al texto.
target: determina el destino que tendría el vínculo en el campo url (si lo hubiese).
Puede tomar los valores "blank", "self", "parent" y "top".
Antes de realizar los ejercicios finales, te recomendamos seguir el ejercicio paso a
paso Crear una clase en ActionScript.
Unidad 22. Ejercicio paso a paso: Crear una clase en
ActionScript
Ejercicio
1. Abre el archivo bolas.fla que encontrarás en la carpeta ejercicios\bolas\.
2. Vamos a exportar el símbolo de la bola para AS. En la biblioteca, haz clic derecho
sobre el símbolo bola y elige Propiedades.
3. Marca la opción Exportar para ActionScript, y en el nombre de la Clase asígnale
ClaseBola.
4. Vamos a añadir bolas con el botón btn_agregar_bolas. Las mostramos utilizando
un contenedor. Escribe el siguiente código en el primer fotograma, en el panel
Acciones:
5. var miContenedor:Sprite=new Sprite;//Aquí mostraremos las
bolas
6. addChild(miContenedor); // Lo agregamos a la escena
7.
8. btn_agregar_bola.addEventListener('click', agregarBola);
9. function agregarBola(event):void {//Función que añade
bolas
10. var bola:ClaseBola=new ClaseBola();
//Creamos un nuevo objeto ClaseBola
11. miContenedor.addChild(bola); //Y lo
agregamos al contenedor


}
Puedes probar el código. Comprobarás que se agregan bolas, pero siempre en la
esquina superior izquierda.
12. Vamos a añadir funcionalidad a la clase de las bolas. En el menú Archivo, pulsa en
Nuevo y elige Archivo de ActionScript. Pulsa Aceptar.
13. En el archivo, escribe el siguiente código:
14. package {
15. //Aquí importaremos lo que nos haga falta
16. import flash.display.MovieClip;
17. public class ClaseBola extends
flash.display.MovieClip {
18.
19. //Aquí irá el código perteneciente
a la clase
20. }
}
Observa que hemos dado a la clase el mismo nombre (ClaseBola) que indicamos al
exportar el símbolo a AS. Además hemos indicado que la nueva clase extenderá
(extends) a la clase MovieClip. Esto quiere decir que nuestra clase tendrá todos los
métodos y propiedades de los MovieClip, además de los que nosotros creemos.
Como emplearemos la clase MovieClip, debemos de importarla.
21. Guarda el archivo como ClaseBola.as, en la misma carpeta que el archivo .fla. Es
muy importante guardarlo con el nombre de la clase.
22. Vamos a implementar el código de la clase. Escribe el siguiente código:
23. package {
24. import flash.display.MovieClip;
25. import flash.geom.Rectangle;//Como usaremos
un Rectangle, hay
26. //que
importarlo
27. public class ClaseBola extends
flash.display.MovieClip {
28. //PROPIEDADES


29. var angulo:Number;//Ángulo inicial,
será aleatorio
30. private var
direccionX:Number=1;//Cambiendo el signo, podremos
31. private var
direccionY:Number=1;//invertir la dirección
32. private var limites:Rectangle;//El
área en el que rebotan las pelotas
33. var
velocidadMaxima:Number=45;//Máx. velocidad a la que
podemos acelerar
34. public static var
velocidadBase:Number=10;// Velocidad inicial
35. //MÉTODOS
36. public function
ClaseBola(miFondo:MovieClip) {
37. //Método constructor. Se
ejecutará con el new
38.
limites=miFondo.getBounds(stage);//Tomamos las
dimensiones del fondo
39.
angulo=num_aleatorio(0,180);//Calcualsmo un ángulo
aleatorio
40.
angulo=Math.PI/180*angulo;//Y lo pasamos a radianes
41.
this.y=limites.top+limites.height/2;//Calculamos la
posciión inicial
42.
this.x=limites.left+limites.width/2;//centrada en
el fondo
43. //Y utilizamos el evento
'enterFrame' para mover la pelota
44.
this.addEventListener('enterFrame', moverPelota);
45. }
46.
47. public function moverPelota(event)
{


48. //Impedimos que se pueda
superar la velocidad máxima
49. if
(velocidadBase>velocidadMaxima) {
50.
velocidadBase=velocidadMaxima;
51. }
52.
53. var futuraPosicion:Number;
54. //Calculamos la posición Y
futura. Y si se sale por arriba o aabajo,
55. //lo invetimos
56.
futuraPosicion=this.y+Math.sin(angulo)*direccionY*v
elocidadBase;
57. if
(futuraPosicion<limites.top+20||futuraPosicion>limites.bo
ttom-20) {
58. direccionY*=-1;
59. }
60. //Calculamos la posición Y
futura. Y si se sale por arriba o aabajo,
61. //lo invetimos
62.
futuraPosicion=this.x+Math.cos(angulo)*direccionX*v
elocidadBase;
63. if
(futuraPosicion<limites.left+20||futuraPosicion>limites.r
ight-20) {
64. direccionX*=-1;
65. }
66.
67. //Movemos la pelota
68.
this.y+=Math.sin(angulo)*velocidadBase*direccionY;
69.
this.x+=Math.cos(angulo)*velocidadBase*direccionX;
70. }


71. function num_aleatorio(min:Number
,max:Number):Number {
72. return
(Math.floor(Math.random()*(max-min+1))+min);
73. }
74. }
}
Hemos empleado tres métodos: el llamado método constructor, que para que sea
tal debe de tener el mismo nombre que la clase, se encarga de inciar las
propiedades: calcula de forma aleatoria el ángulo, y se encarga de asignar el
movimiento en el evento enterFrame.
El segundo método, moverPelota, básicamente se encarga de calcular si al mover
la pelota, esta saldrá de los límites horizontales o verticales, y de ser así, invierte la
dirección en ese eje.
El último método ya lo conocemos. num_aleatorio se encarga de calcular un
número aleatorio dentro de un rango.
75. Guarda el archivo antes de intentar probarlo.
76. Tenemos que realizar un cambio. Volvemos a la película, al código del fotograma 1.
Cambia el código que crea las bolas (var bola:ClaseBola=new
ClaseBola();) por var bola:ClaseBola=new ClaseBola(fondo); ya que
en la definición de la calse hemos especificado que al crear el objeto le pasaremos
como argumento el MovieClip que ahce de fondo, para que tome sus dimensiones.
fondo es el nombre de la instancia del símbolo.
77. Pruébalos pulsando Ctrl + Intro. Observa como puedes añadir bolas, y rebotan
por las paredes.
78. Ahora vamos a eliminar las bolas. Crea el siguiente método en la clase ClaseBola:
79. public function borrar() {
80. //Antes de borrar, quitamos
sus eventos
81.
this.removeEventListener('enterFrame',
moverPelota);
82. //reproducimos la animación
83. this.gotoAndPlay(2);
84. //al finalizar la animación,
lanzará el evento 'borrame'
}


Lo que hace este método es quitar el evento enterFrame, ya que es muy
recomendable quitar sus eventos antes de eliminar un elemento. Después, va al
segundo fotograma de la bola, lo que inicia una animación que la hace desaparecer.
Cuando llegue al último fotograma, lanzará el evento 'borrame', porque así está
programado en el símbolo bola.
85. Ahora, sólo tenemos que llamar a este método al pulsar el botón btn_quitar_bola.
Lo haremos sobre la última bola añadida al contenedor. En la película, en la capa
Acciones escribe el código:
86. btn_quitar_bola.addEventListener('click',
quitarBola);
87. function quitarBola(event):void {
88. if (miContenedor.numChildren) { //Si hay
bolas quitamos una
89. //Convertimos el último elemento en un
objeto ClasBola y llamamos a su
90. //método borrar()
91.
ClaseBola(miContenedor.getChildAt(miContenedor.numC
hildren-1)).borrar();
92. }
}
Observa que empleamos ClaseBola(objeto) para convertir un objeto genérico a
nuestra clase y que pueda utilizar sus métodos.
93. Tenemos que estar a la escucha del evento borrame, y borrar el elemento que los
produzca. Escribe el siguiente código:
94. addEventListener('borrame', borrarBola); //Cuando
se produzca 'borrame'
95. function borrarBola(e:Event):void { //Eliminamos el
objeto que lo produzca
96. miContenedor.removeChild(ClaseBola(e.target
));
}
97. Ahora, añadiremos el código de los botones que nos permiten acelerar y decelerar
las bolas:


98. btn_aumentar_velocidad.addEventListener('click',
aumentarVelocidad);
99. function aumentarVelocidad(event):void {
100. ClaseBola.velocidadBase*=1.1; //Aumentamos
la velocidad un 10%
101. }
102.
103. btn_reducir_velocidad.addEventListener('click',
reducirVelocidad);
104. function reducirVelocidad(event):void {
105. ClaseBola.velocidadBase*=0.9; // Reducimos
la velocidad un 10%
}
Al crear la clase, hemos declarado la propiedad velocidadBase como public
static var velocidadBase:Number=10;. Declararla como public indica que
podemos acceder a ella. En cambio, declararla como private limita su uso a sólo
dentro de la clase, no podemos acceder a ella poniendo objeto.propiedad.
Normalmente las propiedades son independientes para cada objeto, salvo si, como
en este caso, la declaramos como static. Esto hace que si la cambiamos, cambie
para todos los objetos creados de la clase, y que podamos utilizarla directamente
con en el nombre de la clase, sin tener que crear un objeto específico.
106. Guarda los archivos y pruébalo.

Ejercicios unidad 22: Juegos
Ejercicio 1: Proyectiles


Utiliza el archivo fuente arma.fla que encontraras en la carpeta ejercicios/arma del
curso.
Tu tarea consistirá en crear el código necesario para que el juego funcione. Deberás
seguir las siguientes instrucciones:
Crear un cursor personalizado.
Generar el arma importándola a través de código desde la Biblioteca.


Generar, también con ActionScript, los bloques que la rodearán.
Hacer que el arma siga al ratón, para que podamos apuntar con él.
Crear un bloque de bonus cada vez que se destruyan 4 proyectiles.
Subir de nivel cada vez que se destruyan 40 proyectiles.
Disparar un rayo con el arma cada vez que se pulsa la tecla Espacio.
Generar mediante ActionScript las estadísticas del juego incluyendo el nivel en
el que nos encontramos y el número de proyectiles destruidos.
Crear proyectiles aleatoriamente. Deberás controlar si chocan contra un bloque,
un rayo o el arma. ¡Si salen de la pantalla deberás eliminarlos!
Ayuda ejercicios unidad 22: Juegos
Ejercicio 1: Proyectiles
1. Abre el archivo arma.fla que encontrarás en la carpeta ejercicios/arma del curso.
2. Selecciona el objeto arma de la Biblioteca, haz clic derecho sobre él y selecciona
Propiedades
3. Si no se ven todas las propiedades, pulsa en Avanzadas.
4. Activa la opción Exportar para ActionScript.
5. En Clase, dale el nombre Arma y pulsa Aceptar.
6. Nos aparecerá un mensaje de aviso, pulsamso Aceptar.
7. Selecciona el objeto bloque de la Biblioteca, haz clic derecho sobre él y
seleccionaPropiedades.
8. Activa la opción Exportar para ActionScript, dale la clase Bloque y pulsa Aceptar.
9. Selecciona el objeto bonus de la Biblioteca, haz clic derecho sobre él y selecciona
Propiedades.
10. Activa la opción Exportar para ActionScript, dale la clase BloqueBonus y pulsa
Aceptar.
11. Selecciona el objeto cursor de la Biblioteca, haz clic derecho sobre él y selecciona
Propiedades.
12. Activa la opción Exportar para ActionScript, dale la clase Cursor y pulsa Aceptar.
13. Selecciona el objeto proyectil1 de la Biblioteca, haz clic derecho sobre él y
selecciona Propiedades.
14. Activa la opción Exportar para ActionScript, dale la clase Proyectil1 y pulsa
Aceptar.
15. Selecciona el objeto proyectil2 de la Biblioteca, haz clic derecho sobre él y
seleccionaPropiedades.
16. Activa la opción Exportar para ActionScript, dale la clase Proyectil2 y pulsa
Aceptar.
17. Selecciona el objeto proyectil3 de la Biblioteca, haz clic derecho sobre él y
seleccionaPropiedades.
18. Activa la opción Exportar para ActionScript, dale la clase Proyectil3 y pulsa
Aceptar.


19. Selecciona el objeto rayo de la Biblioteca, haz clic derecho sobre él y selecciona
Propiedades.
20. Activa la opción Exportar para ActionScript, dale la clase Disparo y pulsa
Aceptar.

Ahora que hemos preparado todos los objetos para poder tratarlos desde
ActionScript pasaremos a escribir el código.
Lo primero que haremos serla crear las clases que utilizaremos, en archivos
ActionScript.
21. Haz clic en el menú Archivo → Nuevo, selecciona Archivo ActionScript y pulsa
Aceptar.
22. Se abre un archivo en blanco. Escribe el siguiente código para crear la clase que
tendrá los métodos para los disparos:
package
{ //Importamos las clases necesarias
import flash.display.MovieClip;
import flash.display.DisplayObject;
//Y creamos nuestra clase como una subclacse
(extends) de MovieClip,
//para que disponga de sus métodos
public class Disparo extends
flash.display.MovieClip
{
public function disparar(arma:Arma){
//Este método asigna al disparo la rotación
y posición del arma que lo disparará
this.rotation= arma.rotation;
this.x=arma.x;
this.y=arma.y;
}
public function avanzar (){
//Este método mueve el disparo por
la pantalla, con el ángulo de rotación
var radianes:Number =
Math.PI/180*this.rotation;
this.x += Math.sin(radianes)*13;
this.y -= Math.cos(radianes)*13;
}
public function esta_dentro (alto:Number,
ancho:Number){
//Este método indica si el disparo sigue
dentro de la pantalla,
//Si no se ha salido ni por arriba, ni
abajo, ni por la izquierda o derecha
return !(this.x < 0 || this.y < 0
|| this.x > ancho || this.y > alto)
}
}
}
23. Guarda el archivo junto a arma.fla, llamándolo Disparo.as. Es importante que el
nombre sea el de la clase.
24. Crea otro nuevo archivo ActionScript para la clase que llevará los métodos y
propiedades de los proyectiles.


25. Escribe el siguiente código:
26. package
27. { //Importamos las clases necesarias
28. import flash.display.MovieClip;
29. import flash.display.DisplayObject;
30. //Y creamos nuestra clase como una subclase
(extends) de MovieClip, para que disponga de sus métodos
31. public class Proyectil extends
flash.display.MovieClip
32. {
33. private static var
velocidad_base:Number = 3; //Velocidad base de los
proyectiles
34. private var velocidad:Number; //
Velocidad del proyectil
35. private var _explotando:Boolean =
false; //Indica si ha comenzado a explotar
36.
37. public function
disparar(nivel:Number, ancho:Number, alto:Number){
38. //Le pasamos como argumentos
el nivel actual del juego, y el ancho y alto del área de
disparo
39. //Crearemos, para cada tipo
de proyectil, tres escalas posibles, de forma aleatoria.
40. var escala:Number =
num_aleatorio(0, 2); //escala influirá en el tamaño y la
velocidad
41. //Calculamos la velocidad,
sumando la velocidad base + la parte que depende del
nivel + la
42. // que depende de la escala
43. velocidad =
velocidad_base+nivel*1.5+(2-escala);
44. //calculamos el nuevo tamaño
en función de la escala (0 = tamaño original, 2= 80%)
45. this.width =
this.width*((10-escala)/10);


46. this.height =
this.height*((10-escala)/10);
47. //Calcualmos, de forma
aleatoria el punto de salida del proyectil en la parte
superior
48. //Dejamos la mitad del ancho
del proyectil como margen para que no salga una parte
fuera de la pantalla
49. var puntoSalida:Number =
num_aleatorio(this.width/2, ancho-this.width/2); //Zona
de salida
50. //Asignamos al proyectil su
posición inicial
51. this.x=puntoSalida;
52. this.y = 0;
53. //Calculamos, de forma
aleatoria, el punto de impacto. Limitamos la zona de
posible impacto, dejando
54. //1/4 del ancho de margen a
cada lado, para que la mayoría de proyectiles vayan hacia
el arma
55. var puntoImpacto:Number =
num_aleatorio(ancho*(1/4), ancho*(3/4));
56. //Sabiendo las coordenadas
de salida e impacto, podemos utilizar calcular el ángulo
con Math.atan2
57. //Como el resultado es en
radianes, lo convertimos a grados (radianes*180/Math.Pi)
58. //Esos grados son la
rotación que daremos al objeto
59. this.rotation=
270+(Math.atan2( alto - this.y,puntoImpacto- puntoSalida)
* 180/Math.PI);
60. }
61.
62. public function avanzar (){
63. //Este método avanza el
proyectil por la pantalla
64. //Convertimos el ángulo de
rotación a radianes


65. var radianes:Number =
Math.PI/180*this.rotation;
66. //Y ayudándosnos de fórmulas
triginométricas, sumamos la velocidad la posición
67. this.x -=
Math.sin(radianes)*(velocidad);
68. this.y +=
Math.cos(radianes)*(velocidad);
69. }
70.
71. public function esta_dentro
(alto:Number){
72. //averiguaremos si el proyectil
sigue de la pantalla, si no ha llegado abajo
73. return (this.y < alto);
74. }
75. public function explotar (){
76. //Este método reproduce la
animación de la explosión del proyectil
77. if (!_explotando){
78. this.gotoAndPlay("hit");
79. //Cuando comienza a
explotar, cambia _explotando
80. _explotando = true;
81. }
82. }
83. public function
explotando():Boolean{
84. //Devuelve True si el
proyectil está explotando
85. return _explotando;
86. }
87. private function num_aleatorio
(min:Number ,max:Number){
88. //Genera un númeor aleatorio dentro
de un rango


89. max++;
90. max = max-min;
91. return
min+(Math.floor((Math.random()*(max*10)))%max);
92. }
93. }
}
94. Guarda el archivo llamándolo Proyectil.as, en la misma carpeta que arma.fla y
Disparo.as.
95. En la biblioteca tenemos tres tipos de proyectil, proyectil1, proyectil2 y proyectil3,
cada uno con una clase distinta. Vamos a hacer que todos compartan los métodos
de la clase Disparo. Para ello, accede a sus Propiedades haciendo clic derecho
sobre proyectil1.
96. En el campo Clase base, cambia flash.display.MovieClip por Disparo y pulsa
Aceptar.

97. Vamos a comenzar con el primer fotograma. En la capa fondo, selecciona el botón
jugar, y en el panel de Propiedades dale btn_jugar como Nombre de instancia.
98. Haz clic sobre el primer fotograma de la capa acciones y abre el Panel Acciones
(tecla F9).
99. Escribe el siguiente evento para que al pulsar el botón, comience la partida:
100. stop()
101.
102. btn_jugar.addEventListener(MouseEvent.MOUSE_UP,empe
zar);
103. function empezar(event:MouseEvent):void{
104. gotoAndStop("jugar");
}
105. Haz clic sobre el primer fotograma de la capa acciones y abre el Panel
Acciones.
106. Escribe el siguiente bloque de código para inicializar las variables que
utilizaremos y declarar los objetos generales:
107. //Parámetros generales del juego


108. var hits:Number = 0; //Impactos, proyectiles
destruidos
109. var level:Number = 1; // Nivel
110. var num_bonus:Number = 4; //Cada cuantos hits
aparece el bonus
111. var num_bloques:Number = 12; //número de bloques
iniciales
112. var numRayos:Number = 0; // número de rayos
disparados
113. var maxRayos:Number = 3; //Número máximo de rayos a
la vez
114. var fingame:Boolean = false; //Indica si ha acabado
el juego
115.
116. var alto:Number = 580; //Alto del área de juego
117. var ancho:Number = 550; //Ancho del área de juego
118.
119. //Objetos generales
120. var arma:Arma = new Arma; // arma (objeto de la
calse Arma)
121. var cursor:Cursor = new Cursor; //movieClip que se
mostrará como cursor
122.
123. var zonaJuego:Sprite = new Sprite; //Contenedor en
que mostraremos
//Los elementos del juego
124. Escribe el siguiente bloque de código para crear la función que inicia el
proceso:
125. function comenzarPartida() { //Función que comienza
la partida
126. Mouse.hide(); //Ocultamos el cursor
127. zonaJuego.addChild(cursor);
128. cursor.addEventListener(Event.ENTER_FRAME,s
eguirCursor);


129. //Cada vez que cursor entre en un frame,
hacemos que siga al ratón
130.
131. //Añadimos los objetos:
132. //Añadimos los bloques iniciales
133. //Lo hacemos los primeros para que queden
por debajo del resto
134. bloques_iniciales();
135. //Asignamos la posición inical al arma y la
generamos.
136. arma.x = ancho/2;
137. arma.y = alto-30;
138. zonaJuego.addChild(arma);
139. //Hacemos que cada vez que se mueva el
cursor, el arpa apunte hacia él
140. addEventListener(MouseEvent.MOUSE_MOVE,apun
tarCursor);
141.
142. //Agragamos a la escena el evnto que
disparará cunado se pulse espacio
143. stage.addEventListener(KeyboardEvent.KEY_DO
WN,disparar);
144.
145. //E iniciamos el lanzamiento de proyectiles
146. zonaJuego.addEventListener(Event.ENTER_FRAM
E,lanzarProyectil);
147. //Utilizamos el evento Enter_Frame para que
se repita constantemente
148.
149. //Añadimos el contenedor en el que se
mostrarán los elementos de la partida.
150. //Lo hacemos en la posición 1 para que
quede enciam del fondo, pero debajo
151. //de la banda superior.
152. this.addChildAt(zonaJuego, 1);
153.


154. //Actualizamos las estadísticas para que se
muestre el marcador a 0
155. actualizarEstadisticas();
}
156. Hemos asignado a ciertos eventos las funciones seguirCursor, y
apuntarCursor, que harán que el cursor siga al ratón y que el arma apunte al
cursor. Las definimos con este bloque de código:
157. function seguirCursor(event):void{
158. cursor.x=mouseX; //Nuestro cursor toma las
coordenadas del ratón
159. cursor.y=mouseY;
160. }
161. function apuntarCursor(event:MouseEvent):void{
162. //Calcula el ángulo de rotación del arma
para que apunte al cursor
163. var xdif:Number = mouseX - arma.x;
164. var ydif:Number = mouseY - arma.y;
165. var radianes:Number = Math.atan2(ydif, xdif);
166. //El resultado obtenido es en radianes. Lo
convertimos a grados
167. var angulo:Number = radianes*180/Math.PI;
168. angulo = angulo + 90;
169. arma.rotation = angulo;
}
170. Definimos la función que crea los bloques iniciales (bloques_iniciales(). Y
de paso, por tener el código ordenado, creamos también las que tratan los bloques
bonus. Escribe el siguiente código:
171. //Bloques
172. function añadir_bloque (x:Number, y:Number):void {


173. //Crea un nuevo bloque en las
coordenadas dadas
174. var bloque:Bloque = new Bloque;
175. bloque.x = x;
176. bloque.y = y;
177. zonaJuego.addChild(bloque);
178. }
179.
180. function bloques_iniciales ():void{
181. //Genera los bloques iniciales
182. var x:Number;
183. var y:Number;
184. for (var i:Number =0; i<num_bloques; i++) {
185. x =0; //calculamos x
186. y =0; //calculamos y
187. if (i<3) {
188. y = 550;
189. x = i*50+200;
190. } else if (i<7) {
191. y = 525;
192. x = (i-3)*50+175;
193. } else if (i<10) {
194. y = 500;
195. x = (i-7)*50+200;
196. } else if (i<=11) {
197. y = 475;
198. x = (i-10)*50+225;
199. } //Y lo añadimos
200. añadir_bloque(x, y);
201. }
202. }


203.
204. function bonus() {
205. //Crea un bloque Bonus en la esquina
inferior izquierda de la pantalla
206. var bloque:BloqueBonus = new BloqueBonus;
207. bloque.x = 0;
208. bloque.y = 550;
209. bloque.addEventListener(MouseEvent.MOUSE_DO
WN, arrastrar);
210. bloque.addEventListener(MouseEvent.MOUSE_UP
, soltar);
211. zonaJuego.addChildAt(bloque,zonaJuego.getCh
ildIndex(arma));
212. }
213.
214. function arrastrar(event:Event):void {
215. //Al hacer clic sobre un BloqueBonus,
comenzamos a arrastralo
216. event.target.startDrag()
217. }
218.
219. function soltar(event:Event):void {
220. //Al soltar el botón del ratón del
BloqueBonus que estamos arrastrando
221. var bloque:BloqueBonus =
BloqueBonus(event.target);
222. //Dejamos de arrastrar
223. bloque.stopDrag()
224. //Y corregimos su posición para que queden
alineados
225. var correccion_par:Number = 0;
226. if (bloque.y<487) {
227. bloque.y = 475;
228. correccion_par = 25;


229. } else if (bloque.y<=512) {
230. bloque.y = 500;
231. } else if (bloque.y<=538) {
232. bloque.y = 525;
233. correccion_par = 25;
234. } else {
235. bloque.y = 550;
236. }
237. var aux_coc:Number =
Math.round(bloque.x/50);
238.
239. bloque.x = aux_coc*50-correccion_par;
240. }
241.
242. function quitar_bloqueBonus (bloque:BloqueBonus) {
243. //Quita los eventos del bloque bonus
244. bloque.removeEventListener(MouseEvent.MOUSE
_DOWN, arrastrar);
245. bloque.removeEventListener(MouseEvent.MOUSE
_UP, soltar);
246. if(contains(bloque)) { //Y lo quita
247. zonaJuego.removeChild(bloque);
248. }
}
249. Escribe la función que actualizará las estadísticas :
250. //Estadísticas
251. function actualizarEstadisticas(){
252. if (hits>0) {
253. if ((hits%40) == 0) {


254. level++; //aumentamos el
nivel cada 40 aciertos
255. }
256. if ((hits%num_bonus) == 0) {
257. bonus(); //Creamos un bloque
cada num_bonus aciertos
258. }
259. }
260. //Actualizamos el marcador de estadísticas
261. estadisticas_txt.text="Aciertos:
"+hits+"\t"+"Nivel:"+level;
}
262. Ahora escribe el código que nos permitirá disparar el arma, mover el
disparo y quitarlo cuando sea necesario.
263. //DISPAROS DEL ARMA
264. function disparar(tecla:KeyboardEvent):void{
265. //El evento capturado se produce al pulsar
el teclado (cualquier tecla)
266. if (tecla.keyCode == Keyboard.SPACE) {
//Comprobamos si la tecla es Espacio
267. if (numRayos < maxRayos) {//Si no
hemos alcanzado el número max. de rayos
268. var miRayo:Disparo = new
Disparo; //Creamos un Disparo
269. miRayo.disparar(arma); //Lo
disparamos
270. //Y lo añdimos a nuestro
contenedor, para que se muestre
271. zonaJuego.addChildAt(miRayo,
zonaJuego.getChildIndex(arma));
272. numRayos++; //Aumentamos el
número de rayos disparados
273. //Y en el evento ENTER_FRAME
del rayo le asignamos la función que lo moverá


274.
miRayo.addEventListener(Event.ENTER_FRAME,
mover_disparo);
275. }
276. }
277. }
278. function mover_disparo(event:Event):void{
279. //Esta función se encarga de desplazar el
rayo por la pantalla
280. //event.target es el objeto que ha
producido el evento que llama a esta función
281. //Lo convertimos a un objeto Disparo para
tratarlo como tal
282. var rayo:Disparo = Disparo(event.target);
283. //Comprobamos, con el método esta_dentro(),
si sique en la pantalla
284. if (rayo.esta_dentro(alto,ancho)){
285. //Si está dentro, lo movemos
286. rayo.avanzar();
287. } else {
288. //Si no, ha salido de la pantalla.
Lo borramos con quitar_disparo();
289. quitar_disparo(rayo);
290. }
291. }
292. function quitar_disparo (disparo:Disparo){
293. //Esta función elimina el Disparo que le
pasemos como argumento
294. //Quitamos sus eventos
295. disparo.removeEventListener(Event.ENTER_FRA
ME, mover_disparo);
296. //Comprobamos que no se haya borrado ya,
para evitar posibles errores
297. if (zonaJuego.contains(disparo)) {
298. zonaJuego.removeChild(disparo); //Y
lo eliminamos de su contenedor


299. numRayos--; //Restamos 1 al número
de rayos disparados
300. }
}
301. Ahora, escribe el código que lanzará de forma aleatoria los proyectiles.
Recuerda que llamábamos a esta función en el evento ENTER_FRAME del
contenedor de los elementos del juego:
302. //PROYECTILES
303. function num_aleatorio (min:Number ,max:Number){
304. //Esta función genera un número aleatorio dentro
de un rango
305. return (Math.floor(Math.random()*(max-
min+1))+min);
306. }
307.
308. function lanzarProyectil(event):void{
309. //Se ejecuta en el evento ENTER_FRAME de
zonaJuego.
310. // Comprobamos que el juego no haya acabado
ya
311. if (!fingame){ //Si no ha acabado
312. //No vamos a lanzar un proyectil
cada vez, serían demadiados
313. //Generamos un número aleatorio
entre 0 y 20, y disparamos sólo cuando sea 0
314. //Así los proyectiles apareceran de
forma irregular, unas veces más y otras menos
315. if (num_aleatorio(0, 20) == 0){
316. //Si disparamos, creamos un
Proyectil
317. var miProyectil:Proyectil;
318. //Decidimos que tipo de los
tres proyectiles será.
319. //Lo hacemos aleatoriamente


320. switch (num_aleatorio(1,
3)){
321. case 1:
322.
miProyectil = new Proyectil1;
323. break;
324. case 2:
325.
miProyectil = new Proyectil2;
326. break;
327. case 3:
328.
miProyectil = new Proyectil3;
329. break;
330. }
331. //Lo configuramos con el
método dosparar()
332. miProyectil.disparar(level,
ancho, alto);
333. //Y lo mosramso en zonaJuego
334.
zonaJuego.addChild(miProyectil);
335. //Al nuevo proyectil, le
asignamos la función que lo moverá y
336. //comprobará si ha impactado
contra algo en el evneto ENTER_FRAME.
337.
miProyectil.addEventListener(Event.ENTER_FRAME,
mover_proyectil);
338.
339. }
340.
341. } else { // Si es fin de juego
(fingame==True) es porque el proyectil
342. // ha impactado contra el
arma, y está está reproduciendo la animación


343. //que la hace explotar.
Comprobamos si ha acabado esa animación, para
344. //que se vea completa.
345. if (arma.currentFrame ==
arma.totalFrames){
346. //Si ha llegado al último
frame es que la animación ha acabado
347. //Quitamos zonaJuego para
borrar todos sus elementos hijos.
348.
zonaJuego.removeEventListener(Event.ENTER_FRAME,lan
zarProyectil)
349.
stage.removeEventListener(KeyboardEvent.KEY_DOWN,di
sparar);
350. this.removeChild(zonaJuego);
351. //Y mostramos la pantalla de
fin de juego
352. gotoAndStop("fin");
353. }
354. }
}
355. Escribe el siguiente bloque de código para crear la función mover_proyectil,
que se encargará de mover el proyectil y de comprobar si ha impactado contra
lago:
function mover_proyectil(event:Event):void{
//Esta función mueve el proyectil y comprueba si ha
impactado con algo
//Se produce llama en el evento ENTER_FRAME del
proyectil
var proyectil:Proyectil = Proyectil(event.target);
//Comprobamos si está explotando
if (proyectil.explotando()){
// Nos aseguramos de que se haya
reproducido completa
//la animación de la explosión
if(proyectil.currentFrame ==
proyectil.totalFrames){
//Si ha llegado al último frame, es
que ha acabado
//la animación de la explosión. Lo


quitamos.
quitar_proyectil(proyectil);
}
//Comprobamos si no ha explotado, y si sigue
dentreo de la pantalla
} else if
(proyectil.esta_dentro(alto+proyectil.height)){
//Si el proyectil está dentro del área del
juego
proyectil.avanzar(); //Lo avanzamos
for (var i:Number = 0;
i<zonaJuego.numChildren;i++){
//Recorremos todos los
elementos que hemos agregado
// a la zonaJuego, tomando
el elemnto con getChildAt(i).
//Comprobamos el tipo de
objeto
switch
(zonaJuego.getChildAt(i).toString()){
case "[object
Disparo]": //Si es un disparo del arma
var
disparo:Disparo = Disparo(zonaJuego.getChildAt(i));
//Comprobamos
si ha impactado con el proyectil
if
(proyectil.hitTestObject(disparo)){
//Si
es así, lo hacemos explotar y quitamos el disparo.
proyectil.explotar();
quitar_disparo(disparo);
//Al explotar, proyectil.explotando() = True
//Lo comprobábamos al principio. No lo quitamos ya para
//que se vea la animación.
hits++; //sumamos a los impactos
actualizarEstadisticas() //Y actualizamos las estadísticas
}
break;
case "[object
BloqueBonus]": //Si es un BloqueBonus
//Comprobamos
si ha impactado con el proyectil
if
(proyectil.hitTestObject(zonaJuego.getChildAt(i))){
//Y
si ha impactado, quitamos el bloque y el proyectil

quitar_bloqueBonus(BloqueBonus(zonaJuego.getChildAt
(i)));
//y
quitamos el proyectil

quitar_proyectil(proyectil);
}
break;
case "[object
Bloque]": //Si es un Bloque
//Comprobamos
si ha impactado con el proyectil


if
(proyectil.hitTestObject(zonaJuego.getChildAt(i))){
//Y
si ha impactado, quitamos el bloque y el proyectil

zonaJuego.removeChild(zonaJuego.getChildAt(i));
//y
quitamos el proyectil

quitar_proyectil(proyectil);
}
break;
case "[object
Arma]": //Si es el Arma
//Comprobamos
el impacto, y que no haya acabado ya el juego, para que
//el arma no
explote dos veces si impactan dos proyectiles a la vez
if
(proyectil.hitTestObject(zonaJuego.getChildAt(i)) &&
!fingame){
//Si
impacta contra el arma, la hacemos explotar

Arma(zonaJuego.getChildAt(i)).gotoAndPlay("hit");
//Y
marcamos el fin del juego

fingame = true;
}
break;
}
}
} else{
//Si se ha salido de la pantalla
(proyectil.esta_dentro()==False, lo quitamos
quitar_proyectil(proyectil);
}
}
function quitar_proyectil (proyectil:Proyectil){
//Esta función quita un proyectil de la pantalla,
pasado como parámetro
//Quita el escuchador del evento ENTER_FRAME
proyectil.removeEventListener(Event.ENTER_FRAME,
mover_proyectil);
//Y borra el objeto, si no se ha eliminato ya.
if (zonaJuego.contains(proyectil)) {

zonaJuego.removeChild(DisplayObject(proyectil));

}
}
356. Para acabar con este fotograma, sólo nos queda llamar a la función
comenzarPartida();. Podemos hacerlo en cualquier parte del código, después de
haber definido las variables iniciales. Por ejemplo, colóca este código al final:
comenzarPartida();


357. Por último, haz clic en la capa acciones del tercer fotograma, y en el panel
Acciones introduce el siguiente código:
358. //Mostramos las estadísticas
359. estadisticas_txt.text="Aciertos:
"+hits+"\t"+"Nivel:"+level;
360. //Volvemos a mostrar el cursor normal
361. Mouse.show();
362. //Y asociamos al botón la función empezar() del
primer fotograma
btn_volveraJugar.addEventListener(MouseEvent.MOUSE_UP,emp
ezar);
Prueba evaluativa unidad 22: Juegos
Sólo una respuesta es válida por pregunta. Haz clic en la respuesta que consideres
correcta.
Contesta todas las preguntas y haz clic en el botón Corregir para ver la solución.
Si pulsas Restablecer podrás repetir la evaluación.
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 función 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 sltó un elemento que estaba arrastrándose
con la propiedad...
a) dragtarget.


b) droptarget.
5. ¿Qué evento utilizaremos para la reproducción continuada de determinadas
funciones?
a) Enter_Frame.
b) onLoad.
6. ¿Qué devolverá la función hitTestPoint si la ejecutamos contra dos elementos que
ocupan el mismo espacio?
a) True.
b) False.
7. La función getBounds() nos permite averiguar las X y las Y máximas y mínimas de
posición de un objeto.
a) Verdadero.
b) Falso.
8. La función random() devuelve...
a) Un número aleatorio entre 0 y 1.
b) Un número aleatorio entre 1 y 100.
9. La función del objeto TextFormat es...
a) Poder darle el mismo formato a diferentes objetos de texto.
b) Formatear un texto independientemente de el resto de propiedades que
añadamos.
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 posición x=0, y=0. (ver la imagen)
Para mover un objeto debemos modificar su posición definida por las propiedades
objeto.x y objeto.y
Por ejemplo, si hacemos objeto.x +=10 estamos desplazando el objeto 10 píxeles
hacia la derecha.
Vamos a ver como mover un objeto a partir de este ejemplo de una bola botando.
El algoritmo es muy sencillo, se trata de ir modificando la posición de la bola desde
una posición 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, según el esquema de la imagen, pasa de la posición (x
1
, y
1
) a la
posición (x
2
, y
2
), para ello se incrementa la x con el valor incre_x (que estaría
representado por la línea azul) y se incrementa la y con el valor incre_y (que estaría
representado por la línea roja).
Cuando la bola sube, la única diferencia es que la coordenada y va disminuyendo en
lugar de aumentando, según el esquema de la derecha, al subir se pasa de la posición
(x'
1
, y'
1
) a la posición (x'
2
, y'
2
), para ello se incrementa la x con el valor incre_x (que estaría
representado por la línea azul) y se decrementa la y con el valor incre_y (que estaría
representado por la línea roja)

Vamos a ver lo más importante del código ActionScript que tenemos un poco más
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 posición (bola_mc.x= 0,bola_mc.y= 0)
Mediante la variable baja, sabremos si la bola esta 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 sera más bajo, la variable
elasticidad determinará está perdida 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 línea naranja representa esa cantidad que le sumamos al tope 1
para pasar al tope 2.










Unidad 23. Animaciones avanzadas (II)
Ya tenemos nuestro código casi preparado, ahora sólo falta hacer que el proceso se
repita un número determinado de veces. Esta película Flash sólo tiene un fotograma.
¿Cómo hacemos esto? Lo primero que se nos ocurre es incluir una instrucción while ... o
una instrucción for ... , si lo hacemos veremos que no funcionará porque la repetición es
tan rápida que no da tiempo a ver nada.
La solución está en introducir una instrucción que haga que el proceso se repita cada
35 milisegundos. Esto lo vamos a ver en el punto siguiente.
Hemos colocado un botón en la película de forma que cada vez que se pulsa, se
detiene la ejecución (si todavía no había acabado) y se lanza una nueva ejecución.
Cuando el tope llega al suelo se detiene la ejecución.
btn_reproducir.addEventListener(MouseEvent.MOUSE_UP,playescena)
function playescena (event:MouseEvent):void {
var baja:Boolean = true; //Si la bola sube o baja
var incre_x:Number = 3.5; //Incremento vertical
var incre_y:Number = 8; //Incremento horizontal
var suelo:Number = 280; //Distancia ala que está el suelo
var tope:Number = 0; //Altura máxima del bote
var elasticidad:Number = 3; //Corrector del tope
bola_mc.y = 0; //Comienza en la esquina superior izquierda
bola_mc.x = 0;
tope += (suelo - bola_mc.y) / elasticidad; //calculamos el tope


var repeticion:Number;
clearInterval(repeticion);
repeticion = setInterval(botar, 35);//Repetimos botar cada 35
ms
function botar() {
if (baja) { // Si la bola baja...
bola_mc.y += incre_y;//Aumentamos Y
bola_mc.x += incre_x;
if (bola_mc.y>=suelo) {
baja = false; //Si ha llegado al suelo hacemos que
suba
}
} else { // Si la bola sube...
bola_mc.y -= incre_y;//Disminuímos Y
bola_mc.x += incre_x;
if (bola_mc.y<=tope) { //Cuando alcance el tope
baja = true; //La hacemos bajar...
if (tope>=suelo) { //Cuando el tope esté mas bajo que
el suelo
incre_y = 0; //Ya no rebota más
clearInterval(repeticion);//Fin de la repetición
} //Al llegar abajo, calculamos el nuevo tope
tope += (suelo - bola_mc.y) / elasticidad;
}
}
}
}
En este sencillo ejemplo la trayectoria de la bola es rectilínea, para que fuese un
movimiento más real debería seguir una trayectoría curva. Dibujar curvas es un poco más
complicado que dibujar rectas. Flash nos ofrece una opción más sencilla para hacer que
un objeto siga una trayectoria curva: las guías 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
debería 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. Ejercicio paso a paso: Movimiento en espiral

Ejercicio paso a paso
1. Abre el archivo espiral.fla que encontrarás en la carpeta ejercicios/espiral del
curso.
2. Haz clic en el fotograma 2 de la capa acciones.
3. Abre el Panel Acciones pulsando la tecla F9.
4. Escribe lo siguiente, a continuación del stop() que encontrarás:
var velocidad:Number = 0.2;
var distancia:Number = 5;
var recorrido:Number = 30;
miBoton.addEventListener("click", coemnzar);
function comenzar(event) {
gotoAndPlay(1);

}
bola.addEventListener(Event.ENTER_FRAME,
movimientoEspiral);
function movimientoEspiral(event) {
if (recorrido>0) {
var i:Number=distancia*recorrido;



bola.x=Math.round(i*Math.cos(recorrido))+400/2;

bola.y=Math.round(i*Math.sin(recorrido))+400/2;
recorrido-=velocidad;

var radianes:Number = Math.atan2((bola.x-
400/2), (bola.y-400/2));
var grados:Number =
Math.round(radianes*180/Math.PI);
bola.rotation=- grados+5;

bola.scaleX=recorrido/30;
bola.scaleY=bola.scaleX;
}
}
Como puedes ver calculamos el ángulo de la bola respecto al centro de la pantalla, le
damos un desajuste de 5 grados para que parezca más real.
En cuanto a la escala puedes ver que va en relación al recorrido.
El movimiento de la bola lo hemos sacado de la fórmula de la espiral de Arquímedes.
Podrás encontrar información sobre ella en la red.
Unidad 23. Animaciones avanzadas (III)
23.2. Función setInterval y el evento ENTER_FRAME
La función setInterval se utiliza cuando queremos que se repita la ejecución de un
código ActionScript cada cierto número de milisegundos, y el evento
ENTER_FRAME ("enterFrame") se utiliza cuando queremos ejecutar un código
ActionScript en función de la velocidad de la película 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 parámetros conseguiremos que el objeto se mueva más o menos rápido.


setInterval
El formato de esta función es el siguiente:
var retardo:Number = setInterval(queFuncion:Function,
intervalo:Number, [param1:Object, param2, ..., paramN]);
Donde,
queFuncion es la función que se va a repetir.
intervalo es el número de milisegundos que van a transcurrir entre cada llamada a
la función.
[param1:Object, param2, ..., paramN] es la lista opcional de parámetros que se
pasan a la función indicada en queFuncion.
retardo es una variable que identifica el intervalo y que nos permite emplear
clearInterval() para detener la ejecución.
Por ejemplo, el código siguiente escribe 10 veces el mensaje "contador" i , cada 2000
milisegundos (2 sg.).
var i:Number = 1;
var repeticion:Number = setInterval(contar, 2000);
function contar() {
trace("contador: "+ i++);
if (i>10) {
clearInterval(repeticion);//Fin de la repetición
}
}
La función clearInterval sirve para detener la ejecución de la función llamada desde
setInterval. Por lo tanto, conviene utilizar clearInterval siempre que usemos setInterval,
para evitar que la ejecución continúe indefinidamente.
En el ejemplo del punto anterior hemos definido la función setInterval para que la
función botar se ejecute cada 35 milisegundos.
Unidad 23. Animaciones avanzadas (IV)
ENTER_FRAME ("enterFrame")


El controlador de eventos ENTER_FRAME, permite invocar a una función de forma
repetida tantas veces como fotogramas por segundo tenga definida la película.
Este comportamiento ya lo hemos utilizado varias veces.
Por ejemplo, en el movieClip bola_mc:
var i:Number =0;
bola_mc.addEventListener(Event.ENTER_FRAME, miFuncion)
function miFuncion(event):void{
trace("ejecutando: "+ ++i);
}
Si la velocidad de la película es de 12 fps, este código escribiría en la salida 12 líneas
por segundo, de esta forma:
ejecutando:1
ejecutando:2
ejecutando:3
...
Aunque con este ejemplo no lo parezca, (sólo pretende explicar la función) estas dos
tipo 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
continuación veremos otro ejemplo que puede sernos útil.
Imagina que quieres que tu película se detenga durante 2 segundos y luego continúe.
Esta es una forma de hacerlo utilizando la función setInterval.

Colocariamos este código 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 película.
var tope:Number = 1;
var repeticion:Number = setInterval(parar, 1000);
function parar() {
tope++;


if (tope > 2) {
clearInterval(repeticion);
nextFrame();
play();
}
}
stop();

Unidad 23. Animaciones avanzadas (V)
23.3. Movimiento de objetos mediante guía
En esta unidad ya hemos visto como hacer botar una bola mediante ActionScript, ahora
vamos a recordar una técnica que ya vimos en la unidad 12, animación mediante
trazado o guía 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 animación que resulta más natural que el bote con
trayectoria recta que vimos en el punto anterior.

En las imágenes podrás ver que proceso hemos seguido para dibujar el movimiento.
La guía 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 críticos
para achatar la pelota y dotarla de elasticidad.



Hemos visto dos técnicas diferentes para animar un objeto en Flash, mediante
ActionScript y mediante guía de movimiento.
Según cada caso concreto resultará más adecuado elegir una u otra técnica. En
general, resulta más fácil y rápido utilizar guías de movimiento que ActionScript, sobre
todo si el movimiento que tiene que seguir el objeto es sinuoso y difícil de definir en
términos de una ecuación matemática.
Hay casos en los que será más adecuado utilizar ActionScript y otros casos en los que
sólo 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 animación de rostros, en
esta pequeña introducción aprenderemos cómo 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
posición que un rostro enfadado. Vamos a ver como 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 Línea, en el fotograma 1, y creamos un frame
clave en el fotograma 17. Para convertir la línea recta en una curva, volvemos al
fotograma 1 y activamos la herramienta Selección y nos aseguramos de
que la línea de la boca NO esté seleccionada. Ahora acercamos el cursor a la línea y
cuando aparezca una pequeña línea 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 línea y en dirección perpendicular
para que quede una curva simétrica. En el caso de las cejas, nos interesa que la curva no
sea simétrica y deberemos arrastrar desde un lateral de la línea en lugar de desde el
centro.



Unidad 23. Animaciones avanzadas (VII)
23.5. Animaciones geométricas en 3D

Vamos a ver cómo crear una animación de una caja girando en tres dimensiones.
Para abordar una animación 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 isonométrica y c) perspectiva cónica.

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 animación perfectamente realista, pero lo que tratamos de explicar es únicamente
el proceso de animación.
Se trata de hacer girar una caja desde una posición inicial hasta una posición fila. Para
hacer la animación debemos dibujar la caja en varias posiciones intermedias. A
continuación 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 irá
haciendo visible según avance el giro.
Unidad 23. Animaciones avanzadas (VIII)
23.6. Cinemática inversa
El método de animación cinemática inversa nos permite mover objetos de forma más
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 muñeca y codo. Al mover la mano, el antebrazo la seguiría
doblándose por la muñeca 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
símbolos con huesos.
Crear un esqueleto en una forma:
Partimos de una forma, como pueden ser elipses, rectángulos, trazos del pincel, etc.
Cualquier cosa que no se haya convertido en un símbolo. Con la herramienta Hueso,


vamos haciendo clic y arrastrando, dibujando los huesos. Debemos de comenzar por el
hueso raíz, y seguir por los que cuelgan de este. Por ejemplo, para dibujar un brazo,
haríamos clic sobre el hombro y arrastraríamos hasta el codo. Volveríamos a hacer clic
sobre el el codo y arrastraríamos hasta la muñeca.
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, verás que el resto del cuerpo le sigue. El inconveniente de la forma es
que puede deformarse y no podremos controlarlo.

Crear un esqueleto con símbolos:
Otra forma de trabajar es utilizando símbolos. Debemos de tener en cuenta que un
símbolo sólo puede tener un hueso. Por tanto, necesitamos una instancia de símbolo
para cada sección entre articulaciones.
Antes de comenzar a crear el esqueleto, colocamos todos los símbolos en el escenario,
colocados de la forma deseada. Después, partiendo de la raíz del esqueleto, del punto de
que saldrán todos los huesos, vamos enlazando los distintos símbolos, del comienzo del
primero al comienzo del siguiente.



Podemos mover los símbolos 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 selección, y eliminarlo con la tecla Supr.
Unidad 23. Animaciones avanzadas (IX)
Crear la animación
Tanto si hemos utilizado formas, como si hemos trabajado con símbolos, 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 articulación que lo une con el hueso del que cuelga, debemos hacerlo con
la tecla Shift (Mayúsculas) pulsada.
Seguimos creando poses. Si queremos duplicar una pose, podemos hacer clic derecho
sobre ella en la línea 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 animación:
Los huesos nos permiten dar aún más 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 Unión: Rotación, que permiten que roten. Podemos Restringir el ángulo de
rotación, por ejemplo para hacer que una rodilla sólo se pueda mover hacia atrás, hasta
chocar con el muslo, y no hacia delante, con los valores Min y Max.

Por defecto, los huesos tienen un tamaño fijo e invariable, pero podemos hacer que
esto cambie con los valores de Traslación.

Y como siempre, lo que está disponible en las propiedades es accesible a través de
ActionScript, por lo que incluso podríamos crear un script que moviese nuestro esqueleto.
Unidad 23. Avanzado: Animaciones con movimientos
complejos
Existen multitud de movimientos complejos que se pueden imitar con animaciones
Flash, es evidente que no podemos verlos todos, por lo tanto hemos elegido uno bastante
común y que nos puede servir como base para explicar unos cuantos conceptos. Se trata
de imitar el movimiento de una persona corriendo. Esperamos que con estas
explicaciones seas capaz de realizar variaciones más complejas, como podrían ser hacer
que el muñeco practicase diferentes deportes.
Vamos a explicar cómo realizar la animación que puedes ver en esta página. Para
simplificar hemos dibujado una persona de forma esquemática.
A la hora de plantearnos cómo realizar una animación de este tipo, lo primero que
debemos hacer es analizar el movimiento para ver si está compuesto por elementos que
se repiten, o si se puede separar en distintos componentes o cualquier otra situación que
nos permita simplificar la animación.


En el caso que nos ocupa podemos separar el movimiento de las distintas partes del
cuerpo, piernas, brazos, cabeza y tronco. También podríamos añadir manos y pies pero
no lo haremos para no complicar demasiado la explicación.
Hemos creado una capa para cada parte del cuerpo, como puedes ver en esta imagen.

Otra circunstancia que podemos observar es que el movimiento del brazo izquierdo y
del brazo derecho son muy parecidos, se diferencian en la distinta posición de partida.
Por lo tanto bastará con realizar un movimiento que nos servirá para ambos brazos. Lo
mismo ocurre con las piernas.
A su vez, podemos separar el movimiento del brazo en dos movimientos, uno cuando el
brazo avanza (va desde la posición más atrasada hasta la posición más adelantada) , y
otro cuando el brazo retrocede (va desde la posición más adelantada hasta la más
atrasada). De esta forma, con dos movieclips podremos representar el movimiento de
ambos brazos. Los movieclips son idénticos salvo en el sentido del movimiento.
En esta imagen puedes ver el movie clip "brazo_adelante", hemos creado una capa
para la parte superior del brazo y hemos hecho que gire sobre su extremo superior
(hombro). Para el antebrazo henos creado otra capa con su capa guía, la capa guía sirve
para que la parte superior del antebrazo siga la trayectoria que describe el extremo inferior
(codo). También hemos incluido un giro en el antebrazo.



En esta imagen intentamos explicar como están colocados los dos movieclips que
forman el movimiento de los brazos en la línea del tiempo..
El brazo izquierdo comienza con el movie clip "brazo_adelante" y continúa con el
movie clip "brazo_atras", mientras que el brazo derecho comienza con el movie clip
"brazo_atras" y continúa con el movie clip "brazo_adelante", de esta forma cuando el
brazo izquierdo avance el brazo derecho retrocederá.

Sólo nos queda ver un detalle interesante.
Hemos considerado idénticos el movimiento del brazo hacia adelante y del brazo hacia
atrás y la animación queda bastante bien.
Sin embargo ¿Podemos decir lo mismo del movimiento de las piernas?
Claramente no, ya que cuando la pierna va hacia atrás debe apoyarse en el suelo,
mientras que cuando va hacia adelante no debe tocar el suelo.

Si comparas las dos imágenes podrás observar como hemos incluido un fotograma
clave en la "pierna_adelante" para poder mantener la pantorrilla en posición más
horizontal y que no toque el suelo.



Unidad 23. Animaciones avanzadas (X)
23.7. Rotoscopia
La rotoscopia es una técnica que utiliza un movimiento real como patrón para
calcar las imágenes de la animación. Hace años que se utiliza esta técnica, por
ejemplo, en las películas de dibujos animados para conseguir movimientos realistas al
caminar.
Hay varios métodos para ejecutar esta técnica, nosotros vamos a hablar del mas
sencillo para utilizar en Flash. Un método más complejo sería colocar puntos blancos o
luces en diferentes partes del cuerpo de una persona vestida de negro y realizar una
película sobre un fondo negro para luego generar el movimiento a partir de los puntos
captados.
Con una cámara de vídeo podemos grabar el efecto que queremos reproducir, por
ejemplo, una persona caminando,
Luego importaremos el vídeo al formato de Flash, pero esta vez lo haremos de forma
diferente a la que aprendimos en el tema Vídeos.
Del mismo modo deberemos hacer clic en Archivo → Importar → Importar vídeo 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, sólo que en la pantalla de selección de método
de importación deberemos seleccionar Incorporar vídeo FLV en SWF y reproducir en la
línea de tiempo.




Esto hará que el vídeo se exporte de forma que lo podremos visualizar fotograma a
fotograma. Sigue el resto de opciones hasta el final y el vídeo se colocará en la línea de
tiempo.


Luego crearemos una nueva capa por encima y crearemos tantos fotogramas claves
como fotogramas de película queramos copiar. El resto es sencillo, coge un pincel y a
calcar. Cuanta más precisión consigas, más impresionantes serán los resultados.

Este proceso es muy laborioso, pero crea animaciones espectaculares.

Practica un poco y verás cómo no es nada complicado, te requerirá bastante paciencia,
pero la película final te valdrá la pena.
El audio se insertara junto al vídeo, cuando elimines el vídeo este se eliminara también.

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 deberás tener un clip donde hacerlo, para ello nos
crearemos un clip vacío:
var miClip:MovieClip = new MovieClip;
Una vez creado el clip podemos pasar a dibujar sobre él.
Hacerlo es muy fácil, sólo deberás inicializar el proceso de dibujo escribiendo:
miClip.graphics.beginFill(color, alfa);
Donde color indicará el color de relleno que se le aplicará al dibujo. Deberá estar en
hexadecimal, por ejemplo: 0x000000.
El parámetro alfa indicará la transparencia del relleno.



Luego nos valdremos de un par de funciones:
miClip.graphics.moveTo(x, y);

Esto hace que el punto de dibujo se coloque en las coordenadas especificadas.
Podemos empezar a pintar a partir de la coordenada (100, 100), por ejemplo.
Luego nos quedará solamente dibujar líneas en el espacio que contendrán el relleno de
nuestro dibujo. Utiliza la instrucción graphics.lineTo():
miClip.graphics.lineTo(x, y);

Esto hará que el punto de dibujo se desplace hasta la posición (x, y), desde donde se
creará el siguiente trazo de dibujo.
miClip.graphics.beginFill(0xFF0000);

miClip.graphics.moveTo(10, 10);
miClip.graphics.lineTo(10, 100);
miClip.graphics.lineTo(100, 100);
miClip.graphics.lineTo(100, 10);
miClip.graphics.lineTo(10, 10);
miClip.graphics.endFill();
Terminamos la instrucción con graphics.endFill().
Este ejemplo dibujaría un cuadrado en la posición (10, 10). Sencillo, ¿verdad?
Unidad 23. Animaciones avanzadas (XII)
Podemos establecer el tipo de línea que rodeará al dibujo escribiendo lo siguiente:
miClip.graphics.lineStyle(thickness:Number, color:uint = 0,
alpha:Number = 1.0, pixelHinting:Boolean = false


scaleMode:String = "normal", caps:String =
null, joints:String = null, miterLimit:Number = 3);
Nota: Esta instrucción deberá estar colocada antes de utilizar la función beginFill(),
quedaría de esta forma:
miClip.graphics.lineStyle(10, 0xFF0000, 1, false,
LineScaleMode.VERTICAL,
CapsStyle.SQUARE,
JointStyle.BEVEL, 10);
miClip.graphics.beginFill(0xFF0000);
miClip.graphics.moveTo(10, 10);
miClip.graphics.lineTo(10, 100);
miClip.graphics.lineTo(100, 100);
miClip.graphics.lineTo(100, 10);
miClip.graphics.lineTo(10, 10);
miClip.graphics.endFill();
Ahora explicaremos en detalle los parámetros de esta instrucción:
thickness (grosor): un número 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 líneas y curvas se
realicen de forma exacta. De este modo los trazos se dibujarán a píxeles exactos
en cualquier grosor (así no se verán líneas imprecisas).
scaleMode(escala): especifica cómo 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 sólo cambia su escala vertical; y "horizontal", que no cambiará la
escala si el objeto sólo cambia su escala horizontal.
caps(extremos): define cómo se dibujarán los extremos de los bordes,



joints(uniones): establece el tipo de uniones que se establecerán en el borde,

miterLimit(limiteEsquinas): un número entre 1 y 255, indica la distancia de la
esquina al trazo real,

Ejercicios unidad 23: Animaciones avanzadas
Ejercicio 1: Nieve
Utiliza un documento en blanco. No podrás crear ningún elemento. Lo deberás hacer
todo mediante ActionScript.
Tendrás cumplir los siguientes requisitos:
Dibujar un fondo.
Dibujar una estrella.
Que la estrella tenga un brillo dinámico.
Que la estrella se pueda arrastrar.
Dibujar los copos aleatoriamente.
Que los copos desaparezcan (se derritan) al cabo de un tiempo.


Ayuda ejercicios unidad 23: Animaciones avanzadas
Ejercicio 1: Nieve
1. Abre un nuevo documento haciendo clic en Archivo → Nuevo.
2. Selecciona Archivo de Flash (AS 3.0) y pulsa Aceptar.
3. Guárdalo como nieve.fla.
4. Selecciona el fotograma 1 y abre el Panel Acciones desde Ventana → Acciones.
5. Escribe lo siguiente para dibujar el fondo e importar las clases necesarias:
6. // Importamos las clases necesarias
7. import flash.filters.BlurFilter;
8.
9. // Creamos el fondo de la pelicula
10. var fondo:MovieClip=new MovieClip ;
11. fondo.graphics.beginFill(0x993333);
12. fondo.graphics.moveTo(0,0);
13. fondo.graphics.lineTo(550, 0);
14. fondo.graphics.lineTo(550, 400);
15. fondo.graphics.lineTo(0, 400);
16. fondo.graphics.lineTo(0, 0);
17. fondo.graphics.endFill();
addChild(fondo);
Si lo pruebas, verás que se rellena el fondo con un tono rojo.
18. Escribe lo siguiente para dibujar la estrella y situarla en el centro de la pantalla:
19. //Creamos la estrella
20. var estrella:MovieClip=new MovieClip ;
21. estrella.graphics.lineStyle(10, 0x000000, 100,
true, "normal", "none", "miter", 0);
22. estrella.graphics.beginFill(0xCCFF33, 85);
23. estrella.graphics.moveTo(20+stage.width/2, -
91+stage.height/2);


24. estrella.graphics.lineTo(22+stage.width/2, -
21+stage.height/2);
25. estrella.graphics.lineTo(84+stage.width/2,
0+stage.height/2);
26. estrella.graphics.lineTo(22+stage.width/2,
21+stage.height/2);
27. estrella.graphics.lineTo(20+stage.width/2,
91+stage.height/2);
28. estrella.graphics.lineTo(-22+stage.width/2,
37+stage.height/2);
29. estrella.graphics.lineTo(-86+stage.width/2,
56+stage.height/2);
30. estrella.graphics.lineTo(-50+stage.width/2,
0+stage.height/2);
31. estrella.graphics.lineTo(-86+stage.width/2, -
56+stage.height/2);
32. estrella.graphics.lineTo(-22+stage.width/2, -
37+stage.height/2);
33. estrella.graphics.lineTo(20+stage.width/2, -
91+stage.height/2);
34. estrella.graphics.endFill();
addChild(estrella);
Ahora, ya tenemos el fondo y la estrella en el centro.
35. Escribe lo siguiente para añadirle un brillo dinámico a la estrella:
36. var brilloMax:Boolean=false;
37. var miBrillo:Number=80;
38.
39. import flash.filters.GlowFilter; //Necesitamos
importar el filtro
40. estrella.addEventListener(Event.ENTER_FRAME,
cambiarBrillo);
41. function cambiarBrillo(event):void {
42. //Hacemos que el brillo se vaya
intensificando y atenuando


43. var brillo:GlowFilter=new
GlowFilter(0xCCCC88,100,miBrillo,miBrillo,1,1);
44. estrella.filters=[brillo];
45. if (brilloMax) {
46. miBrillo+=3;
47. if (miBrillo>120) {
48. brilloMax=false;
49. }
50. } else {
51. miBrillo-=3;
52. if (miBrillo<80) {
53. brilloMax=true;
54. }
55. }
}
56. Por último, añademos las funciones que nos permitan arrastrar y soltar la estrella.
57. // Funciones para poder mover la estrella
58. estrella.addEventListener(MouseEvent.MOUSE_DOWN,
arrastrar);
59. function arrastrar(event:MouseEvent):void {
60. estrella.startDrag();// Al mantener pulsada
la estrella podremos arrastrala
61. }
62. estrella.addEventListener(MouseEvent.MOUSE_UP,
soltar);
63. function soltar(event:MouseEvent):void {
64. estrella.stopDrag();// Cuando soltemos, la
estrella permanecera en el lugar que deseemos
}


65. Como la estrella era un único objeto, lo hemos creado directamente en el panel de
acciones. En cambio, como los copos son muchos objetos iguales, es más útil que
creemos una clase. Haz clic en el menú Archivo → Nuevo... y elige Archivo de
ActionScript.
66. El siguiente código lo introduciremos en la Clase (archivo .as) donde incluiremos
todas las funciones y variables para un copo. Calcularemos las posiciones, los
tamaños y las velocidades aleatorias. Mediante la variable vidaCopo
controlaremos si el copo se derrite o no.
67. package {//Importamos las clases necesarias
68. import
flash.display.MovieClip;//Necesitamos MovieClip que es lo
que crearemos
69. import flash.filters.BlurFilter;//El filtro
que emplearemos
70. import flash.events.Event; //Utilizaremos
evento
71. import flash.events.EventDispatcher; //Y un
generador de eventos
72. //Y creamos nuestra clase como una
subclacse (extends) de MovieClip, para que disponga de
sus métodos
73. public class Copo extends
flash.display.MovieClip {
74. private var velocidad:Number;//
Velocidad de bcaída del copo
75. private var estrella:MovieClip;//
Objeto estrella que utilizaremos para saber si choca con
ella
76. private var fondo:MovieClip;//
Objeto sobre el que aparecerán los copos
77. private var vidaCopo:Number=300;//
La vida que tendrá el copo antes de derretirse
78.
79. public function
Copo(_estrella:MovieClip, _fondo:MovieClip) {
80.
this.estrella=_estrella;//Asignamos los aprámetros
a sus respectivas propiedades
81. this.fondo=_fondo;
82. //dibujamos el copo
83.
this.graphics.beginFill(0xFFFFFF);


84. this.graphics.moveTo(20, -
91);
85. this.graphics.lineTo(22, -
21);
86. this.graphics.lineTo(84,
0);
87. this.graphics.lineTo(22,
21);
88. this.graphics.lineTo(20,
91);
89. this.graphics.lineTo(-22,
37);
90. this.graphics.lineTo(-86,
56);
91. this.graphics.lineTo(-50,
0);
92. this.graphics.lineTo(-86, -
56);
93. this.graphics.lineTo(-22, -
37);
94. this.graphics.lineTo(20, -
91);
95. this.graphics.endFill();
96. // Inicializamos las
variables, posicion del copo, el desenfoque y su
velocidad
97.
this.width=num_aleatorio(2,6); //Tamaño aleatorio
98. this.height=this.width;
99.
this.velocidad=num_aleatorio(2,5); //Velocidad
aleatoria
100. var
des:Number=num_aleatorio(3,5); //Desenfoque aleatorio
101. var
desenfoque:BlurFilter=new BlurFilter(des,des);
102. this.filters=[desenfoque];
103. //Posición aleatoria, con
respecto al fondo


104.
this.x=num_aleatorio(fondo.x,fondo.width);
105. this.y=fondo.y;
106. //El evento added se produce
al agregar el elemento a la escena o a un contenedor
107. //Así, no comenzará a caer
hasta que no se visualice.
108.
this.addEventListener("added", iniciarCaida);
109. }
110. private function
iniciarCaida(event):void {
111.
this.addEventListener("enterFrame", caerCopo);
112. }
113. // Función para saber si choca
contra la estrella o llega al suelo
114. private function parado():Boolean {
//Comprobamos si ha llegado al fondo o chocado con la
estrella
115. return this.y>=fondo.height-
this.height/2 || estrella.hitTestPoint(this.x, this.y,
true);
116. }
117. // Función que hará caer o parar al
copo
118. private function caerCopo(event) {
119. if (! parado()) {//Si está
cayendo
120.
this.y+=this.velocidad; //Aumentamos Y
121. } else { //Si está parado...
122. if (this.vidaCopo) {
//Y le queda vida...
123.
this.vidaCopo-=1; //Le quitamos vida
124. } else { //Si no le
queda vida


125. this.alpha-
=0.1; //Lo vamos haciendo transparente
126. if
(this.alpha<=0) {//Cuando ya no se vea...
127. //Lo
eliminamos, quitando sus eventos
128.
this.removeEventListener("added", iniciarCaida);
129.
this.removeEventListener("enterFrame", caerCopo);
130. // y
lanzando un evento que diga a la película que lo tiene
que borrar
131.
dispatchEvent(new Event("copoDerretido", true));
132. }
133. }
134. }
135. }
136.
137. // Función para crear el numero
aleatorio
138. private function
num_aleatorio(min:Number ,max:Number) {
139. //Genera un número aleatorio
dentro de un rango
140. max++;
141. max=max-min;
142. return
min+(Math.floor((Math.random()*(max*10)))%max);
143. }
144. }
}
145. Guara el archivo con el nombre de la clase, es decir, guárdalo como
Copo.as.


146. Para acabar, añade a la película principal (nieve.fla) las funciones que
lanzarán el copo, y la que los borra cuando se produzca el evento copoDerretido.
147. addEventListener("enterFrame", nevar);
148. function nevar(event):void{
149. addChild(new Copo(estrella,
fondo));//Creamos un copo y lo agregamos a la escena
150. }
151. addEventListener("copoDerretido", borrarCopo);
152. function borrarCopo(e:Event):void{
153. removeChild(Copo(e.target));
}
154. Prueba la película. Nota: en nuestro ejemplo, funciona a 24fps.
155. Prueba evaluativa unidad 23: Animaciones
avanzadas
157. Sólo una respuesta es válida por pregunta. Haz clic en la respuesta que
consideres correcta.
Contesta todas las preguntas y haz clic en el botón Corregir para ver la solución.
Si pulsas Restablecer podrás repetir la evaluación.
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 función clearInterval para la película los milisegundos que le indiques.
a) Verdadero.
b) Falso.
3. La instrucción setInterval repite la ejecución de la función que le indiques cada x
milisegundos.
a) Verdadero.
b) Falso.
4. Los eventos vinculados al evento ENTER_FRAME se reproducirán cada segundo.


a) Verdadero.
b) Verdadero sólo si la velocidad de la película es de 1 fps.
c) Verdadero sólo si la velocidad de la película es de 12 fps.
5. En la técnica de rotoscopia sólo hace falta que dibujemos un fotograma, el resto se
genererarán 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 línea 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 repetición de funciones con la instrucción setInterval es posible el envío de
parámetros.
a) Verdadero.
b) Falso.