21 de octubre de 2007

¿Por qué no he escrito post esta semana?

Bueno, pues quería aclararos por qué no he escrito post durante esta semana.

Aparte de que he tenido un montón de exámenes durante esta semana, ha habido un problema entre jazztel y mi ordenador, por lo que la máxima duración de una conexión a internet ha sido de algo así como 30 segundos.

Después de intentar postear esto varias veces seguidas, al final, lo he conseguido.

Tengo casi finalizados un par de tutoriales, en cuanto vuelva a estar "operativa" la red de mi casa los posteo.

Un Saludo

13 de octubre de 2007

Tutorial Flash Paint Apliccation (II)

Flash Logo


Primera parte del tutorial.

Continuamos con la segunda parte del tutorial de la creación de una aplicación sencilla de dibujo en Flash.

Segunda Parte.

Aquí programaremos el AS para el movieClip fps:


var h = 1;

this.onEnterFrame = function() {

if (_root.borrar_selected) {

h += 1;

if (h>=10) {

this._alpha -= 5;

if (this._alpha<=0) {

this._visible = false;

removeMovieClip(this);

h = 1;

}

}

} else if (this._x>=550 || this._y>=270 || this._x<=0 || this._y<=0 || _root.svc) {

h += 1;

if (h>=10) {

this._alpha -= 5;

if (this._alpha<=0) {

this._visible = false;

removeMovieClip(this);

h = 1;

}

}

}

};


Explicación:

var h = 1;
Declaración de la variable "h" con el valor 1.

this.onEnterFrame = function() {
Con this, se refiere a la instancia del propio clip de película cuando sea attacheada en el escenario. Con onEnterFrame quiere decir que la función siguiente se ejecutará un número de veces igual al número de fps (fotogramas por segundo) por cada segundo que se reproduzca la película.

if (_root.borrar_selected) {
Si la variable "borrar_selected" definida en en la raíz tiene como valor true hacer lo siguiente:

h += 1;
La variable que definimos antes aumenta en 1, esto es igual que "h ++".

if (h>=10) {
Esto es una condicional dentro de otra condicional. Dice que si "h" es mayor que o igual que 10, flash hace lo siguiente:

this._alpha -= 5;
Con this nos referimos a la instancia del propio clip de película cuando sea attacheada en el escenario, y con "_alpha -= 5" decimos que el _alpha de el mc baje en 5 x veces cada segundo (donde x son los fps de nuestra película).

if (this._alpha<=0) {
Otra condicional más. Significa que si el _alpha de nuestro mc es menor que o igual a 0, haz lo siguiente:

this._visible = false;
Hazlo invisible.

removeMovieClip(this);
Elimínalo del escenario.

h = 1;
La variable "h" vuelve a ser 1.

}
Se cierra el "if (this._alpha<=0) {"

}
Se cierra el "if (h>=10) {"

} else if (this._x>=550 || this._y>=270 || this._x<=0 || this._y<=0 || _root.svc) {

Se cierra el "if (_root.borrar_selected) {" y con el "else if" decimos que si la variable "borrar_selected" definida en la raíz no tiene el valor "true" (por lo tanto
tiene el valor "false") y su _x y _y se salen de las proporciones del cuadrado que dibujamos anteriormente en la línea de tiempo principal (Ese que dijimos que sería en el que el usuario podría dibujar) o si la variable "svc" definida en la raíz de la película (Esta es la variable que usábamos para definir la escritura flotante o la escritura normal) es true, hacer lo siguiente:

h += 1;
if (h>=10) {
this._alpha -= 5;
if (this._alpha<=0) {
this._visible = false;
removeMovieClip(this);
h = 1;
}
}
Usamos la función explicada anteriormente.

}
Esto cierra el "else if...."

};
Y esto, para finalizar cierra el "this.onEnterFrame..."

Ya está, si lo hicísteis bien os quedará algo así:

.FLA(Megaupload)
.FLA(MegaShares)

Primera parte del tutorial.

Un Saludo.

Tutorial Flash Paint Apliccation (I)

Flash Logo


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.

12 de octubre de 2007

Flash Paint Powa!

FlashPaint


Esta es una pequeña aplicación de dibujo de una sola línea en flash.

Flash Paint

Cómo hacer esto (Tutorial).

Un saludo