Leccion 8 - Interactividad Con Actionscript

[FLASH] IDSYSTEMS 2011
LECCION 8. INTERACTIVIDAD CON ACTIONSCRIPT
Introducción a ActionScript 2 (I)
¿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. Absolutamente de todo.
Sin embargo, en estos dos temas 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. Enseñar a programar con
ActionScript requeriría otro curso completo. Profundizar en el conocimiento de este lenguaje queda por
cuenta del lector. Recomendamos seguir la estupenda Ayuda incluida en Flash 8.
Todo lo referente a este capítulo hace referencia a la versión 2 de ActionScript, última versión de este
lenguaje de programación lanzada por Macromedia e incorporada en Flash MX 2004.
Características generales del ActionScript
Como ya hemos comentado, el ActionScript es el lenguaje de programación propio de Flash,

tal y como el Lingo lo es de Macromedia Director, por ejemplo. El ActionScript está basado en la
especificación ECMA-262, al igual que otros lenguajes como Javascript.
El ActionScript es, como su nombre indica, un lenguaje de script, esto quiere decir que no
hará falta crear un programa completo para conseguir resultados, normalmente la aplicación de
fragmentos de código ActionScript a los objetos existentes en nuestras películas nos permiten alcanzar
nuestros objetivos.
El ActionScript es un lenguaje de programación orientado a objetos, tiene similitudes, por

tanto, con lenguajes tales como los usados en el Microsoft Visual Basic, en el Borland Delphi etc... y
aunque, evidentemente, no tiene la potencia de un lenguaje puramente orientado a objetos derivado del
C o del Pascal como los anteriores, cada versión se acerca más a un lenguaje de este tipo. Así, la versión
2.0 estrenada en Flash MX 2004 es mucho más potente y mucho más "orientada a objetos" que su
anterior versión 1.0
El ActionScript presenta muchísimos parecidos con el Javascript; si conoce Javascript, la

sintaxis y el estilo de ActionScript le resultarán muy familiares. Las diferencias entre ambos lenguajes
las puede encontrar en la ayuda que acompaña al Flash 8.
LECCION 8 – Interactividad con ActionScript Página 1

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.
Introducción a la Programación con ActionScript
Si bien hemos catalogado este tema como "básico", la palabra adecuada sería "necesario". pues si
bien el objetivo de este tema NO es enseñar programación, no podemos pasar por alto que ciertos
conceptos relacionados con ella deben conocerse para poder llegar a entender el ActionScript. Vamos
pues a explicar algunos conceptos fundamentales, necesarios para abordar la programación mediante
ActionScript.
Script: Código escrito en cualquier lenguaje de programación que realiza una tarea determinada. Así
por ejemplo, el código ActionScript necesario para que al pulsar un botón de Flash pasemos al
fotograma siguiente es un script.
Variable: Vamos a explicar la interpretación del término variable en programación mediante un

ejemplo sencillo.
Si tenemos la expresión: x = 3;
Tenemos que x es una variable que toma el valor 3. Se llama variable precisamente porque puede
cambiar de valor en cualquier momento durante la ejecución de nuestra película Flash. Todos los datos
que se manejan normalmente son variables (salvo aquellos constantes, por ejemplo el número 3). Así, en
un formulario, el nombre es una variable (de tipo cadena de caracteres o string), el apellido también, la
dirección, el teléfono etc...
Expresión / Sentencia: Conjunto de operadores, constantes, variables o acciones. Provocan un

resultado o una acción determinada y SIEMPRE deben ir terminados por ' ; ' (punto y coma).
Función: Una función es una porción de código (ActionScript en nuestro caso) que tiene un nombre
determinado y que realiza una labor concreta. Ejemplo, la siguiente definición de función:
function IncrementaX(x) {
x = x + 1;
}
Realiza la función de tomar la variable "x" y sumarle uno a su valor. Si quisiéramos ejecutarla en algún
lugar de nuestra película, bastaría con escribir: "IncrementaX(x)", siempre y cuando la definición de la
función (que es el código mostrado arriba) esté en cualquier parte de la película que se ejecute ANTES
que la llamada a la función.

Acción: Flash llama Acción a funciones que él mismo ha implementado y que no requieren ser
definidas para ser usadas. Basta por tanto, con escribir la llamada a la función. Estas acciones son lo que
usaremos la mayoría de las veces, pues resultan sumamente fáciles de usar y muy potentes. Las acciones
aparecen en el Panel Acciones y se pueden insertar en nuestro código con un simple clic de ratón.
Por ejemplo "gotoAndPlay(3)" es una acción que provoca que Flash pase a ejecutar el fotograma 3.
Ahora que entendemos qué son las funciones, deberemos comprender también, que en alguna parte,
Flash ha definido la función "gotoAndPlay" (tal y como hemos hecho nosotros anteriormente con la
función "IncrementaX") y ha escrito un código que provoca el efecto ya comentado. Por suerte todo esto
no nos debe preocupar, Flash 8 se encarga de todo. Nos basta con conocer las acciones y saber cómo
usarlas.
Parámetro: Un parámetro es una variable que entra o sale de una acción o de una función. Ponemos
un ejemplo para clarificar esta definición:
Tenemos la siguiente definición de función:
function Suma5(p_entrada, p_salida) {
p_salida = p_entrada + 5;
Imaginemos que tenemos una variable x que vale 7 y otra variable y que queremos que valga 7 + 5.
Ejecutaríamos la función "Suma5" del siguiente modo: Suma5( x , y ). Vamos a ver qué hace
exactamente la función con los parámetros x e y.
Al ejecutar "Suma5( x , y)", Flash busca definiciones de funciones que se llamen Suma5, enseguida
encontrará la definición que hemos escrito arriba, (que deberá estar escrita en alguna parte de nuestra
película ANTES de ejecutar "Suma5( x, y )"). Cuando lo hace, comprueba que la función que
ejecutamos COINCIDE con la cabecera de la definición, esta cabecera abarca el nombre de la función y
todo lo que venga a continuación hasta que se cierre el paréntesis. En nuestro caso, la cabecera sería
"Suma5(p_entrada, p_salida)"
Aquí viene la pregunta inminente, ¿Coinciden?. La respuesta es SÍ, para que coincidan DEBE coincidir
el NOMBRE de la función y el número de parámetros, que serán variables o valores separados por
comas. Como tenemos 2 parámetros en cada parte, todo coincide y pasa a ejecutarse la función. La
función ejecutada es "Suma(x , y)", por lo que lo que en realidad se ejecutará será:

function Suma5(x, y) {
y = x + 5;
Tras ejecutarse esta función, y valdrá lo que valiese x mas 5. Es lo que queríamos.
La variable 'x' ha actuado como parámetro de entrada, pues aporta un dato a la función, el valor 'y'
comienza entrando en la función, pero es un parámetro de salida porque ha sido modificado DENTRO
de la función.
Programación Orientada a Objetos (POO): ActionScript es un lenguaje orientado a objetos, esto

quiere decir que la información se organiza en grupos denominados clases. Cuando queremos emplear
una clase en nuestra película, usamos una instancia de ella, denominada OBJETO. Los objetos, y por
tanto, las clases, tiene Propiedades (características) y Métodos (comportamientos). Pongamos 2
ejemplos para clarificar esto:
- El objeto Persona tiene:
- Propiedades: Nombre, edad, altura ...
- Comportamientos: hablar, correr, saltar ...
- El objeto Clip de Película tiene:
- Propiedades: color, anchura, altura ...
- Comportamientos: gotoAndPlay, Stop, Play, LoadMovie ...
Evidentemente el primer objeto es meramente didáctico, el segundo objeto es un objeto de Flash (salvo
que las propieades están definidas en inglés), y probablemente el más importante...
Los objetos los podemos encontrar también en el Panel Acciones, su uso es sencillo. Veamos un
ejemplo:
Tenemos el objeto Clip1, que es una instancia de la Clase MovieClip y por tanto, tiene sus mismas
Propiedades y Métodos.
- Clip1._height = 20;

Con la línea anterior, estamos diciendo a Flash que el objeto Clip1 tiene una altura de 20
(inmediatamente Flash la modificará en el fotograma en el que se encuentre). La sintaxis de Flash
establece que debe existir el separador "._" , no vale la pena entrar a describir el porqué. Siempre será
así, no lo olvidemos.
- Clip1.Play();
Esta acción ejecutará el método Play, que pertenece a los Clips de Película, provocará que se comience a
ejecutar la línea de tiempos del Clip1. Nótese que aquí no hay "_" como separador, sólo un "."
Ya conocemos los conceptos "básicos" de Flash 8. Si pensamos en que, con sólo 1 línea podemos
modificar la altura de un objeto de nuestra película DURANTE LA EJECUCIÓN DE LA MISMA (y
no mientras la creábamos como hasta ahora), podremos hacernos una idea de lo que nos permitirá el
ActionScript ... Podremos dar vida a nuestras animaciones y conseguir una interactividad total con el
usuario. Podremos conseguir una película completamente multimedia.
El conocimiento y comprensión de estos conceptos no es un requisito para comenzar a programar con

ActionScript, programar por intuición es una práctica muy común en este tipo de lenguajes. En este
curso recomendamos saber lo que se está haciendo en todo momento y conocer bien qué es cada cosa, y
pensamos que hacer un esfuerzo inicial nos gratificará constantemente durante nuestro aprendizaje de
ActionScript, pues con todo lo anterior claro y un poco de trabajo, pronto pasaremos a ser
programadores expertos y en ese momento la intuición deja de ser útil...
El Panel Acciones
En Flash 8, el Panel Acciones sirve para programar scripts con ActionScript. Esto es, que todo lo que
introzcamos en dicho Panel se verá reflejado después en nuestra película. Debemos tener claro desde un
principio que el Panel Acciones puede hacer referencia a Fotogramas u objetos, de modo que el código
ActionScript introducido afectará tan sólo a aquello a lo que referencia el Panel. Por ejemplo, en la
imagen inferior, se puede distinguir que el Panel Acciones hace referencia al Fotograma 1 de la Capa
1.
El Panel Acciones se divide en 2 partes, a la izquierda tenemos una ayuda facilitada por Flash que nos
da acceso de un modo rápido y muy cómodo a todas las acciones, objetos, propiedades etc... que Flash
tiene predefinidos. Estos elementos están divididos en carpetas, que contienen a su vez más carpetas
clasificando de un modo eficaz todo lo que Flash pone a nuestra disposición. Para insertarlos en nuestro
script bastará con un doble clic sobre el elemento elegido.
Posteriormente veremos con detalle los distintos elementos de este Panel.

A la parte derecha tenemos el espacio para colocar nuestro script, aquí aparecerá lo que vayamos
insertando. También incluye herramientas de utilidad, como la búsqueda de palabras, la posibilidad de
insertar puntos de corte, la herramienta Revisar Sintaxis y la ayuda de Flash para ActionScript.
El Panel Acciones de Flash 8, al contrario que el de Flash MX 2004, no tiene únicamente un modo de
edición, por lo que tiene mucho más en común con el mod en el que se trabajaba con Flash MX que con
la anterior versión Flash MX 2004.
La libertad del modo "Experto" es total y por tanto, también lo es la posibilidad de comenter fallos, para
asegurarnos de que nuestro script es correcto, al entrar en Modo Experto nos aparecerá un icono con el
siguiente aspecto: Al pulsarlo Flash revisa nuestro código en busca de posibles errores,
indicándonos, en su caso, la línea que presente el error y en qué consiste éste.
Es un fallo común pasarse horas buscando 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 actua
como si no hubiera NADA DE CÓDIGO en él. Pongamos pues, mucha atención en esto y revisemos el
código concienzudamente.

El uso del modo en asistente es mucho más sencillo para ello pulsa el botón Asistente de Script y
selecciona los comandos que quieras incluir, apareceran las opciones que deberas rellenar para que estos
comandos funcionen correctamente y el código se generará automaticamente. Esta es una muy buena
utilidad recuperada que permitira a los usuarios que acaban de empezar el uso de este lenguaje.
Aun así es recomendable siempre repasar el código y así irnos familiarizando con él y de este modo
poder poco a poco crear nuestro propio código en modo Experto, lo que nos dará myor 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.

Esta posibilidad de comprobar si una expresión es igual a otra, nos será muy útil para comprobar muchas
cosas durante nuestra película y en función de ellas, hacer unas cosas u otras.
Pondremos un ejemplo, imaginemos que le pedimos a un usuario que introduzca su edad en un campo
de texto de nuestra película flash. A ese campo le llamamos "edad_usuario". Le hacemos pulsar un
botón "Continuar" y en ese momento comprobamos su edad, si tiene 20 años, le decimos una cosa, de lo
contrario, le decimos otra distinta. Bastaría con hacer algo así:
if ( edad_usuario == 20 ) {
dar_mensaje_1; }
else { dar_mensaje_2; }
Aquí lo que estamos diciendo es lo siguiente: "Si edad_usuario es igual a 20, entonces damos el mensaje
1, sino lo es, damos el mensaje 2.
El significado de 'if' y 'else' lo veremos más adelante, de modo que no nos preocupemos por no entender
perfectamente el código escrito arriba. También faltaría, lógicamente, crear las funciones
"dar_mensaje_1" y "dar_mensaje_2".
> : Mayor que. Devuelve como resultado verdadero (1) si la expresión de la izquierda es mayor que la
de la derecha. De lo contrario, devuelve false (0).
< : Menor que. Devuelve como resultado verdadero (1) si la expresión de la izquierda es menor que la
de la derecha. De lo contrario, devuelve false (0).
>= : Mayor o igual que. Devuelve como resultado verdadero (1) si la expresión de la izquierda es
mayor o igual que la de la derecha. De lo contrario, devuelve false (0).
<= : Menor o igual que. Devuelve como resultado verdadero (1) si la expresión de la izquierda es
menor o igual que la de la derecha. De lo contrario, devuelve false (0).
!= : Probar Desigualdad. Devuelve como resultado verdadero (1) si la expresión de la izquierda es

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

Otros Operadores
( ) : Paréntesis. Sirven, como es de esperar, para agrupar términos y dar preferencias en las operaciones
(al igual que en las matemáticas). También se usa, como ya vimos, para pasar parámetros a funciones o
acciones. (Éstos deben ir entre paréntesis)
" " : Comillas. En ActionScript, todo lo que va entre comillas, pasa a considerarse una cadena de
caracteres, por lo que las funciones y acciones que afectan exclusivamente a las cadenas de caracteres
pasan a afectar también al elemento entre comillas. Así por ejemplo, mientras que x representa una
variable con un valor determinado, si escribimos "x", estamos escribiendo en realidad el carácter o la
letra "x". Por tanto, podremos añadirlo a una palabra, compararlo con otras letras, escribirlo por pantalla
etc.. pero ya no será una variable.
El resto de operadores no se usan tanto, su funcionalidad y definición puede consultarse en la propia

ayuda de Flash 8.
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.
Al igual que en el caso anterior, explicaremos las Acciones más importantes. Para una referencia más
completa, recomendamos mirar la ayuda del programa.
Definiremos las acciones escribiendo su cabecera (nombre + parámetros con un nombre genérico)
para después explicar qué es cada parámetro.
Acciones - Control de Película
Estas acciones se emplean, como su nombre indica, para controlar el flujo de nuestra película, esto es,
para indicar a Flash en todo momento qué fotograma tiene que mostrar, cuándo tiene que parar, dónde
seguir etc... Veámoslas y lo entenderemos mejor:
gotoAndPlay / goto: Esta acción será, probablemente la que más useis durante la realización de vuestras
películas. La acción que realiza consiste en mover la cabeza lectora al fotograma que le indiquemos. La
cabeza lectora es lo que determina qué fotograma de nuestra película se está reproduciendo en cada
momento. Si, por ejemplo, lo movemos del fotograma 1 al 25, lo que veremos instantáneamente será el
fotograma 25 y la película continuará reproduciéndose a partir de ahí.

Uso:
gotoAndPlay(escena, fotograma):
escena: Nombre de la escena a la que queremos enviar la cabeza lectora. Debe ir entre comillas dobles.
fotograma: Número o nombre del fotograma al que queremos enviar la cabeza lectora. Si es un nombre,
debe ir entre comillas dobles, si es un número, NO.
Ejemplo:
gotoAndPlay("Escena2", 7); --> Esta acción lleva la cabeza lectora al fotograma 7 de la escena llamada
"Escena2".
Play: Da comienzo a la reproducción de la película, generalmente porque algo la ha detenido.
Uso:
Play();
No tiene Parámetros.
Stop: Detiene la reproducción de la película. Se puede usar en un fotograma, cuando queramos

detenernos en él (porque es un menú, por ejemplo), en un botón, (para que detenga la película) etc...
Uso:
Stop();
No tiene Parámetros.
Acciones - Navegador / Red
Estas acciones tiene diversas funciones, describimos las más importantes:
fscommand: Esta acción, es capaz de ejecutar ciertos comandos muy potentes. Lo más cómodo es pasar
a Modo Básico (sino estábamos ya) e insertarla, nos aparecerá una pestaña con los posibles comandos
que admite:

- fullscreen : Si se activa pone nuestra película a pantalla completa. Muy útil para presentaciones en CD-
Rom, por ejemplo.
- allowscale: Controla el redimensionamiento de los objetos insertados en la película cuando el usuario

estira los bordes de la misma (o de la página web en la que se encuentre) ¿Queremos mantener las
proporciones? Este comando nos permite controlarlo.
- showmenú: Si has visto el menú que aparece al pulsar el botón derecho del ratón sobre una película
Flash, seguro que has pensado en hacerlo desaparecer ... puede que no interese que los usuarios puedan
moverse a sus anchas por nuestra película. Ejecutando esta sentencia del modo adecuado (false),
podremos ocultarlo.
- trepallkeys: Sirve para detectar las pulsaciones de todas las teclas durante la reproducción de nuestras
películas.
Todas estas alternativas, comparten modo de uso, veámoslo:
Uso:
fscommand("comando","true / false")
comando: El comando a ejecutar (fullscreen, allowscale, etc...)
true / false: Aquí debemos escribir true o false, según queramos desactivar la opción o activarla.
Ejemplo:
fscommand("fullscreen", "true"); -> Activa la pantalla completa.
getURL: Esta acción se emplea para abrir el navegador web y abrir la página web que deseemos.
Uso:
getURL(url , ventana , "variables")
url: Dirección web a la que queremos acceder (se abrirá una ventana).
ventana: Parámetro OPCIONAL. Modo en el que queremos abrir la ventana (en la ventana actual (_self)
en otra nueva (_blank) etc...)
variables: Parámetro OPCIONAL, puede haber varios. Si la página lo permite (es ASP, PHP etc...)
podemos enviarle variables.

Ejemplo:
getURL("http://www.aulaclic.com", "_blank");
loadMovie / loadMovieNum: Esta acción permite cargar nuevas películas Flash o imágenes en nuestra
película de forma dinámica (la película se cargará cuando se lo indiquemos, y no antes).
Uso:
loadMovieNum(url , nivel / destino, variables)
url: Dirección absoluta donde está situada la película SWF o la imagen JPEG
nivel / destino: Nivel donde cargaremos la película, teniendo en cuenta que el nivel básico es el 0, luego
va el 1 y así sucesivamente. Cada nivel superior se sitúa delante del anterior y toma el control. Si lo
usamos como destino, aquí deberemos introducir el nombre del movieclip donde cargaremos la película
o el nombre del marco si estamos cargando un fichero SWF en una página HTML con marcos.
variables: Parámetro OPCIONAL. Podemos enviar variables.
Ejemplo:
loadMovieNum("MiPeli2.swf", 0) --> Cargamos la película "MiPeli2.swf" en el nivel principal. No

enviamos variables.
Acciones - Condiciones
Estas acciones sirven para controlar la lógica de la película. Se puede decir que nos permiten "hablar"
con Flash para indicarle lo que debe hacer ante distintas situaciones. Por ejemplo, ahora que conocemos
muchas Acciones, ¿Cómo indicarle a Flash que "si la variable x = 3, entonces vaya al fotograma 5, y
sino, vaya al fotograma 10"?. Sabemos comparar, sabemos ir a los fotogramas, pero no sabemos decirle
a Flash "Si pasa esto, haz una cosa, y sino, haz la otra...". Veamos cómo decírselo:
if ... else: Si partimos de que la traducción literal de if es "si..." y la de else es "sino ...", nos encontramos
de repente con todas las herramientas para decirle a Flash: "si (pasa una condicion) {haz esto} sino {haz
lo otro}"
Veamos antes que nada su Uso para comprenderlo mejor:
Uso:
if (condición) {sentencias1 ... } else {sentencias2 ... }
if: Indica que acción que viene a continuación es una condicional

condicion: Indica una condicion que DEBE cumplirse para que sucedan las acciones indicadas en
"sentencias1". Si éstas no se cumplen, entonces lo que sucede es lo especificado en las acciones
indicadas en "sentencias2".
Para que una condición se cumpla, debe tener como resultado true, o lo que es lo mismo, verdadero, o
lo que es lo mismo, 1. De ahí la importancia de los operadores de comparación y el valor que devuelven.
sentencias1: Conjunto de acciones que sucederán si la condición se evalúa como verdadera. Si hay más
de 1, deben incluirse todas ENTRE LLAVES
else: Especifica la alternativa si condicion se evalúa a falso. Es OPTATIVO. Sino existe, y no se

cumple la condición, no se hará nada, pues no lo hemos especificado.
sentencias2: Conjunto de acciones que sucederán si la condición se evalúa como falsa. Si hay más de 1,
deben incluirse todas ENTRE LLAVES
Ejemplo:
if (x == 2) {gotoAndPlay(6); } --> Si la variable x vale 2, entonces saltamos al fotograma 2, sino, no

hacemos nada
if (y > 7) { Stop(); } else {gotoAndPlay(1); } --> si la variable y es mayor que 7, paramos la película,
sino, volvemos al fotograma 1.
Los Objetos
Los Objetos, como ya hemos visto en el tema básico, son instancias de una determinada clase. Esto
es, son representantes de una clase ya definida. Así, son objetos, por ejemplo, un botón, un clip de
película, un gráfico o un sonido ... es decir, que prácticamente TODO es un OBJETO en Flash 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. Podeis encontrar una lista con todas las
propiedades, métodos y eventos de los objetos en el Panel Acciones.
Objeto "Button" (Botón)
Los objetos de tipo Botón tienen 4 estados, como ya se ha visto en el capítulo correspondiente y
reaccionan ante métodos especiales como "OnRollOver", "OnPress" ... que permitirán que sucedan
cosas cuando el usuario haga clic sobre estos botones, pase el ratón por encima etc...

Cuando nos interese que una imagen que hayamos diseñado se comporte como un botón, bastará
convertirla a botón (del modo visto en el capítulo correspondiente) y ya podremos usar los eventos
típicos de un botón.
Objeto "MovieClip" (Clip de Película)
Cuando necesitemos crear una película Flash dentro de otra película, pero no queramos tener 2 ficheros
separados ni molestarnos en cargar una película u otra, deberemos crear un objeto movieclip. Entre sus
propiedades especiales destaca que los objetos "clip de película" tienen, internamente, una línea de
tiempos que corre INDEPENDIENTEMENTE de la línea de tiempos de la película principal de Flash, lo
que nos permite crear animaciones tan complejas e independientes como queramos (podemos crear
tantos clips de película dentro de otros como queramos, por ejemplo).
Objeto "Sound" (Sonido)
Los objetos sonidos no son visuales, y por tanto, no podremos ver como quedan en los fotogramas, al
igual que haríamos con un botón o un clip de película. Deberemos controlarlos, por tanto, desde el Panel
Acciones y usando ActionScript. Tienen multitud de métodos especiales, muy potentes y útiles,
podemos parar un sonido, crear un bucle, darle efectos sonoros etc...
Podríamos, por ejemplo, crear un objeto de tipo sonido y después hacer que al pulsar un botón suene.
(En el tema siguiente se verá algún ejemplo de uso de sonidos).
Objeto "Mouse" (Ratón)
El objeto mouse es uno de los objetos de Flash que ya está definido por Flash, pues hace referencia al
ratón de Windows (al que manejará el usuario que vea nuestra película). Si lo usamos, podremos acceder
a las propiedades del ratón de Windows, tipo de cursos, efectos asociados, detección de su posición etc...
Vale la pena insistir en que su manejo NO es análogo al de otros objetos como el botón, pues podemos
crear tantos botones como queramos y hacer con ellos lo que decidamos, pero el objeto Mouse es único
y actúa sobre el ratón del PC del usuario que vea nuestra película. Se puede decir que es un objeto
"externo" que permite que otras partes del Sistema Operativo interactúen con nuestra película Flash. Por
tanto, es muy potente.
Objeto "Math" (Matemáticas)
Es uno de los múltiples objetos "abstractos" de Flash, ni es visual, ni parece que corresponda a nada
existente en el sistema (como el objeto "Mouse"). Su función es muy importante, pues nos permite usar
fórmulas matémáticas de modo muy sencillo. En el tema siguiente veremos algún ejemplo de su uso.
Objeto "String" (Cadena)
Es otro objeto peculiar, pues corresponde a un tipo de datos. Los strings o cadenas son secuencias de
caracteres. Si definimos una secuencia de caracteres como objeto de tipo String, podremos usar los

métodos que Flash implementa sobre ellas: Seleccionar subcadenas de letras, buscar una determinada
letra en una palabra, convertir la palabra a letras mayúsculas y un largo etc...
Las Propiedades
NOTA: Te recomendamos ver el Videotutorial 42
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.

Ejemplos ActionScript (I)
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 parentésis, la acción asociada al botón se producirá en un momento o en
otro. En este caso, hemos escrito "release" que significa que la acción se producirá cuando, tras pulsar
nuestro botón, el usuario deje de hacer clic con el ratón.
La segunda línea es la acción que se producirá. En este caso, movemos la cabeza lectora de Flash al
fotograma 15. Ejemplo del código situado a la izquierda. Partimos 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.aulaclic.com", "_blank");
}
Esta acción provoca que al pulsar un botón se abra una nueva página web en nuestro navegador por
defecto y nos muestre la página www.aulaclic.com
La primera línea tiene la misma función que en el caso anterior
La segunda línea es la llamada al navegador web propiamente dicha. Los parámetros indican la
dirección URL que queremos mostrar y el modo de ventana que contendrá a la página web. En este caso,
se abrirá una nueva ventana independiente de la actual.
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 algun evento de clip asociado (Load, KeyDown etc) que determine
cuándo se ejecutará este código (al cargarse el clip, al pulsar alguna tecla ...)
Veamos algunos de estos códigos:
loadMovieNum("aulaClic.swf", 0);
Este código AS situado dentro de un fotograma, provoca que nuestra película Flash busque una película
llamada "aulaClic.swf" EN LA CARPETA RAÍZ y la cargue en el nivel 0, es decir, en el mismo nivel
que la película actual.
La carpeta raíz es la carpeta en la que está la película principal (la que tiene este código).
loadMovieNum("mifoto.jpeg", 0);
Este código nos permite cargar en un fotograma una imagen existente en nuestra carpeta raíz con
extensión .JPEG de un modo dinámico.
Por dinámico entendemos en tiempo de ejecución, lo que significa que el tamaño de la película no lo
notará, ni tampoco la velocidad de descarga de nuestra película. Sólo cuando haga falta ver la imagen y
se acceda al fotograma que realice esta llamada, se cargará la imagen y se podrá ver en la película. La
cargamos en el nivel 0.
Si tuviéramos la imagen en una carpeta llamada "Imágenes" que se encuentra dentro de nuestro
directorio raíz, podríamos acceder a ella del siguiente modo:
loadMovieNum("Imagenes/mifoto.jpeg", 0);
Es conveniente remarcar también, que la imagen debe estar en formato .JPEG, no sirve el formato .JPG.

La siguiente acción debe incluirse dentro de un botón, pues sucederá al hacer clic sobre él (de este modo
el ejemplo es más práctico)
on (release) {
r1.gotoAndPlay(2);
}
Esta acción provoca que al pulsar un botón vayamos al fotograma 2 de un Clip de Película
determinado. El fotograma de la película principal NO VARIARÁ.
La primera línea es la comentada anteriormente
La segunda línea es la acción que se producirá. Flash busca un objeto llamado r1 de tipo clip de película
(movieclip) y mueve su cabeza lectora hasta el fotograma 2. La cabeza lectora de la película principal es
completamente INDEPENDIENTE de la cabeza lectora de los clips de película y no se verá alterada.
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.
Ahora que ya sabemos controlar los sonidos mediante ActionScript, veamos un ejemplo que reune todo
lo visto anteriormente.
En este ejemplo:
- Tenemos un único fotograma con 3 botones. En este fotograma tenemos insertado el Código 1.

- Los 3 botones tienen distintas funcionalidades:
- En el botón rojo, está insertado el Código 2
- En el botón azul, está insertado el Código 3
- En el botón verde, está insertado el Código 4
Ejemplos de ActionScript en objetos abstractos. El objeto MATH
Como ya sabemos, los objetos no visibles también se controlan con ActionScript. Vamos a ver
algunos ejemplos del funcionamiento del objeto Math y como sacarle partido.
x = Math.random();
El Método "random" del objeto Math genera un número aleatorio entre 0 y 1. En este caso, el resultado
lo almacenamos en la variable x, para poder usarlo después...
Las utilidades de este métodos son muchas, generar claves secretas, passwords, números de loteria etc...
x = Math.round(4,3);
El Método "round" REDONDEA el parámetro introducido eliminando la parte decimal del mismo.
En el ejemplo, x pasaría a valer 4.
x = Math.max(5 , 2);
El Método "max" obtiene el valor máximo entre 2 números.

En el ejemplo, x pasaría a valer 5.
El objeto Math es muy útil y nos ahorra mucho trabajo, pues hay multitud de operaciones que responden
a alguno de sus métodos y no tenemos porqué implementar. Basta buscarlos en el manual y usarlos.
Creación de un cargador o preloader
Vamos a analizar el código de un cargador o preloader para acabar de afianzar nuestros

conocimientos de ActionScript:
Los cargadores o preloaders sólo son necesarios cuando las películas adquieren un tamaño considerable
y resulta inviable visionar la película sin tenerla toda cargada (porque se atasca, aparecen partes
incompletas etc...). Vamos a suponer pues, que tenemos una película con 150 fotogramas. Los 3
primeros los reservaremos para crear nuestro cargador. En el Fotograma 4 comienza la película...
NOTA: Junto a cada línea insertaremos comentarios (texto entre los símbolos /* y */) que son líneas que
Flash reconoce como tales y que no tiene en cuenta a la hora de ejecutar el código (es como si no
existieran). Se usan para clarificar y esplicar el código que escribamos y para eso lo usaremos a
continuación. Les cambiaremos el color para que resalten aún más. Evidentemente no son necesarios en
el código que finalmente insertemos en nuestra película.
Este es el código que insertaremos:
-----------------------------------------------------------------------------
/* Fotograma 1 */
bytes_totales = getBytesTotal(); /* Hallamos el tamaño de nuestra película con la Acción

"getBytesTotal()" y lo almacenamos en la variable bytes_totales. */
-----------------------------------------------------------------------------
/* Fotograma 2 */
bytes_cargados = getBytesLoaded(); /* Hallamos los bytes que llevamos cargados en memoria hasta el
momento. Este valor lo asignamos a la variable bytes_cargados */
if (bytes_cargados >= bytes_totales) { /* Esta es la lógica del cargador. Si llevamos cargados en

memoria los mismos bytes o más de los que ocupa la película, ejecutamos la siguiente línea */

gotoAndPlay(4); /* Si hemos llegado hasta aquí es porque toda la película está cargada en memoria
(bytes_cargados >= bytes_totales) y podemos comenzar a ver la película. Ejecutamos gotoAndPlay(4)
que nos llevará hasta al fotograma donde comienza la película. */
else { /* Si aun no hemos cargado toda la película */
porcentaje = ((bytes_cargados/bytes_totales)*100); /* Averiguamos el porcentaje que llevamos

cargado realizando la división entre los bytes_cargados y los bytes_totales y multiplicándolo por 100 */
txt_salida = Math.floor(porcentaje)+"%"; /* Almacenamos en la variable "txt_salida" el porcentaje

que llevamos junto al símbolo "%". En la película principal tendremos un campo de texto dinámico
llamado "txt_salida" que nos mostrará el porcentaje de película que llevamos cargado en cada instante
*/
}
-----------------------------------------------------------------------------
/* Fotograma 3 */
gotoAndPlay(2); /* Si llegamos al fotograma 3 es porque no está cargada toda la película, de lo

contrario estaríamos ya en el fotograma 4. Como aún no está cargada, volvemos al fotograma anterior
para ver si ya lo está (mediante gotoAndPlay(2);). Esto lo haremos tantas veces como haga falta para
dar tiempo al ordenador del usuario a ir cargando en memoria la película. */
-----------------------------------------------------------------------------
Resumiendo:
Fotograma 1: En el Fotograma 1 se calculan los bytes totales que ocupa la película. Después pasamos
al Fotograma 2.
Fotograma 2: Cada vez que accedamos al Fotograma 2, nuestro código ActionScript averigua los bytes
que llevamos cargados en memoria y los compara con los totales (que se hallaron en el Fotograma 1 y
no vuelven a averiguarse, pues no varían). Si ya está toda la película cargada, vamos al fotograma 4 y
comenzamos a reproducir la película, sino, pasamos al fotograma 3
Fotograma 3: El Fotograma 3 volverá a mandar la cabeza lectora al fotograma 2. Haciendo este ciclo,
damos tiempo al ordenador a ir cargando poco a poco la película, hasta que llegue un momento que esté
toda cargada y pasemos al Fotograma 4. El cálculo del porcentaje es un "adorno" que nos permitimos,

pues con un poco más de esfuerzo averiguamos cuánta película llevamos cargada y la mostramos por
pantalla de un modo elegante (en porcentaje) haciendo la espera del usuario menos aburrida.
Fotograma 4: Aquí comienza la película... (Ya no se volverá nunca a ninguno de los fotogramas
anteriores).
A la derecha mostramos el resultado. La película se comenzará a cargar al pulsar el botón. El código

insertado es EXACTAMENTE el que se muestra arriba, no hay NADA MÁS. Tan sólo se han
añadido unos textos y unas imágenes para aumentar el tamaño de la película, de lo contrario la carga
sería demasiado rápida y no llegaría a verse.
También se ha insertado el texto dinámico que muestra el porcentaje.
Si el cargador no llega a verse, lo más probable sea que ya esté cargada en la memoria caché de vuestro
ordenador o que esteis viendo este curso desde el CD-Rom o desde vuestro propio Disco Duro, donde la
velocidad de descarga estan rápida que sería necesaria una película de varios MBytes para que hiciera
falta un cargador.
Probad el código en una película que coloqueis en un servidor web y podreis ver los resultados sin
problemas.

Navegación (I).
En este tema veremos los puntos más importantes en los que te podrás apoyar para realizar tus
animaciones en Flash usando ActionScript.
Esta unidad, la de Navegación, está especialmente orientada a la web, pues veremos cómo crear
elementos que te ayudarán más tarde a crear tus propias presentaciones, secciones, etc. Todo ello
apoyado con animaciones y vinculadas entre sí.
A lo largo del tema utilizaremos este ejemplo para ilustrar la teoría de forma guiada.
Los Botones
Uno de los elementos que más nos van a ayudar a la hora de añadir interactividad en el diseño son los
botones.
En el ejemplo nos hemos ayudado de los botones para crear la navegación entre las diferentes secciones.

Así que el primer paso, después de haber creado la interfaz de la película en una capa, será crear e
insertar los botones en una nueva capa para trabajar con mayor facilidad.
Para asignarle una acción a un botón es necesario darle un nombre de instancia. Para ello (y como
hemos visto en unidades anteriores) escribimos el nombre que queramos (al cual nos referiremos más
tarde para llamar al botón) en el Inspector de Propiedades, en este caso lo hemos llamado equipo.
Luego, con el botón seleccionado, abrimos el Panel Acciones y añadiremos el código que deberá realizar
el botón.
Ésta es la parte más importante pues deberemos decidir a qué estímulo (o evento) responderá el botón.
Existen varios eventos que son capturados en Flash, nombraremos los más importantes:
• press: ejecuta la acción al presionarse el botón.

• release: ejecuta la acción al soltarse el botón (después de haberlo presionado).
• rollOver: ejecuta la acción al desplazar el ratón dentro del botón.
• rollOut: ejecuta la acción al desplazar el ratón fuera del botón.
Por ello, escribiremos en el panel acciones el siguiente código para nuestros botones:
on (release) {
Nota: ActionScript diferencia entre mayúsculas y minúsculas, por lo que si escribes, por ejemplo,
Release no será reconocido.
Entre las llaves {} introduciremos el código que queremos que se ejecute al producirse el evento
seleccionado sobre el botón.

Puedes manejar otros eventos además de los mencionados anteriormente (press, release, rollOver y
rollOut), y son los siguientes:
• dragOut: se ejecuta cuando se presiona el botón y, sin soltarlo, el ratón se desplaza fuera de él.
• dragOver: se ejecuta cuando se presiona el botón y, sin soltarlo, el ratón se desplaza fuera de él
para luego volver a situarse sobre éste.
• releaseOutside: se ejecuta cuando se presiona el botón y, sin soltarlo, el ratón se desplaza fuera
de él y luego se suelta el botón del ratón. Observa que antes de producirse este evento se han
producido antes los eventos release y dragOut.
Siguiendo la misma sintaxis puedes añadir un manejador de eventos de teclado:
on (keyPress) {
De este modo, si se pulsase una tecla determinada se ejecutaría una acción:
on (keyPress) {
if (Key.getCode() == Key.RIGHT) {
// ejecutar cualquier acción
}
}
En este ejemplo, cuando se produce una pulsación de tecla se evalúa en la segunda línea. Si la tecla
pulsada es la flecha Derecha se ejecutará la acción determinada.
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.
Es posible el uso del Panel Comportamiento para crear saltos a fotogramas de forma sencilla y sin tener
que escribir ninguna línea de código.
Comportamientos
Es posible asignar un salto de fotograma a cualquier fotograma u objeto sin tener que acceder al Panel
Acciones, para ello simplemente selecciona el objeto o fotograma y haz clic en Ventana →
Comportamientos.
Se abrirá el siguiente panel:

Desde aquí añadir acciones es muy sencillo. El único inconveniente es que las opciones son bastante
limitadas y no son tan versátiles como la escritura directa del código ActionScript.
Para crear un salto en la línea de tiempo deberás hacer clic en el botón para añadir un
comportamiento nuevo.
Luego selecciona Clip de Película y podrás elegir entre dos opciones que nos interesan:
Como hemos visto anteriormente la diferencia entre la opción Ir y detener en fotograma o etiqueta e Ir y
reproducir en fotograma o etiqueta es simple.
La primera desplaza el cabezal hasta el fotograma indicado y lo detiene allí. La segunda desplaza el
cabezal y sigue reproduciendo a partir de allí.
Elijas la opción que elijas, el cuadro de diálogo que se abrirá será similar:

En esta ventana deberás especificar el fotograma al que quieres saltar. Podrás referirte a él como un
número o como una etiqueta (si se le fue asignada una).
El campo relativo/absoluto lo explicaremos más adelante cuando veamos los movieclips. Pero, como
adelanto, en principio no importa cuál de los dos elijas si no vas a utilizar el símbolo asociado a la
acción en otro sitio.
De todas formas es recomendable el uso de la opción Relativo, pues así el salto se hará respecto al
objeto en sí y no al lugar en el que se encuentra.
Pulsa el botón Aceptar y el código ActionScript se generará solo. No tendrás que hacer nada más.
Existen los controladores prevScene() y nextScene() que hacen avanzar el cabezal a escenas anteriores o
siguientes. Así que veremos qué son las escenas para poder utilizarlos también.
Las Escenas
Flash permite el uso de escenas para separar diferentes temas en una sola película. Se suelen utilizar
sobre todo en animaciones, donde una parte de la acción transcurre sobre un fondo y la siguiente sobre
otro completamente diferente.

De este modo podemos usar las escenas para representar diferentes secciones muy diferentes en nuestra
película, por ejemplo, crear una escena para el cargador, otra para la película principal y una tercera para
una sección que se diferencie completamente del resto y nos sea más cómodo trabajar con ella
independientemente.
A pesar del hecho de que las escenas se trabajan como líneas de tiempo diferentes, al crear el archivo
SWF éstas se alinean en orden reproduciéndose una detrás de otra.
Por ello, al publicar el documento los fotogramas de las escenas se numerarán respecto a esto. Es decir,
si tenemos una primera escena que va del fotograma 1 al 50, la segunda escena comenzará en el
fotograma 51.
Todo esto hace que las escenas, en algunos casos estén desaconsejadas por las siguientes razones:
• El uso de escenas obliga al usuario a descargar el documento en su totalidad, a pesar de que es

posible que no navegue por todas las secciones. Existe la posibilidad, como veremos más
adelante, de cargar en cualquier momento archivos SWF para reproducirlos en la pantalla
principal. De esta forma emularíamos el uso de las escenas cargando diferentes documentos
dependiendo de la sección a mostrar.
• Cuando añadimos ActionScript a nuestras escenas el resultado puede ser, a veces, imprevisible.
Como hemos explicado anteriormente, al crearse un archivo con una línea de tiempo continua las
acciones a realizar pueden ser inesperadas.
En el Panel Escena (ábrelo desde Ventana → Otros paneles → Escena) podrás ver las escenas actuales
de la película.
En principio solamente encontrarás una (Escena 1), es posible añadir más escenas pulsando el botón
Añadir escena . Para cambiar el nombre de una escena haz doble clic sobre su nombre en el panel y
escribe el que quieras.
Puedes eliminar una escena utilizando el botón Eliminar escena o duplicarla con el botón Duplicar
escena .

Como hemos comentado antes (y si no existe código ActionScript que modifique esto) las escenas se
reproducen una después de la otra en el orden en el que se encuentran en el Panel Escena. Puedes
cambiar este orden con solo arrastrar y colocar la escena en cuestión en su lugar correspondiente.
Trabajar con una escena es muy sencillo, basta con seleccionarla en el panel y su contenido se mostrará
en el Escenario. Podrás trabajar con ella como si se tratase de una película independiente.
Pero veamos cómo podemos utilizar ActionScript para desplazarnos de escena a escena.
Antes hemos mencionado las funciones prevScene() y nextScene(). Estos comandos hacen que el
cabezal de reproducción se desplace de una escena a otra en el orden en el que se encuentran en el Panel
Escena.
Pero existe otra posibilidad.
Según el ejemplo que estamos siguiendo creamos una nueva escena llamada escena_otros. En el botón
Otros Restaurantes hemos añadido el siguiente código:
on (release) {
gotoAndPlay("escena_otros", 1);
}
Con esto estamos indicando que al soltarse el botón el cabezal se desplace al fotograma 1 de la escena
escena_otros y empiece a reproducirse a partir de allí. Sencillo, ¿verdad?
Los MovieClips
En el tema de Clips de Película vimos que se tratan de objetos con línea de tiempo propia.
Podemos utilizarlos para incluir elementos en nuestra película con una animación independiente. De este
modo aunque la película principal esté detenida el clip seguirá actuando según su propio cabezal de
reproducción.
Existen métodos para manejar la línea de tiempo de los clips, idénticas a las anteriores, y que veremos a
continuación.
Lo primero que deberemos aprender es a acceder a las propiedades y métodos de los objetos. Esto es un
recurso muy utilizado pero a la vez es muy sencillo. Lo veremos con un ejemplo.
Queremos que al pulsar un botón el movieclip avance en su línea de tiempo hasta su fotograma 20. El
código que deberemos escribir en el botón será el siguiente:
on (release) {
miClip.gotoAndPlay(20);
}

Fíjate en cómo hemos escrito la función. Primero hemos señalado el clip sobre el que queremos actuar
escribiendo su nombre de instancia:
Y después de añadir un punto hemos indicado la función que se ejecutará.
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
cuestion.
this siempre hará referencia al objeto donde se encuentre la variable.
Nota: Estos manejadores son tan válidos para movieclips como para la película general en sí, pues
podríamos considerar que una película es un movieclip más grande.

También existen modos de capturar estos eventos sin tener que escribir el código dentro del movieclip.
Sería de la siguiente forma:
miClip.onPress = function() {
miClip.play();
}
Estos eventos tienen que asociarse con una función (veremos este concepto en el punto siguiente). Pero
de esta forma podemos escribir el código directamente sobre el fotograma y controlar cuando se ejecuta
una acción sobre el movieclip.
En el ejemplo, el clip comenzará a reproducirse en cuanto se haga clic sobre él.
Veamos el conjunto de eventos más importantes para los movieclips:
• onPress = function() {}: se ejecuta cuando se presiona el botón del ratón sobre el movieclip.
• onRelease = function() {}: se ejecuta cuando se suelta el botón del ratón sobre el movieclip.
• onRollOver = function() {}: se ejecuta cuando se desplaza el ratón dentro del movieclip.
• onRollOut = function() {}: se ejecuta cuando se desplaza el ratón fuera del movieclip.
• onKeyDown = function() {}: se ejecuta cuando se presiona una tecla con el clip de película
resaltado.
• onKeyUp = function() {}: se ejecuta cuando se suelta una tecla con el clip de película resaltado.
Puedes manejar otros eventos además de los mencionados anteriormente (onPress, onRelease,
onRollOver, onRollOut, onKeyDown y onKeyUp), y son los siguientes:
• onDragOut = function() {}: se ejecuta cuando se presiona el movieclip y, sin soltarlo, el ratón se
desplaza fuera de él.
• onDragOver = function() {}: se ejecuta cuando se presiona el movieclip y, sin soltarlo, el ratón
se desplaza fuera de él para luego volver a situarse sobre éste.
• onReleaseOutside = function() {}: se ejecuta cuando se presiona el movieclip y, sin soltarlo, el
ratón se desplaza fuera de él y luego se suelta el botón del ratón. Observa que antes de producirse
este evento se han producido antes los eventos onRelease y onDragOut.
• onMouseDown = function() {}: se ejecuta cuando se presiona el botón del ratón en cualquier
parte del escenario (no necesariamente sobre el movieclip).
• onMouseUp = function() {}: se ejecuta cuando se suelta el botón del ratón en cualquier parte del
escenario (no necesariamente sobre el movieclip).
• onMouseMove = function() {}: se ejecuta cuando se mueve el ratón en cualquier parte del
escenario (no necesariamente sobre el movieclip).

• onEnterFrame = function() {}: se ejecuta cada vez que se entre en un fotograma del movie clip.
En una reproducción normal se ejecutara tantas veces como fotogramas haya y a la velocidad
indicada en el archivo SWF.
• onSetFocus = function() {}: se ejecuta cuando un movieclip se selecciona con el teclado usando
el tabulador normalmente.
• onKillFocus = function(objeto) {}: se ejecuta cuando deja de estar seleccionado por la pulsación
del teclado.
En este último evento deberá indicarse el siguiente objeto que tomará el foco, por ejemplo:
miClip.onKillFocus = function(otroClip) {
miClip.stop();
}
Este código hace que cuando se pierda el foco sobre miClip este se detenga (miClip.stop();) y que el
siguiente objeto en tomar el foco sea otroClip.
Podemos usar también los eventos onLoad y onUnLoad, que son respectivos a la carga y descarga de
movieclips. Pero estos conceptos serán explicados más adelante.
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");
var matriz3:Array=
["Lunes","Martes","Miércoles","Jueves","Viernes","Sábado","Domingo"];
Arrays
Veamos un ejemplo práctico de los arrays:
var miMatriz:Array =
["Lunes","Martes","Miércoles","Jueves","Viernes","Sábado","Domingo"];
var i:Number;
for (i = 0; i < 7; i++) {

trace(miMatriz[i]);
}
Este bloque de código ejecuta un bucle utilizando la sentencia for.
Esta sentencia requiere de un valor inicial, una condición que mientras se cumpla seguirá realizando el
bucle y un método de actualización del valor.
for (valorInicial; condicion; metodoActualizacion) {
En el ejemplo hemos definido un bucle de 0 hasta 6 (que es el último número que cumple la condición
menor que 7) y que vaya aumentando de uno en uno (i++).
Así el bucle se realizará 7 veces mostrando primero el elemento 0 de la matriz, luego el elemento 1,
luego el 2 y así hasta llegar al 6.
Pulsa el botón Aceptar y el código ActionScript se generará solo. No tendrás que hacer nada más.

Las Funciones
Como habrás visto en los ejemplos anteriores, una función es un bloque de código que podemos utilizar
en cualquier parte del archivo SWF con sólo llamarla:
function miFuncion() {
var miVariable:Number = 1;
trace(miVariable);
}
En este ejemplo hemos creado una función que envía el contenido de la variable miVariable al Panel
Salida.
Podemos escribir la siguiente línea en cualquier momento despué de haber pasado la función y esta se
ejecutará:
miFuncion();
Como ves, crear funciones es bastante sencillo. Además podemos crear funciones un poco más
complejas enviándole parámetros:
function enviaSalida(miVariable:String) {
trace(miVariable);
}
Si en cualquier momento escribimos:
enviaSalida("Hola!");
Se mostrará el mensaje en el Panel Salida.
El modo de crear funciones con parámetros es bastante intuitivo. Al crear la función deberás indicar que
tipo de variable le vas a enviar. En nuestro ejemplo hemos definido el parámetro como de tipo String.
De este modo podrás utilizar la variable miVariable dentro de la función y trabajar con ella como
quieras.
Para llamar a la función sólo deberás escribir su nombre y indicarle el parámetro que le quieres enviar.
Puedes crear funciones con más de un parámetro, para ello sólo tendrás que separar éstos por comas:
function miFuncion(parametro1:String, parametro2:Number, parametro3:Boolean) {

// código
}
miFuncion("hola", 2, false);

Cargando Archivos
Una vez vistos todos estos conceptos pasaremos a ver una función en concreto, la función LoadMovie.
Esta función te permite modificar el contenido de un clip de película y cargar en él otro archivo SWF o
incluso una imagen con formato JPG, GIF o PNG.
Su uso es el siguiente:
miMovieClip.loadMovie("pelis/clip.swf");
Con esto lo que hemos hecho es cambiar el contenido del clip miMovieClip y lo hemos sustituido por el
archivo clip.swf que se encontraba en la carpeta pelis. Es sencillo, ¿verdad?
También puedes utilizarla de esta forma:
loadMovie("archivo.swf", miMovieClip);
Es una variación de la anterior, aquí indicamos qué archivo queremos cargar y dónde. Si en vez de
cargarlo en miMovieClip lo cargasemos en this se cargaría en el clip en el que está contenida la función.
Incluso si éste es el clip de película principal.
Vamos al ejemplo. En la sección Encuéntranos hacemos clic en un botón de tipo texto y nos aparece el
mapa donde localizar el restaurante:
El código que hemos insertado en el botón es sencillo:
on (release) {

loadMovie("mapa.swf", this);
}
Los parámetros que le hemos pasado son el nombre de la película a cargar y su destino (this, el propio
clip donde estaba el botón).
Una línea equivalente hubiese sido esta:
this.loadMovie("mapa.swf");
Para descargar archivos cargados con la función loadMovie utiliza unloadMovie.
Esto nos servirá para liberar a un movieclip de la película o imagen que habíamos cargado, dejándolo
vacío.
Su sintaxis es la siguiente:
miClip.unloadMovie();
unloadMovie(miClip);
Existe la posibilidad de cargar archivos de otra manera, en vez de indicando su destino indicaremos su
nivel. Esto es, vamos a cargar varios archivos en un mismo sitio y los dispondremos uno encima de otro,
de forma que los que se encuentren en capas superiores taparán a los de abajo.
Para ello deberemos utilizar la función loadMovieNum:
loadMovieNum("primera.swf", 0);
loadMovieNum("segunda.swf", 1);
loadMovieNum("tercera.swf", 2);
En este ejemplo hemos cargado 3 archivos SWF en el mismo sitio. Los tres estarán disponibles a la vez,
pero la película tercera.swf será la que se encuentre en el nivel superior.
Como puedes ver, al no poder indicarse un destino, deberás introducir esta función dentro del clip que
quieres modificar. Si fuese escrita en el código del fotograma actuaría directamente sobre la película
principal.
Nota: Las películas cargadas en el nivel 0 serán las que establezcan la velocidad y tamaño de fotogramas
y su color de fondo para el resto de los fotogramas añadidos en niveles superiores.

Podemos referirnos a películas cargadas en diferentes niveles y modificar sus propiedades utilizando la
sintaxis:
_level1._visible = true;
E incluso llamar a objetos contenidos en esas películas añadiendo, simplemente, el nombre de instancia
de éste:
_level1.miClip._visible = true;
Sigue el siguiente ejercicio paso a paso para ver cómo hacer una Película con Niveles
Podemos descargar películas cargadas con la función loadMovieNum utilizando unloadMovieNum:
unloadMovieNum(2);
En esta función sólo debemos indicar el nivel donde está situada la película que queremos descargar y
cada más.
El uso de estas funciones es bastante sencillo y te ayudarán mucho en la eficiencia de tus películas. Ten
en cuenta lo que decíamos antes de las escenas.
Si creamos una película con varías escenas se almacenarán todas en un solo archivo, y el usuario tendrá
que descargarse el archivo entero para poder ver aunque sea una parte mínima de la película.
Utilizando estas funciones podemos optimizar el tiempo de descarga, pues de este modo el usuario sólo
se descargará los archivos que desee visualizar.

Cargando Información
En este apartado veremos cómo utilizar un cargador para recoger información de un archivo y mostrarla
en una película Flash.
Nos basaremos en el siguiente ejemplo:
Observa la línea de tiempos:
En la capa de acciones escribiremos todo el código para que funcione la película. La capa diapositivas
contiene el efecto que hace que la imagen se desvanezca para volver a aparecer.
Ahora explicaremos cómo lo hemos hecho.
Antes que nada añadimos un stop() en el primer fotograma para detener la acción y reanudarla más tarde
con el botón al que le hemos añadido el siguiente código:
on (release) {
gotoAndPlay (2);
}
Para que pase al fotograma dos y comience la transición. Igualmente hemos añadido un stop() en el
fotograma 11 para que se detenga la transición y espere a que se pulse de nuevo el botón y vuelva al
fotograma 2.
La transición es muy sencilla. En la capa diapositivas hemos añadido un clip de película llamado
contenedor del tamaño de la película, que será donde carguemos las imágenes con la función loadMovie,

y hemos incluido dos interpolaciones de movimiento. En el fotograma 6 bajaremos la propiedad Alfa al

0% en el Panel Propiedades. Así conseguiremos el efecto de la transición.
Mientras en el fotograma 6 añadiremos el código que hará que se cargue la imagen en contenedor y se
actualicen los campos de textos descripcion_txt y titulo_txt incluidos en la capa area_texto en un clip
llamado textoDiapositiva.
Ahora que conocemos el funcionamiento veamos el código que hemos añadido en los fotogramas 1 y 6.
Fotograma 1:
stop();
var archivo:String = "diapositivas.txt";
var total:Number = 4;
var imagenActual:Number = 1;
var matrizImagenes:Array = ["imagenes/imagen1.jpg", "imagenes/imagen2.jpg",

"imagenes/imagen3.jpg", "imagenes/imagen4.jpg"];
// cargador del archivo .txt
var cargador:LoadVars = new LoadVars();

cargador.onLoad = function(exito:Boolean) {
if (exito) {
textoDiapositiva.descripcion_txt.text = eval("cargador.descripcion"
+ imagenActual); //recupera la descripción
textoDiapositiva.titulo_txt.text = eval("cargador.titulo" +
imagenActual); //recupera el título
}
else {
textoDiapositiva.descripcion_txt.text = "No se ha podido cargar el
texto";
textoDiapositiva.titulo_txt.text = "Error";
}
}
cargador.load(archivo); //carga del texto

loadMovie(matrizImagenes[imagenActual-1], contenedor); //carga de la imagen
En las primeras líneas definimos las variables que vamos a utilizar.
• En la variable archivo introducimos la ruta del archivo de tipo txt de donde sacaremos el texto asociado
a las imágenes.
• La variable total almacena el número total de imágenes que vamos a mostrar.
• La variable imagenActual almacenará el número de la imagen que vamos a mostrar, la inicializamos a 1
para mostrar primero la primera imagen.

• La variable matrizImagenes es una variable de tipo array y almacenará las rutas de las imágenes que
vamos a mostrar.
Ahora declararemos el cargador que sacará la información del archivo txt y lo pasará a las cajas de texto.
Para ello utilizaremos el objeto LoadVars, este objeto permite enviar o recoger variables en forma de
URL.
Expliquemos esto. El objeto LoadVars es capaz de recoger una cadena de texto en forma de URL como
la siguiente:
var1=valor&var2=valor&var3=valor&var4=valor
Y sacar de allí las variables y sus valores.
La forma en la que lo hace es sencilla, a cada símbolo & que encuentre entenderá que lo siguiente que
encuentre será el nombre de una variable (igualada a su valor).
De esta forma escribiremos en el archivo de texto diapositivas.txt lo siguiente:
titulo1=Los mejores sandwiches

&descripcion1=En sa cuina creamos los sandwiches mas originales y sabrosos de toda
la ciudad.
&titulo2=Calidad Superior
&descripcion2=Nos cuidamos siempre de que nuestros platos ofrezcan la maxima
calidad.
&titulo3=Productos seleccionados
&descripcion3=Seleccionamos los productos uno a uno y de distribuidores de
confianza.
&titulo4=Nuestras especialidades
&descripcion4=No olvides probar nuestras especialidades en ensaladas y postres.
De esta forma cuando el objeto LoadVars cargue el archivo verá que hay 8 variables, y cada una de ellas
con su respectivo valor.
Veamos, pues, cómo leer y manejar estas variables.
Para declarar el objeto sólo hace falta escribir:
var cargador:LoadVars = new LoadVars();
Una vez declarado el objeto podemos trabajar con él.

Lo primero que haremos será establecer unas cuantas líneas que se ejecutarán cada vez que intentemos
cargar el archivo. Para ello aprovechamos el método onLoad del objeto:
cargador.onLoad = function(exito:Boolean) {
if (exito) {
textoDiapositiva.descripcion_txt.text = eval("cargador.descripcion"
+ imagenActual); //recupera la descripción
textoDiapositiva.titulo_txt.text = eval("cargador.titulo" +
imagenActual); //recupera el título
}
else {
textoDiapositiva.descripcion_txt.text = "No se ha podido cargar el
texto";
}
}
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.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:
loadMovie(matrizImagenes[imagenActual-1], contenedor);
Que cargarán por primera vez la imagen1 y el texto correspondiente.
En el cargador deberemos decir que cargue el contenido del array matrizImagenes de la imagen
correspondiente. Pero como las matrices empiezan por 0 la ruta de la primera imagen estará almacenada
en matrizImagenes[0].
Es por esto que al cargar la imagen la ruta que damos es:
matrizImagenes[imagenActual-1]

Ahora veremos que hemos escrito en el fotograma 6 para que se carguen las imágenes y texto que
correspondan:
if (imagenActual >= total) {

imagenActual = 1;
}
else {
imagenActual++;
}
cargador.load(archivo); //carga del texto
loadMovie(matrizImagenes[imagenActual-1], contenedor); //carga de la imagen
Este código se ejecuta en el momento en el que el contenedor tiene la propiedad Alfa al 0% por lo que es
totalmente invisible. Aprovecharemos este momento para cambiar la imagen y el texto.
Lo primero que evaluamos es si la imagenActual es mayor o igual que el número total de imágenes. Si
no lo es aumentamos el valor de imagenActual en 1:
imagenActual++;
En el caso contrario (que imagenActual fuera mayor o igual al total de imágenes) significaría que si
aumentamos el valor de imagenActual en 1 nos pasaríamos y no exitiría ni imagen ni texto para esa
posición, por lo que iniciamos de nuevo el contador a 1 para que vuelva a empezar.
Esta condición hará el efecto de que cuando se vea la última imagen y se pulse siguiente se visualice de
nuevo la primera.
Una vez actualizada la variable imagenActual pasamos a cargar la imagen:
loadMovie(matrizImagenes[imagenActual-1], contenedor);
Y a actualizar el texto utilizando el cargador:
PRACTICA 37

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

veremos que poseen propiedades que las simples cajas de texto no tienen.
Para utilizar alguno de estos componentes basta con arrastrarlo del panel al escenario, o puedes
arrastrarlo a la biblioteca para utilizarlo más tarde.
En cualquier caso, cuando hayas añadido el componente a tu película deberás darle un nombre de
instancia para poder acceder a él en el código y configurar sus opciones en el Panel Parámetros:

Veamos cuales son las opciones para los diferentes componentes:
TextInput (Introducción de texto):
• editable: true o false. Permite que el texto se pueda editar o no.

• password: true o false. Oculta el contenido del texto mostrándose un asterisco por carácter.
• text: Indica el texto inicial de la caja.
TextArea (Área de texto):
• editable: true o false. Permite que el texto se pueda editar o no.

• html: true o false. Permite que se acepte contenido HTML dentro de la caja de texto. Propiedad
muy útil para incluir enlaces en el texto.
• text: Idica el texto inicial de la caja.
• wordWrap: true o false. Permite que se pueda realizar un desplazamiento del texto de arriba
abajo. En caso de que no se permita (false) cuando el texto sobre pase el área del componente
aparecerá una barra de desplazamiento que permitirá mover el texto de izquierda a derecha.
Button (Botón):
• icon: Añade un icono al botón. Para insertar un icono deberás crear un gráfico o clip de película
y guardarlo en la Biblioteca. Una vez allí selecciónalo y haz clic derecho sobre él y selecciona
Vinculación. Marca la casilla Exportar para ActionScript en el cuadro de diálogo que aparecerá y
dale un nombre en Identificador. Este nombre es el que deberás escribir en el campo icon del
componente botón. Ni el botón ni el símbolo se ajustará al tamaño del otro, así que deberás
modificar sus tamaños para que el icono no sobresalga del botón.
• label: Texto que se leerá en el botón.
• labelPlacement: left, right, top o bottom. Indica la posición de la etiqueta de texto en caso de
que se utilice junto a un icono. Respectivamente, izquierda, derecha, arriba y abajo.
• selected: true o false. Indica si el botón se encuentra seleccionado.
• toggle: true o false. Cuando se encuentra a true hace que el botón pueda tomar dos posiciones,
presionado y no presionado.
RadioButton (Botón de opción):
• data: Especifica los datos que se asociarán al RadioButton. La propiedad data puede ser
cualquier tipo de datos. Puedes acceder a esta propiedad a través de código para ver que
contiene.
• groupName: Nombre del grupo. En un grupo de botones de opción sólo uno de ello puede estar
seleccionado. Definiremos este grupo mediante esta propiedad. Todos los botones que tengan el
mismo nombre en groupName pertenecerán al mismo grupo.
• label: Texto que se leerá al lado del botón.
• labelPlacement: left, right, top o bottom. Indica la posición de la etiqueta de texto respecto al
botón. Respectivamente, izquierda, derecha, arriba y abajo.
• selected: true o false. Indica si el botón se haya seleccionado o no. De nuevo, en un mismo
grupo sólo un botón de opción puede estar seleccionado.
CheckBox (Casilla de verificación):

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

• labelPlacement: left, right, top o bottom. Indica la posición de la etiqueta de texto respecto a la
casilla. Respectivamente, izquierda, derecha, arriba y abajo.
• selected: true o false. Indica si la casilla de verificación se haya seleccionada.
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:

miManejador, "icono", Alert.OK);

miManejador, "icono");

miManejador);
Alert.show("Mensaje de alerta.", "Título", Alert.OK | Alert.CANCEL, null);
Alert.show("Mensaje de alerta.", "Título", Alert.OK | Alert.CANCEL);
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 = "";
}
reset_btn.addEventListener("click", escuchadorLimpiar);
Como puedes ver, hemos creado un escuchador para reset_btn. Cuando se activa simplemente vaciamos
el contenido de los campos de texto que queramos.

También podríamos iniciar los campos de otra forma:
nombre_txt.text = "Escribe aquí tu nombre";

email_txt.text = "Escribe aquí tu e-mail";
mensaje_txt.text = "Escribe aquí tu mensaje";
En definitiva, puedes tratar los campos como quieras.
Para el botón de envío deberás asociar un escuchador del mismo modo, pero el código que irá incluido
en él deberá enviar los datos, que será lo que veamos en el siguiente apartado.
Envío de formularios
A partir de ahora veremos cómo afrontar el envío y la recepción de datos con formularios.
Lo haremos a través de este ejemplo, donde encontraremos elementos de entrada (en los que tendremos
que escribir datos para enviarlos) y de salida (donde tendremos que recoger datos de un archivo externo
para mostrarlo).
El envío de datos de formulario lo realizaremos utilizando el objeto LoadVars que ya hemos visto. Pero
en este caso, en vez de recabar información, lo usaremos para enviarla.
Su uso es el siguiente:
var escuchadorEnvia:Object = new Object();

escuchadorEnvia.click = function(evt:Object) {
var envio:LoadVars = new LoadVars();
// rellenamos las variables

envio.autor = nombre_txt.text;
envio.email = mail_txt.text;
envio.mensaje = mensaje_txt.text;
envio.onLoad = function(exito:Boolean) {
if (exito) {
nombre_txt.text = "";
mail_txt.text = "";
mensaje_txt.text = "";
}
else {
Alert.show("Ha habido un error en el envío");
}
}
// enviamos las variables al archivo PHP

envio.sendAndLoad("enviar_comentario.php", envio, "POST");
}
submit_btn.addEventListener("click", escuchadorEnvia);
Hemos definido un escuchador que se ejecutará cuando se pulse el botón de enviar.

Dentro del código de éste hemos declarado un objeto LoadVars llamado envio.
Almacenar las variables en el objeto es tan fácil como escribir lo siguiente:
envio.autor = nombre_txt.text;
envio.email = mail_txt.text;
envio.mensaje = mensaje_txt.text;
Y sólo quedaría enviarlo con el método send.
envio.send("enviar_comentario.php", "_blank", "POST");
Esta función envía las variables almacenadas en LoadVars utilizando el método especificado en el tercer
parámetro (puede ser POST o GET).
Si quieres que el script que se ejecuta se abra en una ventana deberás indicarlo en el segundo parámetro.
Estas dos últimas funciones son opcionales y podríamos escribir solamente:
envio.send("enviar_comentario.php");
En el ejemplo no hemos utilizado el método send, sino el método sendAndLoad.
envio.sendAndLoad("enviar_comentario.php", envio, "POST");
De este modo podemos añadir un controlador onLoad para evaluar si el envío se realizó correctamente.
En el segundo parámetro deberemos indicar cuál será el objeto que se cargará (en nuestro caso el mismo
objeto envio).
Por lo que además de realizar el envío hemos añadido las líneas:
envio.onLoad = function(exito:Boolean) {
if (exito) {
nombre_txt.text = "";
mail_txt.text = "";
mensaje_txt.text = "";
}
else {
Alert.show("Ha habido un error en el envío");
}
}

Que vacía los campos si la carga del script se realizó correctamente o muestra una alerta en caso
contrario.
Nosotros en el ejemplo hemos añadido algunos validadores para asegurar que todos los campos se han
rellenado. Así, antes de declarar el objeto LoadVars hemos introducido unas cuantas condiciones del
tipo:
if (nombre_txt.text.length == 0) {
Alert.show("Introduce tu nombre", "Error", Alert.OK);
return false;
}
Donde se evalúa la longitud del texto del campo nombre. Si llega a la línea return false; se saldrá de la
función y no llegará a enviar los datos.
El script enviar_comentario.php se encargaría de recibir los datos, tratarlos y luego almacenarlos o

enviarlos por correo.
Nosotros hemos almacenado la opción en un archivo XML desde donde recuperaremos la información
cada cierto tiempo utilizando un bucle en la línea de tiempo.
Recuperando información
En puntos anteriores vimos cómo utilizar el objeto LoadVars para leer información de archivos externos.
En este apartado veremos cómo recuperar información de un archivo XML.
Para ello y el primer paso será crear un objeto del tipo XML:
var comentarios:XML = new XML();
Hemos creado un objeto XML llamado comentarios. Ahora podremos utilizarlo para leer un archivo
XML y tomar la información contenida en él.
Una propiedad muy útil del objeto XML es la de ignoreWhite, que ignorará aquellos campos que estén
en blanco y así no tendremos que preocuparnos por posibles errores:
comentarios.ignoreWhite = true;

El groso del código que hemos añadido para cargar los datos es el siguiente:
comentarios.onLoad = function(exito:Boolean) {
if (exito) {
comentarios_txt.text = "";
var numeroEntradas = this.firstChild.childNodes.length;

// hacemos un bucle para recorrer todos los elementos del archivo
XML
for (var i = numeroEntradas-1; i>=0; i--) {
// guardamos en la variable miXML la ruta del nodo
var miXML:XMLNode = this.firstChild.childNodes[i];
// guardamos el contenido del nodo

var autor:String = miXML.childNodes[0].firstChild.nodeValue;
var email:String = miXML.childNodes[1].firstChild.nodeValue;
var mensaje:String =
miXML.childNodes[2].firstChild.nodeValue;
// creamos la variable cadenaFinal donde insertaremos el

contenido html que tendrá salida en el cuadro de texto
var cadenaFinal:String;
// y cargamos el contenido del nodo en cadenaFinal

cadenaFinal = "<a href=\"mailto:"+email+"\">"+autor+"</a>: ";
cadenaFinal += ""+mensaje+" ";
// añadimos el contenido de cadenaFinal en la caja de texto

comentarios_txt.text += cadenaFinal;
// y repetimos el bucle
}
} else {
comentarios_txt.text = "No se pudieron cargar los datos";
}
}
comentarios.load("lee_comentarios.php");
Ahora explicaremos paso a paso qué hemos hecho.
Como puedes ver en la última línea cargamos un script php que genera un documento XML en el objeto
comentarios.
Al cargarlo se ejecuta el controlador onLoad que está definido al principio.
Si la carga tuvo éxito, procedemos a coger la información del archivo XML generado. Lo primero que
hacemos es vaciar el contenido del área de texto comentarios_txt.
comentarios_txt.text = "";

Luego pasamos a trabajar con el contenido del archivo XML.
Un archivo XML tiene la estructura muy similar a un archivo HTML, ya que también está basado en
etiquetas. El contenido de nuestro archivo es algo parecido a esto:
<?xml version="1.0" encoding="ISO-8859-1" ?>

<listadoComentarios>
<comentario>
<autor>josé</autor>
<email>jose@correo.com</email>
<mensaje>estoy escribiendo un mensaje</mensaje>
</comentario>
<comentario>
<autor>amparo</autor>
<email>amparo@correo.com</email>
<mensaje>este mensaje también se publicará</mensaje>
</comentario>
<comentario>
<autor>miguel</autor>
<email>miguel@correo.com</email>
<mensaje>mensaje de prueba</mensaje>
</comentario>
<comentario>
<autor>cristina</autor>
<email>cristina@correo.com</email>
<mensaje>esto funciona!</mensaje>
</comentario>
</listadoComentarios>
A cada una de las etiquetas (sin contar la de xml) se le llama nodo.
Para navegar por los nodos a través del objeto XML utilizaremos las propiedades firstChild (que
referencia la etiqueta contenida inmediatamente después de aquella en la que nos encontramos) y
childNodes (que hace referencia al conjunto de nodos con el mismo nombre dentro de la etiqueta en la
que nos encontramos).
De esta forma XML.firstChild.nodeName nos devolvería el nombre del primer hijo dentro del archivo
XML, listadoComentarios.
Así que almacenamos el número de comentarios en la variable numeroEntradas escribiendo:
var numeroEntradas = this.firstChild.childNodes.length;
Esto nos devolverá el número de hijos de this.firstChild, o lo que es lo mismo de XML.firstChild.

Una vez sepamos cuantas entradas tenemos almacenadas, haremos un bucle para sacarlas todas. Este
bucle lo empezaremos desde el final para tener así las entradas más recientes al principio y las más
antiguas al final.
Ahora crearemos una nueva variable llamada miXML que contendrá la ruta completa del nodo
comentario para cada una de las vueltas del bucle, así no tendremos que escribirla entera cada vez que
queramos acceder a ella.
var miXML:XMLNode = this.firstChild.childNodes[i];
De esta forma estamos haciendo referencia al comentario número i del archivo.
Ahora lo único que debemos hacer es recuperar la información dentro del nodo comentario.
Como este nodo tiene tres hijos con distinto nombre haremos referencia a ellos como
miXML.childNodes[0], miXML.childNodes[1] y miXML.childNodes[2].
Una vez hallamos comprendido bien estos conceptos sólo hará falta verter el contenido de los nodos
(utilizando la propiedad nodeValue) en variables que crearemos a su efecto:
var autor:String = miXML.childNodes[0].firstChild.nodeValue;

var email:String = miXML.childNodes[1].firstChild.nodeValue;
var mensaje:String = miXML.childNodes[2].firstChild.nodeValue;
Una vez tengamos la información podemos almacenarla y pasar al siguiente nodo comentario. Así que le
damos formato HTML, lo almacenamos en una variable, y metemos el contenido de esa variable en el
área de texto.
var cadenaFinal:String;
cadenaFinal = "<a href=\"mailto:"+email+"\">"+autor+"</a>: ";

cadenaFinal += ""+mensaje+" ";
comentarios_txt.text += cadenaFinal;
El bucle se repetirá de este modo para cada uno de los nodos comentarios y cuando termine habremos
acabado y toda la información contenida en el archivo XML estará (formateada como HTML) en el área
de texto.
Otras propiedades de los Formularios
Además de todo lo que hemos visto existen, también, otras propiedades bastante interesantes.
Por ejemplo, el orden de tabulación. Esta propiedad establece como actúa el cursor a las repetidas
pulsaciones de la tecla Tabulador.

Podemos alterar el orden utilizando la propiedad tabIndex. Esta propiedad indicará el orden en el que se
desplazará el cursor cada vez que pulsemos el Tabulador:
nombre_txt.tabIndex = 1;
mail_txt.tabIndex = 2;
mensaje_txt.tabIndex = 3;
reset_btn.tabIndex = 4;
submit_btn.tabIndex = 5;
También podemos establecer dónde colocar el cursor (o foco) escribiendo la siguiente línea:
Selection.setFocus(nombre_txt);
Fácil ¿verdad?
De este modo en las validaciones que vimos antes podemos hacer lo siguiente:
if (mail_txt.text.length == 0) {
Selection.setFocus(mail_txt);
Alert.show("Introduce tu correo electrónico", "Error", Alert.OK);
return false;
}
Así si no se ha rellenado algún campo el foco se sitúa directamente sobre él para que el usuario lo
rellene sin tener que desplazarse.
También podemos establecer el botón predeterminado del formulario para que cuando se pulse la tecla
Intro sea como si hiciésemos clic en él. Escribe la siguiente línea:
focusManager.defaultPushButton = submit_btn;
De esta forma haremos que el botón predeterminado sea submit_btn.
Estilos CSS
Podemos asignar estilos CSS al contenido de una caja de texto que acepte HTML.
Por ejemplo, nosotros en el área de texto comentarios_txt tenemos algo parecido a esto:

<a href="mailto:ana@correo.com">ana</a>: si actualizo aquí se

verá en otra ventana?
 
<a href="mailto:jesus@correo.com">jesús</a>: pues ya estamos
todos
 
<a href="mailto:emilio@correo.com">emilio</a>: yo también me
apunto
 
<a href="mailto:david@correo.com">david</a>: bien, pero trae
algo para cenar, no tengo nada en la nevera
 
Obviamente, como el componente admite HTML no veremos el código, sino directamente su salida.
Pero podríamos asignarle el siguiente estilo para mejorar la visualización:
a {
font-weight: bold;
}
.mensaje {
font-style: italic;
}
Guardaremos este estilo en un archivo llamado estilo_comentarios.css. Pero, ¿cómo hacemos para
vincularlo al área de texto?
Fácil. Basta con declarar un nuevo objeto del tipo TextField.StyleSheet y asociarlo a comentarios_txt.
Para hacer esto escribimos:
var miHojaEstilo:TextField.StyleSheet = new TextField.StyleSheet();

miHojaEstilo.onLoad = function(exito:Boolean) {
if (exito) {
comentarios_txt.styleSheet = miHojaEstilo;
}
}
miHojaEstilo.load("estilo_comentarios.css");
Cuando se efectúa la carga del archivo, si se realiza con éxito, se asociará a la propiedad styleSheet de
comentarios_txt.
Y ya tendremos nuestro campo de texto formateado.
Podemos cambiar esta propiedad en cualquier momento, de modo que cuando se asocie una nueva hoja
de estilo mediante la siguiente línea, el contenido del área de texto se redibujará para tomar el nuevo
formato.
miHojaEstilo.load("estilo_alternativo.css");

Incorporar Fuentes
Otro de los problemas con los que nos toparemos cuando trabajemos con flash serán las fuentes que
utilicemos.
Solamente deberás incluir en tu proyecto aquellas fuentes que quieras utilizar para los textos dinámicos
y de entrada, pues Flash se encargará de gestionar aquellas que utilices en los estáticos.
Para incorporar una fuente en tu película deberás hacer clic derecho en alguna parte vacía de la
Biblioteca y seleccionar Nueva fuente.
Se abrirá el siguiente cuadro de diálogo:
En el desplegable Fuente selecciona la fuente que deseas utilizar. Deberás seleccionar los estilos que vas
a utilizar (Negrita, Cursiva y Tamaño), de lo contrario la fuente no estará disponible.
Dale un nombre, que se mostrará en la Biblioteca y estará lista para utilizarse.
Cuando crees un campo de texto dinámico o de entrada selecciona la fuente que aparecerá señalada con
un asterisco (*).
Y no tendrás más problemas en visualizarlas en equipos en los que no se encuentren instaladas.
PRACTICA 38

Juegos (I).
Introducción
En este tema veremos los elementos básicos que necesitaras a la hora de crear juegos con Flash: el
movimiento, los choques, la rotación, creación aleatoria de elementos, etc.
A medida que avancemos en el tema iremos haciendo referencia a este juego que hemos creado como
ejemplo. Pero, primero empezaremos por lo básico.
Manejando Elementos
Cuando trabajemos con objetos necesitaremos acceder a algunas características básicas, como por
ejemplo su anchura y altura o su posición en el Escenario.
Podemos modificar el tamaño del objeto utilizando las propiedades _width, _height, _xscale e _yscale.
Las dos primeras (_width y _height) modificarán o devolverán la anchura y altura, respectivamente, en
píxeles del objeto referenciado, por tanto, podemos cambiar el tamaño de un clip escribiendo lo
siguiente:
miClip._width = 100;
miClip._height = 200;
Las propiedades _xscale e _yscale cambian el tamaño, pero de forma porcentual. Podemos utilizar estas
propiedades para hacer un clip el doble de grande que era, por ejemplo:
miClip._width = 100;
miClip._height = 100;
miClip._xscale = 200;
miClip._yscale = 200;
Hará que el clip tome el tamaño de 100px de alto y 100px de ancho, aunque su visualización sea del
doble (200%).
Podríamos devolver sus dimensiones a su estado real escribiendo:
miClip._xscale = 100;
miClip._yscale = 100;

También podemos averiguar o modificar la posición de un objeto, basta con trabajar con sus propiedades
_x e _y:
miClip._x = 50;
miClip._y = 150;
posicionDeClipHorizontal = miClip._x;
posicionDeClipVertical = miClip._y;
Recuerda que estas propiedades trabajan con píxeles.
De esta forma podemos mover el objeto de una forma muy fácil, por ejemplo para hacer que se desplace
hacia la derecha del Escenario deberás escribir:
miClip._x = miClip._x + 1;
Utilizando estas propiedades y combinándola con las características de los Movieclips podemos
recrear de forma más natural el movimiento.
Veamos este ejemplo:
Aquí hemos creado un clip de película con tres posiciones, parado, izquierda y derecha:

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

var derecha:Boolean = false;
miClip.gotoAndStop("parado");
miClip._x = 10;
miClip.onPress = function() {
if (miClip._x <= 10) {
miClip.gotoAndStop("derecha");
derecha = true;
}
if (miClip._x >= 495) {
miClip.gotoAndStop("izquierda");
izquierda = true;
}
}
_root.onEnterFrame = function() {
if (derecha) {
if (miClip._x < 495) {
}
else {
derecha = false;
}
}
if (izquierda) {
if (miClip._x > 10) {
miClip._x = miClip._x - 6;
}
else {
izquierda = false;
}
}
}
Observa cómo hemos utilizado aquí la función onEnterFrame. Nos valemos de ella para crear el
movimiento, de esta forma hacemos que la coordenada x del objeto se incremente cada vez que entre en
el fotograma de nuevo. Veremos esta función con más detalle en el tema 24.
Hemos utilizado las variables derecha e izquierda (de tipo booleano) para evaluar si el objeto debe
desplazarse. En el evento onEnterFrame chequeamos estas variables y si están a true comenzamos el
movimiento hasta la posición que queramos.

A medida que vayamos avanzando en el tema veremos más funciones y métodos que nos permitirán
acciones más versátiles y ajustadas a nuestras necesidades.
Otra forma de modificar la apariencia del objeto con el que trabajamos es utilizando la propiedad
_rotation.
Esta propiedad actúa sobre el objeto rotándolo tantos grados como especifiques respecto a su posición
original. Por ejemplo:
miClip_rotation = 90;
Esta línea hará que el objeto rote 90 grados en el sentido de las agujas del reloj. Para rotar un objeto
hacia el lado contrario basta con añadirle un signo menos (-) antes del ángulo:
miClip._rotation = -90;
Para devolver al objeto a su posición original sólo tendrás que escribir la siguiente línea:
miClip._rotation = 0;
Así la rotación que actúa sobre el objeto es nula y se muestra en su posición original.
Recuerda que para que las rotaciones parezcan reales deberás posicionar el objeto dentro del clip en el
centro absoluto, para que así la referencia del clip se encuentre en la posición adecuada.
Observa la diferencia entre estos dos clips:
En ambos la rotación se aplicará respecto al punto de referencia, por lo que en la edición de éste deberás
utilizar los botones y del Panel Alinear (Ventana → Alinear) para centrar el objeto respecto al
punto de referencia del clip.

Realiza el EJERCICIO 20 para ver mejor como funciona.
El problema ahora se nos plantea cuando queremos que el objeto se oriente hacia unas coordenadas en
concreto. ¿Cómo calculamos el ángulo necesario para que nuestro elemento se oriente hacia otro situado
en las coordenadas 100, 200? La solución no es muy complicada: deberemos echar mano de la
trigonometría.
En Flash tenemos una función muy útil que nos ayuda a encontrar ángulos rápidamente.
Utilizando la función Math.atan2 recuperaremos el ángulo formado por unas coordenadas en el espacio
respecto a un punto central.
Veamos un ejemplo:
Escribiendo la siguiente línea recuperaremos el ángulo que buscamos:
var angulo = Math.atan2(x, y);
Ahora veamos las tres consideraciones que tenemos que tener en cuenta.

Observa este ejemplo:
Lo primero a tener en cuenta es que las coordenadas que tenemos del punto al que queremos orientar el
objeto no están en relación éste.
Podemos averiguarlas de forma muy fácil haciendo una pequeña conversión restando las coordenadas
entre sí:
Ahora ya podemos emplear la función atan2:
var angulo = Math.atan2(x1 - x2, y1 - y2);
Lo segundo que tendremos que saber es que esta función devuelve un ángulo medido en el sentido
contrario a las agujas del reloj, es decir:

Por tanto si decimos a nuestro objeto que se oriente -30 grados se colocará de esa forma:
Nuestro objeto se encuentra en otro cuadrante completamente diferente, pero si observamos con
atención, la diferencia siempre será de 90º:
Sólo tenemos que sumarle 90 al ángulo resultante para que el objeto se oriente hacia el lugar correcto.
Así que podemos solventaremos esto son una sola línea. Pero antes convertiremos el ángulo resultante
en radianes a grados:
var grados:Number = Math.round(angulo*180/Math.PI);
miClip._rotate = grados + 90;

Desde luego la suma que hemos realizado es consecuencia directa de que el objeto este orientado
inicialmente hacía arriba (y empiece a contar los grados desde ese punto en 0).
Si partiésemos de un estado original horizontal como el desfase del objeto ya se encuentra a 90 grados
no hará falta realizarlo:
Observa que en este caso si giramos el objeto -30 grados se colocará orientado hacia la posición que
buscamos.
O incluso, si al contrario, el objeto se encuentra orientado hacia la izquierda deberemos sumarle 180º.
Como ves, todo dependerá de la posición original del objetos (y de que vértice quieras orientar). Lo más
aconsejable en este caso es que los objetos que vayan a rotar estén orientados hacia la derecha, así no
tendrás que preocuparte del desfase del ángulo.
Otra de las técnicas que nos será muy útil es la carga y descarga de elementos existentes en la
biblioteca. Esto lo haremos con la función attachMovie.
Tiene la siguiente sintaxis:
this.attachMovie(simbolo, nombreInstancia, nivel, opciones);

Para poder incluir un clip en el escenario antes deberás vincularlo para poder acceder a él desde
ActionScript. Puedes hacerlo haciendo clic derecho sobre el elemento en la Biblioteca. Selecciona
Vinculación.
En la ventana que se abrirá haz clic sobre Exportar para ActionScript y dale un nombre al cual te podrás
referir cuando lo cargues con attachMovie().
En la primera variable deberemos introducir el nombre del objeto tal y como lo escribimos en la
vinculación. La variable nombreInstancia almacenará el nombre de instancia al cual podremos referirnos
más tarde para acceder a las propiedades y métodos del objeto creado.
El nivel que indiquemos configurará el estado de profundidad del clip. De esta forma podrás colocar
unos archivos encima de otros y decidir cual se encontrará en un nivel superior o inferior .
Si vas a añadir elementos aleatoriamente es aconsejable que utilices un contador de niveles (y vayas
incrementándolo cada vez que añadas un elemento) para asociar cada elemento a un nivel, pues si cargas
dos elementos en un mismo nivel se descargará el ya existente.
En la variable opciones podrás inicializar el objeto con las propiedades definidas desde un inicio,
deberás introducirlas entre llaves {} y separadas por comas. Este parámetro es opcional.
this.attachMovie("objeto", "miClip", 5, {_x:0, _y:0});

Para eliminar clips insertados mediante attachMovie puedes utilizar removeMovieClip() o

unloadMovie():
miClip.removeMovieClip();
También podemos utilizar otra función que incorpora Flash llamada duplicateMovieClip(). Esta función
duplica un clip ya existente en el Escenario, creando un nuevo con un nombre de instancia
personalizado. Su sintaxis es la siguiente:
duplicateMovieClip(objetoDuplicar, nuevoNombre, nivel);
Deberás escribir el nombre del clip a duplicar en el primer parámentro, luego selecciona un nombre de
instancia para el nuevo clip y escoge un nivel de carga.
Los movieclips cargados con esta función también se podrán eliminar con las funciones
removeMovieClip() y unloadMovie().
Realiza el EJERCICIO 21 para practicar mejor estas funciones.
Interacción del Mouse
Veamos ahora cómo interactuar con el ratón y el Escenario y sus elementos.
Empezaremos viendo una de las funciones más útiles para el ratón: arrastrar y colocar.
Utilizando las funciones StartDrag() y StopDrag() es muy sencillo arrastrar y colocar objetos por el
Escenario, para ello deberás introducir sólo dos eventos de clip en el objeto a arrastrar:
• En el evento press (cuando aún no se ha soltado el botón del ratón) comenzaremos el arrastre:
• on (press) {
• startDrag(this);
}
• Más tarde en el evento release (cuando se suelta el botón), detendremos el arrastre y el objeto quedará
colocado en el sitio que definió el botón:
• on (release) {
• stopDrag();
}

La función startDrag permite varios parámetros:
startDrag(objetoArrastar, bloqueaCentro, izquierda, arriba, derecha, abajo);
En bloqueCentro podrás pasarle un valor (true o false) que indicará si el arrastre se realizará desde el
centro del clip o desde el punto donde hizo clic el usuario.
El resto de variables te permitirá definir mediante coordenadas un espacio activo donde se podrá realizar
el arrastre. Esta opción es muy útil cuando queremos que el arrastre sólo se pueda realizar sobre una
zona determinada, como por ejemplo las tizas de las barras de desplazamiento, que no se pueden
arrastrar fuera de la zona rectangular que delimitan dichas barras.
Una propiedad muy útil que también te será de mucha ayuda es la de _droptarget. Te permitirá averiguar
sobre qué elemento se ha soltado el objeto arrastrado:
on (release) {
stopDrag();
trace(this._droptarget);
}
Este código devolverá al Panel Salida el nombre de instancia del objeto sobre el cual se ha soltado. Si el
objeto no tuviese uno devolvería el nombre genérico instanciai, donde i es un número de orden de
objetos añadidos al Escenario.
Realiza el EJERCICIO 22 para practicar conceptos que hemos visto hasta ahora.
Otra cosa que nos será de gran ayuda será poder localizar la posición del ratón. De este modo
podríamos hacer que los objetos se desplacen u orienten hacia el ratón
Para averiguar las coordenadas del ratón sólo tendrás que recurrir a las propiedades _xmouse e
_ymouse:
var coordenadaX:Number = _xmouse;

var coordenadaY:Number = _ymouse;
Fácil, ¿verdad?
Con todo lo que hemos aprendido podemos ya sustituir el cursor del Mouse normal por uno de nuestro
agrado.

Para ello tienes que escribir muy pocas líneas:
this.attachMovie("cursor", "miCursor", 500);
Mouse.hide();
var escuchador:Object = new Object();

escuchador.onMouseMove = function() {
miCursor._x = _xmouse;
miCursor._y = _ymouse;
}
Mouse.addListener(escuchador);
En el código insertamos un objeto llamado miCursor que será una instancia del clip cursor que habremos
guardado en la Bilioteca. Escondemos el cursor. Y añadimos un escuchador que haga que el clip
miCursor se posicione en el lugar del Mouse a cada movimiento de éste.
Como ves una de las pocas cosas nuevas introducidas aquí es el uso de la función hide() del ratón.
Invocándola haces que el Mouse desaparezca.
Puedes volver a visualizar el ratón escribiendo:
Mouse.show();
Interacción del Teclado
Podemos añadir a nuestras películas interacción con las teclas pulsadas, el procedimiento es muy
sencillo, basta con utilizar la función isDown del objeto Key:
if Key.isDown(Key.UP) {
//mover hacia arriba
}

Como alternativa puedes utilizar un escuchador para el teclado y ver qué teclas son pulsadas en cada
momento accediendo a ellas a través de la función Key.getCode():

escuchador.onKeyDown = function() {
switch (Key.getCode()) {
case Key.SPACE :
//disparar
break;
case Key.LEFT :
//mover hacia la izquierda
break;
case Key.UP :
//mover hacia arriba
break;
case Key.RIGHT :
//mover hacia la derecha
break;
case Key.DOWN :
//mover hacia abajo
break;
}
}
Key.addListener(escuchador);
Aunque depende siempre de la función que quieras que realicen tus teclas, a veces es más útil un método
que otro.
Los códigos de las teclas son bastante sencillos, las flechas UP, DOWN, RIGHT y LEFT; la barra
espaciadora SPACE; y las teclas especiales SHIFT, CONTROL, TAB, CAPSLOCK, ESCAPE, ENTER,
BACKSPACE, INSERT, DELETEKEY, HOME, END, PGDN y PGUP.
En el ejemplo anterior utilizábamos el ratón para mover el clip, ahora podemos usar las teclas:
El código que hemos incluido es muy parecido al anterior, solamente hemos cambiado los eventos por
los cuales se dispara el desplazamiento:
onEnterFrame = function() {
if (Key.isDown(Key.RIGHT)) {

if (miClip._x < 515) {
}
else {
}
}
else if (Key.isDown(Key.LEFT)) {
miClip._rotation = -10;
if (miClip._x > 30) {
miClip._x = miClip._x - 3;
}
else {
}
}
else {
}
}
Como ves en el ejemplo se evalúa cada vez que entra en el fotograma, por lo que las funciones de la
presión continuada de una tecla se ven cubiertas.
Interacción entre Elementos
Una de las cosas que más nos interesará realizar es el choque entre elementos en el Escenario, y ya no el
choque físico en sí, sino la coincidencia de dos elementos en un mismo espacio.
Esto lo podremos evaluar y tratar con la función hitTest().
Su uso tiene dos posibilidades, ambas muy sencillas. Puedes evaluar si en un punto en concreto se
encuentra un objeto específico (muy útil para detectar los clics del ratón o donde se encuentra en cada
momento):

escuchador.onMouseDown = function() {
if (miClip.hitTest(_xmouse,_ymouse) {
//coincidencia
}
}
Mouse.addListener(escuchador);
Este código evalúa la posición del ratón a cada clic, si las coordenadas introducidas en la siguiente línea
coinciden con el área de miClip se produce colisión:

miClip.hitTest(_xmouse, _ymouse);
Cuando utilizamos esta función pasándole unas coordenadas podremos añadirle un parámetro:
formaObjeto. Este parámetro tomará valor true si queremos que se detecte la colisión con la forma de la
instancia, o false si queremos que se evalúe con sus bordes rectángulares de objeto. La función,
entonces, tomaría la siguiente forma:
miClip.hitTest(coorX, coorY, formaObjeto);
Donde formaObjeto decidirá si se toma o no la forma completa del clip miClip.
También podemos ver si dos objetos chocan entre sí dándole un target a la función en vez de unas
coordenadas. En ese caso tendríamos:
var colision:Boolean = miClip.hitTest(miClip2);
En este caso hemos almacenado en la variable colisión el valor de la evaluación de solapamiento o corte
entre la posición de miClip y miClip2.
Esta línea tendría su homólogo en:
var colision:Boolean = miClip2.hitTest(miClip);
Pues ambas realizan la misma acción al buscar coincidencias entre los mismos objetos.
En desplazamientos utilizaremos mucho esta opción para averiguar si el objeto que estamos moviendo
choca con una pared u otro objeto.
Ten en cuenta que la posición que deberemos evaluar si hace colisión con la pared debe ser aquella que
adoptaría el objeto después de desplazarse.

Esto complica un poco las cosas, pues deberemos utilizar la primera sintaxis de la función:
miPared.hitTest(coorXfinal_Clip, coorYfinal_Clip);
Pero, ¿cómo conocemos las coordenadas de una forma?, ¿cómo averiguo el punto máximo que alcanza
en la esquina abajo derecha?. La respuesta a esta segunda pregunta es bastante sencilla, debo averiguar
la coordenada máxima de las x (para conocer su ancho máximo) y lo mismo para las y (para conocer su
altura máxima).
Utilizaremos para ello la función getBounds(). Esta función trabaja de la siguiente forma:
miClip.getBounds(movieclip);
Donde en movieclip escribiremos la ruta de destino de la línea de tiempo cuyo sistema de coordenadas
utilizaremos como punto de referencia. Normalmente escribiremos _root, para que las coordenadas
dadas sean respecto a la película en general y no sobre un clip en particular.
Mediante esta función podremos acceder a las x mínimas y máximas, y lo mismo para las y. Sólo
deberás escribir lo siguiente:
miClip.getBounds(_root).xMin;
miClip.getBounds(_root).xMax;
miClip.getBounds(_root).yMin;
miClip.getBounds(_root).yMax;
Realiza el EJERCICIO 23 para practicar este concepto.
Funciones Avanzadas
También veremos otras opciones que nos ayudarán mucho a la hora de crear juegos. Una de ellas es la
de la posibilidad de darle aleatoriedad a los componentes.
Podemos utilizar la función que incorpora Flash Math.random() que devuelve un número pseudo-
aleatorio entre 1 y 0.
Su uso es simple sólo deberás escribir:
var miNumero:Number = Math.random();
Su uso es tan útil que a raíz de esta función se ha creado este trozo de código que casi utilizarás en la
mayoría de tus películas que contengan componentes aleatorios:

function randRange(minNum:Number, maxNum:Number):Number {

return (Math.floor(Math.random()*(maxNum-minNum+1))+minNum);
}
Esta función te devuelve un número aleatorio entre dos números:
var miNumero:Number = randRange(1, 100);
En este ejemplo se almacenará un número de 1 a 100 en la variable miNumero.
En el juego de ejemplo que estamos viendo hemos utilizado esta función para generar la caída de
proyectiles:
var randomProyectil:Number = randRange(1, 3);

var miProyectil:MovieClip = this.attachMovie("proyectil"+randomProyectil,
"proyectil"+profundidad, profundidad);
profundidad++;
miProyectil._y = -miProyectil._width;
var scale:Number = randRange(80, 100);
miProyectil._xscale = scale;
miProyectil._yscale = scale;
miProyectil._alpha = scale;
miProyectil.speed = velocidad+randRange(0, 3)+level;
miProyectil._x = randRange(10, 540);
Como ves tenemos randomizados muchos de los procesos. El primer randRange decide qué tipo de
proyectil se lanzará. El segundo nos da el tamaño (_xscale e _yscale) y la transparencia que tendrá. El
trecer número aleatorio se lo asignaremos a la velocidad. Y por ultimo utilizamos un cuarto randRange
para posicionar el proyectil en una coordenada x de la pantalla.
De esta forma hemos logrado un abanico de posibilidades muy amplio en posibilidades de proyectiles.
Otra de las funciones que te vendrán muy bien es la de dotar de velocidad a los movimientos de los
objetos.
Observa el código que hemos introducido en el juego:
miProyectil.speed = velocidad+randRange(0, 3)+level;
Hemos creado una velocidad inicial y le hemos sumado una aleatoria para cada elemento, luego lo
hemos asociado a una propiedad speed que hemos añadido al elemento. De hecho, a esa velocidad se le
suma la que tiene el nivel del juego que va aumentando a medida que se van eliminando proyectiles.

De ahí que cuando asignamos el movimiento del elemento:
this._y += this.speed;
Lo hacemos refiriéndonos a la velocidad, así podemos variarla en cualquier momento aumentándola o

reduciéndola según nuestros propósitos.
Por último veremos algo que nos permitirá mostrar información a los usuarios para que ellos tengan
conocimiento de cómo se está desarrollando la partida. Esto lo haremos con los textFields. Los
textFields pueden ser elementos que hayamos creado antes de publicar la película, así que no tendremos
problemas con ellos.
Simplemente los declararemos como texto dinámico e iremos modificando su contenido. Pero, ¿Y si
queremos crear un campo de texto mediante ActionScript?
Muy sencillo, te bastarán unas pocas líneas para conseguirlo:
var miFormato:TextFormat = new TextFormat();

miFormato.bold = true;
miFormato.font = "Arial";
miFormato.size = 12;
miFormato.color = 0xFFFFFF;
miFormato.align = "left";
this.createTextField("estadisticas_txt", 5000, 10, 0, 530, 22);

estadisticas_txt.setNewTextFormat(miFormato);
estadisticas_txt.selectable = false;
estadisticas_txt.tabStops = [100, 200, 300, 400];
Este es el código que hemos utilizado en el juego.
Puedes ver que hemos creado un objeto llamado miFormato con unas características básicas que
podremos aplicar sobre cualquier texto de nuestra película. Luego mediante la función createTextField
hemos creado el campo.
Veamos cual es su sintaxis:
createTextField(nombreInstancia, profundidad, coordenadaX, coordenadaY, anchura,

altura);
Como puedes ver, otra vez nos encontramos con los niveles que utilizábamos con la función attahMovie.
Simplemente asegúrate de que no repites el nivel y todo irá bien.
Ahora sólo hará falta remitirse a la propiedad text del texto que hemos creado para darle un valor, y el
texto se mostrará en pantalla:

estadisticas_txt.text = "Estas son las estadísticas del juego";
Las propiedades de formato de texto que hemos utilizado son las más comunes.
Aquí podrás encontrar una referencia a todas las propiedades del Objeto TextFormat:
• align: indica el alineamiento del texto. Puede tomar los valores: "left", "right", "center" y
"justify".
• bold: puede tomar los valores true o false. Determina si el texto se mostrará en negrita.
• italic: puede tomar los valores true o false. Indica si el texto se verá en cursiva.
• underline: puede tomar los valores true o false. Determina si el texto aparecerá subrayado.
• color: determina el color del texto, debe estar escrito en hexadecimal, por ejemplo 0x000000.
• font: indica el nombre de la fuente a utilizar (eg. "Courier", "New Times Roman", etc...).
• size: determina el tamaño del texto en puntos.
• bullet: puede tomar los valores true o false. Si se activa esta opción se mostrará el texto como
una lista no ordenada. Cada párrafo será un elemento de la lista.
• indent: determina el espacio de sangría de la primera línea del texto.
• blockindent: determina el espacio de sangría de un bloque completo de texto.
• kerning: indica el ajuste entre caracteres del texto.
• leading: determina el interlineado. Introduce un valor en píxeles.
• letterSpacing: indica el espacio entre las letras del texto.
• leftMargin: determina la distancia en puntos del bloque de texto al margen izquierdo.
• rightMargin: determina la distancia en puntos del bloque de texto al margen derecho .
• tabStops: crea tabulaciones personalizadas en el texto. Deberás introducir las tabulaciones como
\t cuando escribas. Deberás introducir una matriz de números positivos, cada uno de ellos sera un
punto de tabulación.
• url: indica el vínculo web que se le aplicará al texto.
• target: determina el destino que tendría el vínculo en el campo url (si lo hubiese). Puede tomar
los valores "_blank", "_self", "_parent" y "_top".
PRACTICA 39

Animaciones avanzadas (I)
Movimiento de objetos mediante ActionScript
Para poder mover objetos con ActionScript debemos conocer el sistema de coordenadas utilizado por
Flash.
La esquina superior izquierda es la posición x=0, y=0. (ver la imagen)
Para mover un objeto debemos modificar su posición definida por las propiedades objeto._x y objeto._y
Por ejemplo, si hacemos objeto._x += 10 estamos desplazando el objeto 10 píxeles hacia la derecha.
Vamos a ver como mover un objeto a partir de este ejemplo de una bola botando.
El algoritmo es muy sencillo, se trata de ir modificando la posición de la bola desde una posición inicial
para que vaya bajando hasta que llegue al suelo, en ese momento invertimos el movimiento para que
suba y calculamos hasta donde tiene que subir. Así sucesivamente hasta que deje de botar.
Para que la bola baje debemos sumar una cantidad a la coordenada y, y para que suba debemos restarle
una cantidad. Si queremos que la bola se vaya desplazando hacia la derecha debemos sumar una
cantidad a la coordenada x.
Cuando la bola baja, según el esquema de la derecha, pasa de la posición (x1, y1) a la posición (x2, y2),
para ello se incrementa la x con el valor incre_x (que estaria representado por la línea azul) y se
incrementa la y con el valor incre_y (que estaria representado por la línea roja).
Cuando la bola sube, la única diferencia es que la coordenada y va disminuyendo en lugar de

aumentando, según el esquema de la derecha, al subir se pasa de la posición (x'1, y'1) a la posición (x'2,
y'2), para ello se incrementa la x con el valor incre_x (que estaria representado por la línea azul) y se
decrementa la y con el valor incre_y (que estaria representado por la línea roja)

Vamos a ver lo más importante del código ActionScript que tenemos un poco más abajo.
Hemos definido creado una bola azul y la hemos convertido en un movieclip, la instancia se llama
bola_mc.
Inicialmente la bola esta en la posición (bola_mc._x= 0,bola_mc._y= 0)
Mediante la variable baja, sabremos si la bola esta bajando o subiendo. Cuando la coordenada y llega al
suelo, la bola pasará a subir, cuando la coordenada y llegue al tope la bola comenzará a bajar.
En cada bote la bola ira perdiendo fuerza y el bote sera más bajo, la variable elasticidad determinará esta
perdida de potencia.
Cada vez que la bola llega al tope calculamos el nuevo tope, para ello calculamos la distancia de la bola
al suelo, la dividimos por la elasticidad y esa cantidad se la sumamos al tope.
En el esquema, la linea naranja representa esa cantidad que le sumamos al tope 1 para pasar al tope 2.
Ya tenemos nuestro código casi preparado, ahora sólo falta hacer que el proceso se repita un número
determinado de veces. Esta película Flash sólo tiene un fotograma. ¿Cómo hacemos esto? Lo primero
que se nos ocurre es incluir una instrucción while ... o una instrucción for ... , si lo hacemos veremos que
no funcionará porque la repetición es tan rápida que no da tiempo a ver nada.
La solución está en introducir una instrucción que haga que el proceso se repita cada 35 milisegundos.
Esto lo vamos a ver en el punto siguiente.
Hemos colocado un botón en la película de forma que cada vez que se pulsa, se detine la ejecución (si
todavía no había acabado) y se lanza una nueva ejecución.
Cuando el tope llega al suelo se detine la ejecución.

on (release) {
var baja:Boolean = true;
var incre_x:Number = 3.5;
var incre_y:Number = 8;
var suelo:Number = 280;
var tope:Number = 0;
var elasticidad:Number = 3;
bola_mc._y = 0;
bola_mc._x = 0;
tope += (suelo - bola_mc._y) / elasticidad;
var repeticion:Number;
function botar() {
if (baja) { // baja
bola_mc._y += incre_y;
bola_mc._x += incre_x;
if (bola_mc._y>=suelo) {
baja = false;
}
} else { // sube
bola_mc._y -= incre_y;
bola_mc._x += incre_x;
if (bola_mc._y<=tope) {
baja = true;
if (tope>=suelo) {
incre_y = 0;
clearInterval(repeticion);
}
tope += (suelo - bola_mc._y) / elasticidad;
}
}
}
repeticion = setInterval(botar, 35);
}
En este sencillo ejemplo la trayectoria de la bola es rectilínea, para que fuese un movimiento más real
debería seguir una trayectoría curva. Dibujar curvas es un poco más complicado que dibujar rectas.
Flash nos ofrece una opción más sencilla para hacer que un objeto siga una trayectoria curva: las guías
de movimiento que veremos en este mismo tema aplicadas al bote de una pelota.
De todas formas si deseas probar suerte con las curvas y ActionScript realiza el EJERCICIO 24 para
empezar a familiarizarte con ellas.
Función setInterval y propiedad onEnterFrame
La función setInterval se utiliza cuando queremos que se repita la ejecución de un código ActionScript
cada cierto número de milisegundos, y la propiedad onEnterFrame se utiliza cuando queremos ejecutar
un código ActionScript en función de la velocidad de la película Flash.

Estas funciones se pueden utilizar para controlar el tiempo cuando utilizamos ActiónScript y no nos
interesa utilizar los fotogramas como forma de control del tiempo.
Por ejemplo, podemos genera un objeto y hacer que se mueva un 5 pixels cada 30 msg. variando estos
parámetros conseguiremos que el objeto se mueva más o menos rápido.
setInterval
El formato de esta función es el siguiente:
var retardo:Number = setInterval(functionReference:Function, interval:Number,

[param1:Object, param2, ..., paramN]);
Donde,
functionReference es la función que se va a repetir.
interval es el número de milisegundos que van a transcurrir entre cada llamada a la función.
[param1:Object, param2, ..., paramN] es la lista opcional de parámetros que se pasan a la función.
retardo es una variable que identifica el intervalo y que sirve para utilizarlo con clearInterval() para
detener la ejecución.
Por ejemplo, el codigo siguiente escribe 10 veces el mensaje "contador" i , cada 2000 milisegundos (2
sg.).
var i:Number = 1;
var repeticion:Number = setInterval(contar, 2000);
function contar() {
trace("contador: "+ i++);
if (i>10) {
}
}
La funcion clearInterval sirve para detener la ejecución de la función llamada desde setInterval. Por lo
tanto, conviene utilizar clearInterval siempre que usemos setInterval, para evitar que la ejecución
continúe indefinidamente.
En el ejemplo del punto anterior hemos definido la función gobal setInterval para que la función botar se
ejecute cada 35 milisegundos.
onEnterFrame
El controlador de eventos onEnterFrame, asociado al objeto MovieClip, permite invocar a una función
de forma repetida tantas veces como fotogramas por segundo tenga definida la película.

Por ejemplo, en el movieClip bola_mc:
var i:Number =0;

bola_mc.onEnterFrame = function() {
trace("ejecutando: "+ ++i);
if ( i > 30 ){
delete this.onEnterFrame;
}
Si la velocidad de la película es de 12 fps, este código escribiría en la salida 12 líneas por segundo, de
esta forma:
ejecutando:1
ejecutando:2
ejecutando:3
...
Como puedes ver hemos añadido una condición para que cuando el valor de i sea mayor de 30 acabe la
ejecución del controlador onEnterFrame y así evitar que se ejecute indefinidamente.
Aunque con este ejemplo no lo parezca, (sólo pretende explicar la función) estas dos tipo de funciones
que se ejecutan repetitivamente pueden ser muy útiles en determinadas ocasiones. A lo largo del cursos
ya hemos visto algunos ejemplos de su utilidad, a continuación veremos otro ejemplo que puede sernos
útil.
Imagínate que quieres que tu pelicula se detenga durante 2 segundos y luego continue. Esta es una forma
de hacerlo utilizando la función setInterval.
Colocariamos este código en el frame que deseemos, llamamos a setInterval con 1 sg (1000 milisg) y
cuando se hallan cumplido dos llamadas detenemos setInterval y continuamos con el siguiente frame de
la película.
var tope:Number = 1;
var repeticion:Number = setInterval(parar, 1000);
function parar() {
tope++;
if (tope > 2) {
nextFrame();
play();
}
}
stop();

Movimiento de objetos mediante guía
En esta unidad ya hemos visto como hacer botar una bola mediante ActionScript, ahora vamos a
recordar una técnica que ya vimos en la unidad 9, animación mediante guía de movimiento.
En este caso, se trata de imitar el bote de una pelota, por lo tanto, dibujamos una curva que imite dicho
bote.
De esta forma conseguiremos una animación que resulta más natural que el bote con trayectoría recta
que vimos en el punto anterior.
En las imágenes podrás ver que proceso hemos seguido para dibujar el movimiento.
La guía la hemos dibujando sucesivas curvas de modo que la pelota invite el movimiento que queremos
crear.

Para darle mayor realismo hemos insertado fotogramas claves en puntos críticos para achatar la pelota y
dotarla de elasticidad.
Ahora podrás combinar muchas de las técnicas que hemos aprendido para generar algo así:
(Haz clic en la película y luego usa las teclas de movimiento a derecha e izquierda)

Hemos visto dos técnicas diferente para animar un objeto en Flash, mediante ActionScript y mediante
guía de movimiento.
Según cada caso concreto resultará más adecuado eligir una u otra técnica. En general, resulta más fácil
y rápido utilizar guías de movimiento que ActionScript, sobre todo si el movimiento que tiene que
seguir el objeto es sinuoso y dificil de definir en términos de una ecuación matemática.
Hay casos en los que será más adecuado utilizar ActionScript y otros casos en los que sólo será posible
crear el movimiento mediante ActionScript, por ejemplo, si queremos que un objeto se mueva de forma
aleatoria por un escenario.
Animaciones de rostros
Una de las bases para hacer animaciones de personajes es la animación de rostros, en esta pequeña
introducción aprenderemos cómo hacer que un rostro pase de la risa al enfado.
Todos sabemos que un rostro sonriente tiene las cejas, los ojos y la boca en distinta posición que un
rostro enfadado. Vamos a ver como con unas sencillas tranformaciones de forma y de color obtenemos
un buen resultado.

Lo primero que hay que tener en cuenta es dibujar los elementos que tienen que moverse en una capa
propia, así crearemos una capa para la boca, cejas, etc.
Dibujamos la boca con herramienta Linea, en el fotograma 1, y creamos un frame clave en el fotograma
17. Para convertir la línea recta en una curva, volvemos al fotograma 1 y activamos la herramienta
Selección y nos aseguramos de que la línea de la boca NO este seleccionada. Ahora acercamos el cursor
a la línea y cuando aparezca una pequeña línea curva debajo del cursor hacemos clic y arrastramos hacia
abajo, asi tendremos una boca sonriente. Vamos al fotograma 17 y hacemos lo mismo pero arrastrando
hacia arriba para conseguir una boca enfadada.
Es importante que arrastres desde el centro de la línea y en dirección perpendicular para que quede una
curva simétrica. En el caso de las cejas, nos interesa que la curva no sea simétrica y deberemos arrastrar
desde un lateral de la línea en lugar de desde el centro.

Sencillo, ¿verdad?
Animaciones geométricas en 3D
Vamos a ver como crear una animación de una caja girando en tres dimensiones.
Para abordar una animación de este tipo, evidentemente, debemos conocer como dibujar objetos en tres
dimensiones. Hay varios tipos de perspectiva que se pueden utilizar: a) perspectiva caballera b)
perspectiva isonométrica y c) perspectiva cónica.

Estudiar perspectiva no es el objeto de este curso por lo tanto no vamos a ser muy estrictos al hacer los
dibujos y como consecuencia de ello el resultado final tampoco va a ser una animación perfectamente
realista, pero lo que tratamos de explicar es únicamente el proceso de animación.
Se trata de hacer girar una caja desde una posición inicial hasta una posición fila. Para hacer la
animación debemos dibujar la caja en varias posiciones intermedias. A continuación crearemos
animaciones de forma para cada una de las caras visibles de la caja.
Hay que tener en cuenta que inicialmente la cara de la derecha no es visible, pero se ira haciendo visible
según avance el giro.
Luego deberemos introducir interpolaciones entre las diferentes posiciones para terminar con un
resultado parecido a este:

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

En el caso que nos ocupa podemos separar el movimiento de las distintas partes del cuerpo, piernas,
brazos, cabeza y tronco. También podriamos añadir manos y pies pero no lo haremos para no complicar
demasiado la explicación.
Hemos creado una capa para cada parte del cuerpo, como puedes ver en esta imagen.
Otra circunstancia que podemos observar es que el movimiento del brazo izquierdo y del brazo derecho
son muy parecidos, se diferencian en la distinta posición de partida. Por lo tanto bastará con realizar un
movimiento que nos servirá para ambos brazos. Lo mismo ocurre con las piernas.
A su vez, podemos separar el movimiento del brazo en dos movimientos, uno cuando el brazo avanza
(va desde la posición más atrasada hasta la posición más adelantada) , y otro cuando el brazo retrocede
(va desde la posición más adelantada hasta la más atrasada). De esta forma, con dos movieclips
podremos representar el movimiento de ambos brazos. Los movieclips son idénticos salvo en el sentido
del movimiento.
En esta imagen puedes ver el movie clip

"brazo_adelante", hemos creado una capa para la
parte superior del brazo y hemos hecho que gire
sobre su extremo superior (hombro). Para el
antebrazo henos creado otra capa con su capa
guía, la capa guía sirve para que la parte superior
del antebrazo siga la trayectoria que describe el
extremo inferior (codo). También hemos
incluido un giro en el antebrazo.

En esta imagen intentamos explicar como están colocados los dos movieclips que forman el movimiento
de los brazos en la línea del tiempo..
El brazo izquierdo comienza con el movie clip "brazo_adelante" y continúa con el movie clip
"brazo_atras", mientras que el brazo derecho comienza con el movie clip "brazo_atras" y continúa con el
movie clip "brazo_adelante", de esta forma cuando el brazo izquierdo avance el brazo derecho
retrocederá.
Sólo nos queda ver un detalle interesante.
Hemos considerado idénticos el movimiento del

brazo hacia adelante y del brazo hacia atrás y la
animación queda bastante bien.
Sin embargo ¿Podemos decir lo mismo del

movimiento de las piernas?
Claramente no, ya que cuando la pierna va hacia

atrás debe apoyarse en el suelo, mientras que
cuando va hacia adelante no debe tocar el suelo.

Si comparas las dos imágenes de la derecha

podrás observar como hemos incluido un
fotograma clave en la "pierna_adelante" para
poder mantener la pantorrilla en posición más
horizontal y que no toque el suelo.
Rotoscopia
La rotoscopia es una técnica que utiliza un movimiento real como patrón para calcar las imagenes de la
animación. Hace años que se utiliza esta técnica, por ejemplo, en las películas de dibujos animados para
conseguir movimientos realistas al caminar.
Hay varios métodos para ejecutar esta técnica, nosotros vamos a hablar del mas sencillo para utilizar en
Flash. Un método más complejo sería colocar puntos blancos o luces en diferentes partes del cuerpo de
una persona vestida de negro y realizar una película sobre un fondo negro para luego generar el
movimiento a partir de los puntos captados.
Con una cámara de vídeo podemos grabar el efecto que queremos reproducir, por ejemplo, una persona
caminando,
Luego importaremos el vídeo al formato de Flash, pero esta vez lo haremos de forma diferente a la que
aprendimos en el tema Vídeos.
Del mismo modo deberemos hacer clic en Archivo → Importar → Importar vídeo y seguir los pasos que
aprendimos entonces, sólo que en la pantalla de selección de método de importación deberemos
seleccionar Incorporar vídeo en SWF y reproducir en la línea de tiempo.


Esto hará que el vídeo se

exporte de forma que lo podremos visualizar fotograma a fotograma. Sigue el resto de opciones hasta el
final y el vídeo se colocará en la línea de tiempo.
Luego crearemos una nueva capa por encima y crearemos tantos fotogramas claves como fotogramas de
película queramos copiar. El resto es sencillo, coje un pincel y a calcar. Cuanta más precisión consigas,
más impresionantes serán los resultados.
Este proceso es muy laborioso, pero crea animaciones espectaculares.
Practica un poco y verás como no es nada complicado, te requerirá bastante paciencia, pero la película
final te valdrá la pena.
Si quieres mantener el audio, cuando importes el vídeo selecciona que quieres mantener el audio y el
vídeo separados. Así cuando elimines la capa de vídeo tu animación mantendrá el sonido de la película.
Tus animaciones serán capaces de hablar!
API de dibujo. Creando dibujos con ActionScript
En este apartado aprenderemos a manejar el API de dibujo de Flash.
Su uso es muy claro y sencillo, bastará con que comprendas unas cuantas instrucciones.

Antes de empezar a dibujar deberás tener un clip donde hacerlo, para ello nos crearemos un clip vacío
utilizando la función createEmptyMovieClip():
this.createEmptyMovieClip("miClip", this.getNextHighestDepth());
Como puedes ver, le pasamos dos parámetros, el primero será el nombre de instancia al cual nos
referiremos para modificar las propiedades del clip.
El segundo parámetro indica el nivel de profundidad del clip. Hemos utilizado la función
getNextHighestDepth() para averiguar cuál es el nivel superior en este clip y así posicionar nuestro
dibujo en la parte superior (así no lo tapará ningún otro objeto).
Una vez creado el clip podemos pasar a dibujar sobre él.
Hacerlo es muy fácil, sólo deberás inicializar el proceso de dibujo escribiendo:
miClip.beginFill(color, alfa);
Donde color indicará el color de relleno que se le aplicará al dibujo. Deberá estar en hexadecimal, por
ejemplo: 0x000000.
El parámetro alfa indicará la transparencia del relleno.
Luego nos valdremos de un par de funciones:
miClip.moveTo(x, y);
Esto hace que el punto de dibujo se coloque en las coordenadas especificadas. Podemos empezar a
pintar a partir de la coordenada (100, 100), por ejemplo.
Luego nos quedará solamente dibujar líneas en el espacio que contendrán el relleno de nuestro dibujo.
Utiliza la instrucción lineTo():
miClip.lineTo(x, y);
Esto hará que el punto de dibujo se desplace hasta la posición (x, y), desde donde se creará el siguiente
trazo de dibujo.
miClip.beginFill(0xFF0000);
miClip.moveTo(10, 10);
miClip.lineTo(10, 100);

miClip.endFill();
Terminamos la instrucción con endFill().
Este ejemplo dibujaría un cuadrado en la posición (10, 10). Sencillo, ¿verdad?
Podemos establecer el tipo de línea que rodeará al dibujo escribiendo lo siguiente:
miClip.lineStyle(grosor, color, alfa, trazos, escala, extremos, uniones,

limiteEsquinas);
Nota: Esta instrucción deberá estar colocada antes de utilizar la función beginFill(), quedaría de esta
forma:
miClip.lineStyle(1, 0x000000, 100);

miClip.beginFill(0xFF0000);
miClip.moveTo(10, 10);
miClip.endFill();
Ahora explicaremos en detalle los parámetros de esta instrucción:
• grosor: un número de 0 a 255 que indicará el grosor del borde.

• color: en hexadecimal, el color del borde.
• alfa: nivel de transparencia del borde, de 0 a 100.
• trazos: valor booleano, hará que los anclajes de las líneas y curvas se realicen de forma exacta. De este
modo los trazos se dibujarán a píxeles exactos en cualquier grosor (así no se verán líneas imprecisas).
• escala: especifica cómo se tendrá que efectuar la escala del borde. Sus valores pueden ser "normal",
que toma el modelo predeterminado; "none", que obliga a no cambiar nunca la escala del borde;
"vertical", que no cambiará la escala si el objeto sólo cambia su escala vertical; y "horizontal", que no
cambiará la escala si el objeto sólo cambia su escala horizontal.
• extremos: define cómo se dibujarán los extremos de los bordes,

• uniones: establece el tipo de uniones que se establecerán en el borde,
• limiteEsquinas: un número entre 1 y 255, indica la distancia de la esquina al trazo real,
PRACTICA 40

Leccion 8 - Interactividad Con Actionscript

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Leccion 8 - Interactividad Con Actionscript

Transféré par

Droits d'auteur :

Formats disponibles

[FLASH] IDSYSTEMS 2011

LECCION 8. INTERACTIVIDAD CON ACTIONSCRIPT

Introducción a ActionScript 2 (I)

El ActionScript es el lenguaje de programación que ha utilizado Macromedia Flash desde sus

Características generales del ActionScript

Como ya hemos comentado, el ActionScript es el lenguaje de programación propio de Flash,

El ActionScript es un lenguaje de programación orientado a objetos, tiene similitudes, por

El ActionScript presenta muchísimos parecidos con el Javascript; si conoce Javascript, la

LECCION 8 – Interactividad con ActionScript Página 1

Introducción a la Programación con ActionScript

Variable: Vamos a explicar la interpretación del término variable en programación mediante un

Expresión / Sentencia: Conjunto de operadores, constantes, variables o acciones. Provocan un

LECCION 8 – Interactividad con ActionScript Página 2

Tenemos la siguiente definición de función:

function Suma5(p_entrada, p_salida) {

LECCION 8 – Interactividad con ActionScript Página 3

Programación Orientada a Objetos (POO): ActionScript es un lenguaje orientado a objetos, esto

- El objeto Persona tiene:

- Propiedades: Nombre, edad, altura ...

- Comportamientos: hablar, correr, saltar ...

- El objeto Clip de Película tiene:

- Propiedades: color, anchura, altura ...

- Comportamientos: gotoAndPlay, Stop, Play, LoadMovie ...

LECCION 8 – Interactividad con ActionScript Página 4

El conocimiento y comprensión de estos conceptos no es un requisito para comenzar a programar con

Posteriormente veremos con detalle los distintos elementos de este Panel.

LECCION 8 – Interactividad con ActionScript Página 5

LECCION 8 – Interactividad con ActionScript Página 6

LECCION 8 – Interactividad con ActionScript Página 7

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

% : Operador Resto. Este operador, no muy conocido en matemática, es un clásico de la programación.

LECCION 8 – Interactividad con ActionScript Página 8

!= : Probar Desigualdad. Devuelve como resultado verdadero (1) si la expresión de la izquierda es

LECCION 8 – Interactividad con ActionScript Página 9

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

Acciones - Control de Película

LECCION 8 – Interactividad con ActionScript Página 10

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

Stop: Detiene la reproducción de la película. Se puede usar en un fotograma, cuando queramos

Acciones - Navegador / Red

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

LECCION 8 – Interactividad con ActionScript Página 11

- allowscale: Controla el redimensionamiento de los objetos insertados en la película cuando el usuario

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

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

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

getURL(url , ventana , "variables")

LECCION 8 – Interactividad con ActionScript Página 12

loadMovieNum(url , nivel / destino, variables)

variables: Parámetro OPCIONAL. Podemos enviar variables.

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

Veamos antes que nada su Uso para comprenderlo mejor:

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

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

LECCION 8 – Interactividad con ActionScript Página 13

else: Especifica la alternativa si condicion se evalúa a falso. Es OPTATIVO. Sino existe, y no se

if (x == 2) {gotoAndPlay(6); } --> Si la variable x vale 2, entonces saltamos al fotograma 2, sino, no

Objeto "Button" (Botón)

LECCION 8 – Interactividad con ActionScript Página 14

Objeto "MovieClip" (Clip de Película)

porcentaje = ((bytes_cargados/bytes_totales)100); / Averiguamos el porcentaje que llevamos