Tutorial FLASH - Tutorial para crear una sencilla aplicación de dibujo a mano alzada.

Versión Flash: MX y superiores   |   Compatible con ActionScript 1.0 y 2.0   |   Nivel: Medio   |   Hits: 84050

Lo habréis visto funcionar en infinidad de webs, ahora veréis que en realidad es muy fácil de hacer. Por supuesto esto es un ejemplo muy sencillo y con pocas posibilidades, sólo se puede dibujar y cambiar el grosor de la línea, podríamos seguir complicándolo para poder borrar, cambiar de color, rellenar... incluso utilizar diferentes pinceles, tipo aerógrafo, etc. Pero no nos precipitemos. Este es un tutorial con nivel Principiante, y lo importante es aprender su funcionamiento más básico.

COMO HACERLO.
Vamos a utilizar la API de dibujo del Flash, para trazar líneas. Se trata simplemente de trazar una línea de la posición anterior del ratón a la posición actual. Esto, repetido, va formando un dibujo.

Primero, creamos un movieClip vacío que contendrá el dibujo:
this.createEmptyMovieClip("dibujo", 1);

Asignamos un estilo a la línea que queremos dibujar:
dibujo.lineStyle(0, 0x000000, 100);
El primer parámetro es el grosor de la línea, en este ejemplo es 0 (la más fina). Incrementar este número aumenta el grosor.
El segundo parámetro es el color. En este ejemplo es negro (#000000). Se puede cambiar el color introduciendo su valor en hexadecimal.
El tercer parámetro es la transparencia (alpha). La hemos dejado opaca, pero bajando el valor, se irá haciendo transparente.

Lo siguiente es crear un botón que ocupe todo el área de dibujo (le hemos puesto el nombre de "btnDibujo"), y le asignaremos este código:
btnDibujo.onPress = function() {
dibujo.moveTo(_root._xmouse, _root._ymouse);
_root.onMouseMove = function() {
dibujo.lineTo(_root._xmouse, _root._ymouse);
};
};
Al presionar el botón, se configura el primer punto. Cada vez que el ratón cambie de posición, se trazará una línea desde la posicón anterior hasta la actual.
Al dejar de presionar el botón, tenemos que eliminar la función para que no siga dibujando:
btnDibujo.onRelease = function() {
delete _root.onMouseMove;
};

Con esto es suficiente, ya podemos dibujar. Sólo queda añadir unos pequeños detalles, como permitir cambiar el grosor de la línea mediante unos botones y sustituir el puntero por una imagen propia (en este caso, un lápiz), para darle más realismo. Esto lo podéis ver en fla de ejemplo que tenemos disponible para descargar.

Descárgate este ejemplo para comprenderlo mejor: ejemplo_dibujo.fla

Tutoriales Flash relacionados

Exportar clips a JPEG o PNG en tiempo de ejecución. (Experimento)