Curso de Flash CS3

Unidad 1.  Introducción a Flash CS3

¿Qué es FLASH?

Flash CS3 es una potente herramienta desarrollada por Adobe que ha superado las mejores expectativas de sus creadores.

Inicialmente Flash fue creado por Macromedia (Adobe) con el objeto de realizar animaciones vistosas para la web, así como para crear GIFs animados.

Los motivos que han convertido a Flash CS3 en el programa elegido por la mayoría de los diseñadores web profesionales y aficionados son varios. Veamos pues, porque es interesante Flash CS3.

Desde la web de Adobe te puedes descargar una versión de evaluacion de Flash CS3 válida para 30 días.

Los logotipos de Flash son propiedad de Adobe, así como las marcas registradas Flash y Adobe. aulaClic no tiene ninguna relación con Adobe.

¿Por qué usar Flash CS3?

Las posibilidades de Flash son extraordinarias, cada nueva versión ha mejorado a la anterior, y el actual Flash CS3 no ha sido menos. Aunque su uso más frecuente es el de crear animaciones (a lo largo de este curso veremos lo sencillo que puede resultar) sus usos son muchos más. Son tantos, que todos los diseñadores web deberían saber utilizar Flash.

Flash ha conseguido hacer posible lo que más se echa en falta en Internet: Dinamismo, y con dinamismo no sólo nos referimos a las animaciones, sino que Flash permite crear aplicaciones interactivas que permiten al usuario ver la web como algo atractivo, no estático (en contraposición a la mayoría de las páginas, que están realizadas empleando el lenguaje HTML). Con Flash podremos crear de modo fácil y rápido animaciones de todo tipo.

Además sus desarrolladores estan 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 CS3 nos ofrece ahora 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?

De Flash 8 a Flash CS3

Adobe ha querido en esta última versión 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 aplicación muy completas como hemos ido viendo año tras año que son capaces de interactuar entre ellas y nos ofrecen la posibilidad de reusar proyectos de un programa en otro.

El paso de Flash 8 a Flash CS3 se ha visto marcado sobre todo por esta característica, por lo que su lanzamiento (si no tenemos en cuenta ActionScript 3) quizás no venga acompañado de grandes avances como vimos en el paso de Flash MX a Flash 8. Ahora veremos las mejoras añadidas al programa:

Integración total con archivos de Photoshop e Illustrator: Como veremos más adelante en la unidad 10, Flash CS3 ofrece una compatibilidad perfecta a la hora de importar archivos creados en Photoshop e Illustrator. De esta forma seremos capaces de incluir en nuestro proyecto este tipo de archivos y modificar y utilizar sus capas y estilos muy fácilmente.

Con esta nueva opción podremos crear composiciones mucho más compljas, al ser capaces de crear cualquier diseño en uno de estos programas para importarlo más tarde a nuestro proyecto Flash con un par de clics.

Intefaz mejorada: Flash CS3 cambia su interfaz para integrarse completamente en la suite de productos Adobe, ahora todos las ventanas se encuentran en paneles laterales completamente configurables. Podrás mostrar las ventanas que quieras de un modo expandido o minimizado.

Flash también te permitirá guardar y cargar diferentes tipos de configuración de paneles. Así podrás tener tu vista preferida guardada y accesible si en algún momento el espacio de trabajo se vuelve demasiado caótico.

Herramientas compartidas: La herramienta Pluma se ha adaptado y ahora actúa de un modo similar a la existente en Illustrator. Los mismos accesos por combinación de teclas también son accesibles desde Flash.

Componentes mejorados: Flash CS3 permite una mayor configuración en los componentes preinstalados. De esta forma podremos cambiar su aspecto y mostrar controles con diferentes skins. Esta opción nos permitirá crear formularios más acorde con nuestros diseños, ya no será necesario mostrar los controles con la apriencia a la que estamos acostumbrados.

Vídeo más potente: Esta versión de Flash introduce un nuevo compresor de vídeo mejorado

que aumenta la calidad y disminuye el tamaño del archivo final SWF. Además se introduce el soporte de capas con transparencia que podrán ser tratadas e importadas desde Premiere sin ningún tipo de problema.

Flash CS3 incluye como gran avance ActionScript 3. Esta nueva versión del lenguaje de programación de Flash supone un gran cambio en la metodología de trabajo en la creación de proyectos.

En este curso veremos el uso de Flash desde la perspectiva de ActionScript 2 , aunque en la mayoría de explicaciones encontrarás el código equivalente de la siguiente forma:

 

ActionScript 3

código

ActionScript 3 supone para Flash un giro en cuanto a posibilidades, potencia y rápidez de ejecucción. Pero implica un amplio conocimiento de la metodología de programación orientada a objetos. Debido a esto y puesto que este curso no pretende ser un manual de programación nos ajustaremos a la anterior versión, mucho más sencilla en comprensión y más accesible para la mayoría de usuarios.

Las alternativas a Flash. Javascript

Desde hace mucho tiempo, el lenguaje HTML ha mostrado carencias importantísimas en todos los aspectos. El HTML crea páginas web estáticas, páginas en las que todo el movimiento que podemos encontrar se debe a imágenes animadas (GIFS) o a vídeos insertados en ellas... Este lenguaje, revolucionario en su día, demostró pronto que era insuficiente en todos los campos. Pronto comenzaron a surgir alternativas:

El Javascript nació con el objeto de crear acciones o programas cortos que se pudieran insertar en la web para darle vida. El Javascript, no es un lenguaje de programación propiamente dicho, pues sólo crea "acciones" que se ejecutarán posteriormente en el navegador que visualice la página, jamás podremos crear un programa en Javascript, sólo complementos para la web. Este lenguaje presenta varios inconvenientes, en primer lugar, su ejecución puede resultar peligrosa para la persona que accede a una web, por lo que muchas personas optan por desactivar el "Javascript" de sus navegadores. Si nuestra página web contiene mucho código Javascript, simplemente, no lo verán. En segundo lugar y como con casi todo, existen navegadores (cada vez menos, eso sí) que no lo soportan y sería inútil intentar ejecutar un código Javascript si el navegador no lo reconoce. Además, el Javascript no sirve para crear páginas web, tan sólo las complementa, por lo que su uso general suele estar enfocado a pequeñas "ayudas" en la interactividad de la web, como por ejemplo realizar comprobaciones en los formularios, efectos en la barra de estado... ).

Debemos destacar además, que Flash puede trabajar conjuntamente con javascript y ejecutar códigos y funciones Javascript sin problemas, por lo que Javascript se convierte en una ayuda para todos los usuarios de Flash CS3.

Para ver unos ejemplos de usos de Javascript y sus códigos, visita nuestra Página Avanzada .

Las alternativas a Flash CS3. CSS

Aunque muchos no se hayan dado cuenta, HTML tiene una potencia muy limitada en el tratamiento de textos. De hecho, el principal problema del HTML a la hora de mostrar y distribuir textos por pantalla no suele ser su incapacidad para hacerlo (las posibilidades que permite son más que suficientes), sino que simplemente se trata de un lenguaje orientado a la organización de contenido y no a su tratamiento. Para ello se crearon las Hojas de Estilo en Cascada (CSS en inglés).

Su potencia es mucha, y cuentan con la ventaja de que se han convertido en un estándar (aunque siempre habrá alguien incapaz de visualizar un contenido que use una hoja de estilo). Además de permitir administrar los textos e imágenes como queramos por nuestra página web, son una forma magnífica de simplificar el código de la página web y de acelerar su creación, ya que como su nombre indica son "Hojas de Estilo", una vez creado el tratamiento que queremos dar a un tipo de texto (por ejemplo, a los títulos), todos los títulos que creemos y los identifiquemos como tales, tendrán ese tratamiento (color, tamaño de la letra, tipo de fuente...). Gracias a las CSS hemos ganado en control sobre nuestras páginas web, y tal vez en vistosidad y diseño, pero no sirven para crear animaciones.

¿Por qué no usarlas dentro de Flash?

Desde la versión 2004 (Flash MX 2004) las hojas de estilo son perfectamente compatibles con Adobe Flash, simplemente porque pueden asociarse con textos empleados dentro de nuestra película sin más que asignar la hoja de estilo que queramos a la propiedad StyleSheet del objeto texto al que queramos aplicar la hoja de estilo. Por tanto, las CSS han dejado de ser una alternativa al uso de Flash y han pasado a quedar integradas dentro del mismo. Otra ventaja de usar Flash.

Las alternativas a Flash CS3. DHTML. AJAX.

Hemos visto como se solucionan los principales problemas que tiene el HTML, pero aún falta por saber cómo se intenta eliminar esa "estaticidad" característica de las páginas HTML. La primera solución viene del propio HTML. Se llama DHTML (o HTML Dinámico) y como su nombre indica se creó para crear contenidos en movimiento en las páginas web. Su funcionalidad llega hasta mover objetos por la web, y sobre todo, se emplea para crear menús animados. Seguro que habeis visto un montón sin daros cuenta. Suelen tener esta apariencia:

En realidad el DHTML no es más que una combinación de HTML y Javascript (de ahí que lo hayamos dejado para el final), aunque es una buena solución para crear menús vistosos sin animaciones extraordinarias.

¿Su inconveniente? Hay demasiados navegadores que tiene problemas con él y su carga puede ser lenta o retardada...

Asynchronous JavaScript and XML, o Ajax, es una nueva técnica de programación para crear interactividad en la web formada por la combinación de varias tecnologías ya conocidas:

- XHTML (o HTML y CSS para dar formato y estilos).

- DOM (Document Object Model) para manipular la información presentada de forma dinámica e interactiva a través de JavaScript.

- El objeto XMLHttpRequest para intercambiar datos de forma asíncrona con el servidor web.

El Eterno Debate

Y ante todo esto ¿Qué nos ofrece Flash? Pues Flash es, con diferencia, la herramienta más

potente del mercado para crear contenido multimedia para la web pero presenta tres inconvenientes importantes.

El primero es el posicionamiento en los buscadores. Google y otros buscadores no tratan de igual forma las páginas html que las páginas Flash. Las páginas Flash son penalizadas por los buscadores de forma que si el posicionamiento en los buscadores es de vital importancia para la página, mejor no hacerla en Flash. Existen técnicas para paliar esta situación pero requieren de un trabajo adicional. También es cierto que en las nuevas versiones se va avanzando en este tema y cada vez la penalización de los buscadores es menor.

El segundo es la compatibilidad con FLASH. Al igual que algunos navegadores no soportan javascript o no pueden ver contenidos DHTML (o incluso CSS), para poder ver FLASH se requiere un PLUGIN especial de la casa Adobe. Un PLUGIN es un programa especial que permite a tu navegador identificar las películas FLASH, descargarlas y visualizarlas correctamente. Este PLUGIN es gratuito y puedes descargarlo AQUÍ. Por suerte, cada vez más navegadores lo llevan incorporado y cada vez más gente sabe lo que es y no se asusta cuando se le ofrece. Así que la gran mayoría de ordenadores lo tiene y este aspecto esta dejando de ser un problema.

El tercer problema es el tamaño que ocupan las películas y su tiempo de descarga. Mientras que una página HTML puede ocupar unos 10-20 KB como media, una animación Flash ocupa mucho más. Evidentemente depende del contenido que tenga, pero suelen superar los 100 KB con facilidad, y si además incorpora sonidos es fácil que la cifra se dispare. Al ocupar más espacio, el tiempo que tarda en estar visible el contenido Flash es mayor y no todos los visitantes están dispuestos a esperar... simplemente, se irán a otra página.

Por otra parte, las conexiones de banda ancha son cada vez más numerosas, lo que ellimina el problema del tiempo de descarga, pero el día en el que todo el mundo se conecte a internet a alta velocidad aún está lejos, así que el debate seguirá abierto mucho tiempo.

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.

Con Flash se pueden hacer páginas web realmente asombrosas

Aquí teneis algunas páginas interesantes hechas con FLASH

2Advanced Studios

NRG fwa

Resumiendo, insertar o no contenido Flash en una página web puede ser cuestionable (a día de hoy), aunque depende de muchas cosas, al igual que insertar DHTML, por ejemplo. Aún así, no hemos de olvidar que Flash tiene muchísimas aplicaciones más (hecho que ha provocado que otras compañías traten de sacar a la venta "clónicos" del Flash). Por ejemplo la creación de CDs interactivos (como los que incluyen las revistas de informática, por ejemplo), 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 dejeis de aprender a manejar el programa con más futuro... (al menos en cuanto a diseño web)

Podeis poner a prueba vuestros conocimientos realizando la:

  Prueba evaluativa del Tema 1.

Unidad 2.  Mi primera Animación Flash

Comenzando

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.

Realizando la Animación

En este apartado no pretendemos enseñar cómo crear una animación Flash (pues eso se verá más adelante), el objetivo es que entendamos cómo crea Flash las animaciones y de que modo nos facilita el trabajo.

A primera vista, lo lógico parece ser dibujar la pelota en cada instante del movimiento, de modo que cuantos más instantes dibujemos, más real parecerá el movimiento. Pues bien, con Flash bastará con crear 3 fotogramas: en el primero dibujaremos la pelota en el instante inicial (arriba del todo), en el segundo se dibujará la pelota en el momento de tocar el suelo y en el tercero la pelota volverá a estar arriba (en realidad este tercer fotograma no hará falta crearlo, pues bastará con copiar el primero). Por tanto, vemos que el trabajo más largo (dibujar los objetos) ya está hecho.

 

Ahora, se determina el tiempo que durará cada movimiento (es decir, el tiempo que transcurre entre los instantes en los que la pelota está arriba y abajo) y por último se le indica a Flash que cree una animación de movimiento entre estos fotogramas. Fácil ¿verdad?

Observa como ha quedado:

Podeis poner a prueba vuestros conocimientos realizando la:

  Prueba evaluativa del Tema 2 .

Unidad 3.  El Entorno de Trabajo (I)

La Interfaz de Flash CS3

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

A lo largo de todo el curso trabajaremos con la versión de evaluación de Flash CS3 en castellano. Podeis descargar esta versión de forma gratuita desde AQUÍ

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:

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: Te 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í encontrarás las opciones de depuración de la película que te ayudarñan a encontrar errores de progrmación en ActionScrit, entre ellos se encuentran Entrar, Pasar, Salir, Continuar...

Ventana: Este menú, además de las opciones clásicas acerca de cómo distribuir las ventanas, incluye accesos directos a TODOS los Paneles y también la posibilidad de crear tus propios Espacios de Trabajo, guardalos, cargalos, etc.

Ayuda: Desde aquí podemos acceder a toda la ayuda que nos ofrece Adobe, desde el manual existente, hasta el diccionario de Action Script, pasando por tutoriales, lecciones guiadas etc...

Veamos un ejemplo práctico del uso de menús, realiza el Ejercicio Crear Guías

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

Las Capas

El concepto de Capa es fundamental para manejar Flash de forma eficiente. Dada la importancia de estas, se le dedicará un tema completo. Aún así, veamos a grandes rasgos qué son las capas.

Una Capa se puede definir como una película independiente de un único nivel. Es decir, una capa contiene su propia Línea de Tiempo (con infinitos fotogramas).

Los objetos que estén en una determinada capa comparten fotograma y por tanto, pueden "mezclarse" entre sí. Esto es interesante a menudo, pero otras veces es conveniente separar los objetos de modo que no interfieran entre sí. Para ello, crearemos tantas capas como sea necesario. El uso de múltiples capas además, da lugar a películas bien ordenadas y de fácil manejo (es conveniente colocar los sonidos en una capa independiente llamada "Sonidos", por ejemplo). Las ventajas y desventajas de usar capas se verá en el Tema 8.

El Escenario

A continuación veremos las diferentes partes que conforman el Área de trabajo empezaremos con la más importante: el Escenario.

Sobre el escenario dibujaremos y colocaremos los diferentes elementos de la película que estemos realizando. El escenario tiene unas propiedades muy importantes, ya que coinciden con las Propiedades del documento. Para acceder a ellas, hagamos clic con el botón derecho sobre cualquier parte del escenario en la que no haya ningún objeto y después sobre Propiedades del documento:

Añade metadatos a tus archivos para una mejor inclusión de estos en los motores de 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.

Coincidir: Provocan que el tamaño de la película coincida con el botón seleccionado (tamaño por defecto de la Impresora, Contenidos existentes o los elegidos como Predeterminados)

Color de Fondo: El color aquí seleccionado será el color de fondo de toda la película.

Veloc. Fotogramas: O número de fotogramas por segundo que aparecerán en la película.

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

Transformar en predeterminado: Este botón, propio de la nueva versión de Flash, permite almacenar las propiedades del documento actual y aplicarlas a todos los documentos nuevos que se creen desde ese instante en adelante. Estas propiedades por supuesto podrán ser alteradas desde este panel cuando se desee.

Para practicar estas operaciones te aconsejamos realizar Ejercicio Cambiar Propiedades de la Película

Las Vistas o Zooms

La Herramienta Lupa 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 la Lupa duplicaremos el porcentaje indicado en el Panel 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 visita nuestra Página Básica .

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 → Guardar disposición de paneles.

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

  Ejercicios del Tema 3.   Prueba evaluativa del Tema 3.

Unidad 4. Dibujar y Colorear (I)

El Dibujo en Flash CS3

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.

La Barra de Herramientas. Herramientas Básicas.

La Barra de Herramientas contiene todas las Herramientas necesarias para el dibujo. Veamos cuáles son las más importantes y cómo se usan:

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, los rellenos (con un sólo clic), los bordes (con doble clic), zonas a nuestra elección... Además, su uso adecuado puede ahorrarnos tiempo en el trabajo.

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 sin más que seleccionar situar el cursor encima de los extremos para estirarlos y en cualquier otra parte cercana a la recta para curvarla.

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

Herramienta Óvalo: La herramienta Óvalo permite trazar círculos o elipses de manera rápida y sencilla. Puedes acceder a ella manteniendo el botón del ratón pulsado sobre la herramienta Rectánculo.

Para practicar el manejo de esta Herramienta, te aconsejamos realizar Ejercicio Crear Óvalo.

Herramienta Rectángulo: Su manejo es idéntico al de la Herramienta Óvalo, tan solo se diferencian en el tipo de objetos que crean.

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 equivale a la del lápiz, pero su trazo es mucho más grueso. Se suele emplear para aplicar rellenos. Se puede modificar su grosor y forma de trazo.

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

La Barra de Herramientas. Herramientas Avanzadas.

Herramienta Lazo: Su función es complementaria a la de la Herramienta Flecha, pues puede seleccionar cualquier cosa, sin importar la forma, (la Herramienta Flecha sólo puede seleccionar objetos o zonas rectangulares o cuadradas). En contrapartida, la Herramienta Lazo no puede seleccionar rellenos u objetos (a menos que hagamos la selección a mano).

Al seleccionar esta Herramienta, en el Panel de herramientas aparecen estos botoness: . 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: permite hacer selecciones poligonales.

Herramienta Pluma: Crea polígonos (y por tanto rectas, rectángulos...) de un modo sencillo. Mucha gente encuentra esta herramienta complicada, aunque es una de las más potentes que ofrece Flash. Su empleo consiste en hacer clic en los lugares que queramos definir como vértices de los polígonos, lo que nos asegura una gran precisión. Para crear curvas, hay que señalar los puntos que la delimitan y posteriormente trazar las tangentes a ellas. Con un poco de práctica se acaba dominando.

Herramienta Subseleccionador: Esta Herramienta complementa a la Herramienta Pluma, ya que permite mover o ajustar los vértices que componen los objetos creados con dicha herramienta.

Herramienta Bote de Tinta: Se emplea para cambiar rápidamente el color de un trazo. Se aplica sobre objetos, si tienen borde, cambia al color mostrado de dicho borde, por el mostrado en el Panel Mezclador de Colores (que coincide con el subpanel Colores que hay en la Barra de Herramientas.)

Herramienta Cuentagotas: Su misión es "Capturar" colores para que posteriormente

podamos utilizarlos. Para ver cómo funciona, aconsejamos ver la siguiente animación:

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. La forma de acceder a este Submenú consiste en 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 superponga, 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.

Tinta: Hace que el trazo sea exactamente el que se realizó con el cursor. Apto para paletas digitales.

 

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 la pestaña que está junto a la Herramienta Lápiz y si queremos modificar un relleno, haremos clic en la pestaña que está junto a la Herramienta 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 que establece el HTML.

También 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 Rellenos

Sólido: Consiste en un relleno formado por un solo color.

Degradado Lineal: Es un tipo especial de relleno, de modo que un color se degrada hasta convertirse en otro. Puede ir de arriba abajo o de un lado al otro

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

Mapa de Bits: Permite colocar como relleno alguna imagen

existente en la película (O ajena a ella si antes se "importa")

Para aprender a crear un color transparente (semi-transparente), realiza el Ejercicio Crear Color Transparente.

 

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 Ejercicio Dar color a un Óvalo

  Ejercicios del Tema 4   Prueba evaluativa del Tema 4.

Unidad 5. Trabajar con Textos (I)

Comenzando

Flash abarca todo aquello que nos pueda hacer falta a la hora de crear una animación, y por tanto, también todo aquello relativo a los textos. Sin embargo, Flash fue concebido para crear animaciones gráficas, de modo que tratará cualquier texto como si de un objeto más se tratase, listo para ser animado a nuestro gusto. Esto nos permitirá posteriormente animar textos y crear espectaculares animaciones con muy poco esfuerzo. Flash distigue 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...

 

Propiedades de los Textos

Para poder escribir, deberemos hacer clic en la Herramienta Texto y posteriormente en el punto del escenario en el que queramos empezar a escribir.

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

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.

Panel Propiedades

Veamos a fondo el Panel Propiedades:

Fuente: Desde aquí, al igual que en los editores de texto más comunes podemos seleccionar el tipo de letra o "fuente" que más nos guste.

Espaciado: Determina el espaciado entre los caracteres. Útil cuando la tipografía que empleamos muestra las letras muy juntas o para dar efectos concretos al texto.

Dirección del Texto: Cambia la orientación del texto de horizontal a vertical, tanto de izquierda a derecha como de derecha a izquierda.

Ajuste automático entre caracteres: Activar esta casilla provoca que la separación entre caracteres se realice de modo automático.

Posición: Nos permite convertir nuestro texto en subíndices o en superídices (o dejarlo normal).

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

Tipo de Línea: Si el texto que vamos a incluir es dinámico (de lo contrario aparece sin activar), esta opción nos permite determinar cómo queremos que aparezcan las líneas (línea única, multilínea o multilínea sin ajuste).

Configuración: Son las clásicas opciones que permiten convertir el texto en Negrita (B), Cursiva (I), cambiar el color del texto y el tamaño.

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

Un Párrafo no es más que un conjunto de caracteres con propiedades comunes a todos ellos. Estos párrafos admiten ciertas opciones que nos permiten trabajar con bloques de texto. El Panel Propiedades nos proporciona las siguientes opciones para trabajar con párrafos (entre otras).

A la Izquierda: Todas las líneas empezarán tan a la izquierda como sea posible (dentro del recuadro de texto que hayamos definido).

Centrar: Las líneas se distribuyen a la derecha y a la izquierda del punto medio del Párrafo.

A la derecha: Todas las líneas empezarán tan a la derecha como sea posible (dentro del recuadro de texto que hayamos definido).

Justificado: El texto se ensancha si es necesario con tal de que no quede "dentado" por ninguno de sus límites.

El resto de opciones nos permiten determinar los márgenes (izquierdo y derecho), los sangrados de párrafo y el espacio interlineal.

Para practicar estas propiedades te aconsejamos realizar Ejercicio Propiedades de texto

Tipos de Textos

Como ya hemos comentado, Flash distingue entre diversos tipos de textos y les da un tratamiento especial, según el tipo que sean.

Todos los tipos de textos responden a las propiedades comentadas en los puntos anteriores, y es en el Tipo de texto en lo que se diferencian. El tipo de texto se puede modificar desde el Panel

Propiedades sin más que haciendo clic sobre la pestaña Tipo de texto: .

Texto Estático

El Texto Estático se caracteriza por no presentar ningún cambio a lo largo de la animación. Es importante que no confundamos la palabra "estático" con que el texto no se mueva o malinterpretemos la frase "es el texto que no presenta cambios a lo largo de la animación".

Lo que queremos decir es que no cambia el contenido del recuadro de texto, es decir, que el texto puede estar animado (girar, cambiar de color...) y sin embargo ser estático. Así, un recuadro de texto en el que pone "Aprende Flash CS3" durante toda la película, es estático, aunque dicho texto cambie de posición, forma o color. Sin embargo, si en ese mismo recuadro de texto pasa a poner "Con este Curso", este recuadro de texto NO es estático. Se insistirá en este punto en los ejercicios de evaluación.

Los textos estáticos sólo tienen 2 propiedades extras:

Usar Fuentes del Dispositivo: Esta opción permite que la película Flash emplee las Fuentes que tenga instaladas el usuario que ve la película en su ordenador. Si dicho usuario dispone de las fuentes que hemos utilizado en la película, la verá exactamente como queremos que la vea, pero si no las tiene, Flash empleará la fuente que más se le parezca. Esto muchas veces lleva a que el resultado final (el que ve el usuario) no se parezca al que pretendíamos, por lo que suele ser conveniente mantener esta opción sin seleccionar, aunque esto conlleve un mayor tamaño de la

película final.

Seleccionable: Con esta opción activada el usuario podrá seleccionar los textos que aparezcan en la película (cortarlos, copiarlos...) Actívala si lo crees conveniente.

Texto Dinámico

El Texto Dinámico en contraposición al estático sí que puede cambiar su contenido (además de estar animado). Su uso es bastante más complejo que el del Texto Estático, ya que cada recuadro de texto Dinámico puede ser una variable modificable mediante ActionScript, esto quiere decir que los valores y propiedades de este tipo de textos se pueden modificar mediante programación, lo que nos saca del objetivo de este curso. Un uso común que suelen tener es el de representar los textos introducidos mediante Textos de Entrada (ver siguiente punto).

Tienen multitud de propiedades, accesibles desde el Panel Propiedades, se puede decidir el número de líneas que van a tener, se puede introducir texto HTML, se puede añadir fácilmente un borde al texto o dar nombre a la variable que represente al texto Dinámico.

Texto de Entrada

El Texto de Entrada tiene básicamente las mismas propiedades que el Texto Dinámico, junto con algunas propias de un tipo de texto orientado a la introducción de datos por parte de usuario, como por ejemplo el número máximo de líneas que puede introducir en ese campo de texto o si queremos que lo que el usuario escriba en dicho campo aparezca como asteriscos (para las contraseñas).

Evidentemente este tipo de texto se reflejará en nuestra película como un recuadro de texto SIN contenido, ya que lo deberá introducir el usuario.

Como hemos mencionado antes, este tipo de texto se puede combinar con el Texto Dinámico.

En esta animación (avanzada) podeis ver cómo:

Y este es el resultado final:

Para aprender a cambiar el tipo de texto, te aconsejamos realizar Ejercicio Cambiar tipo de texto

Flash permite crear animaciones de texto tan interactivas como las que pueden crear con imágenes (ya hemos visto lo sencillo que es convertir un texto en un enlace a otra página web). Aún así, crear animaciones con textos, que sobrepasen a las que Flash incorpora por defecto (colores, transparencias, brillos, rotaciones, movimientos o combinaciones de estos) puede resultar un trabajo de muchísimas horas y mucha paciencia. Los resultados son increíbles, pero puede resultar recomendable en estos casos usar algunos programas diseñados con este objetivo. Entre otros destacan el Swish, el FlaX o el MiX-Fx, con ellos podrás crear efectos de texto asombrosos en pocos minutos, aunque no podrás gozar del entorno de Flash CS3 ni podrás emplear el resto de herramientas de que dispone.

 

Podeis poner a prueba vuestros conocimientos realizando la:

 

  Ejercicios del Tema 5   Prueba evaluativa del Tema 5.

Unidad 6. Trabajar con Sonidos (I)

Comenzando

¿Quién sería capaz de ver una película muda? ¿Y una animación espectacular sin sonido?

Hasta hace poco, los únicos sonidos que oíamos en las páginas web eran los famosos "midis", de escaso tamaño y de escasa calidad. De hecho, eran sólo instrumentos musicales sin voz, de ahí su pequeño tamaño (y calidad). Aún así, siempre existía algún creador de páginas web que se aventuraba a poner algún sonido complejo (.wav o .mp3) en su página web, por desgracia, su carga es tan lenta, que la mayoría de los visitantes se irían de la página sin llegar a escucharla.

Hoy, gracias a las conexiones de banda ancha orientadas a contenido multimedia, poner sonido a las páginas web es un poco más fácil, ¿qué aporta FLASH?

Flash nos permite insertar cualquier sonido que queramos en nuestras películas (.wav, .aiff, .mp3, etc...) de forma fácil y muy efectiva, ya que es capaz de acelerar la descarga del sonido siempre y cuando se descargue junto con nuestra película.

Podemos dar a la película efectos simples (el típico "clic" al pulsar un botón), efectos complejos (música de fondo) e incluso podemos hacer que la animación se desarrolle conjuntamente con una música (si bien esto último necesitaría que toda la película estuviera descargada previamente, para evitar "atascos" durante el desarrollo de la animación). En definitiva, Flash nos lo vuelve a poner fácil.

 

Importar Sonidos

Si alguna vez habeis intentado añadir un sonido a vuestra animación Flash probablemente os hayais llevado una gran decepción, no conseguirlo. Esto se debe a que no se tiene en cuenta que para poder emplear un objeto en nuestra película, o bien lo creamos nosotros (como llevamos haciendo hasta ahora) o bien lo conseguimos de cualquier otro modo y lo insertamos en nuestra película.

A esto último se le llama "Importar" y se puede hacer con sonidos, gráficos, e incluso con otras películas Flash. Importar por tanto, no es más que decirle a Flash que añada un determinado archivo a nuestra película, para que podamos usarlo cuando queramos. En realidad, lo añade a nuestra Biblioteca, que es el Panel en el que están todos los objetos que participan en la película (este Panel se verá más adelante).

Así pues si queremos manejar un sonido en nuestra película, deberemos importarlo previamente.

Una vez esté importado, podremos usarlo con total libertad.

 

Para importar un sonido haz clic en el menú Archivo → Importar → Importar a biblioteca.

Se abrirá el cuadro de diálogo de Importar a biblioteca. Allí deberás seleccionar en Tipo de archivo Todos los formatos de sonido.

Navega por las carpetas hasta encontrar el archivo de audio que quieras incluir en tu película. Seleccionalo 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).

 

Propiedades de los Sonidos

En Flash CS3, al igual que en Flash 8 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 algún fotograma de nuestra película, tras hacer esto, el Panel Propiedades toma el siguiente aspecto:

Veamos las partes que tiene este panel.

Sonido: En esta pestaña nos aparecerán las canciones que tenemos importadas, deberemos seleccionar la canción que pretendamos añadir a nuestra película (en el siguiente punto veremos cómo insertarlo).

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.

Inicio: Su funcionamiento es equivalente al de "Evento", se diferencian en que si está seleccionado Inicio en vez de Evento y se reproduce otra vez el mismo sonido u otro distinto, lo hace "encima" del sonido actual. Puede ser un efecto muy atractivo, o puede provocar que se forme "ruido" en nuestra película.

Detener: Detiene el sonido seleccionado. Flujo: Esta opción sincroniza el sonido con el o los objetos con los que esté asociado, por tanto,

si la carga de la película es lenta y las imágenes no fluyen adecuadamente, el sonido se detendrá para sincronizarse con ellas. Este efecto puede dar la sensación de que la película se corta de un modo muy brusco (pensar en que se considera normal que una imagen tarde en cargarse, pero si se detiene un sonido mientras se reproduce, produce una reacción muy negativa en los que pueden estar viendo nuestra película).Por otra parte, es un efecto muy adecuado para algunas situaciones, por ejemplo, el efecto de que un personaje hable durante una película. En esta situación, es muy recomendable que el sonido y las imágenes estén sincronizadas.

Repetir: Determina el número de veces que se reproducirá el sonido según lo que escribas en la caja de texto de la derecha. También puedes seleccionar Reproducir indefinidamente para que el sonido se reproduzca en un bluce hasta llegar al siguiente fotograma clave.

No recomendamos insertar sonidos con la opción Flujo y a la vez la de Repetir, ya que al estar sincronizados los sonidos con las imágenes, provocaríamos que las imágenes (y los fotogramas que las contengan) se dupliquen también, aumentando considerablemente el tamaño de la película.

Insertar un Sonido

Ahora que ya sabemos importar un sonido, qué opciones podemos modificar y para qué sirve cada una. Veamos lo más importante, cómo insertarlos en nuestra película.

Supongamos que queremos insertar un sonido en un fotograma determinado, de modo que cuando la película Flash llegue a este fotograma comience a reproducirse el sonido. Para que un sonido se reproduzca al llegar a un fotograma, deberemos seleccionar el fotograma en el que queremos que empiece a reproducirse el sonido. Una vez allí, abriremos el Panel Propiedades e importaremos el sonido que queramos del modo visto en el punto anterior. Otro modo más rápido aún consistiría en seleccionar dicho sonido en la Biblioteca y arrastrarlo al fotograma en el que queramos que se empiece a reproducir el sonido (al fotograma, no a la línea de tiempo).

Así representa Flash los sonidos insertados en

Fotogramas

De este modo insertamos un sonido, pero ¿suena tal y cómo queremos que suene? ... Depende de lo que busquemos.

Por defecto Flash entiende que quieres reproducir el sonido en su totalidad, sino ¿para qué insertarlo entero?, de modo que Flash reproducirá el sonido todas las veces que le hayas indicado en Repetir y el sonido sonará aunque el fotograma en el que esté no sea el que se está ejecutando en ese instante. Si quisiéramos que el sonido pare cuando entremos en otro fotograma, lo podemos hacer de 2 formas distintas, ambas combinando las opciones que nos ofrece el Panel Propiedades.

 

La primera de ellas es seleccionarlo en la Biblioteca y arrastrarlo directamente sobre el escenario. El sonido se añadirá al fotograma en el que nos encontramos.

Otra opción sería la de seleccionar el sonido (ya importado a nuestra biblioteca) desde el panel Propiedades del fotograma seleccionado:

 

En la opción Sonido seleccionaríamos el audio que queremos añadir al fotograma. Luego modificaríamos la opción Sinc. del siguiente modo:

Si seleccionamos Flujo, el sonido se reproducirá hasta llegar al primer fotograma que no lo contenga.

Podemos seleccionar Detener para marcar un fotograma de modo que el sonido se detenga al llegar a él.

En esta animación, verás como:

Para practicar la inserción de sonidos realiza el Ejercicio Insertar sonidos.

Editar Sonidos

Flash no fue creado como un editor de sonidos, por lo que su potencia en este campo es limitada. Aún así, los efectos que permite aplicar de un modo sencillo suelen ser suficientes para cualquier animación que queramos realizar. Disponemos de estos efectos:

Canal Izquierdo: El sonido tan sólo se escuchará por el altavoz izquierdo.

Canal Derecho: El sonido tan sólo se escuchará por el altavoz derecho.

Desvanecimiento de izquierda a derecha: El sonido se reproduce inicialmente en el altavoz izquierdo para luego pasar al derecho.

Desvanecimiento de derecha a izquierda: El sonido se reproduce inicialmente en el altavoz derecho para luego pasar al izquierdo.

Aumento Progresivo: El volumen de nuestro sonido aumenta progresivamente.

Desvanecimiento: El volumen de nuestro sonido disminuye progresivamente.

Personalizado: Esta opción nos permite "editar" el sonido de un modo rápido y sencillo. Desde este editor podemos decidir qué volumen tendrá nuestro sonido y en qué altavoz. Podemos crear los efectos anteriores ajustándolos a nuestro gusto y podemos crear efectos más complejos a nuestra medida.

Esta es la apariencia del cuadro de diálogo Personalizar Sonido. La parte superior representa el canal izquierdo y la parte inferior el canal derecho. Entre las 2 partes hay una línea de tiempo que nos indica el tiempo de sonido transcurrido en cada punto.

Las líneas grises representan el volumen del sonido y haciendo clic en ellas podemos configurar este volumen.

En el ejemplo, el canal izquierdo se reproduce normalmente (pues el volumen

está al máximo), pero el canal derecho empieza en silencio, para poco a poco alcanzar el volumen normal (este efecto equivaldría a un Aumento Progresivo en el canal derecho).

¿Mp3 o Wav?

Como ya se ha comentado, los sonidos que Flash CS3 puede importar casi cualquier tipo de sonido. 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.

Podeis 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 CS3 permite cargar sonidos de un modo dinámico (sin que ocupen espacio), esto se tratará en el Tema 17 "Action Script".

  Ejercicios del Tema 6   Prueba evaluativa del Tema 6.

Unidad 7. Trabajar con Objetos (I)

Los Objetos. Iniciación

En el tema 4 vimos como crear objetos y añadirlos a nuestra película Flash, en este tema profundizaremos en como trabajar con ellos, 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 CDRom 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,un objeto sería, por ejemplo, cualquier imagen que creemos o importemos, un botón, un dibujo creado por nosotros mismos etc...

Los objetos así considerados tienen 2 partes fundamentales:

El Borde: Consiste en una delgada línea que separa el objeto del exterior del escenario.Puede existir o no, según nos convenga. Cuando creamos un objeto, el borde se crea siempre y su color será el indicado en el Color de Trazo (dentro del Panel Mezclador de Colores). Si queremos dibujar creando Bordes deberemos emplear las Herramientas Lápiz, Línea o Pluma y si queremos que nuestro dibujo no tenga borde, bastará con seleccionar el borde y suprimirlo (ver siguiente punto).

El Relleno: El relleno no es más que el propio objeto sin borde. Es, por tanto, la parte interna del objeto. Su existencia también es arbitraria, ya que podemos crear un objeto cuyo color de relleno sea transparente, como ya se vió 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.

Seleccionar

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

Objeto SIN seleccionar Objeto con el BORDE seleccionadoObjeto 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) al estar seleccionados.

Seleccionar Varios elementos: Mantendremos pulsada la tecla SHIFT 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 algún objeto, sólo quedará seleccionada la parte del objeto que esté dentro del área que hemos delimitado. Si quisiéramos incluir dicho objeto, bastaría con usar la tecla SHIFT y seleccionar la parte del objeto que falta por seleccionar.

Este modo de seleccionar objetos permite seleccionar muchos objetos rápidamente, además de permitirnos seleccionar determinadas zonas de los objetos, para cortarlas, pegarlas ...

Además de la Herramienta Flecha, también podemos usar la Herramienta Lazo, más útil aún si cabe. Nos permite seleccionar cualquier zona de cualquier forma (la forma la determinamos nosotros) del objeto que sea. Al contrario que la Herramienta Flecha, las áreas seleccionadas no tienen porque ser rectángulares.

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.

Colocando Objetos. Panel Alineamiento

Ahora que ya sabemos seleccionar los objetos o las partes de estos que consideremos oportunas, veamos cómo colocarlos en el Escenario.

Para colocarlos de un modo preciso (por no decir exacto), Flash pone a nuestra disposición el Panel Alinear. Este Panel lo podemos encontrar en el Menú Ventana → Alinear. Así funciona:

 

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

nuestros objetos tomen como referencia el escenario.

Si esta opción no está seleccionada, los objetos toman como referencia al conjunto de objetos en el que se encuentran, y se colocan en función de ellos. Lo más habitual es seleccionar En Escenario, para que los objetos se coloquen según los límites de la película, en el centro del fotograma etc...

Conozcamos un poco mejor el Panel Alinear y sus posibilidades:

Alineamiento: Sitúa los objetos en una determinada posición del fotograma (si está seleccionado En Escena). Las distintas opciones afectan a todos los elementos seleccionados y se emplean muy a menudo para situar los objetos en determinados sitios predefinidos. Por ejemplo: Si quisieramos situar un objeto en la esquina inferior izquierda, bastaría pulsar el primer y el sexto botón consecutivamente.

Distribuir: Sitúa los objetos en el escenario en función de unos ejes imaginarios que pasan por cada uno de ellos, de modo que la distribución de los mismos sea uniforme. Por ejemplo, si tenemos 2 cuadrados y pulsamos el primer botón de la izquierda. Cada uno de los 2 cuadrados se situará en un extremo de la película (uno arriba y otro abajo).

Coincidir Tamaño: Hace coincidir los tamaños de los objetos. Si está activo "En Escena" estirará los objetos hasta que coincidan con el ancho y el largo de la película. Si no está activo, la referencia será el resto de objetos. Por ejemplo, si tenemos 2 cuadrados distintos y la opción "En Escena" no está activada, al hacer clic en el primer botón de "Coincidir Tamaño", el cuadrado más estrecho pasará a tener la anchura del cuadrado más ancho. Si "En Escena" hubiera estado activo ambos cuadrados hubieran pasado a tener el ancho del fotograma.

Espacio: Espacia los objetos de un modo uniforme.

Para ver ejemplos de uso de estos comandos, podeis 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.

 

Panel Información

Además de controlar la posición de los objetos desde el Panel Alineamiento, también podemos hacerlo, de un modo más exacto (más matemático) desde otro panel, el Panel Información.

A este Panel se puede acceder desde el Menú Ventana → Información. Las posibilidades de este Panel son limitadas, pero si buscamos exactitud en las medidas o no nos fiamos de las distribuciones de objetos que crea Flash, debemos acudir a él.

Medidas del Objeto: Aquí introduciremos un número que represente el tamaño de nuestro objeto en la medida seleccionada en las Propiedades del documento. An: hace referencia a la anchura y Al: a la altura.

Situación del objeto: Desde aquí controlamos la posición del objeto en el escenario. La X y la Y representan el eje de coordenadas (La X es el eje Horizontal y la Y el eje vertical). Las medidas también van en función de las medidas elegidas para la película.

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

Este indicador puede ser engañoso, el motivo es que indica el color que tiene el objeto por el que en ese momento pasamos el cursor del ratón. Por tanto, podemos tener seleccionado un objeto (haciendo clic en él) y ver en el Panel Información su tamaño y su posición, pero al desplazar el ratón, el valor del color cambiará y ya no indicará el color del objeto seleccionado, sino el del objeto por el que pase el cursor. Tened esto en cuenta para no cometer errores o perder tiempo innecesario.

Posición del Cursor: Indica la posición del cursor. Es útil por si queremos que suceda algo en la película al pasar el cursor justo por una posición determinada o para situar partes del objeto en lugares específicos.

 

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.

Tras hacer esto observaremos que desaparecen las texturas que indicaban que los objetos estaban seleccionados y observamos que el grupo pasa a ser un "todo", ya que resulta imposible seleccionar a uno de sus miembros sin que se seleccionen a su vez los demás. Además, aparece el rectángulo azul (por defecto) que rodea al grupo, definiéndolo como tal.

Crear grupos es muy útil, ya que nos permite, como ya hemos dicho, tratar al conjunto de objetos como un todo y por tanto, podemos aplicar efectos al conjunto, ahorrándonos la labor de hacerlo de objeto en objeto.

Por ejemplo, supongamos que tenemos un dibujo que representa un conjunto de coches. Tras dibujarlos todos, nos damos cuenta de que queremos aumentar el tamaño de los coches. Podemos aumentar el tamaño de los coches de uno en uno, corriendo el riesgo de aumentar unos más que

otros y perdiendo las proporciones entre ellos, o podemos formar un grupo con los coches y aumentar el tamaño del grupo, de modo que aumenten todos de tamaño a la vez y en la misma proporción. De igual modo, podemos mover al grupo de posición, hacer que gire...

Al crear un grupo, simplemente estamos dando unas propiedades comunes a un conjunto de objetos y, en ningún caso perdemos nuestro objeto. En cualquier momento podemos deshacer el grupo, mediante el Menú Modificar → Desagrupar.

Además, Flash nos permite modificar los elementos de un grupo sin tener que desagruparlo. Para ello, seleccionamos el Grupo de elementos y hacemos clic en el Menú Edición → Editar Seleccionado. Podremos editar los objetos que componen el grupo por separado teniendo en cuenta que, como es lógico, los cambios realizados afectarán al grupo además de al elemento en cuestión.

  Ejercicios del Tema 7.   Prueba evaluativa del Tema 7.

Unidad 8. Capas (I)

Las Capas. Entendámoslas

Todo el mundo ha visto alguna vez cómo trabajan los dibujantes de dibujos animados. Y todos hemos visto cómo colocan una hoja semitransparente 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. 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 Tiempos 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).

Trabajar con Capas

La vista standard de una capa es la que muestra la imagen. Veamos para qué sirven los distintos botones y cómo usarlos.

Insertar Capas : Como su nombre indica, sirve para Insertar capas en la escena actual. Inserta capas normales (en el siguiente punto se verán los distintos tipos de capas).

Añadir Capa Guía : Inserta una capa de tipo guía. Se tratan en profundidad el siguiente punto.

Borrar Capa : Borra la capa seleccionada.

Cambiar Nombre: Para cambiar el nombre a una capa, basta con hacer doble clic en el nombre actual.

Propiedades de Capa: Si hacemos doble clic en el icono , 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.

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 podeis ver cómo queda un objeto en función de tener activada o no la opción contorno:

 

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 tiempos, 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 Cambiar Objetos de Capa

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.

Tipos de Capas

Como habreis 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 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. Bonito efecto ¿verdad?

Capas con Guía (Guided Layers) : Cuando definimos una capa como capa guía, es necesario definir después 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 aulaClic 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 de Movimiento

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 Capas máscaras. 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". Así se emplean las máscaras...

Podeis poner a prueba vuestros conocimientos realizando:

  Ejercicios del Tema 8   Prueba evaluativa del Tema 8.

Unidad 9.  Símbolos (I)

Qué son los símbolos

Los Símbolos provienen de objetos que hemos creado utilizando las herramientas que nos proporciona Flash CS3.

    Estos objetos al ser transformados en símbolos, son incluidos en una biblioteca en el momento en que son creados, lo que permite que sean utilizados en varias ocasiones, ya sea en la misma o en otra película.

 

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:

    Seleccionamos el objeto que queramos convertir en símbolo. Abrimos el panel de Propiedades del Símbolo, accediendo al menú Insertar → Nuevo Símbolo o simplemente pulsando Ctrl + F8 o F8.

    Una vez hecho esto nos aparecerá una ventana como la mostrada en la imagen. Introducimos el nombre del símbolo que vamos a crear.

    Esto al principio y mientras tengamos poco símbolos no será muy importante, pero más adelante nos servirá para hacer referencia al objeto.

    Sólo nos queda seleccionar el tipo de símbolo 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.

    Bastará con pulsar Aceptar para tener nuestro símbolo creado.

Para practicar estas operaciones te aconsejamos realizar Ejercicio Crear Símbolo.

Las Bibliotecas

En Flash CS3 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 la Barra de Menús, 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 líbrería 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 anterior (Ejercicio Crear Símbolo) se ha añadido a nuestra biblioteca accediendo a ella como acabamos de indicar.

Los símbolos contenidos en las bibliotecas están identificados por su nombre y por un icono que representa el tipo de símbolo que representan:

Clip      Botón      Gráfico

Para utilizar un símbolo de una biblioteca basta con pulsar en el nombre de dicho símbolo y arrastrarlo a cualquier

lugar del área de trabajo. Observa cómo podemos hacerlo. 

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.

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, al modificarlo se modificará la 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.

A la derecha tenéis un ejemplo de una biblioteca, en este caso una biblioteca estándar de Flash. Cada elemento de la biblioteca es un símbolo.  

Para entender mejor este concepto te aconsejamos realizar Ejercicio Modificar Instancia.

Modificar una Instancia

Hemos visto anteriormente 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 CS3, 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). 

 

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 del Símbolo y su icono correspondiente: El nombre de la instancia es muy importante, pues permite identificarla durante la película. El icono asociado nos permite saber qué tipo de símbolo es de un vistazo rápido.

Tipo de Símbolo 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 "Clip de Película").

Nombre de la Instancia seleccionada (Instancia de:). Esta opción nos muestra el símbolo raíz del que proviene la instancia que estamos modificando. Este símbolo se encuentra en la biblioteca y cada cambio que sufra afecta a todas las instancias que de él se derivan.

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 un símbolo cualquiera por otro que tengamos en nuestra Biblioteca. 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.

 

Efectos sobre Instancias (I)

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

  Ejercicios del Tema 9   Prueba evaluativa del Tema 9.

Unidad 10.  Gráficos (I)

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

 

Tipos de Gráficos 

Los gráficos pueden ser:

 

        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.

 

                                                

ESTO ES UN GRÁFICO ESTÁTICO

 

                          

        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 .

      ESTO ES UNA ANIMACIÓN

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

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, ves al Menú Insertar → Convertir en Símbolo y conviértelo en un símbolo como ya habíamos visto y dándole el nombre "GráficoAnimado"y seleccionando el Tipo Gráfico:

                                       

Ahora vamos a crear la animación del gráfico. Puesto que todavía no hemos visto a fondo las animaciones, la vamos a realizar de una forma que quizá no sería la más apropiada la mayoría de las veces, pero nos servirá muy bien para este ejemplo. Para ello selecciona nuestro gráfico y pulsa el botón derecho del ratón. Se desplegará un menú, en el que seleccionaremos la opción Editar para modificar el gráfico y acceder a su línea de tiempos. Comprueba que estás en la línea de tiempos del gráfico (justo encima del escenario existe una secuencia que nos indica en qué nivel nos encontramos. En la imagen inferior, se puede apreciar que nos encontramos en "Escena1 - Gráfico Animado" y, por tanto estamos DENTRO del gráfico (y la línea de tiempos que vemos es la del gráfico, y no la de la película principal)

                               

Crearemos a continuación nuevos fotogramas clave seleccionando uno a uno los frames número 2, 3 y 4 y pulsando F6 cuando los seleccionemos.

  Pulsa sobre el frame 2 y cámbiale el color de fondo al óvalo como hicimos antes. Haz lo mismo en los dos siguientes frames.

 

Tu línea de tiempos debería tener este aspecto:

                                                 

Pulsa donde pone Escena 1 justo encima del escenario y de este modo volveremos al nivel inicial (Película principal) y podremos ver nuestro gráfico "desde fuera".

 

Ahora ya tenemos completo nuestro gráfico animado. ¿Qué crees que sucederá si reproducimos la película? Comprobémoslo pulsando Control + Intro, se visualizará la película.

 

¿Y bien? Nada. Nada en absoluto. El óvalo sigue tal cual. ¿Por qué? La respuesta está en las características de los gráficos que habíamos explicado: la línea de tiempos del gráfico está 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.

Ahora sí que se ve la animación.

Guarda este archivo porque lo utilizaremos más adelante.

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

    Flash CS3 permite importar mapas de bits de otros programas, cuando han sido guardados en formatos gráfico GIF, JPG, TIFF y muchos más. También nos permite modificarlos en cierto modo. Podemos cambiarle el tamaño y convertirlo en un símbolo para aprovechar las opciones que nos ofrece Flash aunque, teniendo en cuenta qué es un bitmap, no podremos modificarlo "internamente" pero podremos usarlo como un símbolo más.

 

Para importar un archivo de Mapa de Bits al escenario haz clic en el menú Archivo → Importar → Importar a escenario.

Se abrirá el cuadro de diálogo de Importar, allí deberás seleccionar el formato de imagen que quieres importar seleccionándolo en el desplegable Tipo. Luego navega por las carpetas hasta encontrarlo. Selecciónalo haciendo clic sobre él y pulsa el botón Abrir.

La imagen se incluirá en el escenario y estará lista para trabajar con ella.

 

Aquí tienes una muestra de como hacerlo.

    

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

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.

 

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

Exportar un objeto Flash como animación

Como vimos en el tema básico hay tipos de archivo de mapa de bits que soportan animaciones, como los GIF. Pues bien, con Flash también podemos crear una animación y exportarla como un GIF animado. Sin embargo, como vimos, el GIF animado consiste en una secuencia de imágenes mostradas secuencialmente y es por esto que para exportar un objeto Flash CS3 como GIF animado es necesario que todos los fotogramas de esta animación sean clave, ya que el GIF no lo reconocerá en caso contrario y no veremos el efecto deseado.

 

Para exportar un símbolo y guardarlo como una imagen deberemos antes que nada seleccionarlo con la herramienta Selección.

Una vez seleccionado deberemos hacer clic en el menú Archivo → Exportar → Exportar imagen... y se abrirá un cuadro de diálogo.

 

En este cuadro de diálogo deberemos introducir el nombre del archivo que crearemos y seleccionar en el desplegable Tipo el formato de imagen con el que queremos guardarlo.

Una vez rellenados todos los campos y elegida la carpeta donde se guardará el archivo pulsa el botón Guardar y el archivo de imagen se creará y estrá listo si quieres incluirlo en una página web estática o modificarlo con cualquier programa de imagen.

 Podéis seguir los pasos de este clip (Nota: se utilizará como base el gráfico ani

mado que creamos en el apartado de creación de gráficos, ya que dicho gráfico está hecho fo

tograma a fotograma):

 A la derecha vemos el GIF Animado que resulta de exportar nuest

ro gráfico Flash.

Podeis poner a prueba vuestros conocimientos realizando la:

Ejercicios del Tema 10

  Prueba evaluativa del Tema 10.

Unidad 11.  Clips de Película (I)

¿Qué es un Clip de Película?

Un Clip de Película o simplemente Clip, es una película en si misma, como cualquiera de las que podamos haber creado hasta el momento en este curso, pero que está incluida dentro de otra película y, a su vez puede contener también películas insertadas en él.

    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 tiempos del documento que lo contiene, de tal forma que su ejecución es independiente.

    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 barra de tiempos más clara y "limpia". 

    Los Clips son una de las herramientas que dan mayor potencia a Flash CS3, 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.    

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). Después importaremos una imagen cualquiera o bien crearemos una. La convertimos en Símbolo (Insertar → Nuevo Símbolo...) y seleccionamos en Tipo "Clip de Película"

Arrastramos al escenario (si no está ya allí) nuestro clip de película.         

Ahora tenemos nuestro Clip, insertado en nuestro nuevo documento Flash. Es decir, tenemos dos películas, cada una con su línea de tiempos.

 Ahora veamos que son independientes, siguiendo un proceso similar al que utilizamos con los símbolos de tipo Gráfico.

 Observa la línea de tiempos de la película principal y comprueba que sólo tiene un fotograma.

 

  Editemos el Clip que insertamos en el documento (doble clic sobre el avión) y examinemos su línea de tiempos. Aparecerá un único movieclip. Podemos realizar algo similar a lo realizado con los gráficos, si bien vamos a crear una Animación de Movimiento (que se verá en el Tema 13). Nos quedará así

:

 

  Como vemos, la duración del clip que hemos insertado es mucho mayor que la película nueva que lo contiene. Si el pez fuera un gráfico ya hemos visto que si intentáramos reproducir la película no ocurriría nada. Veamos qué sucede siendo en este caso un Clip (esto también es válido si la animación se ha creado del modo visto con los gráficos). (Control + Intro).

En este caso sí que vemos la animación porque en el momento en que el reproductor ha pasado por el fotograma que contenía el clip, éste ha empezado a reproducirse y, puesto que su línea de tiempos es independiente, ha seguido reproduciéndose a pesar de que la línea de tiempos principal haya terminado, y lo continuará haciendo hasta que acabe su línea temporal propia.

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, 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, bien no es necesario crearlo en ese momento, bien conviene 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 marco Tipo.

A partir de este momento tendremos un nuevo clip (vacío) al cual podremos acceder desde nuestra Biblioteca (menú Ventana → Biblioteca), si hacemos clic derecho sobre él y seleccionamos Edición, podremos editarlo y trabajar con él.

 

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.

Importar y Exportar Movie Clips de Biblioteca

Como para todos los símbolos los Clips se almacenan en la biblioteca del documento cuando son creados. Esto es muy importante en muchos casos ya que habitualmente los clips son muy reutilizables. Para importar clips de película debemos abrir primero la biblioteca en la que está contenido.

     Hemos visto en el tema de Símbolos, dos tipos de bibliotecas: las que están asociadas a documentos u otras películas y las que nos proporciona Flash CS3. Pues bien, no sólo podemos utilizar símbolos del mismo documento en el que estamos sino que podemos Importarlos de otros documentos de nuestro disco duro, lo que, en el caso que nos ocupa, puede resultar de gran utilidad. Obviamente la exportación mediante biblioteca se hace automáticamente ya que Flash deja los objetos creados en la biblioteca para que puedan ser reutilizados.

     Para importar un Clip de un archivo del disco duro debemos ir al menú Archivo → Importar → Abrir biblioteca externa..., seleccionar el Archivo Flash (.fla) del que queremos importar sus símbolos de biblioteca y pulsar Abrir.

Aparecerá la biblioteca con la lista de los símbolos correspondientes a los gráficos, botones y clips del documento en cuestión.

Es importante destacar que cuando insertemos un clip de una biblioteca, se insertarán a su vez todos los símbolos que contenga, incluidos los clips.

A continuación mostramos un ejemplo en el que veremos cómo importar clips de esta forma además de comprobar las propiedades de los clips y sus líneas de tiempo independientes mediante la reproducción simultánea de dos películas, creando un efecto bastante vistoso utilizando "aparentemente" un sólo frame. 

Ver ejemplo animado:

Y el resultado del proceso anterior es el siguiente:

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 .

  Ejercicios del Tema 11   Prueba evaluativa del Tema 11.

Unidad 12.  Botones (I)

¿Qué es un Botón?

Los símbolos de tipo Botón son los que aportan la mayor parte de la interactividad de las películas Flash con aquel que la está visualizando. Un botón, en Flash, es igual que cualquier botón de cualquier entorno informático, sea web o cualquier otro.

Son elementos que se prestan a que el usuario los presione, desencadenando al hacerlo una serie de acciones. También es habitual ver como este tipo de elementos reaccionan cuando se les pasa el ratón por encima o cuando se les está pulsando, por ejemplo.

Pues bien, para conseguir los efectos interactivos que acabamos de mencionar en otros lenguajes orientados a la web, que es el caso que nos ocupa, debemos crear programas relativamente grandes. Esto es un inconveniente bastante grande ya que el uso de los botones es una práctica muy habitual en el diseño en Internet. Sin embargo, en Flash no ocurre así. Su interfaz está diseñada de manera especial para la creación de botones, lo que nos permite crear todos estos efectos de una manera muy sencilla.

Al igual que los otros símbolos de Flash CS3, los botones tienen su propia línea de tiempos. Esta es independiente pero, sin embargo, está formada únicamente por cuatro fotogramas, uno para cada estado posible del botón.

Reposo. Aspecto por defecto del botón, es decir, cuando el puntero del ratón no está situado sobre él.

Sobre. Aspecto del botón cuando situamos el puntero sobre él. 

Presionado. Apariencia que deseamos tenga nuestro botón mientras lo mantengamos pulsado.

Zona activa. Aquí debemos indicar el área real en la que queremos que actúe nuestro botón. Esto es importante sobre todo en botones compuestos sólo por texto

como veremos más adelante.

Parece que la limitación de fotogramas podría implicar una limitación en la capacidad de espectacularidad y utilidad de estos símbolos, pero no es así.

Los botones pueden contener a su vez otros símbolos, como clips o gráficos (también de tipo Bitmap). La unión de las posibilidades de todos los símbolos dota a los botones de gran espectacularidad.

 

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.

Primeramente crearemos el objeto que representará el aspecto por defecto de nuestro botón con las herramientas que nos ofrece Flash CS3. 

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 tiempos 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 ovalado.  Como resultado obtenemos el botón que continuación mostramos.  

Este es un botón muy básico, como veremos se pueden complicar mucho, pero para empezar nos servirá con este.

Si una vez creado el botón queremos observar sus distintos estados y todavía no hemos terminado la película entera y por tanto no deseamos tener que reproducirla toda podemos hacerlo accediendo a la Biblioteca de nuestra película y seleccionando el botón creado. Para ver lo que comentábamos bastará con pulsar la tecla situada a la derecha de la vista previa del símbolo.

Formas en los Botones

  Los botones son símbolos que pueden tener multitud de formas. Si bien lo más habitual es ver botones rectangulares, cuadrados y circulares, cuya creación es inmediata como vimos en el punto anterior, también hay otros muchos tipos de botones que, pese a ser menos utilizados, es muy habitual verlos en multitud de páginas web.

Entre estos están los creados mediante formas poligonales, aquellos que están formados por texto únicamente, dibujos con diferentes motivos, etc. Es interesante su uso para dar más vistosidad ya que algunos resultan más expresivos, y en esto Flash nos ayuda mucho, debido a la relativa sencillez de creación de botones que sus herramientas de dibujo nos ofrece.

Hay varias formas de botón también muy extendidas, como el botón con relieve sencillo o los botones en forma de píldora. Puesto que existen muchas formas de conseguir estos efectos, a continuación tienes un ejercicio paso a paso que muestra una forma de conseguir el relieve en un botón rectangular. Ejercicio Botón en Relieve.

Botones de texto. La importancia de la zona activa

Los botones, como hemos visto, poseen un fotograma en el que indicamos la zona activa. En los ejemplos vistos hasta el momento esto parecía poco útil, ya que es común pensar que obviamente la zona activa que queremos que tenga nuestro botón es el área que comprenden los límites de dicho botón.

Veamos como esto no es siempre tan trivial. Aquí se muestran dos botones creados en Flash CS3. Comprobemos lo que sucede al pasar el ratón por encima de uno y de otro.

Aunque parezcan iguales, la diferencia está en el momento en el que situamos el ratón en uno de los huecos que existe entre letra y letra o, en general, todos aquellos lugares que no pertenezcan al texto propiamente dicho.

En el texto de la izquierda el botón se activa sólo cuando situamos el puntero del ratón sobre la letra. Esto puede ser incómodo y puede llevar a confusión, ya que aquel que navegue por nuestras páginas simplemente querrá hacer uso del botón y no tener que intentar apuntar concretamente a unas letras que quizá sean muy estrechas.

Esto es debido al mal uso de la zona activa. Para solucionar este problema sigue los siguientes pasos:

1. Haz doble clic sobre el botón para entrar en su modo de edición.

2. Haz clic sobre el fotograma de Zona Activa, si no hubiese ningún fotograma clave creado haz clic sobre él y pulsa la tecla F6 para crear uno.

3. Una vez en el estado Zona Activa seleccionamos la herramienta Rectángulo y dibujamos un rectángulo sobre el texto tapándolo en su totalidad. Así definiremos toda el área del rectángulo como zona activa al ratón.

4. Vuelve al modo de edición normal pulsando el enlace a Escena 1 sobre la Línea de tiempos.

Aquí tienes un ejemplo de cómo hacerlo correctamente. 

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

Si nosotros en determinado momento no queremos que esto ocurra en nuestras páginas web, podemos recurrir a la introducción de un Clip en el botón, que explique un poco más acerca de lo que pasará si pulsamos.

 

Incluir un Clip en un botón es muy sencillo. Tomando este ejemplo, sólo tendrás que, primero, hacer doble clic sobre el botón para entrar en su modo de edición.

Haz clic en el estado Sobre para modificarlo. Selecciona el texto y pulsa la tecla SUPRIMIR para eliminarlo.

Ahora abre la Biblioteca desde el menú Ventana → Biblioteca donde se encontrará el clip que habremos creado previamente. Selecciónalo y arrástralo sobre el botón.

Ya esta listo, ahora cuando pases el ratón sobre el botón el clip de película empezará a reproducirse.

 

Aquí puedes seguir el proceso que acabamos de comentar 

Y este es el resultado. 

 

Bitmaps y Botones

  Además de clips, los botones también pueden contener símbolos de tipo Gráfico.

     Puesto que, como ya hemos visto, todo lo que se puede hacer con un gráfico se puede hacer con un clip, vamos a centrarnos en los Bitmaps que Flash nos permite importar, ya que están muy extendidos como forma de expresión gráfica a lo largo y ancho de la Red.

     Si consideramos las limitaciones que ya conocemos sobre los mapas de bits puede parecer poco interesante hacer uso de ellos en la creación de botones, pero no es así.

     Básicamente podemos hacer dos cosas:

     1) Incluir en cada uno de los fotogramas del botón un bitmap distinto, obteniendo un efecto como el que se consigue con lenguajes como javascript (siempre considerando la mayor sencillez de Flash).

     2) Aprovechar las propiedades de los Gráficos en Flash. Para esto, deberíamos importar primero el Bitmap y después convertirlo a símbolo botón. Posteriormente lo editaríamos y, después de insertar cada fotograma clave, convertiríamos su contenido a símbolo Gráfico. Una vez hecho esto, variando los efectos de las instancias en Flash (Alfa, Tinta, Brillo) podremos conseguir efectos bastante buenos.

     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.

Acciones en los botones

Puesto que existen multitud de acciones que se pueden aplicar tanto a los botones, como a otros elementos de Flash CS3 vamos a comentar dos de las más comunes:

1) Abrir una página web. Con esto conseguiremos abrir una página cualquiera de internet (o una película Flash), lo que nos servirá para irnos desplazando por webs que contengan más de una página, o permitir al usuario descargarse archivos entre otras cosas.

Para añadir una acción a un botón es necesario el uso de ActionScript (en el tema 17 se tratará con mayor profundidad).

Por lo tanto, los pasos a seguir serán los siguientes:

Selecciona el botón haciendo clic sobre él, pues es a él al que irá asociada la acción.

1. Abre el panel Acciones haciendo clic en su pestaña o desde el menú Ventana → Acciones.

2. Haz clic en el botón Asistente de script.3. En el marco de la izquierda haz clic sobre Funciones globales →

Navegador/Red → getURL.4. Al seleccionar el comando getURL (que se encarga de crear un link a una

página web) se mostrarán sus respectivas opciones en la derecha del panel. Rellena los campos URL con la página a la cual quieres vincular el botón y selecciona en que ventana quieres que se abra el link en el desplegable Ventana (_blank abrirá el link en una página nueva).

5. Cierra el panel de Acciones y el botón estará listo. Has añadido una acción a tu botón.

Aquí tienes una muestra de cómo hacerlo.

Y este es el resultado:

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

Por ejemplo, para detener una película en curso simplemente debemos hacer que nuestro botón en cuestión aparezca en el escenario de dicha película, seleccionarlo, y abrir el panel de acciones, activando posteriormente la función Stop().

Tras hacer esto, se mostrará (igual que en a animación anterior) el código correspondiente. Observa cómo en ambos casos la acción se sitúa entre el evento on (release) del botón. Este evento se dispara en el momento en el que el botón deja de pulsarse, es decir, depués de hacer clic cuando soltamos el botón del ratón.

Ahora cada vez que presionemos este botón se detendrá la película en la que está incluido.

De forma muy parecida actuaríamos para otras acciones de control.

Como vimos al principio del curso, nuestro objetivo es aprender a utilizar Flash utilizando

ActionScript 2, mucho más sencillo y accesible para la mayoría de usuarios. En Flash CS3 se incluye la nueva versión del lenguaje de programación de Flash: ActionScript 3.

AS3 supone un giro total en la metodología de la creación y programación de películas Flash, por lo que a continuación detallaremos el código equivalente para recrear lo que acabamos de ver en AS2.

Ten en cuenta que en AS3 no es posible asignar código sobre un botón (ni cualquier otro símbolo) por lo que deberás emplazar dicho código directamente en el fotograma a partir del cual quieras que el código entre en acción. Para ello selecciona el fotograma en la línea de tiempo y abre el panel Acciones.

ActionScript 3

import flash.events.*;

miBoton.addEventListener(MouseEvent.CLICK, miFuncion);

 

function miFuncion(event:MouseEvent):void

{

this.stop();

}

Puedes ver el videotutorial de introducción a ActionScript 3 para comprender mejor los nuevos

cambios.

 

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. Ahora debemos insertar el sonido. 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í:

 

  Ejercicios del Tema 12                                                          Prueba evaluativa del Tema 12.

Unidad 13. Animaciones de Movimiento (I)

La animación en Flash

Flash CS3 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, sobretodo, mucha práctica.

    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 muchos conocimientos y espacio de almacenamiento para ser creados, como es el caso por ejemplo de los GIF animados o lenguajes de programación como Java, 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.

    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.

 

Interpolación de Movimiento (I)

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

     También se debe tener cuidado al realizar una Interpolación con dos símbolos que se encuentren en la misma capa, ya que el motor de animación los agrupará como uno sólo y el resultado no será el esperado. Por esto es conveniente asegurarse de dos cosas:

                1) Separar en distintas capas los objetos fijos y los que estarán animados.

                2) Poner también en distintas capas objetos que vayan a ser animados con direcciones o formas distintas.

     Pasemos pues al tema en cuestión. Una interpolación de movimiento, como hemos dicho, es el desplazamiento de un símbolo de uno a otro punto del escenario. El hecho de que sólo se necesiten dos fotogramas es debido a que Flash, únicamente con la posición inicial y final, "intuye"

una trayectoria en línea recta y la representa (veremos que también se pueden realizar movimientos no rectilíneos).

     Cuando realicemos la interpolación correctamente observaremos un aspecto como este en la línea de tiempo.

      Esto indica que la animación cambiará la posición del símbolo del fotograma 1 hasta la posición del mismo símbolo en el fotograma 20, utilizando precisamente 20 fotogramas. El número de fotogramas que se usen en la interpolación de movimiento indicará las subetapas de que constará la animación. Cuantas más subetapas más sensación de "continuidad" (menos saltos bruscos) pero a la vez menos velocidad en el movimiento.

      La velocidad en el movimiento de las películas la podemos cambiar también modificando su

parámetro en la barra de tiempos, pero esto no cambiará lo que hemos comentado anteriormente.

      La velocidad está expresada en Fotogramas Por Segundo (fps) y se puede modificar haciendo doble clic en el lugar que hemos indicado de la barra de tiempos. A mayor valor más velocidad, pero se deben poner siempre suficientes fotogramas para que se desarrolle la animación como queremos.

 

En la animación del tema 1 podrás ver como realizar una interpolación de movimiento.

Mantén en mente que cuando realices una interpolación de movimiento 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 como realizar una interpolación de movimiento

      Si el objeto con el que queremos hacer la interpolación de movimiento 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. Basta con hacer clic con el botón derecho sobre el fotograma que contiene nuestro objeto (en la línea de tiempos) y seleccionar Crear Interpolación de Movimiento. Después, al crear un fotograma clave en otro lugar de la línea de tiempos se creará automáticamente la interpolación, y sólo deberemos modificar este último fotograma para producir la animación.

      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.

      Flash también nos permite crear animaciones con trayectorias rectilíneas en varias fases, con direcciones distintas. Para ello, una vez creada la interpolación, basta con pinchar en uno de los fotogramas intermedios y crear un nuevo fotograma clave. Si movemos el símbolo en ese fotograma a otro lugar del escenario y reproducimos, la animación irá primero a esa posición y después a la posición final.

      Si hacemos esto varias veces sobre varios fotogramas obtendremos varias trayectorias

consecutivas más.

      Para entender mejor este concepto recomendamos hacer el Ejercicio Encadenar Interpolaciones.

 

Interpolación de Movimiento (II)

  Acabamos de ver las interpolaciones de movimiento como un mecanismo para desplazar un símbolo Flash de un lado a otro del escenario. Sin embargo, podemos aprovechar este comando del programa para realizar animaciones en las que nuestro objeto aumente o disminuya de manera progresiva su tamaño.

     Esto es muy sencillo con Flash CS3, basta con modificar la instancia del símbolo en el último fotograma de la interpolación de movimiento, pero esta vez cambiándole 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.

     El ejemplo siguiente incorpora estas tres características de la Interpolación de Movimiento de Flash CS3.

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

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.

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.

Interpolación mediante Guía de Movimiento

Anteriormente hemos visto como las interpolaciones de movimiento desplazaban símbolos Flash en línea recta. Puesto que esto supone una cierta limitación, Flash incluye la Guía de movimiento.

     Una guía de movimiento 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, basta con crear una interpolación de movimiento en una capa, seleccionarla (debemos asegurarnos de esto para evitar que la guía se asocie a otra capa), y colocar el símbolo del último fotograma al final del trazado que realizaremos previamente en la capa de 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 alineada a la derecha.

    

Crear interpolaciones de movimiento guiadas es muy sencillo, Lo primero que deberás hacer es crear una animación de movimiento, para ello:

1. Crea un fotograma clave pulsando F6 e inserta en él el símbolo que quieres que realice el movimiento.

2. Crea un nuevo fotograma clave para marcar la duración de la animación, por ejemplo, si creaste el primer fotograma en la posición 5, crea el nuevo en la posición 25, así tendrás una animación que durará 20 fotogramas.

3. Selecciona todos los fotogramas que intervengan en la animación y haz clic derecho sobre uno de ellos en la Línea de tiempos. Selecciona la opción Crear interpolación de movimiento.

Una vez creada la interpolación y con la capa seleccionada pulsa el botón Añadir guía de movimiento. Se creará una nueva capa asociada a aquella donde tienes creada la animación.

Ahora el procedimiento es fácil, selecciona la herramienta Lápiz y dibuja en la capa guía el recorrido que debe seguir el símbolo.

Cuando lo hayas creado selecciona el último fotograma de la animación y coloca el símbolo en su punto final. Recuerda que el símbolo debe estar siempre en contacto con la línea de guía tanto en el primer como último fotogramas.

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.

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

3, puedes ver cómo realizarlo en este videotutorial:

Podeis poner a prueba vuestros conocimientos realizando:

  Ejercicios del Tema 13.   Prueba evaluativa del Tema 13.

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 CS3 nos ofrece la técnica de la Interpolación por Forma, que consiste simplemente en ir transformando el contorno de un objeto creado en su interfaz hasta que sea igual que el contorno de otro objeto distinto.

    Realizar una interpolación por forma, es muy semejante a crear una interpolación de movimiento. Flash genera fotogramas intermedios en los que va variando ligeramente la forma del fotograma anterior. Así como hacíamos en el tema anterior, sólo necesitamos dos fotogramas clave. Colocaremos en el primer fotograma el objeto con su aspecto original, y en el último la apariencia final que queremos que tenga.

    Esta vez, es importante destacar que para que una Interpolación por Forma funcione como es debido aquellos objetos que intervengan deberán ser objetos vectoriales (no símbolos Flash).

    Debemos tener también dos aspectos en cuenta:

                1) Separar en distintas capas los objetos fijos y los que estarán animados.

                2) Poner en distintas capas objetos que vayan a ser transformados con formas distintas, ya que Flash transformará todos los objetos vectoriales del primer fotograma en aquello que haya en el último fotograma de la interpolación.

    Si realizamos la interpolación por forma correctamente la línea de tiempos 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 tiempos:

 

Para crear una interpolación de forma deberás actuar de forma similar que para crear una de movimiento. Puedes hacer clic derecho sobre los fotogramas o seguir los pasos siguientes:

Una vez tengas los fotogramas de inicio y fin de la animación deberás seleccionar todos los fotogramas que participen en ella y abrir el panel Propiedades.

Allí deberás seleccionar la opción Forma en el desplegable Animar. Y ya habrás terminado.

Fácil, ¿verdad?

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

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.

    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.

 

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 a la izquierda. 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.

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

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

  Ejercicios del Tema 14                                                          Prueba evaluativa del Tema 14.

Unidad 15. Efectos sobre Animaciones (I)

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.

 

Efectos sobre la Interpolación de Movimiento

   Para describir todos los efectos que podemos aplicar sobre una interpolación de movimiento previamente creada, sin necesidad de tocar ningún símbolo, nos centraremos en el Panel Propiedades, cuando seleccionemos un Fotograma que presente animaciones de Movimiento, los atributos de la animación a modificar aparecerán en este Panel.    

      En el campo <Etiqueta de fotograma> podemos darle un nombre a la interpolación que nos ayudará a identificarla en la barra de tiempos. Aparecerá a lo largo de todos los fotogramas que la componen.

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

Todas las interpolaciones de movimiento que hemos hecho hasta ahora tenían esta opción activada aunque no lo hayamos indicado expresamente. Flash la activa por defecto, ya que es lo más normal. De no ser así podríamos encontrarnos con una animación como la siguiente.

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

Girar: Esta opción es muy interesante ya que nos da la posibilidad de aplicar una rotación al

objeto mientras se produce el movimiento. Para que surta efecto debemos seleccionar el primer fotograma de la interpolación.

Se nos presenta un submenú con cuatro opciones:

Ninguna. Con esto le indicamos a Flash que no aplique rotación alguna sobre el símbolo en movimiento.

Automática. Marcando esta opción hacemos que se produzca la rotación en aquella dirección que necesite menos movimientos. Si cuesta lo mismo hacerlo por un lado o y por el otro, es decir, cuando la imagen inicial y final está en la misma posición (en cuanto a rotación se refiere), el hecho de activar esta opción no tendrá ningún efecto.

Esta opción es la que está marcada por defecto y por eso no hemos visto hasta ahora un objeto rotar en nuestras interpolaciones. 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.

Antihorario (antes CCMR). Permite realizar el número de rotaciones completas en la dirección contraria a la de las agujas del reloj, que le indiquemos en la casilla de la derecha. Tanto si la última imagen tiene rotación como si no.

En caso de que tuviera rotación la imagen final, esta se le añadiría.

Horario (antes CMR). Realiza lo mismo que la opción anterior pero en la dirección de las agujas del reloj (hacia la derecha).

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

A la derecha vemos el resultado.

Orientar según trazado: Si activamos esta casilla, cuando la interpolación sobre la que actuamos es una interpolación por guía 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 la última animación del tema 13, 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.

Efectos sobre el Símbolo Interpolado

      Ya vimos en temas pasados cómo aplicar efectos sobre 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, deberemos convertir a fotograma clave aquel que contenga la instancia y después aplicar el efecto..

     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.

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: 0 para el primer fot. clave, -46 para el central y 0 para el del medio.

Efecto Tinta

El efecto de Tinta, tiene un amplio marco de posibilidades de uso. Es muy usado en textos y en botones, por ejemplo haciendo que cambien progresivamente de color al pasarles el ratón por encima o simplemente efectos de cambio de color en presentaciones.

El tintar colores supone un toque alegre y muy vistosos 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.

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 como realizar una animación como la anterior pulsa aquí.

  Ejercicios del Tema 15                                                          Prueba evaluativa del Tema 15.

Unidad 16. Generar y Publicar Películas (I)

Consideraciones sobre el tamaño de las películas

Antes de aventurarnos a publicar nuestra película para que otros la vean, sobretodo 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.

Preloader. Cargar la Película entera antes de reproducirla

Un preloader se usa principalmente para evitar la carga parcial de la película, mientras esta se está reproduciendo, lo que, en ocasiones en las que la película es de un tamaño considerable, hace que la película se vea entrecortada.

Normalmente, los preloaders se hacen vistosos para que el observador no se aburra y deje de lado la opción de visitar nuestra web. Suelen llevar alguna animación sencilla que se va reproduciendo mientras se está cargando simultáneamente la película principal, mucho más grande.

Se pueden complicar mucho más, pero nosotros haremos uno sencillo que nos sirva para entender bien el concepto, y la manera de hacerlo.

Partimos de que ya tenemos nuestra película terminada. Si queremos saber su tamaño podemos ir a Archivo → Configuración de publicación seleccionar la pestaña Flash, y marcar la casilla Generar Informe de Tamaño. Si pulsamos el botón Publicar, aparecerá en nuestro directorio un archivo de texto donde se explica con detalle el tamaño de nuestra película.  

Ahora insertaremos una nueva escena (Insertar → Escena). Deberá ser la primera que se ejecute. Para asegurarnos de ello accedemos a Ventana → Otros Paneles → Escena, y en la ventana que aparece arrastramos la escena que acabamos de crear hasta que esté la primera. En nuestro ejemplo le hemos llamado "Preloader" y hemos supuesto que la Escena con la película se llama "Pelicula" (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 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 2 de Flash 8. Para ello abrimos el panel de Acciones.

Vamos a seleccionar el último fotograma e introducimos la acción gotoAndPlay, que por defecto nos escribirá "gotoAndPlay()" y nos situará el cursor en el interior del paréntesis para que introduzcamos la escena y el fotograma al que se deberá ir al ejecutar dicha acción. En nuestro caso queremos ir al fotograma 1 de la escena "Pelicula", con lo que escribiremos lo siguiente: gotoAndPlay("Pelicula", 1);

Ahora seleccionamos el penúltimo fotograma, que es el que impedirá que se llegue al último (o sea, que repetirá el bucle que muestra la animación "cargando") cuando aún no se haya cargado la película por completo. Para hacer esto, elegimos la acción _framesloaded (fotogramas cargados) y la acción _totalframes (fotogramas totales) e indicamos en el panel acciones lo que queremos hacer. Sería algo como "Cuando el número de fotogramas cargados sea mayor o igual al número de fotogramas totales, entonces comenzamos a reproducir la película" (aunque sea teóricamente imposible que el número de fotogramas cargados sea mayor que el de fotogramas totales, nunca está de más incluir esta condición por si acaso Flash contabiliza internamente los fotogramas de un modo diferente). Podríamos escribir algo como lo que muestra la imagen:

Con esto, hacemos que aparezca en la pantalla el texto "cargando" y mientras se reproduce su animación, iremos comprobando periódicamente si la película principal está cargada por completo, si no lo está seguiremos mostrando el texto "cargando" hasta que la comprobación que hacemos en el último fotograma nos indique que nuestra película se ha cargado. En ese momento, dejaremos que la animación del preloader llegue a su último fotograma, que contiene la acción que nos llevará a reproducir 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.

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:

Versión: Si queremos publicar nuestra película para que sea vista con versiones anteriores de Flash, debemos seleccionar aquí la versión deseada.

Orden de Carga: Aquí indicamos el orden en que queremos que se cargue el documento.

Si seleccionamos De abajo a arriba se cargará primero el contenido de la capa inferior (de la capa 1 hasta la última capa que tengamos en el documento).

Por el contrario, si seleccionamos De arriba a abajo se cargará primero el contenido de la capa superior (de la última capa que tengamos en el documento hasta la capa 1).

Este comando es importante debido a la propiedad de Flash de ir reproduciendo la película conforme los objetos son cargados. Así, en caso de que

nos interese que aparezcan antes unos objetos que otros seleccionaremos uno o el otro.

Versión de ActionScript: El uso de ActionScript 2 nos permitirá usar las novedades relativas a objetos, clases etc... Si nuestra película sólo usa acciones sencillas podemos dejar en esta pestaña la opción ActionScript 1.0

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 conseguiremos 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 Trazado:  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 Action Script. 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.

Depuración Permitida: 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.

Comprimir película: Comprime la película al máximo posible.

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.

Para entender mejor este concepto te recomendamos hacer el Ejercicio Publicar SWF

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

Flash con FSCommand: Imprescindible cuando se usen FSCommands.

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.

Pocket PC 2003: Especialmente diseñado para Pocket Internet Explorer en Pocket PC 2003.

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.

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

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

  Ejercicios del Tema 16.   Prueba evaluativa del Tema 16.

Unidad 17. Introducción a ActionScript 2 (I)

¿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 CS3. A grandes rasgos, podemos decir que el ActionScript nos

permitirá realizar con Flash CS3 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 dos temas sólo vamos a ver una pequeña introducción a ActionScript 2 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 CS3.

Todo lo referente a este capítulo hace referencia a la versión 2 de ActionScript, aunque en algunos momentos podrás ver su equivalencia en AS3.

Características generales del ActionScript

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.

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

El ActionScript 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 un lenguaje puramente orientado a objetos derivado del C o del Pascal como los anteriores, cada versión se acerca más a un lenguaje de este tipo. Así, la versión 2.0 estrenada en Flash MX 2004 es mucho más potente y mucho más "orientada a objetos" que su anterior versión 1.0.

El ActionScript presenta muchísimos parecidos con el Javascript; si conoce Javascript, la sintaxis y el estilo de ActionScript le resultarán muy familiares. Las diferencias entre ambos lenguajes las puede encontrar en la ayuda que acompaña al Flash CS3.

En la mayor parte de las ocasiones, no será necesario "programar" realmente, Flash CS3 pone a nuestra disposición una impresionante colección de "funciones" (de momento entenderemos "funciones" 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, échadle un vistazo a nuestro tema

básico .

 

El Panel Acciones

  En Flash CS3, el Panel Acciones sirve para programar scripts con ActionScript. Esto es, que todo lo que introzcamos en dicho Panel se verá reflejado después en nuestra película. 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.

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.

Posteriormente veremos con detalle los distintos elementos de este Panel.

A la parte derecha tenemos el espacio para colocar nuestro script, aquí aparecerá lo que vayamos insertando. También incluye herramientas de utilidad, como la búsqueda de palabras, la posibilidad de insertar puntos de corte, la herramienta Revisar Sintaxis y la ayuda de Flash para ActionScript.

El Panel Acciones de Flash CS3, no tiene únicamente un modo de edición. La libertad del modo "Experto" es total y por tanto, también lo es la posibilidad de comenter fallos, para asegurarnos de que nuestro script es correcto, al entrar en Modo Experto nos aparecerá un icono

con el siguiente aspecto: Al pulsarlo Flash revisa nuestro código en busca de posibles errores, indicándonos, en su caso, la línea que presente el error y en qué consiste éste.

Es un fallo común pasarse horas buscando por qué nuestra película no funciona correctamente y que el motivo sea que un error de sintaxis ha invalidado todo el código existente en un fotograma, que actua como si no hubiera NADA DE CÓDIGO en él. Pongamos pues, mucha atención en esto y revisemos el código concienzudamente.

El uso del modo en asistente es mucho más sencillo para ello pulsa el botón Asistente de Script y selecciona los comandos que quieras incluir, apareceran las opciones que deberas rellenar para que estos comandos funcionen correctamente y el código se generará automaticamente. Esta es una muy buena utilidad recuperada que permitira a los usuarios que acaban de empezar el uso de este lenguaje.

Aun así es recomendable siempre repasar el código y así irnos familiarizando con él y de este modo poder poco a poco crear nuestro propio código en modo Experto, lo que nos dará mayor flexibilidad a la hora de crear nuestras películas.

Para entender mejor este concepto te recomendamos hacer el Ejercicio Panel Acciones.

Los operadores

Entrando un poco más a fondo en la sintaxis y el manejo del ActionScript, vamos a comenzar hablando de los operadores, por ser la parte más elemental de una acción de ActionScript (y de muchísimos otros lenguajes 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. Flash CS3 sacará un resultado de toda expresión que encuentre en nuestra película. Por ejemplo:

x = 3 ; --> Es una expresión cuyo resultado será asignarle a la variable ' x ' el valor 3 (que es una constante)

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 a ' y ' el valor 8 (3 + 5).

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 Operadores. Vamos a clasificar los operadores tal y cómo lo hace Flash.

Operadores Aritméticos

+ : Suma. Este operador sirve, como es de esperar, para sumar 2 valores.

- : Resta. Realiza la operación esperada de restar 2 valores.

* : Multiplicación. Realiza el producto de 2 valores

/ : División. Es la clásica operación de dividir. Al contrario que en algunos lenguajes de programación, este operador sí que realiza la división completa (incluyendo decimales)

% : Operador Resto. Este operador, no muy conocido en matemática, es un clásico de la programación. Devuelve el resto entre 2 números. Ejemplo: 4 % 3 = 1, 4 % 2 = 0.

Operadores de Asignación

= : Igual. Este es el operador más importante de esta categoría y sin duda, uno de los más usados. Almacena el valor situado en la parte derecha de una expresión en la variable situada en la parte izquierda. Ej: x = 2 + 3. Almacena en la variable x el valor de (2 + 3).

El resto de operadores de esta categoría son en realidad formas de realizar varias operaciones de una vez, describiremos uno a modo de ejemplo, el resto funcionan exactamente igual.

+= : MásIgual. Este operador asigna a la expresión situada a la izquierda del operador el valor resultante de sumar la expresión situada a la parte derecha con la expresión de la parte izquierda. Ejemplo: (Suponemos que x = 4 e y = 3) entonces, la expresión x += y provocaría que x pasase a valer el resultado de sumar ( 3 + 4 ). Por tanto, la expresión x += y es equivalente a hacer: x = x + y.

Operadores de Comparación

== : Probar Igualdad. Este operador sirve para comprobar si 2 expresiones son iguales. Si lo son, el valor de la expresión de comparación es 'true', que significa 'verdadero'. Por motivos semánticos, decir que una expresión es true es equivalente a decir que vale 1. Si no son iguales, devuelve 'false' (falso) o el valor 0.

Esta posibilidad de comprobar si una expresión es igual a otra, nos será muy útil para comprobar muchas cosas durante nuestra película y en función de ellas, hacer unas cosas u otras.

Pondremos un ejemplo, imaginemos que le pedimos a un usuario que introduzca su edad en un campo de texto de nuestra película flash. A ese campo le llamamos "edad_usuario". Le hacemos pulsar un botón "Continuar" y en ese momento comprobamos su edad, si tiene 20 años, le decimos una cosa, de lo contrario, le decimos otra distinta. Bastaría con hacer algo así:

if ( edad_usuario == 20 ) {

dar_mensaje_1; }

else { dar_mensaje_2; }

Aquí lo que estamos diciendo es lo siguiente: "Si edad_usuario es igual a 20, entonces damos el mensaje 1, sino lo es, 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". 

> : Mayor que. Devuelve como resultado verdadero (1) si la expresión de la izquierda es mayor que la de la derecha. De lo contrario, devuelve false (0).

< : Menor que. Devuelve como resultado verdadero (1) si la expresión de la izquierda es menor que la de la derecha. De lo contrario, devuelve false (0).

>= : Mayor o igual que. Devuelve como resultado verdadero (1) si la expresión de la izquierda es mayor o igual que la de la derecha. De lo contrario, devuelve false (0).

<= : Menor o igual que. Devuelve como resultado verdadero (1) si la expresión de la izquierda es menor o igual que la de la derecha. De lo contrario, devuelve false (0).

!= : Probar Desigualdad. Devuelve como resultado verdadero (1) si la expresión de la izquierda es diferente a la de la derecha. De lo contrario, devuelve false (0). Ejemplo: 3 != 4 provocaría que la expresión total valdría 1 (true o verdadero). Pues 3 es, efectivamente, distinto de 4.

Otros Operadores

( ) : Paréntesis. Sirven, como es de esperar, para agrupar términos y dar preferencias en las operaciones (al igual que en las matemáticas). También se usa, como ya vimos, para pasar parámetros a funciones o acciones. (Éstos deben ir entre paréntesis)

" " : Comillas. En ActionScript, todo lo que va entre comillas, pasa a considerarse una cadena de caracteres, por lo que las funciones y acciones que afectan exclusivamente a las cadenas de caracteres pasan a afectar también al elemento entre comillas. 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.

El resto de operadores no se usan tanto, su funcionalidad y definición puede consultarse en la propia ayuda de Flash.

Las Acciones

  Las Acciones son funciones predefinidas de ActionScript, es decir: Flash CS3 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.

Al igual que en el caso anterior, explicaremos las Acciones más importantes. Para una referencia más completa, recomendamos mirar la ayuda del programa.

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... Veámoslas y lo entenderemos mejor:

gotoAndPlay / goto: Esta acción será, probablemente la que más useis durante la realización de vuestras 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í.

Uso:

gotoAndPlay(escena, fotograma):

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

fotograma: Número o nombre del fotograma al que queremos enviar la cabeza lectora. Si es un nombre, debe ir entre comillas dobles, si es un número, NO.

Ejemplo:

gotoAndPlay("Escena2", 7); --> Esta acción lleva la cabeza lectora al fotograma 7 de la escena llamada "Escena2".

Play: Da comienzo a la reproducción de la película, generalmente porque algo la ha detenido.

Uso:

Play();

No tiene Parámetros.

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

Uso:

Stop();

No tiene Parámetros.

Acciones - Navegador / Red

Estas acciones tiene diversas funciones, describimos las más importantes:

fscommand: Esta acción, es capaz de ejecutar ciertos comandos muy potentes. Lo más cómodo es pasar a Modo Básico (sino estábamos ya) e insertarla, nos aparecerá una pestaña con los posibles comandos que admite:

- fullscreen : Si se activa pone nuestra película a pantalla completa. Muy útil para presentaciones en CD-Rom, por ejemplo.

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

- showmenú: 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: Sirve para detectar las pulsaciones de todas las teclas durante la reproducción de nuestras películas.

Todas estas alternativas, comparten modo de uso, veámoslo:

Uso:

fscommand("comando","true / false")

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

true / false: Aquí debemos escribir true o false, según queramos desactivar la opción o activarla.

Ejemplo:

fscommand("fullscreen", "true"); -> Activa la pantalla completa.

getURL: Esta acción se emplea para abrir el navegador web y abrir la página web que deseemos.

Uso:

getURL(url , ventana , "variables")

url: Dirección web a la que queremos acceder (se abrirá una ventana).

ventana: Parámetro OPCIONAL. Modo en el que queremos abrir la ventana (en la ventana actual (_self) en otra nueva (_blank) etc...)

variables: Parámetro OPCIONAL, puede haber varios. Si la página lo permite (es ASP, PHP etc...) podemos enviarle variables.

Ejemplo:

getURL("http://www.aulaclic.com", "_blank");

loadMovie / loadMovieNum: Esta acción 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).

Uso:

loadMovieNum(url , nivel / destino, variables)

url: Dirección absoluta donde está situada la película SWF o la imagen JPEG

nivel / destino: Nivel donde cargaremos la película, teniendo en cuenta que el nivel básico es el 0, luego va el 1 y así sucesivamente. Cada nivel superior se sitúa delante del anterior y toma el control. Si lo usamos como destino, aquí deberemos introducir el nombre del movieclip donde cargaremos la película o el nombre del marco si estamos cargando un fichero SWF en una página HTML con marcos.

variables: Parámetro OPCIONAL. Podemos enviar variables.

Ejemplo:

loadMovieNum("MiPeli2.swf", 0) --> Cargamos la película "MiPeli2.swf" en el nivel principal. No enviamos variables.

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 muchas Acciones, ¿Cómo indicarle a Flash que "si la variable x = 3, entonces vaya al fotograma 5, y sino, vaya al fotograma 10"?. Sabemos comparar, sabemos ir a los fotogramas, pero no sabemos decirle a Flash "Si pasa esto, haz una cosa, y sino, haz la otra...". Veamos cómo decírselo:

if ... else: Si partimos de que la traducción literal de if es "si..." y la de else es "sino ...", nos encontramos de repente con todas las herramientas para decirle a Flash: "si (pasa una condicion) {haz esto} sino {haz lo otro}"

Veamos antes que nada su Uso para comprenderlo mejor:

Uso:

if (condición) {sentencias1 ... } else {sentencias2 ... }

if: Indica que acción que viene a continuación es una condicional

condicion: Indica una condicion que DEBE cumplirse para que sucedan las acciones indicadas en "sentencias1". Si éstas no se cumplen, entonces lo que sucede es lo especificado en las acciones indicadas en "sentencias2".

Para que una condición se cumpla, 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.

sentencias1: Conjunto de acciones que sucederán si la condición se evalúa como verdadera. Si hay más de 1, deben incluirse todas ENTRE LLAVES

else: Especifica la alternativa si condicion se evalúa a falso. Es OPTATIVO. Sino existe, y no se cumple la condición, no se hará nada, pues no lo hemos especificado.

sentencias2: Conjunto de acciones que sucederán si la condición se evalúa como falsa. Si hay más de 1, deben incluirse todas ENTRE LLAVES

Ejemplo:

if (x == 2) {gotoAndPlay(6); } --> Si la variable x vale 2, entonces saltamos al fotograma 2, sino, 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.

Los Objetos

Los Objetos, como ya hemos visto en el tema básico, son instancias de una determinada clase. Esto es, son representantes de una clase ya definida. 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 CS3.

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) y 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. Podeis encontrar una lista con todas las propiedades, métodos y eventos de los objetos en el Panel Acciones.

Objeto "Button" (Botón)

Los objetos de tipo Botón tienen 4 estados, como ya se ha visto en el capítulo correspondiente y reaccionan ante métodos especiales como "OnRollOver", "OnPress" ... que permitirán que sucedan cosas cuando el usuario haga clic sobre estos botones, pase el ratón por encima etc...

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

Objeto "Sound" (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...

Podríamos, por ejemplo, crear un objeto de tipo sonido y después hacer que al pulsar un botón suene. (En el tema siguiente 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 matémá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...

Las Propiedades

Los Métodos suelen ser específicos de cada objeto, y su estudio requeriría un nuevo curso completo, (recomendamos consultar la ayuda incorporada en el Flash CS3 cuando surjan dudas), pero hay bastantes propiedades de los objetos que son comunes a muchos de ellos. Vamos a ver cuáles son las más usadas y qué representan.

Para usar las propiedades, se debe colocar el nombre del objeto seguido de un punto ( . ) y después la propiedad y su valor. Las propiedades siempre comienzan con un guión abajo ( _ ). 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.

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

_framesloaded

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

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 estas propiedades)

_height

Devuelve 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 la anchura.

_visible

Determina si el objeto está o no visible en nuestra película. Cuando vale 1, lo está, cuando vale 0, 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 las coordenadas del objeto respecto del eje de las X. 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 X. Sirve para averiguar la posición o para asignarla de forma dinámica (durante la ejecución de nuestra película Flash)

 

Veremos un ejemplo para utilizar ActionScript y referirnos a las propiedades de los símbolos de nuestras películas. 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 un nombre cualquiera que queramos. El objeto estará listo para tratarlo.

En el supuesto de que tengamos un rectángulo al que hayamos llamado r1 escribiremos el siguiente código asociándolo a un botón (creado anteriormente) en el panel Acciones para cambiar la anchura del primero:

on (release) {

r1._width=350;

}

Donde r1 será la llamada al objeto al cual hemos modificado su nombre de instancia, _width indicará la propiedad que queremos cambiar y 350 determinará el valor que vamos a asignarle a dicha propiedad.

 

Podeis poner a prueba vuestros conocimientos realizando la:

  Prueba evaluativa del Tema 17.

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 CS3. 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 (y con garantía de que funcionan). Mostraremos el código y a continuación, una explicación del mismo.

Código ActionScript en BOTONES

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

Todos los códigos que mostramos en este apartado DEBEN insertarse dentro del objeto de tipo Botón (Button) con el que estemos trabajando. Para ello, seleccionaremos el botón en cuestión y después abriremos y editaremos el Panel Acciones, asegurándonos de que éste hace referencia a nuestro botón (lo indicará la cabecera de este Panel).

Veamos algunos de ellos:

on (release) {

gotoAndPlay(15);

}

Esta acción provoca que al pulsar un botón vayamos directamente al Fotograma número 15 de nuestra película.

La primera línea indica a Flash CS3 que "al pulsar el botón" haga lo que está entre las llaves " { ... } ". Este código es característico de los botones y nos permite controlar el pulsado del mismo. Dependiendo de lo que coloquemos entre los parentésis, la acción asociada al botón se producirá en un momento o en otro. En este caso, hemos escrito "release" que significa que la acción se producirá cuando, tras pulsar nuestro botón, el usuario deje de hacer clic con el ratón.

La segunda línea es la acción que se producirá. En este caso, movemos la cabeza lectora de Flash al fotograma 15.

 

ActionScript 3

import flash.events.*;

miBoton.addEventListener(MouseEvent.CLICK, miFuncion);

 

function miFuncion(event:MouseEvent):void

{

this.gotoAndPlay(15);

}

 

on (release) {

getURL("http://www.aulaclic.com", "_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.com

La primera línea tiene la misma función que en el caso anterior

La segunda línea es la llamada al navegador web propiamente dicha. Los parámetros indican la dirección URL que queremos mostrar y el modo de ventana que contendrá a la página web. En este caso, se abrirá una nueva ventana independiente de la actual.

 

ActionScript 3

import flash.events.*;

import flash.net.*;

 

miBoton.addEventListener(MouseEvent.CLICK, miFuncion);

var miURL:URLRequest = new URLRequest("http://www.aulaclic.com");

 

function miFuncion(event:MouseEvent):void

{

navigateToURL(miURL, "_blank");

}

 

 

on (release) {

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 tiene la misma función que en el caso anterior

En la segunda línea podemos ver la propiedad ._width (anchura), luego esta llamada va a acceder a esta propiedad. Vemos que hay un operador 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.

 

ActionScript 3

import flash.events.*;

miBoton.addEventListener(MouseEvent.CLICK, miFuncion);

 

function miFuncion(event:MouseEvent):void

{

r1._width=350;

}

 

 

Código ActionScript en 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 (al igual que los botones), 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 algun evento de clip asociado (Load, KeyDown etc) que determine cuándo se ejecutará este código (al cargarse el clip, al pulsar alguna tecla ...)

Veamos algunos de estos códigos:

loadMovieNum("aulaClic.swf", 0);

Este código AS situado dentro de un fotograma, provoca que nuestra película Flash busque una película llamada "aulaClic.swf" EN LA CARPETA RAÍZ y la cargue en el nivel 0, es decir, en el mismo nivel que la película actual.

La carpeta raíz es la carpeta en la que está la película principal (la que tiene este código).

loadMovieNum("mifoto.jpeg", 0);

Este código nos permite cargar en un fotograma una imagen existente en nuestra carpeta raíz con extensión .JPEG de un modo dinámico.

Por dinámico entendemos en tiempo de ejecución, lo que significa que el tamaño de la película no lo notará, ni tampoco la velocidad de descarga de nuestra película. Sólo cuando haga falta ver la imagen y se acceda al fotograma que realice esta llamada, se cargará la imagen y se podrá ver en la película. La cargamos en el nivel 0.

Si tuviéramos la imagen en una carpeta llamada "Imágenes" que se encuentra dentro de nuestro directorio raíz, podríamos acceder a ella del siguiente modo:

loadMovieNum("Imagenes/mifoto.jpeg", 0);

Es conveniente remarcar también, que la imagen debe estar en formato .JPEG, no sirve el formato .JPG.

La siguiente acción debe incluirse dentro de un botón, pues sucederá al hacer clic sobre él (de este modo el ejemplo es más práctico).

on (release) {

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

La primera línea es la comentada anteriormente

La segunda línea es la acción que se producirá. Flash busca un objeto llamado r1 de tipo clip de película (movieclip) y mueve su cabeza lectora hasta el fotograma 2. La cabeza lectora de la película principal es completamente INDEPENDIENTE de la cabeza lectora de los clips de película y no se verá alterada.

ActionScript 3

import flash.events.*;

miBoton.addEventListener(MouseEvent.CLICK, miFuncion);

 

function miFuncion(event:MouseEvent):void

{

r1.gotoAndPlay(2);

}

Ejemplos de manejo de Sonidos con ActionScript

Aunque la idea de objeto no suele llevarnos a pensar en un sonido, en Flash CS3 los sonidos también son objetos y podemos manejarlos usando adecuadamente ActionScript. Veamos unos cuántos códigos muy comunes y un completo ejemplo de cómo usarlos:

/* Código 1 */

musica = new Sound();

musica.loadSound("sonido.mp3",false);

Estas 2 líneas cargan un sonido y le dan nombre.

La primera línea le dice a Flash que vamos a crear un nuevo objeto de tipo Sonido y que se va a llamar "musica".

La segunda línea carga un sonido de nuestro disco duro llamado "sonido.mp3" y lo carga dentro del objeto musica. El segundo parámetro "false" indica que es un sonido de "evento", y que, por tanto, se cargará completamente antes de comenzar a reproducirse.

 

/* Código 2 */

musica.stop();

Este código detiene el sonido "musica" al instante.

 

/* Código 3 */

musica.stop();

musica.start(0,99);

La primera línea como ya hemos visto, detiene el sonido "musica".

La segunda línea provoca que el sonido "musica" comience a reproducirse (start) 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)

 

/* Código 4 */

musica.stop();

musica.start(0,0);

Este código detiene el sonido "musica" y a continuación lo reinicia, reproduciéndolo sólo 1 vez.

Ahora que ya sabemos controlar los sonidos mediante ActionScript, veamos un ejemplo que reune todo lo visto anteriormente.

En este ejemplo:

- Tenemos un único fotograma con 3 botones. En este fotograma tenemos insertado el Código 1.

- Los 3 botones tienen distintas funcionalidades:

- En el botón rojo, está insertado el Código 2

- En el botón azul, está insertado el Código 3

- En el botón verde, está insertado el Código 4

 

Ejemplos de ActionScript en objetos abstractos. El objeto MATH

Como ya sabemos, los objetos no visibles también se controlan con ActionScript. Vamos a ver algunos ejemplos del funcionamiento del objeto Math y como sacarle partido.

x = Math.random();

El Método "random" del objeto Math genera un número aleatorio entre 0 y 1. En este caso, el resultado lo almacenamos en la variable x, para poder usarlo después...

Las utilidades de este métodos son muchas, generar claves secretas, passwords, números de loteria etc...

 

x = Math.round(4,3);

El Método "round" REDONDEA el parámetro introducido eliminando la parte decimal del mismo.

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 no tenemos porqué implementar. Basta buscarlos en el manual y usarlos.

 

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 insertaremos 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 esplicar el código que escribamos y para eso lo usaremos a continuación. Les cambiaremos el color para que resalten aún más. Evidentemente no son necesarios en el código que finalmente insertemos en nuestra película.

Este es el código que insertaremos:

-----------------------------------------------------------------------------

/* Fotograma 1 */

bytes_totales = getBytesTotal();   /* Hallamos el tamaño de nuestra película con la Acción "getBytesTotal()" y lo almacenamos en la variable bytes_totales. */

-----------------------------------------------------------------------------

/* Fotograma 2 */

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

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 = Math.floor(porcentaje)+"%";   /* Almacenamos en la variable "txt_salida" el porcentaje que llevamos junto al símbolo "%". En la película principal tendremos un campo de texto dinámico llamado "txt_salida" que nos mostrará el porcentaje de película que llevamos cargado en cada instante */

}

-----------------------------------------------------------------------------

/* Fotograma 3 */

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

A la derecha mostramos el resultado. La película se comenzará a cargar al pulsar el botón. El código insertado es EXACTAMENTE 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é de vuestro ordenador o que esteis viendo este curso desde el CD-Rom o desde vuestro propio Disco Duro, donde la velocidad de descarga estan rápida que sería necesaria una película de varios MBytes para que hiciera falta un cargador.

Probad el código en una película que coloqueis en un servidor web y podreis ver los resultados sin problemas.

Podeis poner a prueba vuestros conocimientos realizando la:

  Prueba evaluativa del Tema 18.

Unidad 19. Flash. Navegación (I).

En este tema veremos los puntos más importantes en los que te podrás apoyar para realizar tus animaciones en Flash usando ActionScript.

Esta unidad, la de Navegación, está especialmente orientada a la web, pues veremos cómo crear elementos que te ayudarán más tarde a crear tus propias presentaciones, secciones, etc. Todo ello apoyado con animaciones y vinculadas entre sí.

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

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, con el botón seleccionado, 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é estímulo (o evento) responderá el botón. Existen varios eventos que son capturados en Flash, nombraremos los más importantes:

press: ejecuta la acción al presionarse el botón.

release: ejecuta la acción al soltarse el botón (después de haberlo presionado). rollOver: ejecuta la acción al desplazar el ratón dentro del botón. rollOut: ejecuta la acción al desplazar el ratón fuera del botón.

 

Por ello, escribiremos en el panel acciones el siguiente código para nuestros botones:

on (release) {

}

 

Nota: ActionScript diferencia entre mayúsculas y minúsculas, por lo que si escribes, por ejemplo, Release no será reconocido.

 

Entre las llaves {} introduciremos el código que queremos que se ejecute al producirse el evento seleccionado sobre el botón.

Existen más manejadores de eventos que puedes revisar en este tema avanzado.

 

ActionScript 3

import flash.events.*;

miBoton.addEventListener(MouseEvent.CLICK, miFuncion);

 

function miFuncion(event:MouseEvent):void

{

}

Controladores de la línea de tiempo

Una vez insertados los botones y definidos los eventos sobre los que deben actuar, tendremos que decidir qué queremos que hagan.

De esta forma podremos crear dinamismo entre nuestras secciones.

Imagina que tenemos la siguiente línea de tiempo:

 

 

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

De esta forma, si no aplicásemos ninguna acción sobre la línea de tiempo, todas las secciones se ejecutarían una seguida de la otra. Lo que queremos conseguir es que se ejecute la primera (para mostrar la sección principal) y el cabezal se pare hasta nueva orden (para mostrar la segunda).

Para ello utilizaremos la función stop().

Esta función sirve para parar el cabezal de la línea de tiempo donde sea colocada. Así que seleccionamos el último fotograma de la sección y abrimos el Panel Acciones.

Allí deberemos escribir únicamente la línea:

stop();

Esto hará que cuando la animación llegue a ese punto se detendrá a 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 donde habíamos escrito:

on (release) {

}

Para que se pueda leer lo siguiente:

on (release) {

gotoAndPlay(21);

}

De esta forma, al hacer clic sobre ese botón, el cabezal de reproducción se desplazará hasta el fotograma 21 y reproducirá a partir de allí.

ActionScript 3

import flash.events.*;

miBoton.addEventListener(MouseEvent.CLICK, miFuncion);

 

function miFuncion(event:MouseEvent):void

{

gotoAndPlay(21);

}

 

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:

 

        

Por ejemplo:

on (release) {

gotoAndPlay("encuentranos");

}

 

ActionScript 3

import flash.events.*;

miBoton.addEventListener(MouseEvent.CLICK, miFuncion);

 

function miFuncion(event:MouseEvent):void

{

gotoAndPlay("encuentranos");

}

 

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.

Es posible el uso del Panel Comportamiento para crear saltos a fotogramas de forma sencilla y sin tener que escribir ninguna línea de código, para ver cómo se hace visita este

tema básico.

 

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.

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:

on (release) {

gotoAndPlay("escena_otros", 1);

}

ActionScript 3

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?

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. El código que deberemos escribir en el botón será el siguiente:

on (release) {

miClip.gotoAndPlay(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á.

ActionScript 3

import flash.events.*;

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:

on (release) {

miClip._visible = false;

}

ActionScript 3

import flash.events.*;

miBoton.addEventListener(MouseEvent.CLICK, miFuncion);

 

function miFuncion(event:MouseEvent):void

{

miClip._visible = false;

}

 

Para hacerlo un poco más complicado podríamos encontrarnos en el siguiente supuesto. Imagina que tenemos un movieclip llamado clipPadre. Dentro de este clip de película tendremos más símbolos y uno de ellos puede ser otro movieclip llamado clipHijo.

¿Cómo accedemos a las propiedades y funciones de clipHijo? Muy fácil. Suponiendo que estamos trabajando desde la película principal donde tenemos insertado el clipPadre, escribiremos lo siguiente:

clipPadre.clipHijo.play();

Así haremos que la reproducción de clipHijo se reaunde.

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:

on (release) {

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 palabra reservada _parent. De este modo si nos encontrásemos dentro de clipHijo y quisiésemos avanzar al fotograma 20 de clipPadre deberíamos escribir:

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.

 

Por lo demás, el funcionamiento de un clip no se diferencia en nada a la línea de tiempos de cualquier otra película. Podemos etiquetar los fotogramas de igual modo para llamarlos directamente por su nombre:

miClip.gotoAndStop("etiqueta");

Y saltar de fotograma a fotograma para manejar las animaciones de la forma en que nosotros queramos.

 

Igual que vimos antes con los botones, los movieclips tienen manejadores que nos permitirán ejecutar código dependiendo de los eventos que se produzcan sobre ellos.

Los que más utilizaremos serán:

mouseMove: se ejecuta cuando el ratón se mueve sobre el fotograma. Puedes utilizar las propiedades _xmouse e _ymouse para averiguar la posición del ratón en ese momento.

mouseDown: se ejecuta cuando se presiona el botón del ratón. mouseUp: se ejecuta cuando se suelta el botón del ratón. keyDown: se ejecuta cuando se presiona una tecla. keyUp: se ejecuta cuando se suelta una tecla.

Estos manejadores de eventos se deben de utilizar con el controlador onClipEvent. Veamos un ejemplo:

onClipEvent (mouseUp) {

this._visible = true;

}

Este bloque de código debe situarse en las acciones del movieclip (igual que hacemos con los botones). Es por ello que al referirnos a la propiedad _visible escribimos antes this para referenciar el clip en cuestion.

this siempre hará referencia al objeto donde se encuentre la variable.

Nota: Estos manejadores son tan válidos para movieclips como para la película general en sí, pues podríamos considerar que una película es un movieclip más grande.

 

También existen modos de capturar estos eventos sin tener que escribir el código dentro del movieclip.

Sería de la siguiente forma:

miClip.onPress = function() {

miClip.play();

}

Estos eventos tienen que asociarse con una función (veremos este concepto en el punto siguiente). Pero de esta forma podemos escribir el código directamente sobre el fotograma y controlar cuando se ejecuta una acción sobre el movieclip.

En el ejemplo, el clip comenzará a reproducirse en cuanto se haga clic sobre él.

Veamos el conjunto de eventos más importantes para los movieclips:

onPress = function() {}: se ejecuta cuando se presiona el botón del ratón sobre el movieclip.

onRelease = function() {}: se ejecuta cuando se suelta el botón del ratón sobre el movieclip. onRollOver = function() {}: se ejecuta cuando se desplaza el ratón dentro del movieclip. onRollOut = function() {}: se ejecuta cuando se desplaza el ratón fuera del movieclip. onKeyDown = function() {}: se ejecuta cuando se presiona una tecla con el clip de película

resaltado. onKeyUp = function() {}: se ejecuta cuando se suelta una tecla con el clip de película resaltado.

Obviamente, existen muchos más eventos que podrás aprender en este tema avanzado.

 

Veamos el ejemplo:

Si observas tenemos dos movieclips en la película, uno de ellos llamado estrella, y el otro detalle. La línea de tiempo de estos movieclips tendría este aspecto:

Como puedes ver tenemos una cuarta capa que se llama acciones. Allí colocaremos las acciones que se asociarán a este fotograma:

estrella.onPress = function() {

estrella.gotoAndPlay("desaparece");

detalle.gotoAndPlay("aparece");

}

ActionScript 3

import flash.events.*;

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:

detalle.onPress = function() {

estrella.gotoAndPlay("aparece");

detalle.gotoAndPlay("desaparece");

}

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.

ActionScript 3

import flash.events.*;

detalle.addEventListener(MouseEvent.CLICK, funcion_aparece);

 

function funcion_aparece(event:MouseEvent):void

{

estrella.gotoAndPlay("aparece");

detalle.gotoAndPlay("desaparece");

}

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 8 tipos diferentes de variables, los que más utilizaremos serán los siguientes:

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

 

Para declarar (crear) una variable sólo tendrás que escribir la siguiente línea:

var nombreVariable:tipoVariable = valorVariable;

Veamos el ejemplo para verlo más claro. Haremos que el clic sobre el movieclip estrella sólo se ejecute si el detalle no está aún mostrado.

Y al revés. Que sólo se ejecute el código al hacer clic en el detalle si éste se encuentra fuera.

var estrella_activada:Boolean = true;

estrella.onPress = function() {

if (estrella_activada == true) {

estrella.gotoAndPlay("desaparece");

detalle.gotoAndPlay("aparece");

estrella_activada = false;

}

}

detalle.onPress = function() {

if (estrella_activada == false) {

estrella.gotoAndPlay("aparece");

detalle.gotoAndPlay("desaparece");

estrella_activada = true;

}

}

Fíjate en las dos primeras líneas, se declaran dos variables booleanas. Una dice que la estrella se encuentra activada y la otra que el detalle se encuentra desactivado.

ActionScript 3

import flash.events.*;

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 onPress 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. Puedes abrir este panel desde Ventana → Salida.

 

Exiten 3 ámbitos de variables: el local, el global y el de línea de tiempo.

 

Las variables declaradas en la línea de tiempo pueden utilizarse en cualquier fotograma posterior y su contenido se mantendrá intacto.

Por ejemplo, declaramos la siguiente variable en el fotograma 1:

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

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

trace(miVariable);

stop();

Verás como al probar la película en el Panel de Salida aparece escrito el contenido de la variable.

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:

function miFuncion() {

var miVariable:Number = 1;

trace(miVariable);

miVariable = 2;

trace(miVariable);

}

miFuncion();

trace(miVariable);

En el primer bloque definimos una función (hablaremos de ellas más a fondo en el siguiente apartado).

En esta función se declara una variable y se envía su contenido al Panel Salida. Luego modificamos el contenido de la variable y volvemos a enviar el contenido a Salida.

Observa que después llamamos a la función, esto hará que se ejecute su código, por lo que en el Panel Salida se mostrará 1 y 2.

Luego intentamos enviar el contenido de la variable a Salida y el resultado que obtenemos es undefined. Esto es porque la variable no está definida, pues solamente la habíamos declarado para el bloque de la función.

Utilizando las variables de esta forma sólo podremos acceder a ellas desde el bloque de función donde están declaradas. Una vez fuera de éste las variables dejan de existir.

 

Las variables de ámbito global son mucho más flexibles, están disponibles en cualquier fotograma y función.

Su modo de declaración es la siguiente:

_global.miVariable = "Esta es una variable global";

Podrás acceder a ella en cualquier momento.

Las variables globales no tienen tipo, y pueden tomar cualquier valor.

Nota: Si en algún sitio declaras una variable local con el mismo nombre que una variable global existente no podrás utilizar la global durante todo el ámbito en el que exista la local.

 

Comentaremos también la existencia de las variables de tipo matriz (o array). Éstas pueden almacenar diferentes variables en un solo objeto.

Veamos un ejemplo para verlo más claro:

var miMatriz:Array = new Array();

miMatriz[0] = "Lunes";

miMatriz[1] = "Martes";

miMatriz[2] = "Miércoles";

miMatriz[3] = "Jueves";

miMatriz[4] = "Viernes";

miMatriz[5] = "Sábado";

miMatriz[6] = "Domingo";

Así si escribimos:

Trace(miMatriz[5]);

Se mandará al Panel Salida el elemento 5 del array miMatriz en este caso Sábado.

Los arrays empiezan por 0, así que es conveniente que te acostumbres a rellenar la matriz a partir de este elemento. Verás que con el tiempo te ayudará a realizar algunas funciones.

Otras formas de declarar arrays son las siguientes:

var matriz2:Array = new Array("Lunes","Martes","Miércoles","Jueves","Viernes","Sábado","Domingo");

o

var matriz3:Array= ["Lunes","Martes","Miércoles","Jueves","Viernes","Sábado","Domingo"];

Puedes ver un ejemplo práctico de los arrays en este apartado básico.

 

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 SWF con sólo llamarla:

function miFuncion() {

var miVariable:Number = 1;

trace(miVariable);

}

En este ejemplo hemos creado una función que envía el contenido de la variable miVariable al Panel Salida.

Podemos escribir la siguiente línea en cualquier momento despué de haber pasado la función y esta se ejecutará:

miFuncion();

 

Como ves, crear funciones es bastante sencillo. Además podemos crear funciones un poco más complejas enviándole parámetros:

function enviaSalida(miVariable:String) {

trace(miVariable);

}

Si en cualquier momento escribimos:

enviaSalida("Hola!");

Se mostrará el mensaje en el Panel Salida.

El modo de crear funciones con parámetros es bastante intuitivo. Al crear la función deberás indicar que tipo de variable le vas a enviar. En nuestro ejemplo hemos definido el parámetro como de tipo String.

De este modo podrás utilizar la variable miVariable dentro de la función y trabajar con ella como quieras.

Para llamar a la función sólo deberás escribir su nombre y indicarle el parámetro que le quieres enviar.

Puedes crear funciones con más de un parámetro, para ello sólo tendrás que separar éstos por comas:

function miFuncion(parametro1:String, parametro2:Number, parametro3:Boolean) {

// código

}

miFuncion("hola", 2, false);

Cargando Archivos

Una vez vistos todos estos conceptos pasaremos a ver una función en concreto, la función LoadMovie.

Esta función te permite 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.

Su uso es el siguiente:

miMovieClip.loadMovie("pelis/clip.swf");

Con esto lo que hemos hecho es cambiar el contenido del clip miMovieClip y lo hemos sustituido por el archivo clip.swf que se encontraba en la carpeta pelis. Es sencillo, ¿verdad?

 

También puedes utilizarla de esta forma:

loadMovie("archivo.swf", miMovieClip);

Es una variación de la anterior, aquí indicamos qué archivo queremos cargar y dónde. Si en vez de cargarlo en miMovieClip lo cargasemos en this se cargaría en el clip en el que está contenida la función. Incluso si éste es el clip de película principal.

 

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 en el botón es sencillo:

on (release) {

loadMovie("mapa.swf", this);

}

Los parámetros que le hemos pasado son el nombre de la película a cargar y su destino (this, el propio clip donde estaba el botón).

Una línea equivalente hubiese sido esta:

this.loadMovie("mapa.swf");

 

Para descargar archivos cargados con la función loadMovie utiliza unloadMovie.

Esto nos servirá para liberar a un movieclip de la película o imagen que habíamos cargado, dejándolo vacío.

Su sintaxis es la siguiente:

miClip.unloadMovie();

o

unloadMovie(miClip);

 

Existe la posibilidad de cargar archivos de otra manera, en vez de indicando su destino indicaremos su nivel. Esto es, vamos a cargar varios archivos en un mismo sitio y los dispondremos uno encima de otro, de forma que los que se encuentren en capas superiores taparán a los de abajo.

Para ello deberemos utilizar la función loadMovieNum:

loadMovieNum("primera.swf", 0);loadMovieNum("segunda.swf", 1);loadMovieNum("tercera.swf", 2);

En este ejemplo hemos cargado 3 archivos SWF en el mismo sitio. Los tres estarán disponibles a la vez, pero la película tercera.swf será la que se encuentre en el nivel superior.

Como puedes ver, al no poder indicarse un destino, deberás introducir esta función dentro del clip que quieres modificar. Si fuese escrita en el código del fotograma actuaría directamente sobre la película principal.

Nota: Las películas cargadas en el nivel 0 serán las que establezcan la velocidad y tamaño de fotogramas y su color de fondo para el resto de los fotogramas añadidos en niveles superiores.

 

Podemos referirnos a películas cargadas en diferentes niveles y modificar sus propiedades utilizando la sintaxis:

_level1._visible = true;

E incluso llamar a objetos contenidos en esas películas añadiendo, simplemente, el nombre de instancia de éste:

_level1.miClip._visible = true;

Sigue el siguiente ejercicio paso a paso para ver cómo hacer una Película con Niveles

 

Podemos descargar películas cargadas con la función loadMovieNum utilizando unloadMovieNum:

unloadMovieNum(2);

En esta función sólo debemos indicar el nivel donde está situada la película que queremos descargar y cada más.

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.

Si creamos una película con varías escenas se almacenarán todas en un solo archivo, y el usuario tendrá que descargarse el archivo entero para poder ver aunque sea una parte mínima de la película.

Utilizando estas funciones podemos optimizar el tiempo de descarga, pues de este modo el usuario sólo se descargará los archivos que desee visualizar.

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:

Observa la línea de tiempos:

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 el botón al que le hemos añadido el siguiente código:

on (release) {

gotoAndPlay (2);

}

Para que pase al fotograma dos y comience la transición. Igualmente hemos añadido un stop() en el fotograma 11 para que se detenga la transición y espere a que se pulse de nuevo el botón y vuelva al fotograma 2.

La transición es muy sencilla. En la capa diapositivas hemos añadido un clip de película llamado contenedor del tamaño de la película, que será donde carguemos las imágenes con la función loadMovie, 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.

Mientras en el fotograma 6 añadiremos el código que hará que se cargue la imagen en contenedor y se actualicen los campos de textos descripcion_txt y titulo_txt incluidos en la capa area_texto en un clip llamado textoDiapositiva.

 

Ahora que conocemos el funcionamiento veamos el código que hemos añadido en los fotogramas 1 y 6.

Fotograma 1:

stop();

var archivo:String = "diapositivas.txt";

var total:Number = 4;

var imagenActual:Number = 1;

var matrizImagenes:Array = ["imagenes/imagen1.jpg", "imagenes/imagen2.jpg", "imagenes/imagen3.jpg", "imagenes/imagen4.jpg"];

// cargador del archivo .txt

var cargador:LoadVars = new LoadVars();

cargador.onLoad = function(exito:Boolean) {

if (exito) {

textoDiapositiva.descripcion_txt.text = eval("cargador.descripcion" + imagenActual); //recupera la descripción

textoDiapositiva.titulo_txt.text = eval("cargador.titulo" + imagenActual); //recupera el título

}

else {

textoDiapositiva.descripcion_txt.text = "No se ha podido cargar el texto";

textoDiapositiva.titulo_txt.text = "Error";

}

}

cargador.load(archivo); //carga del texto

loadMovie(matrizImagenes[imagenActual-1], contenedor); //carga de la imagen

En las primeras líneas definimos las variables que vamos a utilizar.

En la variable archivo introducimos la ruta del archivo de tipo txt de donde sacaremos el texto asociado a las imágenes.

La variable total almacena el número total de imágenes que vamos a mostrar. La variable imagenActual almacenará el número de la imagen que vamos a mostrar, la

inicializamos a 1 para mostrar primero la primera imagen. La variable matrizImagenes es una variable de tipo array y almacenará las rutas de las

imágenes que vamos a mostrar.

 

Ahora declararemos el cargador que sacará la información del archivo txt y lo pasará a las cajas de texto.

Para ello utilizaremos el objeto LoadVars, este objeto permite enviar o recoger variables en forma de URL.

Expliquemos esto. El objeto LoadVars es capaz de recoger una cadena de texto en forma de URL como la siguiente:

var1=valor&var2=valor&var3=valor&var4=valor

Y sacar de allí las variables y sus valores.

 

La forma en la que lo hace es sencilla, a cada símbolo & que encuentre entenderá que lo siguiente que encuentre será el nombre de una variable (igualada a su valor).

De esta forma escribiremos en el archivo de texto diapositivas.txt lo siguiente:

titulo1=Los mejores sandwiches

&descripcion1=En sa cuina creamos los sandwiches mas originales y sabrosos de toda la ciudad.

&titulo2=Calidad Superior

&descripcion2=Nos cuidamos siempre de que nuestros platos ofrezcan la maxima 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.

De esta forma cuando el objeto LoadVars cargue el archivo verá que hay 8 variables, y cada una de ellas con su respectivo valor.

 

Veamos, pues, cómo leer y manejar estas variables.

Para declarar el objeto sólo hace falta escribir:

var cargador:LoadVars = new LoadVars();

Una vez declarado el objeto podemos trabajar con él.

Lo primero que haremos será establecer unas cuantas líneas que se ejecutarán cada vez que intentemos cargar el archivo. Para ello aprovechamos el método onLoad del objeto:

cargador.onLoad = function(exito:Boolean) {

if (exito) {

textoDiapositiva.descripcion_txt.text = eval("cargador.descripcion" + imagenActual); //recupera la descripción

textoDiapositiva.titulo_txt.text = eval("cargador.titulo" + imagenActual); //recupera el título

}

else {

textoDiapositiva.descripcion_txt.text = "No se ha podido cargar el texto";

textoDiapositiva.titulo_txt.text = "Error";

}

}

Al invocar el método onLoad nos devolverá un valor (que nosotros hemos llamado exito). Esta variable de tipo booleano puede tomar dos valores, verdadero o falso.

Por tanto, si la carga se efectúa correctamente el valor de exito será true, y false si no pudo cargar el archivo.

Por ello el código que se ejecuta al cargar el archivo evalúa si la carga se realizó con éxito.

if (exito) {

}

else {

}

Si se pudo cargar, recuperamos las variables del archivo. Tendremos que acceder a ellas a través del cargador. cargador.titulo1 nos dará el valor de la variable titulo1.

Pero debemos de recuperar la variable correspondiente a la imagen que se está mostrando, ¿cómo lo hacemos? Muy sencillo, deberemos construir el nombre de la variable a recuperar.

Para el titulo el nombre de la variable es titulo más el número de la imagen que se muestra. Por lo que nos quedaría titulo+imagenActual. Pero, claro, no podemos escribir:

cargador.titulo+imagenActual //esto no es correcto

Para poder hacerlo deberemos utilizar la función eval(), que construirá el nombre y luego lo recuperará:

eval("cargador.titulo"+imagenActual)

Una vez hemos averiguado cómo sacar la variable la adjudicamos al campo de texto:

textoDiapositiva.titulo_txt.text = eval("cargador.titulo" + imagenActual);

Y hacemos lo mismo para la descripción:

textoDiapositiva.descripcion_txt.text = eval("cargador.descripcion" + imagenActual);

 

En principio habremos terminado. Optimizaremos el funcionamiento mostrando mensajes de error si el archivo no se pudo cargar:

textoDiapositiva.titulo_txt.text = "Error";

textoDiapositiva.descripcion_txt.text = "No se ha podido cargar el texto";

 

Cerramos todas las llaves y el evaluador de la carga onLoad ya estará preparado.

Ahora cada vez que intentemos cargar algún archivo con cargador se ejecutará todo este código, y si la carga se efectuó de forma correcta se asignarán las variables correspondientes a las cajas de texto.

Para cargar un archivo solo tendremos que escribir:

cargador.load(archivo);

Y como en la variable archivo habíamos guardado la ruta del txt donde están las variables necesarias habremos terminado.

 

Como puedes ver las últimas líneas que se ejecutan son:

cargador.load(archivo);

loadMovie(matrizImagenes[imagenActual-1], contenedor);

Que cargarán por primera vez la imagen1 y el texto correspondiente.

En el cargador deberemos decir que cargue el contenido del array matrizImagenes de la imagen correspondiente. Pero como las matrices empiezan por 0 la ruta de la primera imagen estará almacenada en matrizImagenes[0].

Es por esto que al cargar la imagen la ruta que damos es:

matrizImagenes[imagenActual-1]

 

Ahora veremos que hemos escrito en el fotograma 6 para que se carguen las imágenes y texto que correspondan:

if (imagenActual >= total) {

imagenActual = 1;

}

else {

imagenActual++;

}

cargador.load(archivo); //carga del texto

loadMovie(matrizImagenes[imagenActual-1], contenedor); //carga de la imagen

Este código se ejecuta en el momento en el que el contenedor tiene la propiedad Alfa al 0% por lo que es totalmente invisible. Aprovecharemos este momento para cambiar la imagen y el texto.

 

Lo primero que evaluamos es si la imagenActual es mayor o igual que el número total de imágenes. Si no lo es aumentamos el valor de imagenActual en 1:

imagenActual++;

En el caso contrario (que imagenActual fuera mayor o igual al total de imágenes) significaría que si aumentamos el valor de imagenActual en 1 nos pasaríamos y no exitiría ni imagen ni texto para esa posición, por lo que iniciamos de nuevo el contador a 1 para que vuelva a empezar.

Esta condición hará el efecto de que cuando se vea la última imagen y se pulse siguiente se visualice de nuevo la primera.

Una vez actualizada la variable imagenActual pasamos a cargar la imagen:

loadMovie(matrizImagenes[imagenActual-1], contenedor);

Y a actualizar el texto utilizando el cargador:

cargador.load(archivo);

  Ejercicios del Tema 19   Prueba evaluativa del Tema 19.

Unidad 20. ActionScript - Formularios (I).

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 como utilizarlos y a 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 hayas añadido el componente a tu película deberás darle un nombre de instancia para poder acceder a él en el código y configurar sus opciones en el Panel Parámetros:

Veamos cuales son las opciones para los diferentes componentes:

TextInput (Introducción de texto):

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

password: true o false. Oculta el contenido del texto mostrándose un asterisco por carácter. text: Indica el texto inicial de la caja.

TextArea (Área de texto):

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

html: true o false. Permite que se acepte contenido HTML dentro de la caja de texto. Propiedad muy útil para incluir enlaces en el texto.

text: Idica el texto inicial de la caja. wordWrap: true o false. Permite que se pueda realizar un desplazamiento del texto de arriba

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

Button (Botón):

icon: Añade un icono al botón. Para insertar un icono deberás crear un gráfico o clip de película y guardarlo en la Biblioteca. Una vez allí selecciónalo y haz clic derecho sobre él y selecciona Vinculación. Marca la casilla Exportar para ActionScript en el cuadro de diálogo que aparecerá y dale un nombre en Identificador. Este nombre es el que deberás 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 deberás modificar sus tamaños para que el icono no sobresalga del botón.

label: Texto que se leerá en el botón. labelPlacement: left, right, top o bottom. Indica la posición de la etiqueta de texto en caso de

que se utilice junto a un icono. Respectivamente, izquierda, derecha, arriba y abajo. selected: true o false. Indica si el botón se encuentra seleccionado. toggle: true o false. Cuando se encuentra a true hace que el botón pueda tomar dos posiciones,

presionado y no presionado.

RadioButton (Botón de opción):

data: Especifica los datos que se asociarán al RadioButton. La propiedad data puede ser cualquier tipo de datos. Puedes acceder a esta propiedad a través de código para ver que contiene.

groupName: Nombre del grupo. En un grupo de botones de opción sólo uno de ello puede estar seleccionado. Definiremos este grupo mediante esta propiedad. Todos los botones que tengan el mismo nombre en groupName pertenecerán al mismo grupo.

label: Texto que se leerá al lado del botón. labelPlacement: left, right, top o bottom. Indica la posición de la etiqueta de texto respecto al

botón. Respectivamente, izquierda, derecha, arriba y abajo. selected: true o false. Indica si el botón se haya seleccionado o no. De nuevo, en un mismo

grupo sólo un botón de opción puede estar seleccionado.

CheckBox (Casilla de verificación):

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

labelPlacement: left, right, top o bottom. Indica la posición de la etiqueta de texto respecto a la casilla. Respectivamente, izquierda, derecha, arriba y abajo.

selected: true o false. Indica si la casilla de verificación se haya seleccionada.

ComboBox (Lista desplegable):

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

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

labels: Matriz donde determinaremos el nombre de los elementos de la lista. Estos elementos se corresponderán uno a uno a los valores de la matriz introducida en data. Para ambas propiedades se abrirá el siguiente cuadro de diálogo:

Desde aquí podrás añadir o quitar elementos utilizando los botones y . O alterar el orden

de éstos subiéndolos o bajándolos en la lista con los botones y .

rowCount: Número máximo de elementos visibles en la lista. Si este número es superado por los elementos se añadirá una barra de desplazamiento.

List (Lista):

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

labels: Matriz donde determinaremos el nombre de los elementos de la lista. Estos elementos se corresponderán uno a uno a los valores de la matriz introducida en data. Para ambas propiedades se abrirá el mismo cuadro de diálogo visto para el ComboBox.

multipleSelection: true o false. Permite la selección múltiple de elementos manteniendo la tecla Ctrl presionada. También es posible seleccionar un rango de elementos seleccionando uno de ellos y pulsando la tecla Shift mientras seleccionamos otro diferente, todos los elementos intermedios resultarán también seleccionados.

rowHeight: Número máximo de filas visibles en la lista. Si este número es superado por los elementos se añadirá una barra de desplazamiento.

NumericStepper (Contador numérico):

maximum: Establece el número máximo del contador.

minimum: Establece el número mínimo del contador. stepSize: Establece el intervalo en el que se aumenta o disminuye el número del campo al

pulsar los botones del componente. value: Valor inicial del campo.

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

miBoton.label = "Haz clic aquí";

El componente Alert

El componente Alert es muy útil pero se utiliza de forma diferente al resto de los anteriores.

Este elemento nos permitirá el uso de avisos en forma de pop-ups. Para utilizarlo deberás seleccionarlo en el Panel Componentes y arrastrarlo hasta la Biblioteca.

No lo arrastres sobre el escenario, pues no es necesario. Con que se halle presente en nuestra biblioteca podremos realizar llamadas al componente. Para ello sólo deberemos escribir:

Import mx.controls.Alert;

Alert.show("mensaje");

La primera línea la insertamos para poder utilizar el componente y acceder a él mediante el código. Luego, en el momento en el que la ejecución llegue a la segunda línea saltará un pop-up con el texto que se incluya en mensaje.

 

Hay que tener cuidado con este método, pues mientras en otros lenguajes de programación las alertas detienen la ejecución del código a espera de la aceptación del mensaje, ActionScript sigue ejecutando el resto de líneas.

Podremos añadir detectores para que se evalúen las acciones realizadas sobre la alerta utilizando manejadores de eventos. En seguida veremos cómo.

También es posible configurar la alerta de muchas formas. La sintaxis completa del objeto es la siguiente:

Alert.show(mensaje, titulo, botones, padre, manejador, icono, botonDefecto);

mensaje: El texto del mensaje.

titulo: Título del aviso. botones: Botones que tendrá el aviso. Puedes poner más de dos, en ese caso deberás

separarlos por el símbolo "|". Los botones que puedes añadir son: Alert.OK, Alert.CANCEL, Alert.YES y Alert.NO. Podemos añadir también Alert.NONMODAL para hacer que el mensaje de alerta no bloquee el resto de la película, y así, aunque el mensaje se muestre, podamos seguir interactuando con el resto de la ventana.

padre: Determina el movieclip sobre el que se abrirá la alerta centrándose respecto a él. Para referenciar a la película principal (_root) escribe null o undefined.

manejador: El nombre del manejador que se encargará de gestionar el clic sobre la alerta. icono: El nombre del icono que queremos que aparezca a la izquierda del mensaje. Para incluir

un icono deberemos vincularlo. Para ello haz clic derecho sobre el gráfico o clip de película en la Biblioteca y selecciona Vinculación. Luego marca la casilla Exportar para ActionScript y dale un nombre de Identificador. Será a éste al que deberás referenciar en el Alert.show().

botonDefecto: Determina el botón por defecto de la alerta. Utiliza la misma notación que antes: Alert.OK, Alert.CANCEL, Alert.YES y Alert.NO. Se activará este botón cuando se pulsa la tecla Intro.

Un ejemplo de manejador y alerta sería esta:

import mx.controls.Alert;

var miManejador:Function = function (miEvento:Object) {

if (miEvento.detail == Alert.OK) {

// acciones

}

else if (miEvento.detail == Alert.CANCEL) {

// acciones

}

}

Alert.show("Mensaje de alerta.", "Título", Alert.OK | Alert.CANCEL, null, miManejador, "icono", Alert.OK);

Nota: Observa como se han manejado las respuestas de la alerta.

 

Cuando utilices este método para escribir los mensajes de alerta deberás tener en cuenta que tienes que escribir todas las propiedades en orden y sin saltarte ninguna.

Aunque puedes no escribir algunas, deberás hacerlo de esta forma:

Alert.show("Mensaje de alerta.", "Título", Alert.OK | Alert.CANCEL, null, miManejador, "icono", Alert.OK);

o

Alert.show("Mensaje de alerta.", "Título", Alert.OK | Alert.CANCEL, null, miManejador, "icono");

o

Alert.show("Mensaje de alerta.", "Título", Alert.OK | Alert.CANCEL, null, miManejador);

o

Alert.show("Mensaje de alerta.", "Título", Alert.OK | Alert.CANCEL, null);

o

Alert.show("Mensaje de alerta.", "Título", Alert.OK | Alert.CANCEL);

o

Alert.show("Mensaje de alerta.", "Título);

Botones de Formulario

En los formularios, normalmente, incluiremos dos botones: Enviar y Limpiar.

Imagina que llamamos al componente botón de limpiar reset_btn, su código asociado sería sencillo:

var escuchadorLimpiar:Object = new Object();

escuchadorLimpiar.click = function(evt:Object) {

campo1_txt.text = "";

campo2_txt.text = "";

campo3_txt.text = "";

}

reset_btn.addEventListener("click", escuchadorLimpiar);

Como puedes ver, hemos creado un escuchador para reset_btn. Cuando se activa simplemente vaciamos el contenido de los campos de texto que queramos.

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

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

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

mensaje_txt.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á enviar los datos, que será lo que veamos en el siguiente apartado.

Envío de formularios

A partir de ahora veremos cómo afrontar el envío y la recepción de datos con formularios.

Lo haremos a través de este ejemplo, donde encontraremos elementos de entrada (en los que tendremos que escribir datos para enviarlos) y de salida (donde tendremos que recoger datos de un archivo externo para mostrarlo).

El envío de datos de formulario lo realizaremos utilizando el objeto LoadVars que ya hemos visto. Pero en este caso, en vez de recabar información, lo usaremos para enviarla.

Su uso es el siguiente:

var escuchadorEnvia:Object = new Object();

escuchadorEnvia.click = function(evt:Object) {

var envio:LoadVars = new LoadVars();

// rellenamos las variables

envio.autor = nombre_txt.text;

envio.email = mail_txt.text;

envio.mensaje = mensaje_txt.text;

envio.onLoad = function(exito:Boolean) {

if (exito) {

nombre_txt.text = "";

mail_txt.text = "";

mensaje_txt.text = "";

}

else {

Alert.show("Ha habido un error en el envío");

}

}

// enviamos las variables al archivo PHP

envio.sendAndLoad("enviar_comentario.php", envio, "POST");

}

submit_btn.addEventListener("click", escuchadorEnvia);

Hemos definido un escuchador que se ejecutará cuando se pulse el botón de enviar.

 

Dentro del código de éste hemos declarado un objeto LoadVars llamado envio.

Almacenar las variables en el objeto es tan fácil como escribir lo siguiente:

envio.autor = nombre_txt.text;

envio.email = mail_txt.text;

envio.mensaje = mensaje_txt.text;

Y sólo quedaría enviarlo con el método send.

envio.send("enviar_comentario.php", "_blank", "POST");

Esta función envía las variables almacenadas en LoadVars utilizando el método especificado en el tercer parámetro (puede ser POST o GET).

Si quieres que el script que se ejecuta se abra en una ventana deberás indicarlo en el segundo parámetro.

Estas dos últimas funciones son opcionales y podríamos escribir solamente:

envio.send("enviar_comentario.php");

 

En el ejemplo no hemos utilizado el método send, sino el método sendAndLoad.

envio.sendAndLoad("enviar_comentario.php", envio, "POST");

De este modo podemos añadir un controlador onLoad para evaluar si el envío se realizó correctamente. En el segundo parámetro deberemos indicar cuál será el objeto que se cargará (en nuestro caso el mismo objeto envio).

Por lo que además de realizar el envío hemos añadido las líneas:

envio.onLoad = function(exito:Boolean) {

if (exito) {

nombre_txt.text = "";

mail_txt.text = "";

mensaje_txt.text = "";

}

else {

Alert.show("Ha habido un error en el envío");

}

}

Que vacía los campos si la carga del script se realizó correctamente o muestra una alerta en caso contrario.

 

Nosotros en el ejemplo hemos añadido algunos validadores para asegurar que todos los campos se han rellenado. Así, antes de declarar el objeto LoadVars hemos introducido unas cuantas condiciones del tipo:

if (nombre_txt.text.length == 0) {

Alert.show("Introduce tu nombre", "Error", Alert.OK);

return false;

}

Donde se evalúa la longitud del texto del campo nombre. Si llega a la línea return false; se saldrá de la función y no llegará a enviar los datos.

 

El script enviar_comentario.php se encargaría de recibir los datos, tratarlos y luego almacenarlos o enviarlos por correo.

Nosotros hemos almacenado la opción en un archivo XML desde donde recuperaremos la información cada cierto tiempo utilizando un bucle en la línea de tiempo.

Recuperando información

En puntos anteriores vimos cómo utilizar el objeto LoadVars para leer información de archivos externos. En este apartado veremos cómo recuperar información de un archivo XML.

Para ello y el primer paso será crear un objeto del tipo XML:

var comentarios:XML = new XML();

Hemos creado un objeto XML llamado comentarios. Ahora podremos utilizarlo para leer un archivo XML y tomar la información contenida en él.

 

Una propiedad muy útil del objeto XML es la de ignoreWhite, que ignorará aquellos campos que estén en blanco y así no tendremos que preocuparnos por posibles errores:

comentarios.ignoreWhite = true;

 

El groso del código que hemos añadido para cargar los datos es el siguiente:

comentarios.onLoad = function(exito:Boolean) {

if (exito) {

comentarios_txt.text = "";

var numeroEntradas = this.firstChild.childNodes.length;

// hacemos un bucle para recorrer todos los elementos del archivo XML

for (var i = numeroEntradas-1; i>=0; i--) {

// guardamos en la variable miXML la ruta del nodo

var miXML:XMLNode = this.firstChild.childNodes[i];

// guardamos el contenido del nodo

var autor:String = miXML.childNodes[0].firstChild.nodeValue;

var email:String = miXML.childNodes[1].firstChild.nodeValue;

var mensaje:String = miXML.childNodes[2].firstChild.nodeValue;

// creamos la variable cadenaFinal donde insertaremos el contenido html que tendrá salida en el cuadro de texto

var cadenaFinal:String;

// y cargamos el contenido del nodo en cadenaFinal

cadenaFinal = "<a href=\"mailto:"+email+"\">"+autor+"</a>: ";

cadenaFinal += "<span class=\"mensaje\">"+mensaje+"</span><br />";

// añadimos el contenido de cadenaFinal en la caja de texto

comentarios_txt.text += cadenaFinal;

// y repetimos el bucle

}

} else {

comentarios_txt.text = "No se pudieron cargar los datos";

}

}

comentarios.load("lee_comentarios.php");

 

Ahora explicaremos paso a paso qué hemos hecho.

Como puedes ver en la última línea cargamos un script php que genera un documento XML en el objeto comentarios.

Al cargarlo se ejecuta el controlador onLoad que está definido al principio.

Si la carga tuvo éxito, procedemos a coger la información del archivo XML generado. Lo primero que hacemos es vaciar el contenido del área de texto comentarios_txt.

comentarios_txt.text = "";

 

Luego pasamos a trabajar con el contenido del archivo XML.

Un archivo XML tiene la estructura muy similar a un archivo HTML, ya que también está basado en etiquetas. El contenido de nuestro archivo es algo parecido a esto:

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

<listadoComentarios>

<comentario>

<autor>josé</autor>

<email>jose@correo.com</email>

<mensaje>estoy escribiendo un mensaje</mensaje>

</comentario>

<comentario>

<autor>amparo</autor>

<email>amparo@correo.com</email>

<mensaje>este mensaje también se publicará</mensaje>

</comentario>

<comentario>

<autor>miguel</autor>

<email>miguel@correo.com</email>

<mensaje>mensaje de prueba</mensaje>

</comentario>

<comentario>

<autor>cristina</autor>

<email>cristina@correo.com</email>

<mensaje>esto funciona!</mensaje>

</comentario>

</listadoComentarios>

A cada una de las etiquetas (sin contar la de xml) se le llama nodo.

 

Para navegar por los nodos a través del objeto XML utilizaremos las propiedades firstChild (que referencia la etiqueta contenida inmediatamente después de aquella en la que nos encontramos) y childNodes (que hace referencia al conjunto de nodos con el mismo nombre dentro de la etiqueta en la que nos encontramos).

De esta forma XML.firstChild.nodeName nos devolvería el nombre del primer hijo dentro del archivo XML, listadoComentarios.

Así que almacenamos el número de comentarios en la variable numeroEntradas escribiendo:

var numeroEntradas = this.firstChild.childNodes.length;

Esto nos devolverá el número de hijos de this.firstChild, o lo que es lo mismo de XML.firstChild.

Una vez sepamos cuantas entradas tenemos almacenadas, haremos un bucle para sacarlas todas. Este bucle lo empezaremos desde el final para tener así las entradas más recientes al principio y las más antiguas al final.

 

Ahora crearemos una nueva variable llamada miXML que contendrá la ruta completa del nodo comentario para cada una de las vueltas del bucle, así no tendremos que escribirla entera cada vez que queramos acceder a ella.

var miXML:XMLNode = this.firstChild.childNodes[i];

De esta forma estamos haciendo referencia al comentario número i del archivo.

Ahora lo único que debemos hacer es recuperar la información dentro del nodo comentario.

Como este nodo tiene tres hijos con distinto nombre haremos referencia a ellos como miXML.childNodes[0], miXML.childNodes[1] y miXML.childNodes[2].

 

Una vez hallamos comprendido bien estos conceptos sólo hará falta verter el contenido de los nodos (utilizando la propiedad nodeValue) en variables que crearemos a su efecto:

var autor:String = miXML.childNodes[0].firstChild.nodeValue;

var email:String = miXML.childNodes[1].firstChild.nodeValue;

var mensaje:String = miXML.childNodes[2].firstChild.nodeValue;

Una vez tengamos la información podemos almacenarla y pasar al siguiente nodo comentario. Así que le damos formato HTML, lo almacenamos en una variable, y metemos el contenido de esa variable en el área de texto.

var cadenaFinal:String;

cadenaFinal = "<a href=\"mailto:"+email+"\">"+autor+"</a>: ";

cadenaFinal += "<span class=\"mensaje\">"+mensaje+"</span><br />";

comentarios_txt.text += cadenaFinal;

El bucle se repetirá de este modo para cada uno de los nodos comentarios y cuando termine habremos acabado y toda la información contenida en el archivo XML estará (formateada como HTML) en el área de texto.

Otras propiedades de los Formularios 

Además de todo lo que hemos visto existen, también, otras propiedades bastante interesantes.

Por ejemplo, el orden de tabulación. Esta propiedad establece como actúa el cursor a las repetidas pulsaciones de la tecla Tabulador.

Podemos alterar el orden utilizando la propiedad tabIndex. Esta propiedad indicará el orden en el que se desplazará el cursor cada vez que pulsemos el Tabulador:

nombre_txt.tabIndex = 1;

mail_txt.tabIndex = 2;

mensaje_txt.tabIndex = 3;

reset_btn.tabIndex = 4;

submit_btn.tabIndex = 5;

 

También podemos establecer dónde colocar el cursor (o foco) escribiendo la siguiente línea:

Selection.setFocus(nombre_txt);

Fácil ¿verdad?

 

De este modo en las validaciones que vimos antes podemos hacer lo siguiente:

if (mail_txt.text.length == 0) {

Selection.setFocus(mail_txt);

Alert.show("Introduce tu correo electrónico", "Error", Alert.OK);

return false;

}

Así si no se ha rellenado algún campo el foco se sitúa directamente sobre él para que el usuario lo rellene sin tener que desplazarse.

 

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:

focusManager.defaultPushButton = submit_btn;

De esta forma haremos que el botón predeterminado sea submit_btn.

 

Estilos CSS 

Podemos asignar estilos CSS al contenido de una caja de texto que acepte HTML.

Por ejemplo, nosotros en el área de texto comentarios_txt tenemos algo parecido a esto:

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

Obviamente, como el componente admite HTML no veremos el código, sino directamente su salida. Pero podríamos asignarle el siguiente estilo para mejorar la visualización:

a {

font-weight: bold;

}

.mensaje {

font-style: italic;

}

 

Guardaremos este estilo en un archivo llamado estilo_comentarios.css. Pero, ¿cómo hacemos para vincularlo al área de texto?

Fácil. Basta con declarar un nuevo objeto del tipo TextField.StyleSheet y asociarlo a comentarios_txt.

Para hacer esto escribimos:

var miHojaEstilo:TextField.StyleSheet = new TextField.StyleSheet();

miHojaEstilo.onLoad = function(exito:Boolean) {

if (exito) {

comentarios_txt.styleSheet = miHojaEstilo;

}

}

miHojaEstilo.load("estilo_comentarios.css");

Cuando se efectúa la carga del archivo, si se realiza con éxito, se asociará a la propiedad styleSheet de comentarios_txt.

Y ya tendremos nuestro campo de texto formateado.

 

Podemos cambiar esta propiedad en cualquier momento, de modo que cuando se asocie una nueva hoja de estilo mediante la siguiente línea, el contenido del área de texto se redibujará para tomar el nuevo formato.

miHojaEstilo.load("estilo_alternativo.css");

Incorporar Fuentes

Otro de los problemas con los que nos toparemos cuando trabajemos con flash serán las fuentes que utilicemos.

Solamente deberás incluir en tu proyecto aquellas fuentes que quieras utilizar para los textos dinámicos y de entrada, pues Flash se encargará de gestionar aquellas que utilices en los estáticos.

Para incorporar una fuente en tu película deberás hacer clic derecho en alguna parte vacía de la Biblioteca y seleccionar Nueva fuente.

Se abrirá el siguiente cuadro de diálogo:

En el desplegable Fuente selecciona la fuente que deseas utilizar. Deberás seleccionar los estilos que vas a utilizar (Negrita, Cursiva y Tamaño), de lo contrario la fuente no estará disponible.

Dale un nombre, que se mostrará en la Biblioteca y estará lista para utilizarse.

 

Cuando crees un campo de texto dinámico o de entrada selecciona la fuente que aparecerá señalada con un asterisco (*).

Y no tendrás más problemas en visualizarlas en equipos en los que no se encuentren instaladas.

 

  Ejercicios del Tema 20   Prueba evaluativa del Tema 20.

Unidad 21. Los Filtros (I).

Introducción

Como comentamos al principio del curso podemos ver que Flash CS3 incorpora una nueva característica: los Filtros.

Su uso aumentará la capacidad de mejorar el aspecto y funcionamiento de nuestros proyectos. El único problema es que, en esta versión, sólo están disponibles para los clips de película, los botones y el texto.

En este tema veremos los filtros disponibles, su uso y como manejarlos mediante 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).

El Filtro Sombra

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

      

Sus opciones son las siguientes:

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

.angle: determina el ángulo de la sombra. .blurX: determina la cantidad de desenfoque horizontal. .blurY: determina la cantidad de desenfoque vertical.

.color: determina el color de la sombra (escrito 0xRRVVAA). .distance: determina la distancia de la sombra al objeto. .hideObject: booleano, esconde el objeto dejando sólo la sombra (segunda imagen). .inner: booleano, hace que la sombra 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 sombra.

Podrás utilizar el filtro Sombra escribiendo el siguiente código:

import flash.filters.DropShadowFilter;

var sombra:DropShadowFilter = new DropShadowFilter();

sombra.strength = 5;

sombra.alpha = 0.50;

sombra.color = 0x000000;

...

miClip.filters = [sombra];

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

import flash.filters.DropShadowFilter;

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 Filtro Sombra

El Filtro Desenfocar

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

Sus opciones son las siguientes:

.blurX: determina la cantidad de desenfoque horizontal.

.blurY: determina la cantidad de desenfoque vertical. .quality: número de veces que se aplica el filtro. Puede tomar los valores 1, 2 ó 3. Calidad baja,

media y alta, respectivamente.

Podrás utilizar el filtro Desenfocar escribiendo el siguiente código:

import flash.filters.BlurFilter;

var sombra:BlurFilter = new BlurFilter ();

desenfocar.blurX = 5;

desenfocar.blurY = 5;

desenfocar.quality= 3;

miClip.filters = [desenfocar];

También podrías crear el desenfoque directamente con todas sus propiedades en el constructor, de este modo:

import flash.filters.BlurFilter;

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.

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.

Podrás utilizar el filtro Iluminado escribiendo el siguiente código:

import flash.filters.GlowFilter;

var iluminado:GlowFilter = new GlowFilter();

iluminado.quality = 3;

iluminado.alpha = 0.50;

iluminado.color = 0x000000;

...

miClip.filters = [iluminado];

También podrías crear la iluminación directamente con todas sus propiedades en el constructor, de este modo:

import flash.filters.GlowFilter;

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.

El Filtro Bisel 

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

      

Sus opciones son las siguientes:

.angle: determina el ángulo del bisel.

.blurX: determina la cantidad de desenfoque horizontal. .blurY: determina la cantidad de desenfoque vertical. .distance: determina la distancia que abarcará el bisel en el objeto. .highlightAlpha: determina la transparencia del color de resaltado (bisel). .hightlightColor: determina el color del resaltado (escrito 0xRRVVAA). .knockout: booleano, activa el filtro extractor, hace que el objeto se vuelva del color del fondo. .quality: número de veces que se aplica el filtro. Puede tomar los valores 1, 2 ó 3. Calidad baja,

media y alta, respectivamente. .shadowAlpha: determina la transparencia del color de sombra del bisel. .shadowColor: determina el color de la sombra del bisel (escrito 0xRRVVAA). .strength: determina la intensidad del bisel. .type: indica el tipo de bisel a aplicar. Puede tomar los valores inner, outer y full. Interior,

exterior y completo, respectivamente.

Podrás utilizar el filtro Bisel escribiendo el siguiente código:

import flash.filters.BevelFilter;

var bisel:BevelFilter = new BevelFilter();

bisel.strength = 5;

bisel.angle = 45;

bisel.shadowColor = 0x000000;

...

miClip.filters = [bisel];

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

import flash.filters.BevelFilter;

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

miClip.filters = [bisel];

Así en el constructor deberemos sustituir cada parámetro por el valor que queremos darle.

Puedes omitir los parámetros que quieras, pero ten en cuenta que siempre se interpretarán los valores que des en este orden hasta que no encuentre más.

El Filtro Iluminado Degradado

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

      

Sus opciones son las siguientes:

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

.angle: determina el ángulo de la iluminación. .blurX: determina la cantidad de desenfoque horizontal. .blurY: determina la cantidad de desenfoque vertical. .colors: conjunto de colores que definen el degradado (escritos 0xRRVVAA).

.distance: determina la distancia de la iluminación al objeto. .knockout: booleano, activa el filtro extractor, hace que el objeto se vuelva del color del fondo. .quality: número de veces que se aplica el filtro. Puede tomar los valores 1, 2 ó 3. Calidad baja,

media y alta, respectivamente. .ratios: matriz de proporciones de distribución de color para los colores correspondientes de la

matriz colors (de 0 a 255). .strength: determina la intensidad de la iluminación. .type: indica la colocación de la iluminación. Puede tomar los valores inner, outer y full.

Interior, exterior y completo, respectivamente.

Podrás utilizar el filtro Iluminado Degradado escribiendo el siguiente código:

import flash.filters.GradientGowFilter;

var iluminado:GradientGowFilter = new GradientGowFilter();

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:

import flash.filters.GradientGowFilter;

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.

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.

Podrás utilizar el filtro Bisel Degradado escribiendo el siguiente código:

import flash.filters.GradientBevelFilter;

var bisel:GradientBevelFilter = new GradientBevelFilter();

bisel.angle = 90;

bisel.colors = [0xFF0000, 0x00FF00, 0x0000FF];

bisel.type = "full";

...

miClip.filters = [bisel];

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

import flash.filters.GradientBevelFilter;

var bisel:GradientBevelFilter = new GradientBevelFilter(

distance, angle, colors, alphas, ratios, blurX, blurY, strength, quality, type, knockout);

miClip.filters = [bisel];

Así en el constructor deberemos sustituir cada parámetro por el valor que queremos darle.

Puedes omitir los parámetros que quieras, pero ten en cuenta que siempre se interpretarán los valores que des en este orden hasta que no encuentre más.

El Filtro Ajustar Color

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

      

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

En ella escribiremos una matriz de 20 elementos (4x5) que indicarán la cantidad de cada color, su intensidad, brillo, saturación y contraste.

Podrás modificar el filtro Ajustar Color escribiendo el siguiente código:

import flash.filters.ColorMatrixFilter;

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

0, 1, 0, 0, 100,

0, 0, 1, 0, 100,

0, 0, 0, 1, 0];

var ajustaColor:ColorMatrixFilter = new ColorMatrixFilter(miMatriz);

miClip.filters = [ajustaColor];

Acceder a los Filtros de un Elemento

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

Esta propiedad almacena una matriz que no puede ser editada directamente. Así que si queremos modificar los filtros que afectan a un objeto tendremos que darle una nueva matriz a la propiedad y desechar la anterior.

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

var sombra:DropShadowFilter = new DropShadowFilter();

var nuevaMatriz:Array = miClip.filters;

nuevaMatriz.push(sombra);

miClip.filters = nuevaMatriz;

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

 

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

var nuevaMatriz:Array = miClip.filters;

nuevaMatriz[0].blurX = 15;

nuevaMatriz[0].blurY = 15;

miClip.filters = nuevaMatriz;

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

Fácil, ¿verdad? El único problema que tiene este método es que deberás recordar el lugar que ocupa cada filtro en la matriz. Recuerda que el método push() inserta un elemento en una matriz siempre en último lugar.

  Ejercicios del Tema 21   Prueba evaluativa del Tema 21.

Unidad 22. Vídeo (I).

Introducción

Con Flash cada vez es más fácil añadir vídeos a nuestras presentaciones o webs. En particular Flash CS3 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 cuales son las mejores alternativas. Utilizaremos el siguiente ejemplo para documentar algunos de los pasos que deberemos realizar.

 

Importando Vídeos

Lo primero que deberemos hacer es transformar nuestro vídeo de formato avi, mpeg, mov, wmv o dv al formato que utiliza Flash: flv.

Este formato, además de crear archivos de vídeo de buena calidad muy comprimidos, te permitirá introducir puntos de referencia desde donde controlaremos la interacción del entorno de la película con el vídeo.

Haz clic en Archivo → Importar → Importar vídeo para empezar a configurar el archivo .flv que crearemos.

Se abrirá una pantalla como esta:

Aquí deberás seleccionar el archivo que quieres importar para utilizarlo en tu película. Haz clic en el botón Examinar y búscalo en tus carpetas. Cuando lo hayas encontrado pulsa el botón Aceptar y estarás listo para seguir pulsando el botón Siguiente.

También es posible marcar la opción Ya se ha implementado en un servidor Web, Flash Vídeo Streaming Service o Flash Communication Server. En este caso deberás introducir la URL del archivo, que previamente habrá sido preparado para poder utilizarlo en Flash.

La siguiente pantalla te permitirá seleccionar el modo en el que se implementará el vídeo:

Puedes elegir entre varias opciones, si seleccionas cualquiera de ellas verás su descripción en la derecha de la pantalla. Te adelantamos que para la implementación de vídeo para Streaming deberás disponer de un servidor (de pago) que transmita tu vídeo al usuario de una forma óptima.

La opción Descarga progresiva, a pesar de no ser la más aconsejada para conexiones de baja velocidad (sobre todo para archivos muy grandes) es la más utilizada por aquellos que no disponen de los recursos necesarios para contratar los servicios de un servidor de vídeo en formato Stream.

Así que seleccionaremos la primera opción y pulsaremos Siguiente.

Ahora es cuando realmente configuraremos el archivo de salida. Verás 5 pestañas. Vídeo y Audio te servirán para ajustar la compresión y calidad del vídeo. Aunque puedes seleccionarla directamente en el desplegable que te aparece en la pestaña Perfiles de codificación.

Nosotros haremos hincapié en la pestaña Puntos de referencia.

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

Existen dos tipos de puntos de referencia diferentes: el de Navegación y el de Evento.

Creando puntos de Navegación podremos referenciarnos más tarde a ellos para saltar en la película. Sería algo así como crear capítulos sobre los que podremos navegar utilizando botones y ActionScript.

El punto de Referencia de Evento nos permitirá crear interacciones con el resto de objetos en la película. Estos puntos nos permitirán pasar parámetros que podremos recuperar mediante ActionScript.

En el ejemplo hemos creado los siguientes puntos de referencia:

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

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

Desde la pestaña Recortar y cambiar tamaño podrás modificar el tamaño del vídeo y su duración.

Cuando hayas terminado pulsa el botón Siguiente.

Desde aquí podrás seleccionar un estilo de controles predeterminado, elige uno o selecciona Ninguno para crear tú mismo los controles (como veremos a continuación) y pulsa el botón Siguiente.

El sistema te avisará de que el vídeo está debidamente configurado y pasará a importarlo. Cuando haya terminado lo añadirá directamente sobre el Escenario.

El Componente FLVPlayback

Si ya tuvieses el archivo importado a flv no haría falta que realizases las acciones anteriores, sólo deberás insertar en el escenario un componente que incorpora Flash para la reproducción de éste.

Abre el Panel Componentes desde Ventana → Componentes y haz clic sobre FLV Playback - Player 8. Arrastra un componente FLVPlayBack al Escenario.

Desde el Panel Parámetros podrás configurarlo. Allí encontrarás las siguientes opciones:

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.

autoRewind: puede tomar los valores true o false. Indica si el vídeo deberá volver a la posición inicial despés de haberse reproducido completamente.

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.

contentPath: indica la ruta del archivo que se deberá reproducir. cuePoints: indica los puntos de referencia que están incluidos en la

película. Una vez importada la película a formato flv no pueden ser modificados.

isLive: puede tomar los valores true o false. Este campo se utilizará para la transmisión de vídeo en vivo y sólo podrá utilizarse a través de un servidor de Streaming.

skin: desde aquí puedes modificar la apariencia de los controles de la película y seleccionar uno entre los predefinidos.

skinAutoHide: puede tomar los valores true o false. Indicará si los controles se pueden esconder para volver a aprecer cuando el cursor se sitúe sobre la película.

totalTime: indica el tiempo total del vídeo. volume: de 0 a 100. Indica el volumen máximo del vídeo.

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.

Uso de Componentes para la Reproducción

Usar componentes para controlar la película es muy sencillo, sólo deberás arrastrarlos desde el Panel Componentes al Escenario y escribir unas pocas líneas en el Panel Acciones.

Para añadir estos componentes haz clic en el elemento FLV Playback Custom UI y arrastra el que tu quieras al Escenario, veamos cuales son sus funciones.

BackButton: retrocede el flujo del vídeo al punto de referencia inmediatamente anterior o en su defecto al inicio de éste.

BufferingBar: muestra el progreso de descarga del vídeo. ForwardButton: avanza el flujo del vídeo al punto de referencia inmediatamente posterior o en

su defecto al final de éste. MuteButton: establece el volumen de la película directamente a 0. Actuaría de forma similar a la

línea:

miVideo.volume = 0;

PauseButton: pausa la película en el momento en el que se pulse el botón.

PlayButton: reaunda (o comienza) la reproducción a partir de donde se encuentre el cabezal de reproducción de vídeo.

PlayPauseButton: una mezcla de los dos anteriores, es capaz de pausar y reanudar la reproducción desde un mismo control.

SeekBar: desde esta barra avanzar y retroceder manualmente por la línea de flujo de la película. StopButton: detiene la reproducción y posiciona el cabezal de reproducción al principio del

vídeo. VolumeBar: permite el aumento o disminución del volumen del vídeo mediante una barra de

volumen.

Una vez añadidos los componentes necesarios al Escenario tendrás que darle un nombrede instancia y luego escribir lo siguiente (dependiendo de los controles que hayas arrastrado) en el Panel Acciones del fotograma 1:

miVideo.playButton = miBotonPlay;

miVideo.pauseButton = miBotonPausa;

miVideo.playPauseButton = miBotonPausaPlay;

miVideo.stopButton = miBotonStop;

mVideo.backButton = miBotonAtras;

miVideo.forwardButton = miBotonAdelante;

miVideo.muteButton = miBotonSilencio;

miVideo.volumeBar = miBarraVolumen;

miVideo.seekBar = miBarraDeslizadora;

miVideo.bufferinBar = 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.

Crear Controles Propios

Crear controles propios no es muy complicado en Flash CS3. Sólo tienes que crear los botones que consideres necesarios y utilizar las propiedades del componente FLVPlayback.

play(): reproduce el vídeo.

miVideo.play();

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

miVideo.stop();

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

miVideo.pause();

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

miVideo.seek(5);

Esta línea colocará la cabeza lectora en el segundo 5 y reproducirá a partir de ahí.

volume: define el volumen del vídeo. Puedes introducir un valor entre 0 y 100.

miVideo.volume = 50;

Un ejemplo de cómo crear un botón de Play/Pause sería asociando el código siguiente a un botón:

on (release) {

if (miVideo.state == miVideo.PAUSED) {

miVideo.play();

}

else {

miVideo.pause();

}

}

La propiedad state devuelve el estado en el que se encuentra nuestro vídeo en el momento, puede tomar los siguientes valores:

miVideo.PAUSED: el vídeo se encuentra pausado.

miVideo.PLAYING: el vídeo se está reproduciendo. miVideo.REWINDING: el vídeo está en estdo de rebobinado. miVideo.SEEKING: el vídeo está en estado de búsqueda. miVideo.STOPPED: el vídeo se encuentra detenido. miVideo.BUFFERING: el vídeo todavía se está almacenando en el buffer.

miVideo.CONNECTION_ERROR: se ha producido un error de conexión y el vídeo no podrá visualizarse.

miVideo.DISCONNECTED: el vídeo está en estado de desconexión. Este estado se producirá hasta que se le asigne una ruta a la propiedad contentPath.

miVideo.LOADING: el vídeo está en estado de carga.

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

En el ejemplo hemos creado 3 botones que deberán saltar a los tres puntos diferentes que hemos creado: inicio, carrera1 y carrera2.

El código asociado al botón sería el siguiente:

on (release) {

miVideo.seekToNavCuePoint("inicio");

miVideo.play();

}

Este trozo de código utiliza la función seekToNavCuePoint para buscar el punto de referencia que se le indique, luego tendremos que decirle que reanude la reproducción.

También puedes utilizar las funciones seekToNextNavCuePoint() y seekToPrevNavCuePoint() para avanzar y retroceder, respectivamente, por los diferentes puntos de referencia de navegación creados.

miVideo.seekToNextNavCuePoint();

Interacción de Vídeo y Elementos Externos

Como vimos antes, podíamos crear puntos de referencia de Eventos para pasar parámetros a nuestra película desde la reproducción del vídeo.

Su uso no es muy complicado, deberemos crear un escuchador que esté pendiente de los puntos de referencia que se vayan reproduciendo en el vídeo de la siguiente forma:

var eventosVideo:Object = new Object();

eventosVideo.cuePoint = function(puntoRef:Object):Void {

if (puntoRef.info.parameters.length > 0) {

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

}

}

miVideo.addEventListener("cuePoint", eventosVideo);

De esta forma cuando se encuentre con un punto de referencia evaluará si tiene parámetros con la propiedad:

puntoRef.info.parameters.length

Si es así, sacamos la información del parámetro llamándolo por su nombre y actuamos en consecuencia.

En el ejemplo hemos creado un clip de película que se llama mensaje. Cuando se van produciendo determinados eventos en el vídeo vamos moviendo el cabezal de reproducción de dicho clip y así creamos una vinculación entre ambos, el clip y el vídeo.

Si escribieses lo siguiente te devolvería al Panel Salida el nombre del punto de referencia.

trace(puntoRef.info.name);

  Ejercicios del Tema 22   Prueba evaluativa del Tema 22.

Unidad 23. Juegos (I).

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.

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, _xscale e _yscale.

Las dos primeras (_width y _height) modificarán o devolverán la anchura y altura, respectivamente, en píxeles del objeto referenciado, por tanto, podemos cambiar el tamaño de un clip escribiendo lo siguiente:

miClip._width = 100;

miClip._height = 200;

Las propiedades _xscale e _yscale cambian el tamaño, pero de forma porcentual. Podemos utilizar estas propiedades para hacer un clip el doble de grande que era, por ejemplo:

miClip._width = 100;

miClip._height = 100;

miClip._xscale = 200;

miClip._yscale = 200;

Hará que el clip tome el tamaño de 100px de alto y 100px de ancho, aunque su visualización sea del doble (200%).

Podríamos devolver sus dimensiones a su estado real escribiendo:

miClip._xscale = 100;

miClip._yscale = 100;

También podemos averiguar o modificar la posición de un objeto, basta con trabajar con sus propiedades _x e _y:

miClip._x = 50;

miClip._y = 150;

posicionDeClipHorizontal = miClip._x;

posicionDeClipVertical = miClip._y;

Recuerda que estas propiedades trabajan con píxeles.

De esta forma podemos mover el objeto de una forma muy fácil, por ejemplo para hacer que se desplace hacia la derecha del Escenario deberás escribir:

miClip._x = miClip._x + 1;

Utilizando estas propiedades y combinándola con las características de los Movieclips podemos recrear de forma más natural el movimiento.

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:

var izquierda:Boolean = false;

var derecha:Boolean = false;

miClip.gotoAndStop("parado");

miClip._x = 10;

miClip.onPress = function() {

if (miClip._x <= 10) {

miClip.gotoAndStop("derecha");

derecha = true;

}

if (miClip._x >= 495) {

miClip.gotoAndStop("izquierda");

izquierda = true;

}

}

_root.onEnterFrame = function() {

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í la función onEnterFrame. 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 en el tema 24.

Hemos utilizado las variables derecha e izquierda (de tipo booleano) para evaluar si el objeto debe desplazarse. En el evento onEnterFrame chequeamos estas variables y si están a true comenzamos el movimiento hasta la posición que queramos.

A medida que vayamos avanzando en el tema veremos más funciones y métodos que nos permitirán acciones más versátiles y ajustadas a nuestras necesidades.

Otra forma de modificar la apariencia del objeto con el que trabajamos es utilizando la propiedad _rotation.

Esta propiedad actúa sobre el objeto rotándolo tantos grados como especifiques respecto a su posición original. Por ejemplo:

miClip_rotation = 90;

Esta línea hará que el objeto rote 90 grados en el sentido de las agujas del reloj. Para rotar un objeto hacia el lado contrario basta con añadirle un signo menos (-) antes del ángulo:

miClip._rotation = -90;

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

miClip._rotation = 0;

Así la rotación que actúa sobre el objeto es nula y se muestra en su posición original.

Recuerda que para que las rotaciones parezcan reales deberás posicionar el objeto dentro del clip en el centro absoluto, para que así la referencia del clip se encuentre en la posición adecuada.

Observa la diferencia entre estos dos clips:

En ambos la rotación se aplicará respecto al punto de referencia, por lo que en la edición

de éste deberás utilizar los botones y del Panel Alinear (Ventana → Alinear) para centrar el objeto respecto al punto de referencia del clip.

Realiza el paso a paso de rotación para ver mejor como funciona.

El problema ahora se nos plantea cuando queremos que el objeto se oriente hacia unas coordenadas en concreto. ¿Cómo calculamos el ángulo necesario para que nuestro elemento se oriente hacia otro situado en las coordenadas 100, 200? La solución no es muy complicada: deberemos echar mano de la trigonometría.

En Flash tenemos una función muy útil que nos ayuda a encontrar ángulos rápidamente.

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

Veamos un ejemplo:

Escribiendo la siguiente línea recuperaremos el ángulo que buscamos:

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

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

Observa este ejemplo:

Lo primero a tener en cuenta es que las coordenadas que tenemos del punto al que queremos orientar el objeto no están en relación éste.

Podemos averiguarlas de forma muy fácil haciendo una pequeña conversión restando las coordenadas entre sí:

Ahora ya podemos emplear la función atan2:

var angulo = 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 podemos solventaremos esto son una sola línea. Pero antes convertiremos el ángulo resultante en radianes a grados:

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

miClip._rotate = grados + 90;

Desde luego la suma que hemos realizado es consecuencia directa de que el objeto este orientado inicialmente hacía 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.

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

Tiene la siguiente sintaxis:

this.attachMovie(simbolo, nombreInstancia, nivel, opciones);

Para poder incluir un clip en el escenario antes deberás vincularlo para poder acceder a él desde ActionScript. Puedes hacerlo haciendo clic derecho sobre el elemento en la Biblioteca. Selecciona Vinculación.

En la ventana que se abrirá haz clic sobre Exportar para ActionScript y dale un nombre al cual te podrás referir cuando lo cargues con attachMovie().

En la primera variable deberemos introducir el nombre del objeto tal y como lo escribimos en la vinculación. La variable nombreInstancia almacenará el nombre de instancia al cual podremos referirnos más tarde para acceder a las propiedades y métodos del objeto creado.

El nivel que indiquemos configurará el estado de profundidad del clip. De esta forma podrás colocar unos archivos encima de otros y decidir cual se encontrará en un nivel superior o inferior .

Si vas a añadir elementos aleatoriamente es aconsejable que utilices un contador de niveles (y vayas incrementándolo cada vez que añadas un elemento) para asociar cada elemento a un nivel, pues si cargas dos elementos en un mismo nivel se descargará el ya existente.

En la variable opciones podrás inicializar el objeto con las propiedades definidas desde un inicio, deberás introducirlas entre llaves {} y separadas por comas. Este parámetro es opcional.

this.attachMovie("objeto", "miClip", 5, {_x:0, _y:0});

Para eliminar clips insertados mediante attachMovie puedes utilizar removeMovieClip() o unloadMovie():

miClip.removeMovieClip();

También podemos utilizar otra función que incorpora Flash llamada duplicateMovieClip(). Esta función duplica un clip ya existente en el Escenario, creando un nuevo con un nombre de instancia personalizado. Su sintaxis es la siguiente:

duplicateMovieClip(objetoDuplicar, nuevoNombre, nivel);

Deberás escribir el nombre del clip a duplicar en el primer parámentro, luego selecciona un nombre de instancia para el nuevo clip y escoge un nivel de carga.

Los movieclips cargados con esta función también se podrán eliminar con las funciones removeMovieClip() y unloadMovie().

Realiza el paso a paso de Carga de Objetos para practicar mejor estas funciones.

Interacción del Mouse 

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, para ello deberás introducir sólo dos eventos de clip en el objeto a arrastrar:

En el evento press (cuando aún no se ha soltado el botón del ratón) comenzaremos el arrastre: on (press) { startDrag(this);

}

Más tarde en el evento release (cuando se suelta el botón), detendremos el arrastre y el objeto quedará colocado en el sitio que definió el botón:

on (release) { stopDrag();

}

La función startDrag permite varios parámetros:

startDrag(objetoArrastar, bloqueaCentro, izquierda, arriba, derecha, abajo);

En bloqueCentro podrás pasarle un valor (true o false) que indicará si el arrastre se realizará desde el centro del clip o desde el punto donde hizo clic el usuario.

El resto de variables te permitirá definir mediante coordenadas un espacio activo donde se podrá realizar el arrastre. 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é elemento se ha soltado el objeto arrastrado:

on (release) {

stopDrag();

trace(this._droptarget);

}

Este código devolverá al Panel Salida el nombre de instancia del objeto sobre el cual se ha soltado. Si el objeto no tuviese uno devolvería el nombre genérico instanciai, donde i es un número de orden de objetos añadidos al Escenario.

Realiza el 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 será 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 _xmouse e _ymouse:

var coordenadaX:Number = _xmouse;

var coordenadaY:Number = _ymouse;

Fácil, ¿verdad?

Con todo lo que hemos aprendido podemos ya sustituir el cursor del Mouse normal por uno de nuestro agrado.

Para ello tienes que escribir muy pocas líneas:

this.attachMovie("cursor", "miCursor", 500);

Mouse.hide();

var escuchador:Object = new Object();

escuchador.onMouseMove = function() {

miCursor._x = _xmouse;

miCursor._y = _ymouse;

}

Mouse.addListener(escuchador);

En el código insertamos un objeto llamado miCursor que será una instancia del clip cursor que habremos guardado en la Bilioteca. Escondemos el cursor. Y añadimos un escuchador que haga que el clip miCursor se posicione en el lugar del Mouse a cada movimiento de éste.

Como ves una de las pocas cosas nuevas introducidas aquí es el uso de la función hide() del ratón. Invocándola haces que el Mouse desaparezca.

Puedes volver a visualizar el ratón escribiendo:

Mouse.show();

Interacción del Teclado

Podemos añadir a nuestras películas interacción con las teclas pulsadas, el procedimiento es muy sencillo, basta con utilizar la función isDown del objeto Key:

if Key.isDown(Key.UP) {

//mover hacia arriba

}

Como alternativa puedes utilizar un escuchador para el teclado y ver qué teclas son pulsadas en cada momento accediendo a ellas a través de la función Key.getCode():

var escuchador:Object = new Object();

escuchador.onKeyDown = function() {

switch (Key.getCode()) {

case Key.SPACE :

//disparar

break;

case Key.LEFT :

//mover hacia la izquierda

break;

case Key.UP :

//mover hacia arriba

break;

case Key.RIGHT :

//mover hacia la derecha

break;

case Key.DOWN :

//mover hacia abajo

break;

}

}

Key.addListener(escuchador);

Aunque depende siempre de la función que quieras que realicen tus teclas, a veces es más útil un método que otro.

Los códigos de las teclas son bastante sencillos, las flechas UP, DOWN, RIGHT y LEFT; la barra espaciadora SPACE; y las teclas especiales SHIFT, CONTROL, TAB, CAPSLOCK, ESCAPE, ENTER, BACKSPACE, INSERT, DELETEKEY, HOME, END, PGDN y PGUP.

En el ejemplo anterior utilizábamos el ratón para mover el clip, ahora podemos usar las teclas:

El código que hemos incluido es muy parecido al anterior, solamente hemos cambiado los eventos por los cuales se dispara el desplazamiento:

onEnterFrame = function() {

if (Key.isDown(Key.RIGHT)) {

miClip._rotation = 10;

if (miClip._x < 515) {

miClip._x = miClip._x + 3;

}

else {

miClip._rotation = 0;

}

}

else if (Key.isDown(Key.LEFT)) {

miClip._rotation = -10;

if (miClip._x > 30) {

miClip._x = miClip._x - 3;

}

else {

miClip._rotation = 0;

}

}

else {

miClip._rotation = 0;

}

}

Como ves en el ejemplo se evalúa cada vez que entra en el fotograma, por lo que las funciones de la presión continuada de una tecla se ven cubiertas.

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 la función hitTest().

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

var escuchador:Object = new Object();

escuchador.onMouseDown = function() {

if (miClip.hitTest(_xmouse,_ymouse) {

//coincidencia

}

}

Mouse.addListener(escuchador);

Este código evalúa la posición del ratón a cada clic, si las coordenadas introducidas en la siguiente línea coinciden con el área de miClip se produce colisión:

miClip.hitTest(_xmouse, _ymouse);

Cuando utilizamos esta función pasándole unas coordenadas podremos añadirle un parámetro: formaObjeto. Este parámetro tomará valor true si queremos que se detecte la colisión con la forma de la instancia, o false si queremos que se evalúe con sus bordes rectángulares de objeto. La función, entonces, tomaría la siguiente forma:

miClip.hitTest(coorX, coorY, formaObjeto);

Donde formaObjeto decidirá si se toma o no la forma completa del clip miClip.

 

También podemos ver si dos objetos chocan entre sí dándole un target a la función en vez de unas coordenadas. En ese caso tendríamos:

var colision:Boolean = miClip.hitTest(miClip2);

En este caso hemos almacenado en la variable colisión el valor de la evaluación de solapamiento o corte entre la posición de miClip y miClip2.

Esta línea tendría su homólogo en:

var colision:Boolean = miClip2.hitTest(miClip);

Pues ambas realizan la misma acción al buscar coincidencias entre los mismos objetos.

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.

Esto complica un poco las cosas, pues deberemos utilizar la primera sintaxis de la función:

miPared.hitTest(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?. La respuesta a esta segunda pregunta es bastante sencilla, debo averiguar la coordenada máxima de las x (para conocer su ancho máximo) y lo mismo para las y (para conocer su altura máxima).

Utilizaremos para ello la función getBounds(). Esta función trabaja de la siguiente forma:

miClip.getBounds(movieclip);

Donde en movieclip escribiremos la ruta de destino de la línea de tiempo cuyo sistema de coordenadas utilizaremos como punto de referencia. Normalmente escribiremos _root, para que las coordenadas dadas sean respecto a la película en general y no sobre un clip en particular.

Mediante esta función podremos acceder a las x mínimas y máximas, y lo mismo para las y. Sólo deberás escribir lo siguiente:

miClip.getBounds(_root).xMin;

miClip.getBounds(_root).xMax;

miClip.getBounds(_root).yMin;

miClip.getBounds(_root).yMax;

Realiza el paso a paso de Colisión y Movimiento para practicar este concepto.

Funciones Avanzadas

También veremos otras opciones que nos ayudarán mucho a la hora de crear juegos. Una de ellas es la de la posibilidad de darle aleatoriedad a los componentes.

Podemos utilizar la función que incorpora Flash Math.random() que devuelve un número pseudo-aleatorio entre 1 y 0.

Su uso es simple sólo deberás escribir:

var miNumero:Number = Math.random();

Su uso es tan útil que a raíz de esta función se ha creado este trozo de código que casi utilizarás en la mayoría de tus películas que contengan componentes aleatorios:

function randRange(minNum:Number, maxNum:Number):Number {

return (Math.floor(Math.random()*(maxNum-minNum+1))+minNum);

}

Esta función te devuelve un número aleatorio entre dos números:

var miNumero:Number = randRange(1, 100);

En este ejemplo se almacenará un número de 1 a 100 en la variable miNumero.

En el juego de ejemplo que estamos viendo hemos utilizado esta función para generar la caída de proyectiles:

var randomProyectil:Number = randRange(1, 3);

var miProyectil:MovieClip = this.attachMovie("proyectil"+randomProyectil, "proyectil"+profundidad, profundidad);

profundidad++;

miProyectil._y = -miProyectil._width;

var scale:Number = randRange(80, 100);

miProyectil._xscale = scale;

miProyectil._yscale = scale;

miProyectil._alpha = scale;

miProyectil.speed = velocidad+randRange(0, 3)+level;

miProyectil._x = randRange(10, 540);

Como ves tenemos randomizados muchos de los procesos. El primer randRange decide qué tipo de proyectil se lanzará. El segundo nos da el tamaño (_xscale e _yscale) y la transparencia que tendrá. El trecer número aleatorio se lo asignaremos a la velocidad. Y por ultimo utilizamos un cuarto randRange para posicionar el proyectil en una coordenada x de la pantalla.

De esta forma hemos logrado un abanico de posibilidades muy amplio en posibilidades de proyectiles.

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:

miProyectil.speed = velocidad+randRange(0, 3)+level;

Hemos creado una velocidad inicial y le hemos sumado una aleatoria para cada elemento, luego lo hemos asociado a una propiedad speed que hemos añadido al elemento. De hecho, a esa velocidad se le suma la que tiene el nivel del juego que va aumentando a medida que se van eliminando proyectiles.

De ahí que cuando asignamos el movimiento del elemento:

this._y += this.speed;

Lo hacemos refiriéndonos a la velocidad, así podemos variarla en cualquier momento aumentándola o reduciéndola según nuestros propósitos.

Por último veremos algo que nos permitirá mostrar información a los usuarios para que ellos tengan conocimiento de cómo se está desarrollando la partida. Esto lo haremos con los textFields. Los textFields pueden ser elementos que hayamos creado antes de publicar la película, así que no tendremos problemas con ellos.

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:

var miFormato:TextFormat = new TextFormat();

miFormato.bold = true;

miFormato.font = "Arial";

miFormato.size = 12;

miFormato.color = 0xFFFFFF;

miFormato.align = "left";

this.createTextField("estadisticas_txt", 5000, 10, 0, 530, 22);

estadisticas_txt.setNewTextFormat(miFormato);

estadisticas_txt.selectable = false;

estadisticas_txt.tabStops = [100, 200, 300, 400];

Este es el código que hemos utilizado en el juego.

Puedes ver que hemos creado un objeto llamado miFormato con unas características básicas que podremos aplicar sobre cualquier texto de nuestra película. Luego mediante la función createTextField hemos creado el campo.

Veamos cual es su sintaxis:

createTextField(nombreInstancia, profundidad, coordenadaX, coordenadaY, anchura, altura);

Como puedes ver, otra vez nos encontramos con los niveles que utilizábamos con la función attahMovie. Simplemente asegúrate de que no repites el nivel y todo irá bien.

Ahora sólo hará falta remitirse a la propiedad text del texto que hemos creado para darle un valor, y el texto se mostrará en pantalla:

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

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.

  Ejercicios del Tema 23   Prueba evaluativa del Tema 23.

Unidad 24. Animaciones avanzadas (I)

Movimiento de objetos mediante ActionScript

Para poder mover objetos con ActionScript debemos conocer el sistema de coordenadas utilizado por Flash.

La esquina superior izquierda es la posición x=0, y=0. (ver la imagen)

Para mover un objeto debemos modificar su posición definida por las propiedades objeto._x y objeto._y

Por ejemplo, si hacemos objeto._x += 10 estamos desplazando el objeto 10 píxeles hacia la derecha.

Vamos a ver como mover un objeto a partir de este ejemplo de una bola botando.

El algoritmo es muy sencillo, se trata de ir modificando la posición de la bola desde una posición inicial para que vaya bajando hasta que llegue al suelo, en ese momento invertimos el movimiento para que suba y calculamos hasta donde 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 derecha, 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 estaria representado por la línea azul) y se incrementa la y con el valor incre_y (que estaria 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 estaria representado por la línea azul) y se decrementa la y con el valor incre_y (que estaria 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 definido creado una bola azul y la hemos convertido en un movieclip, la instancia se llama bola_mc.

Inicialmente la bola esta en la posición (bola_mc._x= 0,bola_mc._y= 0)

Mediante la variable baja, sabremos si la bola esta bajando o subiendo. Cuando la coordenada y llega al suelo, la bola pasará a subir, cuando la coordenada y llegue al tope la bola comenzará a bajar.

En cada bote la bola ira perdiendo fuerza y el bote sera más bajo, la variable elasticidad determinará esta perdida de potencia.

Cada vez que la bola llega al tope calculamos el nuevo tope, para ello calculamos la distancia de la bola al suelo, la dividimos por la elasticidad y esa cantidad se la sumamos al tope.

En el esquema, la linea naranja representa esa cantidad que le sumamos al tope 1 para pasar al tope 2.

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 detine la ejecución (si todavía no había acabado) y se lanza una nueva ejecución.

Cuando el tope llega al suelo se detine la ejecución.

on (release) {

var baja:Boolean = true;

var incre_x:Number = 3.5;

var incre_y:Number = 8;

var suelo:Number = 280;

var tope:Number = 0;

var elasticidad:Number = 3;

bola_mc._y = 0;

bola_mc._x = 0;

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

var repeticion:Number;

function botar() {

if (baja) { // baja

bola_mc._y += incre_y;

bola_mc._x += incre_x;

if (bola_mc._y>=suelo) {

baja = false;

}

} else { // sube

bola_mc._y -= incre_y;

bola_mc._x += incre_x;

if (bola_mc._y<=tope) {

baja = true;

if (tope>=suelo) {

incre_y = 0;

clearInterval(repeticion);

}

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

}

}

}

clearInterval(repeticion);

repeticion = setInterval(botar, 35);

}

En este sencillo ejemplo la trayectoria de la bola es rectilínea, para que fuese un movimiento más real debería seguir una trayectoría curva. Dibujar curvas es un poco más complicado que dibujar rectas. Flash nos ofrece una opción más sencilla para hacer que un objeto siga una trayectoria curva: las guías de movimiento que veremos en este mismo tema aplicadas al bote de una pelota.

 

De todas formas si deseas probar suerte con las curvas y ActionScript realiza el ejercicio Espiral para empezar a familiarizarte con ellas.

Función setInterval y propiedad onEnterFrame

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 la propiedad onEnterFrame 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 ActiónScript y no nos interesa utilizar los fotogramas como forma de control del tiempo.

Por ejemplo, podemos genera un objeto y hacer que se mueva un 5 pixels cada 30 msg. variando estos parámetros conseguiremos que el objeto se mueva más o menos rápido.

setInterval

El formato de esta función es el siguiente:

var retardo:Number = setInterval(

functionReference:Function, interval:Number, [param1:Object, param2, ..., paramN]);

Donde,

functionReference es la función que se va a repetir.

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

retardo es una variable que identifica el intervalo y que sirve para utilizarlo con clearInterval() para detener la ejecución.

Por ejemplo, el codigo siguiente escribe 10 veces el mensaje "contador" i , cada 2000 milisegundos (2 sg.).

var i:Number = 1;

var repeticion:Number = setInterval(contar, 2000);

function contar() {

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

if (i>10) {

clearInterval(repeticion);

}

}

La funcion 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 gobal setInterval para que la función botar se ejecute cada 35 milisegundos.

 

onEnterFrame

El controlador de eventos onEnterFrame, asociado al objeto MovieClip, permite invocar a una función de forma repetida tantas veces como fotogramas por segundo tenga definida la película.

Por ejemplo, en el movieClip bola_mc:

var i:Number =0;bola_mc.onEnterFrame = function() {

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

if ( i > 30 ){

delete this.onEnterFrame;

}

}

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

...

Como puedes ver hemos añadido una condición para que cuando el valor de i sea mayor de 30 acabe la ejecución del controlador onEnterFrame y así evitar que se ejecute indefinidamente.

Aunque con este ejemplo no lo parezca, (sólo pretende explicar la función) estas dos tipo de funciones que se ejecutan repetitivamente pueden ser muy útiles en determinadas ocasiones. A lo largo del cursos ya hemos visto algunos ejemplos de su utilidad, a continuación veremos otro ejemplo que puede sernos útil.

Imagínate que quieres que tu pelicula se detenga durante 2 segundos y luego continue. Esta es una forma de hacerlo utilizando la función setInterval.

Colocariamos este código en el frame que deseemos, llamamos a setInterval con 1 sg (1000 milisg) y cuando se hallan cumplido dos llamadas detenemos setInterval y continuamos con el siguiente frame de la película.

var tope:Number = 1;

var repeticion:Number = setInterval(parar, 1000);

function parar() {

tope++;

if (tope > 2) {

clearInterval(repeticion);

nextFrame();

play();

}

}

stop();

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 9, animación mediante 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 trayectoría recta que vimos en el punto anterior.

En las imágenes podrás ver que proceso hemos seguido para dibujar el movimiento.

La guía la hemos dibujando sucesivas curvas de modo que la pelota invite el movimiento que queremos crear.

Para darle mayor realismo hemos insertado fotogramas claves en puntos críticos para achatar la pelota y dotarla de elasticidad.

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 diferente para animar un objeto en Flash, mediante ActionScript y mediante guía de movimiento.

Según cada caso concreto resultará más adecuado eligir 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 dificil 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.

Animaciones de rostros

Una de las bases para hacer animaciones de personajes es la animación de rostros, en esta pequeña introducción aprenderemos cómo hacer que un rostro pase de la risa al enfado.

Todos sabemos que un rostro sonriente tiene las cejas, los ojos y la boca en distinta posición que un rostro enfadado. Vamos a ver como con unas sencillas tranformaciones 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 Linea, 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 este 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, asi tendremos una boca sonriente. Vamos al fotograma 17 y hacemos lo mismo pero arrastrando hacia arriba para conseguir una boca enfadada.

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.

Sencillo, ¿verdad?

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:

Animaciones con movimientos complejos

Existen multitud de movimientos complejos que se pueden imitar con animaciones Flash, es evidente que no podemos verlos todos, por lo tanto hemos elegido uno bastante común y que nos puede servir como base para explicar unos cuantos conceptos. Se trata de imitar el movimiento de una persona corriendo. Esperamos que con estas explicaciones seas capaz de realizar variaciones más complejas, como podrian ser hacer que el muñeco practicase diferentes deportes.

Vamos a explicar cómo realizar la animación que puedes ver en esta

página. Para simplificar hemos dibujado una persona de forma esquemática.

A la hora de plantearnos cómo realizar una animación de este tipo, lo primero que debemos hacer es analizar el movimiento para ver si está compuesto por elementos que se repiten, o si se puede separar en distintos componentes o cualquier otra situación que nos permita simplificar la animación.

En el caso que nos ocupa podemos separar el movimiento de las distintas partes del cuerpo, piernas, brazos, cabeza y tronco. También podriamos añadir manos y pies pero no lo haremos para no complicar demasiado la explicación.

Hemos creado una capa para cada parte del cuerpo, como puedes ver en esta imagen.

 

Otra circunstancia que podemos observar es que el movimiento del brazo izquierdo y del brazo derecho son muy parecidos, se diferencian en la distinta posición de partida. Por lo tanto bastará con realizar un movimiento que nos servirá para ambos brazos. Lo mismo ocurre con las piernas.

A su vez, podemos separar el movimiento del brazo en dos movimientos, uno cuando el brazo avanza (va desde la posición más atrasada hasta la posición más adelantada) , y otro cuando el brazo retrocede (va desde la posición más adelantada hasta la más atrasada). De esta forma, con dos movieclips podremos representar el movimiento de ambos brazos. Los movieclips son idénticos salvo en el sentido del movimiento.

En esta imagen puedes ver el movie clip "brazo_adelante", hemos creado una capa para la parte superior del brazo y hemos hecho que gire sobre su extremo superior (hombro). Para el antebrazo henos creado otra capa con su capa guía, la capa guía sirve para que la parte superior del antebrazo siga la trayectoria que describe el extremo inferior (codo). También hemos incluido un giro en el antebrazo.

En esta imagen intentamos explicar como están colocados los dos movieclips que forman el movimiento de los brazos en la línea del tiempo..

El brazo izquierdo comienza con el movie clip "brazo_adelante" y continúa con el movie clip "brazo_atras", mientras que el brazo derecho comienza con el movie clip "brazo_atras" y continúa con el movie clip "brazo_adelante", de esta forma cuando el brazo izquierdo avance el brazo derecho retrocederá.

Sólo nos queda ver un detalle interesante.

Hemos considerado idénticos el movimiento del brazo hacia adelante y del brazo hacia atrás y la animación queda bastante bien.

Sin embargo ¿Podemos decir lo mismo del movimiento de las piernas?

Claramente no, ya que cuando la pierna va hacia atrás debe apoyarse en el suelo, mientras que cuando va hacia adelante no debe tocar el suelo.

 

 

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

Rotoscopia

La rotoscopia es una técnica que utiliza un movimiento real como patrón para calcar las imagenes 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, sólo que en la pantalla de selección de método de importación deberemos seleccionar Incorporar vídeo 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, coje 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.

Si quieres mantener el audio, cuando importes el vídeo selecciona que quieres mantener el audio y el vídeo separados. Así cuando elimines la capa de vídeo tu animación mantendrá el sonido de la película. Tus animaciones serán capaces de hablar!

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 utilizando la función createEmptyMovieClip():

this.createEmptyMovieClip("miClip", this.getNextHighestDepth());

Como puedes ver, le pasamos dos parámetros, el primero será el nombre de instancia al cual nos referiremos para modificar las propiedades del clip.

El segundo parámetro indica el nivel de profundidad del clip. Hemos utilizado la función getNextHighestDepth() para averiguar cuál es el nivel superior en este clip y así posicionar nuestro dibujo en la parte superior (así no lo tapará ningún otro objeto).

Una vez creado el clip podemos pasar a dibujar sobre él.

Hacerlo es muy fácil, sólo deberás inicializar el proceso de dibujo escribiendo:

miClip.beginFill(color, alfa);

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

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

Luego nos valdremos de un par de funciones:

miClip.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 lineTo():

miClip.lineTo(x, y);

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

miClip.beginFill(0xFF0000);

miClip.moveTo(10, 10);

miClip.lineTo(10, 100);

miClip.lineTo(100, 100);

miClip.lineTo(100, 10);

miClip.lineTo(10, 10);

miClip.endFill();

Terminamos la instrucción con endFill().

Este ejemplo dibujaría un cuadrado en la posición (10, 10). Sencillo, ¿verdad?

Podemos establecer el tipo de línea que rodeará al dibujo escribiendo lo siguiente:

miClip.lineStyle(grosor, color, alfa, trazos, escala, extremos, uniones, limiteEsquinas);

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

miClip.lineStyle(1, 0x000000, 100);

miClip.beginFill(0xFF0000);

miClip.moveTo(10, 10);

miClip.lineTo(10, 100);

miClip.lineTo(100, 100);

miClip.lineTo(100, 10);

miClip.lineTo(10, 10);

miClip.endFill();

Ahora explicaremos en detalle los parámetros de esta instrucción:

grosor: un número de 0 a 255 que indicará el grosor del borde.

color: en hexadecimal, el color del borde. alfa: nivel de transparencia del borde, de 0 a 100. 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).

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.

extremos: define cómo se dibujarán los extremos de los bordes,

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

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

  Ejercicios del Tema 24   Prueba evaluativa del Tema 24.