Share
Bienvenido a una serie de lecciones de consejos rápidos en las que aprenderemos sobre los componentes en Flash Professional CS5. En el tutorial de esta semana aprenderemos sobre los componentes Button y Label..
En el SWF ves dos botones y dos etiquetas. Cuando haga clic en el botón superior, la etiqueta se actualizará con el número de veces que haya hecho clic en el botón. El botón inferior actúa como un interruptor con un estado activado y desactivado. Al hacer clic en el botón inferior, la etiqueta cambia para mostrar si el botón está activado o desactivado.
La etiqueta inferior permite diferentes colores en el mismo texto. Esto se logra al insertar HTML en el texto (que también cubriremos en este tutorial).
Abra un nuevo documento de Flash y establezca las siguientes propiedades:
Abra la ventana de componentes yendo a Menú> Ventana> Componentes o presione CTRL + F7
Arrastra dos botones y dos etiquetas al escenario..
En el panel Propiedades, asigne al primer botón el nombre de instancia "basicButton". Si el panel de Propiedades no se muestra, vaya a Menú> Ventana> Componentes o presione CTRL + F3
Ajuste la X del botón a 86.00 y su Y a 107.00.
En el panel Propiedades, asigne a la primera etiqueta el nombre de instancia "basicLabel".
Ajuste la X de la etiqueta a 239.00 y su Y a 107.00
En el panel Propiedades, asigne al segundo botón el nombre de instancia "toggleButton".
Ajuste la X del botón a 86.00 y su Y a 234.00
En el panel Propiedades, asigne a la segunda etiqueta el nombre de instancia "htmlLabel".
Ajuste la X de la etiqueta a 239.00 y su Y a 234.00
Crea un nuevo archivo de ActionScript y dale el nombre Main.as. Estaremos declarando nuestros componentes en Main.as, por lo que debemos desactivar "autodeclara instancias de etapa", la ventaja de hacer esto es que obtienes sugerencias de código para la instancia.
Vaya a Menú> Archivo> Configuración de publicación. Haga clic en la configuración junto a Script [Actionscript 3.0]
Desmarque "Declarar automáticamente instancias de la etapa".
En Main.as Abra la declaración del paquete e importe las clases que usaremos.
Agregue lo siguiente a Main.as:
paquete import flash.display.MovieClip; importar fl.controls.Button; importar fl.controls.Label; // necesario para ajustar automáticamente el tamaño de las etiquetas flash.text.TextFieldAutoSize; import flash.events.MouseEvent; import flash.events.Event;
Añadir la declaración de clase, extender Clip de película y configurar nuestra función constructora. Agregue lo siguiente a Main.as:
public class Main extiende MovieClip // Este es nuestro componente basicButton en el escenario public var basicButton: Button; // Este es nuestro componente toggleButton en el escenario public var toggleButton: Button; // Este es nuestro componente basicLabel en el escenario public var basicLabel: Label; // Este es nuestro componente htmlLabel en el escenario public var htmlLabel: Label; // Se utiliza para realizar un seguimiento de cuántas veces el usuario ha hecho clic en el botón var numClicks: Number = 0; función pública Main () // Se usa para configurar los botones y agregar eventListeners setupButtons (); // Se utiliza para configurar nuestras etiquetas setupLabels ();
Aquí definiremos la setupButton () y setupLabels () funciones.
En el siguiente código utilizamos el htmlText propiedad de la etiqueta; Esto nos permite insertar HTML en la cadena de texto. Cabe señalar que Flash solo admite un conjunto limitado de etiquetas HTML; Echa un vistazo a livedocs para obtener una lista de etiquetas HTML compatibles. Usaremos el Etiqueta para alterar el color del texto..
Agregue lo siguiente a Main.as
función pública setupButtons (): void // configura la etiqueta en el botón basicButton.label = "Click Me"; basicButton.addEventListener (MouseEvent.CLICK, basicButtonClick); toggleButton.label = "On"; // Usamos los seleccionados aquí para poner el botón en su estado "On" toggleButton.selected = true; // Se usa para alternar el botón ... cada vez que se hace clic en el botón que se selecciona como verdadero / falso toggleButton.toggle = true; // La propiedad toggle espera un cambio, por lo que aquí usamos Event.CHANGE no MouseEvent.CLICK toggleButton.addEventListener (Event.CHANGE, toggleButtonClick); función privada setupLabels (): void // Esto establece la etiqueta en donde se ajusta automáticamente el tamaño para contener el texto que se le pasa basicLabel.autoSize = TextFieldAutoSize.LEFT; // Establece el texto inicial de la etiqueta basicLabel.text = "Has presionado el botón 0 veces"; htmlLabel.autoSize = TextFieldAutoSize.LEFT; // Para poder usar flashes compatibles con las etiquetas html usamos el texto htmlText de la etiqueta htmlLabel.htmlText = "El botón es En";
Aquí codificaremos nuestros Oyentes de Eventos que agregamos a los Botones. Agregue lo siguiente a Main.as:
función privada basicButtonClick (e: Event): void // Incrementa el número de veces que el usuario ha hecho clic en el botón numClicks ++; // Aquí colocamos numClicks en una cadena, ya que el texto espera una cadena basicLabel.text = "Has hecho clic en el botón" + String (numClicks) + "veces"; función privada toggleButtonClick (e: Event): void // Si se selecciona el botón, configuramos el texto html de la etiqueta con un "On" verde; // Y cambia la etiqueta de los botones a "ON"; // Preferiblemente, harías algo útil aquí como mostrar un clip de película si (e.target.selected == true) htmlLabel.htmlText = "El botón es En"; e.target.label =" ON "; // Haga algo útil else // Si el botón no está seleccionado, configuramos el texto html de la etiqueta con un Off rojo // Y cambiamos la etiqueta de los botones a" OFF " ; // Preferiblemente harías algo útil aquí como ocultar un clip de película htmlLabel.htmlText = "El botón es Apagado"; e.target.label =" OFF "; // Haga algo útil
Luego, cierre las declaraciones de clase y paquete con dos llaves de cierre.
El uso de los componentes Button and Label es una forma simple y rápida de tener botones y etiquetas completamente funcionales sin tener que crearlos usted mismo.
Notará en el panel Parámetros de componentes de los componentes que puede verificar y seleccionar ciertas propiedades.
Propiedades del componente botón.
Accentsconagua
enfatizado: un valor booleano que indica si se dibuja un borde alrededor del componente Button cuando el botón está en su estado superiorhabilitado: un valor booleano que indica si el componente puede aceptar la entrada del usuarioetiqueta: la etiqueta de texto para el componentelabelPlacement: posición de la etiqueta en relación con un icono específicoseleccionado: un valor booleano que indica si un botón de alternar está activado o desactivadopalanca: un valor booleano que indica si se puede alternar un botónvisible: un valor booleano que indica si la instancia del componente es visibletamaño automático: indica el tamaño y la alineación de una etiqueta para ajustarse al valor de su propiedad de textocondensar en blanco: un valor booleano que indica si los espacios en blanco adicionales, como los espacios y los saltos de línea, deben eliminarse de un componente Label que contiene texto HTMLhabilitado: un valor booleano que indica si el componente puede aceptar la entrada del usuariohtmlText: el texto que mostrará el componente Label, incluido el marcado HTML que expresa los estilos de ese textoseleccionable: un valor booleano que indica si se puede seleccionar el textotexto: el texto plano que se mostrará en el componente Label.visible: un valor booleano que indica si la instancia del componente es visibleajuste de línea: un valor booleano que indica si la etiqueta admite el ajuste de palabrasLos archivos de ayuda son un excelente lugar para obtener más información sobre las propiedades de los componentes que puede configurar en el panel Parámetros de componentes. Aquí están las páginas de livedocs para el Botón y para la Etiqueta.
Gracias por leer y ten cuidado con los próximos consejos rápidos de componentes!
