Como hacer una pizarra en Actionscript 3.0

Como hacer una pizarra en Actionscript 3.0

Etiquetas: Shape lineStyle moveTo clear removeEventListener doubleClickEnabled

Imagen en reemplazo de flash

Uno de los ejercicios típicos que se suelen hacer al comenzar a programar en Actionscript, es una pizarra.

En Actionscript 3.0 tenenmos que utilizar la clase Graphics. Podemos pintar dentro de cualquier objeto de visualización que tenga el atributo graphics (Shape, Sprite, MovieClip).

Lo primero que tenemos que hacer es definir el estilo de linea (color,grosor, etc) que vamos a utilizar en nuestro objeto. En este ejemplo vamos a dibujar en un Shape definido por la variable pizarra, por lo que podemos definir su estilo de linea asi:

  1. pizarra.graphics.lineStyle(10,0x000000);

Ahora tenemos el pincel en (0,0), con un grosor de 10 y color negro. Si queremos pintar una linea desde (100,100) hasta (200,200), tenemos que mover el pincel hasta (100,100). Para ello usamos la función moveTo(x,y);

  1. pizarra.graphics.moveTo(100,100);

Y ahora dibujamos la linea con lineTo:

  1. pizarra.graphics.lineTo(200,200);

Por último, si queremos borrar lo dibujado, utilizamos la función clear():

  1. pizarra.graphics.clear();

Hay que tener en cuenta que esta función borra además las definiciones de estilo de linea y relleno, por lo que antes de seguir dibujando debemos volver a hacerlas.


  1. package{
  2. 	//Importo las clases necesarias
  3. 	import flash.display.Sprite;
  4. 	import flash.display.Shape;
  5. 	import flash.events.Event;
  6. 	import flash.events.MouseEvent;
  7.  
  8. 	public class PizarraBasica extends Sprite{
  9.  
  10. 		//Creo una variable de tipo Shape, que va a contener los dibujos
  11. 		public var pizarra:Shape;
  12.  
  13. 		public function PizarraBasica():void{
  14. 			pizarra = new Shape();
  15. 			//Defino como vá a ser el tipo de lineas en "pizarra".
  16. 			//En este caso seria grosor 10, y color negro
  17. 			pizarra.graphics.lineStyle(10,0x000000);
  18. 			addChild(pizarra);
  19. 			//Añado los eventos al escenario
  20. 			stage.doubleClickEnabled = true;
  21. 			stage.addEventListener(MouseEvent.MOUSE_DOWN,siPintar);
  22. 			stage.addEventListener(MouseEvent.MOUSE_UP,noPintar);
  23. 			stage.addEventListener(MouseEvent.MOUSE_OUT,noPintar);
  24. 			stage.addEventListener(MouseEvent.DOUBLE_CLICK,borrar);
  25. 		}
  26.  
  27. 		private function siPintar(e:Event):void{
  28. 			//Cuando el usuario presiona el botón izquierdo, el puntero debe empezar a pintar. 
  29. 			//El punto de inicio de ese nuevo trazo, debe ser el del puntero del ratón, por lo que 
  30. 			//muevo la posición del dibujo con moveTo
  31. 			pizarra.graphics.moveTo(mouseX,mouseY);
  32. 			//Añado un listener para que se pinten lineas siguiendo al puntero
  33. 			addEventListener(Event.ENTER_FRAME,pintar);
  34. 		}
  35.  
  36. 		private function noPintar(e:Event):void{
  37. 			//Al soltar el ratón, elimino el evento para pintar lineas
  38. 			removeEventListener(Event.ENTER_FRAME,pintar);
  39. 		}
  40.  
  41. 		private function pintar(e:Event):void{
  42. 			//La función lineTo pinta una linea hasta el punto (x,y)
  43. 			pizarra.graphics.lineTo(mouseX,mouseY);
  44. 		}
  45.  
  46. 		private function borrar(e:Event):void{
  47. 			//La función clear borra lo que se haya dibujado en el objeto graphics, y restablece
  48. 			//la configuración de relleno y estilo de linea. 
  49. 			pizarra.graphics.clear();
  50. 			pizarra.graphics.lineStyle(10,0x000000);
  51. 		}
  52.  
  53. 	}
  54.  
  55. }

Descargar archivos

Comentarios
    • Autor
    • esedeerre
    Yo también habría utilizado MOUSE_MOVE, pero supongo que la gente esta más "familiarizada" con eventos ENTERFRAME y esto les será mas fácil de entender.
    Otra de las cosas que haría sería crear un nuevo Shape en cada MOUSE_DOWN y dibujar dentro de él.
    Lo que no habia pensado era lo de pintar "sólo" trazos de una longitud n, que es muy fácil de implementar y seguro que ahorra rendimiento.
    • Autor
    • L
    ... que guapo es usted senor! :P k.L
    • Autor
    • feresr
    muy buenos tips.. para aclararnos a los que no tenemos una idea de como programar en AS3.0.. un par de cosas q no tengo claras (soy nuevo nuevo Xd).. que es addChild?--
    • Autor
    • David
    PODRAIN CREAR UN VIDEO, EN LA CREACION DE LA PIZARRA ESTO DE TENER QUE ESTAR LEYENDO ES MUY COMPLICADO ESPECIALMENTE PARA LOS KE NUNCA HEMOS HECHO UNA :)
    • Autor
    • emilio
    Hola esedeerre, muchas gracias por tus tutoriales son geniales! En este tengo una pequeña duda; he creado la pizarra, le he puesto como nombre de instancia "pizarra", y luego he copiado el codigo y lo he pegado en el primer frame, me dice que hay un error dice; "1114: El atributo public sólo se puede utilizar dentro de un paquete. public class PizarraBasica extends Sprite{" Si me puedes ayudar te lo agradecería. Muchas gracias y un saludo.
    • Autor
    • emilio
    hola esedeerre, perdona pero es que no me había leído los tutoriales en orden, y no sabía trabajar con clases. Ahora ya está todo claro. Muchas gracias. Espero que sigas subiendo más sobre AS3. Están muy bien.
    • Autor
    • Veronica
    Hola, como harias para restringir el area del stage donde quieres dibujar?
    • Autor
    • Ruben Sandoval
    Hola Vero, con la coordenada de mouseX,mouseY =D le pones un if por aquí un if por haya y listo...
    • Autor
    • s4design
    Hola, alguien tiene idea de cómo se haría para guardar la imagen que se ha hecho en el servidor, sé como guardarla en tu pc pero no en el servidor. Saludos!
    • Autor
    • ceaped
    Buenas tardes Como se hace un borrador?, osea que no se borre todo sino lo que uno desee. Hay alguna forma de capturar el dibujo hecho y guardarse?, ya sea como un jpg Gracias
    • Autor
    • Leticia
    Hola! Leí el comentario de Verónica y tengo la misma duda. En tu respuesta a ella dice que se soluciona con unos if. Intento hacerlo y no me queda. Como podría hacerlo??
Dejar un comentario
Tu nombre (obligatorio):

E-mail (obligatorio, no se mostrará):

Web:

Comentario: