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:
29 Comments »
RSS feed for comments on this post. TrackBack URI
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.
De nada, amigo
PD: Todo el código va en el fotograma donde esté el MovieClip... ¿Donde va a estar si no? ¬¬
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()
Ese error te lo da porque estás colocando el código en el MovieClip. Lo has de colocar en el fotograma.
Sigue sin salirme nada, por favor necesito ayuda. O soy muy malo o esto no está bien explicado. Gracias
Porque no poneis un ejemplo o un archivo como dice Osama
Ejemplo:
http://www.cristalab.zguillez.com/simpleButton/prototype.swf
http://www.cristalab.zguillez.com/simpleButton/prototype.fla
Muchas gracias
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.
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
@marx: Si claro, puedes añadirle un evento rollOver igual que a cualquier botón
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
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.
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.
@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.
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
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.
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?
osama, revisa este video para hacerlo sencillÃÂsimo:
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.
@AMPDelux: Eso lo harias asi:
for (var X:int = 1; X < 41; X++)
{
this["num" + X] = this["num" + X] +1;
}
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
YA LO CONSEGUI...
Exelente info me ayudo mucho.
Gracias.
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
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 ??
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
Pero esto es una boludes... sin ejemplo no sirve.
Es como aprender a jugar ajedrez por radio.
He seguido tus indicaciones y me funciona muy bien. He creado un clip que se llama boton y cunado le doy una vez se para el sonido y se le vuelvo a dar vuelve a sonar. ¿Hay alguna posibilidad de que la pelicula enseñe un play cuando no suena y un stop cuando está sonando?
Como un boton que muestre play y stop segun este sonando o no
No se si me he explicado bien