AS3: Dibujar uniendo puntos

Vamos a crear en flash+AS3 la típica actividad/pasatiempo que siempre hemos hecho todos de pequeños alguna vez. Se trata de unir los puntos para hacer un dibujo que en un principio está parcialmente oculto. Este mini-tutorial está hecho a partir del trabajo de uno de los colaboradores latentes de programacionmultimedia.net, Ignacio Calleja. Lo único que he hecho yo es volver a crear la actividad, eliminando otros elementos que contenía originalmente y refinar un poco la librería/fotogramas del .fla. En principio la idea es terminar de dibujar una casa uniendo los números del 20 al 39 y que cuando los terminemos de unir la casa se pinte de color. Al final de este tutorial podreis descargar el .fla.

Comenzando con los materiales a usar

Vamos a necesitar 2 imágenes para este tutorial de 1024x768px. La primera será con los puntos numerados y la segunda con el dibujo con color. Las podeis descargar aquí:

Una vez tengamos el material creamos en flash un nuevo documento ActionScript3 y le damos al escenario un tamaño de 1024x768px. Añadimos 2 capas (dibujo trazado y dibujo sin trazar) y añadimos en cada una la imagen que le corresponde, centrándolas en el escenario.

La imagen del dibujo coloreado la vamos a convertir en símbolo de Movieclip y le pondremos nombre de instancia dibujo_trazado_mc para poder mostrarla y ocultarla mediante AS3.

Preparando el resto del escenario y Movieclips

Bien vamos a la línea de tiempo y creamos ya todas las capas que vamos a necesitar: as, puntos, botón repetir. En la capa as va a haber 2 keyframe en los que va a ir todo el código. llamaremos a estos keyframes/fotogramas inicio y repetir.

Ahora creamos un botón para repetir la actividad cuando la completemos. Yo he optado por un Movieclip sencillo, lo he colocado en la capa botón repetir a la altura del keyframe repetir y le he puesto de nombre de instancia repetirActividad_mc.

Seguidamente vamos a crear un símbolo de botón consistente en un círculo de color rojo que será cada uno de los puntos a seguir para hacer el dibujo. Creo el símbolo de botón con el primer fotograma vacío para que sea invisible pero tenga hit-area.

En la capa puntos vamos a colocar una instancia de este símbolo del punto en cada uno de los puntos que tiene el dibujo (20 en este caso) y los vamos a nombrar como nombre de instancia de la siguiente manera: mc_pto20, mc_pto21, mc_pto22… Colocándolos como corresponda numéricamente de acuerdo con el dibujo.

Metiéndole AS3

Llegados a este punto la mécanica del programa es sencilla. Tenemos 2 variables de configuración que son el punto inicial y el punto final y un array arrClips que se va a llenar solito con todos esos moviclips que hemos metido en la capa puntos. También tenemos otro array auxiliar, arrClipsUsados, que medirá los nombres de los clips usados. Estas son las variables más importantes. Tenemos como vereis otras variables más que vienen comentadas en el código que os dejo a continuación y que está todo explicado en su línea correspondiente. Solamente tenemos código en los keyframes inicio y repetir.

import  flash.display.MovieClip;
import  flash.events.MouseEvent;

//******INICIALIZACIÓN******************

var numInicialPunto:Number=20;//número inicial de punto
var numFinalPunto:Number=39;//número final de punto
var arrClips:Array=new Array();//array de todos los clips de puntos
var arrClipsUsados:Array=new Array(); // Para almacenar SOLO EL NOMBRE de cada clip pulsado, cuando tenga la misma longitud que arrClips significa que hemos pulsado sobre todos



for(var j:Number=numInicialPunto;j<numFinalPunto+1;j++)
{
	//relleno el array con los puntos que hay en el escenario
	arrClips.push(this["mc_pto"+j]);
	
}



var numPunto:Number=0;

var i:String=new String(); //variable de iteración

dibujo_trazado_mc.alpha=0;// Borra el dibujo coloreado

// CREA LA FORMA PARA DIBUJAR LAS LÍNEAS Y DEFINE EL ESTILO
var sh_lienzo:Shape = new Shape();
addChild(sh_lienzo);

stop();

init();

//**********************************

function init(){
	
	arrClipsUsados= []; // limpia la lista de clips usados
	activaBtns();// activa botones
	
}
//**********************************

function activaBtns(){ 
	
	
	if (numPunto == 0){ // Sólo activa los botones al empezar la actividad
		for (i in arrClips){
			arrClips[i].addEventListener(MouseEvent.CLICK,dibujaLinea);
			//arrClips[i].buttonMode=true;	
			arrClips[i].enabled=true;
		}			
	}
}
//**********************************

function desactivaBtns(){
	//desactivamos eventos en los clips de los puntos
	for (i in arrClips){
		arrClips[i].removeEventListener(MouseEvent.CLICK,dibujaLinea);
		arrClips[i].enabled=false;
	}	
}
//**********************************

function dibujaLinea(e:MouseEvent){
	if (e.target.name == arrClips[numPunto].name){ // Si hemos pinchado en el punto que toca
		// Dibuja la línea desde el punto anterior
		if (numPunto > 0){ // ...pero no teniendo en cuenta el punto de origen
		    trace("Dibujando línea de " + arrClips[numPunto-1].name + " a " + arrClips[numPunto].name);
			sh_lienzo.graphics.lineStyle(3, 0x000000, 1);
			sh_lienzo.graphics.moveTo(arrClips[numPunto-1].x, arrClips[numPunto-1].y);
			sh_lienzo.graphics.lineTo(arrClips[numPunto].x,arrClips[numPunto].y); 
		}
		// Incluye el clip en la lista de clips usados
		arrClipsUsados.push(e.target.name);
		// Desactívalo como botón
		e.target.removeEventListener(MouseEvent.CLICK,dibujaLinea);
		e.target.enabled=false;
		
		numPunto++;
		
		// Comprueba si has pulsado todos comparando el tamaño de los 2 arrays
			
		if (arrClipsUsados.length >= arrClips.length) {
				desactivaBtns();
				dibujo_trazado_mc.alpha=1; // Colorea el dibujo
				// pequeño retardo (en este caso el cuádruple, para que de tiempo a escuchar la frase)
				terminaActividad();
		}
	}
}

//**********************************

function terminaActividad(){
	gotoAndPlay("repetir");
}

stop();

//botón de repite actividad******************-
repetirActividad_mc.addEventListener(MouseEvent.CLICK,repiteActividad);
repetirActividad_mc.buttonMode=true;

//****************************************
function repiteActividad(e:MouseEvent){
	
	repetirActividad_mc.removeEventListener(MouseEvent.CLICK,repiteActividad);
	repetirActividad_mc.buttonMode=false;
	
	sh_lienzo.graphics.clear();// Limpia el lienzo
	desactivaBtns();
	gotoAndPlay("inicio");
}

Conclusión

Si todo va correcto, compilais y terminais el dibujo, os aparecerá una cosa tal que así:

Espero os sea útil en un futuro este tutorial, podeis descargar el .fla completo si quereis: