Habíamos visto la clase pasada cómo hacer botones básicos en Flash. Los botones no son más que símbolos –animados o no, con efectos o no– que están “activados” para realizar determinada acción. Cuando el usuario haga clic sobre nuestro botón, algo pasará.
En general los botones son objetos que al pasar el mouse encima, muestra algún cambio. Sin embargo, no hace falta tener un botón para realizar alguna acción. No es necesario crear la forma del botón. Veamos…
Botones invisibles
Un botón clásico pensaría “Tengo que ser visible y notorio porque quiero que me hagan clic para poder ir a próxima sección del sitio”. La persona que ingresa al sitio ve el botón y piensa “¡Ah! Un botón. Voy a hacer clic para ir a tal sección…”.
Funciona muy fácil. Ahora bien, existen los “botones invisibles” que se usan en casos muy diferentes al de la conversación anterior. Pero antes de explicar esto les voy a decir algo sobre los botones: no siempre son “botones”. Los botones en Flash son “cosas” que generan acciones. O sea que no necesariamente un botón es un círculo con la palabra “aceptar”.
Supongamos que en nuestro sitio tenemos que hacer un muestrario de productos (una especie de galería de imágenes). Vamos a tomar de base la web de lanas que comenzamos a planificar en la clase anterior. En este caso, tenemos una imagen donde están todos los productos en vista pequeña (thumbs) y por otro lado fotos con mayor detalle de los productos que queremos mostrar.
Lo que quiero lograr es que al pasar el mouse por encima de cada foto pequeña, me muestre al costado el detalle de ese producto. Pero NO quiero que cada thumb sea un botón. Lo que voy a hacer es crear botones invisibles…
En una capa nueva pego la imagen con los thumbs.- Genero un cuadrado pequeño sobre el primer thumb (cuadrado gris).
- Convierto el cuadrado en botón y hago doble clic encima para entrar a la línea de tiempo del botón.
- En la línea de tiempo, hago clic sobre el primer fotograma y, manteniendo presionado el botón del mouse, llevo el fotograma clave al último fotograma (zona activa), tal como se ve en la imagen de la derecha.
Verás al salir que el cuadrado es ahora de un celeste transparente. Eso indica que el botón es invisible. Lo único material del botón es la zona activa. - Copio el botón invisible y lo pego sobre el resto de los thumbs, preocupándome que queden espacios entre los botones y que nunca se superpongan.
Lo que conseguí es tener 6 botones invisibles que generan acciones independientemente de la imagen que tengan debajo.
Ya tenemos la primer parte resuelta. Ahora vamos a generar las vistas en detalle del producto. Puede servir para una galería de imágenes, un juego interactivo y otros usos. Lo importante es saber que la imagen del menú (la que tiene los thumbs), los botones invisibles y cada uno de los detalles son elementos separados. Por eso, no es mala idea incluso trabajarlos en capas separadas.
Vamos a empezar con uno de los detalles:
Ubico la fotografía ampliada y un texto de explicación del producto en el lugar donde quiero que luego aparezcan.- Convierto todo en gráfico y luego en película.
- Ingreso en la película y creo dos fotogramas clave nuevos. Supongamos, uno en el fotograma 5 y otro en el 10.
- En el fotograma 1 y el 10 edito el gráfico desde el panel de propiedades eligiendo la opción Alpha 0%. Ahora en esos fotogramas, el gráfico se ve transparente.
- Le doy interpolación de movimiento a toda la línea de tiempo.
- Selecciono el primer fotograma y desde el panel de acciones (F9), hago doble clic en Stop (Acciones/Control de película o Global Functions/Timeline Control). Lo mismo en el fotograma 5. Esto es para detener la animación en el primer fotograma y en el quinto, que justamente son transparentes, invisibles.
- Al salir de la película voy a ver el recuadro invisible. Ahora voy a darle un nombre a la película. La selecciono y –en el cuadro de propiedades– escribo un nombre sin dejar espacios donde dice “nombre de instancia” o “instance name”. En este caso, el nombre va a ser “Producto1″.
- Repito estos pasos con el detalle de los otros productos.
Uso básico de ActionScript en Flash
Una vez que tenemos todos los botones y todos los detalles convertidos en películas y nombrados vamos a proceder a darle acciones a estos botones. Básicamente, lo que quiero es que inicialmente no se vea nada y, al pasar el mouse sobre un thumb, al costado se pueda ver el detalle del producto, pero al sacar el mouse vuelva a verse la pantalla blanca.
En palabras Flash: quiero que, pasando el mouse sobre el thumb 1, se reproduzca la película “Producto1″. Lo mismo con el resto de los thumbs…
La película a la que llamamos “Producto1″ tiene 3 fotogramas clave: el 1, donde la imagen se ve transparente, el 5 donde se ve con claridad y el 10 donde vuelve a verse transparente.
Ahora yo quiero que al pasar el mouse sobre el thumb 1, se reproduzca la película “Producto1″ y que se detenga en el fotograma 5. Como el fotograma 1 y el 5 tienen la acción Stop, cada vez que la película se reproduzca, quedará congelada en esos fotogramas. Entonces, si quiero llegar al fotograma 5, tengo que comenzar la reproducción por el fotograma 2 que no está detenido.
Las acciones se agregan al botón invisible que está sobre el thumb 1. Se selecciona el botón y presionando F9 se accede al panel de acciones donde escribiré el código ActionScript o lo seleccionaré del listado. Los códigos se escriben en inglés. Y para esta primera esta primera parte se verá así:
on (rollOver) {
tellTarget (”Producto1″) {
gotoAndPlay(2);
}
}
Explico:
on (rollOver) = cuando paso el mouse por encima
tellTarget ("Producto1") = le digo a la película “Producto1″
gotoAndPlay(2) = que se reproduzca a partir del fotograma 2
Como en el fotograma 5 tenemos un Stop. Significa que la película se va a reproducir hasta ese fotograma, quedando completamente visible el detalle del producto. Ahora vamos a hacer que al sacar el mouse por fuera del thumb 1, la película se deje de mostrar (llegue al fotograma 10, donde el gráfico es transparente):
on (rollOut) {
tellTarget (”Producto1″) {
gotoAndPlay(6);
}
}
Explico:
on (rollOut) = cuando saco el mouse del botón
tellTarget ("Producto1") = le digo a la película “Producto1″
gotoAndPlay(6) = que se reproduzca a partir del fotograma 6
O sea que al desplazar el mouse por fuera del botón, la película va a reproducirse desde el fotograma 6 en adelanta, hasta llegar al fotograma 10, donde la película vuelve a ser transparente o invisible.
Varios botones pueden llamar a la misma película. Se pueden lograr cosas verdaderamente buenas con estas sencillas acciones. Te recomiendo que practiques con las acciones porque es una parte muy importante del programa. Muchas cosas que parecen sencillas no se pueden hacer si no tienes un conocimiento básico de ActionScript.
Para que puedas trabajar en base a algo concreto, te dejo el SWF del sitios que estamos construyendo juntos. En la sección Lanas verás aplicados los conceptos de esta clase.
Haz clic para abrir el SWF (1.86 MB)
Haz clic para descargar el archivo FLA original comprimido (1.87 MB)
(Para ver este archivo debes contar con la versión 8 de Flash o superior)
Échale una mirada a estos archivos para terminar de cerrar la idea y probar acciones… ¡Hasta la próxima!
| << CLASE ANTERIOR |
Lunes, 7 de Abril de 2008 a las 12.45
El contenido de cada uno de las clases esta genial cada vez me gusta mas,felicito por la metodologia que manejan en la instruccion y preparacion de clases me gustario que nos brinden mas ejemplos que se puedan descargar para ponerlos en practica.
Lunes, 7 de Abril de 2008 a las 19.24
he intentado descargar la carpeta y abrir el archivo SWF y no he podido. Parece que estan dañados seran tan amables de revisarlos para poder examinarlos y practicar.
Agradesco su atencion.
Martes, 8 de Abril de 2008 a las 13.20
Yo descarge el sitio.fla y la verdad es que en FLASH tira un mensaje de error: “El formato del Archivo fue inesperado”, creo que el archivo esta dañado…
Pero si me gustaria que lo volvieran a montar para poder utilizarlo ya que esta bien interesante este sitio…
Felicitaciones por este Curso me ha servido de mucha ayuda y esta muy interesante desde ya
GRACIAS…
Martes, 8 de Abril de 2008 a las 16.13
¡Hola, Danniels!
Para abrir el archivo debes contar con la versión 8 de Flash o una superior ;).
(¡Hemos agregado la aclaración, gracias!)
¡Saludos!
Martes, 8 de Abril de 2008 a las 17.23
Gracias ahora si lo puedo utilizar
Les agradezco…
Jueves, 10 de Abril de 2008 a las 15.52
¡Muy buen taller! Muy completo y sencillo. Gracias
Miércoles, 16 de Abril de 2008 a las 21.32
muy buen tuto… yo hice uno pero el problema es que tuve que hacer algunas modificaciones a la disposicion de capas (cada detalle lo puse en una capa distinta) asi es que me salio todo en una disposicion vertical (me refiero a las capas) digo el problema por que al fin no se si sera lo correcto pero lo bueno es que obtengo el mismo resultado
gracias por el tuto esta genial 
Jueves, 17 de Abril de 2008 a las 15.37
¡Hola Raúl! En realidad puedes usar cuantas capas quieras. Las capas están para simplificarte la vida y si eso la simplifica, que así sea
Viernes, 18 de Abril de 2008 a las 08.43
hola, me gustaria saver como puedo hacer para que mi boton solo se reproduzca una vez.
me explico. pincho en el boton y seme reproduce lo que tengo,pincho otra vez y quiero que no me salga todo otra vez todo sino que no funcione. muchas gracias por todo
Viernes, 18 de Abril de 2008 a las 10.06
Hola ion, a ver si te entiendo: ¿Quieres que el mismo botón sirva para “mostrar” una película y hacerla “desaparecer”?
Martes, 3 de Junio de 2008 a las 05.06
QUE BUENOS TUTORIALES… ME HAN AYUDADO MUCHO.. SON MUY BUENOS, INSISTO.JEJE
Viernes, 22 de Agosto de 2008 a las 10.51
Hola!!! primero mil gracias por tu manual, es realmente bueno, entretenido, agil.. me gusta en verdad, gracias.
te escribo aqui y no al final, porque no puedo hacer los botones!!! ya revise, re hice, volvi a hacer y nada! me marca errores en el codigo y…. es posible que sea por la version del flash? estoy estudiando sobre la nueva version de adobe y…
y….
y…
y… el caso es que no me sale :(. ojala pudieras ayudarme .
muack.
Viernes, 22 de Agosto de 2008 a las 17.05
Es posible que sea por la versión. Decime qué versión usás asi te puedo orientar mejor.
Domingo, 24 de Agosto de 2008 a las 23.23
hola amigo bueno mi consulta es como debo de hacer si quiero que solo se muestre una imagen cuando el mouse pase por ensima y bueno cuando el mouse ya no este ensima del boton desaparesca la imagen
gracias por el pequeño tiempo:::::::::::::
Viernes, 29 de Agosto de 2008 a las 16.45
Hola! Eso mismo es lo que hace este tipo de menú. Al pasar el mouse por encima de un botón de la izquierda se muestra la imagen correspondiente. Cuando el mouse no está sobre el botón, la imagen no se ve, desaparece. Cualquier cosita, podés explicar con más detalle lo que querés lograr con Flash para que pueda responder a tu consulta.
Un saludo, Ale.
Martes, 23 de Septiembre de 2008 a las 20.33
Hola Alejandra, un favor enorme, quisiera saber como evitar el cuadro de diálogo de impresión cuando trato de imprimir en Flas, utilizo la clase printJob(), gracias de antemano
Hubert
Lunes, 17 de Noviembre de 2008 a las 21.41
hola tambien me pasa lo mismo, lo hago y lo hago y nada, me marca erros de sintaxis, sera por la version que uso? estoy usando Flash MX Profecional 2004, sera eso???
Lunes, 17 de Noviembre de 2008 a las 21.48
(aclaracion) hablo del ejercicio de los botones invisibles
Miércoles, 19 de Noviembre de 2008 a las 12.03
¡Hola, Marina! Flash CS3 utiliza ActionScript 2 y 3. Tu versión no es compatible. ¡Saludos!
Martes, 7 de Abril de 2009 a las 19.25
Buenas solo mi punto de vista:
el tellTarget ya esta desfasada desde Flash Player 5. Lo recomendable es el uso de notación con puntos (.) y la sentencia with (segun sea el caso).
Ejemplo 1: si el boton es de tipo boton
on (rollOut) {
producto.gotoAndPlay(6);
}
Ejemplo 2: si el boton es de tipo clip de pelicula
on (rollOut) {
_parent.producto.gotoAndPlay(6);
}
Miércoles, 15 de Abril de 2009 a las 18.35
Hola! Es exactamente lo que stoy necesitando, pero no puedo hacerlo funcionar, uso flash 8.
Esta todo bien, pero cuando pruebo la pelicula dentro de flash y paso el mouse sobre “el boton” me aparece un mensaje que dice:
Destino no encontrado: Destino=”producto1″ Base=”_level0″
Destino no encontrado: Destino=”producto1″ Base=”_level0″
Funciona todo bien pero no se muestra la imagen. Que puede ser?
Gracias! leanloza@hotmail.com
Lunes, 20 de Abril de 2009 a las 01.48
Me pasa exactamente igual que Leandro, tengo la misma versión y me sale también: Destino no encontrado: Destino=”Producto1″ Base=”_level0″ cuando paso en mouse sobre el botón. A qué se debe? gracias.
Viernes, 22 de Mayo de 2009 a las 18.05
me gustaria saber como hacer un clip con un boton derecho y un izquierdo y cuando este sobre alguno me desplace a la izquierda o derecha segun sea el caso
Viernes, 19 de Junio de 2009 a las 00.36
hola quisiera sacarme una duda cuando explicas la creacion de los botones invisibles y luego pasa a explicar los detalles , estos últimos¿ se insertan directamente en capas diferentes? y en que momento debo hacerlo , me refiero al lugar en donde deben ser colocados…en que frame especificamente debo poner los detalles me explico? gracias y ojala pudieras darme tu respuesta y gracias.
otra cosa en la misma parte de la explicacion pones el siguiente codigo
on (rollOver)…..
pero mas abajo pones on (rollOut)… ¿cual es el que iria? y si van los dos como se coloca en la ventana de acciones ? gracioas de nuevo
Viernes, 3 de Julio de 2009 a las 15.53
A mi me pasa lo mismo que a Leandro y a Cris, que puede estar sucediendo??
Lunes, 31 de Agosto de 2009 a las 13.42
necesito hacer una botonera como la que tienen uds. en la pagina, que quede el boton marcado como que estoy alli, es para una galeria de fotos, como puedo hacerlo ? me podrias ayudar?? Graciassssssss.
Sábado, 7 de Noviembre de 2009 a las 09.25
Hola!Estoy siguiendo tus consejos….pero me he encallado.He llegado a hacer un lió tremendo.
Me explico a ver si me podéis ayudar.
He creado:
1 capa (tumbs_img)-con todas las imágenes(100×100)
2 capa(Botones_invisibles)-encima de los tumbs.
3 capa(tumbs_img)-donde esta convertidos en gráfico.<–cada fotograma de 4capa tiene esta encima)
4capa(detalles)-donde en cada fotograma pongo(gráfico)la imagen con la descripción)
Ahora ya me perdí…. a ver si me podéis ayudar….Porafaaaaa.(el flash no se me da muy bien)
Lunes, 9 de Noviembre de 2009 a las 17.21
Dime exactamente en qué necesitas ayuda… Ten en cuenta que está el archivo fuente (.fla) para que lo descargues y lo uses de base
Jueves, 12 de Noviembre de 2009 a las 16.55
hola tengo una preguta, quiero poner un boton dentro de otro, cuando estoy en el boton1 en over aparece una imagen y un texto, necesito hacer un boton2 ahi pero si quito el mouse del boton1 ya no aparece nada..que debo hacer
Lunes, 16 de Noviembre de 2009 a las 11.25
Para empezar no entiendo qué necesidad puedes tener de introducir un botón dentro de otro. Me gustaría saber cómo estás planteando el tema para poder ayudarte. Saludos.
Domingo, 6 de Diciembre de 2009 a las 20.47
Saludos y muchas gracias.
Para los que usen CS3 les dejo el codigo que me sirvio.Se pueden ayudar con el asistente de script.
on (rollOver) {
gotoAndPlay(”producto1″, 2);
}
on (rollOut) {
gotoAndPlay(”producto1″, 6);
}
Espero les sirva.
Viernes, 15 de Enero de 2010 a las 15.23
Hola Buenas tardes.. necesito un consejo.. quiero hacer que al pasar el mouse por un boton me pase al fotograma siguiente, y que lo haga constantemente al pasar el mouse por encima de el hasta llegar al ultimo clip y hacer lo mismo para devolverme.. Que tengo que hacer.?? es para mi proyecto.Gracias
Martes, 26 de Enero de 2010 a las 13.11
Muchisimas Gracias por el post, me ha sido muy util para realizar esta tarea ya que no me acordaba.
Un saludo
Miércoles, 10 de Marzo de 2010 a las 12.56
Gracias! al fin un script que funciona… lo que sí tuve que usar la sintaxis de punto.
Ah! y como tenía varios botones en MC, o los separaba en diferentes capas o no hacía el tween para que funcione perfecto.
Lunes, 22 de Marzo de 2010 a las 01.13
hola: disculpa eh tratado de hacer un ejemplo de esta animación siguiendo los paso, pero tengo un problema me sale: Destino no encontrado: Destino=”Producto3″ Base=”_level0″ y quisiera saber a que se debe
gracias.
Sábado, 29 de Mayo de 2010 a las 01.28
Hola! Excelente sitio! me encanta como explican y dan ejemplos, la verdad sigan así!
Jueves, 3 de Junio de 2010 a las 01.44
EINSTEN !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! OK !!!!!BUENA CLASE.
Viernes, 4 de Junio de 2010 a las 13.54
Yo solucioné el problema de Destino=”Producto3″ Base=”_level0″ , utilizando el “over” de la línea de tiempo del botón para vincular los contenidos.
Miércoles, 9 de Junio de 2010 a las 21.38
En el fotograma 1 y el 10 edito el gráfico desde el panel de propiedades eligiendo la opción Alpha 0%. Ahora en esos fotogramas, el gráfico se ve transparente.
al hacer eso no me queda en alpha la imagen.
Lunes, 21 de Junio de 2010 a las 21.14
Saludos,
Estoy recién aprendiendo a usar flash.
Acá mi problema:
Cuando ya tengo todo listo y quiero revisar, me sale este mensaje:
1087: Error de sintaxis: se encontraron caracteres adicionales tras el final del programa.
¿Que es lo que estoy haciendo mal?
Gracias de antemano.
Domingo, 1 de Agosto de 2010 a las 16.47
Muy interesante este tutorial, es casi exactamente lo que andaba buscando, pero con esto ya tengo una idea mas clara de como debo trabajar mi proyecto, te agradesco mucho, he entendido muchas cosas con este tuto, saludos.
Jueves, 12 de Agosto de 2010 a las 14.17
Buenas tardes.. sabes que ya llegue a la parte donde tengo que agregar la accion dendole f9 pero no encuentro la opcion stop dentro de las opciones de mi flhas.. yo tengo la vwersion cs3..
Ayudame porfa.. gracias
Viernes, 13 de Agosto de 2010 a las 21.55
Buenas noches.. tengo un problema.. estoy siguiendo la tutorial.. pero cuando tengo que colocar los codigos me da error de sintaxis y otras cosas.. locierto es que no me funciona el codigo que colocaste y tampoco me funciona el codigo que otra persona coloco.. yo tengo la version cs3 y los codigos version 2.0….. ayudenme
Lunes, 16 de Agosto de 2010 a las 11.23
Muchísimas gracias Alejandra de nuevo. Estoy complementando con tu tutorial lo que sabía ya.
ya que p.ej. los diálogos del botón al uso y el del invisible son claritos, sencillos pero sorprendentes en su concepción -y para los errores de código que cometo pues los FLA van de lujo-.
TE EXPLICAS DE MARAVILLA casi siempre respondes a lo que tengo en mente sin hablar contigo claro
Lástima no haber dado contigo en su día (cuando me matriculé del presencial)- En su día sólo encontraba tutoriales de MX o como mucho de Flash8 a un nivel precario (y busqué eh).
El curso (tuto) está pensado cuando se realizó allá por 2008 y evidente que en 2009 y 2010 ha quedado superado por AS3, CS4 o 5 … pero es una buena forma de iniciarse sin que te asustes con parrafadas de código ininteligibles (rollOut es clarito gotoAndStop también) y por eso que continua siendo muy válido.
Y aunque contestar a cuestiones que hace 2 años se plantearon es un poco inútil, ya que veo que la gente sigue escribiendo pues daré mis problemas como ejemplo (que ya he solucionado) para evitar posibles futuros:
- ojo al usar el asistente de script para introducir el código y OJO con los ; al final de línea que introduce (el código tal como lo ha colocado Alejandra aquí funciona pero a mí se me colaron varios ; y me daba el mismo tipo de error que a Leandro, cris y Mirta)
- a francisco que escribió recién le diré q
Lunes, 16 de Agosto de 2010 a las 11.27
a francisco que escribió recien le diré que ABRA los clips de película desde LA BIBLIOTECA y no se fie de lo que tiene en el escenario pues a veces a mí también me pasa que en vez de modificar el movie clip modifica directamente el gráfico y ni me daba cuenta (lo de convertirlo en gráfico es únicamente porque como se usará repetidamente en “nuestra web” sale más a cuenta que mantenerlo como forma y ganas velocidad de respuesta -creo que es únicamente por ello-)
Lunes, 16 de Agosto de 2010 a las 11.28
eso que dirigí a francisco era para diego
Lunes, 13 de Septiembre de 2010 a las 19.55
ey bacano queria hacer una pagina en html pero esto es mas emocionante y llamtivo gracias son unos duro en diseño de flash bacano chao otro aficionado mas
Martes, 14 de Septiembre de 2010 a las 21.31
estuve haciendo lo de los botnes yno me salia me mandaba un meensaje que no encontraba el nombre
Domingo, 31 de Octubre de 2010 a las 03.05
hola, muy bueno el tutorial. Yo estoy usando la version flash CS5 y lo que no puedo hacer es cambiar el valor alfa a 0% en un frame en especifico, solo me deja hacerlo en el icono completo.
Miércoles, 2 de Marzo de 2011 a las 14.46
Esta muy bien…
ahora como se haria esto usanso imagenes desde xml para solo editar este documento y no el flash??
Viernes, 8 de Abril de 2011 a las 22.51
Excelente curso de de Flash, que buen articulo, por favor envienme mas informacion mas detalla
Geacias
Harold
Domingo, 24 de Abril de 2011 a las 19.14
Voy aplicar esta tecnica desde ahora, excelente taller
Gracias
Kevin
Jueves, 12 de Mayo de 2011 a las 19.33
excelente aporte
Martes, 19 de Julio de 2011 a las 20.38
Excelente taller!!! Muy práctico y preciso! Más que útil!
Yo había tenido el mismo problema que dicen Leandro y Cris (comentarios 21 y 22) y lo solucioné cuando me dí cuenta que no le había puesto el nombre a la instancia “producto1″, lo agrego por si alguien nuevo lo lee y le ayuda en algo.
Gracias
Lunes, 21 de Noviembre de 2011 a las 01.26
Hola! Excelente
Viernes, 27 de Enero de 2012 a las 21.13
Excelente taller de apredizaje
Muchas gracias