sábado, 12 de noviembre de 2011

Botones en Flash

Creación de botones

Los botones son realmente clips de película interactivos de cuatro fotogramas. Cuando se selecciona el comportamiento del botón para un símbolo, Flash crea una línea de tiempo con cuatro fotogramas. Los tres primeros fotogramas muestran los tres posibles estados del botón; el cuarto fotograma define el área activa del botón. La línea de tiempo no se reproduce realmente; simplemente reacciona a los movimientos y las acciones del puntero saltando al fotograma correspondiente.
Para que un botón sea interactivo, coloque una instancia del símbolo del botón en el escenario y asigne acciones a la instancia. Las acciones deben asignarse a la instancia del botón del documento y no a los fotogramas de la línea de tiempo del botón.
Cada fotograma de la línea de tiempo de un símbolo de botón tiene una función específica:
  • El primer fotograma es el estado Arriba, que representa el botón siempre que el puntero no esté sobre él.
  • El segundo fotograma es el estado Sobre, que representa el aspecto del botón cuando el puntero se encuentra sobre el mismo.
  • El tercer fotograma es el estado Presionado, que representa el aspecto del botón cuando se hace clic sobre el mismo.
  • El cuarto fotograma es el estado Zona activa, que define el área que responde al clic del ratón. Esta área es invisible en el archivo SFW.
También puede crear un botón utilizando un símbolo de clip de película o un componente de botón. Ambas opciones tienen ventajas, según sus necesidades. Si crea un botón utilizando un clip de película tendrá la posibilidad de añadir nuevos fotogramas al botón o aplicar una animación más compleja. Sin embargo, el tamaño de archivo de los botones de clip de película es mayor que de los símbolos de botón. Si utiliza un componente de botón, tendrá la posibilidad de vincularlo con otros componentes para compartir y mostrar datos en una aplicación. Además, los componentes de botón incluyen funciones creadas previamente, como soporte de accesibilidad, y pueden personalizarse. Los componentes de botón son PushButton y RadioButton.

Pasos:

  1. Seleccione Edición > Anular todas las selecciones para asegurarse de que nada queda seleccionado en el escenario.
  2. Seleccione Insertar  >  Nuevo símbolo o presione Control+F8 (Windows) o Comando+F8 (Macintosh). Para crear el botón, debe convertir los fotogramas del botón en fotogramas clave.
  3. En el cuadro de diálogo Crear un nuevo símbolo, escriba un nombre para el símbolo de botón nuevo y para Comportamiento seleccione Botón. Flash cambia al modo de edición de símbolos. El encabezado de la línea de tiempo cambia para mostrar cuatro fotogramas consecutivos denominados: Arriba, Sobre, Presionado y Zona activa. El primer fotograma, Arriba, es un fotograma clave vacío.
  4. Para crear la imagen del botón del estado Arriba, utilice las herramientas de dibujo, importe un gráfico o coloque una instancia de otro símbolo en el escenario. En un botón puede utilizarse un símbolo de clip de película o de gráfico, pero no puede utilizarse otro botón. Utilice símbolos de clips de película si desea crear un botón animado.
  5. Haga clic en el segundo fotograma, Sobre, y seleccione Línea de tiempo > Fotograma clave. Flash inserta un fotograma clave que duplica el contenido del fotograma Arriba.
  6. Modifique la imagen del botón para el estado Sobre.
  7. Repita los pasos 5 y 6 para los fotogramas Presionado y Zona activa. El fotograma Zona activa no está visible en el escenario, pero define el área del botón que responde cuando se hace clic. Asegúrese de que el gráfico del fotograma Zona activa es un área sólida lo bastante grande para abarcar todos los elementos gráficos de los fotogramas Arriba, Presionado y Sobre. También puede ser más grande que el botón visible. Si no se especifica un fotograma Zona activa, se utilizará la imagen para el estado Arriba como fotograma Zona activa.
    Puede crear un desplazamiento de conexión, en el que al mover el puntero sobre un botón se cambia otro gráfico del escenario. Para ello, coloque el fotograma Zona activa en una ubicación distinta a la de los demás fotogramas de botones.
  8. Para asignar un sonido a un estado del botón, seleccione el fotograma de dicho estado en la línea de tiempo, elija Ventana > Propiedades y, a continuación, seleccione un sonido en el menú Sonido del inspector de propiedades.
  9. Cuando haya terminado, seleccione Edición > Editar documento. Arrastre el símbolo de botón fuera del panel Biblioteca para crear una instancia del símbolo en el documento

Activación, edición y prueba de botones:

De forma predeterminada, Flash mantiene los botones desactivados durante su creación, para hacer más fácil seleccionarlos y trabajar con ellos. Cuando un botón está desactivado, al hacer clic en él se selecciona. Cuando un botón está activado, responde a los eventos del ratón que se han especificado como si se estuviera reproduciendo el archivo SWF. Sin embargo, igualmente pueden seleccionarse botones activados. En general, es mejor trabajar con los botones desactivados y activarlos para probar su comportamiento rápidamente.

Para activar y desactivar botones:
  • Seleccione Control > Habilitar botones simples. Junto al comando aparece una marca de verificación para indicar que los botones están activados. Selecciónelo de nuevo para desactivar los botones. En ese momento, no responderá ningún botón del escenario. Al mover el ratón sobre un botón, Flash mostrará el fotograma Sobre; si hace clic dentro del área activa del botón, Flash mostrará el fotograma Presionado.

Para seleccionar un botón activado:

  • Utilice la herramienta Selección para dibujar un rectángulo de selección alrededor del botón.
Para mover o editar un botón activado:
  1. Seleccione el botón, tal como se ha descrito anteriormente.
  2. Siga uno de estos procedimientos:
Utilice las teclas de flecha para desplazar el botón.
Si el inspector de propiedades no está visible, seleccione Ventana > Propiedades para editar el botón en el inspector de propiedades o haga doble clic en el botón con la tecla Alt (Windows) u Opción (Macintosh) presionada.

Para probar un botón, siga uno de estos procedimientos:
  • Seleccione Control > Habilitar botones simples. Mueva el puntero sobre el botón activado para probarlo.
  • Seleccione el botón en el panel Biblioteca y haga clic en el botón Reproducir de la ventana de vista previa.
  • Seleccione Control > Probar escena, o bien Control > Probar película.
Los clips de película de los botones no pueden verse en el entorno de edición de Flash.

Cambio de propiedades de instancias:

Cada instancia de símbolo tiene sus propiedades, que son distintas de las del símbolo. Puede modificar la tinta, la transparencia y el brillo de una instancia, redefinir el comportamiento de la instancia (por ejemplo, cambiar un gráfico a un clip de película) y especificar el modo de reproducción de la animación dentro de una instancia gráfica. También se puede sesgar, rotar o escalar una instancia sin que afecte al símbolo.
Además, puede asignar un nombre a una instancia de clip de película o de botón de modo que pueda utilizar ActionScript para cambiar sus propiedades. Para editar las propiedades de una instancia, utilice el inspector de propiedades (Ventana  >  Propiedades).
Las propiedades de una instancia se guardan junto con la instancia. Si se edita un símbolo o se vuelve a vincular una instancia a otro símbolo, las propiedades de la instancia que se hayan modificado aún se aplican a la instancia.
Esta sección contiene los siguientes temas:

Modificación del color y la transparencia de una instancia

Cada instancia de un símbolo puede tener su propio efecto de color. Para establecer opciones de color y transparencia para las instancias, utilice el inspector de propiedades. La configuración del inspector de propiedades también afecta a los mapas de bits situados en los símbolos.
Cuando se cambia el color y la transparencia de una instancia en un fotograma específico, Flash realiza el cambio en cuanto muestra el fotograma. Para realizar cambios de color graduales, debe aplicar una interpolación de movimiento. Al interpolar el color se introducen distintas configuraciones de efectos en los fotogramas de inicio y final de una instancia y después se interpolan las configuraciones para que los colores de las instancias cambien en el tiempo.

Intercambio de una instancia por otra

Puede asignar un símbolo distinto a una instancia para visualizar una instancia diferente en el escenario y conservar todas las propiedades de la instancia original, como los efectos de color o las acciones de los botones.
Por ejemplo, supongamos que está creando un dibujo animado con un símbolo de ratón como personaje, pero decide cambiarlo por un gato. Puede sustituir el símbolo de ratón por el de gato y el nuevo personaje aparecerá aproximadamente en la misma ubicación en todos los fotogramas.

Cambio del tipo de instancia

Puede modificar un tipo de instancia para volver a definir su comportamiento en una aplicación de Flash. Por ejemplo, si una instancia gráfica contiene una animación que desea reproducir independientemente de la línea de tiempo principal, puede volver a definirla como una instancia de clip de película.

Para cambiar el tipo de instancia:

  1. Seleccione la instancia en el escenario y seleccione Ventana > Propiedades.
  2. Seleccione Gráfico, Botón o Clip de película en el menú emergente situado en la esquina superior izquierda del inspector de propiedades.

Importar un boton:

Puede importar verios activos en flash, incluidos archivos de sonido, imagen, video, etc.
Los graficosimportados se guardan en la biblioteca del documento. La biblioteca almacena tanto los archivos importados en el documento como los simbolos creados en Flash. Un simbolo es un grafico vectorial, un boton. una fuente, un componente o un clip de pelicula que se crea una vez y se puede volvr a utilizar varias veces. De este modo no es necesario que dibuje sus graficos en Flash.

No hay comentarios:

Publicar un comentario en la entrada