Utilizar MovieClips como botones
Este es un sencillo ejemplo de como utilizar un MovieClip como si fuese un botón. Hay muchos casos en los que nos interesa hacer esto, como por ejemplo para tener botones animados, que se mantengan encendidos una vez se ha clicado sobre ellos, etc...
Como ya sabremos... cualquier MovieClip al que le coloquemos un evento onRelease actua automaticamente como botón.
{
trace("Soy un botón");
};
Ahora si editamos el MovieClip, le colocamos en la línea de tiempo los markers "_up", "_over", "_down", y un stop() en el primer fotograma:
Automáticamente el MovieClip cambiará de estado al pasar el cursor sobre él o presionarlo, sin necesidad de escribir ningún código por parte nuestra.
Para indicar la zona activa del botón añadiremos una nueva capa al MovieClip, y crearemos otro MovieClip que ocupe la zona que queramos para el botón:
A este segundoMovieClip lo llamaremos "hitArea".
En el primer fotograma del primer MovieClip colocaremos el siguiente código:
this.hitArea = hitArea_mc;
Llegados a este punto tendríamos hecho con un MovieClip lo mismo que tendríamos con un clip de Botón.
Lo interesante de haberlo hecho de esta manera es que ahora podemos añadirle a este botón otros estados, como por ejemplo un estado activo (para cuando hemos hecho click sobre él y queremos que quede iluminado) o un estado desactivado (por si queremos que en algún momento ese botón quede apagado).
Para eso solo tendremos que añadir unos nuevos markers al MovieClip indicandole el nombre que queramos, por ejemplo "_active" y "_disable".
Ahora debemos añadirle estos comportamientos a la clase MovieClip:
{
this.enabled = false;
this.gotoAndStop("_active");
};
Este nuevo comportamiento de la clase MovieClip hará que al ejecutarse mande el botón al fotograma "_active". Si colocasemos este código al botón:
{
trace("Soy un botón");
this.select();
};
al clickar sobre él se ejecutarán sus acciones y quedará seleccionado.
Añadiremos otro comportamiento para cuando queramos que deje de estar seleccionado y para cuando queramos que este inhabilitado.
{
this.enabled = true;
this.gotoAndStop("_up");
};
MovieClip.prototype.disable = function()
{
this.enabled = false;
this.gotoAndStop("_disable");
};
Ahora todos los MovieClips que utilicemos como botones tendrán estos comportamientos:
clip_btn_2.deselect();
clip_btn_3.deselect();
clip_btn_4.disable();
clip_btn_5.disable();
Post relacinonados:
November 30th, 1999 at 12:00 am
no me sirvió de nada, está mal hecho, yo no sé mucho de action scrip, y este tutorial me dejó igual, no indica con precisión donde van las acciones, estaria bueno que integren un archivo descargable de ejemplo. De todos modos gracias por el intento.
November 30th, 1999 at 12:00 am
De nada, amigo
PD: Todo el código va en el fotograma donde esté el MovieClip... ¿Donde va a estar si no? ¬¬
November 30th, 1999 at 12:00 am
Me da error al publicar la escena con el primer código que poneis al principio
clip.onRelease = function(){
trace("Soy un botón");
};
Este es el error
**Error** Escena=Escena 1, capa=Capa 1, fotograma=1:LÃnea 1: La declaración debe aparecer dentro del controlador on/onClipEvent
clip.onRelease = function()
November 30th, 1999 at 12:00 am
Ese error te lo da porque estás colocando el código en el MovieClip. Lo has de colocar en el fotograma.
November 30th, 1999 at 12:00 am
Sigue sin salirme nada, por favor necesito ayuda. O soy muy malo o esto no está bien explicado. Gracias
November 30th, 1999 at 12:00 am
Porque no poneis un ejemplo o un archivo como dice Osama
November 30th, 1999 at 12:00 am
Ejemplo:
http://www.cristalab.zguillez.com/simpleButton/prototype.swf
http://www.cristalab.zguillez.com/simpleButton/prototype.fla
November 30th, 1999 at 12:00 am
Muchas gracias
November 30th, 1999 at 12:00 am
Excelente tuto, pero para intermedios.
Se pueden hacer cosas muy lindas. Por ejemplo al estado ACTIVO le puse un MC con efecto sombra, en la accion Release le agregué un swapDepths entonces el boton seleccionado siempre queda por sobre los demas, "tapandolos" con una sombra.
November 30th, 1999 at 12:00 am
hola a todos!!!... felicidades, me gusto muchon este metodo, es muy original y creativo, pero tengo una pregunta.... ¿no se pueden utilizar un evento rollOver? esto para que cuando el mouse este sobre el boton haga algo... gracias por tu respuesta
November 30th, 1999 at 12:00 am
@marx: Si claro, puedes añadirle un evento rollOver igual que a cualquier botón
November 30th, 1999 at 12:00 am
Muchas gracias, está muy bien. Pero yo ahora querÃa hacer clic en un botón y seleccionar (los demás ya los deselecciono); Y después vuelvo a hacer clic en el mismo botón y deseleccionar. ¿Es esto posible? ¿cómo se lo digo? Como ves es usar el mismo evento para acciones distintas. Una vez clic: selecciono; despues hago otra vez clic: deselecciono; otra vez clic: selecciono; etc. hasta el infinito.
Gracias y un saludo
November 30th, 1999 at 12:00 am
como hago si tengo un movieclip como boton, y este se duplica dinamicamente para crear otros mc, la cuestion es como hago para que el mc abra una url y esta accion no me afecte las demas acciones del mc.
November 30th, 1999 at 12:00 am
No entiendo casi nada... tus imagenes no se muestran... no se mucho de as pero creo que este tutorial solo funciona con mx no? y si quisiera hacerlo con la version 8 de flash se puede? lo intente pero no funciona... o estoy haciendo algo mal? ayudaria mas, creo yo, si usaras algunas imagenes en este tutorial. saludos.
November 30th, 1999 at 12:00 am
@darkman: El código es para flash 8. las imágenes no se muestran por que se perdieron en un formateo inesperado del servidor :S... estoy intentando recuperarlas, en cuanto pueda las vuelvo a subir. sorry.
November 30th, 1999 at 12:00 am
es que me dejaron una tarea de flash y necesitoq me ayuden lo que pasa esq estamos aciendo un video juego sencillo la pregunta esq cuando codifico el objeto para q se mueva para arriba porq ahy q ponerle negativo- y no mas si se supone q el objeto sube y se le tiene q poner mas+ por q es con signo negativo
November 30th, 1999 at 12:00 am
Hola,
Necesito ayuda con un movieclip,
He hecho una scrollbar con imagenes (movieclip), y dentro del movieclip todas las imagenes convertidas en botos,
les he puesto este AS: "on(Press){
gotoAndPlay(2)
}
Y cuando pincho en la imagen no hace nada.
Le he puesto el stop() en el fotograma 2.
Os agradeceria muchisimo que me ayudarais.
Un saludo.
November 30th, 1999 at 12:00 am
Hola!
Soy nuevo en flash y estoy haciendo una aplicacion con movieclips como botones, en mi caso los movieclips quedan uno encima de otro y cuando el cursor esta encima del primero tambien se ejecuta el que esta detras, como puedo hacer para que solo se ejecute el que esta arriba?
me pueden ayudar por favor?
November 30th, 1999 at 12:00 am
osama, revisa este video para hacerlo sencillÃsimo:
August 18th, 2008 at 5:11 am
Hola, tengo una pregunta sobre llamadas a variables con ActionScript.
Estoy intentando llamar a una variable a traves de un "for", me explico:
Tengo una variable de nombre: numX (X es un número); a través del for consigo la X y quiero asignar un valor a la variable numX, pero no consigo encontrar la forma de concatenar num y X.
Yo creo que seria así:
ej: for (var x:int = 1; x < 41; x++){
( "num" + x.toString()) = ( "num" + x.toString()) + 1;
}
Pero de esta forma me da error, existe alguna forma de hacer esta operación con actionScrpit? En otros códigos se puede hacer.
August 27th, 2008 at 11:06 am
@AMPDelux: Eso lo harias asi:
for (var X:int = 1; X < 41; X++)
{
this["num" + X] = this["num" + X] +1;
}
September 25th, 2008 at 10:11 am
Hola. Necesito convertir un movieclip a Boton. El codigo que esta al principio es perfecto para lo que quiero hacer, solo que tampoco me funciona y no he podido ver los ejemplos. Por favor, si podrias facilitarlos o volverlos a colocar? Gracias
October 1st, 2008 at 1:06 pm
YA LO CONSEGUI...
November 25th, 2008 at 6:30 pm
Exelente info me ayudo mucho.
Gracias.
February 25th, 2009 at 10:22 pm
Muy buen tutorial sólo que me parece que dejas por fuera a los que nada sabemos de programación porque aunque sigo al pie de la letra las instrucciones, no logro entender todo. Sé casi todo en Flash MENOS Actionscript.
Yo necesito es que en la escena principal haya un MovieClip con estados "Up" y "Over" y que dentro del "Over" haya un botón. Es todo. ¿Alguien puede ayudarme?
Gracias
July 15th, 2009 at 11:59 am
Será posible que vuelvan a subir las imagenes y los ejemplos ??
Sé que an pasado varios años desde que se publicó el tutorial pero es realmente útil !!
alquien podría subir el ejemplo nuevamente ??
November 26th, 2009 at 12:38 pm
Por favor necesito que me faciliten el archivo .fla que dejaron como ejemplo para hcer u movieclip en boton!! ahi esta mi correo por si alguien lo tiene o tiene algun otro ejemplo sencillo me lo envie por fa !! gracias
joctanrodrguez@yahoo.com
joctan1990@gmail.com
jctn-rl@hotmail.com