Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
FLASH MX2004
Nivel: Intermedio
Autor: Cristián Parrao – cristian@parrao.cl
Fecha: Octubre 2005
Disponible en:
http://www.mapmultimedia.cl/parrao/Fla_intermedio_Parrao.pdf
MANUAL DE FLASH INTERMEDIO
SUMARIO
Introducción....................................................................................................... 5
Planificación................................................................................................... 6
Sitios dedicados a flash..................................................................................... 8
Paneles ............................................................................................................. 9
Panel de Acciones (F9).................................................................................. 9
Carga de películas........................................................................................... 13
loadMovieNum............................................................................................. 13
_parent......................................................................................................... 19
_root............................................................................................................. 21
Arrastre............................................................................................................ 24
trace – Panel de Salida (F2)............................................................................ 36
if ................................................................................................................... 38
Cristián Parrao – cristian@parrao.cl 3
else .............................................................................................................. 40
else if / else.................................................................................................. 41
Operador Aritmético:.................................................................................... 44
Operadores Lógicos:.................................................................................... 48
Operadores Varios:...................................................................................... 48
Movie Clip........................................................................................................ 49
Colisiones........................................................................................................ 55
Objeto Key....................................................................................................... 57
Funciones........................................................................................................ 60
Funciones con parámetros .......................................................................... 63
Array................................................................................................................ 65
Bucles.............................................................................................................. 67
Cristián Parrao – cristian@parrao.cl 4
Introducción
He decidido catalogar a este Manual como “Flash Intermedio”. Este manual
está descargable desde:
http://www.parrao.cl/manuales/Fla_intermedio_Parrao.pdf
Y es la continuación del primero que hice (Flash Básico), que también lo
puedes bajar desde:
http://www.parrao.cl/manuales/Fla_Basico_Parrao.pdf .
Este manual no es un curso por sí solo. Es decir, encontrarás información
básica sobre algunos términos de Actionscript y con ejemplos básicos también. La
idea es que sea un complemento al curso que voy a relatar y en el que se
desarrollarán ejemplos más complejos.
Todo esto está armado desde la versión 7 de Flash – a pesar de que ya van
en la 8. Desde la versión 7, Flash incorporó Actionscript 2, que es una nueva
versión de Actionscript 1, más poderosa y más fácil de aprender para
desarrolladores cercanos a otros lenguajes de programación (lo que implica que
su sintaxis y forma de armar código se acerca más a otros tipos de lenguajes
informáticos, como Java); sin embargo no lo veremos en este manual.
Mi recomendación es que hayas realizado el curso de Flash Básico para poder
seguir con éste. En ese primer curso se describen cómo hacer animaciones por
movimiento, forma, crear botones, fotograma a fotograma, capas guías, máscaras,
Movie clips, entre otros. Eso significa que asumo que aquellos temas están
dominados y no serán explicados en esta ocasión.
Actionscript es el lenguaje de programación de Flash. Con él puedes controlar
todo tipo de objetos y agregarle toda la interactividad posible para una mejor
experiencia del usuario. Los recursos de animación están llegando a un punto en
que no bastan, no se mantienen por sí solos. Es por eso que mucha gente sabe
como mover pelotas, rectángulos y ese tipo de cosas, pero hasta ahí no más llega,
Cristián Parrao – cristian@parrao.cl 5
quedando un mundo o más bien un océano de términos interesantes de aprender.
Ese mundo se llama “Actionscript”. Acá daremos algunas bases.
Planificación
Flash básico, al igual que otros programas de Macromedia, tiene la
particularidad en que sin tener algo muy pensado se pueden lograr cosas
interesantes (estoy pensando en Fireworks y Dreamweaver); sin embargo, en este
nivel de Flash y ya metiendo las manos en Actionscript, es necesario una
planificación previa.
Según “Flash MX. Entrenando con Macromedia” de Derek Franklin y Jobe
Makar (Pearson Educación Latinoamérica), el desarrollo de una aplicación de
Flash/Actionscript requiere un proceso de planificación necesario para poder
controlar todos los factores incluidos en el documento. Este proceso se divide en
las siguientes etapas:
¿Qué deseo que ocurra? : Aunque esto suene obvio, a veces no lo es.
En muchos otros softwares gráficos a veces uno NO sabe de antemano
lo que quiere hacer, pero ajustando formas y colores se descubren muy
bueno trabajos. Acá no. Es necesario tener claro exactamente lo que
quiero y no quiero que ocurra, reflexión que toma por lo menos un par de
minutos, antes de agarrar el mouse y se da cita en la cabeza y no en la
pantalla.
¿Qué elementos de datos debe controlar?: Qué ingreso, que dato se
transforma, cuál se suma, se resta, etc.
¿Qué debe pasar en la película antes que el script sea disparado?: Acá
todo lo referente a la inicialización de datos. Hay datos que deben
comenzar en cero y otros en diferentes valores. ¿Hay animación antes?
¿Los Movie clips deben estar todos en su primer fotograma?
Cristián Parrao – cristian@parrao.cl 6
¿Qué evento será el que dispare el clip?: Puede ser un botón con un dato
ingresado o sin ese dato. A lo mejor cuando el usuario presione una tecla
o que le película pase por algún fotograma específico.
¿Hay decisiones que deban tomarse cuando el script principal se
dispare?: Flash debe tomar decisiones cuando se dispare el clip principal.
Por ejemplo, se ingresó una valor muy alto o muy bajo. En esas
situaciones es importante tener claro qué hacer en cada caso.
¿Qué elementos constituyen la escena?: Tener claro si tendremos cajas
para introducir texto, botones, animaciones de intermedias, etc...
Cristián Parrao – cristian@parrao.cl 7
Sitios dedicados a flash
Hay muchos sitios en los cuales puedes encontrar información sobre
Actionscript y Flash en general. En ellos presentan tutoriales e incluso archivos
fuentes para bajar. Acá va mi lista de preferencia:
http://www.cristalab.com/ Tutoriales flash, ejemplos, comunidad....
http://www.werehere.com/ Intelligent Design and Development (inglés)
http://www.flashla.com/index.php Comunidad hispanoparlante de Flash
http://www.flashguru.co.uk/ (inglés)
http://www.xflash.org/ Recursos Flash y Actionscript
http://www.afterhours.org/blog/
http://www.oscartrelles.com/es/ Flash Blog
http://www.subflash.com/ Comunidad de Desarrollo y Diseño Flash
http://flashcreations.com/ A Flash / Actionscript Resource Site (inglés)
http://www.flashcomponents.net/ The flash component network (inglés)
http://www.ultrashock.com/ (inglés)
http://www.actionscript.org (inglés)
http://www.flashmexico.com/ Flash para flasheros de hueso colorado
Cristián Parrao – cristian@parrao.cl 8
Paneles
En este recorrido por Actionscript nos encontraremos con 2 paneles que
debemos conocer, ya que nos ayudarán a entender más fácilmente el camino para
llegar a una determinada acción.
Panel de Acciones (F9)
Este Panel ya lo conoces de Flash básico. Pero veamos sus características:
La zona de la izquierda presenta dos partes. La de
arriba es un listado de todos los código que se pueden
ocupar en Actionscript. Al hacer clic en las carpetas,
éstas se abre (tipo explorador de Windows) y al hacer
doble clic en cada código, éste se inserta en él área
derecha del Panel.
Cristián Parrao – cristian@parrao.cl 9
En la zona de la izquierda abajo, es un resumen
de los elementos en la escena que contienen
acciones. Para así poder acceder a ellos
rápidamente. Por ejemplo, en esta caso nos informa
que la “Selección actual” es en la Capa 2, en el
fotograma 1 (donde se encuentra actualmente el
foco). Luego, que en la Escena 1, hay 4 elementos con programación. 3
fotogramas (1, 10 y 20), más en el botón llamado “información”.
Arriba tenemos algunas opciones:
De izquierda a derecha, serían:
Añadidor de nuevos elementos al script (parecido a la zona de la
izquierda);
Buscar palabras dentro del Panel;
Buscar y Reemplazar palabras dentro del Panel;
Buscar rutas de destino;
Revisar sintaxis (muy recomendado para los novatos en Actionscript que
a veces escriben mal los códigos);
Cristián Parrao – cristian@parrao.cl 10
Formato automático (para estandarizar la forma de ver el código ya
escrito); Mostrar consejos sobre códigos (da pistas del código siguiente al
cual se está escribiendo y que pueda ser elegido de forma rápida)
Panel de Ayuda (F1)
Este panel, según mi opinión, ha sido mejorado notablemente en esta versión
7 de Flash. Ya vemos que está integrado en el programa y no hay que salir a
páginas html externas para buscar ayuda. Para acceder a él, puede ser
presionando la tecla F1 o Menú Ayuda > Ayuda. Este Panel presenta dos
lengüetas. “Ayuda” y “Cómo”.
En “Ayuda”, a la izquierda se presenta un árbol desplegable con todo el
contenido que presenta la ayuda y sus subtemas. A la derecha, el contenido de
cada tema, que funciona además con hipervínculos (frases en celeste) vinculantes
a sitios web o a otros contenidos dentro de la Ayuda. En este contenido también
presenta flechas celestes para ir avanzando o retrocediendo en los temas.
Arriba de este contenido además presenta:
Cristián Parrao – cristian@parrao.cl 11
: Flechas para avanzar o retroceder, según por donde hayas navegado
dentro de la Ayuda.
: Tabla de contenido (la zona izquierda en caso de estar cerrada),
una opción de búsqueda, y una opción de impresión.
: Actualización de información a través del sitio web de Macromedia.
En “Cómo” es una estructura idéntica a “Ayuda”. Acá se trata la información de
una forma más explícita y se refiere a cómo hacer ciertas acciones en Flash. Ideal
para los que están aprendiendo.
Cristián Parrao – cristian@parrao.cl 12
Carga de películas
Hasta el momento hemos conocido la capacidad de Flash de lograr películas
unitarias sin demasiadas complicaciones. Sin embargo, habrás notado que a
veces con muchos recursos como video o imágenes bitmap, nuestra película swf
comienza a hacerse más pesada, cosa que nunca es buena sobretodo si el
usuario no tiene una conexión rápida a Internet.
Es por eso que Flash nos permite dividir nuestras películas (es decir, tener
más de 2 swf o más) y administrarlas fácilmente. ¿Para qué esto? Justamente
para que el usuario cargue la película que le interese ver y no una muy grande.
Pongamos un ejemplo. Desarrollas tu currículum en Flash. El usuario al entrar
ve tu foto y 4 botones: “Experiencia Laboral”, “Educación Básica”, “Educación
Media”, “Otros intereses”. La idea es que si el usuario le interesa conocer tu
“Experiencia Laboral”, haga clic en ese botón y se comience a cargar un nuevo
archivo swf que contenga ese contenido.
En realidad construiste 5 archivos swf, el primero de la presentación (tu foto) y
los otros 4 son los contenidos. Así si – por ejemplo – no quiere ver la sección de
“Otros intereses”, no va a necesitar cargarla, lo que hace que el swf principal sea
muy liviano.
loadMovieNum
Abre un nuevo documento y dibuja un televisor. Agrégale además 2 botones,
uno que diga “Canal 7” y otro “Canal 13”. A este archivo llámale “tv.fla”.
Cristián Parrao – cristian@parrao.cl 13
Abre otro documento (del mismo tamaño que el anterior) y en la misma área
que le reservaste a la pantalla del televisor, dibuja cualquier cosa distintiva de
Canal 13. Guarda ese documento como “canal13.fla” y publica el swf. Haz lo
mismo con un nuevo documento llamado “canal7.fla” y publica su swf.
Volvamos a nuestro archivo “tv.fla” y al botón “Canal 13” agrégale la siguiente
acción:
on(release){
loadMovieNum(“canal13.swf”, 1);
}
Y al botón “Canal 7”, lo siguiente:
on(release){
loadMovieNum(“canal7.swf”, 1);
}
Prueba la película. Si está todo en orden, debieras ver “tv.fla” como una
pantalla de TV sin contenido, pero con 2 botones. Al hacer clic en los botones,
cada uno abre el contenido de acuerdo a lo desarrollado en “canal13.fla” y
“canal7.fla”.
Cristián Parrao – cristian@parrao.cl 14
La acción “loadMovieNum”, sirve justamente para eso, para levantar archivos
swf en una película madre (“tv.swf”, en este caso). “loadMovieNum”, necesita que
le informes de 2 parámetros:
El nombre de la película: Acá no hay mucho que explicar, ya que es
bastante obvio, pero si vale la pena una advertencia, no debes equivocarte
en ningún carácter, ya que de lo contrario no se leerá la película. En este
caso fue “canal13.swf” y “canal7.swf”. Siempre coloca la extensión que
corresponda (.swf), todo dentro de comillas y por supuesto debes tener
cuidado con la ruta. En este caso los “canal13.swf” y “canal7.swf” deben
estar en la misma carpeta que “tv.swf”.
El nivel en donde queremos leerla: En este ejemplo fue 1, pero ¿qué
significa eso? Flash asume que a la película madre por defecto le
corresponde el nivel 0. Por lo tanto, de 1 hacia arriba podemos leer las
películas que queramos. En este caso los dos botones leían los swf en el
nivel 1, lo que significa que entre ellos se reemplazaban y nunca se
topaban. Procura ejercitar con diferentes niveles para que notes la
diferencia.
En caso que quisieras agregar a este ejercicio un botón de “apagar”, la acción
debiera ser:
on(release){
unloadMovieNum(1);
}
Con eso eliminas cualquier película que esté siendo leída en el nivel 1.
loadMovie
Esta otra acción tiene una variante muy interesante porque permite hacer otras
cosas que la primera no.
Cristián Parrao – cristian@parrao.cl 15
Sigamos con el ejercicio, pero ahora coloquémosle un poco más de precisión.
Voy a asumir lo siguiente: “tv.fla” mide 800x600 píxeles; y la pantalla mide
400x300 píxeles.
Ahora repite lo que hicimos con “canal13.fla” y “canal7.fla”, pero atención, esta
vez estos nuevos documentos deben medir 400x300 píxeles.
Si aún no sospechas para donde va la diferencia de este nuevo script, te invito
a que le coloques las mismas acciones del ejercicio anterior y prueba lo que pasa.
Si todo está ok, notarás que los nuevos swf se leen arriba a la izquierda y eso
no nos sirve. La conclusión que sacamos es que el “loadMovieNum” hace que los
archivos se alineen en el punto 0,0. Bien, acá viene la utilidad del “loadMovie”.
Crea un Clip de Película vacío y déjalo justo en la esquina superior izquierda
de la pantalla (al Clip vacío es como un punto). A esa instancia colócale por
nombre “vacio” (aunque el ejemplo funciona también con acento “vacío”, pero se lo
he sacado para no complicarnos por ahora).
La acción del botón “Canal 13” será:
on(release){
loadMovie("canal13.swf", "vacio");
}
Y la del “Canal 7” será:
on(release){
loadMovie(“canal13.swf”, “vacio”);
}
La idea de esta script es que logramos colocar nuestra película swf donde
queramos, sin tener que estar calculando tamaños. En realidad, colocamos el Clip
de Película donde queramos y éste lee la información. ¡Incluso podemos
animarlos si quisiéramos!
A diferencia de “loadMovieNum”, el anterior, en éste no ocupamos niveles,
sino, nombres de instancias. En este caso “vacio”, que fue el nombre que le
colocamos (evidentemente, puede ser cualquier nombre que desees).
Cristián Parrao – cristian@parrao.cl 16
Para sacar el swf en un nuevo botón, ocupamos:
on(release){
unloadMovie(“vacio”);
}
Cristián Parrao – cristian@parrao.cl 17
Orden entre líneas de Tiempo
Hagamos un breve repaso. En el curso de Flash básico, te enseñaron que
puedes convertir casi cualquier cosa a símbolos. Partiste con el símbolo gráfico,
usado preferentemente para animaciones, luego el símbolo botón para darle
interactividad y finalmente el símbolo Clip de Película.
Pudiste darte cuenta que este tipo de símbolo tiene una línea de tiempo
interna, diferente a la línea de tiempo principal. Una ejemplo gráfico de esto lo
puedes encontrar en:
http://www.parrao.cl/flash_avan/movieClip.html
También recordemos que lo que llamamos “símbolo” es un objeto que se
encuentra exclusivamente en la Biblioteca. Lo que vemos en el escenario es un
representación de ese símbolo. A esa representación le llamamos “Instancia” y le
colocamos un nombre distintivo. Pueden haber más de una instancia en el
escenario.
Una demostración de esto, puedes encontrarlo en:
www.parrao.cl/flash_avan/instancias.html
Y para darle una orden al Clip de Película desde un Botón de la Línea de
Tiempo principal sólo había que agregar el siguiente script:
on(release){
nombreDeInstancia.orden();
}
Pero ¿Qué pasa si queremos hacer otras combinaciones? Por ejemplo: Un
botón dentro del Clip de Película le mande una orden a la Línea de Tiempo
principal o, que un Botón dentro de un Clip de Película le mande una orden a otro
Clip de Película. Veamos caso a caso.
Cristián Parrao – cristian@parrao.cl 18
_parent.
En un nuevo documento, haz una animación simple en la Línea de Tiempo
principal, pero en el primer fotograma coloca:
stop();
Con esto queremos que la animación no comience inmediatamente.
Además, en otra Capa, crea un Clip de Película (desde ahora lo llamaré Movie
Clip su denominación en Inglés que te servirá para entender los textos de
Ayuda que trae Flash) y que internamente tenga dos cosas: Una animación simple
(esto no es esencial para el ejercicio, pero es más cercano a un posible caso real)
y un Botón.
Cristián Parrao – cristian@parrao.cl 19
Bueno, ese Botón le dará la orden a la Línea de Tiempo principal para que
comience a reproducirse, con el siguiente script:
on(release){
_parent.play();
}
Prueba la película.
Si fuera una traducción literal, el “_parent.play()” sería algo como: “Vaya a la
Línea de tiempo de mi padre (el que está sobre mí) y ejecútela”. Por lo tanto Flash
entiende que no es una orden a la Línea de Tiempo del Movie Clip en donde se
encuentra el Botón, si no es más arriba. Que en este caso es la Línea de Tiempo
principal.
Hagamos otro ejercicio.
En el mismo documento, crea otro Movie Clip, que internamente tenga una
animación y agrega en su primer fotograma:
stop();
Cristián Parrao – cristian@parrao.cl 20
Sal a la Línea de Tiempo principal y a esta nueva instancia ponle un nombre.
En mi caso le pondré “ejemplo”.
Bien ¿cuál debiera ser el script para que nuestro Botón ya no ejecute la Línea
de Tiempo principal, y ejecute la animación del nuevo Movie Clip?
on(release){
_parent.ejemplo.play();
}
Ya sabemos lo que se refiere “_parent”. Si fuera una traducción literal, debiera
ser algo como: “Vaya a la Línea de tiempo de mi padre (el que está sobre mí) y
dentro de él hay una instancia llamada ejemplo. Entre a ejemplo y ejecútelo”.
_root.
Ya sabemos bien que “_parent” en realidad dirige la acción a la línea de
tiempo superior. En ese caso, era la Línea de Tiempo principal.
Línea de tiempo principal > Movie Clip > Movie Clip > Movie Clip , etc.
Si siguiéramos con el “_parent”, para que el Movie Clip más anidado de todos
quiera – en este caso darle alguna acción a la Línea de Tiempo principal
deberíamos escribir:
on(release){
_parent._parent._parent._parent.play();
}
Cosa que no está mal, pero se empieza a hacer un poco incómoda a la hora
de escribir muchos “_parent” e incluso te arriesgas a equivocarte. Por eso el
“_root”.
Para estos casos lo mejor es:
Cristián Parrao – cristian@parrao.cl 21
on(release){
_root.play();
}
El “_root”, se refiere a “raíz”, que quiere decir que se dirija la acción a la raíz
del documento (dando lo mismo cuantos Movie Clips debe saltarse), lo que en
este caso será nuestra Línea de Tiempo Principal.
_level.
El tema anterior de este manual había sido el cargar otras películas sobre una
película madre en niveles o en Movie Clips. Cuando ocupamos niveles (y sólo en
este caso), también podemos darle órdenes, para eso está el “_level”. Por
ejemplo:
on(release){
_level2.stop();
}
Y así sucesivamente, lo niveles que queramos.
Ahora, si la película swf fue cargada en un Movie Clip, la acción debiera ser:
on(release){
nombreDeInstancia.play();
}
Como cualquier otro Movie Clip.
Cristián Parrao – cristian@parrao.cl 22
this.
El “this” se refiere a “sí mismo”.
Cuando le ordenamos a un botón, por ejemplo:
on(release){
this.play();
}
Es básicamente lo mismo que:
on(release){
play();
}
Por defecto, Flash asume que si no se le coloca “this” a una orden,
corresponde a la película que contiene al objeto que dio el script.
No resulta muy útil combinar “this” con “_root” o “_parent”.
El “this” tendrá más sentido cuando lo ocupemos con la programación a Movie
Clips.
Un excelente ejemplo para esto, puedes encontrarlo en:
http://www.kadazuro.com/tutoriales/TargetPath/index.html
Ejercicio: Realizar un caso como el que aparece en:
http://www.parrao.cl/flash_avan/ordenes.html
Cristián Parrao – cristian@parrao.cl 23
Arrastre
Todos hemos visto que parte de la interactividad que nos permite Flash como
usuarios es que podamos arrastrar elementos. Normalmente los arrastramos y los
dejamos en otra posición. Eso es especial para juegos, sobretodo para puzzles o
los típicos “Drag & Drop” (arrastra y suelta).
startDrag() y stopDrag();
Construye un botón y colócale la siguiente acción:
on(press){
startDrag(this);
}
Luego este botón conviértelo en Movie Clip.
Atención que esta vez he cambiado el Evento. Normalmente para los
ejemplos, ocupo el Evento “release” que significa “soltar” o “liberar” el botón del
Mouse. Pero esta vez, al arrastrar un objeto en realidad lo queremos hacer no
cuando el botón del Mouse esté suelto, sino que al contrario, cuando se esté
Cristián Parrao – cristian@parrao.cl 24
presionando. Por eso el “press”. Además uno de los parámetros de este arrastre
es “this”, que significa, como ya lo habíamos visto, que se arrastre a sí mismo, por
lo tanto arrastrará al Movie Clip que lo contiene.
Prueba la película y ve lo que ha pasado. El Movie Clip, gracias al botón se ha
vuelto arrastrable, sin embargo no podemos soltarnos de él, ha quedado pegado
al puntero del Mouse. Esto no es un error, sino que no le hemos dado la orden de
soltarse. Bajo la primera orden, escribe lo siguiente:
on(release){
stopDrag();
}
Fíjate que esta vez sí, he incluido el evento “release”. Y la lógica es muy
simple. Al presionarlo, queremos que se arrastre, pero al soltarlo, queremos que
deje de ser arrastrado.
startDrag(lockCenter,x,y,a,b)
El arrastre puede ser restringido a un área específica. También puede ser útil
para el desarrollo de juegos.
Abre un nuevo documento de 800x600 píxeles y crea un botón. A ese botón
dale la siguiente acción y luego conviértelo en Movie Clip:
on(press){
startDrag(this, false, 0, 0, 200, 400);
}
Cristián Parrao – cristian@parrao.cl 25
on(release){
stopDrag();
}
Prueba tu película y si está todo bien escrito, debiera restringirte el movimiento
del arrastre a un área específica.
Es bastante parecido al ejercicio anterior, pero veremos la diferencia en los
parámetros que se le agregan a “startDrag”.
this: Como ya habíamos visto, significa que sea arrastrable la película que lo
contiene, en este caso un Movie Clip.
false: Este valor booleano nos indica si queremos bloquear el centro. Es decir,
cada vez que hagamos click en él, nos “fuerza” a tomarlo desde su propio centro.
En este caso le dijimos que no (false), pero el parámetro es opcional y puede
omitirse.
0,0,200,400: Estos 4 valores nos deben formar un rectángulo para este
ejemplo. El primer valor (0) es la coordenada de la izquierda, el segundo (0) es la
de arriba, el tercero (200) es el de la derecha y el cuarto (400) es el de abajo.
0 200
0
400
Área invisible de arrastre
Cristián Parrao – cristian@parrao.cl 26
Variables
Una variable es un contenedor que almacena información y estos pueden
variar (como bien su nombre lo indica).
Por ejemplo, tenemos en nuestro dormitorio tres cajas de diferentes colores.
Una roja, otra azul y otra verde. Cada una de ellas contiene cosas diferentes.
La roja contiene un chocolate, la azul contiene un libro y la verde contiene el
número 9. Flash lo entendería de la siguiente manera:
cajaRoja= “Chocolate”;
cajaAzul=“Libro”;
cajaVerde= 9;
Las cajas serían los contenedores y su contenido el valor.
Cristián Parrao – cristian@parrao.cl 27
Lo primero que se debe hacer es declarar la variable, a través de un
identificador (cajaRoja, por ejemplo). Eso puede ser en un fotograma (usualmente
podría ser en el primero, pero no es obligatorio), en un botón o en un Movie Clip.
Nombre de identificadores que no se deben ocupar.
Los nombres de las variables no pueden palabras reservadas exclusivamente
para el código de Actionscript como por ejemplo null, true, new, array, startDrag,
etc. Eso puede llevar a errores inesperados. Nombres de variables podrían ser
jose, _edad, _nombreVecino, billete, etc. El primer carácter debe ser una letra,
un carácter de subrayado (_) o un símbolo de dólar ($)
Desde Flash MX2004, el software no acepta igualdades en nombres de
variables cuando hay mayúsculas o minúsculas. Es decir, para Flash son
diferentes las variables:
Cristián Parrao – cristian@parrao.cl 28
saludo=”hola”;
SALUDO=”hola”;
Tenemos 3 tipos de variables primitivas en Actionscript:
String: Una cadena es una secuencia de caracteres como letras, número o
signos de puntuación. Ejemplos podemos encontrar como: “Hola”,
“Juan23”, “No quiero más”. Se encierran entre comillas.
miSegundoNombre=”Antenor”;
computador=”Atari”;
nombreRestoran=”Pura Carne”
Number: Es un dato numérico y no se encierra entre comillas. En realidad
puede ser cualquier número.
ganancias=100000;
ramKb=512;
miEdad=23;
Boolean: Los valores booleanos son true y false (verdadero y falso, que
también se puede interpretar como 1 y 0, respectivamente) y no se
encierran entre comillas. Funciona como un interruptor de luz. A veces está
apagado y otras veces prendido (true y false). Eso Flash lo lee y tú le das
órdenes según sea conveniente. Puedes cambiar su estado. De true,
dejarlo en false y viceversa.
luzPrendida=true;
puertaAbierta=false;
hoyPagan=false;
hoyMeTocaLavar=true;
Hay otros 2 tipos de datos especiales:
Cristián Parrao – cristian@parrao.cl 29
Null: Este tipo de datos tiene un solo valor: null. Que significa “ningún
valor”. Normalmente sirve para indicar que una variable ya no contiene
ningún valor.
Cristián Parrao – cristian@parrao.cl 30
Texto Dinámico
Hasta ahora conocíamos la labor del Texto Estático, que nos servía para
escribir información, y era sacado de la Herramienta “Texto”. Ahora veremos la
función de una opción que nos da el texto, que es el Texto Dinámico y nos servirá
para “jugar” con las variables.
Abre un nuevo documento y crea un campo de texto dinámico. Se crea de la
misma forma que un texto normal, pero abajo en propiedades lo cambias de
“Texto Estático” a “Texto Dinámico”. No le agregues ningún texto, que quede
vacío.
Fíjate que a diferencia del Texto Estático, este presenta un cuadrado abajo a
la derecha (el otro tenía el cuadro arriba a la derecha).
En el Panel de Propiedades, donde dice “Var”, colócale la palabra “nombre”
(sin comillas). Crea una nueva Capa en la Línea de Tiempo y en el primer
fotograma escribe:
nombre=“Juan”;
Prueba la película.
Cristián Parrao – cristian@parrao.cl 31
Notarás que el campo de texto ha reconocido la variable “nombre” y su
contenido.
Y al segundo:
on(release){
nombre=9;
}
Prueba la película. El primero cambia la variable “nombre” a un valor String
“Pedro” y el segundo a una valor numérico de 9.
Cristián Parrao – cristian@parrao.cl 32
Comentarios
Un Comentario es una especie de apunte dentro del código que no afecta la
programación, pero sirve para que en un futuro recuerdes qué fue lo que
programaste o le sirva a un colega que tenga acceso a tu .fla y entienda los
objetivos de tu script. Se escribe con doble comilla //. En un ejemplo sencillo, sería
de la siguiente manera:
on(release){
// Acá va el nombre de mi viejo
papa=“Juan”;
// Luego su edad
edadPapa=60;
// Ahora mamá y su nombre
mama=“Marta”;
// La edad de Mamá. Me mata si sabe que estoy
publicándolo
edadMama=50;
}
Por supuesto que lo anterior es lo mismo que:
on(release){
papa=“Juan”;
edadPapa=60;
mama=“Marta”;
edadMama=50;
}
Claro que es lo mismo, pero sin comentarios.
Los comentarios también pueden encerrar varias grupos de frases y eso se
hace a través de /* y */. Por ejemplo:
Cristián Parrao – cristian@parrao.cl 33
on(release){
/* Acá viene un comentario grande
De hecho, es tan grande, que tendré que hacerlo en 3
líneas
Menos mal que puedo hacer comentarios sobre mi sueldo*/
sueldo=0;
// gano muy poco dinero, ya lo habrán notado
}
Cristián Parrao – cristian@parrao.cl 34
Concatenación
Agreguémosle una línea más al ejemplo anterior:
on(release){
papa=“Juan”;
edadPapa=60;
mama=“Marta”;
edadMama=50;
// Ahora hagamos que en un texto dinámico se junte todo
textoDinam=“Papá tiene ” + edadPapa + “ y Mamá tiene ” +
edadMama;
}
Eso se llama concatenación de variables. Es decir, unimos variables
numéricas (o de Cadenas) declaradas anteriormente, con frases, a través del
signo +. Por lo tanto el resultado debiera ser en el Panel de Salida: “Papá tiene
60 y Mamá tiene 50”.
La idea de esto es que luego podemos cambiar las variables (por ejemplo, la
edad de Mamá, edadMama=42;) y la frase final cambia automáticamente “Papá
tiene 60 y Mamá tiene 42”.
Todo eso gracias al signo +.
Cristián Parrao – cristian@parrao.cl 35
trace – Panel de Salida (F2)
Flash tiene un panel que se llama “Salida”, que sirve para enviar la información
que queramos, a través del comando trace. Sólo está disponible con el software
abierto, es decir, con el modo swf o exe, nunca lo veremos.
Su utilidad es muy amplia y básicamente se ocupa para avisarnos todo lo que
queramos. Es por eso que se ocupará mucho en este manual. Si bien todos los
ejercicios pueden ser logrados sin el trace, en muchos de los casos es un ahorro
para no armar grandes ejemplos con clips de películas y animaciones. Es un buen
recurso pedagógico para explicar los principios básicos, que luego se pueden
adaptar a películas ya armadas y complejas.
Veamos su funcionamiento básico. Crea un botón y colócale el siguiente script:
on(release){
trace(“Me encanta la playa”);
}
Prueba la película y haz clic en el botón. Se abrirá el Panel de salida y
aparecerá la frase Me encanta la playa.
Veamos otro caso. En un nuevo documento, en el primer Fotograma escribe la
siguiente variable:
perro=“guau”;
Ahora crea un botón y colócale la siguiente acción:
Cristián Parrao – cristian@parrao.cl 36
on(release){
trace(perro);
}
Prueba la película. Al hacer click en el botón sale en Panel Salida con la
palabra “guau” (sin las comillas). Es decir trace(perro) significa que le estamos
pidiendo que Flash nos muestre el contenido de la variable “perro”.
Sin embargo, si la acción fuera:
on(release){
trace(“perro”);
}
Acá, al colocarle comillas, Flash entiende que le estamos pidiendo que
muestre la palabra “perro” y no la reconoce como variable.
Cristián Parrao – cristian@parrao.cl 37
Lógica condicional
if
En nuestro idioma español existen 2 palabras que se parecen mucho (de
hecho, las diferencia sólo un acento) que es el caso del “si” y el “sí”. Ejemplos:
Sí, me caso contigo
Yo creo que sí
Es diferente a:
Si vamos a este lugar, yo no voy
Si me llaman, díganle que me fui.
En el inglés no hay problemas, ya que se diferencian bastante (yes – if). Flash
incluye a uno de ellos en su lenguaje. Es el caso del “si” (Sin acento. if).
Hagamos una mezcla entre Actionscript y Español (sólo a modo de ejemplo)
con el if.
Cuando(me despierte){
si(está nevando){
tendré que ponerme botas;
}de lo contrario{
puedo salir con zapatillas;
}
}
Bueno este ejemplo deja clara la lógica del if, que en realidad es una sentencia
que evalúa algo. En este caso evalúa si está nevando y nos da 2 acciones a
realizar. Ponernos botas en caso de ser efectivo o de lo contrario, salir con
zapatillas.
Pongamos un ejemplo simple en Actionscript (ahora sí, Actionscript puro):
Cristián Parrao – cristian@parrao.cl 38
En una nueva película, en el primer Fotograma escribe:
edadPapa= 60;
Ya sabes lo que hemos hecho. Hemos declarado la variable “edadPapa” y le
hemos asignado el valor de 60;
Ahora crea un botón y colócale la siguiente acción:
on(release){
if(edadPapa==60){
trace(“Qué viejo es papa!!”);
}
}
Traduzcamos al español:
on(release){ : Cuando el usuario suelte el mouse.
if(edadPapa==60){ : Si la variable edadPapa es equivalente a 60.
trace(“Qué viejo es papá!!”) : En el Panel de Salida escriba “Qué
viejo es papá!!”.
} : Cerramos el paréntesis de corchete del if.
} : Cerramos el paréntesis de corchete del on(release).
¿Te has fijado como Flash evalúa una condición? Claro, evalúa si la edadPapa
es equivalente a 60, que ocurra algo.
Antes de continuar, me quiero detener en un punto.
He dicho yo si la edadPapa es equivalente a 60. ¿Por qué no sería mejor decir
si la edadPapa es igual a 60? En realidad en español tiene el mismo significado
(todos entendemos las 2 oraciones), pero para Actionscript NO es lo mismo decir:
if(edadPapa==60){
Que decir:
if(edadPapa=60){
Cristián Parrao – cristian@parrao.cl 39
Fíjate que en la primera línea se ocupan 2 signos iguales (==) que es la forma
correcta y en la segunda sólo uno. El == significa que estás comprobando
igualdad (que es nuestro caso) y el = significa que estás asignando un valor a una
variable (edadPapa=60). Por lo tanto en todos los casos de comparación del if,
debes colocar == o sino, no te funcionará el script. Este símbolo de comparación
no es el único caso, de hecho hay más, pero los veremos luego.
else
¿Qué pasaría si en realidad edadPapa no es 60, sino es de 45? Cámbiale el
valor a tu variable (de 60 a 45) declarada en el primer Fotograma y ve qué ocurre.
No ocurre nada.
Claro que no ocurre nada, porque no le hemos dicho a Flash qué hacer en
caso de que edadPapa no sea equivalente a 60. Para eso existe el else, que
equivaldría en español a la frase “de lo contrario….”. El script, ahora debiera
quedar así:
on(release){
if(edadPapa==60){
trace(“Qué viejo es papá!!”);
}else{
trace(“En realidad no es tan viejo como pensaba”);
}
}
Me imagino que ya vas entendiendo la lógica. Si la variable es equivalente a
60, dice una frase, de lo contrario dice otra.
else if
Por supuesto que si seguimos buscando combinaciones y profundizando en la
edadPapa, nos encontraremos con otras situaciones. ¿Qué pasa si en vez de
tener 2 frases de respuesta, quiero incluir, por ejemplo, 5 respuestas? Nos
encontraremos con la sentencia else if, que en español podría equivaler a “…de lo
contrario, si….”.
Cristián Parrao – cristian@parrao.cl 40
En el mismo ejemplo, queremos dar acciones para los valores de edadPapa
de: 60 (“Qué viejo es papá!!”), 50 (“Papá es un hombre maduro”), 45 (“En realidad
no es tan viejo como pensaba”), 30 (“Papá es joven”) y 25 (“Agú!!”). El script
quedaría de la siguiente manera:
on(release){
if(edadPapa==60){
trace(“Qué viejo es papá!!”);
}else if(edadPapa==50){
trace(“Papá es un hombre maduro”);
}else if(edadPapa==45){
trace(“En realidad no es tan viejo como pensaba”);
}else if(edadPapa==30){
trace(“Papá es joven”);
}else if(edadPapa==25){
trace(“Agú!!”);
}
}
Antes de probar la película, asegúrate en dejar el valor de la variable
edadPapa en algunos de los que están expresados en el ejemplo (60, 50, 45, 30 ó
25).
Ahora prueba tu película. Para que compruebes que todo está funcionando
correctamente, anda cambiando los valores de edadPapa.
else if / else
¿Qué pasaría si en realidad queremos agregar la posibilidad de no
“achuntarle” a edadPapa? Es decir, podemos escribir muchas frases creativas en
el caso de que edadPapa sea 60, 50, 45 u otras, pero claro, también queremos
hacer códigos cortos y si papá va a vivir 100 años, no podemos hacer ¡100 frases!
Es decir, podemos pero no queremos.
Para eso nos reencontramos con else. Esta sentencia, como decíamos al
principio equivale en español a algo como “…de lo contrario…”, que por supuesto
Cristián Parrao – cristian@parrao.cl 41
a parte de funcionar con if, ahora combinamos con else if y también funciona
perfecto.
Volvamos a nuestro ejemplo. Asegúrate de cambiar la variable edadPapa a un
valor no considerado en las opciones del else if. Por ejemplo, 42:
edadPapa= 42;
Si te fijas en el último else y trace, incluye la frase “No tengo idea que edad
tiene papá!!!”. Es decir, si Flash no encuentra ninguna condición para que se
ejecuten las frases anteriores, tira la última, dando igual qué valor le correspondía
a edadPapa, pero por lo menos tenemos la seguridad que no era ni 60, 50, 45, 30
ó 25.
Cristián Parrao – cristian@parrao.cl 42
Introducción de Texto
Sigamos con el ejemplo anterior de edadPapa.
Vamos a tener la posibilidad de poder cambiar el valor de la variable
edadPapa, desde el mismo swf (y no desde el fla como hasta ahora lo hemos
hecho).
Mantén el ejercicio anterior, pero esta vez agrega en el escenario un bloque de
texto vacío. Abajo en Panel de Propiedades elegirás “Introducción de Texto” en la
opción de la izquierda. Más a la derecha activa la opción “Mostrar borde alrededor
del texto”. Esta última opción no es esencial, pero crea un recuadro alrededor del
texto y queda más visible. Finalmente donde dice “Var” escribe edadPapa.
Prueba la película.
Si ha quedado todo como estaba del ejercicio anterior, en el recuadro debiera
aparecer el número 42 (que es valor que el fotograma 1 le está dando a la
variable). Prueba el botón y que todo esté en orden.
Aprovecha además de cambiar los valores de esta nueva caja de texto. Coloca
60 y haz clic en el botón, ¡Estás controlando el valor de edadPapa sin
reprogramar! Sigue haciendo todas las pruebas necesarias, insertando otros
valores (los del if/else 60, 50, 45, 30, 25 o cualquiera que gustes).
Cristián Parrao – cristian@parrao.cl 43
Operadores
Los Operadores son caracteres que pueden combinar, modificar o comparar
varios elementos.
Aunque son muchos, acá mostraremos los de uso más común
Operador Aritmético:
+: Suma
: Resta
*: Multiplicación
/: División
Probablemente los conoces hace mucho tiempo (desde el colegio!!) y como
viejos amigos, te vuelves a reencontrar con ellos.
Actionscript te da la posibilidad de realizar operaciones aritméticas. Veamos
unos ejemplos:
on (release) {
medicion1= 50;
medicion2= 75;
medicionFinal= medicion1 + medicion2;
trace(medicionFinal);
}
El resultado es la suma de las 2 variables, en este caso 125. Qué fácil.
Ahora, en el mismo ejemplo, calculemos el promedio:
on (release) {
medicion1= 50;
medicion2= 75;
medicionFinal= (medicion1 + medicion2)/2;
trace(“El promedio es “+medicionFinal);
}
Cristián Parrao – cristian@parrao.cl 44
Acá ordenamos con los paréntesis lo primero que queremos que pase (que se
sumen las 2 variables) y luego dividimos por 2. Finalmente en el trace, le
agregamos una frase encerrada entre comillas, más el resultado (sin comillas).
Operador de Asignación:
+= : Asignación de suma
= : Asignación de resta
El signo += equivaldría en español a la expresión “…sume lo que está a mi
izquierda con lo que está a mi derecha…”. Es por esto el botón le está pidiendo a
Flash que desde ahora la variable sueldo sea la suma entre la variable sueldo y la
variable reajuste y que el resultado sea mostrado en el Panel de Salida. En
realidad es una forma de acortar lo que sería de la misma manera:
on (release) {
sueldo = sueldo + reajuste;
trace(sueldo)
}
Al probar la película y al hacer clic en el botón, nos aparece el valor 120 (100 +
20 que ahora es el nuevo valor de sueldo), pero si haces clic nuevamente,
aparece el valor 140. Esto es por que ahora sueldo es igual a 120 y se le ha
sumado reajuste (20). Y así sucesivamente.
Cristián Parrao – cristian@parrao.cl 45
Operador de Comparación:
El uso de estos operadores son muy recomendados para el trabajo con la
sentencias condicionales (if / else).
!= : Desigualdad.
on(release){
corchetera= “Buena”;
if(corchetera != “Buena”){
trace(“hay que comprar una nueva”);
}else{
trace(“Menos mal!!”);
}
}
== : Igualdad
on(release){
compañero1DeGrupo= “vago”
compañero2DeGrupo= “vago”
if(compañero1DeGrupo == compañero2DeGrupo){
trace(“Parece que me tengo que cambiar de grupo”);
}
}
Cristián Parrao – cristian@parrao.cl 46
<:Menor que
on(release){
if(notaExamen<4){
trace(“tendré que dar de nuevo el examen”);
}
}
>: Mayor que
on(release){
if(notaExamen>4){
trace(“Bien!! Un examen menos!!”);
}
}
<=: Menor o igual que
on(release){
if(cuentaSupermercado<=10000){
trace(“Justo me alcanzó el dinero”);
}
}
>=: Mayor o igual que
on(release){
if(cuentaSupermercado>=10000){
trace(“Tendré que ir a casa a buscar dinero”);
}
}
Cristián Parrao – cristian@parrao.cl 47
Operadores Lógicos:
&&: Representa a la palabra “y”. Es decir, cuando necesito que 2 ó más
condiciones sean verdaderas para poder ejecutar una acción.
on(release){
if(lluvia==false && jugadores>= 22){
trace(“Hoy día jugaremos fútbol!!”);
}
}
||: Representa la palabra “o”. Es decir cuando tengo 2 ó más condiciones, pero
sólo necesito que una de ellas sea verdadera, para que se ejecute una acción.
on(release){
if(dinero==0 || cansado== true){
trace(“Esta vez no iré a la fiesta”);
}
}
Operadores Varios:
++: Incremento. Es un operador el cual le suma 1 a una variable.
Por ejemplo, declaramos en el primer frame de nuestra película la variable:
gol=1;
Luego a un botón le agregamos la acción:
on(release){
gol++;
trace(gol);
}
En el Panel Salida, al hacer clic en el botón, aparecerá el número 2. Si lo
presionas nuevamente, saldrá 3, luego 4 y así sucesivamente. Este operador es
ideal para usarlo en contadores.
: Decremento. La misma función del anterior, pero restando 1, en vez de
sumar.
Cristián Parrao – cristian@parrao.cl 48
Movie Clip
Actionscript es un lenguaje de programación orientado a objetos (OOP, sus
siglas en inglés).
¿Y qué es un objeto? Básicamente es un conjunto de Propiedades y Métodos.
Cada Objeto tiene su propio nombre y es una Instancia de una clase determinada.
Pero antes de seguir hablando en “complicado”, llevémoslo a una comparación
del “mundo real”.
Por ejemplo, en el “mundo real” estamos rodeados de objetos. Uno de ellos
podría ser un “martillo”. Un martillo tiene características típicas de martillo: Mango
de madera, 30 centímetros de largo aproximadamente, cabeza de fierro, menos de
1 kilo de peso, etc…
Además un martillo, ya todos lo sabemos, sirve para clavar clavos y apretarse
dedos. Podría servir para otras cosas además, pero no las veremos por ahora.
En el caso de Actionscript hay Objetos predefinidos, es decir que si bien hay
que crearlos, Actionscript ya sabe sus características y las cosas que puede
hacer. Desde ahora, a las características de un objeto las llamaremos
“Propiedades” y a las cosas que puede hacer, las llamaremos “Métodos”.
Para iniciarse en el mundo del Actionscript, mi recomendación es comenzar
por los métodos del Movie Clip (nuestro primer Objeto), ya que son fáciles de
abordar.
Otros objetos de Actionscript son:
Objeto Sound
Objeto Color
Objeto Key
Objeto Mouse
Objeto Selection
Objeto TextField, entre otros…
Cristián Parrao – cristian@parrao.cl 49
Propiedades del Movie Clip
Como dijimos, las propiedades de un Objeto equivalen a sus “características”.
Por ejemplo, en un nuevo Documento dibuja un Óvalo y conviértelo en Clip de
Película. Una vez convertido, dale nombre de instancia (recuerda que el nombre
de instancia no tiene nada que ver con el nombre del símbolo). Por ejemplo, a esta
instancia le llamaremos “bola”.
Ahora crea un botón y dale la siguiente acción:
on(release){
bola._xscale=200;
}
Prueba la película y fíjate en lo que sucede. Nuestro Movie Clip se ha
ensanchado el doble. ¿Por qué? Porque hemos variado una de sus propiedades el
“_xscale”, que significa “la escala de la coordenada X” (es decir, horizontalmente).
En este caso, la propiedad trabaja con valores porcentuales (aunque no se le
coloque el signo %). Al colocarle 200, entiende que es al 200%, por lo que el
resultado es duplicar su escala X. Al contrario, si le colocamos 50, lo reducirá a la
mitad. Por supuesto que si lo dejamos en 100, no pasará nada, quedará del
mismo tamaño. Haz la misma prueba, pero ahora con la propiedad “_yscale”.
Muchas de las propiedades del Movie Clip necesitan que le coloques un guión
bajo antes de mencionarlas, así que hay que fijarse bien cuáles necesitan y cuáles
no.
Para conocer el listado completo de las Propiedades del Movie Clip, puedes
verlas en el Panel de Acciones (F9) en el listado que tiene a la izquierda: Clases
Incorporadas > Película > Movie Clip > Propiedades. Para conocer cada una de
ellas debe hacerles un clic sobre la que te interese, luego clic con el botón derecho
y el menú contextual que sale, elegir “Ver ayuda”.
Cristián Parrao – cristian@parrao.cl 50
Acá daré un listado de las más comunes.
Partamos con las propiedades que son modificables:
_xscale: Modifica la escala de la coordenada X. Su valor se expresa en
porcentaje (100 significa que es el tamaño original, 200 se duplica, 300 se
triplica, 50 de reduce a la mitad, etc…)
_yscale: Modifica la escala de la coordenada Y. Su valor se expresa en
porcentaje (100 significa que es el tamaño original, 200 se duplica, 300 se
triplica, 50 de reduce a la mitad, etc…)
_alpha: Modifica la transparencia del Movie Clip. Valores: 0 significa que
queda completamente transparente y 100 que queda sin transparencia
(opaca).
Cristián Parrao – cristian@parrao.cl 51
_height: Modifica la Altura del Movie Clip. Sus valores se expresan en
píxeles. Si le colocas, por ejemplo 100, la altura de tu Movie Clip quedará
de 100 píxeles.
_width: Modifica el Ancho del Movie Clip. Sus valores se expresan en
píxeles. Si le colocas, por ejemplo 100, el ancho de tu Movie Clip quedará
de 100 píxeles.
_rotation: Modifica la rotación del Movie Clip. Sus valores se expresan en
grados que van desde 0 a 360.
_x: Modifica el punto X en que está registrado el Movie Clip. Sus valores se
expresan en píxeles.
_y: Modifica el punto Y en que está registrado el Movie Clip. Sus valores se
expresan en píxeles.
_visible: Maneja 2 valores. 0 deja al Movie Clip invisible (y desactivado, en
caso de contener botones dentro, principal diferencia con _alpha) y 1 que
vuelve a la visibilidad.
Ahora un listado de las propiedades más usada, pero que son sólo de lectura.
Es decir, no podemos variarlas, sólo leerlas.
_currentframe: Indica en qué frame se encuentra el Movie Clip.
_framesloaded: Indica cuántos frames se han cargado del Movie Clip. Ideal
para cargadores de película.
_name: Indica el nombre de la instancia del Movie Clip.
_totalframes: Indica el número total de frames de un Movie Clip.
_xmouse: Indica la coordenada x en donde se encuentra el puntero del
mouse dentro del Movie Clip.
_ymouse: Indica la coordenada y en donde se encuentra el puntero del
mouse dentro del Movie Clip.
Cristián Parrao – cristian@parrao.cl 52
Eventos de Movie clip:
Hasta ahora le colocábamos acciones a los fotogramas y a los botones. Desde
ahora también lo harán los Movie Clips. Es una poderosa arma de programación,
la cual logra hacer más interactivo tus películas en Flash. Se les coloca acciones
como si fuera un botón. Lo seleccionas y sacas el Panel de Acciones.
Un Evento de Movie Clip tiene la misma utilidad de los Eventos de Botones; es
decir, cuando “pase algo”, se ejecute una acción (expresada dentro de llaves de
corchetes {} ). En los botones normalmente ocupamos on(release) u on(press),
entre otros. En el caso de los Movie Clips, tienen cierta equivalencia en algunos
casos, pero cambian los nombres y se les antecede la frase onClipEvent. Un
ejemplo:
onClipEvent(load){
this._x=20;
}
Acá va la lista de todos los eventos de Movie Clip:
load: Ocurre la acción cuando el Movie Clip aparece en el escenario.
unload: La acción ocurre cuando se elimina el Movie Clip del escenario.
Cristián Parrao – cristian@parrao.cl 53
enterFrame: La acción se está ejecutando constantemente, según la
velocidad de los fotogramas de la película. Ideal para mover Movie Clips a
través de Actionscript, sin necesidad de la clásica interpolación de
movimiento.
mouseMove: Las acción ocurren cuando se mueve el mouse por el
escenario.
mouseDown: La acción se ejecuta cada vez que presionas el botón
izquierdo del mouse.
mouseUP: La acción ocurre cada vez que liberas el botón izquierdo del
Mouse.
keyDown: La acción se produce cuando se presiona una tecla.
KeyUp: La acción se desarrolla cuando se libera una tecla.
data: La acción se produce cuando ser reciben datos desde una acción
como loadVariables() o loadMovie().
Cristián Parrao – cristian@parrao.cl 54
Colisiones
hitTest
Por ejemplo:
Si este Movie Clip, choca contra este otro llamado “barco”... tire un Trace();
onClipEvent(enterFrame){
if(this.hitTest(_root.barco)){
trace(“he chocado!!””);
}
}
En este ejemplo le estamos diciendo que en el evento “enterFrame”, de ese
Movie Clip (el que estás programando) choca o colisiona con otro Movie Clip
llamado “movieClipChocador”, se lanza un Trace. Obviamente se puede lanzar un
Trace o cualquier otra acción que necesites.
Un demostración sencilla puedes verla en:
http://www.parrao.cl/flash_avan/colision_demo.html
Por ejemplo, además podemos hacer colisionar el puntero, con un Movie Clip.
Se puede aplicar un startDrag() a través del hitTest. Esto significa, que cuando el
mouse “choque” con el Movie Clip, comience la acción de arrastre (esto permitiría
hacer un arrastre sin que el mouse se convirtiera en “manito”). Algo así. Crea un
Movie Clip y agrégale la siguiente acción.:
Cristián Parrao – cristian@parrao.cl 55
onClipEvent(mouseDown){
if(this.hitTest(_root._xmouse, _root._ymouse)){
startDrag(this);
}
}
onClipEvent(mouseUp){
stopDrag();
}
Prueba la película y verás como se ejecuta la acción startDrag();
Cristián Parrao – cristian@parrao.cl 56
Objeto Key
Así como teníamos el objeto Movie Clip, hay un objeto interesante para
agregarle interactividad a las películas: el Objeto Key. El objeto Key es capaz de
detectar la última tecla presionada.
En un Nuevo Documento, crea un Movie Clip y agrégale la siguiente acción:
onClipEvent(keyDown) {
trace(Key.getCode());
}
Al probar tu película cuando presiones algunas teclas de tu teclado el Panel de
Salida registrará algunos números. La razón de esto es que Actionscript le asigna
a cada tecla un número. Por ejemplo, la flecha izquierda está asociada al número
37. La idea de esto es que al haber gran cantidad de teclados e idiomas distintos,
estén de alguna manera estandarizados para que el swf pueda leerlos
correctamente. Para conocer cada uno de los valores que Actionscript le tiene a
cada tecla, sugiero que revises la Ayuda (F1) > Guía de Referencia de Actionscript
> Teclas del Teclado y Valores de Códigos de Tecla.
Cristián Parrao – cristian@parrao.cl 57
Sin embargo hay algunas teclas que sólo colocando su nombre, Actionscript
es capaz de reconocerlas. Probemos otro ejemplo:
En un nuevo Movie Clip, agrégale la siguiente acción:
onClipEvent(enterFrame) {
if(Key.isDown(Key.LEFT)){
this._x=10;
}
}
Trataremos de explicarlo.
this._x=10 : Que este mismo Movie Clip, su posición x se desplace 10
píxeles más a la izquierda cada vez que la tecla sea presionada.
Que sería lo mismo que:
onClipEvent(enterFrame) {
if(Key.isDown(37)){
this._x=10;
}
}
Recordemos que el valor 37, representa a la flecha izquierda, pero en este
caso Flash la reconoce por su nombre “LEFT”. No todas las teclas son
reconocidas por su nombre.
Cristián Parrao – cristian@parrao.cl 58
Y si además queremos agregarle movimiento a la derecha, la acción debiera
quedar así:
onClipEvent(enterFrame) {
if(Key.isDown(Key.LEFT)){
this._x=10;
}
if(Key.isDown(Key.RIGHT)){
this._x+=10;
}
}
El evento es el mismo (enterFrame) pero se le ha agregado otra sentencia if y
por supuesto se le ha modificado la acción que debe ejecutar. Para la izquierda,
debía reducir su posición _x, pero para la derecha es justamente lo contrario, debe
aumentar su posición _x, por eso el _x+=10.
Cristián Parrao – cristian@parrao.cl 59
Funciones
Una función es un pedazo de código, que realiza una tarea, pero que está
escrito en otra parte. ¿Y para qué puede servir esto? Básicamente para que
botones, Movie Clips, o fotogramas puedan acceder a él.
Las funciones podemos crearlas nosotros u ocupar las muchas que trae flash
ya definidas. Por ejemplo, una función ya definida podría ser la siguiente:
on(release){
trace(Math.pow (10,4));
}
La función “pow” del objeto Math se refiere a un objeto elevado a otro. En este
caso elevamos 10 a 4. No hay que “explicarle” a Flash de qué se trata que
elevemos un número a otro. Él ya lo sabe (viene “programada de fábrica”, si lo
llamamos de alguna manera) y esa función podemos ocuparla cuántas veces
queramos.
Otro ejemplo:
on(release){
trace(Math.sqrt(64));
}
Acá lo mismo con la raíz cuadrada de 64 (que es 8).
Veamos qué pasa con las funciones creadas por nosotros.
Hasta ahora todas las acciones las hemos declarado sobre botones, Movie
Clips y Fotogramas. Pero imaginemos el siguiente caso: Tenemos en una película
30 botones y cada uno va a un frame diferente dentro de un Movie Clip llamado –
por ejemplo – “prueba”. Por ejemplo el botón 1 tendría el siguiente script:
on(release){
pruebita.gotoAndStop(“animacion1”);
}
Y el botón 2 tendría este otro:
Cristián Parrao – cristian@parrao.cl 60
on(release){
pruebita.gotoAndStop(“animacion2”);
}
Y así el 3, 4,5... hasta que el 30 tuviera:
on(release){
pruebita.gotoAndStop(“animacion30”);
}
¿Qué pasaría si por alguna razón necesitas cambiarle el nombre a tu
instancia? ¡Tendrías que cambiar cada acción a los 30 botones! Claro, se puede,
pero es una pérdida de tiempo.
Para eso existe la Función. Lo mejor hubiera sido en este caso que cada uno
de los 30 botones tengan una referencia a una acción declarada en el primer
fotograma. Y si por algún motivo, cambia esa acción ¡Cambian todas las acciones
de los botones!
Veamos un ejemplo sencillo. En un documento nuevo, crea un botón y deja
cuatro instancias en el escenario. A cada botón agrégale el siguiente script:
on(release){
trace(“Soy un botón!!!”)
}
Cristián Parrao – cristian@parrao.cl 61
Bueno como verás es algo muy sencillo. Los 4 botones con la misma
instrucción. Prueba la película y confirma que funcione correctamente.
Bien, esa es la forma “antigua”, ahora ocuparemos una Función:
Crea una nueva capa y en el primer fotograma escribe la siguiente Función:
frase= function(){
trace(“Soy un botón!!!”);
}
Ahora a cada botón, agrégale la siguiente acción:
on(release){
frase();
}
Fíjate que esta acción lo que hace es que el botón llame a la función declarada
en el primer fotograma. Los cuatro botones la llaman, por lo que debiera funcionar
para los 4. Prueba la película y comprueba que esté todo funcionando bien.
Hagamos la prueba para comprobar su eficiencia. Cambia ahora el texto de la
función declarada, por el siguiente:
frase= function(){
trace(“Nací botón!!!”);
}
Cristián Parrao – cristian@parrao.cl 62
Prueba y ve como cada botón saca el trace con nuevo texto!!
Funciones con parámetros
Hasta ahora hemos visto el principio básico de las Funciones. En realidad
estás son Funciones sin parámetros. Sin embargo, se les puede colocar
parámetros y hacerlas más interesantes.
Sigamos con el ejemplo anterior de los 4 botones. La función declarada en el
primer fotograma, cámbiala por la siguiente:
frase= function(color){
trace(“Nací botón “+ color +”!!!”);
}
Fíjate que al lado de la palabra function, entre los paréntesis agregamos la
variable color. Y el trace concatena la frase con la variable color. ¿Pero de dónde
nace esa variable?
Anda al primer botón, entíntalo de rojo y déjale la siguiente acción:
on(release){
frase(“rojo”);
}
Anda al segundo, entíntalo de azul y:
on(release){
frase(“azul”);
}
Anda al tercero, entíntalo de amarillo y:
on(release){
frase(“amarillo”);
}
Cristián Parrao – cristian@parrao.cl 63
Anda al cuarto, entíntalo de verde y:
on(release){
frase(“verde”);
}
Haz lo mismo con los otros 2 (por supuesto déjalo en otros colores)
Ahora prueba la película. Si todo está correctamente bien escrito podrás notar
que la variable “color” es generada por cada botón El primero le asignó un valor de
cadena (String) llamado “rojo”. El otro “azul” y así. El resultado en el Panel de
Salida debiera ser (haciendo clic en todos los botones) :
Nací botón rojo!!!
Nací botón azul!!!
Nací botón amarillo!!!
Nací botón verde!!!
Cristián Parrao – cristian@parrao.cl 64
Array
Los Array o Matrices son súper contenedores de variables; es decir, que
pueden contener más de una.
La idea de esto es que puedan agruparse y sean un forma fácil de trabajar con
ellos. Por ejemplo, si tengo un listado de compras para ir al supermercado:
compraSemanal1= “mayonesa”
compraSemanal2= ”huevos”
compraSemanal3= ”tomate”
compraSemanal4= ”pan”
En este caso, si ya compramos “huevos” y deseamos de sacarlo de la lista,
nos quedarán sólo 3 elementos, en vez de cuatro. En un documento nuevo,
escribe en el primer fotograma, lo que para Actionscript sería algo como:
compraSemanal= new Array (“mayonesa”, “huevos”, “tomate”,
“pan”);
Para Flash los elementos se cuentas desde el 0, no desde el 1. Por ejemplo,
crea un botón y agrégale lo siguiente:
on(release){
trace(compraSemanal[2])
}
Prueba la película y verás como el Panel de Salida indica “tomate”. ¿Por qué si
“tomate” es el tercer elemento? Porque como dijimos para Actionscript “tomate” es
el elemento número 2, ya que comienza a contar desde el cero.
A ese mismo botón sácale la antigua acción y ahora colócale la siguiente:
on (release) {
trace(compraSemanal.length);
}
Cristián Parrao – cristian@parrao.cl 65
El código length es una propiedad del objeto Array. Al probar la película podrás
notar que en el Panel de Salida aparece el número 4, lo que indica que está
reconociendo la existencia de cuatro elementos dentro del array.
Con el siguiente código:
on (release) {
trace(comprasSemanal.toString());
}
Puede hacer un listado completo de todos los elementos que contiene el array,
separados por una coma.
Intentemos esto otro en el mismo botón:
on (release) {
trace(comprasSemanal.splice(2,3));
}
El método splice() es capaz de eliminar elementos de la matriz. En este
ejemplo he colocado los valores 2 y 3. Esto significa que eliminará “tomate” y
“pan”.
También tenemos las posibilidad de ordenarlos alfabéticamente con el método
sort().
on (release) {
trace(comprasSemanal.sort());
}
Cristián Parrao – cristian@parrao.cl 66
Bucles
El bucle es conocido como “loop”, es decir algo que se repite constantemente.
Y justamente sirve para que Flash pueda realizar tareas que deban repetirse, bajo
ciertas condiciones que nosotros programaremos. Por ejemplo si queremos
duplicar 50 veces un Movie Clip podemos hacerlo manualmente desde el
escenario, pero evidentemente sería un trabajo costoso. Sin embargo con algunas
líneas de código, Flash es capaz de repetir 50 veces o las que queramos alguna
instrucción. Cuando llegue a la repetición 50, Flash se detendrá.
Por ejemplo, agrégale el siguiente script a un botón:
on (release) {
for(i=1; i<=10; i++){
trace(i);
}
}
Prueba la película y podrás notar que el Panel de salida muestra 10 números,
del 1 al 10.
Veamos por qué:
for(i=1; i<=10; i++){
for es el inicio de una de las maneras de hacer bucles (a mi parecer la más
ocupada, ya que hay otras).
Luego i=1 es simplemente declarar una variable.
i++ Este operando ya lo conocemos, que es “súmele 1 a i”.
Cristián Parrao – cristian@parrao.cl 67
Veamos otro ejemplo. En un nuevo documento crea un Movie clip y un botón.
A la instancia del Movie Clip llámala “pepe”. Al botón agrégale el siguiente código:
on (release) {
for(i=1; i<=15; i++){
pepe.duplicateMovieClip("nuevoPepe"+i, i)
_root["nuevoPepe"+i]._x+=i*50;
}
}
Acá además del bucle, lograremos duplicar el Movie Clip las veces que
queramos.
Primero se establece la línea del for con su condición. En esta ocasión
haremos un bucle de 15 veces (por supuesto que eso lo puedes cambiar cuando
gustes). En la siguiente línea invocamos un método de los objetos Movie Clip,
llamado duplicateMovieClip(), que justamente como lo dice su nombre, es
capaz de duplicar un Movie clip. En esta caso estamos duplicando “pepe”.
Obviamente debemos incluirle parámetros dentro de los paréntesis.
El primer parámetro es el nuevo nombre del duplicado. En este caso le
coloqué el nombre “nuevoPepe” (puede ser cualquiera) más el valor de i. Esto
significa que la primera instancia duplicada se llamará “nuevoPepe1”, al segunda
“nuevoPepe2”, la tercera “nuevoPepe3”, y así hasta la última “nuevoPepe15”.
Luego como segundo parámetro se le coloca la profundidad en que aparecerá
cada duplicado. En vez de colocarle un valor, le coloqué i, para que la primera
profundidad de la instancia sea 1, la segunda sea 2 y así hasta la 15.
Finalmente no veríamos ningún cambio si no colocamos el último código, ya
que ¿dónde aparecerían estas 15 nuevas duplicaciones? ¡Exactamente sobre la
original y no se distinguirían!
_root["nuevoPepe"+i]._x+=i*50;
Acá le estamos diciendo que a todas las nuevas instancias llamadas
“nuevoPepe”+i (recordemos que eso se refiere a “nuevoPepe1”, “nuevoPepe2”,
Cristián Parrao – cristian@parrao.cl 68
“nuevoPepe3”, etc.), su propiedad de _x (ubicación en la coordenada X) se
aumente el valor de i*50 (es decir, i multiplicado por 50, por lo que el primero
será 50, luego será 100, 150, 200, etc.).
Prueba tu película. Mi ejemplo quedó así:
Y después
Cristián Parrao – cristian@parrao.cl 69
Hay otras formas que ofrece Actionscript para hacer bucles. La primera es la
que vimos: for.
Las otras dos ocupan el mismo principio de realizar repeticiones bajo una
cierta condición. Bucle while y Bucle do…while
Bucle while:
while (condición) {
código a ejecutar;
}
Primero se establece la condición y luego el código a ejecutar:
Bucle do...while:
do {
código a ejecutar;
}
while (condición) ;
Por ejemplo tomemos el contador que hicimos al principio (del 1 al 10) y
enfrentémoslo con las otras maneras de hacer el bucle.
1. for:
for(i=1; i<=10; i++){
trace(i);
}
2. while:
i = 1;
while (i<=10) {
trace(i);
i++;
Cristián Parrao – cristian@parrao.cl 70
3. do… while:
i = 1;
do {
trace(i);
i++
} while (i<=10);
En este último, si te fijas, se ordena primero la orden y luego se establece la
condición.
Cristián Parrao – cristian@parrao.cl 71