SlideShare una empresa de Scribd logo
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:
Boton_bt.addEventListener(MouseEvent.CLICK,pulsado);

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

   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

Actionscript3.0 juan camilo 11 02
Actionscript3.0 juan camilo 11 02Actionscript3.0 juan camilo 11 02
Actionscript3.0 juan camilo 11 02kmilithho
 
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
SarahLopz
 
A.D.A 5
A.D.A 5A.D.A 5
A.D.A 5
juanpablo9910
 
Ada 4
Ada 4Ada 4
Ventanas aero
Ventanas aeroVentanas aero
Ventanas aeroguajiro27
 
Ofimatica basica word
Ofimatica basica  wordOfimatica basica  word
Ofimatica basica word
Danalis Barriosnuevo Pozo
 
Comandos operativos de windows 7 u
Comandos  operativos de   windows 7 uComandos  operativos de   windows 7 u
Comandos operativos de windows 7 u
edwardvelez01
 
Calc cap3
Calc cap3Calc cap3
Natalia gonzález villamil (1)
Natalia gonzález villamil (1)Natalia gonzález villamil (1)
Natalia gonzález villamil (1)nata2381075
 
Leccion 8 dream
Leccion 8 dreamLeccion 8 dream
Leccion 8 dream
Flor Aguilar
 
Trabajo practico nº 3.informatica 2012
Trabajo practico nº 3.informatica 2012Trabajo practico nº 3.informatica 2012
Trabajo practico nº 3.informatica 2012rociomaidana
 

La actualidad más candente (16)

Actionscript3.0 juan camilo 11 02
Actionscript3.0 juan camilo 11 02Actionscript3.0 juan camilo 11 02
Actionscript3.0 juan camilo 11 02
 
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
 
A.D.A 5
A.D.A 5A.D.A 5
A.D.A 5
 
Comprende..[2]
Comprende..[2]Comprende..[2]
Comprende..[2]
 
Ada 4
Ada 4Ada 4
Ada 4
 
Ventanas aero
Ventanas aeroVentanas aero
Ventanas aero
 
Ofimatica basica word
Ofimatica basica  wordOfimatica basica  word
Ofimatica basica word
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 
actividades 1 al 5
actividades 1 al 5actividades 1 al 5
actividades 1 al 5
 
Comandos operativos de windows 7 u
Comandos  operativos de   windows 7 uComandos  operativos de   windows 7 u
Comandos operativos de windows 7 u
 
Calc cap3
Calc cap3Calc cap3
Calc cap3
 
Natalia gonzález villamil (1)
Natalia gonzález villamil (1)Natalia gonzález villamil (1)
Natalia gonzález villamil (1)
 
Leccion 8 dream
Leccion 8 dreamLeccion 8 dream
Leccion 8 dream
 
PresentacióN2
PresentacióN2PresentacióN2
PresentacióN2
 
Como se hacen los gif animados
Como se hacen los gif animadosComo se hacen los gif animados
Como se hacen los gif animados
 
Trabajo practico nº 3.informatica 2012
Trabajo practico nº 3.informatica 2012Trabajo practico nº 3.informatica 2012
Trabajo practico nº 3.informatica 2012
 

Similar a Unidad 4 (20)

Unidad 4
Unidad 4Unidad 4
Unidad 4
 
Gaem unidad 4
Gaem unidad 4Gaem unidad 4
Gaem 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 de gaem
Unidad 4 de gaemUnidad 4 de gaem
Unidad 4 de gaem
 
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
 
Introducción a action script 3
Introducción a action script 3Introducción a action script 3
Introducción a action script 3
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 

Más de karlycalleja

Unidad 3
Unidad 3Unidad 3
Unidad 3
karlycalleja
 
Unidad 2
Unidad 2Unidad 2
Unidad 2
karlycalleja
 
Unidad 1
Unidad 1Unidad 1
Unidad 1
karlycalleja
 
Práctica 26
Práctica 26Práctica 26
Práctica 26
karlycalleja
 
Práctica 25
Práctica 25Práctica 25
Práctica 25
karlycalleja
 
Unidad5
Unidad5Unidad5
Unidad5
karlycalleja
 
Unidad 3...
Unidad 3...Unidad 3...
Unidad 3...
karlycalleja
 
Practica 6.- Encadenar interpolaciones
Practica 6.- Encadenar interpolacionesPractica 6.- Encadenar interpolaciones
Practica 6.- Encadenar interpolaciones
karlycalleja
 
Practica 8
Practica 8Practica 8
Practica 8
karlycalleja
 
Practica 7.- Gusano
Practica 7.- GusanoPractica 7.- Gusano
Practica 7.- Gusano
karlycalleja
 
Practica 6.- Encadenar interpolaciones
Practica 6.- Encadenar interpolacionesPractica 6.- Encadenar interpolaciones
Practica 6.- Encadenar interpolaciones
karlycalleja
 
Practica 4
Practica 4Practica 4
Practica 4
karlycalleja
 
Practica 3
Practica 3Practica 3
Practica 3
karlycalleja
 
Practica 2
Practica 2Practica 2
Practica 2
karlycalleja
 
Practica 1
Practica 1Practica 1
Practica 1
karlycalleja
 
Unidad 2
Unidad 2Unidad 2
Unidad 2
karlycalleja
 

Más de karlycalleja (20)

Unidad 3
Unidad 3Unidad 3
Unidad 3
 
Unidad 2
Unidad 2Unidad 2
Unidad 2
 
Unidad 1
Unidad 1Unidad 1
Unidad 1
 
Unidad 1
Unidad 1Unidad 1
Unidad 1
 
Práctica 27
Práctica 27Práctica 27
Práctica 27
 
Práctica 26
Práctica 26Práctica 26
Práctica 26
 
Práctica 25
Práctica 25Práctica 25
Práctica 25
 
Práctica 24
Práctica 24Práctica 24
Práctica 24
 
Unidad 6
Unidad 6Unidad 6
Unidad 6
 
Unidad5
Unidad5Unidad5
Unidad5
 
Unidad 3...
Unidad 3...Unidad 3...
Unidad 3...
 
Practica 6.- Encadenar interpolaciones
Practica 6.- Encadenar interpolacionesPractica 6.- Encadenar interpolaciones
Practica 6.- Encadenar interpolaciones
 
Practica 8
Practica 8Practica 8
Practica 8
 
Practica 7.- Gusano
Practica 7.- GusanoPractica 7.- Gusano
Practica 7.- Gusano
 
Practica 6.- Encadenar interpolaciones
Practica 6.- Encadenar interpolacionesPractica 6.- Encadenar interpolaciones
Practica 6.- Encadenar interpolaciones
 
Practica 4
Practica 4Practica 4
Practica 4
 
Practica 3
Practica 3Practica 3
Practica 3
 
Practica 2
Practica 2Practica 2
Practica 2
 
Practica 1
Practica 1Practica 1
Practica 1
 
Unidad 2
Unidad 2Unidad 2
Unidad 2
 

Último

3Redu: Responsabilidad, Resiliencia y Respeto
3Redu: Responsabilidad, Resiliencia y Respeto3Redu: Responsabilidad, Resiliencia y Respeto
3Redu: Responsabilidad, Resiliencia y Respeto
cdraco
 
Diagrama de flujo - ingenieria de sistemas 5to semestre
Diagrama de flujo - ingenieria de sistemas 5to semestreDiagrama de flujo - ingenieria de sistemas 5to semestre
Diagrama de flujo - ingenieria de sistemas 5to semestre
DiegoCampos433849
 
Posnarrativas en la era de la IA generativa
Posnarrativas en la era de la IA generativaPosnarrativas en la era de la IA generativa
Posnarrativas en la era de la IA generativa
Fernando Villares
 
Estructuras Básicas_Tecnología_Grado10-7.pdf
Estructuras Básicas_Tecnología_Grado10-7.pdfEstructuras Básicas_Tecnología_Grado10-7.pdf
Estructuras Básicas_Tecnología_Grado10-7.pdf
cristianrb0324
 
leidy fuentes - power point -expocccion -unidad 4 (1).pptx
leidy fuentes - power point -expocccion -unidad 4 (1).pptxleidy fuentes - power point -expocccion -unidad 4 (1).pptx
leidy fuentes - power point -expocccion -unidad 4 (1).pptx
Leidyfuentes19
 
Conceptos Básicos de Programación. Tecnología
Conceptos Básicos de Programación. TecnologíaConceptos Básicos de Programación. Tecnología
Conceptos Básicos de Programación. Tecnología
coloradxmaria
 
ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024
ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024
ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024
DanielErazoMedina
 
INFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTAL
INFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTALINFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTAL
INFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTAL
CrystalRomero18
 
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
vazquezgarciajesusma
 
Desarrollo de Habilidades de Pensamiento.
Desarrollo de Habilidades de Pensamiento.Desarrollo de Habilidades de Pensamiento.
Desarrollo de Habilidades de Pensamiento.
AlejandraCasallas7
 
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
vazquezgarciajesusma
 
Conceptos Básicos de Programación Proyecto
Conceptos Básicos de Programación ProyectoConceptos Básicos de Programación Proyecto
Conceptos Básicos de Programación Proyecto
cofferub
 
proyecto invernadero desde el departamento de tecnología para Erasmus
proyecto invernadero desde el departamento de tecnología para Erasmusproyecto invernadero desde el departamento de tecnología para Erasmus
proyecto invernadero desde el departamento de tecnología para Erasmus
raquelariza02
 
Inteligencia Artificial y Ciberseguridad.pdf
Inteligencia Artificial y Ciberseguridad.pdfInteligencia Artificial y Ciberseguridad.pdf
Inteligencia Artificial y Ciberseguridad.pdf
Emilio Casbas
 
Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024
Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024
Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024
CesarPazosQuispe
 
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...
Telefónica
 
Conceptos básicos de programación 10-5.pdf
Conceptos básicos de programación 10-5.pdfConceptos básicos de programación 10-5.pdf
Conceptos básicos de programación 10-5.pdf
ValeriaAyala48
 
Ventajas y desventajas de la desinfección con cloro
Ventajas y desventajas de la desinfección con cloroVentajas y desventajas de la desinfección con cloro
Ventajas y desventajas de la desinfección con cloro
durangense277
 
DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdfDESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
sarasofiamontezuma
 
Estructuras Básicas_ Conceptos Basicos De Programacion.pdf
Estructuras Básicas_ Conceptos Basicos De Programacion.pdfEstructuras Básicas_ Conceptos Basicos De Programacion.pdf
Estructuras Básicas_ Conceptos Basicos De Programacion.pdf
IsabellaRubio6
 

Último (20)

3Redu: Responsabilidad, Resiliencia y Respeto
3Redu: Responsabilidad, Resiliencia y Respeto3Redu: Responsabilidad, Resiliencia y Respeto
3Redu: Responsabilidad, Resiliencia y Respeto
 
Diagrama de flujo - ingenieria de sistemas 5to semestre
Diagrama de flujo - ingenieria de sistemas 5to semestreDiagrama de flujo - ingenieria de sistemas 5to semestre
Diagrama de flujo - ingenieria de sistemas 5to semestre
 
Posnarrativas en la era de la IA generativa
Posnarrativas en la era de la IA generativaPosnarrativas en la era de la IA generativa
Posnarrativas en la era de la IA generativa
 
Estructuras Básicas_Tecnología_Grado10-7.pdf
Estructuras Básicas_Tecnología_Grado10-7.pdfEstructuras Básicas_Tecnología_Grado10-7.pdf
Estructuras Básicas_Tecnología_Grado10-7.pdf
 
leidy fuentes - power point -expocccion -unidad 4 (1).pptx
leidy fuentes - power point -expocccion -unidad 4 (1).pptxleidy fuentes - power point -expocccion -unidad 4 (1).pptx
leidy fuentes - power point -expocccion -unidad 4 (1).pptx
 
Conceptos Básicos de Programación. Tecnología
Conceptos Básicos de Programación. TecnologíaConceptos Básicos de Programación. Tecnología
Conceptos Básicos de Programación. Tecnología
 
ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024
ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024
ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024
 
INFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTAL
INFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTALINFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTAL
INFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTAL
 
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
 
Desarrollo de Habilidades de Pensamiento.
Desarrollo de Habilidades de Pensamiento.Desarrollo de Habilidades de Pensamiento.
Desarrollo de Habilidades de Pensamiento.
 
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
 
Conceptos Básicos de Programación Proyecto
Conceptos Básicos de Programación ProyectoConceptos Básicos de Programación Proyecto
Conceptos Básicos de Programación Proyecto
 
proyecto invernadero desde el departamento de tecnología para Erasmus
proyecto invernadero desde el departamento de tecnología para Erasmusproyecto invernadero desde el departamento de tecnología para Erasmus
proyecto invernadero desde el departamento de tecnología para Erasmus
 
Inteligencia Artificial y Ciberseguridad.pdf
Inteligencia Artificial y Ciberseguridad.pdfInteligencia Artificial y Ciberseguridad.pdf
Inteligencia Artificial y Ciberseguridad.pdf
 
Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024
Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024
Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024
 
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...
 
Conceptos básicos de programación 10-5.pdf
Conceptos básicos de programación 10-5.pdfConceptos básicos de programación 10-5.pdf
Conceptos básicos de programación 10-5.pdf
 
Ventajas y desventajas de la desinfección con cloro
Ventajas y desventajas de la desinfección con cloroVentajas y desventajas de la desinfección con cloro
Ventajas y desventajas de la desinfección con cloro
 
DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdfDESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
 
Estructuras Básicas_ Conceptos Basicos De Programacion.pdf
Estructuras Básicas_ Conceptos Basicos De Programacion.pdfEstructuras Básicas_ Conceptos Basicos De Programacion.pdf
Estructuras Básicas_ Conceptos Basicos De Programacion.pdf
 

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