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