Introducción rápida Flash CheckBox y componentes de RadioButton

En este Consejo rápido sobre los componentes de Flash Professional, analizaremos los componentes CheckBox y RadioButton.

Breve descripción

En la vista previa ves una sola casilla de verificación en la parte superior. Cuando se selecciona esta casilla de verificación, la etiqueta de la casilla de verificación cambiará a decir "Marcada" o "No marcada".

Con las seis casillas de verificación inferiores puede seleccionar los deportes en los que está interesado y el área de texto a continuación se actualizará para mostrar los cambios. Con los botones de opción a la derecha, solo puede seleccionar una opción; la etiqueta cambiará cada vez que realice una selección y una actualización para indicar qué opción ha elegido.

Paso 1: Configuración del documento

Abra un nuevo documento de Flash y establezca las siguientes propiedades:

Tamaño del documento: 550x400px
Color de fondo: #FFFFFF

Paso 2: Añadir componentes al escenario

Abra el panel Componentes (Menú> Ventana> Componentes o CTRL + F7).

Arrastre cuatro etiquetas, siete casillas de verificación, tres botones de opción y un área de texto al escenario.

En el panel Propiedades, asigne a la primera casilla de verificación el nombre de instancia "toggleCheckBox".

Si el panel de Propiedades no se muestra, vaya a Menú> Ventana> Componentes o presione CTRL + F3.

Establezca la casilla de verificación X en 5.00 y su Y en 21.00.

Nota: Ahora sigue un proceso bastante repetitivo hasta que tengamos todos nuestros componentes configurados. Aguanta ahí :)

En el panel Propiedades, asigne a la segunda casilla de verificación el nombre de instancia "swimmingCheckBox". Establezca la casilla de verificación X en 5.00 y su Y en 91.00.

En el panel Propiedades, asigne a la tercera casilla de verificación el nombre de instancia "footBallCheckBox". Establezca la casilla de verificación X en 116.00 y su Y en 191.00.

En el panel Propiedades, asigne a la cuarta casilla de verificación el nombre de instancia "hikingCheckBox". Establezca la casilla de verificación X en 5.00 y su Y en 127.00.

En el panel Propiedades, asigne a la quinta casilla de verificación el nombre de instancia "soccerBox". Establezca la casilla de verificación X en 116.00 y su Y en 127.00.

En el panel Propiedades, asigne a la sexta casilla de verificación el nombre de instancia "boxingCheckBox". Establezca la casilla de verificación X en 5.00 y su Y en 161.00.

En el panel Propiedades, active la séptima casilla de verificación con el nombre de instancia "baseballCheckBox". Establezca la casilla de verificación X en 116.00 y su Y en 161.00.

En el panel Propiedades, asigne a la primera etiqueta el nombre de instancia "sportsLabel". Ajuste la X de la etiqueta a 5.00 y su Y a 57.00.

En el panel Propiedades, asigne a la segunda etiqueta el nombre de instancia "interestLabel". Ajuste la X de la etiqueta a 5.00 y su Y a 191.00.

En el panel Propiedades, asigne a la tercera etiqueta el nombre de instancia "attendLabel". Ajuste la X de la etiqueta a 278.00 y su Y a 21.00.

En el panel Propiedades, asigne a la cuarta etiqueta el nombre de instancia "willAttendLabel". Ajuste la X de la etiqueta a 278.00 y su Y a 143.00.

En el panel Propiedades, asigne al primer botón de radio el nombre de instancia "yesRadio". Ajuste la X del botón de radio a 278.00 y su Y a 51.00.

En el panel Propiedades, asigne al segundo botón de opción el nombre de instancia "noRadio". Establezca la X del botón de radio en 367.00 y su Y en 51.00.

En el panel Propiedades, asigne al tercer botón de radio el nombre de instancia "notSureRadio". Ajuste la X del botón de radio a 278.00 y su Y a 88.00.

En el panel Propiedades, asigne al área de texto el nombre de instancia "sportsTA". Configure la X del área de texto a 5.00 y su Y a 223.00.

Paso 3: Preparar el archivo .as e importar las clases

Cree un nuevo archivo ActionScript y asígnele el nombre "Main.as".

Estaremos declarando nuestros componentes en este archivo Main.as, por lo que debemos desactivar las "instancias de etapa de declaración automática". El beneficio de
haciendo esto es que obtienes sugerencias de código para la instancia.

Vaya a Menú> Archivo> Configuración de publicación. Haga clic en Configuración junto a "Script [Actionscript 3]"

Desmarque "declarar automáticamente las instancias de la etapa".

En Main.as, abra la declaración del paquete e importe las clases que usaremos agregando el siguiente código:

 package // Importar nuestros controles import fl.controls.Label; importar fl.controls.CheckBox; importar fl.controls.TextArea; importar fl.controls.RadioButton; // Necesario para cambiar el tamaño del texto en nuestras etiquetas import flash.text.TextFieldAutoSize; // Necesitamos poner nuestros botones de radio en un grupo import fl.controls.RadioButtonGroup; // Necesidad de extender Movie Clip import flash.display.MovieClip; // Necesidad de nuestras casillas de verificación import flash.events.Event;

Paso 4: Configurar la clase principal

Agregue la Clase, extienda el Clip de Película y configure nuestra función de Constructor.

Agregue lo siguiente a Main.as:

 public class Main extiende MovieClip // Los componentes public var interestLabel: Label; public var sportsLabel: Label; public var attLabel: Label; public var willAttendLabel: Label; public var toggleCheckBox: CheckBox; public var labelCheckBox: CheckBox; public var swimmingCheckBox: CheckBox; public var hikingCheckBox: CheckBox; public var boxingCheckBox: CheckBox; public var footballCheckBox: CheckBox; public var soccerCheckBox: CheckBox; public var baseballCheckBox: CheckBox; public var sportsTA: TextArea; public var yesRadio: RadioButton; public var noRadio: RadioButton; public var notSureRadio: RadioButton; // Necesita una matriz para los CheckBoxes privados var sportsCheckBoxes: Array; función pública Main () setupLabels (); setupCheckBoxes (); setupRadioButtons ();

Paso 5: Funciones en el constructor principal

Aquí definimos la setupLabels (), setUpCheckBoxes (), y setupRadioButtons () funciones.

En el setupCheckBoxes () función ponemos todas las casillas de verificación de deportes en una matriz; De esta manera podemos recorrerlos y agregar un solo detector de eventos a cada uno de ellos, lo que nos evita tener que escribir manualmente addEventListener () cada vez.

Para el setupRadioButtons () hemos utilizado un radioButtonGroup. Los botones de radio están diseñados para que solo uno de un grupo sea seleccionado a la vez. Cuando agregamos un botón de opción a un grupo, indicamos a qué botones de opción pertenece..

Agregue lo siguiente a Main.as:

 función privada setupLabels (): void // Establece el texto en la etiqueta sportsLabel.text = "¿Qué deportes te interesan?"; interestLabel.text = "Sus intereses son:"; attendLabel.text = "¿Asistirás al evento?"; willAttendLabel.text = "Asistirá = Sí"; // Use el tamaño automático para que nuestras etiquetas puedan contener todo el texto sportsLabel.autoSize = sportsLabel.autoSize = TextFieldAutoSize.LEFT; interestLabel.autoSize = interestLabel.autoSize = TextFieldAutoSize.LEFT; attendLabel.autoSize = attendLabel.autoSize = TextFieldAutoSize.LEFT; willAttendLabel.autoSize = willAttendLabel.autoSize = TextFieldAutoSize.LEFT;  función privada setupCheckBoxes (): void // establece el texto en las etiquetas toggleCheckBox.label = "Checked"; swimmingCheckBox.label = "Natación"; hikingCheckBox.label = "Senderismo"; boxingCheckBox.label = "Boxeo"; footballCheckBox.label = "Fútbol"; soccerCheckBox.label = "Fútbol"; baseballCheckBox.label = "BaseBall"; toggleCheckBox.width = 250; toggleCheckBox.selected = true; toggleCheckBox.addEventListener (Event.CHANGE, toggleChange); // aquí ponemos las casillas de verificación en una matriz para que podamos recorrerlas // y fácilmente agregamos el mismo eventoListener a cada una de ellas sportsCheckBoxes = new Array (swimmingCheckBox, hikingCheckBox, boxingCheckBox, footballCheckBox, soccerCheckBox, baseballCheckBox); para (var i: int = 0; i 
  Paso 6: oyentes del evento
 Aquí codificaremos nuestros oyentes de eventos. Agregue lo siguiente a Main.as
  función privada toggleChange (e: Event): void if (e.target.selected == true) e.target.label = "Checked";  else e.target.label = "Sin marcar";  función privada sportsSelected (e: Event): void // borramos el área de texto y agregamos las nuevas opciones a continuación sportsTA.text = ""; para (var i: int = 0; i 
 Conclusión
 El uso de botones de opción y casillas de verificación es una excelente manera de permitir que los usuarios realicen una selección.
 Notará en el panel "Parámetros de componentes" de los componentes que puede verificar y seleccionar ciertas propiedades:
   Esta imagen es para el componente de casilla de verificación.. 
  Las propiedades son las siguientes para el componente de casilla de verificación:
   habilitado: un valor booleano que indica si el componente puede aceptar la entrada del usuario.
  etiqueta: la etiqueta de texto para el componente.
  labelPlacement: Posición de la etiqueta en relación a la casilla de verificación..
  seleccionado: un valor booleano que indica si una casilla de verificación está activada o desactivada.
  visible: un valor booleano que indica si la instancia del componente es visible.
 
 Las propiedades para el radioButton son las siguientes:
   habilitado: un valor booleano que indica si el componente puede aceptar la entrada del usuario.
  Nombre del grupo: El nombre del grupo para una instancia de botón de radio o grupo.
  etiqueta: la etiqueta de texto para el componente.
  labelPlacement: Posición de la etiqueta en relación con el radioButton ... 
  seleccionado: un valor booleano que indica si un radioButton está activado o desactivado.
  valor: Un valor definido por el usuario que está asociado con un botón de radio ... 
  visible: un valor booleano que indica si la instancia del componente es visible.
 
 Gracias por leer y mantener los ojos abiertos para los próximos tutoriales de componentes.!



		
			
	   
	




Código