Crear paint en flash

Primera Parte.

En este tutorial aprenderemos a hacer una aplicación de dibujo sencilla como ésta.
Es bastante fácil de hacer, cualquiera que tenga Adobe Flash 8 o superior lo puede hacer. Para explicarlo usaré un método line-to-line en el que iré explicando línea a línea del código.

Comenzemos:

Creamos un nuevo documento con las medidas óptimas para cada uno, en mi caso fueron de 550x450 píxeles (medida por defecto de photoshop).

Dibujamos un cuadrado que será el sitio donde el usuario podrá dibujar. Yo lo dibujé de 550x271 píxeles y lo situé en x:0 y:0.

Creamos 3 botones, el primero es el de borrar, y le ponéis el nombre de instancia "borrar". El segundo es el de alternar entre escritura normal y flotante (que se borra después de que escribas algo), con el nombre de instancia "toggled". El tercer botón debe ocupar todo el escenario y debe ser invisible, por lo que sólo debe tener fotogramas con contenido en el apartado "zona activa", lo demás deben de ser fotogramas vacíos. A este último botón le ponemos el nombre de instancia de "btn".

Ahora, creamos un nuevo clip de película en el que haya un punto negro pequeño en el centro. Lo vinculamos a AS con nombre de identificador: "fps".

Aquí tenemos el AS del frame principal:


stop();

//Declaración de variables

var i:Number = 0;

var svc:Boolean = false;

var htg:Boolean = false;

var borrar_selected:Boolean = false;

var onChange:Boolean = true

//Función para dibujar

function onDrawing(temp) {

_root.onMouseMove = function() {

if (this.k) {

xpos = _xmouse;

ypos = _ymouse;

temp += 1;

this.attachMovie("fps","fps"+temp,temp,{_x:xpos, _y:ypos});

}

updateAfterEvent();

};

}

//Btn era el mc que ocupaba todo el escenario

btn.onPress = function() {

k = true;

onDrawing(i);

};

btn.onRelease = btn.onReleaseOutside=function () {

k = false;

};

//Toggled era el botón de Escritura Flotante~Escritura normal

toggled.onRelease = function() {

if (htg) {

svc = false;

htg = false;

} else {

svc = true;

htg = true;

}

};

//Borrar era el botón para borrar.

borrar.onPress = function() {

borrar_selected = true;

};

borrar.onRelease = function() {

borrar_selected = false;

};


Explicación:

Lo primero que tenemos es la declaración de variables que luego usaremos.
Ahora viene la función onDrawing

function onDrawing(temp) {

_root.onMouseMove = function() {

if (this.k) {

xpos = _xmouse;

ypos = _ymouse;

temp += 1;

this.attachMovie("fps","fps"+temp,temp,{_x:xpos, _y:ypos});

}

updateAfterEvent();

};

}


Esta función, lo que hace es lo siguiente:

function onDrawing(temp) {
Función onDrawing(variable privada de la función temp) {

_root.onMouseMove = function() {
Esto significa que la función siguiente se ejecutará cada vez que el mouse se mueva dentro de la raíz principal.

if (this.k) {
Si _root.k es true.

xpos = _xmouse
ypos = _ymouse
Las variables xpos e ypos toman las coordenadas x e y del mouse.

temp += 1
Esto es igual que temp ++. La variable temp cambia de valor en un número mayor al anterior en una unidad.

this.attachMovie("fps","fps"+temp,temp,{_x:xpos, _y:ypos})
Con this nos referimos a _root. Por lo tanto, la raíz de nuestra peli atachea el MovieClip con el identificador fps, le da el nombre de instancia fps+temp (osease, un nombre de instancia distinto cada vez), con una profundidad temp (cada vez mayor) y con un _x y _y igual al del mouse.

updateAfterEvent();
Se actualiza después de un evento de ratón.

Ahora tenemos el btn.onPress y btn.onRelease:

btn.onPress = function() {

k = true;

onDrawing(i);

};

btn.onRelease = btn.onReleaseOutside = function () {

k = false;

};

btn.onPress = function() {
Cuando sobre btn (esto es el movieClip que ocupaba todo el escenario) se presione el botón izquierdo del ratón sin soltarlo, haremos la siguiente función:

k = true;
Variable Booleana "k" es true. Si recordamos, la variable "k" la utilizábamos en la función onDrawing(temp).

onDrawing(i);
Función onDrawing() anteriormente descrita. La función onDrawing() inicialmente tenía como parámetro la variable "temp" (onDrawing(temp)). Al escribir onDrawing(i) en toda la función donde había una variable "temp", cambia y se vuelve a la variable "i" con el valor de "i" que lo definimos al principio como 0.

};
Fin de btn.onPress

btn.onRelease = btn.onReleaseOutside = function () {
Esto significa que cuando btn sea presionado y soltado sobre el mismo btn, o que sea presionado y soltado fuera del propio btn, hagamos la siguiente función:

k = false;
La variable "k" la usábamos en la función onDrawing(temp). Ahora la función no se ejecutará puesto que al principio de esta función hay un "if" que dice que sólo si la variable "k" es true, se ejecutará la función.
Con esta línea cerramos la función.

};
Fin de btn.onRelease

Primera parte del tutorial.

Segunda parte del tutorial.

Un Saludo.