Home » Básico »Trucos » Currently Reading:

Utilizar MovieClips como botones

noviembre 13, 2006 Básico, Trucos 35 Comments
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.

  1. clip.onRelease = function()
  2. {
  3. trace("Soy un botón");
  4. };

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:

  1. hitArea_mc._visible = false;
  2. 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:

  1. MovieClip.prototype.select = function()
  2. {
  3.    this.enabled = false;
  4.    this.gotoAndStop("_active");
  5. };

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:

boton1.onRelease = function()
{
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.

  1. MovieClip.prototype.deselect = function()
  2. {
  3.    this.enabled = true;
  4.    this.gotoAndStop("_up");
  5. };
  6. MovieClip.prototype.disable = function()
  7. {
  8.    this.enabled = false;
  9.    this.gotoAndStop("_disable");
  10. };

Ahora todos los MovieClips que utilicemos como botones tendrán estos comportamientos:

  1. clip_btn_1.select();
  2. clip_btn_2.deselect();
  3. clip_btn_3.deselect();
  4. clip_btn_4.disable();
  5. clip_btn_5.disable();

Compártelo:

Utilizar MovieClips como botones
Visto 49.813 veces

Currently there are "35 comments" on this Article:

  1. osama dice:

    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.

  2. admin dice:

    De nada, amigo

    PD: Todo el código va en el fotograma donde esté el MovieClip… ¿Donde va a estar si no? ¬¬

  3. francis dice:

    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()
    co como si fuese un botón. Que hago mal

  4. admin dice:

    Ese error te lo da porque estás colocando el código en el MovieClip. Lo has de colocar en el fotograma.

  5. francis dice:

    Sigue sin salirme nada, por favor necesito ayuda. O soy muy malo o esto no está bien explicado. Gracias

  6. francis dice:

    Porque no poneis un ejemplo o un archivo como dice Osama

  7. francis dice:

    Muchas gracias

  8. 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.

  9. marx dice:

    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

  10. admin dice:

    @marx: Si claro, puedes añadirle un evento rollOver igual que a cualquier botón

  11. mmlucas dice:

    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

  12. coko547 dice:

    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.

  13. darkman dice:

    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.

  14. zguillez dice:

    @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.

  15. sergio dice:

    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

  16. Alex dice:

    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.

  17. titico dice:

    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?

  18. tactanic dice:

    osama, revisa este video para hacerlo sencillísimo:

  19. AMPDelux dice:

    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.

  20. admin dice:

    @AMPDelux: Eso lo harias asi:

    for (var X:int = 1; X < 41; X++) { this[“num” + X] = this[“num” + X] +1; }

  21. Marielena dice:

    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

  22. Marielena dice:

    YA LO CONSEGUI…

  23. mohode dice:

    Exelente info me ayudo mucho.
    Gracias.

  24. Carlos dice:

    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 😉

  25. Manu dice:

    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 ??

  26. JOCTAN dice:

    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

  27. wiwi dice:

    Pero esto es una boludes… sin ejemplo no sirve.
    Es como aprender a jugar ajedrez por radio.

  28. ronaldo dice:

    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

  29. Ortega dice:

    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

  30. guerrav dice:

    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…

  31. unaH dice:

    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?” ).

  32. distraido dice:

    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

  33. Marian dice:

    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

  34. […] 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 […]

Comment on this Article:








Twitter: zguillez

AdvertisementAdvertisementAdvertisementAdvertisement

Recibe las novedades por email



Map

Ranking

Codigoactionscript.org: 4.65 sobre 5 (106 valoraciones)

twitter-widget.com