Botón "Mantener Apretado"

Señores y señoras, eh aquí mi primer tutorial, es muy básico, vamos a explicar como hacer el famoso "mantener apretado" en Flash, no es algo muy complicado peeeeeeeeeeeero a alguien le va a servir. Algunos dirán "pero me c@#$ria, para que quiero hacer esto si existen controles prediseñados?" y la repuesta esta en la pregunta: "... prediseñados.." no pueden cambiar su apariencia ni su comportamiento, al menos no fácilmente, y conociendo el comportamiento se va a hacer mucho mas fácil adaptarlos a gusto.

Empecemos, voy a intentar explicar todo como para que lo entienda alguien que nunca en su vida uso Flash (perdón a los experimentado, se les va a hacer algo tedioso):
e
0 . Creamos un botón, para eso vamos a tener que mostrar la biblioteca, vamos a Ventana en el menú superior (donde esta Archivo... Editar... Ver.. etc) y tildamos la opción Biblioteca, sino, si les da fiaca, pueden apretar Ctrl+L y listo, aparece. Una vez que vemos la biblioteca, apretamos en donde tiene el icono del Nuevo símbolo.... en la esquina inferior izquierda y va a aparecer una ventanita con los campos Nombre y Tipo a los que nombramos Mantener1 y seleccionamos el tipo Botón como en la imagen:


hacemos click en aceptar y no va a abrir la el editor de MovieClip para botones. en el que tenemos 4 fotogramas: Reposo, Sobre, Presionado y Zona Activa:



Ok, a partir de acá vamos a ir mas rápido. Seleccionamos el primer fotograma y dibujamos un triángulo como este:


No importa que sea igual, lo único que importa es que tenga esa forma y que apúnte a la derecha.
Ahora una vez que quedo lindo, agregamos otro fotograma clave apretando F6 nos va a crear un fotograma exactamente igual al primero pero sin acciones (en este caso no tiene acciones, pero las tuviera tampoco las copiaría al nuevo fotograma)y le cambiamos un color como mas les guste.
para hacer el tercer fotograma repitan lo del párrafo anterior.

Los botones que yo hice fueron:


El ultimo fotograma no importa.

Ahora nos vamos a la escena haciendo click en ... si adivinaron, en Escena:


Bien ya tenemos el Botón ! pero por desgracia es solo el comienzo.

1. Ahora si empecemos. Una vez en la escena arrastramos el botón desde la biblioteca hasta cualquier parte del escenario. Lo seleccionamos y apretamos F9 y walla! apareció el Panel de Acciones:


Empezamos con el código, vamos a intentar explicar lo que vamos escribiendo.
Lo primero que vamos a escribir es:

on (press){
derecha = function {
//Lo que ustedes quieran hacer
}
}

Para los super principiantes esto dice cunado (on) apretemos el botón (press)"declara" la función derecha, en donde dice "//Lo que ustedes quieran hacer" no va a ser tomado por Flash, en su lugar va el cuerpo de la función, es decir "lo que va a hacer" la función.

Bien, ahora agregamos lo siguiente:

on (release){
}

Esto es "cuando suelto el click del botón" hace tal cosa.Y por casi-ultimo agregamos esto:

on (dragOut) {
}

Que es "cunado intentemos arrastrar el botón" (puse "intentemos" porque no se va a mover de ahí)hasta acá me imagino que todo bien, pero nuestro botón todavía no hace nada. Cerremos la ventana de acciones por un momento y vamos a hacer un nuevo Clip de Película. Lo hacemos de la misma manera que creamos el botón pero en Tipo: seleccionamos Clip de Película un poco obvio no ? y ahí hacemos un cuadrado o un rectángulo y una vez hecho vamos al escenario y lo insertamos en el de manera que no se superponga con el botón.
Ahora vamos a ponerle el nombre al rectángulo, lo seleccionamos y en el panel de propiedades le ponemos un nombre bien original: cuadrado :D :



Seleccionemos el Botón y Volvamos al Panel de Acciones deberíamos tener algo como esto:

on (press) {
derecha = function () {
//Lo que ustedes quieran hacer
}
}
on (release) {
}
on (dragOut) {
}

Borramos //Lo que ustedes quieran hacer y en su lugar ponemos lo siguiente :

cuadrado._x +=5;

esto dice en idioma mortal: "cunado se presione sobre el botón mueve el cuadrado 5 pixels a la derecha"
Ya tenemos el botón con una acción pero todavía no hace nada, esto es porque el botón solo "declara" la función, no la ejecuta. para eso agregamos fuera del bloque de la función derecha pero dentro del bloque del on (press)(para los que no sepan nada un bloque es el espacio que comprende, en este caso, el cuerpo de la función es decir los {}) :

derecha();

La función debería haber quedado así:

on (press) {
derecha = function () {
cuadrado._x +=5;
};
derecha();
}
on (release) {

}
on (dragOut) {

}

A estas alturas aya deben querer que su Flash haga algo, bien ya lo hace para probar la película aprieta Ctrl+Enter y van a ver que cuando aprenten el botón la caja se va a mover a la derecha

A estas alturas deben decir: "este P@#$% me mintió, no anda el mantener apretado" a lo que yo digo: Paciencia por favor! ya llegamos.

Ahora si, vamos al esqueleto de "mantener apretado":

Borramos derecha(); dentro que del on (press) y en su lugar ponemos:

derechaID = setInterval(derecha, 50);

"Que carajo es esto?" bien, esto lo que hace es crear un intervalo de tiempo a para una función es decir, decirle que una función se ejecute cada X tiempo, esto se declara de la así:

nombreDelInterbalo = setInterbal ( funcionAEjecutar, tiempoEnMilisegundos);

Para los que se preguntan "porque darle un nombre a un intervalo de tiempo" les respondo: Prueben la película... como ven, esto se mueve indefinidamente hacia la derecha, esto no es un mantener apretado. Para hacer el mantener apretado agregamos en los bloques de función de on (release) y on (dragOut):

clearInterval(derechaID);

y esa es la respuesta a "porque darle un nombre a un intervalo de tiempo" lo que hace esta función esa decir: "deja de ejecutar el intervalo derechaID" o mas detelladamente "deja de ejecutar casa 50 milisegundos la función derecha();"

Por ultimo, algunos se preguntaran porque puse el on (dragOut), lo puse porque el on(relese)
se ejecuta siempre que estemos sobre el botón pero si nosotros soltamos el click fuera del botón el cuadrado se sigue moviendo, entonces el on(draOut) le dice que cuando el mouse este apretado y salga fuera de la zona activa del botón borre el intervalo. Les dejo el código terminado:

on (press) {
derecha = function () {
cuadrado._x += 5;
};
derechaID = setInterval(derecha, 50);
}
on (release) {
clearInterval(derechaID);
}
on (dragOut) {
clearInterval(derechaID);
}

Y como terminamos les dejo el ejemplo: