Leandono´s Blog - Creación de una paleta de dibujo

Creación de una paleta de dibujo

domingo, 30 de julio de 2006

La idea es crear una paleta de dibujo, (como se muestra a continuación) en la cual podemos elegir los colores y ancho del trazo, todo hecho con Actionscript:

Por lo tanto, lo primero que haremos será abrir el panel de acciones...

Escribimos el siguiente código (en los comentarios se explica que és cada trozo). Parece largo y tedioso pero si se dan cuenta, la mitad es código repetido que se usa crear los 9 botones

Código:

    //Defino el ancho del trazo inicial
var ancho_trazo:Number = 5;
//Esta función será invocada al hacer click para dibujar
function dibujar() {
 trazo.moveTo(_xmouse, _ymouse);
 trazo.onMouseMove = function() {
  this.lineStyle(ancho_trazo, color_trazo, 100);
  this.lineTo(_xmouse, _ymouse);
  updateAfterEvent();
 };
 trazo.onMouseUp = function() {
  delete this.onMouseMove;
 };
}
//Creamos el trazo
var trazo:MovieClip = this.createEmptyMovieClip("trazo", this.getNextHighestDepth());
//Al hacer click invocamos la función dibujar
trazo.onMouseDown = dibujar;
/*--------------------------------------*/
//Función genérica para crear los botones
function crearboton(nombre, profundidad, x, y) {
 var btn = this.createEmptyMovieClip(nombre, profundidad);
 btn.lineStyle(ancho_boton, color_boton, 100);
 btn.moveTo(0, 0);
 btn.lineTo(0.2, 0);
 btn._x = x;
 btn._y = y;
}
/*-----------------------*/
//Aqui vamos creando los botones especificando sus parámetros
crearboton("negro", 1, 10, 10, ancho_boton=15, color_boton=0x000000);
crearboton("gris", 2, 10, 30, ancho_boton=15, color_boton=0xCCCCCC);
crearboton("rojo", 3, 10, 50, ancho_boton=15, color_boton=0xFF0000);
crearboton("azul", 4, 10, 70, ancho_boton=15, color_boton=0x0000FF);
crearboton("verde", 5, 10, 90, ancho_boton=15, color_boton=0x33CC00);
//-----------------------//
crearboton("ancho_1", 6, 10, 263, ancho_boton=5, 10, color_boton=0x000000);
crearboton("ancho_2", 7, 10, 273, ancho_boton=9, 10, color_boton=0x000000);
crearboton("ancho_3", 8, 10, 285, ancho_boton=12, 10, color_boton=0x000000);
crearboton("ancho_4", 9, 10, 300, ancho_boton=15, 10, color_boton=0x000000);
/*----------------------*/
//Aqui van las acciones al presionar los botones
/*--Colores--*/
rojo.onRelease = function() {
 color_trazo = 0xFF0000;
};
azul.onRelease = function() {
 color_trazo = 0x0000FF;
};
verde.onRelease = function() {
 color_trazo = 0x33CC00;
};
negro.onRelease = function() {
 color_trazo = 0x000000;
};
gris.onRelease = function() {
 color_trazo = 0xCCCCCC;
};
/*---Trazos---*/
ancho_1.onRelease = function() {
 ancho_trazo = 5;
};
ancho_2.onRelease = function() {
 ancho_trazo = 9;
};
ancho_3.onRelease = function() {
 ancho_trazo = 12;
};
ancho_4.onRelease = function() {
 ancho_trazo = 20;
};

Lo primero que se hace es crear las funciones para realizar el trazo y que este se visualice al mantener apretado el botón del mouse. Además tenemos las variables color_trazo y ancho_trazo, las cuales irán cambiando al presionar los distintos botones de la paleta.

Luego creamos los botones. Para ello se utiliza una función genérica, la cual realiza botones circulares. Después se crean los botones especificando el nombre, el color, el ancho, la posición y la profundidad. Finalmente a cada botón se la asigna una función, la cual dará un valor a las variables ancho_trazo y color_trazo. Y eso es todo :D

Ejemplos utilizados

Tags: tutorial flash

Leandono's Blog

Artículos Relacionados:

Suscribirse por feed

Suscribirse por e-mail

Categorías

Nube de tags

Sitios Recomendados