Asp 2

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
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
crearfotogramas 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, para ver cómo se hace visita este
tema básico.
Existen los controladores prevScene() y nextScene() que hacen avanzar el cabezal a

escenas anteriores o siguientes. Así que veremos qué son las escenas para poder
utilizarlos también.
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ódigoActionScript.
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.
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 elclipPadre,
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
antesthis para referenciar el clip en cuestion.
this siempre hará referencia al objeto donde se encuentre la variable.
Nota: Estos manejadores son tan válidos para movieclips como para la película general
en sí, pues podríamos considerar que una película es un movieclip más grande.
También existen modos de capturar estos eventos sin tener que escribir el código dentro
del movieclip.
Sería de la siguiente forma:

miClip.onPress = function() {
miClip.play();
}
Estos eventos tienen que asociarse con una función (veremos este concepto en el punto
siguiente). Pero de esta forma podemos escribir el código directamente sobre el fotograma
y controlar cuando se ejecuta una acción sobre el movieclip.
En el ejemplo, el clip comenzará a reproducirse en cuanto se haga clic sobre él.
Veamos el conjunto de eventos más importantes para los movieclips:

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

del ratón sobre el movieclip.
• onRollOver = function() {}: se ejecuta cuando se desplaza el

ratón dentro del movieclip.
• onRollOut = function() {}: se ejecuta cuando se desplaza el

ratón fuera del movieclip.
• onKeyDown = function() {}: se ejecuta cuando se presiona una

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

con el clip de película resaltado.
Obviamente, existen muchos más eventos que podrás aprender en este tema
avanzado.
Veamos el ejemplo:
Si observas tenemos dos movieclips en la película, uno de ellos llamado estrella, y el
otro detalle. La línea de tiempo de estos movieclips tendría este aspecto:
Como puedes ver tenemos una cuarta capa que se llama acciones. Allí colocaremos las
acciones que se asociarán a este fotograma:
estrella.onPress = function() {
estrella.gotoAndPlay("desaparece");
detalle.gotoAndPlay("aparece");
}
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.
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.
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
desdeVentana → 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","D
omingo");
o
var matriz3:Array=
["Lunes","Martes","Miércoles","Jueves","Viernes","Sábado","Doming
o"];
Puedes ver un ejemplo práctico de los arrays en este apartado básico.

Las Funciones
Como habrás visto en los ejemplos anteriores, una función es un bloque de código
que podemos utilizar en cualquier parte del archivo SWF con sólo llamarla:
function miFuncion() {
var miVariable:Number = 1;
trace(miVariable);
}
En este ejemplo hemos creado una función que envía el contenido de la

variable miVariable al Panel Salida.
Podemos escribir la siguiente línea en cualquier momento despué de haber pasado la

función y esta se ejecutará:
miFuncion();
Como ves, crear funciones es bastante sencillo. Además podemos crear funciones un
poco más complejas enviándole parámetros:
function enviaSalida(miVariable:String) {
trace(miVariable);
}
Si en cualquier momento escribimos:

enviaSalida("Hola!");
Se mostrará el mensaje en el Panel Salida.
El modo de crear funciones con parámetros es bastante intuitivo. Al crear la función

deberás indicar que tipo de variable le vas a enviar. En nuestro ejemplo hemos definido el
parámetro como de tipo String.
De este modo podrás utilizar la variable miVariable dentro de la función y trabajar con
ella como quieras.
Para llamar a la función sólo deberás escribir su nombre y indicarle el parámetro que le
quieres enviar.
Puedes crear funciones con más de un parámetro, para ello sólo tendrás que separar
éstos por comas:
function miFuncion(parametro1:String, parametro2:Number,
parametro3:Boolean) {
// código
}
miFuncion("hola", 2, false);
Arrays
Veamos un ejemplo práctico de los arrays:

var miMatriz:Array =
["Lunes","Martes","Miércoles","Jueves","Viernes","Sábado","Doming
o"];
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.
Cargando Archivos
Una vez vistos todos estos conceptos pasaremos a ver una función en concreto, la
función LoadMovie.
Esta función te permite modificar el contenido de un clip de película y cargar en él

otro archivo SWF o incluso una imagen con formato JPG, GIF o PNG.
Su uso es el siguiente:
miMovieClip.loadMovie("pelis/clip.swf");
Con esto lo que hemos hecho es cambiar el contenido del clip miMovieClip y lo hemos
sustituido por el archivo clip.swf que se encontraba en la carpeta pelis. Es sencillo,
¿verdad?
También puedes utilizarla de esta forma:

loadMovie("archivo.swf", miMovieClip);
Es una variación de la anterior, aquí indicamos qué archivo queremos cargar y dónde. Si
en vez de cargarlo en miMovieClip lo cargasemos en this se cargaría en el clip en el que
está contenida la función. Incluso si éste es el clip de película principal.
Vamos al ejemplo. En la sección Encuéntranos hacemos clic en un botón de tipo texto y
nos aparece el mapa donde localizar el restaurante:
El código que hemos insertado en el botón es sencillo:

on (release) {
loadMovie("mapa.swf", this);
}
Los parámetros que le hemos pasado son el nombre de la película a cargar y su destino
(this, el propio clip donde estaba el botón).
Una línea equivalente hubiese sido esta:

this.loadMovie("mapa.swf");
Para descargar archivos cargados con la función loadMovie utiliza unloadMovie.
Esto nos servirá para liberar a un movieclip de la película o imagen que habíamos
cargado, dejándolo vacío.
Su sintaxis es la siguiente:
miClip.unloadMovie();
o
unloadMovie(miClip);
Existe la posibilidad de cargar archivos de otra manera, en vez de indicando su

destino indicaremos su nivel. Esto es, vamos a cargar varios archivos en un mismo sitio
y los dispondremos uno encima de otro, de forma que los que se encuentren en capas
superiores taparán a los de abajo.
Para ello deberemos utilizar la función loadMovieNum:

loadMovieNum("primera.swf", 0);
loadMovieNum("segunda.swf", 1);
loadMovieNum("tercera.swf", 2);
En este ejemplo hemos cargado 3 archivos SWF en el mismo sitio. Los tres estarán
disponibles a la vez, pero la película tercera.swf será la que se encuentre en el nivel
superior.
Como puedes ver, al no poder indicarse un destino, deberás introducir esta función
dentro del clip que quieres modificar. Si fuese escrita en el código del fotograma actuaría
directamente sobre la película principal.
Nota: Las películas cargadas en el nivel 0 serán las que establezcan la velocidad y
tamaño de fotogramas y su color de fondo para el resto de los fotogramas añadidos en
niveles superiores.
Podemos referirnos a películas cargadas en diferentes niveles y modificar sus

propiedades utilizando la sintaxis:
_level1._visible = true;
E incluso llamar a objetos contenidos en esas películas añadiendo, simplemente, el

nombre de instancia de éste:
_level1.miClip._visible = true;
Sigue el siguiente ejercicio paso a paso para ver cómo hacer una Película con Niveles
Podemos descargar películas cargadas con la

función loadMovieNum utilizando unloadMovieNum:
unloadMovieNum(2);
En esta función sólo debemos indicar el nivel donde está situada la película que
queremos descargar y cada más.
El uso de estas funciones es bastante sencillo y te ayudarán mucho en la eficiencia de

tus películas. Ten en cuenta lo que decíamos antes de las escenas.
Si creamos una película con varías escenas se almacenarán todas en un solo archivo, y
el usuario tendrá que descargarse el archivo entero para poder ver aunque sea una parte
mínima de la película.
Utilizando estas funciones podemos optimizar el tiempo de descarga, pues de este modo
el usuario sólo se descargará los archivos que desee visualizar.
Cargando Información
En este apartado veremos cómo utilizar un cargador para recoger información de un

archivo y mostrarla en una película Flash.
Nos basaremos en el siguiente ejemplo:

Observa la línea de tiempos:
En la capa de acciones escribiremos todo el código para que funcione la película. La

capa diapositivas contiene el efecto que hace que la imagen se desvanezca para volver a
aparecer.
Ahora explicaremos cómo lo hemos hecho.
Antes que nada añadimos un stop() en el primer fotograma para detener la acción y
reanudarla más tarde con el botón al que le hemos añadido el siguiente código:
on (release) {
gotoAndPlay (2);
}
Para que pase al fotograma dos y comience la transición. Igualmente hemos añadido
un stop() en el fotograma 11 para que se detenga la transición y espere a que se pulse de
nuevo el botón y vuelva al fotograma 2.
La transición es muy sencilla. En la capa diapositivas hemos añadido un clip de película

llamado contenedor del tamaño de la película, que será donde carguemos las imágenes
con la función loadMovie, y hemos incluido dos interpolaciones de movimiento. En el
fotograma 6 bajaremos la propiedad Alfa al 0% en el Panel Propiedades. Así
conseguiremos el efecto de la transición.
Mientras en el fotograma 6 añadiremos el código que hará que se cargue la imagen

en contenedor y se actualicen los campos de
textos descripcion_txt y titulo_txt incluidos en la capa area_texto en un clip
llamado textoDiapositiva.
Ahora que conocemos el funcionamiento veamos el código que hemos añadido en los
fotogramas 1 y 6.
Fotograma 1:
stop();
var archivo:String = "diapositivas.txt";
var total:Number = 4;
var imagenActual:Number = 1;
var matrizImagenes:Array = ["imagenes/imagen1.jpg",

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

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

loadMovie(matrizImagenes[imagenActual-1], contenedor); //carga
de la imagen
En las primeras líneas definimos las variables que vamos a utilizar.

• En la variable archivo introducimos la ruta del archivo de tipo txt
de donde sacaremos el texto asociado a las imágenes.
• La variable total almacena el número total de imágenes que

vamos a mostrar.
• La variable imagenActual almacenará el número de la imagen

que vamos a mostrar, la inicializamos a 1 para mostrar primero
la primera imagen.
• La variable matrizImagenes es una variable de tipo array y
almacenará las rutas de las imágenes que vamos a mostrar.
Ahora declararemos el cargador que sacará la información del archivo txt y lo pasará a
las cajas de texto.
Para ello utilizaremos el objeto LoadVars, este objeto permite enviar o recoger variables
en forma de URL.
Expliquemos esto. El objeto LoadVars es capaz de recoger una cadena de texto en

forma de URL como la siguiente:
var1=valor&var2=valor&var3=valor&var4=valor
Y sacar de allí las variables y sus valores.
La forma en la que lo hace es sencilla, a cada símbolo & que encuentre entenderá que
lo siguiente que encuentre será el nombre de una variable (igualada a su valor).
De esta forma escribiremos en el archivo de texto diapositivas.txt lo siguiente:

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

var cargador:LoadVars = new LoadVars();
Una vez declarado el objeto podemos trabajar con él.

Lo primero que haremos será establecer unas cuantas líneas que se ejecutarán cada
vez que intentemos cargar el archivo. Para ello aprovechamos el método onLoad del
objeto:
cargador.onLoad = function(exito:Boolean) {
if (exito) {
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:

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:

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

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.

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) escribenull o undefined.
• manejador: El nombre del manejador que se encargará de

gestionar el clic sobre la alerta.
• icono: El nombre del icono que queremos que aparezca a la
izquierda del mensaje. Para incluir un icono deberemos
vincularlo. Para ello haz clic derecho sobre el gráfico o clip de
película en la Biblioteca y selecciona Vinculación. Luego
marca la casilla Exportar para ActionScript y dale un nombre
de Identificador. Será a éste al que deberás referenciar en
el Alert.show().
• botonDefecto: Determina el botón por defecto de la alerta.

Utiliza la misma notación que
antes: Alert.OK, Alert.CANCEL, Alert.YES y Alert.NO. Se
activará este botón cuando se pulsa la tecla Intro.
Un ejemplo de manejador y alerta sería esta:
import mx.controls.Alert;
var miManejador:Function = function (miEvento:Object) {

if (miEvento.detail == Alert.OK) {
// acciones
}
else if (miEvento.detail == Alert.CANCEL) {
// acciones
}
}
Alert.show("Mensaje de alerta.", "Título", Alert.OK |

Alert.CANCEL, null, miManejador, "icono", Alert.OK);
Nota: Observa como se han manejado las respuestas de la alerta.
Cuando utilices este método para escribir los mensajes de alerta deberás tener en
cuenta que tienes que escribir todas las propiedades en orden y sin saltarte ninguna.
Aunque puedes no escribir algunas, deberás hacerlo de esta forma:

Alert.CANCEL, null, miManejador, "icono", Alert.OK);
o
Alert.CANCEL, null, miManejador, "icono");
o
Alert.CANCEL, null, miManejador);
o
Alert.CANCEL, null);
o
Alert.CANCEL);
o
Alert.show("Mensaje de alerta.", "Título);
Botones de Formulario
En los formularios, normalmente, incluiremos dos botones: Enviar y Limpiar.
Imagina que llamamos al componente botón de limpiar reset_btn, su código asociado

sería sencillo:
var escuchadorLimpiar:Object = new Object();
escuchadorLimpiar.click = function(evt:Object) {
campo1_txt.text = "";
}
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 =
var mensaje:String =
// 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.
Objetivo.
Cargar filtros mediante ActionScript dándoles las propiedades que queramos.

Al final conseguiremos una película como este ejemplo:
Introducción
Como comentamos al principio del curso podemos ver que Flash 8 incorpora una nueva
característica: los Filtros.
Su uso aumentará la capacidad de mejorar el aspecto y funcionamiento de nuestros

proyectos. El único problema es que, en esta versión, sólo están disponibles para los
clips de película, los botones y el texto.
En este tema veremos los filtros disponibles, su uso y como manejarlos mediante
ActionScript.
Para ilustrar su funcionamiento mostraremos ejemplos de cómo afectan los filtros a esta
imagen:
Antes de empezar resaltaremos una cosa. En ActionScript los colores se indican
mediante una cadena de 8 caracteres con un componente hexadecimal: 0xRRVVAA.
Las dos primeras serán siempre las mismas 0x, las dos siguientes corresponderán a la
cantidad de color rojo, las dos siguientes de verde y las dos últimas de azul.
De este modo 0x000000 sería el color negro (la ausencia de color), y 0xFFFFFF el color
blanco (con el rojo, azul y verde al máximo).
El Filtro Sombra
Utilizando este filtro podremos añadirle una sombra a la imagen:
Sus opciones son las siguientes:

• .alpha: determina la transparencia de la sombra (de 0 a 1).
• .angle: determina el ángulo de la sombra.
• .blurX: determina la cantidad de desenfoque horizontal.
• .blurY: determina la cantidad de desenfoque vertical.

• .color: determina el color de la sombra (escrito 0xRRVVAA).
• .distance: determina la distancia de la sombra al objeto.
• .hideObject: booleano, esconde el objeto dejando sólo la

sombra (segunda imagen).
• .inner: booleano, hace que la sombra sea interior.
• .knockout: booleano, activa el filtro extractor, hace que el objeto

se vuelva del color del fondo.
• .quality: número de veces que se aplica el filtro. Puede tomar

los valores 1, 2 ó 3. Calidad baja, media y alta,
respectivamente.
• .strength: determina la intensidad de la sombra.
Podrás utilizar el filtro Sombra escribiendo el siguiente código:
import flash.filters.DropShadowFilter;
var sombra:DropShadowFilter = new DropShadowFilter();

sombra.strength = 5;
sombra.alpha = 0.50;
sombra.color = 0x000000;
...
miClip.filters = [sombra];
También podrías crear la sombra directamente con todas sus propiedades en el

constructor de este modo:
var sombra:DropShadowFilter = new DropShadowFilter(distance,

angle, color, alpha, blurX, blurY, strength, quality, inner,
knockout, hideObject);
miClip.filters = [sombra];
Así en el constructor deberemos sustituir cada parámetro por el valor que queremos
darle.
Puedes omitir los parámetros que quieras, pero ten en cuenta que siempre se
interpretarán los valores que des en este orden hasta que no encuentre más.
Ejercicio paso a
paso.
1. Abre el archivo pez.fla que encontrarás en la
carpeta ejercicios/pez del curso, observa que tanto los campos
del formulario como el clip de película ya tienen un nombre de
instancia asignado.
2. Abre el Panel Acciones desde Ventana → Acciones o

pulsando la tecla F9.
3. Elimina la línea que dice
//código para añadir el filtro
y escribe lo siguiente en su lugar:
Esto hará que el filtro se importe a la película y podamos

utilizarlo.
4. Despues de esto escribe:

Hemos creado una variable llamada sombra que es un filtro de
Sombra.
5. Luego accederemos a las propiedades de sombra y le

daremos los valores que hay en los campos del formulario:
6. sombra.distance = distance_stp.value;
7. sombra.angle = angle_stp.value;
8. sombra.color = 0x000000;
9. sombra.alpha = alpha_stp.value;
10. sombra.blurX = blur_stp.value;
11. sombra.blurY = blur_stp.value;
12. sombra.strength = strength_stp.value;
13. sombra.quality = quality_cmb.selectedItem.data;
14. sombra.inner = inner_chk.value;
15. sombra.knockout = knockout_chk.value;
sombra.hideObject = hideObject_chk.value;
16. Finalmente asociamos el filtro sombra que hemos creado a la

propiedad filters del clip:
pez.filters = [sombra];
Hemos creado una película donde podemos cambiar las propiedades de un filtro
dinámicamente. Fácil ¿verdad?.
El Filtro Desenfocar
Utilizando este filtro podremos hacer que la imagen se muestre desenfocada:


respectivamente.
Podrás utilizar el filtro Desenfocar escribiendo el siguiente código:
import flash.filters.BlurFilter;
var sombra:BlurFilter = new BlurFilter ();

desenfocar.blurX = 5;
desenfocar.blurY = 5;
desenfocar.quality= 3;
miClip.filters = [desenfocar];
También podrías crear el desenfoque directamente con todas sus propiedades en el

constructor, de este modo:
import flash.filters.BlurFilter;
var desenfocar:BlurFilter = new BlurFilter(blurX, blurY,

quality);
miClip.filters = [desenfocar];
darle.
El Filtro Iluminado
Utilizando este filtro podremos añadirle un efecto de iluminación a la imagen:

• .alpha: determina la transparencia de la iluminación (de 0 a 1).

• .color: determina el color de la iluminación (escrito 0xRRVVAA).
• .inner: booleano, hace que la iluminación sea interior.


respectivamente.
• .strength: determina la intensidad de la iluminación.
Podrás utilizar el filtro Iluminado escribiendo el siguiente código:
import flash.filters.GlowFilter;
var iluminado:GlowFilter = new GlowFilter();

iluminado.quality = 3;
iluminado.alpha = 0.50;
iluminado.color = 0x000000;
...
miClip.filters = [iluminado];
También podrías crear la iluminación directamente con todas sus propiedades en el

constructor, de este modo:
import flash.filters.GlowFilter;
var iluminado:GlowFilter = new GlowFilter(color, alpha, blurX,

blurY, strength, quality, inner, knockout);
darle.
El Filtro Bisel
Utilizando este filtro podremos añadirle un bisel a la imagen:

• .angle: determina el ángulo del bisel.
• .distance: determina la distancia que abarcará el bisel en el

objeto.
• .highlightAlpha: determina la transparencia del color de
resaltado (bisel).
• .hightlightColor: determina el color del resaltado

(escrito 0xRRVVAA).


respectivamente.
• .shadowAlpha: determina la transparencia del color de sombra

del bisel.
• .shadowColor: determina el color de la sombra del bisel

(escrito 0xRRVVAA).
• .strength: determina la intensidad del bisel.
• .type: indica el tipo de bisel a aplicar. Puede tomar los

valores inner, outer y full. Interior, exterior y completo,
respectivamente.
Podrás utilizar el filtro Bisel escribiendo el siguiente código:
import flash.filters.BevelFilter;
var bisel:BevelFilter = new BevelFilter();

bisel.strength = 5;
bisel.angle = 45;
bisel.shadowColor = 0x000000;
...
miClip.filters = [bisel];
También podrías crear el bisel directamente con todas sus propiedades en el constructor
de este modo:
import flash.filters.BevelFilter;
var bisel:BevelFilter = new BevelFilter(distance, angle,

highlightColor, highlightAlpha, shadowColor, shadowAlpha, blurX,
blurY, strength, quality, type, knockout);
darle.
El Filtro Iluminado Degradado
Utilizando este filtro podremos añadirle una iluminación (como en el filtro anterior) a la
imagen, pero con la característica de que esta iluminación estará compuesta por un
degradado:
• .alphas: determina matriz de valores de transparencia alfa (de 0
a 1) para los colores correspondientes de la matriz colors.
• .angle: determina el ángulo de la iluminación.

• .colors: conjunto de colores que definen el degradado
(escritos 0xRRVVAA).
• .distance: determina la distancia de la iluminación al objeto.


respectivamente.
• .ratios: matriz de proporciones de distribución de color para los

colores correspondientes de la matriz colors (de 0 a 255).
• .strength: determina la intensidad de la iluminación.
• .type: indica la colocación de la iluminación. Puede tomar los

respectivamente.
Podrás utilizar el filtro Iluminado Degradado escribiendo el siguiente código:
import flash.filters.GradientGowFilter;
var iluminado:GradientGowFilter = new GradientGowFilter();

iluminado.angle = 45;
iluminado.colors = [0xFF0000, 0x00FF00, 0x0000FF];
iluminado.type = "inner";
...
También podrías crear la iluminación directamente con todas sus propiedades en el
constructor de este modo:
import flash.filters.GradientGowFilter;
var iluminado:GradientGowFilter = new GradientGowFilter(distance,

angle, colors, alphas, ratios, blurX, blurY, strength, quality,
type, knockout);
darle.
El Filtro Bisel Degradado
Igual que el filtro que hemos visto anteriormente, este filtro es capaz de mostrar un bisel
sobre el objeto, pero añadiendo un degradado a la forma de éste:

• .alphas: determina matriz de valores de transparencia alfa (de 0
a 1) para los colores correspondientes de la matriz colors.
• .angle: determina el ángulo del bisel.

• .colors: conjunto de colores que definen el degradado
(escritos 0xRRVVAA).
• .distance: determina la distancia que abarcará el bisel en el

objeto.


respectivamente.
• .ratios: matriz de proporciones de distribución de color para los

colores correspondientes de la matriz colors (de 0 a 255).
• .strength: determina la intensidad del bisel.
• .type: indica la colocación del bisel. Puede tomar los

respectivamente.
Podrás utilizar el filtro Bisel Degradado escribiendo el siguiente código:
import flash.filters.GradientBevelFilter;
var bisel:GradientBevelFilter = new GradientBevelFilter();

bisel.angle = 90;
bisel.colors = [0xFF0000, 0x00FF00, 0x0000FF];
bisel.type = "full";
...
También podrías crear el bisel directamente con todas sus propiedades en el constructor
de este modo:
import flash.filters.GradientBevelFilter;
var bisel:GradientBevelFilter = new GradientBevelFilter(distance,

angle, colors, alphas, ratios, blurX, blurY, strength, quality,
type, knockout);
darle.
El Filtro Ajustar Color
Utilizando este filtro podremos cambiar todas las características correspondientes al

color de la imagen:
Sólo tiene una opción: .matrix.
En ella escribiremos una matriz de 20 elementos (4x5) que indicarán la cantidad de

cada color, su intensidad, brillo, saturación y contraste.
Podrás modificar el filtro Ajustar Color escribiendo el siguiente código:
import flash.filters.ColorMatrixFilter;
var miMatriz:Array = [1, 0, 0, 0, 100,

0, 1, 0, 0, 100,
0, 0, 1, 0, 100,
0, 0, 0, 1, 0];
var ajustaColor:ColorMatrixFilter = new

ColorMatrixFilter(miMatriz);
miClip.filters = [ajustaColor];
Acceder a los Filtros de un Elemento
Para modificar los filtros asociados a un objeto tendremos que acceder a su

propiedad filters.
Esta propiedad almacena una matriz que no puede ser editada directamente. Así
que si queremos modificar los filtros que afectan a un objeto tendremos que darle una
nueva matriz a la propiedad y desechar la anterior.
Así, si queremos añadirán nuevo filtro al objeto miClip deberemos escribir lo siguiente:
var nuevaMatriz:Array = miClip.filters;
nuevaMatriz.push(sombra);
miClip.filters = nuevaMatriz;
Como puedes ver, lo que hacemos es guardar los filtros exitentes en una
matriz nuevaMatriz, introducimos el nuevo filtro en ella con el método push() y luego le
asignamos los filtros que contienemiMatriz al clip miClip.
Como esta propiedad se trata de una matriz también podemos acceder a los filtros de
esta forma:
var nuevaMatriz:Array = miClip.filters;
nuevaMatriz[0].blurX = 15;
nuevaMatriz[0].blurY = 15;
miClip.filters = nuevaMatriz;
Descargamos los filtros en nuevaMatriz, y ahora accedemos al primer filtro almacenado

y cambiamos sus propiedades blurX y blurY. Una vez modificadas, volvemos a volcar el
contenido denuevaMatriz en miClip.filters.
Fácil, ¿verdad? El único problema que tiene este método es que deberás recordar el
lugar que ocupa cada filtro en la matriz. Recuerda que el método push() inserta un
elemento en una matriz siempre en último lugar.
Introducción
Con Flash cada vez es más fácil añadir vídeos a nuestras presentaciones o webs. En
particular Flash 8 incorpora una serie de características que facilitan la tarea al máximo y
permiten el uso de vídeos como si se tratase de cualquier otro objeto en pantalla.
A continuación explicaremos cómo hacerlo y cuales son las mejores alternativas.

Utilizaremos el siguiente ejemplo para documentar algunos de los pasos que deberemos
realizar.
Importando Vídeos
Lo primero que deberemos hacer es transformar nuestro vídeo de

formato avi, mpeg, mov, wmv o dv al formato que utiliza Flash: flv.
Este formato, además de crear archivos de vídeo de buena calidad muy comprimidos,
te permitirá introducir puntos de referencia desde donde controlaremos la interacción del
entorno de la película con el vídeo.
Haz clic en Archivo → Importar → Importar vídeo para empezar a configurar el

archivo .flv que crearemos.
Se abrirá una pantalla como esta:

Aquí deberás seleccionar el archivo que quieres importar para utilizarlo en tu película.
Haz clic en el botón Examinar y búscalo en tus carpetas. Cuando lo hayas encontrado
pulsa el botón Aceptar y estarás listo para seguir pulsando el botón Siguiente.
También es posible marcar la opción Ya se ha implementado en un servidor Web,

Flash Vídeo Streaming Service o Flash Communication Server. En este caso deberás
introducir la URL del archivo, que previamente habrá sido preparado para poder utilizarlo
en Flash.
La siguiente pantalla te permitirá seleccionar el modo en el que se implementará el

vídeo:
Puedes elegir entre varias opciones, si seleccionas cualquiera de ellas verás su
descripción en la derecha de la pantalla. Te adelantamos que para la implementación de
vídeo para Streaming deberás disponer de un servidor (de pago) que transmita tu vídeo al
usuario de una forma óptima.
La opción Descarga progresiva, a pesar de no ser la más aconsejada para conexiones

de baja velocidad (sobre todo para archivos muy grandes) es la más utilizada por aquellos
que no disponen de los recursos necesarios para contratar los servicios de un servidor de
vídeo en formato Stream.
Así que seleccionaremos la primera opción y pulsaremos Siguiente.

Ahora es cuando realmente configuraremos el archivo de salida. Antes que nada pulsa
el botón Mostrar configuración avanzada.
Verás 3 pestañas. La primera te servirá para ajustar la compresión y calidad del

vídeo. Puedes seleccionarla directamente en el desplegable de arriba del todo o cambiar
alguna de las opciones que te aparecen en la pestaña Codificación.
Nosotros haremos hincapié en la pestaña Puntos de referencia.

Desde aquí podremos configurar puntos en nuestra película.
Existen dos tipos de puntos de referencia diferentes: el de Navegación y el de Evento.
Creando puntos de Navegación podremos referenciarnos más tarde a ellos para saltar
en la película. Sería algo así como crear capítulos sobre los que podremos navegar
utilizando botones y ActionScript.
El punto de Referencia de Evento nos permitirá crear interacciones con el resto de

objetos en la película. Estos puntos nos permitirán pasar parámetros que podremos
recuperar mediante ActionScript.
En el ejemplo hemos creado los siguientes puntos de referencia:

Como ves hay 3 de Navegación, a los cuales acudiremos pulsando los botones para
saltar entre los capítulos de la película. Luego hemos añadido 4 puntos de Evento desde
los que pasaremos un parámetro que hará que se muestre determinado fotograma de un
clip que se encontrará en el Escenario.
Puedes realizar el ejercicio paso a paso de Puntos de Referencia para ver cómo lo
hacerlo.
Desde la pestaña Recortar y Ajustar podrás modificar el tamaño del vídeo y su

duración.
Cuando hayas terminado pulsa el botón Siguiente.

Desde aquí podrás seleccionar un estilo de controles predeterminado, elige uno o
selecciona Ninguno para crear tú mismo los controles (como veremos a continuación) y
pulsa el botón Siguiente.
El sistema te avisará de que el vídeo está debidamente configurado y pasará a

importarlo. Cuando haya terminado lo añadirá directamente sobre el Escenario.
El Componente FLVPlayback
Si ya tuvieses el archivo importado a flv no haría falta que realizases las acciones
anteriores, sólo deberás insertar en el escenario un componente que incorpora Flash para
la reproducción de éste.
Abre el Panel Componentes desde Ventana → Componentes y haz clic sobre FLV
Playback - Player 8. Arrastra un componente FLVPlayBack al Escenario.
Desde el Panel Parámetros podrás configurarlo. Allí encontrarás las siguientes

opciones:
• autoPlay: puede tomar los valores true o false. Indican si el
vídeo debe reproducirse nada más abrir el archivo o esperar a
una orden para empezar a reproducirse.
• autoRewind: puede tomar los valores true o false. Indica si el

vídeo deberá volver a la posición inicial despés de haberse
reproducido completamente.
• autoSize: puede tomar los valores true o false. Indica si el

control deberá ajustarse al tamaño del vídeo, o por el contrario
deberá ser el vídeo el que se ajuste al tamaño del control.
• bufferTime: especifica el número de segundos que se

almacenarán en la memoria antes de que se inicie la
reproducción del vídeo.
• contentPath: indica la ruta del archivo que se deberá

reproducir.
• cuePoints: indica los puntos de referencia que están incluidos

en la película. Una vez importada la película a formato flv no
pueden ser modificados.
• isLive: puede tomar los valores true o false. Este campo se

utilizará para la transmisión de vídeo en vivo y sólo podrá
utilizarse a través de un servidor de Streaming.
• skin: desde aquí puedes modificar la apariencia de los controles

de la película y seleccionar uno entre los predefinidos.
• skinAutoHide: puede tomar los valores true o false. Indicará si
los controles se pueden esconder para volver a aprecer cuando
el cursor se sitúe sobre la película.
• totalTime: indica el tiempo total del vídeo.
• volume: de 0 a 100. Indica el volumen máximo del vídeo.

Una vez insertada la película mediante la adición de este componente o por importación
deberemos darle un nombre de instancia para poder referirnos a él. Hazlo desde este
mismo panel o desde el Panel Propiedades.
Uso de Componentes para la

Reproducción
Usar componentes para controlar la

película es muy sencillo, sólo deberás
arrastrarlos desde el Panel
Componentes al Escenario y escribir unas
pocas líneas en el Panel Acciones.
Para añadir estos componentes haz clic

en el elemento FLV Playback Custom UI y
arrastra el que tu quieras al Escenario,
veamos cuales son sus funciones.
• BackButton: retrocede el flujo del vídeo al punto de referencia
inmediatamente anterior o en su
defecto al inicio de éste.
• BufferingBar: muestra el
progreso de descarga del vídeo.
• ForwardButton: avanza el flujo del vídeo al punto de referencia
inmediatamente posterior o en su defecto al final de éste.
• MuteButton: establece el volumen de la película directamente a

0. Actuaría de forma similar a la línea:
miVideo.volume = 0;
• PauseButton: pausa la película en el momento en el que se

pulse el botón.
• PlayButton: reaunda (o comienza) la reproducción a partir de

donde se encuentre el cabezal de reproducción de vídeo.
• PlayPauseButton: una mezcla de los dos anteriores, es capaz

de pausar y reanudar la reproducción desde un mismo control.
• SeekBar: desde esta barra avanzar y retroceder manualmente

por la línea de flujo de la película.
• StopButton: detiene la reproducción y posiciona el cabezal de

reproducción al principio del vídeo.
• VolumeBar: permite el aumento o disminución del volumen del

vídeo mediante una barra de volumen.
Una vez añadidos los componentes

necesarios al Escenario tendrás que darle
un nombrede instancia y luego escribir lo
siguiente (dependiendo de los controles que
hayas arrastrado) en el Panel
Acciones del fotograma 1:
miVideo.playButton =
miBotonPlay;
miVideo.pauseButton =
miBotonPausa;
miVideo.playPauseButton =
miBotonPausaPlay;
miVideo.stopButton =
miBotonStop;
mVideo.backButton =
miBotonAtras;
miVideo.forwardButton =
miBotonAdelante;
miVideo.muteButton =
miBotonSilencio;
miVideo.volumeBar =
miBarraVolumen;
miVideo.seekBar =
miBarraDeslizadora;
miVideo.bufferinBar =
miBarraProgreso;
El componente se asociará al vídeo y

funcionará por sí solo. Fácil, ¿verdad?
Puedes modificar los componentes que

añadas al Escenario haciendo doble clic
sobre ellos y cambiando su forma, tamaño o
color.
Crear Controles Propios
Crear controles propios no es muy

complicado en Flash 8. Sólo tienes que
crear los botones que consideres necesarios
y utilizar las propiedades del
componenteFLVPlayback.
• play(): reproduce el vídeo.
miVideo.play();
• stop(): detiene el vídeo y vuelve al inicio.
miVideo.stop();
• pause(): detiene el vídeo conservando su posición actual.
miVideo.pause();
• seek(segundo:Number): permite el avance o retroceso de la

película de vídeo.
miVideo.seek(5);
Esta línea colocará la cabeza lectora en el segundo 5 y
reproducirá a partir de ahí.
• volume: define el volumen del vídeo. Puedes introducir un valor

entre 0 y 100.
miVideo.volume = 50;
Un ejemplo de cómo crear un botón de

Play/Pause sería asociando el código
siguiente a un botón:
on (release) {
if (miVideo.state ==
miVideo.PAUSED) {
miVideo.play();
}
else {
miVideo.pause();
}
}
La propiedad state devuelve el estado en

el que se encuentra nuestro vídeo en el
momento, puede tomar los siguientes
valores:
• miVideo.PAUSED: el vídeo se encuentra pausado.
• miVideo.PLAYING: el vídeo se está reproduciendo.
• miVideo.REWINDING: el vídeo está en estdo de rebobinado.
• miVideo.SEEKING: el vídeo está en estado de búsqueda.
• miVideo.STOPPED: el vídeo se encuentra detenido.
• miVideo.BUFFERING: el vídeo todavía se está almacenando en

el buffer.
• miVideo.CONNECTION_ERROR: se ha producido un error de

conexión y el vídeo no podrá visualizarse.
• miVideo.DISCONNECTED: el vídeo está en estado de
desconexión. Este estado se producirá hasta que se le asigne
una ruta a la propiedadcontentPath.
• miVideo.LOADING: el vídeo está en estado de carga.
Ahora veremos como interactuar con los

puntos de referencia que hayamos creado.
En el ejemplo hemos creado 3 botones

que deberán saltar a los tres puntos
diferentes que hemos
creado: inicio, carrera1 y carrera2.
El código asociado al botón sería el

siguiente:
on (release) {
miVideo.seekToNavCuePoint("ini
cio");
miVideo.play();
}
Este trozo de código utiliza la

función seekToNavCuePoint para buscar el
punto de referencia que se le indique, luego
tendremos que decirle que reanude la
reproducción.
También puedes utilizar las
funciones seekToNextNavCuePoint() y see
kToPrevNavCuePoint() para avanzar y
retroceder, respectivamente, por los
diferentes puntos de referencia de
navegación creados.
miVideo.seekToNextNavCuePoint(
);
miVideo.seekToPrevNavCuePoint(
);
Interacción de Vídeo y Elementos

Externos
Como vimos antes, podíamos crear

puntos de referencia de Eventos para pasar
parámetros a nuestra película desde la
reproducción del vídeo.
Su uso no es muy complicado,

deberemos crear un escuchador que esté
pendiente de los puntos de referencia que
se vayan reproduciendo en el vídeo de la
siguiente forma:
var eventosVideo:Object = new
Object();
eventosVideo.cuePoint =
function(puntoRef:Object):Void
{
if
(puntoRef.info.parameters.leng
th > 0) {
mensaje.gotoAndPlay(puntoRef.i
nfo.parameters["fotograma"]);
}
}
miVideo.addEventListener("cueP
oint", eventosVideo);
De esta forma cuando se encuentre con

un punto de referencia evaluará si tiene
parámetros con la propiedad:
puntoRef.info.parameters.lengt
h
Si es así, sacamos la información del

parámetro llamándolo por su nombre y
actuamos en consecuencia.
En el ejemplo hemos creado un clip de
película que se llama mensaje. Cuando se
van produciendo determinados eventos en
el vídeo vamos moviendo el cabezal de
reproducción de dicho clip y así creamos
una vinculación entre ambos, el clip y el
vídeo.
Si escribieses lo siguiente te devolvería

al Panel Salida el nombre del punto de
referencia.
trace(puntoRef.info.name);
Unidad Principio del formulario
Juegos
23. Búsqueda
(I). Final del formulario
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("para
do");
miClip._x = 10;
miClip.onPress =
function() {
if (miClip._x <= 10) {
miClip.gotoAndStop("dere
cha");
derecha = true;
}
if (miClip._x >= 495)
{
miClip.gotoAndStop("izqu
ierda");
izquierda = true;
}
}
_root.onEnterFrame =
function() {
if (derecha) {
if (miClip._x <
495) {
miClip._x =
miClip._x + 6;
}
else {
do");
derecha =
false;
}
}
if (izquierda) {
if (miClip._x >
10) {
miClip._x =
miClip._x - 6;
}
else {
do");
izquierda =
false;
}
}
}
Observa cómo hemos utilizado aquí

la función onEnterFrame. Nos
valemos de ella para crear el
movimiento, de esta forma hacemos
que la coordenada x del objeto se
incremente cada vez que entre en el
fotograma de nuevo. Veremos esta
función con más detalle en el tema 24.
Hemos utilizado las

variables derecha e izquierda (de
tipo booleano) para evaluar si el objeto
debe desplazarse. En el
evento onEnterFrame chequeamos
estas variables y si están
a true comenzamos el movimiento
hasta la posición que queramos.
A medida que vayamos avanzando

en el tema veremos más funciones y
métodos que nos permitirán acciones
más versátiles y ajustadas a nuestras
necesidades.
Otra forma de modificar la

apariencia del objeto con el que
trabajamos es utilizando la
propiedad _rotation.
Esta propiedad actúa sobre el

objeto rotándolo tantos grados como
especifiques respecto a su posición
original. Por ejemplo:
miClip_rotation = 90;
Esta línea hará que el objeto rote 90

grados en el sentido de las agujas del
reloj. Para rotar un objeto hacia el lado
contrario basta con añadirle un signo
menos (-) antes del ángulo:
miClip._rotation = -90;
Para devolver al objeto a su posición

original sólo tendrás que escribir la
siguiente línea:
miClip._rotation = 0;
Así la rotación que actúa sobre el

objeto es nula y se muestra en su
posición original.
Recuerda que para que las rotaciones

parezcan reales deberás posicionar el
objeto dentro del clip en el centro
absoluto, para que así la referencia del
clip se encuentre en la posición
adecuada.
Observa la diferencia entre estos dos

clips:
En ambos la rotación se aplicará

respecto al punto de referencia, por lo
que en la edición de éste deberás
utilizar los botones y del Panel
Alinear (Ventana →Alinear) para
centrar el objeto respecto al punto de
referencia del clip.
Realiza el paso a paso de

rotación para ver mejor como funciona.
El problema ahora se nos plantea

cuando queremos que el objeto se oriente
hacia unas coordenadas en concreto.
¿Cómo calculamos el ángulo necesario para
que nuestro elemento se oriente hacia otro
situado en las coordenadas 100, 200? La
solución no es muy complicada: deberemos
echar mano de la trigonometría.
En Flash tenemos una función muy útil
que nos ayuda a encontrar ángulos
rápidamente.
Utilizando la
función Math.atan2 recuperaremos el
ángulo formado por unas coordenadas
en el espacio respecto a un punto
central.
Veamos un ejemplo:
Escribiendo la siguiente línea

recuperaremos el ángulo que buscamos:
var angulo = Math.atan2(x, y);
Ahora veamos las tres consideraciones

que tenemos que tener en cuenta.
Observa este ejemplo:
Lo primero a tener en cuenta es que las

coordenadas que tenemos del punto al que
queremos orientar el objeto no están en
relación éste.
Podemos averiguarlas de forma muy fácil

haciendo una pequeña conversión restando
las coordenadas entre sí:
Ahora ya podemos emplear la
función atan2:
var angulo = Math.atan2(x1 -
x2, y1 - y2);
Lo segundo que tendremos que saber es

que esta función devuelve un ángulo
medido en el sentido contrario a las
agujas del reloj, es decir:
Por tanto si decimos a nuestro objeto que

se oriente -30 grados se colocará de esa
forma:
Nuestro objeto se encuentra en otro
cuadrante completamente diferente, pero si
observamos con atención, la diferencia
siempre será de 90º:
Sólo tenemos que sumarle 90 al ángulo

resultante para que el objeto se oriente
hacia el lugar correcto.
Así que podemos solventaremos esto son

una sola línea. Pero antes convertiremos
el ángulo resultante en radianes a
grados:
var grados:Number =
Math.round(angulo*180/Math.PI)
;
miClip._rotate = grados + 90;
Desde luego la suma que hemos

realizado es consecuencia directa de que
el objeto este orientado inicialmente
hacía arriba (y empiece a contar los grados
desde ese punto en 0).
Si partiésemos de un estado original

horizontal como el desfase del objeto ya se
encuentra a 90 grados no hará falta
realizarlo:
Observa que en este caso si giramos el

objeto -30 grados se colocará orientado
hacia la posición que buscamos.
O incluso, si al contrario, el objeto se

encuentra orientado hacia la
izquierda deberemos sumarle 180º.
Como ves, todo dependerá de la posición
original del objetos (y de que vértice quieras
orientar). Lo más aconsejable en este caso
es que los objetos que vayan a rotar estén
orientados hacia la derecha, así no
tendrás que preocuparte del desfase del
ángulo.
Otra de las técnicas que nos será muy útil

es la carga y descarga de elementos
existentes en la biblioteca. Esto lo
haremos con la función attachMovie.
Tiene la siguiente sintaxis:

this.attachMovie(simbolo,
nombreInstancia, nivel,
opciones);
Para poder incluir un clip en el escenario

antes deberás vincularlo para poder
acceder a él desde ActionScript. Puedes
hacerlo haciendo clic derecho sobre el
elemento en la Biblioteca.
Selecciona Vinculación.
En la ventana que se
abrirá haz clic
sobre Exportar para
ActionScript y dale
un nombre al cual te podrás
referir cuando lo cargues
con attachMovie().
En la primera variable
deberemos introducir el
nombre del objeto tal y
como lo escribimos en la
vinculación. La
variable nombreInstancia al
macenará 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 ini
cializar 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(objetoDupli
car, 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 unloadMov
ie().
Interacción del Mouse

Veamos ahora cómo interactuar con el
ratón y el Escenario y sus elementos.
Empezaremos viendo una de las

funciones más útiles para el ratón: arrastrar
y colocar.
Utilizando las
funciones StartDrag() y StopDrag() es muy
sencillo arrastrar y colocar objetos por
el Escenario, para ello deberás introducir
sólo dos eventos de clip en el objeto a
arrastrar:
• En el evento press (cuando aún no se ha soltado el botón del
ratón) comenzaremos el arrastre:
• on (press) {
• startDrag(this);
}
• Más tarde en el evento release (cuando se suelta el botón),

detendremos el arrastre y el objeto quedará colocado en el sitio
que definió el botón:
• on (release) {
• stopDrag();
}
La función startDrag permite varios
parámetros:
startDrag(objetoArrastar,
bloqueaCentro, izquierda,
arriba, derecha, abajo);
En bloqueCentro podrás pasarle un valor

(true o false) que indicará si el arrastre se
realizará desde el centro del clip o desde
el punto donde hizo clic el usuario.
El resto de variables te permitirá definir

mediante coordenadas un espacio activo
donde se podrá realizar el arrastre. Esta
opción es muy útil cuando queremos que el
arrastre sólo se pueda realizar sobre una
zona determinada, como por ejemplo las
tizas de las barras de desplazamiento, que
no se pueden arrastrar fuera de la zona
rectangular que delimitan dichas barras.
Una propiedad muy útil que también te

será de mucha ayuda es la de _droptarget.
Te permitirá averiguar sobre qué elemento
se ha soltado el objeto arrastrado:
on (release) {
stopDrag();
trace(this._droptarget);
}
Este código devolverá al Panel Salida el

nombre de instancia del objeto sobre el cual
se ha soltado. Si el objeto no tuviese uno
devolvería el nombre genérico instanciai,
donde i es un número de orden de objetos
añadidos al Escenario.
Realiza el paso a paso de Arrastre y

Orientación de objetos para practicar
conceptos que hemos visto hasta ahora.
Otra cosa que nos será de gran ayuda

será poder localizar la posición del ratón.
De este modo podríamos hacer que los
objetos se desplacen u orienten hacia el
ratón
Para averiguar las coordenadas del ratón

sólo tendrás que recurrir a las
propiedades _xmouse e _ymouse:
var coordenadaX:Number =
_xmouse;
var coordenadaY:Number =
_ymouse;
Fácil, ¿verdad?
Con todo lo que hemos

aprendido podemos ya sustituir
el cursor del Mouse normal
por uno de nuestro agrado.
Para ello tienes que escribir

muy pocas líneas:
this.attachMovie("c
ursor", "miCursor",
500);
Mouse.hide();
var
escuchador:Object =
new Object();
escuchador.onMouseM
ove = function() {
miCursor._x =
_xmouse;
miCursor._y =
_ymouse;
}
Mouse.addListener(e
scuchador);
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 delMouse a cada
movimiento de éste.
Como ves una de las pocas

cosas nuevas introducidas aquí
es el uso de la
función hide() del ratón.
Invocándola haces que el
Mouse desaparezca.
Puedes volver a visualizar el ratón

escribiendo:
Mouse.show();
Interacción del Teclado
Podemos añadir a nuestras películas

interacción con las teclas pulsadas, el
procedimiento es muy sencillo, basta con
utilizar la función isDown del objeto Key:
if Key.isDown(Key.UP) {
//mover hacia arriba
}
Como alternativa puedes utilizar

un escuchador para el teclado y ver qué
teclas son pulsadas en cada
momento accediendo a ellas a través de la
función Key.getCode():
var escuchador:Object = new
Object();
escuchador.onKeyDown =
function() {
switch (Key.getCode()) {
case Key.SPACE :
//disparar
break;
case Key.LEFT :
//mover hacia la
izquierda
break;
case Key.UP :
//mover hacia arriba
break;
case Key.RIGHT :
//mover hacia la derecha
break;
case Key.DOWN :
//mover hacia abajo
break;
}
}
Key.addListener(escuchador);
Aunque depende siempre de la función

que quieras que realicen tus teclas, a veces
es más útil un método que otro.
Los códigos de las teclas son bastante
sencillos, las
flechas UP, DOWN, RIGHT y LEFT; la barra
espaciadora SPACE; y las teclas
especiales SHIFT, CONTROL, TAB,CAPSL
OCK, ESCAPE, ENTER, BACKSPACE, IN
SERT, 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) {
miClip._x =
miClip._x + 3;
}
else {
miClip._rotation =
0;
}
}
else if
(Key.isDown(Key.LEFT)) {
miClip._rotation = -10;
if (miClip._x > 30) {
miClip._x =
miClip._x - 3;
}
else {
miClip._rotation =
0;
}
}
else {
}
}
Como ves en el ejemplo se evalúa cada

vez que entra en el fotograma, por lo
que las funciones de la presión
continuada de una tecla se ven cubiertas.
Interacción entre Elementos
Una de las cosas que más nos interesará

realizar es el choque entre elementos en
el Escenario, y ya no el choque físico en sí,
sino la coincidencia de dos elementos en
un mismo espacio.
Esto lo podremos evaluar y tratar con la

función hitTest().
Su uso tiene dos posibilidades, ambas

muy sencillas. Puedes evaluar si en un
punto en concreto se encuentra un objeto
específico (muy útil para detectar los clics
del ratón o donde se encuentra en cada
momento):
var escuchador:Object = new
Object();
escuchador.onMouseDown =
function() {
if
(miClip.hitTest(_xmouse,_ymous
e) {
//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_Cli
p, 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;
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()*(max
Num-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"+r
andomProyectil,
"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 unacoordenada 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("estadist
icas_txt", 5000, 10, 0, 530,
22);
estadisticas_txt.setNewTextFor
mat(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(nombreInstanci
a, profundidad, coordenadaX,
coordenadaY, anchura, altura);
Como puedes ver, otra vez nos

encontramos con los niveles que
utilizábamos con la función attahMovie.
Simplemente asegúrate de que no repites el
nivel y todo irá bien.
Ahora sólo hará falta remitirse a la

propiedad text del texto que hemos creado
para darle un valor, y el texto se mostrará en
pantalla:
estadisticas_txt.text = "Estas
son las estadísticas del
juego";
Las propiedades de formato de texto que

hemos utilizado son las más comunes, si
necesitas un listado completo de ellas
puedes visitar nuestra sección avanzada.
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".
Movimiento de objetos mediante

ActionScript
• Para poder mover objetos con ActionScript

debemos conocer el sistema de
coordenadas utilizado por Flash.
• La esquina superior izquierda es
la posición x=0, y=0. (ver la imagen)
• Para mover un objeto debemos modificar
su posición definida por las
propiedades objeto._x y objeto._y
• Por ejemplo, si
hacemos objeto._x += 10 estamos
desplazando el objeto 10 píxeles hacia la
derecha.
• Vamos a ver como mover un objeto a partir
de este ejemplo de una bola botando.
•
•
El algoritmo es muy sencillo, se trata de

ir modificando la posición de la bola desde
una posición inicial para que vaya bajando
hasta que llegue al suelo, en ese
momento invertimos el movimiento para que
suba y calculamos hasta donde tiene que subir.
Así sucesivamente hasta que deje de botar.
Para que la bola baje debemos sumar una
cantidad a la coordenada y, y para que suba
debemos restarle una cantidad. Si queremos que
la bola se vaya desplazando hacia la derecha
debemos sumar una cantidad a la coordenada x.
Cuando la bola baja, según el esquema de la

derecha, pasa de la posición (x1, y1) a la posición
(x2, y2), para ello se incrementa la x con el
valor incre_x (que estaria representado por la
línea azul) y se incrementa la y con el
valor incre_y (que estaria representado por la
línea roja).
Cuando la bola sube, la única diferencia es

que la coordenada y va disminuyendo en lugar
de aumentando, según el esquema de la derecha,
al subir se pasa de la posición (x'1, y'1) a la
posición (x'2, y'2), para ello se incrementa
la x con el valor incre_x (que estaria
representado por la línea azul) y
se decrementa la y con el valor incre_y (que
estaria representado por la línea roja)
•
•
Vamos a ver lo más importante del código

ActionScript que tenemos un poco más abajo.
Hemos definido creado una bola azul y la

hemos convertido en un movieclip, la instancia
se llama bola_mc.
Inicialmente la bola esta en la posición

(bola_mc._x= 0,bola_mc._y= 0)
Mediante la variable baja, sabremos si la bola

esta bajando o subiendo. Cuando la
coordenada y llega al suelo, la bola pasará a
subir, cuando la coordenada y llegue al tope la
bola comenzará a bajar.
En cada bote la bola ira perdiendo fuerza y el

bote sera más bajo, la
variable elasticidad determinará esta perdida de
potencia.
Cada vez que la bola llega al tope calculamos
el nuevo tope, para ello calculamos la distancia
de la bola al suelo, la dividimos por
la elasticidad y esa cantidad se la sumamos al
tope.
En el esquema, la linea naranja representa

esa cantidad que le sumamos al tope 1 para
pasar al tope 2.
Ya tenemos nuestro código casi preparado,

ahora sólo falta hacer que el proceso se repita un
número determinado de veces. Esta película
Flash sólo tiene un fotograma. ¿Cómo hacemos
esto? Lo primero que se nos ocurre es incluir una
instrucción while ... o una instrucción for ... , si
lo hacemos veremos que no funcionará porque la
repetición es tan rápida que no da tiempo a ver
nada.
La solución está en introducir una instrucción

que haga que el proceso se repita cada 35
milisegundos. Esto lo vamos a ver en el punto
siguiente.
Hemos colocado un botón en la película de

forma que cada vez que se pulsa, se detine la
ejecución (si todavía no había acabado) y se
lanza una nueva ejecución.
Cuando el tope llega al suelo se detine la
ejecución.
•
on (release) {
var baja:Boolean = true;
var incre_x:Number = 3.5;
var incre_y:Number = 8;
var suelo:Number = 280;
var tope:Number = 0;
var elasticidad:Number = 3;
bola_mc._y = 0;
bola_mc._x = 0;
tope += (suelo - bola_mc._y) /
elasticidad;
var repeticion:Number;
function botar() {
if (baja) { // baja
bola_mc._y += incre_y;
bola_mc._x += incre_x;
if (bola_mc._y>=suelo) {
baja = false;
}
} else { // sube
bola_mc._y -= incre_y;
bola_mc._x += incre_x;
if (bola_mc._y<=tope) {
baja = true;
if (tope>=suelo) {
incre_y = 0;
clearInterval(repeticion);
}
tope += (suelo -
bola_mc._y) / elasticidad;
}
}
}
clearInterval(repeticion);
repeticion = setInterval(botar,
35);
}
•
En este sencillo ejemplo la trayectoria de la

bola es rectilínea, para que fuese un movimiento
más real debería seguir una trayectoría curva.
Dibujar curvas es un poco más complicado que
dibujar rectas. Flash nos ofrece una opción más
sencilla para hacer que un objeto siga una
trayectoria curva: las guías de movimiento que
veremos en este mismo tema aplicadas al bote de
una pelota.
•
• De todas formas si deseas probar suerte
con las curvas y ActionScript realiza
el ejercicio Espiral para empezar a
familiarizarte con ellas.
Función setInterval y propiedad
onEnterFrame
• La función setInterval se utiliza cuando
queremos que se repita la ejecución de
un código ActionScript cada cierto
número de milisegundos, y la
propiedadonEnterFrame se utiliza cuando
queremos ejecutar un código
ActionScript en función de la velocidad
de la película Flash.
• Estas funciones se pueden utilizar para
controlar el tiempo cuando utilizamos
ActiónScript y no nos interesa utilizar los
fotogramas como forma de control del
tiempo.
• Por ejemplo, podemos genera un objeto y
hacer que se mueva un 5 pixels cada 30
msg. variando estos parámetros
conseguiremos que el objeto se mueva
más o menos rápido.
• setInterval
• El formato de esta función es el
siguiente:
• var retardo:Number =
setInterval(functionReference:
Function, interval:Number,
[param1:Object, param2, ...,
paramN]);
• Donde,
• functionReference es la función
que se va a repetir.
• interval es el número de
milisegundos que van a transcurrir
entre cada llamada a la función.
• [param1:Object, param2, ...,
paramN] es la lista opcional de
parámetros que se pasan a la
función.
• retardo es una variable que
identifica el intervalo y que sirve
para utilizarlo
con clearInterval() para detener la
ejecución.
• Por ejemplo, el codigo siguiente
escribe 10 veces el
mensaje "contador" i , cada 2000
milisegundos (2 sg.).
• var i:Number = 1;
• var repeticion:Number =
setInterval(contar, 2000);
• function contar() {
• trace("contador: "+ i++);
• if (i>10) {
• clearInterval(repeticion)
;
• }
• }
• La funcion clearInterval sirve
para detener la ejecución de la
función llamada
desde setInterval. Por lo tanto,
conviene
utilizar clearInterval siempre que
usemos setInterval, para evitar
que la ejecución continúe
indefinidamente.
• En el ejemplo del punto anterior
hemos definido la función
gobal setInterval para que la
función botar se ejecute cada 35
milisegundos.
•
• onEnterFrame
• El controlador de
eventos onEnterFrame, asociado
al objeto MovieClip,
permite invocar a una función de
forma repetida tantas veces
como fotogramas por segundo
tenga definida la película.
• Por ejemplo, en el
movieClip bola_mc:
• var i:Number =0;
bola_mc.onEnterFrame =
function() {
• trace("ejecutando: "+ ++i);
• if ( i > 30 ){
• delete
this.onEnterFrame;
• }
}
• Si la velocidad de la película es
de 12 fps, este código escribiría
en la salida 12 líneas por
segundo, de esta forma:
• ejecutando:1
• ejecutando:2
• ejecutando:3
• ...
• Como puedes ver hemos añadido
una condición para que cuando el
valor de i sea mayor de 30 acabe
la ejecución del
controlador onEnterFrame y así
evitar que se ejecute
indefinidamente.
•
• Aunque con este ejemplo no lo parezca,
(sólo pretende explicar la función) estas
dos tipo de funciones que se ejecutan
repetitivamente pueden ser muy útiles en
determinadas ocasiones. A lo largo del
cursos ya hemos visto algunos ejemplos
de su utilidad, a continuación veremos otro
ejemplo que puede sernos útil.
• Imagínate que quieres que tu pelicula se
detenga durante 2 segundos y luego
continue. Esta es una forma de hacerlo
utilizando la función setInterval.
•
• Colocariamos este código en el frame que
deseemos, llamamos a setInterval con 1
sg (1000 milisg) y cuando se hallan
cumplido dos llamadas
detenemos setInterval y continuamos con
el siguiente frame de la película.
• var tope:Number = 1;
• var repeticion:Number =
setInterval(parar, 1000);
• function parar() {
• tope++;
• if (tope > 2) {
• clearInterval(repeticion);
• nextFrame();
• play();
• }
• }
• stop();
•
Movimiento de
objetos mediante
guía
•
• En esta unidad ya hemos visto como hacer
botar una bola mediante ActionScript,
ahora vamos a recordar una técnica que
ya vimos en la unidad 9, animación
mediante guía de movimiento.
• En este caso, se trata de imitar el bote de
una pelota, por lo tanto, dibujamos una
curva que imite dicho bote.
• De esta forma conseguiremos una
animación que resulta más natural que el
bote con trayectoría recta que vimos en el
punto anterior.
•
•
•
En las imágenes podrás ver que
proceso hemos seguido para dibujar el
movimiento.
La guía la hemos
dibujando sucesivas curvas de modo
que la pelota invite el movimiento que
queremos crear.
Para darle mayor realismo hemos

insertado fotogramas claves en
puntos críticos para achatar la
pelota y dotarla de elasticidad.
•
•
•
• Ahora podrás combinar muchas de las
técnicas que hemos aprendido para
generar algo así:
• (Haz clic en la película y luego usa las
teclas de movimiento a derecha e
izquierda)
•
•
• Hemos visto dos técnicas diferente para
animar un objeto en Flash, mediante
ActionScript y mediante guía de
movimiento.
• Según cada caso concreto resultará más
adecuado eligir una u otra técnica. En
general, resulta más fácil y rápido utilizar
guías de movimiento que ActionScript,
sobre todo si el movimiento que tiene que
seguir el objeto es sinuoso y dificil de
definir en términos de una ecuación
matemática.
• Hay casos en los que será más adecuado
utilizar ActionScript y otros casos en los
que sólo será posible crear el movimiento
mediante ActionScript, por ejemplo, si
queremos que un objeto se mueva de
forma aleatoria por un escenario.
Animaciones 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
movimientopara 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_adela
nte", 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 → Importa
r → 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 fotogra
mas
claves como
fotogramas de
película
queramos
copiar. El resto
es sencillo, coje
un pincely 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 man
tendrá 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("miC
lip",
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,
•

Asp 2

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Asp 2

Cargado por

Copyright:

Formatos disponibles

Introducción a la Programación

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

function Suma5(p_entrada, p_salida) {

• dragOver: se ejecuta cuando se presiona el botón y, sin soltarlo,

• releaseOutside: se ejecuta cuando se presiona el botón y, sin

De este modo, si se pulsase una tecla determinada se ejecutaría una acción:

En este ejemplo, cuando se produce una pulsación de tecla se evalúa en la segunda

Controladores de la línea de tiempo

De esta forma podremos crear dinamismo entre nuestras secciones.

Imagina que tenemos la siguiente línea de tiempo:

Para ello utilizaremos la función stop().

Allí deberemos escribir únicamente la línea:

Ya hemos conseguido detener la presentación. Pero, ¿cómo hacemos que se muestre la

Para que se pueda leer lo siguiente:

De esta forma, al hacer clic sobre ese botón, el cabezal de reproducción se

Si añadimos un stop() en el último fotograma de la segunda sección, cuando éste se

Además de estos controladores podemos utilizar también:

• play(), que hará que la reproducción prosiga en el fotograma en

• prevFrame(), que hará que el cabezal retroceda al fotograma

• nextFrame(), que hará que el cabezal avance al fotograma

Existen los controladores prevScene() y nextScene() que hacen avanzar el cabezal a

Se abrirá el siguiente panel:

Como hemos visto anteriormente la diferencia entre la opción Ir y detener en fotograma

La primera desplaza el cabezal hasta el fotograma indicado y lo detiene allí. La segunda

El campo relativo/absoluto lo explicaremos más adelante cuando veamos los

Pulsa el botón Aceptar y el código ActionScript se generará solo. No tendrás que

Lo primero que deberemos aprender es a acceder a las propiedades y métodos de los

Queremos que al pulsar un botón el movieclip avance en su línea de tiempo hasta su

Y después de añadir un punto hemos indicado la función que se ejecutará.

Para hacerlo un poco más complicado podríamos encontrarnos en el siguiente supuesto.

¿Cómo accedemos a las propiedades y funciones de clipHijo? Muy fácil. Suponiendo

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

También podemos referenciarnos a elementos superiores utilizando la palabra

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

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

Los que más utilizaremos serán:

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

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

Sería de la siguiente forma:

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:

• onRelease = function() {}: se ejecuta cuando se suelta el botón

• onRollOver = function() {}: se ejecuta cuando se desplaza el

• onRollOut = function() {}: se ejecuta cuando se desplaza el

• onKeyDown = function() {}: se ejecuta cuando se presiona una

• onKeyUp = function() {}: se ejecuta cuando se suelta una tecla

Para hacer desaparecer el clip detalle incluiremos el siguiente fragmento de código:

• onDragOver = function() {}: se ejecuta cuando se presiona el

• onReleaseOutside = function() {}: se ejecuta cuando se

• onMouseDown = function() {}: se ejecuta cuando se presiona

• onMouseUp = function() {}: se ejecuta cuando se suelta el

• onMouseMove = function() {}: se ejecuta cuando se mueve el

• onEnterFrame = function() {}: se ejecuta cada vez que se entre

• onSetFocus = function() {}: se ejecuta cuando un movieclip se

Aunque parece un concepto muy complejo su uso es bastante sencillo.

• Number: puede almacenar números enteros o decimales,

• String: puede almacenar cadenas de caracteres, es decir, un

Al hacer clic en el movieclip estrella se evalúa la variable estrella_activada si ésta es

Al entrar en la condición se desplazan los cabezales y se modifica el valor de la variable