sábado, 21 de mayo de 2011

Código para botones en Flash

(Actualizado 14~09~2011)
Hola a todos!
Después de bastante tiempo (casi dos meses) desde que escribí el último tutorial (por una cuestión de falta de tiempo), subo una nueva entrada en la que daré un panorama general sobre actionscript en Flash: Botones en Flash, y los códigos que se les puede aplicar más comunes e imprescindibles para desarrollar casi cualquier programa sencillo con esta tecnología.

Botones en Flash
Lo más recomendable si estás en cero es que estudies actionscript 3.0, que es el lenguaje de programación más actual que utiliza el Adobe Flash. Si estás habituado al actionscript 2.0, lo mejor es que hagas el cambio al actionscript 3.0, aunque los cambios entre uno y otro son bastante bruscos, siempre es mejor estar actualizado. De todas formas, escribo tanto los códigos para as2 como para as3.





Actionscript 2.0
La estructura básica para programar con as2 es relativamente sencilla. Podemos programar sobre el botón o sobre un fotograma en blanco utilizando nombres de instancia.

Si vas a escribir el código sobre el botón, la estructura es así:



evento: Puede ser, por ejemplo:

  • release: Al pulsar el botón y soltar el mouse/ratón
  • rollOver: Al situar el cursor encima del botón
  • rollOut: Al situar el cursor fuera del botón
  • press: Al mantener presionado el botón.

acción_a_ejecutar: Esto es, básicamente, lo que pasará cuando ocurra lo que indicamos en el evento. Por ejemplo: 
  • getURL ("url_completa", "_blank"): Para redireccionar a una web o archivo html en tu computadora. 
  • gotoAndStop ("nombre_de_escena", fotograma): Para ir a un fotograma de la línea de tiempo.
  • loadMovie ("url_completa_del_video"): Para cargar una película swf o flv. 

Vamos a ver un ejemplo: 


Al presionar el botón en cuestión, iremos automáticamente al fotograma 1. 
Supongamos que tenemos un clip de película con una animación dentro, y le ponemos a este clip un nombre de instancia, por ejemplo "pelicula". Si queremos que la animación dentro del clip se dirija al fotograma 1, deberíamos agregar delante del "gotoAndStop" el nombre de instancia del clip, o sea que dicha línea de código quedaría así: 

pelicula.gotoAndStop(1);


Para escribir el código en el fotograma, debemos cambiar la estructura. Primero que nada hay que ponerle un nombre de instancia al botón en cuestión, por ejemplo "btn". 
Para el mismo ejemplo que mencioné antes, la estructura es así: 




Actionscript 3.0
En este lenguaje de programación, el código va siempre en el fotograma, por lo tanto será imprescindible utilizar nombres de instancia para programar

Primero debemos definir una función y luego podemos asignarle dicha función a un botón que queramos. 


nombre_de_la_función: Debemos elegir un nombre adecuado y que recordemos para asignarle a la función.
acción o bloque de acciones a realizar: Será lo que ocurra al ejecutar la función.
evento: Por ejemplo, puede ser: 
  • CLICK: Al pulsar el botón
  • ROLL_OVER: Al situar el cursor encima del botón
  • ROLL_OUT: Al alejar el cursor del botón
  • MOUSE_MOVE: Al mover el mouse 
boton: Nombre de instancia del botón.

Para ejecutar las mismas acciones que aprendimos a ejecutar con actionscript 2, el código sería el siguiente: 


Como podemos ver, el código se complica bastante, pero es mucho más limpio que con Actionscript 2.0.

____________________

Bueno, es todo por ahora, espero que les sea de ayuda. 
No dejen de comentar por cualquier duda o sugerencia que tengan. 

Saludos!
Jime.


Edit: 
Agrego un código para actionscript 3.0, para poder cambiar de fotograma y Escena al mismo tiempo:


Saludos.

18 comentarios:

  1. Hola, de antemano quiero que sepas que tu tutorial me ha servido mucho, soy nueva en AS3 así que estos trabajos siempre me vienen de lo mejor.

    Recientemente me encuentro trabajando en un pequeño sitio personal, los vínculos que quiero crear no son a los frames del archivo, si no a descargas en pdf, envío de correos, y links a templates pre-diseñados. Comenzé programando el primer boton, con el que me pueden enviar correos, con ese no hubo ningún problema, he incluso encontré un código para abrir una ventana y visualizar pdfs, el problema es que cuando programo ese código en el segundo boton, este nó solo activa la función de visualizar el pdf, sino que también activa la de mandar correo, esto no pasa con el primer boton, es un error de código?,
    los códigos son los siguientes:


    PARA ENVIAR MAIL

    var emailAddress:URLRequest = new URLRequest("mailto:ejemplo@correo.com");

    function emailDown(event:MouseEvent):void{
    navigateToURL(emailAddress,"_self");
    }

    boton_correo:addEventListener(MouseEvent.CLICK, emailDown);


    PARA ABRIR PDF:

    var pdfURL:URLRequest = new URLRequest("archivo.pdf");

    function descargarPDF (evt:MouseEvent){
    navigateToURL(new URLRequest("archivo.pdf"),"_blank");
    }

    descargar.addEventListener(MouseEvent.CLICK, descargarPDF );

    jiji mi mensajote, lo siento es que ya no se que hacer!!

    ResponderEliminar
  2. Hola, gracias por tu comentario!

    Tu código no tiene ningún error de sintaxis. El problema debe ser de nombres de instancia, te recomiendo que revises que todos los botones tengan sus correspondientes nombres de instancia y que el botón que vayas a utilizar para enviar el correo no tenga el mismo nombre de instancia que el que utilices para descargar el pdf.

    Ojalá que puedas solucionar tu problema.

    Saludos!!

    ResponderEliminar
  3. Hola, me podrias explicar como hago para programar un Boton para que me envíe a la pagina que se esta mostrando, Por ejemplo dice mini.com.co abajo a la derecha de una animación que he hecho, quiero que al darle click me re direccione a esa pagina abriendo así el explorador de internet predeterminado

    Muchas gracias

    Espero tu respuesta

    ResponderEliminar
  4. Hola! Gracias por tu comentario.
    Para hacerlo hay dos maneras:

    1) si el link es un texto, podés evitar el uso de código escribiendo el link en el panel de propiedades
    Imagen explicativa: http://img21.imageshack.us/img21/5900/imagetextovinculo.jpg

    2) si el link es un botón, y estás usando actionscript 2.0 el código es el siguiente:
    on(release){
    getURL ("http://mini.com.co/", "_blank");
    }
    Si estás usando actionscript 3.0, debés ponerle un nombre de instancia al botón, por ejemplo "btn1", el código va en el fotograma y es el siguiente:
    btn.addEventListener(MouseEvent.CLICK, iraurl);
    function iraurl (e:MouseEvent):void{
    navigateToURL(new URLRequest("http://mini.com.co/"), "_blank");
    }

    Saludos!!

    ResponderEliminar
  5. Guauu! eres la mejor, Muchisimas Gracias te comentare si me sirvio (Action Script 3.0) o si tengo algun inconveniente!

    ResponderEliminar
  6. para dar 2 acciones a un boton ejemplo que on release gotoandplay y de ahi pare un sonido y valla a otra escena???

    ResponderEliminar
  7. Hola! Gracias por tu comentario,
    Si estás trabajando con actionscript 2, escribís on(release){ y escribís todas las acciones en distintas líneas de código separadas por un punto y coma (;).
    Si estás trabajando con actionscript 3, definís la función correspondiente con las diferentes líneas de código también separadas por un punto y coma, y luego le asignás la función al botón.

    Saludos

    ResponderEliminar
  8. Hola jimena, mira he seguido tu tutorial, y bueno desarrolle un archivo en flash utilizando As2 que contiene un movieclip, este contiene además tres capas distintas, una con un boton nexframe, una capa con otro boton prevframe y una capa de contenido de imagenes. Al iniciar el movieclip, va mostrando distintas imagenes correlativamente de la capa de contenido según avansa la linea de tiempo, dichos botones contienen el codigo de la acción que te llevan directamente a las imagenes que van corriendo pudiendo ir de una en una. los botones tienen el codigo de las acciones en distintos frames al que se quiere ir: ejemplo

    Boton nextFrame

    botonnext. onRelease = function () {
    gotoAndStop(135);

    }

    Boton prevFrame

    botonprev. onRelease = function () {
    gotoAndStop(1);

    }

    Todo va bien, se carga el movie y va mostrando las imagenes según su ubicción en la linea de tiempo, puedes avansar o retroceder según el boton que presiones (te lleva a la imagen anterior, o posterior), el único problema es que al testear la movie, me arroja un error que dice algo como esto:

    simbolo=cargainicio, capa=boton next frame, fotograma=1,línea1 La declaración debe aparecer dentro del controlador on botonnext. onRelease = function(){

    Agradecería me puedas ayudar, pues no entiendo a que se refiere dicho error. bueno demás esta decir que el codigo lo utilice del ejemplo que diste. y si va bien, pero no logro entender el error que da.

    ResponderEliminar
    Respuestas
    1. Muchas gracias por tu comentario,
      Si el código lo estás colocando en el frame no tendría que haber problema alguno.
      Se me ocurre que compruebes que están bien colocados los nombres de instancia de los botones.

      Saludos,
      Jimena

      Eliminar
  9. bueno antes que nada gracias por tus aportes desinteresados y por ayudarnos...
    bueno mira hice un boton, y quisiera que al dar click en el se habran por ejemplo archivos de excel,word o algun otro (autocad),en fin,
    tengo este codigo

    import flash.events.MouseEvent;

    boton1_btn.buttonMode = true;

    boton1_btn.addEventListener(MouseEvent.ROLL_OVER,SobreMi);
    boton1_btn.addEventListener(MouseEvent.ROLL_OUT,FueraMi);

    function SobreMi(event:MouseEvent):void
    {
    event.target.gotoAndPlay("Sobre");
    }

    function FueraMi(event:MouseEvent):void
    {
    event.target.gotoAndPlay("Fuera");
    }

    pero no se como realizar lo antes mecionado,ya me rompi buscando en dios google (jejeje) y nomas nada, es en flash cs6 actionscript 3...gracias y ojala me echaran una mano

    ResponderEliminar
  10. oye tu codigo para actioncript 3.0 no funciona, al menos en el flash cs5.5, porque antes usaba actionscript 3.0 en el 3 y la unica diferencia con el tuyo del 2 era que el frame al que me tenía que enviar iba ente comillas...

    ResponderEliminar
  11. como puedo poner un archivo .wrl dentro de un flash y que sea llamado por un boton en as3

    ResponderEliminar
  12. Hola no sabes lo bien que me cae tu tutorial, y mas por que no se realmente mucho de actionscrip 3.0
    pero me gustaría que me ayudaras con mi código
    lo que quiero es que cuando pase el cursor sobre el botón haga el efecto que le diseñe en flash, cuando lo quite haga otro, y cuando le de click haga el ultimo por favor ¡¡¡Espero puedas ayudarme!!!!

    mi código es:

    import flash.events.MouseEvent;

    inicio_btn_mc.buttonMode=true;
    bolsadetrabajo_btn_mc.buttonMode=true;
    mapa_btn_mc.buttonMode=true;
    contactanos_btn_mc.buttonMode=true;

    inicio_btn_mc.addEventListener(MouseEvent.ROLL_OVER,sobre);
    inicio_btn_mc.addEventListener(MouseEvent.CLICK,pulsar);
    inicio_btn_mc.addEventListener(MouseEvent.ROLL_OUT,fuera);

    bolsadetrabajo_btn_mc.addEventListener(MouseEvent.ROLL_OVER,sobre);
    bolsadetrabajo_btn_mc.addEventListener(MouseEvent.CLICK,pulsar);
    bolsadetrabajo_btn_mc.addEventListener(MouseEvent.ROLL_OUT,fuera);

    mapa_btn_mc.addEventListener(MouseEvent.ROLL_OVER,sobre);
    mapa_btn_mc.addEventListener(MouseEvent.CLICK,pulsar);
    mapa_btn_mc.addEventListener(MouseEvent.ROLL_OUT,fuera);

    contactanos_btn_mc.addEventListener(MouseEvent.ROLL_OVER,sobre);
    contactanos_btn_mc.addEventListener(MouseEvent.CLICK,pulsar);
    contactanos_btn_mc.addEventListener(MouseEvent.ROLL_OUT,fuera);

    function sobre(Event:MouseEvent):void
    {
    Event.target.gotoAndPlay("Sobre");
    }
    function pulsar(Event:MouseEvent):void
    {
    Event.target.gotoAndPlay("Pulsar");
    }
    function fuera(Event:MouseEvent):void
    {
    Event.target.gotoAndPlay("Fuera");
    }


    Todo esto es en Flash actionscrip 3.0
    ¡¡ Ayúdame por favor!!!

    ResponderEliminar
  13. Hola:
    Lo que necesito hacer es un botón ubicado sobre un imagen, de modo que cuando haga Click aparezca una animación que se visualizará sobre todo el conjunto y que puede ser detenida por el usuario y cerrarla para poder pulsar otro botón en otro lugar de la imagen y que cumpla el mismo cometido. He probado y averiguado como hacerlo, pero todavía no tengo un buen resultado. Te agradecería algún consejo. Desde ya, muchas gracias.

    ResponderEliminar
  14. hola, tengo un problema con botones para una web que hice en flash con as 2.0.
    Ojala me puedas ayudar..
    Cada botón tiene una animación dentro, coloco lo siguiente en la Escena numero 2, seleccionando previamente el botón:

    on (release){
    gotoAndStop ("Index",1);
    }

    Index, es la primer escena..
    Pruebo pero no me funciona.
    Cada escena tiene varias capas en la que ubique los diferentes elementos que componen mi pagina, puede ser ese el problema?o el hecho de que tenga una animación dentro cada botón?
    Estoy comenzando con esto, y todavía no tengo los conceptos muy claros.
    Muchas gracias.

    ResponderEliminar
  15. hola, gracias por tu aporte y como muchos aqui aun no logro entender bien el AS3 y mi problema es que tengo una pagina principal en una web donde los klink son imagenes y van entrando a la pantalla pero mi problema es que cuando coloco en el primer link el codigo me redirecciona a la web que indico, pero tengo otros 3 links y cuando quiero pegar el mismo codigo en el frame de cada boton obviamente cambiando el nombre de la instancia (boton) no funciona y deja de funcionar el unico que me lleva a la web.
    ojala me puedas ayudar muchas gracias

    ResponderEliminar
  16. Buen día tengo, tengo un Problema!!!
    La cuestión es que tengo un botón que diseñe en flash cs6 usando actión script 3.0 y quiero que ese botón al pulsarlo me abra el correo con destinatario y que con el mismo click automáticamente me adjunte un archivo .pdf en Microsoft Outlook sin que yo tenga que adjuntarle manualmente quiero que sea automático pero eh probado muchas funciones y me abre el correo con destinatario pero no funcionan el adjuntar desde el código por favor.
    gracias de antemano si me podrían ayudar se los agradeciera mucho

    ResponderEliminar
  17. HOLA ME PODEIS AYUDAR, NECESITO SABER QUE CODIGO UTILIZAR PARA DARLE A UN BOTON LA FUNCION DE GUARDAR Y OTRO BOTON QUE EL TRABAJO HECHO EN FLASH SE EXPORTE A PDF.GRACIAS

    ResponderEliminar

Si tenés dudas, comentarios u opiniones sobre esta entrada, ¡comentá!