Unidad 1. Introducción a Flash Professional CS5 (I)

1.1. ¿Qué es Flash?

Flash Professional CS5 es una potente herramienta desarrollada por Adobe que ha superado las mejores

expectativas de sus creadores.

Flash fue creado con el objeto de realizar animaciones y diseños vistosos para la web, y gráficos interactivos.

Los motivos que han convertido a Flash en el programa elegido por la mayoría de los diseñadores web

profesionales y aficionados son varios. Veamos pues, porque es interesante Flash Pro CS5.

Desde la web de Adobe te puedes descargar una versión de evaluación de Flash Professional CS5 válida

para 30 días. Esta versión estará disponible hasta que salga la siguiente.

Los logotipos de Flash son propiedad de Adobe, así como las marcas registradas Flash y Adobe. aulaClic no

tiene ninguna relación con Adobe.

1.2. ¿Por qué usar Flash CS5?

Las posibilidades de Flash son extraordinarias, con cada nueva versión se han mejorado y simplificado las

herramientas, y cada vez es posible lograr mejores efectos con menos trabajo.

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.

Durante mucho tiempo, Flash consiguió 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. Con Flash podremos crear de modo fácil y

rápido desde animaciones simples para lograr algunos efectos visuales, hasta aplicaciones complejas, como

juegos.

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. Novedades de Flash CS5

Adobe suele integrar todos sus productos en una suite única en la que prima, sobre todo, la compatibilidad

entre ellos. Así la 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

reutilizar proyectos creados con un programa en otro. De hecho, podemos usar herramientas más potentes de

dibujo, como Illustrator, para crear nuestros gráficos, y después animarlos con Flash.

Vamos a ver las opciones más destacadas que encontramos en esta última versión:

 Motor de texto Text Layout Framework.

Flash CS5 ha cambiado profundamente el motor de texto que emplea. En nuevo motor TLF, incluye bastantes

mejoras, entre las que podemos destacar las siguientes:

Nuevos estilos de carácter y párrafo.

Se pueden aplicar efectos y atributos sobre el texto sin convertirlo a un clip de película.

El texto pude fluir entre varios contenedores asociados.

 El panel Fragmentos de código.

Este panel nos permite insertar rápidamente el código ActionScript 3 de las acciones más comunes.

Además, podemos emplearlo para almacenar nuestro propio código, y así poder reutilizarlo cómodamente.

 Empaquetado de aplicaciones para iPhone.

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

compatibles con iPhone.

 Mejoras del vídeo.

Los puntos de referencia nos permiten navegar por el vídeo o reaccionar a eventos. Ahora, podemos

añadirlos directamente desde el inspector de Propiedades o mediante ActionScript, sin necesidad de recodificar

el vídeo.

Además, se ha mejorado el componente reproductor de vídeo, que nos permite verlo en tiempo real, y nos

ofrece una mayor colección de estilos.

 Mejora de la herramienta huesos.

Se han añadido propiedades de "muelle" a la herramienta de cinemática inversa (IK). Con esto, se consiguen

resultados mucho más ágiles y realistas.

Unidad 1. Introducción a Flash Professional CS5 (II)

1.4. Flash, ventajas y desventajas

El principal uso de Flash se da en el mundo de la web. Desde la 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 ocuparnos 10-20 KB como media, una animación Flash ocupa mucho más. Evidentemente depende del contenido que tenga, pero suelen superar los100 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 tardan 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 la 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 desde aquí 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, SmartPhones y Tablets, y algunos de ellos no soportan Flash (como los Android anteriores a la versión 2.2).

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.

Tendencia a su desuso en la web. Con la llegada de HTML5, se solventan muchas de las carencias de las páginas tradicionales que nos obligaban a usar Flash. Por lo que su uso deja de tener tanto sentido. De hecho, Flash CS5 incluye una herramienta para exportar contenidos Flash a HTML5.

Por supuesto su fuerte uso en la web se debe a que 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. Aun 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 DVD 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)

Aquí tenéis algunas páginas interesantes hechas con FLASH NRG y fwa, o con entradas muy

llamativas http://www.derbauer.de/,

Nuestro consejo es emplear Flash únicamente en lo imprescindible en nuestra web dejando el contenido

principal de la web y los elementos de 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 se trate de una web

en la que su valor sea justamente su contenido interactivo o visual en Flash.

Unidad 1. Introducción a Flash Professional CS5 (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 qué 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?

En esta versión de Flash aún se ha facilitado más la realización de animaciones de movimiento como

veremos en el tema correspondiente.

Observa cómo ha quedado: 

Unidad 2. El entorno de Flash CS5 (I)2.1. La interfaz de Flash Pro CS5

Flash CS5 cuenta con un entorno o interfaz de trabajo de lo más manejable e intuitiva. Además, tiene la

ventaja de que es casi idéntica 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 CS5 por primera vez:

A lo largo de todo el curso trabajaremos con la versión de evaluación de Flash CS5 en castellano. Podeis

descargar esta versión de forma gratuita desde la web de Adobe. Estará disponible hasta que se lance la

siguiente versión.

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 CS5 (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 ayudaran a encontrar errores

de programación en ActionScript, 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 ActionScript, pasando por tutoriales, lecciones guiadas etc...

 Veamos un ejemplo práctico del uso de menús, realiza el Ejercicio utilizar la cuadrícula

Unidad 2. El entorno de Flash CS5 (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 que existen visita

nuestra Página Avanzada .

2.4. Las capas

 El concepto de Capa es fundamental para manejar Flash de forma eficiente. Dada la importancia de estas,

se le dedicará un tema completo. Aun 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á 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 lasPropiedades 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 busqueda 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.

Unidades de Regla: Unidad que se empleará para medir las cantidades.

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. Para cambiar este

número, arrastra con el cursor hacia la derecha o izquierda.

Transformar en predeterminado: Este botón 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. El entorno de Flash CS5 (IV)

2.6. Las Vistas o Zooms

 

 La Herramienta Zoom   se emplea para acercar o alejar la vista de un objeto, permitiendo abarcar 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  .

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  .

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 3. Dibujar y colorear (I)

3.1. El dibujo en Flash CS5

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 éstos 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 Ejercicio Crear Óvalo.

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

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

Herramienta Borrador:   Su funcionamiento es 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 Selección, 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 Subselección:   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. Para ver cómo funciona, consulta este videotutorial:   

3.4. La barra de Herramientas. Opciones

 Algunas Herramientas poseen unas opciones especiales que facilitan y potencian su uso. Para acceder a

estas utilidades, a veces no basta con hacer clic en la Herramienta correspondiente sino que 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.

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

Así mismo se puede determinar el tipo de relleno que aplicaremos a los objetos creados (mediante la

herramienta Bote de Pintura).

Se pueden crear diferentes tipos de relleno:

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.

Relleno de 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 Crear

transparencias.

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 Colorear un óvalo

Unidad 4. Textos (I)

4.1. El texto en Flash

Flash abarca todo aquello que nos pueda hacer falta a la hora de crear una 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...

Actualmente Flash utiliza dos motores para trabajar con texto: el motor clásico, heredado de las anteriores

versiones, y el llamado Text Layout Framework (TLF), el nuevo motor incluido en Flash CS5. Este último, es el

utilizado por defecto en Flash.

Por defecto, salvo que indiquemos otra cosa, en nuestros ejemplos emplearemos el motor de texto TLF.

4.2. Insertar texto

 

En la barra de Herramientas encontramos la herramienta Texto  , que es la que nos permitirá escribir

texto en nuestros proyectos.

Los caracteres del texto no está introducidos directamente en el documento, si no que están confinados en un

contenedor de texto. En Flash podemos introducir dos tipos de contenedores:

 Texto de puntos.

El tamaño del contenedor depende del texto introducido, creciendo y decreciendo con él.

 Texto de área.

Podemos definir su tamaño, independientemente del texto que contenga.

Para insertar un Texto de puntos, basta con hacer clic con la herramienta Texto y comenzar a escribir. En

cambio, si queremos introducir un Texto de área, tenemos que hacer clic y arrastrar para definir el tamaño del

área. En cualquier caso, siempre podemos convertir un Texto de puntos en área simplemente cambiando su

tamaño, estirando de los controles de transformación que se muestran alrededor.

Para saber más acerca de Cómo escribir textos visita nuestra página avanzada  .

Unidad 4. Textos (II)

4.3. Propiedades de los textos

El Panel Propiedades contiene las principales propiedades de todos los objetos que empleemos durante

nuestra película, de modo que si seleccionamos un texto, podremos ver en él todo lo que nos hace falta conocer

sobre nuestro texto. Podemos ver que el panel muestra una gran cantidad de opciones, agrupadas en

categorías.

Observarás que las imágenes anteriores muestran distintas opciones para el texto. Esto se debe a que la de

la izquierda tiene seleccionada el motor Texto TLF, que nos permite muchas más opciones. La de la derecha

tiene establecido el motor Texto clásico, y aparecen menos opciones, las que veníamos encontrando en la

anterior versión del programa.

Si quieres saber cómo utilizar el texto clásico, puede seguir este avanzado  .

Nota: El motor de texto TLF requiere publicar los archivos como ActionScript 3 y FlashPlayer 10 o posterior.

Si necesitas publicar archivos para versiones anteriores, deberás de emplear el motor clásico.

Veamos las principales opciones del panel Propiedades, comunes a ambos motores. Otras más específicas

las veremos más adelante, cuando vayamos a emplearlas:

Podemos elegir cómo se comporta el texto: Si es Seleccionable, y el usuario lo podrá seleccionar y copiar en

el portapapeles, Sólo lectura, lo que impedirá que lo pueda seleccionar, o si lo puede cambiar (Editable), por

ejemplo, para introducir datos.

Además, podemos establecer la orientación del texto, en Horizontal (por defecto) o Vertical.

 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.

En el panel encontramos las coordenadas horizontal (X) y vertical (Y) del la esquina superior del elemento de

texto, coincidiendo las coordenadas 0 0 con la esquina superior izquierda de la escena. También se muestran

los valores del ancho (AN) y alto (AL) del texto.

 Carácter. En esta sección encontramos las opciones típicas del texto:

Familia:   Desde aquí, al igual que en los editores de

texto más comunes podemos seleccionar el tipo de letra o "fuente" que mejor se ajuste a nuestro diseño.

Estilo: Nos permiten la combinación de los dos estilos de texto habituales: texto normal (Regular), en cursiva

(Italic), negrita (Bold) o negrita cursiva (Bold Italic).

Tamaño: El tamaño de la tipografía empelada.

Interlineado: Nos permite controlar la separación entre las líneas de texto dentro de un mismo párrafo.

Color: Como al resto de elementos, podemos dar color al texto.

Espaciado: Determina el espaciado adicional entre 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.

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

estas opciones:

o Utilizar fuentes de dispositivo: Se emplean las fuentes instaladas en el equipo, lo que hace más liviano el archivo SWF al no tener que incluirlas. Aunque nos exponemos a que la fuente no esté instalada, por lo que se empleará otra. Sólo deberíamos de utilizar esta opción para las familias de fuentes más comunes.

o Suavizado para legibilidad, favorece la legibilidad del texto. En este caso, deberíamos de incorporar la fuente, como veremos más adelante. No debemos de emplearla en textos animados.

o Suavizado para animación, es la mejor opción cuando pretendemos animar texto, ya que se obtienen animaciones más fluidas ignorando algunos aspectos del texto, como alineaciones. En este caso, deberíamos de incorporar la fuente.

Giro y otros estilos: Al final de este grupo de opciones encontramos las opciones para rotar el texto

seleccionado, y aplicarle estilos de subrayado, tachado, superíndice y subíndice.

 

 Carácter avanzado:

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

Además, en esta sección podemos especificar cómo se comporta el texto Por ejemplo, que se muestre en

mayúsculas, los saltos, etc...

Unidad 4. Textos (III)

 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 PanelPropiedades 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. Las diferentes opciones se refieren a la última línea del texto, que suele ser más corta

que el resto.

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 Ejercicio Propiedades del texto.

4.4. Propiedades de los contenedores de texto

En el panel de propiedades, podemos encontrar algunas opciones que afectan a los contenedores de texto,

en la categoría de opciones Contenedor y flujo.

La propiedad Comportamiento se refiere a como se amplía un contenedor de Texto al introducir texto.

Caracteres máx.: Nos permite limitar el número máximo de caracteres que se pueden introducir en la caja de

texto.

Alineación: nos permite establecer la alineación horizontal del texto en el contenedor. Sus valores pueden

ser Superior, Centrar, Inferior oJustificar.

Columnas nos permite dividir fácilmente un texto de área en el número de columnas indicado. En este caso,

también podremos regular el espacio entre ellas (medianil).

.

El relleno (padding) permite crear una separación entre los bordes del contenedor y el texto.

Además, podemos asignar un color de relleno y borde al contenedor.

Unidad 4. Textos (IV)

4.5. Flujo de texto entre contenedores

Al escribir, podemos crear textos de áreas con un texto fijo, y colocarlo en un lugar del documento. Pero

pensemos en un tríptico, por ejemplo. En este caso lo ideal sería tener un texto de área centrado en cada

página, y que cuando el texto no nos cabe en uno, pase al siguiente. Esto lo conseguimos enlazando los

distintos textos de área.

Los textos de área tienen un cuadradito en su comienzo, llamado puerto de entrada, y otro al final,

llamado puerto de salida.

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

texto desborda al elemento, el puerto de salida muestra el símbolo  . Cuando dos elementos de texto aparecen

enlazados, el que va primero muestra una flecha hacia afuera en el puerto de salida, que está unido al puerto de

entrada del siguiente elemento, que muestra una flecha hacia adentro.

Para crear un elemento de texto enlazado, partimos de un objeto de texto ya creado, y hacemos clic con la

herramienta Selección en uno de sus puertos, en el de entrada si queremos que el nuevo objeto vaya delante, o

en el de salida si el nuevo objeto irá a continuación. El cursor cambiará a cursor de  , dándonos dos opciones:

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

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

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

puerto de origen.

 

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

4.6. Incorporar fuentes

Al crear un archivo de flash con texto, si en Suavizado no hemos elegido fuentes de dispositivo, tenemos que

tener presente que si hemos elegido una fuente que no está disponible en el sistema que se reproduce la

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.

Para incorporar una fuente en la película usamos el botón Incorporar que aparece en el panel

de Propiedades.

Se abrirá el siguiente cuadro de diálogo:

En el desplegable Familia 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, seleccionamos nuestra fuente, que aparecerá señalada con un asterisco

(*).

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

Unidad 4. Textos (V)

4.7. Introducir texto

Aunque el uso más común y principal de los contenedores de texto es mostrarlo, también podemos

emplearlos como un cuadro de entada de texto.

Para hacerlo, basta con seleccionar Texto editable en las propiedades del elemento.

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

seleccionable y el de abajo solo se puede leer. Y también hemos hecho que el contenido de todos cambie según

lo que se escriba en el primero.

Para recoger información de los usuarios, normalmente emplearemos componentes de formulario, que son

controles específicos para esta función. Pero a esto le dedicaremos un tema completo más adelante.

Pero ¿cómo recogemos la información introducida en el cuadro de texto? Aunque aún no lo hemos explicado,

el texto es un objeto. Y como tal, tiene una propiedad que nos permite leer su contenido mediante ActionScript.

Cuando comencemos a trabajar con ActionScript veremos que esto, es una tarea muy sencilla.

Unidad 5. Sonidos en Flash (I)

5.1. El sonido en Flash

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

Pero hemos de tener cuidado al incluir sonidos, sobre todo si son melodías. Es preferible que sea el usuario

quien las active a través de un botón, o si es necesario que se reproduzcan automáticamente, tener un control

fácilmente localizable para silenciarlo.

5.2. Importar sonidos

 

 Utilizar sonidos externos. Podemos insertar en una película de Flash sonidos que tengamos en formato

digital: grabados por nosotros mismos, descargados de internet, etc...Pero para que esté disponible en nuestra

película y podamos usarlo, antes debemos de importarlo.

Realmente debemos de importar a flash cualquier archivo externo que queramos usar: 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).

 

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

importar a nuestro proyecto. Se trata principalmente de sonidos como disparos, risas, sonidos animales, etc. Los

podemos encontrar a través del menú Ventana → Bibliotecas comunes → Sonidos. Se abrirá un panel como

el siguiente:

Para incorporar alguno de estos sonidos a nuestra biblioteca de proyecto, no tenemos más que arrastrarlos

desde este panel.

Unidad 5. Sonidos en Flash (II)

5.3. Propiedades de los sonidos

En Flash CS5, al igual que en versiones anteriores, todo lo referente a los sonidos lo podemos editar desde el

Panel Propiedades. Aquí tenemos todo lo necesario para insertar, modificar y editar el sonido que acabamos de

importar. Si no hemos importado 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 Propiedadestoma el siguiente aspecto:

Veamos las partes que tiene este panel.

 Nombre: En este desplegable nos aparecerán los sonidos que tenemos importados en la Biblioteca.

Deberemos seleccionar la canción que pretendamos añadir a nuestra película (en el siguiente punto veremos

cómo insertarla). 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 indiques de la derecha.

También puedes seleccionar Reproducir indefinidamente para que el sonido se reproduzca en un bucle hasta

llegar al siguiente fotograma clave.

No recomendamos insertar sonidos con la 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 en Flash (III)

5.4. Insertar sonido en línea de tiempo

 

Al añadir un sonido directamente sobre la línea de tiempo, lo asociamos a un fotograma. Por tanto, el sonido

se comenzará a reproducir en ese fotograma, y continuará hasta que sea detenido. Esto es útil, por ejemplo,

para agregar música a la película.

Lo mejor será crear una nueva capa para cada sonido. Así lo controlaremos fácilmente. Creamos un

fotograma clave en el momento en que queremos que comience a reproducirse el sonido, y lo arrastramos de

la biblioteca al escenario. También podemos elegirlo directamente desde el panel de Propiedades.

Con el fotograma de la nueva capa seleccionado, accedemos a sus propiedades, a la sección de Sonido.

Seleccionamos 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 iniciar 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 qué importarlo todo

cuando genera un archivo más grande? Por supuesto, podemos hacer que el sonido se detenga en un

fotograma determinado. Para ello, creamos un fotograma clave, y con el mismo sonido seleccionado,

elegimos Detener en el desplegable Sinc.

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

 

 Para practicar la inserción de sonidos realiza el Ejercicio paso a paso Trabajar con sonidos.

Unidad 5. Sonidos en Flash (IV)

5.5. Sonidos en botones

Es muy común insertar un breve sonido al pulsar un botón, así el usuario percibe que ese botón "hace algo".

Como veremos más adelante, los botones tienen su propia línea de tiempo, con sus distintos estados. Por

eso, no tenemos más que insertar los sonidos para cada estado.

Lo que sí debemos de tener en cuenta, es en usar la opción de Sincronización Evento, para que se

reproduzca el sonido en su totalidad.

5.6. Editar Sonidos

Flash no fue creado como un editor de sonidos, por lo que su potencia en este campo es limitada. 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 del panel Propiedades:

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 en Flash (V)

5.7. ¿Mp3 o Wav?

 Como ya se ha comentado, los sonidos que Flash CS5 puede importar casi cualquier tipo de sonido,

aunque los más empelados son MP3 y WAV. Si no sabes las diferencias entre estos tipos de archivos, puedes

consultar nuestro tema básico  .

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.

Puedes ver varias pruebas en estas películas:

Música de Fondo

 Película con sonido (música) en formato .wav.Tamaño Total: 37 KB. Calidad: Buena

 Película con sonido (música) en formato .mp3.Tamaño Total: 145 KB.Calidad: Buena

Sonido "Voz"

 Película con sonido (voz) en formato .wav. Tamaño Total: 9 KB. Calidad: Regular

 Película con sonido (voz) en .mp3.Tamaño Total: 67KB. Calidad: Buena

En el primer caso sería recomendable quedarse con la película más pequeña, ya que ambos sonidos son

buenos. En el segundo caso, la segunda película sería más apropiada, ya que aunque tenga mayor tamaño, la

calidad del sonido merece la pena.

 

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 Javascript. Igualmente, como se comentó en el Tema 1, Flash CS5 permite cargar

sonidos de un modo dinámico (sin que ocupen espacio), esto se tratará en el Tema 17 "Action Script".

Unidad 6. Trabajar con objetos (I)

6.1. Los objetos en Flash ¿Qué son?

En los primeros temas vimos las herramientas para dibujar elementos en nuestra 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 de dibujo 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 (entramado de puntos blancos) 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 Seleccionar, 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 Alinear en escenario. 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.

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

verticalmente.

 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 Alinear en

escenario 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 Alinear en

escenario 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 Alinear en escenario hubiera estado activo ambos

cuadrados hubieran pasado a tener el ancho del fotograma.

 Espacio:   Espacia los objetos de un modo uniforme.

Para ver ejemplos de uso de estos comandos, podéis ver la animación situada arriba al principio del capítulo.

 

 Para practicar la alineación te aconsejamos realizar el Ejercicio Alineación de objetos.

Unidad 6. Trabajar con objetos (III)

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. Estas medidas se toman desde la esquina superior

izquierda de la pantalla (X=0 e Y=0).

Color Actual:  Indica el color actual en función de la cantidad de Rojo (R), Verde (V), Azul (A) y

transparencia Alfa (A) 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 → EditarSeleccionado, o

directamente hacemos doble clic sobre el grupo con la herramienta Seleccionar. Podremos editar los objetos

que componen el grupo por separado teniendo en cuenta que, como es lógico, los cambios realizados afectarán

al grupo además de al elemento en cuestión.

Unidad 7. Las capas (I)

7.1. ¿Qué es una capa?

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 contenido. 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 sobre el icono   junto al nombre de la capa, podremos

acceder a un panel con las propiedades de la capa en la que hayamos hecho clic. Podremos modificar todas

las opciones que hemos comentado anteriormente y alguna 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 contienen 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:

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

CS5.

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 (instancias), 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. 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 el 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 como la mostrada en la imagen. 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 Ejercicio Crear un símbolo.

Unidad 8. Símbolos (II)

8.3. Las Bibliotecas

 

En Flash CS5 podemos encontrar dos tipos de bibliotecas, las bibliotecas comunes y de ejemplos y

aquellas asociadas a las 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 como 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

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 Ejercicio Modificar una instancia.

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

Es importante recalcar, que en los efectos anteriores estamos modificando instancias de un símbolo, pero que

el símbolo original sigue intacto.

 

Aquí puedes ver el modo de aplicar una transformación Alpha a una instancia.   

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

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 nombreGrá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ónEdición para modificar el gráfico y acceder a su

línea de tiempo. 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.

El resultado podría ser éste:

Guarda este archivo porque lo completaremos más adelante.

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 CS5 permite importar mapas de bits de otros programas, cuando han sido guardados en formatos

gráficos 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.

Aquí tienes una muestra de cómo hacerlo.   

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

Si queremos traer un archivo vectorial creado en otro programa, por ejemplo Freehand o Illustrator, podemos

hacerlo de manera muy sencilla.

Simplemente accedemos al menú Archivo → Importar → Importar a escenario. A

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 visita este avanzado. 

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 CS5 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 el Ejercicio Exportar un objeto como mapa de bits.

9.7. Publicar como un mapa de bits

 

Al Exportar como hemos visto en el punto anterior, podemos "sacar" una parte de nuestra película como un

gráfico (un símbolo, un fotograma...).

Pero si lo que tenemos ya es una película completa, y queremos generar una imagen a partir de ella, lo

haremos publicándola. Al publicar, generamos un archivo partiendo de la película creada.

Lo habitual, y que veremos más adelante, es publicar la película como un archivo Flash (swf). Pero también

podemos hacerlo como imágenes.

Para ello, tenemos que acceder a la Configuración de publicación, en el menú Archivo.

Se abrirá un diálogo, en el que lo primero que elegimos es el formato en que lo queremos publicar, y el

nombre de archivo que se le dará.

Por cada formato seleccionado, se añadirá una pestaña. Desde cada una, podemos cambiar las opciones de

cada tipo de imagen.

Cuando lo tengamos, basta con pulsar el botón Publicar. En la misma carpeta donde está el archivo Flash

(.fla) se crearan las imágenes.

Unidad 9. Gráficos (V)

9.8. Crear un GIF animado con Flash

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 guardarla como un GIF animado. Los

fotogramas de la película se convertirán en fotogramas del GIF.

Para lograrlo, tenemos que publicar la película como GIF, lo cual configuramos desde la Configuración de

publicación, en el menú Archivo.

Entre los formatos disponibles, marcamos Imagen GIF.

Y configuramos algunos parámetros pulsando en su pestaña:

Entre las opciones concretas del GIF, hay dos que afectan a la animación:

En Reproducción, podemos marcar Estática (por defecto) o Animación. Debemos de elegir esta última para

que el gif sea animado.

Si es gráfico es animado, podemos seleccionar cuántas veces se repite dicha animación. Entre Reproducir

indefinidamente en bucle, o Repetir un número determinado de veces.

 

Otra opción muy interesante es Transparente, en la que decidimos cómo se exporta el escenario. Si como un

color opaco o transparente.

Abajo vemos el GIF Animado que resulta de exportar nuestro gráfico Flash.

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 incluimos en otra película, formando un símbolo. Por tanto, cualquier clip siempre podrá estar

compuesto 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 película principal 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 CS5, 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 ActionScript 3). 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 tiempo.

 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, podría quedarnos 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 liena 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 seleccionamosEdición,

podremos editarlo y trabajar con él.

Observa cómo hacerlo   

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 MovieClips de la 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 de otra película debemos abrir primero la biblioteca en la que está contenido.

Hemos visto en el tema de Símbolos, tenemos dos tipos de bibliotecas: las que están asociadas a

documentos u otras películas y las que nos proporciona Flash CS5. 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.

 

Existe otra forma mucho más cómoda: si tenemos dos documentos abiertos, podemos arrastrar los elementos

directamente de un escenario a otro.

 

Para ver cómo exportar e importar una película completa como un sólo movie clip y poder usar esto para el

desarrollo en programas como Swish, revisa nuestro tema avanzado: Otros usos de los Movie Clips  .

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 las está visualizando. Un botón, en Flash, es igual que un 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.

La interfaz de Flash 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 CS5, 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í. Ten en cuenta que podemos tener todas las capas que queramos.

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.

Todo esto es lo referente a la apariencia del botón. Después, tenemos que programar lo que queremos que

haga el botón, cómo queremos que afecte a la película. Y esto lo haremos con ActionScript.

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 CS5. Recuerda que puedes usar varias capas.

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.

Aquí podemos ver una muestra de creación de un botón lo más simple posible  

Como resultado obtenemos el botón que continuación mostramos.

Éste es un botón muy básico, pero como veremos se pueden complicar mucho. Para empezar nos servirá con

éste. 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 a través del

menú Control → Habilitar botones simples. Así podremos interactuar con el botón hasta que desactivemos

esta opción.

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.

 Practica con el ejercicio paso a paso Crear un botón con relieve.

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.

Veamos por ejemplo el botón siguiente:

Comprueba todos los estados del ratón. Por lo que nos dice el botón podemos intuir que empieza algo, pero

quizá no tengamos claro qué. Ayudaría a la navegación que al ponernos sobre el cursor, el texto cambie para

darnos información extra. Por ejemplo:

Lo único que hemos cambiado es que tenemos el texto como un movie clip, en cuando el cursor está encima,

lo cambiamos por otro con la información.

O podemos usar los clips para animar elementos dle botón, como en el siguiente ejemplo:

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 esta listo, ahora cuando pases el ratón sobre el botón el clip de película empezará a reproducirse.

 

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

En este video tutorial puedes ver cómo insertar un clip en un botón.   

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

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.

He aquí una pequeña muestra en la que sólo hemos utilizado un Bitmap de tipo GIF, sacado de la Red y lo

hemos convertido en un botón gráfico aplicándole un efecto Alfa (Transparencia) al estado de reposo, lo que da

la sensación de estar apagado (también podríamos haber aplicado brillo). En el fotograma Sobre hemos dejado

el GIF original para que al pasar sobre el botón de la sensación de encenderse. Finalmente le hemos

aumentado la cantidad de rojo en el fotograma Presionado para que parezca estar incandescente.

Unidad 11. Botones (VI)

11.6. Acciones en los botones

Puesto que existen multitud de acciones que se pueden aplicar tanto a los botones, como a otros elementos

de Flash CS5 vamos a comentar dos de las más comunes.

Nota: Al crear un archivo, habrás visto que podemos elegir distintas versiones de ActionScript (3.0 o 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 tenerlo todo mejor organizado.

Ahora, abrimos en el panel Acciones (menú Ventana → Acciones). Se mostrará un área en blanco en la

que podemos escribir:

Este panel, en el área blanca de la derecha, nos permite escribir o editar acciones directamente. De momento

no profundizaremos en esto, y ta lo haremos en el tema correspondiente.

También encontramos la ventana Fragmentos de código. Desde ella, podemos generar breves instrucciones

de código para el símbolo seleccionado, lo que la mayoría de veces nos facilitará la tarea, ya que se trata de las

opciones más repetidas.

Sin entrar en detalle de qué es cada palabra, pues esto ya lo veremos, este es el aspecto general del código

asociado a un botón:

?

1

2

3

4

5

6

miBoton.addEventListener(MouseEvent.CLICK, accionesMiBoton);

function accionesMiBoton(event:MouseEvent):void

{

    //acciones

}

Donde miBoton será el nombre de la instancia del botón.

A esta instancia, le indicamos que queremos que reaccione al clic del ratón (MouseEvent.CLICK), ejecutando

las acciones llamadas accionesMiBoton (podemos darle el nombre que queremos).

accionesMiBoton contiene las acciones a realizar, y podemos verlo a continuación. Solo habría que cambiar

el texto //acciones por las acciones a realizar.

Si tenemos varios botones, a cada uno lo referiremos por su nombre de instancia que es único. También

tenemos que dar un nombre único a accionesMiBoton para cada uno, a no ser que queramos que realicen la

misma acción.

 

Ahora veamos algunas de las acciones 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 forma más sencilla de hacerlo es seleccionar el botón que queramos usar (en el siguiente ejemplo, hemos

llamado a la instancia btnVisitarAulaclic) y buscar la acción que queremos en el panel Fragmentos de código.

En la carpeta Acciones hacemos doble clic sobre Hacer clic para ir a página Web. Se generará un código

como el siguiente:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

/* Hacer clic para ir a página Web

Al hacer clic en la instancia del símbolo especificado, la dirección URL se carga en una nueva ventana del navegador.

Instrucciones:

1. Reemplace http://www.adobe.com por la dirección URL que desee.

   Conserve las comillas ("").

*/

btnVisitarAulaclic.addEventListener(MouseEvent.CLICK, fl_ClickToGoToWebPage);

function fl_ClickToGoToWebPage(event:MouseEvent):void

{

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

}

Lo primero que encontramos en el código generado son comentarios. Este código, normalmente en gris claro,

no se ejecuta como tal, y solo sirve para indicar cosas al usuario. En este caso, nos da explicaciones de cómo

usar el código generado.

Lo único que hemos de hacer es reemplazar la url de ejemplo (www.adobe.com) por la de la página a la que

queramos que nos envíe el botón.

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.

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

reproducir. Nos será más cómodo si usamos el panel Fragmentos de código para generar el evento Clic del

botón (carpeta Controladores de eventos → evento MouseClick). En el código generado, reemplazamos el

código personalizado por nuestras funciones:

?

1234567891011

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

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

Tal cual lo hemos puesto, 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();.

 

Reconocemos que aunque ActionScript 3.0 es más potente que la versión 2.0, puede resultar mas liosa para

usuarios sin conocimientos previos. Si quieres ver cómo serían estos mismos ejemplos en ActionScript 2, te

invitamos a echar un vistazo a esta página de nuestro curso de Flash CS3.

En este videotutorial de introducción a ActionScript 3 puedes ver cómo empezar a poner código en un

botón.   

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.

El resultado podría ser algo así:

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 JavaScript, 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 visitar nuestro tema básico:    Animaciones Fotograma a Fotograma .

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.

Ya en la versión anterior de Flash se hicieron cambios importantes en el tema de animaciones. Lo que hasta

entonces 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

Aquí puedes ver cómo realizar una 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 un punto a otro 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, calcula 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 de propiedad 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,

en el que los fotogramas aparecen de color azul.

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.

Podemos seleccionar cualquier fotograma y ver dónde se sitúa el clip en cada punto. De hecho, si en alguno

de estos fotogramas lo cambiamos, se creará un fotograma clave de propiedad, mostrándose como un

diamante en la línea de tiempo.

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.

 Para practicar con las interpolaciones, realiza el ejercicio paso a paso Crear interpolaciones de

movimiento.

Unidad 12. Animaciones de movimiento (II)

12.3. El editor de movimiento

Existe un panel que nos permite personalizar mucho más la animación, 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.

Este es el aspecto del panel:

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 Bézier, 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

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

Aquí puedes ver cómo utilizar el editor de movimiento   

Unidad 12. Animaciones de movimiento (III)

12.4. Interpolación clásica

En versiones más viejas de Flash 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 pasó a

llamarse interpolación clásica.

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,

con los fotogramas sobre fondo de color morado.

Vemos que la animación va desde el fotograma 1 hasta el fotograma 30. 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.

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:

 

Aquí puedes ver cómo realizar una interpolación clásica   

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.

Pero recuerda, que para la mayoría de casos, nos resultará más versátil la interpolación de movimiento.

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 potentes, 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

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, 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 Transformació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.

Otra forma es emplear el Editor de movimiento. Veremos los cambios de tamaño en la sección de

Transformación, separados en Escala X (ancho) y Escala Y (alto).

El ejemplo siguiente incorpora estas tres características de la interpolación:

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

Aquí puedes ver cómo simulamos el bote de una pelota empleando el Editor de movimiento  

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

Aquí tienes un ejemplo de una presentación sencilla mediante texto utilizando esta técnica.

 Si no tienes claro cómo realizar una animación te recomendamos que realices el Ejercicio Animar texto por

bloques.

Unidad 12. Animaciones de movimiento (V)

12.8. Animación de líneas

Una buena animación no tiene que porqué estar compuesta sólo por textos o imágenes espectaculares. En

ocasiones conviene darle a la película un aire más sencillo o añadir determinados 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.

Aquí podemos ver un ejemplo de este tipo de presentaciones:

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.

Aquí mostramos la forma de crear una animación de este tipo.   

Unidad 12. Animaciones de movimiento (VI)

12.9. Guía de movimiento clásica

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 interpolació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é en contacto 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 sangrado a la derecha.

Aquí se puede ver cómo realizarlo.   

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, puedes ver cómo realizarlo en este videotutorial:   

Podéis poner a prueba vuestros conocimientos realizando:

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 CS5 nos ofrece la técnica de laInterpolació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.

    Si realizamos la interpolación por forma correctamente la línea de tiempo tendrá este aspecto:

    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.

Si hay algún fallo en los parámetros necesarios para que la interpolación se ejecute bien, como por ejemplo,

que uno de los objetos en capa sea un símbolo, se mostrará algo así en la línea de tiempo:

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.

Podemos observar cómo realizar una interpolación por forma pulsando aquí.   

A continuación podemos ver el ejemplo de interpolción de forma sencilla.

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 de convierta en otro antes de

adoptar su forma definitiva.

En el siguiente ejemplo podemos ver el ejemplo anterior pero haciendo que se transforme previamente en un

triángulo antes de pasar a ser cuadrado.

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.

En este otro ejemplo se observa la transición de colores más claramente y, además, observamos transiciones

de forma a texto.

Cuando creemos interpolaciones de forma y queramos incluir textos deberemos actuar de un modo especial

dado que un objeto de texto no se considera como una forma. Para ello, y una vez tengamos la 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.

Aquí mostramos cómo realizar una animación de este tipo.  

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

Visita el siguiente videotutorial para comprender mejor qué es un consejo o pista de forma y ver un ejemplo de

la creación y usos de los consejos de forma.   

Ahora realicemos el seguimiento de otro ejemplo, tenemos la siguiente animación (sin consejos de forma):

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. 

El resultado del ejemplo anterior es este.

 Para practicar estos conceptos realiza el Ejercicio Consejos de forma.

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 panelPropiedades. 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 AN (anchura) y AL (altura) y para modificarla

basta colocar el cursor sobre el valor y aparecerá un deslizador que podemos mover a izquierda o derecha,

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 Transformació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. Si la casilla está desactivada podríamos encontrarnos con una animación como la

siguiente.

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 el Ejercicio

Acelerar movimiento.

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.

Derecha (En interpolación clásica CW). Permite realizar el número de rotaciones completas o el valor de grados en la dirección de las agujas del reloj.

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

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

Aquí podemos ver cómo aplicar esta técnica.   

Este es el resultado que hemos obtenido, como podemos comprobar, ha recorrido el camino más corto, ya

que el 6 ha pasado progresivamente de su posición anterior a la que ocupaba el 1 de la otra forma el 6 habría

pasado por las posiciones anteriores del 5, 4, 3, 2 y 1, siendo la longitud del  movimiento mucho mayor.

Veamos un ejemplo de rotación a derechas en una interpolación de movimiento.   

 

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.

Para entender mejor este concepto, recordemos una animación anterior, en la que el avión hacía una especie

de "looping". Resultaba un poco extraño ver la animación porque los aviones no van marcha atrás y, en esta

ocasión y en muchas otras, no es conveniente que los objetos se muevan solo en el escenario quedando el

mismo símbolo inmóvil, como si levitara.

Con este comando solucionaremos esto, y el resultado sería este.

 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.

En el ejemplo que tenemos a la izquierda, hemos intentado simular este efecto. Para ello hemos creado un

semáforo de luces intermitentes de color ámbar.

Como se puede ver, las luces se encienden y apagan progresivamente de manera alternada. Para conseguir

esto hemos creado una 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.

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. Veamos un ejemplo de esto.

Vemos como al acercarse el avión a la luz roja del Sol, éste lo ilumina con una luz roja.

Hemos aplicado a la instancia del avión del último fotograma de su interpolación de movimiento un efecto de

tinte rojo con una intensidad del 60%. Lo mismo hemos hecho en el centro del Sol pero con dos fases, poniendo

en el fotograma central un efecto de tinte granate del 25%.

La corona solar es simplemente una interpolación de forma en cuatro fases.

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.

Este ejemplo podría representar la entrada a cualquier web o portal de Internet, de hecho es bastante típico.

Para ver cómo realizar una animación como la anterior pulsa aquí.   

Unidad 15. Generar y publicar películas swf (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 swf (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 casillaGenerar 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í:

?

1

2

3

4

5

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 ActionScript

veremos cómo mostrar en el preloader el estado de la carga.

Unidad 15. Generar y publicar películas swf (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 hará 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 Ejercicio Publicar SWF.

Unidad 15. Generar y publicar películas swf (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.

Flash con FSCommand: Imprescindible cuando se usen FSCommands. Permiten controlar 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 swf (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.

Aquí podemos ver un ejemplo de publicación de una película Flash para la Web.   

 

Además, Flash creará el código JavasScript 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.

Unidad 16. Introducción a ActionScript 3.0 (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 CS5. A grandes rasgos, podemos decir que el ActionScript nos permitirá realizar con

Flash CS5 todo lo que nos propongamos, ya que nos da el control absoluto de todo lo que rodea a una 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 CS5.

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

En la mayor parte de las ocasiones, será necesario "programar". Flash CS5 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. Introducción a ActionScript 3.0 (II)

16.2. El panel Acciones

 

En Flash CS5, el Panel Acciones sirve para programar scripts con ActionScript, por tanto lo aquí

introduzcamos le afectará de menor o mayor medida. Debemos tener claro desde un principio que el

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 CS5, 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 script 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 para 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 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 Ejercicio Panel Acciones.

Unidad 16. Introducción a ActionScript 3.0 (III)

16.3. El panel Fragmentos de código

En Flash CS5 se ha creado un nuevo panel para ayudarnos a generar el código ActionScript: el panel

Fragmentos de código.

Este panel nos resultará muy útil, ya que incluye las funciones básicas. Por ejemplo, los eventos de botones

siempre se escriben de la misma forma. Desde la sección Controladores de eventosdel panel, podemos

introducir este código, y sólo modificar la parte necesaria.

Pero además accediendo a sus opciones encontramos opciones muy interesantes:

Lo más destacado es que podemos crear nuestros propios fragmentos de código, con intruscciones que

usemos habitualmente.

Además podemos exportarlas e importarlas a otras instalaciones del programa.

Unidad 16. Introducción a ActionScript 3.0 (IV)

16.4. Los operadores y expresiones

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

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.

Por ejemplo:

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.

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

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.

 Operadores Aritméticos

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

 

 Operadores de Asignación

Asigna el valor de una variable.

Operador Descripción Ejemplo

= Asigna a la variable de la izquierda el valor de la derechavariable 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ónvariable vale 15;

variable /= 5;variable vale 3;

 

 Operadores de Comparación

Empleados en expresiones condicionales, 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 da verdadero.

< Menor que 6 < 5 da falso.

>= Mayor o igual que 6 >= 5 da verdadero.

<= Menor o igual que 6 >= 6 da verdadero.

== Igual 'hola' == 'hola' da verdadero.

!= Distinto 'hola' != 'hola' da falso.

Unidad 16. Introducción a ActionScript 3.0 (V)

 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 menor de edad, le decimos una cosa, de lo

contrario, le decimos otra. Bastaría con hacer algo así:

?

1

2

3

4

5

if (edad_usuario<18) {

    dar_mensaje_1();

} else {

    dar_mensaje_2();

}

Aquí lo que estamos diciendo es lo siguiente: "Si edad_usuario es menor a 18, entonces damos el mensaje 1,

si no (igual o superior a 18) le damos el mensaje 2.

El significado de 'if' y 'else' lo veremos 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.0 (VI)

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

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 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 define 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 pararlo, 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.0 (VII)

16.6. Las acciones - métodos comunes

Flash CS5 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 CS5 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 conocimientos, veremos que no es difícil 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):

oescena: Nombre de la escena a la que queremos enviar la cabeza lectora. Debe ir entre comillas dobles.

ofotograma: 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.0 (VIII)

 Acciones - Navegador / Red

Estas acciones tienen 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.aulaclic.es"), "_blank"); --> Abre la web de aulaClic 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 conaddChild(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 si no, 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íneas, 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. Introducción a ActionScript 3.0 (IX)

16.7. 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 CS5 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.0 (X)

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ómo utilizar 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 rectangulo 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.

?

1

2

3

4

5

6

7

boton_reducir.addEventListener(MouseEvent.CLICK, encogerRectangulo);

function encogerRectangulo(event):void

{

    rectangulo.height = rectangulo.height / 2;

    rectangulo.width = rectangulo.width / 2;

}

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

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

 

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

panel Fragmentos de código.

17.2. Código ActionScript para botones

Los Botones (objeto Button para Flash CS5) 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.

En realidad, los botones se comportan como cualquier símbolo. A todos les podemos aplicar eventos, ya que

lo que hacemos es asociarlos normalmente al clic del ratón. Los botones tienen la ventaja de que nos permiten

representar distintos estados, mejorando la percepción de interactividad.

Para tener el código organizado, es mejor crear una nueva capa e insertarlo ahí.

Veamos algunos de ellos:

?

12345

import flash.events.MouseEvent;

miBoton.addEventListener(MouseEvent.CLICK, funcionAlHacerClick);

function funcionAlHacerClick(event:MouseEvent):void{

678

     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.

?

12345678

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

Esta 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.aulaclic.es

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.

?

123456

import flash.events.*;miBoton.addEventListener(MouseEvent.CLICK, 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 ...)

?

1

2

3

4

5

6

import flash.events.*;

miBoton.addEventListener(MouseEvent.CLICK, 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 CS5 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:

?

1 //Código 1

2

3

4

5

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.

?

1

2

3

// Código 2

canal.stop();

Este código detiene el sonido que se esté reproduciendo por el canal de sonido canal.

?

1

2

3

4

// 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 musica 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:

?

1

2

3

4

//  Código 4

canal.stop();

canal = musica.play();

Ahora que ya sabemos controlar los sonidos mediante ActionScript, veamos un ejemplo que reúne 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 cómo 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:

?

1

2

3

4

5

6

7

8

9

10

/* 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 */

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

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.

Unidad 18. Navegación - ActionScript (I)

18.1. Introducción

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

A lo largo del tema utilizaremos este ejemplo para ilustrar la teoría de forma guiada.

18.2. 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 (echa un vistazo a la

sección Controladores de evento del panel Fragmentos de código).:

MouseEvent.CLICK: ejecuta la acción al hacer clic con el ratón..

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.

?

123456

miBoton.addEventListener(MouseEvent.CLICK, miFuncion);

function miFuncion(e:MouseEvent):void{    //código de la función}

Puedes ver los todos los eventos de ratón en este avanzado  . 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. Navegación - ActionScript (II)

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

?

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

?

12345678

import flash.events.MouseEvent;

encuentranos.addEventListener(MouseEvent.CLICK,botonenc);

function botonenc(event:MouseEvent):void{    gotoAndPlay("Encuentranos");}

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.

 

En el panel Fragmentos de código encontramos algunas funciones que nos pueden ser de ayuda, en la

carpeta Navegación por la línea de tiempo.

Unidad 18. Navegación - ActionScript (III)

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

?

1234567

import flash.events.*;miBoton.addEventListener(MouseEvent.CLICK, miFuncion);

function miFuncion(event:MouseEvent):void{    gotoAndPlay("escena_otros", 1);}

Con esto estamos indicando que al soltarse el botón el cabezal se desplace al fotograma 1 de la

escena escena_otros y empiece a reproducirse a partir de allí. Sencillo, ¿verdad?

Unidad 18. Navegación - ActionScript (IV)

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

?

1

2

3

4

5

miBoton.addEventListener(MouseEvent.CLICK, miFuncion);

function miFuncion(event:MouseEvent):void {

     miClip.gotoAndPlay(20);

}

De esta forma (y como hemos visto en temas anteriores) podemos acceder a todas las propiedades del clip.

Escribiendo esta línea haremos que el clip se haga invisible:

?

1

2

3

miBoton.addEventListener(MouseEvent.CLICK, miFuncion);<p></p>

function miFuncion(event:MouseEvent):void {

   miClip.visible = false;

4 }

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.

?

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

?

12345678

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 declipPadre podríamos escribir:

?

123

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  .

Por lo demás, el funcionamiento de un clip no se diferencia en nada a la línea de tiempo de cualquier otra

película. Podemos etiquetar los fotogramas de igual modo para llamarlos directamente por su nombre:

?

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

?

1

2

3

4

5

6

estrella.addEventListener(MouseEvent.CLICK,funcion_desaparece);

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.

?

1

2

3

4

5

6

detalle.addEventListener(MouseEvent.CLICK,funcion_aparece);

function funcion_aparece(event:MouseEvent):void {

    estrella.gotoAndPlay("aparece");

    detalle.gotoAndPlay("desaparece");

}

Unidad 18. Navegación - ActionScript (VII)

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

 

Antes de utilizar una variable, tenemos que declararla. Para declarar (crear) una variable sólo tendrás que

escribir la siguiente línea:

?

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

?

123456789101112131415161718192021

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:

?

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

Y en el fotograma 15 colocamos las siguientes líneas en el Panel Acciones:

?

1

2

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:

?

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

var miVariable2:String = "Esta también lo es";

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

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 veremosEsta 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. Navegación - ActionScript (IX)

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

?

1

2

3

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:

?

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

?

1 function saludar(nombre:String) {

2

3

  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:

?

1 saludar("Bruno"); //Escribiría: Hola Bruno

Podemos enviar 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:

?

1

2

3

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:

?

1

2

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:

?

1

2

3

4

5

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

?

1

2

3

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, sino 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:

?

1

2

3

4

saludar("amigo"); //No haría nada

trace(saludar("amigo")); //Mostraría en salida: 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.8. 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 calse 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:

?

1 var miContenedor:Sprite = new Sprite;

Ahora tenemos un contenedor, pero vacío. Podemos añadirle elementos que pasaran a ser elementos

hijos del contenedor. Para ello podemos utilizar uno de los métodos de los contenedores:

?

12

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:

?

1 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, índice) - 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:

?

1 objeto.removeEventListener(Event.ENTER_FRAME, miFuncion);

Unidad 18. Navegación - ActionScript (XII)

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

?

1 carga.addEventListener(MouseEvent.CLICK, abrir);

2

3

4

5

6

7

8

9

10

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, sino 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 una película cargando archivos

 

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

Nos basaremos en el siguiente ejemplo:

Si quieres hacer este ejemplo, 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 contenedorImagen 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.

?

123456789

// FOTOGRAMA 1stop();

var total:Number=4;var imagenActual:Number=0;  //Utilizamos un objeto Loader para cargar las imágenesvar cargadorImagen = new Loader();contenedorImagen.addChild(cargadorImagen);

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

10111213141516171819202122232425262728293031

var cargadorTexto:URLLoader = new URLLoader();  //Indicamos el formato de los datos que leerácargadorTexto.dataFormat=URLLoaderDataFormat.VARIABLES;  //Y la ubicación del archivovar archivoTexto:URLRequest = new URLRequest("diapositivas.txt");  //Y el método que lo cargacargadorTexto.load(archivoTexto);  //Y lo configuramos para que cuando se complete la carga,  //avance al fotograma 6cargadorTexto.addEventListener(Event.COMPLETE, textoCargado);function textoCargado(event:Event):void{    gotoAndPlay(6);}

btnSiguiente.addEventListener(MouseEvent.CLICK, irSiguiente);function irSiguiente(event:MouseEvent):void{    gotoAndPlay(2);}

Las variables que vamos a utilizar son:

La variable total almacena el 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 obtener datos externos, para eso hemos empleados dos objetos:

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

Un URLLoader, llamado cargadorTexto, que es un objeto que nos permite extraer datos de archivos. En nuestro caso, texto de un archivo de texto.

El Loader ya lo conocemos, y de momento sólo lo hemos añadido al MovieClip contenedorImagen. Vamos

a centrarnos en cómo utilizamos el URLLoader.

?

12

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:

?

12345678

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.

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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

  //Y el método que lo carga

cargadorTexto.load(archivoTexto);

  //Y lo configuramos para que cuando se complete la carga,

  //avance al fotograma 6

cargadorTexto.addEventListener(Event.COMPLETE, textoCargado);

function textoCargado(event:Event):void

{

    gotoAndPlay(6);

}

btnSiguiente.addEventListener(MouseEvent.CLICK, irSiguiente);

function irSiguiente(event:MouseEvent):void

{

    gotoAndPlay(2);

}

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ñadido 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 desvanecerse la imagen y donde empieza a cargarse la siguiente. Veamos el código que hemos

puesto:

?

1

2

3

4

5

6

7

8

9

if (imagenActual==total) {

    imagenActual=0;

}

imagenActual++;

//Cambiamos el texto

textoDiapositiva.titulo_txt.text=cargadorTexto.data['titulo'+imagenActual];

textoDiapositiva.descripcion_txt.text=cargadorTexto.data['descripcion'+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.

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 la sección Parámetros de

componente del inspector de Propiedades:

Unidad 19. Formularios - ActionScript (II)

Veamos cuales son las opciones para los diferentes componentes:

 TextInput (Introducción de texto):

displayAsPassword: Oculta/muestra el contenido del texto mostrándose un asterisco por carácter.

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

text: Indica el texto inicial de la caja.

maxChars: El número máximo de caracteres que se pueden cumplir.

 TextArea (Área de texto):

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

text: Indica el texto inicial de la caja.

htmlText: Contiene texto que acepta etiquetas html.

wordWrap: Permite que se pueda realizar un desplazamiento del texto de arriba abajo. En caso de que no se permita (false) cuando el texto sobre pase el área del componente aparecerá una barra de desplazamiento que permitirá mover el texto de izquierda a derecha.

vertical/horizontalScrollPolicy: Establece cómo se mostrarán las barras de desplazamiento del texto: on, siempre, off nunca, y auto, solo cuando el texto no quepa.

 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: Indica si el botón se encuentra inicialmente seleccionado.

toggle: Cuando se encuentra marcada, hace que el botón pueda tomar dos posiciones, presionado y no presionado.

 RadioButton (Botón de opción):

value: Especifica los datos que se asociarán al RadioButton. La propiedad 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: 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: Indica si la casilla de verificación se haya inicialmente seleccionada.

 ComboBox (Lista desplegable):

editable: Permite la edición del campo. Mediante ActionScript podemos hacer que se añadan nuevos elementos a la lista.

dataProvider: Matriz donde determinaremos el nombre de los elementos de la lista y su valor. Se mostrará el siguiente diálogo para introducir los pares texto a mostrar (label) y valor a enviar (data):

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

dataProvider: Matriz donde determinaremos el valor qué devolverá el componente al seleccionar determinada posición.

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

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

?

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

?

1

2

3

4

5

6

7

btn_borrar.addEventListener(MouseEvent.CLICK,boton);

function boton(event:MouseEvent):void{

  nombre.text = "";

  email.text = "";

  mensaje.text = "";

}

Como puedes ver, hemos creado un escuchador para btn_borrar. Cuando se activa simplemente vaciamos

el contenido de los campos de texto que queramos.

También podríamos iniciar los campos de otra forma:

?

1

2

3

nombre.text = "Escribe aquí tu nombre";

email.text = "Escribe aquí tu e-mail";

mensaje.text = "Escribe aquí tu mensaje";

En definitiva, puedes tratar los campos como quieras.

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

Unidad 19. Formularios - ActionScript (V)

19.3. Validar datos

Antes de enviar los datos es conveniente validarlos, por ejemplo, para que un campo requerido no quede en

blanco. Si la validación se completa, proseguimos con el envío, pero si no, advertimos al usuario de los errores.

Un campo requerido es aquél que el usuario debe de rellenar. Por ejemplo, en el caso de un campo de texto,

podemos comprobar su longitud con la propiedad miCampoTxt.text.lenght, y si es 0es vacío.

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

propiedad miCasilla.selected.

 

Una forma más avanzada sería utilizar expresiones regulares, con el objeto RexExp, que nos permite

personalizar mucho más la validación. Por ejemplo, la siguiente función comprueba si el valor es un número:

?

1

2

3

4

5

function esNumero(valor:String):Boolean

{

    var expRegular:RegExp = /[0-9]+/;

    return expRegular.test(valor);

}

Con esto para comprobar si el contenido de un texto es numérico, bastaría con preguntar

si esNumero(miCampo.text).

Una función muy útil es la de establecer dónde colocar el foco escribiendo la siguiente línea:

?

1 miCampoTxt.stage.focus = miCampoTxt;

De este modo, si encontramos un error al validar podemos establecer el punto de inserción en el campo

correspondiente para que el usuario escriba directamente.

Para acabar, debemos de tener un campo de texto para mostrar los posibles errores.

Vamos a unir todo esto en una función que validará los datos de un formulario.

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

function validarDatos():Boolean {

    if (txt_nombre.length==0) { //campo requerido

        txt_nombre.stage.focus=txt_nombre; //le damos el foco

        txt_aviso.text="Introduce tu nombre"; //Indicamos el error

        return false; //Devolvemos falso

    } else if (!chk_condiciones.selected) {

        //Comprobamos que la casilla esté marcada

        chk_condiciones.stage.focus = chk_condiciones;

        txt_aviso.text="Debes aceptar las condiciones";

        return false;

    } else {

        if (esNumero(txt_edad.text)) { //Comprobamos si es un 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;

22

23

24

25

26

27

28

29

            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.

?

1

2

3

4

5

6

btn_enviar.addEventListener(Mouse.CLICK, validaryEnviar);

function validaryEnviar(event):void {

    if (validarDatos()) { //validamos

        enviarDatos(); //Y si es True, enviamos

    }

}

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:

?

123456789101112131415161718192021222324252627282930313233343536373839404142434445

//Función que se ejecuta al presionar el botón de envíofunction 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ían 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(MouseEvent.CLICK, validaryEnviar);function validaryEnviar(event):void {    if (validarDatos()) { //validamos        enviarDatos(); //Y si es True, enviamos    }}

4647

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:

?

123

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 envío (method),

como en los formularios HTML, y los datos (data) que hemos configurado en el objeto URLVariables.

?

123

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:

?

1

2

3

4

nombre_txt.tabIndex = 1;

mail_txt.tabIndex = 2;

mensaje_txt.tabIndex = 3;

reset_btn.tabIndex = 4;

submit_btn.tabIndex = 5;

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:

?

1

2

3

4

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

import fl.managers.FocusManager;

var fm:FocusManager = new FocusManager(this);

fm.defaultButton = submit_btn;

De esta forma haremos que el 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 la siguiente información XML que tenemos en un archivo,

llamado comentarios.xml:

?

1

2

3

4

5

6

7

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

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

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

?

1

2

3

4

5

6

7

8

9

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>

10

11    </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:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

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

    }

}

23

Comenzamos declarandos el objeto XML, al que hemos llamado datosXML porque es lo que contendrá.

Como todo objeto, tiene una serie de propieades que no vamos a detallar. Hemos utilizado la

propiedad ignoreWhitespace, que ignorará aquellos campos que 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ónXML() para convertirlo a

información XML, y se la asignamos a nuestro objeto XML:

?

1 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 hecho un bucle for para

recorrer todos los elementos, e ir construyendo la cadena de texto que mostramos en la caja de texto.

Esta forma requiere que conozcamos la estructura del archivo, saber que se divide en

etiquetas <comentario> y que dentro de ella tenemos la etiqueta <email>.

Utilizando los índices, podemos acceder a los distintos elementos de la jerarquía. Por ejemplo:

?

1

2

3

4

5

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

?

1

2

3

4

5

6

7

8

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

?

1

2

3

4

5

6

7

8

.mensaje {

    font-style: italic;

    color: #2C578F;

}

a {

   font-weight: bold;

   color: #CF406E;

}

Podemos distinguir dos estilos: uno aplicado a los elementos con la clase mensaje (class="mensaje") y otro

aplicado a los enlaces (<a href...).

Como siempre, e independientemente de para qué lo usemos, cargamos la información del archivo con un

objeto URLLoader, y preparamos el evento complete, para utilizar los datos cuando estén listos:

?

1

2

3

var cargadorCSS:URLLoader=new URLLoader();

cargadorCSS.load(new URLRequest('comentarios.css'));

cargadorCSS.addEventListener('complete', estiloCargado);

El objeto que nos permite utilizar las propiedades CSS es del tipo StyleSheet. Lo declaramos, y cuando el

cargador tenga los datos listos es su propiedad .data, se los asignamos a la hoja de estilo con su

método parseCSS. Y para acabar, con la propiedad styleSheet de la caja de texto indicamos que usará nuestra

hoja.

?

1

2

3

4

5

6

7

var miHojaEstilo:StyleSheet = new StyleSheet();

function estiloCargado(event):void {

  //Convertimos los datos cargados

  miHojaEstilo.parseCSS(cargadorCSS.data);

  //E indicamos a la caja de texto que use esta hoja

  comentarios_text.styleSheet = miHojaEstilo;

};

Esto debemos de realizarlo antes de rellenar la caja de texto con HTML , ya que flash no trata igual el

HTML si no tiene una hoja de estilo asociada.

Si queremos podemos cambiar la propiedad para utilizar otra hoja de estilo. O aprovechando las funciones y

objetos definidos, podemos crear un botón para que cargue una nueva hoja:

?

1

2

3

4

btn.addEventListener(MouseEvent.CLICK, cambiarHoja);

function cambiarHoja(event) {

  cargadorCSS.load(new URLRequest('comentarios2.css'));

}

Como el cargador ya tiene asociado el evento complete, se volverá a ejecutar la

función estiloCargado asignando el nuevo estilo.

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 cómo 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).

Veremos principalmente cómo crear los filtros mediante ActionScript, por ser la opción más potente. Pero

también puedes crear los filtros desde el panel de Propiedades, pulsando el iconoNuevo en la sección Filtros.

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.

Unidad 20. Los filtros (II)

20.2. El filtro Sombra

Utilizando este filtro podremos añadirle una sombra a la imagen:

En la imagen de la izquierda 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 píxeles.

Desenfoque Y: determina la cantidad de desenfoque vertical en píxeles.

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 píxeles.

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:

?

12345678910

import flash.filters.DropShadowFilter;

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

...

miClip.filters = [sombra];

También podríamos crear la sombra directamente con todas sus propiedades en el constructor de este modo:

?

123

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 el Ejercicio Carga y modificación de

filtros.

Unidad 20. Los filtros (III)

20.3. El filtro Desenfoque 

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

Sus opciones son las siguientes:

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

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

.quality (Calidad): 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 Desenfoque escribiendo el siguiente código:

?

12345678

import flash.filters.BlurFilter;

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:

?

123

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

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:

?

1234567891011

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:

123

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

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:

?

12345678910

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:

?

123456789

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

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:

?

1234567891011

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:

?

123

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

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:

?

123456

import flash.filters.GradientBevelFilter;

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

78910

...

miClip.filters = [bisel];

También podremos crear el bisel directamente con todas sus propiedades en el constructor de este modo:

?

12345

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

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:

?

1

2

3

4

5

6

7

8

9

10

import flash.filters.ColorMatrixFilter;

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

                       0, 1, 0, 0, 100,

                       0, 0, 1, 0, 100,

                       0, 0, 0, 1,   0];

var ajustaColor:ColorMatrixFilter = new ColorMatrixFilter(miMatriz);

miClip.filters = [ajustaColor];

20.9. Acceder a los filtros de un elemento 

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

Esta propiedad almacena una matriz que no puede ser editada directamente. Así que si queremos

modificar los filtros que afectan a un objeto tendremos que darle una nueva matriz a la propiedad y desechar la

anterior.

Así, si queremos añadirán nuevo filtro al objeto miClip deberemos escribir lo siguiente:

?

1

2

3

var sombra:DropShadowFilter = new DropShadowFilter();

var nuevaMatriz:Array = miClip.filters;

4

5

6

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 contienemiMatriz al clip miClip.

 

Como esta propiedad se trata de una matriz también podemos acceder a los filtros de esta forma:

?

1

2

3

4

5

6

var nuevaMatriz:Array = miClip.filters;

nuevaMatriz[0].blurX = 15;

nuevaMatriz[0].blurY = 15;

miClip.filters = nuevaMatriz;

Descargamos los filtros en nuevaMatriz, y ahora accedemos al primer filtro almacenado y cambiamos sus

propiedades blurX y blurY. Una vez modificadas, volvemos a volcar el contenido

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

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 CS5

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. Utilizaremos el siguiente

ejemplo para documentar algunos de los pasos que deberemos realizar.

 

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 ésta:

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ónAceptar 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 URLdel 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:

A partir de este punto, ya tenemos el vídeo incorporado en nuestro proyecto.

Unidad 21. Vídeo (II)

21.3. Puntos de referencia

El vídeo se puede mostrar como un flujo, simplemente reproducirlo y pararlo. Pero podemos hacer más,

podemos hacer que se pueda navegar a determinados momentos del vídeo, o que se produzca un evento

cuando alcance una posición determinada. Pero para hacer todo esto, tenemos que trabajar con puntos de

referencia.

Podemos ver Puntos de referencia desde el panel de Propiedades del componente de vídeo:

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

referencia de ActionScript.

 Los puntos de referencia codificados se añaden al codificar el vídeo con Adobe Media Encoder.

Pueden ser de Navegación o 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 la imagen anterior, vemos que hay 3 puntos 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 deEvento desde los que pasaremos un parámetro que hará que se muestre determinado fotograma de un clip que se encontrará en el Escenario.

 Realiza el siguiente ejercicio paso a paso para ver cómo Crear Puntos de Referencia Codificados.

 

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

podemos añadirlos directamente desde el panel de Propiedades. Para hacerlo no tenemos más que desplazar

el cabezal del vídeo hasta el momento en el que lo queramos añadir, y pulsar el icono más + del panel.

Tanto los puntos de ActionScript como los codificados, pueden enviar parámetros, lo que nos permite recibir

información.

21.4. El componente FLVPlayback

El vídeo, no se reproduce directamente. Lo hace a través de un reproductor, un componente del

tipo FLVPlayback.

Otra forma de insertar un vídeo en el escenario, es creando primero este componente, e indicándole el vídeo

a reproducir. Podemos hacerlo a través del Panel Componentes, accesible desde el menú

desde Ventana → Componentes→ FLVPlayback.

Desde el inspector de Propiedades podemos configurarlo. Veamos sus 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 los puntos codificados, aunque sí los de ActionScript.

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

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.

FullScreenButton: cambia al modo de pantalla completa.

MuteButton: establece el volumen de la película directamente a 0. Actuaría de forma similar a la línea:

?

1 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 nombre de instancia y

luego asociarlo al reproductor empleando ActionScript. Básicamente, el reproductor tiene una propiedad que

coincide con el tipo de componente, por lo que hay que asignar cada instancia a su propiedad correspondiente.

Un ejemplo sería el siguiente:

?

1234

miVideo.playButton = miBotonPlay;miVideo.pauseButton = miBotonPausa;miVideo.playPauseButton = miBotonPausaPlay;miVideo.stopButton = miBotonStop;mVideo.backButton = miBotonAtras;

5678910

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.6. Crear controles propios

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

consideres necesarios y utilizar las propiedades del componente FLVPlayback.

Puedes recurrir al panel Fragmentos de código donde encontrarás códigos muy útiles con las funciones

básicas.

play(): reproduce el vídeo.

?

1 miVideo.play();

stop(): detiene el vídeo y vuelve al inicio.

?

1 miVideo.stop();

pause(): detiene el vídeo conservando su posición actual.

?

1 miVideo.pause();

seek(segundo:Number): permite el avance o retroceso de la película de vídeo.

?

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

?

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

?

12

miBoton.addEventListener(MouseEvent.CLICK,pararContinuar);function pararContinuar(event:MouseEvent) {

345678

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

21.7. Navegar con los puntos de referencia

Ahora veremos como interactuar con los puntos de referencia que hayamos creado.

Principalmente, podemos usar los puntos de referencia de dos formas: usarlos apra navegar por el vídeo, o

esperar a que se produzcan y entonces realizar una acción.

 

 Navegar con puntos de referencia

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:

?

12345

miBoton.addEventListener(MouseEvent.CLICK,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.

?

12

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

Unidad 21. Vídeo (IV)

21.8. Trabajar con eventos de vídeo

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.

 Capturar el evento.

Imaginemos que tenemos un vídeo con un punto de referencia llamado susto, y que cuando el vídeo lo

alcance, queremos mostrar un texto determinado en un componente de texto.

Lo que tenemos que hacer es escuchar cuándo se produce el evento MetadataEvent.CUE_POINT, y

entonces llevar a cabo nuestra acción, como en el siguiente ejemplo:

?

1

2

3

4

5

6

7

8

9

10

11

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

reproudctor.addEventListener(MetadataEvent.CUE_POINT, fl_CuePointHandler);

function fl_CuePointHandler(event:MetadataEvent):void

{

    //con event.info.name podemos conocer el nombre el punto

    if(event.info.name=="susto") {

        txtSalida.text="Atención a la cara de Juanito";

    }

}

Como vimos, también podíamos recuperar parámetros del punto de referencia:

?

1

2

3

4

import fl.video.MetadataEvent;

reproductor.addEventListener(MetadataEvent.CUE_POINT,eventosVideo);

function eventosVideo(event:MetadataEvent ) {

5

6

7

8

    if (event.info.parameters) {

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

    }

}

Lo que hacemos en la condición, es comprobar si hay información sobre los parámetros (.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.

Unidad 22. Juegos interactivos (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:

?

1

2

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:

?

1 miClip.scaleX = 2;

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:

?

1

2

3

4

5

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:

?

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

Veamos este ejemplo:

Aquí hemos creado un clip de película con tres posiciones, parado, 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:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

var izquierda:Boolean = false;

var derecha:Boolean = false;

miClip.gotoAndStop("parado");

miClip.x = 10;

miClip.addEventListener(MouseEvent.CLICK,iniciarMovimiento);

function iniciarMovimiento(event:MouseEvent):void{

    if (miClip.x <= 10) {

        miClip.gotoAndStop("derecha");

        derecha = true;

    }

    if (miClip.x >= 495) {

        miClip.gotoAndStop("izquierda");

        izquierda = true;

    }

}

miClip.addEventListener(Event.ENTER_FRAME,desplazar)

function desplazar(event):void{

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

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

?

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

?

1 miClip.rotation = -90;

Para devolver al objeto a su posición original sólo tendrás que escribir la siguiente línea:

?

1 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. Juegos interactivos (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:

?

1 var angulo:Number = Math.atan2(x, y);

Nota: Hay que tener en cuenta que el ángulo calculado está expresado en radianes.

Ahora veamos las tres consideraciones que tenemos que tener en cuenta.

Observa este ejemplo:

Lo primero a tener en cuenta es que las coordenadas que tenemos del punto al que queremos orientar el

objeto no 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:

?

1 var angulo:Number = Math.atan2(x1 - x2, y1 - y2);

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:

?

1

2

var grados:Number = Math.round(angulo*180/Math.PI);

miClip.rotation = grados + 90;

Desde luego la suma que hemos realizado es consecuencia directa de que el objeto este orientado

inicialmente hacia arriba (y empiece a contar los grados desde ese punto en 0).

Si 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 interactivos (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:

?

1 miContenedor.addChild(objeto);

Como ya vimos, esto lo empleábamos 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 SctionScript, y le damos el nombre de la clase en Clase:. Recuerda este nombre, porque es el que

utilizaremos para crear los objetos.

Con esto, hemos creado la una clase (en la imagen, la clase miClip). Como no hemos asociado nada de

código, esta clase se comportará exactamente como un MovieClip, ya que es su clase base (caja de texto Clase

base). Ahora, para agregar estos elementos, sólo tenemos que crear un nuevo objeto de la clase, y agregarlo al

contenedor:

?

1

2

var miObjetoClip:miClip = new miClip;

miContenedor.addChild(miObjetoClip);

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

comentamos al hablar de los contenedores.

?

1 miContenedor.removeChild(miClip);

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

 Realiza el ejercicio paso a paso Agregar objetos dinámicamente para practicar mejor estas funciones, y

crear el ejemplo anterior.

Unidad 22. Juegos interactivos (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 usábamos estas dos

propiedades.

La función startDrag permite varios parámetros:

?

1 miObjeto.startDrag(bloqueaCentro, rectángulo);

En bloqueaCentro podremos pasarle un valor booleano (true o false) que indicará si el arrastre se

realizará desde el centro del clip (true) o desde el punto donde hizo clic el usuario (false).

El otro 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:

?

1

2

3

4

5

6

7

8

miObjeto.addEventListener(MouseEvent.MOUSE_DOWN, arrastrar);

function arrastrar(event):void {

    miObjeto.startDrag();

}

stage.addEventListener(MouseEvent.MOUSE_UP, soltar);

function soltar(event):void {

    miObjeto.stopDrag();

    trace(miObjeto.dropTarget);

9

10}

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 ningún objeto, devolverá NULL.

Observa también que al soltar, es la escena la que escucha el evento. Esto hace que lo podamos soltar

aunque, por lo que sea, el cursor ya no esté sobre el objeto.

 Realiza el ejercicio paso a paso de Arrastre y Orientación de objetos para practicar conceptos que hemos

visto hasta ahora.

 

 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:

?

1

2

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:

?

1

2

3

4

5

6

7

8

9

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

addEventListener(Event.ENTER_FRAME,cambiarCursor);

function cambiarCursor(event):void {

    texto.contador_txt.text="("+mouseX+", "+mouseY+")";

    texto.x = mouseX; //Asignamos las coordenadas

    texto.y = mouseY; //Al elemento de texto

    miCursor.x = mouseX; //Y al clip que hará de cursor

    miCursor.y = mouseY;

}

Comenzamos ocultando el cursor verdadero, con el método Mouse.hide();.

En la biblioteca tenemos dos clips miCursor, que es lo que queremos mostrar como cursor, y texto, otro clip

en el que mostramos las coordenadas. Como queremos que ambos objetos sigan al cursor real, en un evento

repetitivo como enterFrame, les asignamos a ambos las coordenadas del ratón.

Podemos volver a visualizar el ratón, por ejemplo, porque cambiamos de fotograma, con el código:

?

1 Mouse.show();

Unidad 22. Juegos interactivos (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:

?

1234567891011121314

addEventListener(KeyboardEvent.KEY_DOWN, capturarTeclado);

 function capturarTeclado(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, H

OME, 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 código que hemos incluido es el siguiente:

?

1234567891011121314151617181920212223242526272829303132333435363738394041424344

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

//Detectamos el evento al pulsar tecla, y marcamos//La dirección del movimientoaddEventListener(KeyboardEvent.KEY_DOWN, capturarTeclado);function capturarTeclado(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 dirección del movimientomiClip.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 teclaaddEventListener(KeyboardEvent.KEY_UP, parar);

function parar(event):void {    derecha=false; //Y paramos el movimiento    izquierda=false;    miClip.gotoAndStop("parado");}

Unidad 22. Juegos interactivos (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):

?

1234567

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 indica si la colisión se calcula con respecto a la

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:

?

1 miClip.hitTestObject(miOtroClip);

En ambos casos, el valor devuelto es true, si hay colisión, 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 coordenadas del objeto

tras moverlo y calcular la colisión antes de moverlo.

?

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

?

1 miClip.getBounds(objetoReferencia);

En objetoReferencia indicaremos el objeto cuyo sistema de coordenadas utilizaremos como punto de

referencia. Normalmente escribiremos stage, para que las coordenadas dadas sean respecto a la película en

general y no sobre un clip en particular.

El método nos devuelve un objeto Rectangle. 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 mismo que x).

.right: lado derecho (sería x más el ancho).

?

1234

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. Juegos interactivos (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:

?

1 var miNumero:Number = Math.random();

Puedes comprobarlo probando el siguiente ejemplo:

?

1 trace(Math.random());

2

3

4

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:

?

1

2

3

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:

?

1 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 completaremos en el ejercicio final, hemos utilizado esta función para generar de

forma aleatoria desde dónde parten los proyectiles, dónde caen, y su escala.

?

1

2

3

4

5

6

7

8

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 que parte el proyectil, y el último num_aleatorio calcula la

posición hacia donde se dirige. 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 distinta.

 

 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:

?

1 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 subiendo de nivel.

De ahí que cuando asignamos el movimiento del elemento:

?

1 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 lostextFields. 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 dePropiedades, y utilizando su nombre de instancia,

podemos cambiar su contenido dinámicamente de la siguiente manera:

?

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

?

1

2

3

4

5

//Creamos el formato

var miFormato:TextFormat = new TextFormat();

//Definimos el formato;

miFormato.bold = true;

miFormato.font = "Arial";

miFormato.size = 12;

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

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

ActionScript hemos 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

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

 

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

en ActionScript.

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 cómo 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 (x1, y1) a la posición (x2, y2), 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 está bajando o subiendo. Cuando la coordenada y llega al

suelo, la bola pasará a subir, cuando la coordenada y llegue al tope la bola comenzará a bajar.

En cada bote la bola irá perdiendo fuerza y el bote será más bajo, la variable elasticidad determinará esta

pérdida 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.

?

1

2

3

4

5

6

7

8

9

10

btn_reproducir.addEventListener(MouseEvent.MOUSE_UP,playescena)

function playescena (event:MouseEvent):void {

  var baja:Boolean = true; //Si la bola sube o baja

  var incre_x:Number = 3.5; //Incremento vertical

  var incre_y:Number = 8; //Incremento horizontal

  var suelo:Number = 280; //Distancia a la que está el suelo

  var tope:Number = 0; //Altura 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

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

  var repeticion:Number;

  clearInterval(repeticion);

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

  function botar() {

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

        bola_mc.y += incre_y;//Aumentamos Y

        bola_mc.x += incre_x;

        if (bola_mc.y>=suelo) {

           baja = false; //Si ha llegado al suelo hacemos que suba

        }

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

        bola_mc.y -= incre_y;//Disminuimos Y

        bola_mc.x += incre_x;

        if (bola_mc.y<=tope) { //Cuando alcance el tope

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

            if (tope>=suelo) { //Cuando el tope esté más 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 trayectoria 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. 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:

?

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

?

12345678

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:

?

12345

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) estos dos tipos de funciones

que se ejecutan repetitivamente pueden ser muy útiles en determinadas ocasiones. A lo largo del cursos ya

hemos visto algunos ejemplos de su utilidad, a 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.

Colocaríamos 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.

?

1234567

var tope:Number = 1; var repeticion:Number = setInterval(parar, 1000); function parar() {    tope++;    if (tope > 2) {       clearInterval(repeticion);       nextFrame();       play();    }

891011

 }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 qué 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.

Ahora podrás combinar muchas de las técnicas que hemos aprendido para generar algo así:

(Haz clic en la película y luego usa las teclas de movimiento a derecha e izquierda)

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 cómo 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 como 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 ira haciendo visible

según avance el giro.

Luego deberemos introducir interpolaciones entre las diferentes posiciones para terminar con un resultado

parecido a este:

Unidad 23. Animaciones avanzadas (VIII)

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

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 acceseible a través de ActionScript, por lo que

incluso podríamos crear un script que moviese nuestro esqueleto.

 

Aunque la cinemática inversa es una técnica que con un poco de práctica resulta sencilla, existen otras

formas de crear movimientos complejos, como puedes ver en este avanzado  .

Unidad 23. Animaciones avanzadas (X)

23.7. Rotoscopia

La rotoscopia es una 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 como 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:

?

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

?

1 miClip.graphics.beginFill(color, alfa);

Donde color indicará el color de relleno que se le aplicará al dibujo. Deberá estar en hexadecimal, por

ejemplo: 0x000000.

El parámetro alfa indicará la transparencia del relleno.

 

Luego nos valdremos de un par de funciones:

?

1 miClip.graphics.moveTo(x, y);

Esto hace que el punto de dibujo se coloque en las coordenadas especificadas. Podemos empezar a pintar a

partir de la coordenada (100, 100), por ejemplo.

Luego nos quedará solamente dibujar líneas en el espacio que contendrán el relleno de nuestro dibujo. Utiliza

la instrucción graphics.lineTo():

?

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

?

1

2

3

4

5

6

7

8

miClip.graphics.beginFill(0xFF0000);

miClip.graphics.moveTo(10, 10);

miClip.graphics.lineTo(10, 100);

miClip.graphics.lineTo(100, 100);

miClip.graphics.lineTo(100, 10);

miClip.graphics.lineTo(10, 10);

miClip.graphics.endFill();

Terminamos la 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:

?

12

miClip.graphics.lineStyle(thickness:Number, color:uint = 0, alpha:Number = 1.0, pixelHinting:Boolean                 scaleMode:String = "normal", caps:String = null, joints:String = null, miterLimit:Number

 Nota: Esta instrucción deberá estar colocada antes de utilizar la función beginFill(), quedaría de esta

forma:

?

123456789

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,