Tutorial Flash 01: Instanciando clips en tiempo de ejecución

En este artículo vamos a empezar a desvincularnos de la parte de diseño de Flash, aprenderemos cómo hacer algo tan simple como instanciar un clip de película pero desde código y no en tiempo de diseño y empezaremos un proyecto flash que será el proyecto con el que seguiremos trabajando en el resto de tutoriales y que finalmente se convertirá en nuestro remake del Gryzor.

Es muy común a la hora de hacer un juego en flash instanciar todos los objetos en tiempo de diseño y ponerles un nombre para después poder acceder a ellos, es rápido pero nada elegante y tiene ciertas limitaciones, por ejemplo, en un juego donde aparecen 50 enemigos la labor de instanciarlos todos e ir nombrándolos hará que la película flash acabe siendo caótica.

Descripción: Esta es la segunda parte de la serie de Tutoriales Flash para hacer un videojuego

Requisitos: Necesitaremos tener instalado Flash 8 o Flash MX 2004. así como un leve conocimiento del interfaz de flash que se puede adquirir con los tutoriales que acompañan a Flash MX 2004. También es recomendable leer el tutorial Flah 00 para ir poniéndonos en situación haciendo un sencillo “hola mundo”.

Paso 1: Coger sprites de capturas de pantalla (robarlos)

Aquí tenemos una captura del juego que vamos a rehacer, este paso requiere paciencia, ya que lo que vamos a hacer es sacar capturas de todos los fotogramas de donde queramos sacar gráficos. Puede parecer difícil, pero con el emulador adecuado, podremos hacerlo sin mayor problema. En este caso he usado el Win Ape, el cual tiene una opción para retardar lo que queramos el paso de cada fotograma, así podremos fácilmente captar el fotograma deseado.

Luego con un programa de edición de imágenes que nos permita trabajar fácilmente a nivel de pixel iremos recortando dichas imágenes y dejando el fondo transparente, exportándolas en formato preferiblemente PNG, ya que dicho formato no corrompe la imagen, permite más de 256 colores y permite transparencias.
Al trabajar Flash con librería empotrada en el proyecto, dichas imágenes se almacenarán en la librería, lo que no quita que queramos guardar dichas imágenes en una carpeta del disco duro enumeradas y luego las importemos de golpe desde Flash o las movamos a la librería haciendo drag&drop. Esto ya queda a gusto del usuario.

Si no encontramos el panel de la librería el interfaz de Flash, pulsando f11 lo haremos visible.

Paso 2: Creación del proyecto

Nos vamos a nuestro Flash, ya sea el MX2004, el 8 o el CS3, el que deseemos (en caso de usar CS3 tendremos que asegurarnos que vamos a trabajar con Action Script 2.0), y creamos un nuevo documento en blanco.

Primero vamos a definir las propiedades del documento, ya que aunque en el “hola mundo” no fue necesario, aquí si necesitamos unos requerimientos mínimos, como por ejemplo el número de fotogramas por segundo, queremos que sea de 30, y el tamaño lo vamos a adaptar al tamaño de la ventana del juego original que estamos copiando, que son 256 x 183 píxeles.

La ventana de propiedades del documento la obtenemos haciendo doble clic en el indicador de fotogramas por segundo de la película, queda como sigue:

Paso 3: Creando nuestro primer clip de película

Si hemos seguido los tutoriales que trae Flash, sabremos que una de las funcionalidades más interesantes de flash es poder instanciar un clip de película más de una vez, tan simplemente como hacer un drag & drop desde la librería hasta el fotograma de la película deseado, luego podemos cambiar las propiedades de ese clip, girarlo, voltearlo, aplicarle transparencia, colorearlo, cambiarlo de tamaño, meterle filtros, alterar su mezcla de color etc.
Esta tarea para el diseñador es muy fácil de realizar, pero la situación de los clips al hacerse en tiempo de diseño no podrá ser dinámica, imaginemos que queremos hacer un clip que tenga cada vez un número de instancias diferentes y en posiciones diferentes, por ejemplo un juego, donde los enemigos son siempre el mismo clip de película instanciado varias veces en posiciones diferentes.

Como sabemos, cada archivo fuente .fla guarda mucha información, información de diseño e información de programación, así por ejemplo los elementos que encontramos en la librería es sobre todo información de diseño, no todos los elementos que están en la librería pasarán al código final, es necesario que sean instanciados durante el tiempo de desarrollo, ya que sólo los que son instanciados pasan al .swf resultante.

Otro dato interesante es que los datos no se trabajan como vienen en la librería, al publicarlos tendremos que elegir las tasas de compresión tanto para imágenes como para audio, así que los datos que pasan al .swf en pocas situaciones serán los mismos que hay en la librería.

Dada su versatilidad un archivo Flash puede ser simplemente una librería de clips de película realizados por un diseñador, que después pueden ser reutilizados por el programador

Hacerlo Paso a paso:

1. Instanciaremos el primero de los sprites que hemos capturado, haciendo clic desde la librería hasta la ventana principal de la película.

2. Haciendo clic con el botón derecho sobre el sprite, seleccionaremos la opción Convert To Symbol… (convertir en símbolo), seguidamente en la ventana que aparece pondremos el nombre “tioclip“, seleccionamos el tipo “MovieClip”, el punto de registro o ancla lo dejamos tal como está (dicho punto marca la posición absoluta 0,0 dentro de dicho clip lo cual es vital para saber dónde se va a instanciar el clip cuando lo hagamos desde código).

3. Vemos que ahora el sprite al seleccionarlo ya no es una imagen, si no un clip (tiene el borde azul). Lo seleccionamos y lo borramos sin miedo.

4. En la librería hacemos doble clic sobre el clip llamado “tioclip“. En la barra de escena (está justo encima de los números de los fotogramas) veremos que ahora además de la escena principal aparece el texto tioclip, esto nos indica que estamos trabajando con ese clip de película, haciendo clic sobre el texto “Scene 1” volveremos a la escena principal que durante este tutorial permanecerá vacía.

5. Ir montando los sprites en cada fotograma y probar que la velocidad de reproducción sea la adecuada (a gusto del consumidor).

6. Crear otra capa con fotogramas que iremos nombrando de modo descriptivo sobre qué hace cada sprite (mirar el siguiente apartado).

Coger el clip ya hecho por mi:

Previamente durante la realización de este tutorial compuse un clip con capturas del personaje del juego original llamado Lance (si mirais la portada original el amigo tiene cara de palurdo, pero en la portada de Amstrad era el hermano salvaje de Arnold Schwarzenegger, realmente pixelar es un arte). El clip tiene dos capas, la primera de ella la he usado para dar nombres a los fotogramas y que sean legibles; en la segunda capa he ido colocando las capturas de modo que al reproducir la película se pueda ver al personaje andando:

Si nos fijamos en la figura, en el fotograma 21 hay una pequeña “a”, esto indica que en dicho fotograma hay código empotrado, concretamente un código que envía la cabeza lectora al fotograma 10, de modo que se forma un bucle en el que personaje anda sin parar todo el rato.

Concretamente el código del fotograma 21 es el siguiente:

gotoAndPlay(“walk”);

La ventaja de nombrar a los fotogramas queda reflejada en esta linea de código, en los próximos tutoriales y en el juego final aprovecharemos esta técnica. El hecho de nombrarlos en ingles es elección personal, lo ideal es que el nombre de dicho fotograma represente inequívocamente lo que hace ese fotograma.

El clip de película del que acabamos de hablar lo tenéis adjunto en un enlace al final del artículo.

Paso 4: Enlazar el clip con ActionScript

El primer paso será indicarle a la librería que dicho clip se va a usar en tiempo de ejecución y que sí debe ser exportado al archivo .swf.

Esto lo haremos haciendo clic con el botón derecho sobre el objeto en la película y seleccionando la opción Linkage…(Enlazado…)

En la ventana de propiedades de enlazado le daremos un identificador que usaremos desde ActionScript para referenciar a este clip.

Como identificador pondremos Lance y marcaremos que queremos que se exporte para ActionScript y que se exporte en el primer fotograma.
A partir de ahora ese clip siempre se exportará al archivo .swf independientemente de que lo usemos o no.

Paso 5: And here comes the big stuff

Haciendo clic en el primer y único fotograma (que por ahora está vacío, ya que el clip se instanciará en tiempo de ejecución), nos vamos al panel de Acciones y escribimos el siguiente código:

for(i=1; i<8; i++){
attachMovie("Lance","tio"+i,i);
setProperty("tio"+i,_x,32*i);
setProperty("tio"+i,_height,32+10*i);
}

Este bucle sitúa en pantalla siete instancias del clip y a cada uno de ellos les asigna propiedades _x y _height distintas.
Como podemos observar no se pueden asignar directamente los valores de dichas propiedades, ya que los nombres de las instancias aún no existen, por ello se debe usar el método setProperty.

setProperty(target, property, value/expression)

target, es una cadena que contiene el nombre de la instancia
property, es la propiedad a modificar
value/expression, es el valor o expresión que queremos asignar a la propiedad.

La función attachMovie tiene el siguiente uso:

my_mc.attachMovie(idName, newName, depth)

idName, nombre de enlace que se le ha asignado al Clip
newName, nombre de la instancia en la película.
depth, profundidad.

Por profundidad podemos entender el orden de dibujado de los objetos, aquellos con menor profundidad se dibujarán antes quedando ocultos por los objetos de mayor profundidad que se encuentren por encima. Si un objeto tiene la misma profundidad que otro le arrebatará la posición haciendo que el que había antes desaparezca.

La profundidad varía entre -16384 y 1048575, es decir, podemos tener más de un millón de objetos instanciados que ocuparán cada uno su posición.

Es muy importante gestionar la profundidad adecuadamente cuando nos encontramos con muchos clips que interactúan en la película.

Si nos fijamos en el código, cada objeto tiene una profundidad diferente, ya que se la asignamos con la variable del bucle for.

Al igual que en otros lenguajes script en este ejemplo podemos ver cómo se pueden crear fácilmente variables dinámicas usando la concatenación de cadenas: +.
Así, tras la ejecución del bucle se crearán los nombres de instancia: tio1, tio2, tio3, tio4, etc… como podemos ver en el listado de variables:

Level #0:
Variable _level0.$version = "WIN 7,0,14,0"
Variable _level0.i = 8
Movie Clip: Target="_level0.tio1"
Movie Clip: Target="_level0.tio2"
Movie Clip: Target="_level0.tio3"
Movie Clip: Target="_level0.tio4"
Movie Clip: Target="_level0.tio5"
Movie Clip: Target="_level0.tio6"
Movie Clip: Target="_level0.tio7"

Obsérvese que la variable i sigue existiendo con valor 8.

Recomiendo encarecidamente mirar la ayuda de ActionScript 2.0 y juguetear con las propiedades de la clase MovieClip, veréis que se pueden conseguir efectos muy curiosos a golpe de código.

En el próximo tutorial crearemos nuestras primeras clases en ActionScript, veremos la utilidad de sacar el código fuera del proyecto flash y aprenderemos a gestionar el teclado para mover el clip por la escena de la película. Espero que os haya resultado interesante este artículo y os animéis a seguir con el remake del magnífico Gryzor conmigo.

Archivo adjunto: tut02.fla
Ejemplo: tut02.swf
Fuente: Ludosofía