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.
- clip.onRelease = function()
- {
- 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:
- hitArea_mc._visible = false;
- 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:
- MovieClip.prototype.select = function()
- {
- 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.
- MovieClip.prototype.deselect = function()
- {
- 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_1.select();
- clip_btn_2.deselect();
- clip_btn_3.deselect();
- clip_btn_4.disable();
- clip_btn_5.disable();
Compártelo:
Visto 57.775 veces
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
Hola: mil gracias por el tutorial, todo me funciona bien, salvo un pequeño detalle:
Estoy realizando esto mismo pero tengo tres instancias del mismo movie sobre la linea de tiempo, y cuando doy click a alguna de ellas pues queda en select (hasta aquí todo ok) pero no puedo volver a reactiva el botón.
Quisiera que al hacer clic sobre otro de los botones el que estaba en select volviera a quedar activado. Serviría si posteo el archivo que estoy trabajando???
De nuevo gracias
hola amigos… muy bueno el tuto… Lo que me gustaría hacer es que esos botones animados al darle click me lleven a otra escena, tengo cuatro botones animados en un menú y no se como hacer para que me lleven a otra escena.. un amigo me dijo que es porque lo estoy haciendo en ActionScript2, si lo hiriese en ActionScript3 me funcionaria…? y si es así.. cómo hacerlo..? por favor explíquenme…
Hola, sería un tutorial muy bueno si se completara con imágenes y mejores explicaciones para todo nivel de conocimiento en Flash. No puede ser que en los comentarios se explique lo que debería estar en el cuerpo del tutorial (ej:” Todo el código va en el fotograma donde esté el MovieClip… ¿Dónde va a estar si no?” ).
Hola, se me hace muy interesante,soy nuevo en esto del flash, habria alguna posibilidad que de favor me pasar el archivo fla que no lo pude baja
les dejo el mail damnmind@gmail.com
saludos
Hola, he intentado hacer el tutorial pero la segunda parte con “_active” y “_disable”, no consigo lograrlo, alguíen podria pasarme el .fla ya que en el enlace que da el admin está destivado.
Mi email es marianvazquez20@gmail.com
Gracias un saludo
[…] del foro, buen tarde: Ante todo debo agradecer el tutorial que está colgado en http://www.codigoactionscript.org/ut…-como-botones/ sobre este tuto me ha surgido un problema que no he podido resolver. Paso a explicar: Tengo un mc […]