Cómo hacer botones en Flash

Explicación paso a paso sobre la creación de botones en el programa Flash.
En este capítulo aprenderemos a crear botones y cómo enlazarlos con nuestros archivos o con otras paginas web, que no estén en nuestro servidor.

Flash, nos permite crear botones personalizados, de manera muy rápida; a la vez nos ayuda a darle mas vida a nuestras páginas web; en pocas palabras, nos ayuda a hacer más atractivo nuestro sitio y lógicamente eso es lo que queremos para aumentar el número de visitas a nuestro website.

Por medio de lenguajes de programación (por ejemplo Javascript), también podríamos crear botones, pero sería un poco más complicado; además no podríamos crear exactamente los mismos efectos que podemos hacer con Flash.

Empecemos:

1- Primero crearemos un nuevo símbolo, haciendo la siguiente combinación de teclas: ALT+F8.

Aparecerá el siguiente cuadro:

Crear nuevo símbolo

2- En Nombre (Name), escribe "botón 1", en Comportamiento (Behavior) selecciona la opción Botón (Button), finalmente haz click en Aceptar (OK).

Automáticamente, seremos enviado desde la Escena 1 al escenario del símbolo "botón 1"; ahí es donde crearemos un botón que será incluido en nuestra biblioteca.

El escenario únicamente para la creación de botones, será parecido a la siguiente imagen:


Mira hacia la línea del tiempo (Timeline), como puedes notarlo es diferente a la línea del tiempo de la Escena 1.

La línea del tiempo, del escenario para crear botones es parecida a la siguiente imagen:


Expliquemos el gráfico anterior:

Debemos entender que Reposo, Sobre, Presionado y Zona activa son los cuatro estados de un botón. Veamos a continuación, qué representa cada estado.

Reposo: es cuando el mouse no está colocado sobre nuestro botón o no se ha hecho click sobre él.

Sobre: es cuando el mouse está colocado sobre el botón, pero aún no se ha hecho click sobre él.

Presionado: lógicamente, es cuando haces click sobre el botón.

Zona Activa: su mismo nombre lo indica, es cuando el botón está activo.

Continuemos con la creación de nuestro "botón 1".

La cabeza lectora, en la línea del tiempo tiene que estar señalando el estado de Reposo.

4- Haz click sobre la Herramienta de Rectángulo (Rectangle Tool), que se encuentra en el Panel de Herramientas.

5- Dibuja un rectángulo en el centro del área de trabajo, y ponle el color azul.

6- Después presiona la tecla F6; ésto hará que la cabeza lectora en la línea del tiempo pase al estado Sobre.

Como podrás notarlo, el botón se copia, así que no necesitarás hacer un nuevo dibujo.

7- Aún estamos en el estado Sobre, si no tienes seleccionado el botón, hazlo (con la Herramienta Flecha y haz doble click sobre nuestro dibujo), luego dirígete a Color de Relleno que se encuentra en la sección colores del Panel de Herramientas, y escoge el color rojo, como se muestra a continuación:


8- Después presiona nuevamente la tecla F6, para que la cabeza lectora pase al estado Presionado, y cambia el color de relleno de la misma forma que lo hicimos en el paso 7; y escoge un color verde. Finalmente presiona por ultima vez F6 para pasar al estado Zona activa, ésto hará que se copie el botón. Para este último estado, no es realmente necesario cambiar el color de fondo.

Con los colores que hemos aplicado, haremos que el botón cambie de color, cuando se lleven a cabo los Estados de los botones anteriormente descritos.

Nuestro botón ha sido creado, así que puedes volver a la Escena 1, abre la biblioteca y verás que ahí esta el símbolo llamado "botón 1", podrás arrastrarlo al escenario las veces que quieras para hacer varias copias de él.

Toma la Herramienta de Texto (A), y escribe lo que desees, después coloca el texto sobre el botón creado; para probar la película haz la tradicional combinación de teclas CTRL + Enter. Si después quieres ver la película en tu explorador de internet, únicamente presiona las teclas CTRL + F12.

Podemos ver un ejemplo del botón creado siguiendo estos pasos.

Compartir

Comentarios

María del Carmen Pié

07/3/2005
Tengo un problemita y espero que me puedan ayudar: Armo el botón tal cual se describe en el tutorial, lo copio a la escena y le agrego el texto (tal cual se indica), pero entonces, cuando lo pruebo o lo previsualizo en el explorador, la parte del texto no queda activa, es decir: solamente puedo ver el cursor de link ("la manito") en el cuerpo del botón, pero sobre el texto no me permite linkear... ¿A qué se debe este problema? Gracias desde ya y felicitaciones por el hermoso servicio que nos brindan a diseñadores y estudiantes. BESO.

Alfonso

13/5/2005
Cuando pruebo el boton en la pagina, No solo el area del boton es un are de flash si no gran parte de la pagina como lo soluciono?

ele

11/1/2006
par link a url, creas un boton, en aciones , on release, geturl... la que sea... esta en aciones, global functions, browser.. si no lo ves siempre lo puedes escribir tu.

sebastián

09/8/2006
acá vá la explicación de como solucionar el problema del texto del botón que no se puede cliquear. Para que el botón sea "parte" del botón, por así decir, o sea, que se pueda hacer clic en el texto como en el botón en sí, hay que configurar las propiedades de dicho texto. En el botón con el problema, hacé clic en el texto puesto (por ej: home) y ve al panel propiedades. en donde dice "texto dinámico", se cambia por "texto estático". solo es eso. Te vas a dar cuenta cuando hagas la prueba, de que el texto pasa a ser parte del botón.

Dago

20/12/2006
Lo que sucede es que a la hora que se encuentren en la opcion del simbolo, creenle el texto encima del boton. Cuando salgan a escena, solo jalan el boton desde la biblioteca y ctrl+enter se podra visuaizar.

miguel

13/9/2007
bueno amigo me sirvio vastante tu modo de hacer un boton pero tienes una falla no es alt+f8, mas bien es control+8 ok pero todo esta chevere xD

dunia

27/2/2009
hola, acabo de probar hacer un botòn y me funciono ok. lo que pasa es que no me sale el texto a la hora de probarlo. leì los comentarios pero no entiendo.

edgar

08/3/2009
ktal pero como la programo al boton para que aparesca en la reproduccion

daniel

10/3/2009
estuvo padre me gusto

daniel

12/3/2009
si me gusto

lizbeth

07/4/2009
socializar
hola me gustaria que me mandaran todos los pasos para hacer una pagina en flash

Aaron

22/4/2009
Ya tengo el boton
A ver gracias esta pagina me ha ayudado mucho. mi problema es que en mi trabajo me pidieron diseñar la pagina de internet, tengo conocimientos en flash, pero muy pcoos, no hago esto desde que deje la universiad...el punto es que ya tengo hecha la introduccion de la pagina y ahi mismo hice un boton para entrar a ella, ahora como hago para que ese boton me lleve a la pagina...espero que me haya explicado bien....hago otra escena con los contenidos de la pagina y luego las enlazo o ke? espero que alguien me pueda decir y ayudar

Wilson

27/5/2009
info de ayuda
Realmente es muy sencilla la explicacion y muy buena.
Gracias

paco

10/7/2009
bien
muy bien me sirbio de mucho tu aporte pero no se como acer que por ejemplo aga explotar otro objeto

wilbert

19/7/2009
ayuda por fa
tengo un pequeño problema espero que puedan ayudarme necesito que el boton creado en flash enbiarlo al dreamwever y que ese boton me llame a otra pagina por fabor me podrian indicar cual es el codigo

ivan

25/7/2009
correcion
muy buen articulo pero tienes otro error la zona activa no es cuando el boton esta activo , es cuando el cursor se acerca al boton a unos milimetros lo detecta, esa es la zona activa.

juan carrion

29/7/2009
felicitar
tenia problemas para crear un boton en flash pero el procedimiento dictado aqui me resulto muy didactico, ahora ya puedo crear los mios con facilidad, gracias y felicidades por este tema

INMA

27/8/2009
TAMAÑO DEL BOTÓN
Mi problema es que consigo hacer el botón pero al insertarlo en una celda del dreamweaver inserta el botón y digamos la cuadrícula de fondo, no solo el botón. Llevo toda la mañana intentando solucionarlo pero me estoy volviendo loca porque no lo consigo, q puedo hacer?cómo hago para que solo se guarde exclusivamente el botón que he creado con sus dimensiones?

chamisario

28/8/2009
Tu explicacion vale verrga
para un novato jamas lo hara funcionar, buuu

matias

28/9/2009
.swf
me podrias dar el codigo .swf

SARA

02/10/2009
Flash
Gracias por la explicación,¿ cómo hacer botones en Flash? es la mejor que he visto en todas lae que he navegado para conocer mas y apicar en un programas.

felipe

18/12/2009
co abrir...
pero, como se abre la biblioteca???

laidy laura

23/12/2009
Hola
Su clase me aburre, eso me enferma

Emilio Orochi

15/1/2010
muchas gracias
gracias
no hay muchos videos donde te enselen muy bn y detalladam,ente komo este
gracias

axdiseno

26/1/2010
problemas con los botones, saltos de escena
Hola, por favor necesito una explicación sobre las acciones en los botones. Le agrego un "goto and play" escena ...(tengo 5 escenas), funciona la interacción, pero al clickear me marca otra escena diferente. Además clickeo dos veces el mismo botón y me muestra dos escenas cualquiera, ni siquiera la escena indica.Que problema puedo tener?
Espero la ayuda , por favor, agradecido.

ej: on (release) {
gotoAndPlay("portada_cityhouse", 1);
}



axdiseñointegral

jose

09/2/2010
botones flasher y darle un linnk
hago todos los pasos pero al final como exporto el boton para el dream weaver y darle un linnk

Alfonso

11/2/2010
Tamaño del boton.
Quisiera saber el tamaño predeterminado de los botones, y ¿Cómo hacer, para que cuando insertes el boton?, no se vea la parte blanca del area de trabajo, solo el puro boton.

Patricia

26/3/2010
Pregunta
hola mira yo tengo una pregunta, no podras pasarme unos codigos de los mismo botones para cambiar de escena??? te lo agradeceria muchisimo.

Graicias

Natalia Cerda

22/4/2010
Boton
Este tutorial sirve para hecr un boton facilmente

Natalia Cerda

22/4/2010
nUEVO BOTON PARA EJEECUTAR
eSTE BOTON ES EN FLASH 8 CREO

Jorge

27/4/2010
Boton de Flash
Me he divertido mucho leyendo sus comentarios, algunos tienen nombre chistosos haha

Keila

10/5/2010
Como crear sonido en un boton
Hola, quisiera poder encontrar alguien que me ayude no conozco la programacion en flash pero medijeron que podria hacer que una imagen tenga sonido, estoy creando un software educativo y necesito hacerlo lo mas dinamico posibles si hay alguien que me pueda ayudar. por favorrrrrrrrrrrrrrrrrrrr gracias

Jike

06/7/2010
Texto Estático
Mil gracias! No sabía como solucionar ese problema, pues soy nuevo en esto.

paulina

12/7/2010
no me gusta
no me gusto la forma de explicar de este tema por q no lo dsaben explicar por q ai gente q no sabe nd i a si no le entiende nd

alexis

12/7/2010
no sirve
esto no sirve pa puta cosa

atreuh

14/8/2010
Enfrascado
Hola quisiera ver si me puedes ayudar crear un boton pero con el teclado; es decir que cuando oprima una letra del teclado me mande al siguiente fotograma.

Gracias ojalá me puedas ayudar ya que estoy un poco enfrascado en este punto y lo peor de todo es que en alguna ocasión lo llegue a realizar.

didier

13/9/2010
fsdfsfsdfsfsdfds
fdsfsf

hola

06/10/2010
ayuda, por si les sirve a algunos
Estuve tambien con algunos problemas, es decir no me salio a la primeralo de los botones, pero se agradece mucho el tutorial esta muy bueno: yendo al punto les qurria decir tambien tuve problemas con la dimension del boton o sea ocupaba un campo muy grande en la celda y no solo el tamaño del boton, entonces descubri que debia redimensionar toda el area de trabajo o sea click en la ventana blanca de trabajo y luego en el panel de propiedades (abajo) redimensionar al tamaño que queria y entonces hacer que el boton sea de ese tamaño, espero que me entiendan. y en cuanto al sonido tambien lo pude agregar primero adjuntando el mp3 a la libreria (control+r) y luego arrastrando este mp3 desde la libreria (control+l) hasta el fotograma en el que queria que suene, por ejemplo en el de onmouseover y grabarlo y listo ya suena y tiene el tamaño que quiero. Espero que les sirva de ayuda si tuvieron el mismo problema que yo :)

nestor

28/2/2011
Crear botones en flash
Excelente ayuda me prestastes ahora falta es tener la creatividad muchas gracias...

noralba ortiz rodriguez

24/7/2011
botones en flash
Hola profe gracias por todos tu conocimientos
aunque todo lo aplico cuando tu lo estas explicando luego dentro en duda y se me complica todo pues no se como incorporar el código para activar el botón de la siguiente escena.
gracias noralba ortíz sopetrán grupo D

juan david

20/2/2012
boton flash
hola cree un boon en flash con el codigo que me enviaron pero no me funciona y por el contrario cuando lo compilo me sale un error que dice "se encontraron caracteres adicionales al final", no se que hacer me gustaria que me ayuden por favor con este problema por que no puedo hacer nada,

muchas gracias

Dulce yolanda

15/9/2012
trabajo
jajaja eso esta bien chafa no biene todo explicado falta mas no ce donde esta el dese para pegar elboton