SlideShare una empresa de Scribd logo
1 de 5
UNIDAD 4

4. Manipular botones.

   Los símbolos de tipo Botón son los que aportan la mayor parte de
 la interactividad de las películas Flash con aquel que la está
 visualizando. Un botón, en Flash, es igual que cualquier botón de
 cualquier entorno informático, sea web o cualquier otro.

   Son elementos que se prestan a que el usuario los presione,
 desencadenando al hacerlo una serie de acciones. También es
 habitual ver como este tipo de elementos reaccionan cuando se les
 pasa el ratón por encima o cuando se les está pulsando, por ejemplo.

   Pues bien, para conseguir los efectos interactivos que acabamos
 de mencionar en otros lenguajes orientados a la web, que es el caso
 que nos ocupa, debemos crear programas relativamente grandes.
 Esto es un inconveniente bastante grande ya que el uso de los
 botones es una práctica muy habitual en el diseño en Internet. Sin
 embargo, en Flash no ocurre así. Su interfaz está diseñada de manera
 especial para la creación de botones, lo que nos permite crear todos
 estos efectos de una manera muy sencilla.

   Al igual que los otros símbolos de Flash 8, los botones tienen su
 propia línea de tiempos. Esta es independiente pero, sin embargo,
 está formada únicamente por cuatro fotogramas, uno para cada
 estado posible del botón.




   Reposo. Aspecto por defecto del botón, es decir, cuando el
 puntero del ratón no está situado sobre él.

   Sobre. Aspecto del botón cuando situamos el puntero sobre él.

  Presionado. Apariencia que deseamos tenga nuestro botón
 mientras lo mantengamos pulsado.
Zona activa. Aquí debemos indicar el área real en la que queremos
que actúe nuestro botón. Esto es importante sobre todo en botones
compuestos sólo por texto como veremos más adelante.

  Parece que la limitación de fotogramas podría implicar una
limitación en la capacidad de espectacularidad y utilidad de estos
símbolos, pero no es así.

  Los botones pueden contener a su vez otros símbolos, como clips o
gráficos (también de tipo Bitmap). La unión de las posibilidades de
todos los símbolos dota a los botones de gran espectacularidad.




   4.1. Crear botones
     En la creación de un botón podemos considerar dos fases. En la
primera vamos a convertir nuestro objeto a símbolo de tipo botón y
posteriormente veremos cómo completarlo internamente, lo que nos
ayudará a entender mejor dicha estructura.


   Primeramente crearemos el objeto que representará el aspecto por
defecto de nuestro botón con las herramientas que nos ofrece Flash
8.

  Seleccionaremos el objeto y accederemos al menú Insertar →
Convertir en Símbolo, le daremos el comportamiento Botón y
asignaremos un nombre a nuestro nuevo símbolo.




  De esta forma ya tenemos transformado el objeto para que se
comporte como un botón. Ahora lo completaremos internamente.


  Para determinar cómo debe reaccionar el botón en función de las
acciones del ratón, lo editaremos haciendo clic con el botón derecho
del ratón sobre nuestro nuevo botón y seleccionando la opción
Editar.
Cuando tengamos delante la línea de tiempos del botón (observa
 que tiene el aspecto que hemos mostrado anteriormente),
 seleccionaremos cada uno de los frames (sobre, reposo, presionado y
 zona activa) y pulsaremos F6 para crear un fotograma clave en cada
 uno de ellos.




   Ahora ya podemos modificar el aspecto inicial del botón para cada
 posición del cursor y marcar el área de acción del botón (fotograma
 Hit) en la que simplemente podremos dejar la misma figura que la
 inicial (en este caso sólo es importante la forma del objeto, no los
 colores u otras cosas) o bien dibujar con las herramientas de dibujos
 de Flash una nueva figura, en cuya superficie "se sentirá aludido"
 nuestro botón.

  Este es un botón muy básico, como veremos se pueden complicar
 mucho, pero para empezar nos servirá con este.

   Si una vez creado el botón queremos observar sus distintos
 estados y todavía no hemos terminado la película entera y por tanto
 no deseamos tener que reproducirla toda podemos hacerlo
 accediendo a la Biblioteca de nuestra película y seleccionando el
 botón creado. Para ver lo que comentábamos bastará con pulsar la
 tecla situada a la derecha de la vista previa del símbolo.




  4.2. Programar propiedades de los botones.

En Actionscript 2.0 existía la opción de crear un botón, hacer click
encima y escribir código encima del propio objeto. En AS3 no existe la
posibilidad de escribir código sobre clips de película ni botones, todo el
código debe estar situado en la linea de tiempo o en clases. Esto puede
parecer un inconveniente, pero a la hora de hacer desarrollos
medianos/complejos hace las cosas mucho más sencillas.

Además programar botones en AS3 no es más complicado que hacerlo
en AS2, sólo tenemos que añadir el evento al objeto con
addEventListener, indicar que evento añadimos ("Event.CLICK",
"Event.MOUSE_DOWN, etc...) y crear la función que se vá a ejecutar
cuando se reproduzca el event. Es decir, que traducido al castellano, lo
que decimos es:




El código Actionscript para programar el Botón es este:




   1. Boton_bt.addEventListener(MouseEvent.CLICK,pulsado);
   2. Boton_bt.addEventListener(MouseEvent.MOUSE_OVER,over);
   3. Boton_bt.addEventListener(MouseEvent.MOUSE_OUT,out);
   4.
   5. function pulsado(e:MouseEvent):void{
   6.    Texto_txt.text = ("Has pulsado");
   7. }
   8.
   9. function over(e:MouseEvent):void{
   10. Texto_txt.text = ("Has hecho over");
   11. }
   12.
   13. function out(e:MouseEvent):void{
   14. Texto_txt.text = ("Has hecho out");
   15. }




  4.3. Programar acciones de los botones.
Puesto que existen multitud de acciones que se pueden aplicar
  tanto a los botones, como a otros elementos de Flash 8 vamos a
  comentar dos de las más comunes:

    1) Abrir una página web. Con esto conseguiremos abrir una página
  cualquiera de internet (o una película Flash), lo que nos servirá para
  irnos desplazando por webs que contengan más de una página, o
  permitir al usuario descargarse archivos entre otras cosas.



   Para añadir una acción a un botón es necesario el uso de
  ActionScript (en el tema 17 se tratará con mayor profundidad).

    Por lo tanto, los pasos a seguir serán los siguientes:

Selecciona el botón haciendo clic sobre él, pues es a él al que irá
asociada la acción.

Más contenido relacionado

La actualidad más candente

La actualidad más candente (17)

Unidad4
Unidad4Unidad4
Unidad4
 
Trabajo de eventos de visual basic
Trabajo de eventos de visual basicTrabajo de eventos de visual basic
Trabajo de eventos de visual basic
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 
Comprende..[2]
Comprende..[2]Comprende..[2]
Comprende..[2]
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 
Comandos operativos de windows 7 u
Comandos  operativos de   windows 7 uComandos  operativos de   windows 7 u
Comandos operativos de windows 7 u
 
Biblia de word 2007
Biblia de word 2007Biblia de word 2007
Biblia de word 2007
 
Biblia De Word 2007
Biblia De Word 2007Biblia De Word 2007
Biblia De Word 2007
 
Ada n° 4 bloque 2 informatica i
Ada n° 4 bloque 2 informatica iAda n° 4 bloque 2 informatica i
Ada n° 4 bloque 2 informatica i
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 
A.D.A 5
A.D.A 5A.D.A 5
A.D.A 5
 
Ada 4
Ada 4Ada 4
Ada 4
 
02. Procesador De Textos. Explorando El Entorno
02. Procesador De Textos. Explorando El Entorno02. Procesador De Textos. Explorando El Entorno
02. Procesador De Textos. Explorando El Entorno
 
4.2. "programar propiedades en los botones"
4.2. "programar propiedades en los botones"4.2. "programar propiedades en los botones"
4.2. "programar propiedades en los botones"
 
Ofimatica basica word
Ofimatica basica  wordOfimatica basica  word
Ofimatica basica word
 
actividades 1 al 5
actividades 1 al 5actividades 1 al 5
actividades 1 al 5
 
Desarrolla aplicaciones de escritorio con bases de datos
Desarrolla aplicaciones de escritorio con bases de datosDesarrolla aplicaciones de escritorio con bases de datos
Desarrolla aplicaciones de escritorio con bases de datos
 

Destacado (20)

Eki proiektua
Eki proiektuaEki proiektua
Eki proiektua
 
HANDS - Mobilize Breakfast - Abril 2013
HANDS - Mobilize Breakfast - Abril 2013HANDS - Mobilize Breakfast - Abril 2013
HANDS - Mobilize Breakfast - Abril 2013
 
REDES
REDESREDES
REDES
 
El agua
El aguaEl agua
El agua
 
Unidad 1 jahc
Unidad 1 jahcUnidad 1 jahc
Unidad 1 jahc
 
Animacion 2 d
Animacion 2 dAnimacion 2 d
Animacion 2 d
 
Vocabulario
VocabularioVocabulario
Vocabulario
 
2ª Reunion Responsables de Formación en Centro 2012-2013
2ª Reunion Responsables de Formación en Centro 2012-20132ª Reunion Responsables de Formación en Centro 2012-2013
2ª Reunion Responsables de Formación en Centro 2012-2013
 
Diferencias entre inittab y upstart
Diferencias entre inittab y upstartDiferencias entre inittab y upstart
Diferencias entre inittab y upstart
 
Safari vs Google Chrome
Safari vs Google ChromeSafari vs Google Chrome
Safari vs Google Chrome
 
Las redes sociales
Las redes sociales Las redes sociales
Las redes sociales
 
Power Ale Pdf
Power Ale PdfPower Ale Pdf
Power Ale Pdf
 
Plaquette Worldwide e-doceo
Plaquette Worldwide e-doceoPlaquette Worldwide e-doceo
Plaquette Worldwide e-doceo
 
Manual
Manual Manual
Manual
 
Leer y Escribir correctamente
Leer y Escribir correctamenteLeer y Escribir correctamente
Leer y Escribir correctamente
 
sofware
sofwaresofware
sofware
 
LINKEDIN
LINKEDINLINKEDIN
LINKEDIN
 
MANUAL DE EXCHANGE
MANUAL DE EXCHANGEMANUAL DE EXCHANGE
MANUAL DE EXCHANGE
 
Redes
RedesRedes
Redes
 
Raid Por Software
Raid Por SoftwareRaid Por Software
Raid Por Software
 

Similar a Unidad 4 (20)

Gaem unidad 4
Gaem unidad 4Gaem unidad 4
Gaem unidad 4
 
Unidad 4 de gaem
Unidad 4 de gaemUnidad 4 de gaem
Unidad 4 de gaem
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 
Unidad 4 de gaem
Unidad 4 de gaemUnidad 4 de gaem
Unidad 4 de gaem
 
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
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 
Unidad4 121003115123-phpapp01
Unidad4 121003115123-phpapp01Unidad4 121003115123-phpapp01
Unidad4 121003115123-phpapp01
 
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
 
Action scrip
Action scrip Action scrip
Action scrip
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 

Más de Bichitaa Stradlin (20)

29
2929
29
 
Practica30 121203225017-phpapp02
Practica30 121203225017-phpapp02Practica30 121203225017-phpapp02
Practica30 121203225017-phpapp02
 
29
2929
29
 
Practica 27
Practica 27Practica 27
Practica 27
 
Practica 26
Practica 26Practica 26
Practica 26
 
Practica 24
Practica 24Practica 24
Practica 24
 
Unidad 6
Unidad 6Unidad 6
Unidad 6
 
28
2828
28
 
Unidad 6
Unidad 6Unidad 6
Unidad 6
 
Practica 26
Practica 26Practica 26
Practica 26
 
Practica 25
Practica 25Practica 25
Practica 25
 
Practica 24
Practica 24Practica 24
Practica 24
 
Cuestionario unidad 5
Cuestionario unidad 5Cuestionario unidad 5
Cuestionario unidad 5
 
Practica 21
Practica 21Practica 21
Practica 21
 
Practica19
Practica19Practica19
Practica19
 
Cuestionario
CuestionarioCuestionario
Cuestionario
 
Practica19
Practica19Practica19
Practica19
 
Cuestionario
CuestionarioCuestionario
Cuestionario
 
Practica 23
Practica 23Practica 23
Practica 23
 
Practica 22
Practica 22Practica 22
Practica 22
 

Unidad 4

  • 1. UNIDAD 4 4. Manipular botones. Los símbolos de tipo Botón son los que aportan la mayor parte de la interactividad de las películas Flash con aquel que la está visualizando. Un botón, en Flash, es igual que cualquier botón de cualquier entorno informático, sea web o cualquier otro. Son elementos que se prestan a que el usuario los presione, desencadenando al hacerlo una serie de acciones. También es habitual ver como este tipo de elementos reaccionan cuando se les pasa el ratón por encima o cuando se les está pulsando, por ejemplo. Pues bien, para conseguir los efectos interactivos que acabamos de mencionar en otros lenguajes orientados a la web, que es el caso que nos ocupa, debemos crear programas relativamente grandes. Esto es un inconveniente bastante grande ya que el uso de los botones es una práctica muy habitual en el diseño en Internet. Sin embargo, en Flash no ocurre así. Su interfaz está diseñada de manera especial para la creación de botones, lo que nos permite crear todos estos efectos de una manera muy sencilla. Al igual que los otros símbolos de Flash 8, los botones tienen su propia línea de tiempos. Esta es independiente pero, sin embargo, está formada únicamente por cuatro fotogramas, uno para cada estado posible del botón. Reposo. Aspecto por defecto del botón, es decir, cuando el puntero del ratón no está situado sobre él. Sobre. Aspecto del botón cuando situamos el puntero sobre él. Presionado. Apariencia que deseamos tenga nuestro botón mientras lo mantengamos pulsado.
  • 2. Zona activa. Aquí debemos indicar el área real en la que queremos que actúe nuestro botón. Esto es importante sobre todo en botones compuestos sólo por texto como veremos más adelante. Parece que la limitación de fotogramas podría implicar una limitación en la capacidad de espectacularidad y utilidad de estos símbolos, pero no es así. Los botones pueden contener a su vez otros símbolos, como clips o gráficos (también de tipo Bitmap). La unión de las posibilidades de todos los símbolos dota a los botones de gran espectacularidad. 4.1. Crear botones En la creación de un botón podemos considerar dos fases. En la primera vamos a convertir nuestro objeto a símbolo de tipo botón y posteriormente veremos cómo completarlo internamente, lo que nos ayudará a entender mejor dicha estructura. Primeramente crearemos el objeto que representará el aspecto por defecto de nuestro botón con las herramientas que nos ofrece Flash 8. Seleccionaremos el objeto y accederemos al menú Insertar → Convertir en Símbolo, le daremos el comportamiento Botón y asignaremos un nombre a nuestro nuevo símbolo. De esta forma ya tenemos transformado el objeto para que se comporte como un botón. Ahora lo completaremos internamente. Para determinar cómo debe reaccionar el botón en función de las acciones del ratón, lo editaremos haciendo clic con el botón derecho del ratón sobre nuestro nuevo botón y seleccionando la opción Editar.
  • 3. Cuando tengamos delante la línea de tiempos del botón (observa que tiene el aspecto que hemos mostrado anteriormente), seleccionaremos cada uno de los frames (sobre, reposo, presionado y zona activa) y pulsaremos F6 para crear un fotograma clave en cada uno de ellos. Ahora ya podemos modificar el aspecto inicial del botón para cada posición del cursor y marcar el área de acción del botón (fotograma Hit) en la que simplemente podremos dejar la misma figura que la inicial (en este caso sólo es importante la forma del objeto, no los colores u otras cosas) o bien dibujar con las herramientas de dibujos de Flash una nueva figura, en cuya superficie "se sentirá aludido" nuestro botón. Este es un botón muy básico, como veremos se pueden complicar mucho, pero para empezar nos servirá con este. Si una vez creado el botón queremos observar sus distintos estados y todavía no hemos terminado la película entera y por tanto no deseamos tener que reproducirla toda podemos hacerlo accediendo a la Biblioteca de nuestra película y seleccionando el botón creado. Para ver lo que comentábamos bastará con pulsar la tecla situada a la derecha de la vista previa del símbolo. 4.2. Programar propiedades de los botones. En Actionscript 2.0 existía la opción de crear un botón, hacer click encima y escribir código encima del propio objeto. En AS3 no existe la posibilidad de escribir código sobre clips de película ni botones, todo el código debe estar situado en la linea de tiempo o en clases. Esto puede parecer un inconveniente, pero a la hora de hacer desarrollos medianos/complejos hace las cosas mucho más sencillas. Además programar botones en AS3 no es más complicado que hacerlo en AS2, sólo tenemos que añadir el evento al objeto con
  • 4. addEventListener, indicar que evento añadimos ("Event.CLICK", "Event.MOUSE_DOWN, etc...) y crear la función que se vá a ejecutar cuando se reproduzca el event. Es decir, que traducido al castellano, lo que decimos es: El código Actionscript para programar el Botón es este: 1. Boton_bt.addEventListener(MouseEvent.CLICK,pulsado); 2. Boton_bt.addEventListener(MouseEvent.MOUSE_OVER,over); 3. Boton_bt.addEventListener(MouseEvent.MOUSE_OUT,out); 4. 5. function pulsado(e:MouseEvent):void{ 6. Texto_txt.text = ("Has pulsado"); 7. } 8. 9. function over(e:MouseEvent):void{ 10. Texto_txt.text = ("Has hecho over"); 11. } 12. 13. function out(e:MouseEvent):void{ 14. Texto_txt.text = ("Has hecho out"); 15. } 4.3. Programar acciones de los botones.
  • 5. Puesto que existen multitud de acciones que se pueden aplicar tanto a los botones, como a otros elementos de Flash 8 vamos a comentar dos de las más comunes: 1) Abrir una página web. Con esto conseguiremos abrir una página cualquiera de internet (o una película Flash), lo que nos servirá para irnos desplazando por webs que contengan más de una página, o permitir al usuario descargarse archivos entre otras cosas. Para añadir una acción a un botón es necesario el uso de ActionScript (en el tema 17 se tratará con mayor profundidad). Por lo tanto, los pasos a seguir serán los siguientes: Selecciona el botón haciendo clic sobre él, pues es a él al que irá asociada la acción.