Flash 8. Programando con ActionScript 2.0

Unidad 17. Introducción a ActionScript 2 ¿Qué es el ActionScript?

El ActionScript es el lenguaje de programación que ha utilizado Macromedia Flash desde sus comienzos, y que por supuesto, emplea Flash 8. A grandes rasgos, podemos decir que el ActionScript nos permitirá realizar con Flash 8 todo lo que nos propongamos, ya que nos da el control absoluto de todo lo que rodea a una película Flash. Sin embargo, sólo vamos a ver una pequeña introducción a ActionScript que servirá para sentar las bases que permitirán empezar a trabajar con ActionScript.

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 es, como su nombre indica, un lenguaje de script, esto quiere decir que no hará falta crear un programa completo para conseguir resultados, normalmente la aplicación de fragmentos de código ActionScript a los objetos existentes en nuestras películas nos permiten alcanzar nuestros objetivos.

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

En la mayor parte de las ocasiones, no será necesario "programar" realmente, Flash 8 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.

El Panel Acciones En Flash 8, el Panel Acciones sirve para programar scripts con ActionScript. Esto es, que todo lo que introduzcamos 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.

La libertad del modo "Experto" es total y por tanto, también lo es la posibilidad de cometer 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 porqué 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 actúa 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, aparecerán las opciones que deberás rellenar para que estos comandos funcionen correctamente y el código se generará automáticamente. Esta es una muy buena utilidad recuperada que permitirá 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.

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

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.

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.

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

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 uses 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 tienen diversas funciones, describimos las más importantes: fscommand: Esta acción, es capaz de ejecutar ciertos comandos muy potentes. Lo más cómodo es pasar a 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 condición) {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 8.

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. Puedes 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 matemáticas de modo muy sencillo. En el tema siguiente veremos algún ejemplo de su uso.

Objeto "String" (Cadena)

Es otro objeto peculiar, pues corresponde a un tipo de datos. Los strings o cadenas son secuencias de caracteres. Si definimos una secuencia de caracteres como objeto de tipo String, podremos usar los métodos que Flash implementa sobre ellas: Seleccionar subcadenas de letras, buscar una determinada letra en una palabra, convertir la palabra a letras mayúsculas y un largo etc...

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

Unidad 18. Ejemplos ActionScript 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 8. 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 8) 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 8 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 paréntesis, 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.

Ejemplo del código anteriorpartimos de una película con 15 fotogramas y una acción stop() colocada en cada uno de ellos. Hemos colocado el código en el botón "Ir al Fotograma 15".

on (release) { getURL("http://www.areandina.edu.co", "_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.areandina.edu.co 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.

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.

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 algún evento de clip asociado (Load, KeyDown etc) que determine cuándo se ejecutará este código (al cargarse el clip, al pulsar alguna tecla ...). 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.

Partimos de una película con 2 fotogramas distintos. En el primer fotograma están el botón y el clip de película (r1) correspondientes. El clip de película tiene en su línea de tiempos una animación, inicialmente detenida. Veamos que pasa si se accede a su fotograma 2. En el segundo fotograma no nos importa lo que haya porque la acción situada a la izquierda no nos llevará hasta allí. La cabeza lectora de la película principal es INDEPENDIENTE. Ejemplos de manejo de Sonidos con ActionScript

Aunque la idea de objeto no suele llevarnos a pensar en un sonido, en Flash 8 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.

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étodo 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 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 explicar 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).

Unidad 19. Flash. Navegación En este tema veremos los puntos más importantes en los que te podrás apoyar para realizar tus animaciones en Flash usando ActionScript. Ésta unidad 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.

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

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

Además de estos controladores podemos utilizar también: gotoAndStop(fotograma), que situará el cabezal en el fotograma indicado y parará la reproducción. play(), que hará que la reproducción prosiga en el fotograma en el que se encuentre el cabezal. prevFrame(), que hará que el cabezal retroceda al fotograma anterior al que nos encontramos. nextFrame(), que hará que el cabezal avance al fotograma siguiente al que nos encontramos.

Existen los controladores prevScene() y nextScene() que hacen avanzar el cabezal a escenas anteriores o siguientes. Así que veremos qué son las escenas para poder utilizarlos también.

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 Duplicar escena

o duplicarla con el botón

.

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

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

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á. 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; }

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 cuestión. this siempre hará referencia al objeto donde se encuentre la variable.

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

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.

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

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.

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

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

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 existirí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);

Unidad 20. ActionScript – Formularios

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.

ComoBox (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 envio.autor = envio.email = envio.mensaje

las variables nombre_txt.text; mail_txt.text; = 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.

Unidad 21. Los Filtros Introducción Como comentamos al principio del curso podemos ver que Flash 8 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.

Las opciones de filtro se pueden trabajar directamente en el panel “Filtos”

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.

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.

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.

Unidad 22. Vídeo Introducción Con Flash cada vez es más fácil añadir vídeos a nuestras presentaciones o webs. En particular Flash 8 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. Antes que nada pulsa el botón Mostrar configuración avanzada.

Verás 3 pestañas. La primera te servirá para ajustar la compresión y calidad del vídeo. Puedes seleccionarla directamente en el desplegable de arriba del todo o cambiar alguna de las opciones que te aparecen en la pestaña 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 3 de Navegación, a los cuales acudiremos pulsando los botones para saltar entre los capítulos de la película. Luego hemos añadido 4 puntos de Evento desde los que pasaremos un parámetro que hará que se muestre determinado fotograma de un clip que se encontrará en el Escenario.

Desde la pestaña Recortar y Ajustar 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.

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 nombre de 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. Puedes modificar los componentes que añadas al Escenario haciendo doble clic sobre ellos y cambiando su forma, tamaño o color.