Introducción a la programación de animaciones


Volver al índice

En esta primera sesión vamos a utilizar una animación preparada previamente en una instancia colocada en la escena de flash. El objetivo es aprender a hacer una animción interactiva utilizando un pequeño código en actionscript.

Podeis descargar la animación que vamos a utilizar de aquí (necesitaréis Flash CS5 como mínimo para abrirla)

Este es el resultado esperado:

Preparación de la animación

Antes de empezar a programar tenemos que prepar la línea de tiempo de la instancia que contiene la animación. Inicialmente la tenemos así, con etiquetas marcando los diferentes estados de la animación.

preparacionAnimacion_1

Tal y como está, al publicar la película se reproducirá en bucle toda la animación. Este es el comportamioento por defecto de cualquier clip de película en flash. Así que si queremos que cuando le digamos al personaje que ande hacia la derecha, permanezca andando hacia la derecha hasta que le digamos otra cosa, tendremos que añadir código en la línea de tiempo de este símbolo para que repita la animación de andar hacia la derecha (marcada con la tetiqueta “der”) en bucle.

Añadiremos un fotograma clave vacío eln la capa as3 en el fotograma 6 (dónde acaba la etiqueta “der”), que es el último de la animación de andar hacia la derecha. Seleccionando ese fotograma clave y abriendo el panel de acciones tecleamos en siguiente código:

preparacionAnimacion_2

Al añadir en ese fotograma:

gotoAndPlay("der");

obligamos a que cuando el reproductor llegue a ese fotograma salte al fotograma 1, que es el que tiene la etiqueta “der”.

Harremos lo mismo en el fotograma 19 (final de la etiqueta “izq”)

gotoAndPlay("izq");

Y por último, al principio de la etiqueta “quieto”, fotograma 7, de nuevo en la capa as3, añadiremos el código

stop();

¿Por qué aquí ponemos un código diferente?. La etiqueta “quieto” marca un estado que no está animado. Dura 7 fotogramas, pero no porque esté animada, sino para que el nombre de la etiqueta se pueda leer. En reliada cuando le digamos al personaje que reproduzca quieto, querremos que la animación se pare en el fotograma 7.

Este es el aspecto que ha de tener la línea de tiempo cuando acabemos de preparar la instancia:
preparacionAnimacion_3

Aclaración importante:

En el apartado anterior hemos estado introduciendo código en diferentes fotogramas de una línea de tiempo.

  • Siendo estrictos, esto es un mal hábito de programación, pero facilita mucho el trabajo preparar las animaciones de esta manera.
  • Exceptuando las animaciones de los símbolos, cuyas instancias vamos a controlar desde nuestros programas, TODO el código que introduzcamos tendrá que estar en la línea de tiempo principal (la de la escena) en una capa que se llame as3 o actionscript y en el primer fotograma.

Resumen de sentencias y estructuras de programación a utilizar:

Control de la línea de tiempo de una instancia presente en la escena:


// Reproducir o parar la línea de tiempo
nombreDeInstancia.play();
nombreDeInstancia.stop();

// Reproducir o parar la animación en una etiqueta concreta, utilizando su nombre o
// su número de fotograma
nombreDeInstancia.gotoAndPlay("nombreDeEtiqueta");
nombreDeInstancia.gotoAndPlay(númeroDeFotograma);

nombreDeInstancia.gotoAndStop("nombreDeEtiqueta");
nombreDeInstancia.gotoAndStop(númeroDeFotograma);

Control de la posición de una instancia en la escena

nombreDeInstancia.x = 50;
nombreDeInstancia.y = 220;

nombreDeOtraInstancia.x = -75;
nombreDeOtraInstancia.y = 100;

Detección o captura de eventos

Hay varios tipos de eventos que el reproductor de flash es capaz de detectar y emitir para que nosotros podamos capturarlos y ejecutar nuestros propios comandos actionscript cuando se producen.
Vamos a ver dos tipos de momento Event y MouseEvent. Además cada uno de estos eventos tiene subtipos. Mostraremos aquí Event.ENTER_FRAME y MouseEvent.CLICK como ejemplos:

Evento ENTER_FRAME

import flash.events.Event;
// ...
stage.addEventListener( Event.ENTER_FRAME, enCadaFotograma );
// ...
function enCadaFotograma( evento : Event ) : void {
	// Comandos actionscript que se ejecutarán en cada fotograma
	// ...
}

Fijáos en que en la primera línea debemos importar el tipo de evento que vamos a utilizar.
Las líneas que empiezan con // no se ejecutan,, sirven para introducir comentarios y aclaraciones.
Los puntos suspensivos indican que puede haber otros comandos entre medias.
El nombre de la función enCadaFotograma lo decidís vosotros, pero debéis usar el mismo nombre en las líneas 3 y 5.
Todo lo demás debéis escribirlo exactamente igual para que funcione.
El nómbre del parámetro evento que recibe esta función, también lo podéis cambiar, pero todo lo demás debéis escribirlo igual que está aquí. Actionscript es sensible a mayúsculas y minúsculas, lo que significa que si ponde hay una mayúscula ponéis una minúscula, o viceversa, el programa deja de funcionar.

Evento CLICK

import flash.events.MouseEvent;
// ...
stage.addEventListener( MouseEvent.CLICK, cuandoHagaCLick );
// ...
function cuandoHagaCLick ( evento : MouseEvent ) : void {
	// Comandos actionscript que se ejecutarán en cada CLICK del ratón
	// ...
}

Obtener la posición del ratón

var coordenadaX : Number = stage.mouseX;
var coordenadaY : Number = stage.mouseY;

Estructura de control de flujo if

if (stage.mouseX > persona.x) {
     persona.x = persona.x + 10;
     persona.gotoAndPlay("der");
}

Más adelante explicaré lo que está ocurriendo en cada una de estas estructuras, pero de momento aprendamos simplemente a utilizarlas.

Ejercicios propuestos:

Si os parece demasiado dfícil conseguir el resultado que se muestra al principio del post, aquí os dejo unos ejercicios de dificultad progresiva para que vayais poco a poco.

En cualquier caso os recomiendo que los hagáis, porque os harán más fácil ir entendiendo poco a poco lo que estáis haciendo.

Si tenéis cualquier duda ponedme un comentario o escribidme desde el campus.

  1. Colocad la instancia del personaje en el centro de la pantalla, quieto.
  2. Colocadlo a la izquierda de la pantalla, andando hacia la derecha, pero sin que cambie de posición.
  3. Colocadlo a la derecha de la pantalla, andando hacia la izquierda, pero sin que cambie de posición.
  4. Colocad al personaje en el centro de la pantalla quieto. Haced que cuando se haga click empiece a andar hacia la izquierda.
  5. 	pedro.x = 275;
    	function cuandoHagaClick(evento:MouseEvent):void{
    		pedro.gotoAndPlay("izq");
    	}
    	stage.addEventListener(MouseEvent.CLICK, cuandoHagaClick);
    	
  6. Colocad dos instancias del personaje en la pantalla. Que una se llame juan y otra se llame pedro. que las dos anden hacia la izquierda pero sin cambiar su posición.
  7. Colocad sólo una instancia de personaje a la derecha de la pantalla, andando hacia la izquierda y moviéndose en la misma dirección 15 pixeles en cada fotograma.
    	pedro.x = 500;
    	pedro.gotoAndPlay("izq");
    	function enCadaFotograma(evento:Event):void {
    		pedro.x = pedro.x - 15;
    	}
    	stage.addEventListener(Event.ENTER_FRAME,enCadaFotograma);
    	
  8. Colocad dos instancias del personaje en la pantalla. Que una se llame juan y otra se llame pedro. Que una ande y se desplace hacia la izquierda y la otra hacia la derecha.
    	juan.x = 50;
    	pedro.x = 500;
    	pedro.gotoAndPlay("izq");
    	function enCadaFotograma(evento:Event):void {
    		juan.x = juan.x + 15;
    		pedro.x = pedro.x - 15;
    	}
    	stage.addEventListener(Event.ENTER_FRAME,enCadaFotograma);
    	

En cualquier caso, aquí os dejo el archivo de flash que contiene el programa completo para que lo estudiéis.

Notas de clase

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s