Advertisement
  1. Code
  2. Games

Crear una aplicación básica de dibujo en Flash

Scroll to top
Read Time: 12 min

Spanish (Español) translation by Esther (you can also view the original English article)

Dos veces al mes, revisamos algunas de las publicaciones favoritas de nuestros lectores a lo largo de 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...


Paso 1: Resumen

Esta aplicación contará con una serie de herramientas como el lápiz, la goma de borrar, la herramienta de texto, y también la posibilidad de guardar tu dibujo en formato png utilizando el codificador PNG de Adobe.


Paso 2: Configuración

Abra Flash y crea un nuevo archivo Flash (ActionScript 3).

Establece el tamaño del escenario en 600x350px y la velocidad de fotogramas en 25fps.

””””””

Paso 3: Tablero

Dibuja un rectángulo blanco de 600x290px y conviértelo en MovieClip. Establece su nombre de instancia como "board" y alinéalo en la parte superior izquierda del escenario.

Esta será la zona sobre la que podremos dibujar.


Paso 4: Panel de herramientas

Crea un rectángulo gris (#DFDF) de 600px de ancho y 60px de alto y alinéalo en la parte inferior del escenario. Este será nuestro fondo para el Panel de Herramientas.


Paso 5: Iconos de herramientas

No voy a cubrir la creación de los iconos de las herramientas ya que esa no es la intención del turorial, aun así, puedes ver cómo se hacen en el archivo Fla incluido en el Source.

Como puedes ver en la imagen, vamos a utilizar dos iconos, uno en tono gris y otro en color.

Convierte el icono del lápiz gris en un Botón (F8) y nómbralo "pencilTool", haz doble clic para editarlo y añade un KeyFrame (F6) en el estado "over". Aquí es donde vamos a poner la versión en color del icono.

Por último, añade otro KeyFrame en el estado "hit", y dibuja un cuadrado de 30x30px para que actúe como el área de hit del botón.

Repite este proceso con todos tus iconos de herramientas, no olvides darles los nombres de instancia correctos (eraserTool, textTool, saveButton, clearTool).

Para mostrar el icono de la herramienta activa, vamos a utilizar la versión en color del icono y colocarlo en la misma posición del botón que hemos creado antes. Los nombres de las instancias serán "lápiz", "borrador" y "texto".

Más adelante ocultaremos estos iconos utilizando ActionScript.


Paso 6: Guardar el diálogo

Cuando utilicemos la opción de guardar vamos a mostrar un mensaje de "guardar con éxito".

Crea un rectángulo negro de 600x350px con 50% de alfa para usarlo como fondo.

Añade un rectángulo negro redondeado en el centro con el icono del botón de guardado y algún texto que indique que el guardado se ha completado.

Crea un botón de cierre y alinéalo en la parte superior izquierda del rectángulo redondeado, llámalo "closeBtn". Como puedes imaginar, este botón cerrará el diálogo de guardar.

Convierte todos los elementos en un único MovieClip y marca la casilla "Exportar para ActionScript". Establece el campo de texto Clase como "SaveDialog".

Instanciaremos esta clase cuando el usuario pulse el SaveButton y se complete el guardado.


Paso 7: Tamaño del panel

El tamaño del panel es el área donde puedes cambiar el tamaño del lápiz, el borrador y la herramienta de texto. Puedes hacerlo haciendo clic en el área del panel o en el óvalo que hay dentro de él.

Selecciona la Herramienta Primitiva Rectángulo, establece el radio de la esquina en 4 y crea un rectángulo #EFEFEF 80x50px. Conviértelo en un MovieClip y nómbralo "sizePanel".

Abre el panel de Filtros y añade una Sombra Caída con los siguientes valores:

Ahora usa la Herramienta Oval para crear un círculo negro de 5x5px y céntralo en el Panel de Tamaño, conviértelo en MovieClip y establece su nombre de instancia como "shapeSize".


Paso 8: Colores por defecto

Crearemos una paleta de colores por defecto en lugar de utilizar el componente de selección de colores.

Crea un círculo de 22x22px usando la Herramienta Oval, establece su color a #EEEEEE y conviértelo en MovieClip. Añade el mismo filtro de sombra que usamos en el panel de tamaño.

Dibuja un segundo círculo de 16x16px y utiliza esta vez el color negro. Centra los círculos y repite este proceso cambiando el último color del círculo por el siguiente:

Alinearlos para terminar con algo así:

Convierte todos los colores a un solo MovieClip, nómbralo "colores" y asegúrate de establecer el Punto de Registro en la parte superior izquierda, ya que vamos a obtener datos de píxeles utilizando la Clase Bitmap.


Paso 9: Adobe PNG Encoder

Para utilizar la función Save necesitaremos el Adobe PNG Encoder que forma parte del as3corelib que puedes encontrar en Google Code.

Para utilizar esta clase fuera del paquete que viene por defecto, tenemos que cambiar una línea. Abre el archivo PNGEncoder.as y cambia la línea "package com.adobe..." por solo "package". Esto nos permitirá llamar a la clase en el directorio donde está el archivo Fla.


Paso 10: Clase principal

Una sola Clase manejará esta aplicación. Abre el Panel de Propiedades en el archivo Fla y establece la Clase de Documento como "Principal".

Crea un nuevo documento ActionScript y guárdalo como "Main.as" en el mismo directorio donde está el archivo Fla.


Paso 11: Importar las clases requeridas

Estas son las clases que vamos a necesitar en esta aplicación. Recuerda consultar la ayuda de Flash (F1) si no estás seguro de una clase específica.


Paso 12: Ampliar la clase

Estamos extendiendo la clase MovieClip ya que utilizamos las propiedades y métodos específicos de esta clase.


Paso 13: Variables

Estas son las variables que utilizaremos. Todas están explicadas en los comentarios del código.


Paso 14: Función principal

La función principal se encargará de establecer el Formato de Texto de la Herramienta de Texto, convertir el MovieClip de Colores a Datos de Mapa de Bits para que podamos extraer el Valor RGB de los Píxeles, añadir los oyentes y ocultar los iconos activos.


Paso 15: Acciones de las herramientas

Las acciones de las herramientas se dividen en cuatro funciones.

El primero pondrá la herramienta en su estado Activo, el segundo y el tercero manejarán los Eventos del Ratón (como Dibujar o Borrar) y el cuarto detendrá esos Eventos.


Paso 16: Herramienta Lápiz

Estas funciones manejan la Herramienta Lápiz, lee los comentarios en el código para una mejor comprensión.

La función de fijar en activo:

La función de inicio; esta función se llama cuando se pulsa el MovieClip de la Junta.

La función Draw; llamada cuando el usuario presiona el MovieClip de la Junta y mueve el ratón.

Función de parada, ejecutada cuando el usuario suelta el ratón.


Paso 17: Herramienta Borrador

La Herramienta Borrador es prácticamente igual que la Herramienta Lápiz, excepto que no utilizamos ningún otro color que no sea el blanco.

Como puedes ver, el código es el mismo excepto por los cambios de color blanco.


Paso 18: Herramienta texto

La Herramienta Texto tiene solo dos funciones; una encargada de ponerla en activo, y la otra para manejar la escritura del texto. Echemos un vistazo:

Esta fue fácil, recuerda que puedes cambiar el tamaño y el color usando el shapeSize y el Colors MovieClips.


Paso 19: Opción Guardar

La opción de guardar manejada por el saveButton hará uso de la clase PNGEnconder de Adobe para guardar la obra de arte como un archivo PNG.


Paso 20: Herramienta Borrar

La Herramienta Borrar añadirá una pantalla blanca delante de todos los elementos para dejar el tablero listo para volver a dibujar.


Paso 21: Obtener el valor de los colores

Para obtener el valor de los colores que estamos utilizando en el MovieClip Colors, lo convertimos en un objeto BitmapData y utilizamos el método getPixel para obtener el valor RGB del píxel pulsado.

Añadiremos el listener de chooseColor en la función addListeners más adelante en el código.


Paso 22: Herramienta Activa

Anteriormente, declaramos una variable para establecer la herramienta activa o actual en uso, y llamamos a esta función para eliminar los oyentes correspondientes con el fin de tener solo una herramienta activa.

Básicamente, la función comprueba la variable "activa" en un bucle de conmutación, y luego, dependiendo de su valor, elimina los oyentes que tiene.

También tenemos que resaltar la herramienta activa y ocultar las demás:


Paso 23: Tamaño de la forma

Hacemos clic en el Panel de Tamaño o en el MovieClip ShapeSize para cambiar el tamaño del Lápiz, el Borrador y la Herramienta 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:


Paso 24: Añadir oyentes

Una función para añadir todos los oyentes.


Paso 25: Prueba

Prueba tu aplicación pulsando cmd+return y comprueba si todo funciona como se espera.

Utiliza todas las herramientas, colores y funciones y empieza a dibujar tu escena.


Conclusión

Esta película Flash puede ser fácilmente adaptada 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 ratón mientras se divierten en el proceso.

También puedes explorar el resto de as3corelib y leer su documentación para aprender algunas nuevas características de ActionScript.

¡Gracias por leer!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.