Share
Dos veces al mes, volvemos a visitar algunas de las publicaciones favoritas de nuestros lectores de toda la historia de Activetuts +. Este tutorial se publicó por primera vez en agosto de 2009..
En este tutorial, crearemos una aplicación de dibujo con funciones básicas y una interfaz fácil de usar. ¿Te sientes artístico? Entonces vamos?
Esta aplicación contará con una serie de herramientas como lápiz, borrador, herramienta de texto y también la posibilidad de guardar su dibujo en formato png utilizando el codificador PNG de Adobe..
Abra Flash y cree un nuevo archivo Flash (ActionScript 3).
Establezca el tamaño del escenario en 600x350px y la velocidad de cuadro en 25fps.
Dibuje un rectángulo blanco de 600x290px y conviértalo a MovieClip. Establezca su nombre de instancia en "tablero" y alinéelo con la esquina superior izquierda del escenario.
Esta será la zona en la que podremos dibujar..
Cree un rectángulo de 600px de ancho 60px de alto gris (#DFDFDF) y alinéelo con el fondo del escenario. Este será nuestro fondo para el Panel de Herramientas..
No voy a cubrir la creación de los íconos de herramientas, ya que esa no es la intención del turorial, aún así, puedes ver cómo se hacen en el archivo Fla incluido en la Fuente..
Como se puede ver en la imagen, usaremos dos iconos, uno en tono gris y el otro en color..
Convierta el icono del lápiz gris en un botón (F8) y asígnele el nombre "pencilTool", haga doble clic para editarlo y agregue un fotograma clave (F6) en el estado "sobre". Aquí es donde vamos a poner la versión en color del icono..
Por último, agregue otro fotograma clave en el estado de "éxito" y dibuje un cuadrado de 30x30 px para que actúe como el área de acceso del botón.
Repita este proceso con todos los íconos de herramientas, no olvide darles los nombres de instancia correctos (eraserTool, textTool, saveButton, clearTool).
Para mostrar el ícono de la herramienta activa, usaremos la versión en color del ícono y lo colocaremos en la misma posición del botón que creamos anteriormente. Los nombres de las instancias serán "lápiz", "borrador" y "texto".
Ocultaremos estos íconos más tarde usando ActionScript.
Cuando usamos la opción de guardar, vamos a mostrar un mensaje de "guardar con éxito".
Cree un rectángulo negro de 600x350px con un 50% de alfa para usar como fondo.
Agregue un rectángulo negro redondeado en el centro con el ícono del botón Guardar y un texto que indica que se ha completado la operación de guardar.
Cree un botón de cierre y alinéelo en la esquina superior izquierda del rectángulo redondeado, asígnele el nombre "closeBtn". Como puede imaginar, este botón cerrará el cuadro de diálogo Guardar..
Convierta todos los elementos en un solo clip de película y marque la casilla de verificación "Exportar para ActionScript". Establezca el campo de texto de la Clase en "GuardarDialog".
Crearemos una instancia de esta clase cuando el usuario presione el botón Guardar y se complete el proceso de guardar..
El panel Tamaño es el área donde puede cambiar el tamaño de la herramienta de lápiz, borrador y texto. Puedes hacerlo haciendo clic en el área del panel o en el óvalo dentro de él..
Seleccione la Herramienta primitiva de rectángulo, establezca el radio de la esquina en 4 y cree un rectángulo #EFEFEF 80x50px. Conviértalo a MovieClip y llámelo "sizePanel".
Abra el panel Filtros y agregue una Sombra paralela con los siguientes valores:
Ahora use la herramienta Oval para crear un círculo negro de 5x5px y céntrelo en el Panel de Tamaño, conviértalo a MovieClip y configure su nombre de instancia en "shapeSize".
Crearemos una paleta de colores predeterminada en lugar de usar el Componente del selector de color..
Cree un círculo de 22x22 píxeles con la herramienta Oval, configure su color en #EEEEEE y conviértalo a MovieClip. Agregue el mismo filtro de sombra que usamos en el panel Tamaño.
Dibuja un segundo círculo de 16x16px y usa negro para el color esta vez. Centre los círculos y repita este proceso cambiando el color del último círculo a lo siguiente:
Alinéelos para terminar con algo como esto:
Convierta todos los colores en un solo clip de película, asígnele el nombre de "colores" y asegúrese de establecer el punto de registro en la parte superior izquierda, ya que obtendremos datos de píxeles mediante la clase de mapa de bits..
Para utilizar la función Guardar, necesitaremos el codificador Adobe PNG, que forma parte de as3corelib, que puede encontrar en Google Code..
Para usar esta clase fuera del paquete que viene como predeterminado, necesitamos cambiar una línea. Abra el archivo PNGEncoder.as y cambie la línea "package com.adobe?" A solo "package". Esto nos permitirá llamar a la clase en el directorio donde está el archivo Fla.
Una sola clase manejará esta aplicación. Abra el Panel de propiedades en el archivo Fla y configure la Clase de documento como "Principal".
Cree un nuevo documento ActionScript y guárdelo como "Main.as" en el mismo directorio donde se encuentra el archivo Fla.
Estas son las clases que vamos a necesitar en esta aplicación. Recuerde consultar la Ayuda de Flash (F1) si no está seguro de una clase específica.
paquete import PNGEncoder; importar flash.display.MovieClip; importar flash.display.Shape; importar flash.display.DisplayObject; importar flash.text.TextField; importar flash.text.TextFormat; importar flash.text.TextFieldType; importar flash.text.TextFieldAutoSize; importar flash.display.BitmapData; importar flash.geom.ColorTransform; import flash.events.MouseEvent; import flash.events.Event; import flash.utils.ByteArray; importar flash.net.FileReference;
Estamos extendiendo la clase MovieClip ya que usamos las propiedades y métodos específicos de esta clase..
La clase pública Main extiende MovieClip
Estas son las variables que usaremos. Todos están explicados en el código de comentarios..
/ * La forma de la herramienta Lápiz, todo lo dibujado con esta herramienta y la herramienta de borrador se almacena dentro de board.pencilDraw * / var pencilDraw: Shape = new Shape (); / * Formato de texto * / var textformat: TextFormat = new TextFormat (); / * Colors * / var colorsBmd: BitmapData; // Usaremos estos datos de mapa de bits para obtener el valor RGB de píxeles cuando se haga clic en var pixelValue: uint; var activeColor: uint = 0x000000; // Este es el color actual en uso, mostrado por el shapeSize MC / * Guardar instancia de diálogo * / var saveDialog: SaveDialog; / * Var activo, para comprobar qué herramienta está activa * / var active: String; / * Color del tamaño de la forma * / var ct: ColorTransform = new ColorTransform ();
La función principal se encargará de configurar el Formato de texto de la Herramienta de texto, convirtiendo el Clips de película de colores en Datos de mapa de bits para que podamos extraer el Valor RGB de píxeles, agregando los oyentes y ocultando los iconos activos.
función pública Main (): void textformat.font = "Quicksand Bold Regular"; // Puedes usar cualquier fuente que te guste textformat.bold = true; textformat.size = 16; / * Creamos estas funciones más adelante * / convertToBMD (); addListeners (); / * Ocultar herramientas resaltadas * / pencil.visible = false; hideTools (borrador, txt);
Las acciones de las herramientas se dividen en cuatro funciones..
La primera establecerá la herramienta en su estado Activo, la segunda y la tercera manejarán los Eventos del Ratón (como Dibujo o Borrado) y la cuarta detendrá esos Eventos.
Estas funciones manejan la herramienta Lápiz, leen los comentarios en el código para una mejor comprensión.
El conjunto a la función activa:
función privada PencilTool (e: MouseEvent): void / * Salir de la herramienta activa * / quitActiveTool (); // Esta función se creará más adelante / * Establecer en Activo * / active = "Lápiz"; // Establece la variable activa en "Lápiz" / * Agrega los oyentes al MovieClip del tablero, para dibujar solo en él * / board.addEventListener (MouseEvent.MOUSE_DOWN, startPencilTool); board.addEventListener (MouseEvent.MOUSE_UP, stopPencilTool); / * Resaltar, establece el icono de la herramienta Lápiz a la versión en color y oculta cualquier otra herramienta * / highlightTool (lápiz); hideTools (borrador, txt); / * Establece la variable de color activa en función del valor de Transformación de color y utiliza ese color para shapeSize MovieClip * / ct.color = activeColor; shapeSize.transform.colorTransform = ct;
La función de inicio; esta función se llama cuando se presiona el clip de película del tablero.
función privada startPencilTool (e: MouseEvent): void pencilDraw = new Shape (); // Añadimos una nueva forma para dibujar siempre en la parte superior (en caso de texto o dibujos de borrador) board.addChild (pencilDraw); // Añadir esa forma al tablero MovieClip pencilDraw.graphics.moveTo (mouseX, mouseY); // Mueve la posición de dibujo a la posición del mouse pencilDraw.graphics.lineStyle (shapeSize.width, activeColor); // Establece el grosor de línea en el tamaño de ShapeSize MovieClip y establece su color en el panel de color activo actual. AdddEventListener (MouseEvent.MOUSE_MOVE) , drawPencilTool); // Agrega un oyente a la siguiente función
La función Dibujar; se llama cuando el usuario presiona el clip de película del tablero y mueve el mouse.
función privada drawPencilTool (e: MouseEvent): void pencilDraw.graphics.lineTo (mouseX, mouseY); // Dibuja una línea desde la posición actual del mouse hasta la posición del mouse movida
Función de parada, ejecutada cuando el usuario suelta el ratón..
función privada stopPencilTool (e: MouseEvent): void board.removeEventListener (MouseEvent.MOUSE_MOVE, drawPencilTool); // Detiene el dibujo
La herramienta Borrador es bastante similar a la herramienta Lápiz, excepto que no usamos ningún otro color que no sea el blanco.
función privada EraserTool (e: MouseEvent): void / * Salir de la herramienta activa * / quitActiveTool (); / * Establecer en Activo * / activo = "Borrador"; / * Listeners * / board.addEventListener (MouseEvent.MOUSE_DOWN, startEraserTool); board.addEventListener (MouseEvent.MOUSE_UP, stopEraserTool); / * Resaltar * / highlightTool (borrador); hideTools (lápiz, txt); / * Usar color blanco * / ct.color = 0x000000; shapeSize.transform.colorTransform = ct; private function startEraserTool (e: MouseEvent): void pencilDraw = new Shape (); board.addChild (pencilDraw); pencilDraw.graphics.moveTo (mouseX, mouseY); pencilDraw.graphics.lineStyle (shapeSize.width, 0xFFFFFF); // White Color board.addEventListener (MouseEvent.MOUSE_MOVE, drawEraserTool); función privada drawEraserTool (e: MouseEvent): void pencilDraw.graphics.lineTo (mouseX, mouseY); function stopEraserTool (e: MouseEvent): void board.removeEventListener (MouseEvent.MOUSE_MOVE, drawEraserTool);
Como puede ver, el código es el mismo, excepto por los cambios de color blanco..
La herramienta de texto tiene solo dos funciones; uno a cargo de configurarlo como activo, y el otro para manejar la escritura del texto. Vamos a ver:
función privada TextTool (e: MouseEvent): void / * Salir de la herramienta activa * / quitActiveTool (); / * Establecer en Activo * / activo = "Texto"; / * Listener * / board.addEventListener (MouseEvent.MOUSE_UP, writeText); / * Resaltar * / highlightTool (txt); hideTools (lápiz, borrador); función privada writeText (e: MouseEvent): void / * Cree un nuevo objeto TextField, de esta manera no reemplazaremos las instancias anteriores * / var textfield = new TextField (); / * Establecer formatos, posición y enfoque * / textfield.type = TextFieldType.INPUT; textfield.autoSize = TextFieldAutoSize.LEFT; textfield.defaultTextFormat = textformat; textfield.textColor = activeColor; textfield.x = mouseX; textfield.y = mouseY; stage.focus = campo de texto; / * Agregar texto a la placa * / board.addChild (campo de texto);
Este fue fácil, recuerde que puede cambiar el tamaño y el color utilizando el ShapeSize y los Colors MovieClips..
La opción de guardar manejada por saveButton hará uso de la clase PNGEnconder de Adobe para guardar la obra de arte como un archivo PNG..
función privada export (): void var bmd: BitmapData = new BitmapData (600, 290); // Crea un nuevo BitmapData con el tamaño del tablero bmd.draw (board); // Dibuja el clip de película en un BitmapImage en el BitmapData var ba: ByteArray = PNGEncoder.encode (bmd); // Crea un ByteArray de BitmapData, codificado como PNG var file: FileReference = new FileReference (); // Crea una instancia de un nuevo objeto de referencia de archivo para manejar el archivo de guardar.addEventListener (Event.COMPLETE, saveSuccessful); // Agrega un nuevo oyente para escuchar cuando el archivo guardado está completo file.save (ba, "MyDrawing.png"); // Guarda la función privada ByteArray como PNG saveSuccessful (e: Event): void saveDialog = new SaveDialog (); // Crea una nueva instancia de SaveDialog Class addChild (saveDialog); // Agrega SaveDialog MovieClip al escenario saveDialog.closeBtn.addEventListener (MouseEvent.MOUSE_UP, closeSaveDialog); // Agrega un oyente al botón de cierre del cuadro de diálogo función privada closeSaveDialog (e: MouseEvent): void removeChild (saveDialog) ; // Elimina el diálogo de la función privada del escenario guardar (e: MouseEvent): void export (); // Llama a la función de exportación para comenzar el proceso de guardado
La herramienta Borrar agregará una pantalla blanca delante de todos los elementos para dejar el tablero listo para dibujar nuevamente.
función privada clearBoard (e: MouseEvent): void / * Crear un rectángulo blanco encima de todo * / var blank: Shape = new Shape (); blank.graphics.beginFill (0xFFFFFF); blank.graphics.drawRect (0, 0, board.width, board.height); blank.graphics.endFill (); board.addChild (en blanco);
Para obtener el valor de los colores que estamos usando en el MovieClip de colores, lo convertimos en un objeto BitmapData y usamos el método getPixel para obtener el valor RGB del píxel al que se hizo clic..
función privada convertToBMD (): void colorsBmd = new BitmapData (colors.width, colors.height); colorsBmd.draw (colors); la función privada ChooseColor (e: MouseEvent): void pixelValue = colorsBmd.getPixel (colors.mouseX, colors.mouseY); // Obtiene el valor RGB del píxel cliqueado activeColor = pixelValue; / * Use un objeto ColorTransform para cambiar el color de ShapeSize MovieClip * / ct.color = activeColor; shapeSize.transform.colorTransform = ct;
Agregaremos el escucha de ChooseColor en la función addListeners más adelante en el código.
Anteriormente, declaramos una variable para configurar la herramienta activa o actual en uso, y llamamos a esta función para eliminar a los oyentes correspondientes para tener una sola herramienta activa.
Básicamente, la función verifica la variable "activa" en un bucle de conmutación, luego, dependiendo de su valor, elimina los oyentes que tiene..
función privada quitActiveTool (): void switch (active) case "Pencil": board.removeEventListener (MouseEvent.MOUSE_DOWN, startPencilTool); board.removeEventListener (MouseEvent.MOUSE_UP, stopPencilTool); caso "Eraser": board.removeEventListener (MouseEvent.MOUSE_DOWN, startEraserTool); board.removeEventListener (MouseEvent.MOUSE_UP, stopEraserTool); caso "Texto": board.removeEventListener (MouseEvent.MOUSE_UP, writeText); defecto :
También debemos resaltar la herramienta activa y ocultar las otras:
función privada highlightTool (herramienta: DisplayObject): void tool.visible = true; // Destaca la herramienta en el parámetro / * Oculta las herramientas en los parámetros * / private function hideTools (tool1: DisplayObject, tool2: DisplayObject): void tool1.visible = false; herramienta2.visible = falso;
Hacemos clic en el panel Tamaño o el clip de película ShapeSize para cambiar el tamaño de la herramienta Lápiz, Borrador y Texto. El tamaño se cambia en intervalos de 5 y se restablece cuando el tamaño es mayor o igual a 50. Echa un vistazo al código:
función privada changeShapeSize (e: MouseEvent): void if (shapeSize.width> = 50) shapeSize.width = 1; shapeSize.height = 1; / * TextFormat * / textformat.size = 16; else shapeSize.width + = 5; shapeSize.height = shapeSize.width; / * TextFormat * / textformat.size + = 5;
Una función para sumar todos los oyentes..
función privada addListeners (): void pencilTool.addEventListener (MouseEvent.MOUSE_UP, PencilTool); eraserTool.addEventListener (MouseEvent.MOUSE_UP, EraserTool); textTool.addEventListener (MouseEvent.MOUSE_UP, TextTool); saveButton.addEventListener (MouseEvent.MOUSE_UP, guardar); clearTool.addEventListener (MouseEvent.MOUSE_UP, clearBoard); colors.addEventListener (MouseEvent.MOUSE_UP, chooseColor); sizePanel.addEventListener (MouseEvent.MOUSE_UP, changeShapeSize); shapeSize.addEventListener (MouseEvent.MOUSE_UP, changeShapeSize);
Pruebe su aplicación presionando cmd + return y verifique si todo funciona como se esperaba.
Usa todas las herramientas, colores y funciones y comienza a dibujar tu escena.!
Esta película Flash se puede adaptar fácilmente como una aplicación de dibujo para niños, tiene una interfaz de usuario amigable y herramientas básicas que pueden enseñar cómo funciona el mouse mientras se divierte en el proceso..
También puede explorar el resto de as3corelib y leer su documentación para conocer algunas características nuevas de ActionScript..
Gracias por leer!
Accentsconagua