SlideShare una empresa de Scribd logo
1 de 5
4.1 Crear Botones
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:




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.


4.2 Programar propiedades de los Botones

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.


4.3 Programar acciones De Los Botones

Para programas lo botones tendrán que haber comprendido a la perfección que son
los símbolos---
Ahora el botón en instancias básicas nos sirve para darle control a una película estos
controles son;
->Reproducir
->Detener
->Ir a
Estos controles incluso pueden ser, utilizados para la creación de un menú y de un
pequeño juego en flash eso depende del ingenio que tengas para crear películas flash,
Esta es la base, luego creare mas explícitamente (y editare este tutorial) para la
creación de botones mas avanzados, que realmente lo único que cambia será;
Armas botones complejos(diseño)
Y cambio de programación con el mismo botón
Esta es la estructura clave de un botón cuando lo programamos...
Luego de abrir el panel de acciones (desde el menú Ventana), y de seleccionar
nuestro botón, se escribe en panel de acciones
on (instancia){
ejecutar si acción se cumple
}
la "instancia" es el momento en el que sucede el cambio en una película... "press"
cuando lo presionamos con el ratón, ejecutara la acción siguiente, que está en
cerrado por "{}"
Instancias Básicas
"press" cuando se presiona
"release" cuando se libera (presiona y deja de presionar)
"rollOver" cuando el puntero simplemente se des-lisa en el
"rollOut" cuando el puntero sale del rango del área del botón
"dragOver" arrastra sobre
"dragOut" arrastra fuera

dentro de las llaves se realizara cualquier acción que se señale, solo veremos, y
experimentar;
play(); reproduce
stop(); detiene
getURL("nombre del sitio", objetivo); el objeto puede quedarse sin especificar... es solo
para que el navegador sepa si abrirá el link en la ventana en una nueva ventana o
en pestaña NOTA: EL LINK TIENE QUE TENER "http://"
nextFrame(); reproduce frame pero frame al momento de cada click
prevFrame(); Retrocede 1 fotograma por cada click
gotoAndPlay("nombredeecena", Nº fotograma); nos sirve para ir y venir de un
fotograma a otro saltando fotogramas y reproduciendo desde la escena y fotograma
actual
gotoAndStop("nombredeecena", Nº fotograma); lo mismo pero esta se detiene
nextScene(); siguiente escena reproduciendo
prevScene(); anterior escena reproduciendo


4.4 Operar botones
Para crear diferentes efectos en cada estado, podemos hacerlo de una forma fácil
pero efectiva, partiendo del mismo dibujo, y cambiando sólo el tono de color, por
ejemplo.
También podríamos trabajar con diferentes capas para crear otros objetos dentro de
cada estado, por ejemplo, en "sobre" podemos crear el típico "letrero" de fondo
amarillo, donde aparece una frase explicando el resultado de pulsar el botón, o una
pequeña animación del mismo botón, por ejemplo, cambiando su tamaño,
rotándolo, etc...
Primero debemos insertar un fotograma clave en la posición "Sobre".
Para hacer que aparezca más tenue al pasar el ratón por encima, en el panel de
efectos, eligiendo los parámetros que aparecen en esta imagen:




Insertando otro fotograma clave en la posición "Presionado", podemos hacer otro
cambio con estos parámetros, para darle otro efecto:




Si lo deseamos, podemos asignar una zona activa, creando en dicha posición un
fotograma clave, pero en este caso, no es necesario...
Veamos a continuación los diferentes estados del botón, después de los cambios
realizados:




Para usar el botón, basta con insertarlo desde la biblioteca a la escena.

Más contenido relacionado

La actualidad más candente (18)

Unidad 4 "Manipular botones"
Unidad 4 "Manipular botones"Unidad 4 "Manipular botones"
Unidad 4 "Manipular botones"
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 
Macromedia flash 8 unidad 4
Macromedia flash 8 unidad 4Macromedia flash 8 unidad 4
Macromedia flash 8 unidad 4
 
Unidad 4♥
Unidad 4♥Unidad 4♥
Unidad 4♥
 
Unidad 4♥
Unidad 4♥Unidad 4♥
Unidad 4♥
 
4 manipular botones
4 manipular botones4 manipular botones
4 manipular botones
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 
Los botones
Los botonesLos botones
Los botones
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 
Macromedia flash unidad 4
Macromedia flash unidad 4Macromedia flash unidad 4
Macromedia flash unidad 4
 
Macromedia flash 8 unidad 6
Macromedia flash 8 unidad 6Macromedia flash 8 unidad 6
Macromedia flash 8 unidad 6
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 

Destacado

제2회 뇌기능조절 연구모임
제2회 뇌기능조절 연구모임제2회 뇌기능조절 연구모임
제2회 뇌기능조절 연구모임Kyongsik Yun
 
5 Reasons Why 3VR VIP Is Better Than a DVR
5 Reasons Why 3VR VIP Is Better Than a DVR5 Reasons Why 3VR VIP Is Better Than a DVR
5 Reasons Why 3VR VIP Is Better Than a DVRNick Wooler
 
Cairo 2nd Petrol Lecture 8
Cairo 2nd Petrol Lecture 8Cairo 2nd Petrol Lecture 8
Cairo 2nd Petrol Lecture 8Esmail Bialy
 
Powerpoint
PowerpointPowerpoint
PowerpointYaz Diaz
 
Programa para la transformacion de la calidad educativad1 pbro comunidad de ...
Programa para la transformacion de la calidad  educativad1 pbro comunidad de ...Programa para la transformacion de la calidad  educativad1 pbro comunidad de ...
Programa para la transformacion de la calidad educativad1 pbro comunidad de ...luzgomezgutierrez
 
Energia
EnergiaEnergia
Energiafeneta
 
Articulado reforma (oct03) definitivo (3)
Articulado reforma (oct03) definitivo (3)Articulado reforma (oct03) definitivo (3)
Articulado reforma (oct03) definitivo (3)Ana Maria
 
El cajero de los ninios
El cajero de los niniosEl cajero de los ninios
El cajero de los niniosNayeli
 
The film industry overview lesson slides
The film industry overview lesson slidesThe film industry overview lesson slides
The film industry overview lesson slidesLiz Davies
 
Barquito Papel
Barquito PapelBarquito Papel
Barquito Papelmamiago
 

Destacado (20)

Practica27
Practica27 Practica27
Practica27
 
Apuntes condicion física 1º eso
Apuntes condicion física 1º esoApuntes condicion física 1º eso
Apuntes condicion física 1º eso
 
제2회 뇌기능조절 연구모임
제2회 뇌기능조절 연구모임제2회 뇌기능조절 연구모임
제2회 뇌기능조절 연구모임
 
5 Reasons Why 3VR VIP Is Better Than a DVR
5 Reasons Why 3VR VIP Is Better Than a DVR5 Reasons Why 3VR VIP Is Better Than a DVR
5 Reasons Why 3VR VIP Is Better Than a DVR
 
Cairo 2nd Petrol Lecture 8
Cairo 2nd Petrol Lecture 8Cairo 2nd Petrol Lecture 8
Cairo 2nd Petrol Lecture 8
 
Testimonial / Application Notes
Testimonial / Application NotesTestimonial / Application Notes
Testimonial / Application Notes
 
Powerpoint
PowerpointPowerpoint
Powerpoint
 
Programa para la transformacion de la calidad educativad1 pbro comunidad de ...
Programa para la transformacion de la calidad  educativad1 pbro comunidad de ...Programa para la transformacion de la calidad  educativad1 pbro comunidad de ...
Programa para la transformacion de la calidad educativad1 pbro comunidad de ...
 
Energia
EnergiaEnergia
Energia
 
Articulado reforma (oct03) definitivo (3)
Articulado reforma (oct03) definitivo (3)Articulado reforma (oct03) definitivo (3)
Articulado reforma (oct03) definitivo (3)
 
Practica20 121020170139-phpapp01
Practica20 121020170139-phpapp01Practica20 121020170139-phpapp01
Practica20 121020170139-phpapp01
 
International day of the family peru 2013
International day of the family peru 2013International day of the family peru 2013
International day of the family peru 2013
 
Bruno2
Bruno2Bruno2
Bruno2
 
6415
64156415
6415
 
Blogs
BlogsBlogs
Blogs
 
Oob aug21 event
Oob aug21 eventOob aug21 event
Oob aug21 event
 
Transferencia de conocimientos entre ciencia e industria en el sector de biot...
Transferencia de conocimientos entre ciencia e industria en el sector de biot...Transferencia de conocimientos entre ciencia e industria en el sector de biot...
Transferencia de conocimientos entre ciencia e industria en el sector de biot...
 
El cajero de los ninios
El cajero de los niniosEl cajero de los ninios
El cajero de los ninios
 
The film industry overview lesson slides
The film industry overview lesson slidesThe film industry overview lesson slides
The film industry overview lesson slides
 
Barquito Papel
Barquito PapelBarquito Papel
Barquito Papel
 

Similar a Crear y programar botones en Flash (15)

Unidad 4
Unidad 4Unidad 4
Unidad 4
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 
Guia boton animacion basica
Guia boton animacion basicaGuia boton animacion basica
Guia boton animacion basica
 
Unidad 4 de gaem
Unidad 4 de gaemUnidad 4 de gaem
Unidad 4 de gaem
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 
Unidad 4 de gaem
Unidad 4 de gaemUnidad 4 de gaem
Unidad 4 de gaem
 
4manipularbotones 121006192501-phpapp02 (1)
4manipularbotones 121006192501-phpapp02 (1)4manipularbotones 121006192501-phpapp02 (1)
4manipularbotones 121006192501-phpapp02 (1)
 
Fhash 6
Fhash 6Fhash 6
Fhash 6
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 

Más de Marco Antonio Lopez Cazares (20)

Practica29
Practica29Practica29
Practica29
 
Practica30
Practica30Practica30
Practica30
 
Unidad7
Unidad7 Unidad7
Unidad7
 
Practica 26
Practica 26Practica 26
Practica 26
 
Practica 25
Practica 25Practica 25
Practica 25
 
Practica 24
Practica 24Practica 24
Practica 24
 
Práctica 28
Práctica 28Práctica 28
Práctica 28
 
Unidad 6
Unidad 6Unidad 6
Unidad 6
 
Practica 23
Practica 23Practica 23
Practica 23
 
Unidad5 121020170718-phpapp02
Unidad5 121020170718-phpapp02Unidad5 121020170718-phpapp02
Unidad5 121020170718-phpapp02
 
Practica 21[1]
Practica 21[1]Practica 21[1]
Practica 21[1]
 
Practica 22
Practica 22Practica 22
Practica 22
 
Cuestionario[1]
Cuestionario[1]Cuestionario[1]
Cuestionario[1]
 
Cuestionario unidad 5
Cuestionario unidad 5Cuestionario unidad 5
Cuestionario unidad 5
 
Practica19 121020170117-phpapp01
Practica19 121020170117-phpapp01Practica19 121020170117-phpapp01
Practica19 121020170117-phpapp01
 
Practica18 121020170102-phpapp02
Practica18 121020170102-phpapp02Practica18 121020170102-phpapp02
Practica18 121020170102-phpapp02
 
Practica16 121010105406-phpapp02
Practica16 121010105406-phpapp02Practica16 121010105406-phpapp02
Practica16 121010105406-phpapp02
 
Practica15 121010105343-phpapp02
Practica15 121010105343-phpapp02Practica15 121010105343-phpapp02
Practica15 121010105343-phpapp02
 
Practica14 121003123456-phpapp01
Practica14 121003123456-phpapp01Practica14 121003123456-phpapp01
Practica14 121003123456-phpapp01
 
Practica17 121020170502-phpapp01
Practica17 121020170502-phpapp01Practica17 121020170502-phpapp01
Practica17 121020170502-phpapp01
 

Crear y programar botones en Flash

  • 1. 4.1 Crear Botones 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: 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:
  • 2. Mira hacia la línea del tiempo (Timeline), como puedes notarlo es diferente a la línea del tiempo de la Escena 1. 4.2 Programar propiedades de los Botones 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
  • 3. 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. 4.3 Programar acciones De Los Botones Para programas lo botones tendrán que haber comprendido a la perfección que son los símbolos--- Ahora el botón en instancias básicas nos sirve para darle control a una película estos controles son; ->Reproducir ->Detener ->Ir a Estos controles incluso pueden ser, utilizados para la creación de un menú y de un pequeño juego en flash eso depende del ingenio que tengas para crear películas flash,
  • 4. Esta es la base, luego creare mas explícitamente (y editare este tutorial) para la creación de botones mas avanzados, que realmente lo único que cambia será; Armas botones complejos(diseño) Y cambio de programación con el mismo botón Esta es la estructura clave de un botón cuando lo programamos... Luego de abrir el panel de acciones (desde el menú Ventana), y de seleccionar nuestro botón, se escribe en panel de acciones on (instancia){ ejecutar si acción se cumple } la "instancia" es el momento en el que sucede el cambio en una película... "press" cuando lo presionamos con el ratón, ejecutara la acción siguiente, que está en cerrado por "{}" Instancias Básicas "press" cuando se presiona "release" cuando se libera (presiona y deja de presionar) "rollOver" cuando el puntero simplemente se des-lisa en el "rollOut" cuando el puntero sale del rango del área del botón "dragOver" arrastra sobre "dragOut" arrastra fuera dentro de las llaves se realizara cualquier acción que se señale, solo veremos, y experimentar; play(); reproduce stop(); detiene getURL("nombre del sitio", objetivo); el objeto puede quedarse sin especificar... es solo para que el navegador sepa si abrirá el link en la ventana en una nueva ventana o en pestaña NOTA: EL LINK TIENE QUE TENER "http://" nextFrame(); reproduce frame pero frame al momento de cada click prevFrame(); Retrocede 1 fotograma por cada click gotoAndPlay("nombredeecena", Nº fotograma); nos sirve para ir y venir de un fotograma a otro saltando fotogramas y reproduciendo desde la escena y fotograma actual gotoAndStop("nombredeecena", Nº fotograma); lo mismo pero esta se detiene nextScene(); siguiente escena reproduciendo prevScene(); anterior escena reproduciendo 4.4 Operar botones Para crear diferentes efectos en cada estado, podemos hacerlo de una forma fácil pero efectiva, partiendo del mismo dibujo, y cambiando sólo el tono de color, por ejemplo. También podríamos trabajar con diferentes capas para crear otros objetos dentro de cada estado, por ejemplo, en "sobre" podemos crear el típico "letrero" de fondo amarillo, donde aparece una frase explicando el resultado de pulsar el botón, o una pequeña animación del mismo botón, por ejemplo, cambiando su tamaño, rotándolo, etc... Primero debemos insertar un fotograma clave en la posición "Sobre".
  • 5. Para hacer que aparezca más tenue al pasar el ratón por encima, en el panel de efectos, eligiendo los parámetros que aparecen en esta imagen: Insertando otro fotograma clave en la posición "Presionado", podemos hacer otro cambio con estos parámetros, para darle otro efecto: Si lo deseamos, podemos asignar una zona activa, creando en dicha posición un fotograma clave, pero en este caso, no es necesario... Veamos a continuación los diferentes estados del botón, después de los cambios realizados: Para usar el botón, basta con insertarlo desde la biblioteca a la escena.