Share
En este Consejo rápido sobre las herramientas de Flash Professional CS5 veremos los componentes Área de texto y Entrada de texto.
Echemos un vistazo rápido a lo que estamos trabajando en este Consejo rápido:
En la demostración se ven cinco etiquetas, cuatro de ellas son solo etiquetas estáticas que describen para qué sirven los componentes. La etiqueta inferior izquierda muestra cuántos caracteres están disponibles para escribir y cambiarán cada vez que el usuario ingrese texto en el texto de comentarios. La entrada de texto del nombre solo permite números y espacios en mayúsculas y minúsculas. El cuadro de contraseña muestra el texto como una contraseña con asteriscos y permite que solo se ingresen 16 caracteres (ya que la mayoría de las contraseñas tienen una longitud determinada). Los comentarios textArea le permiten al usuario ingresar texto, pero solo permite 250 caracteres. El área de texto con estilo se diseña con una combinación de Formato de texto Objeto y HTML.
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.
Arrastre cinco etiquetas, dos TextInputs y dos TextAreas al escenario.
En el panel Propiedades, asigne a la primera etiqueta el nombre de instancia "nameLabel". Si el panel de Propiedades no se muestra, vaya a Menú> Ventana> Componentes o presione CTRL + F3.
Ajuste la X de la etiqueta a 35.00 y su Y a 45.00
Establezca el ancho de la etiqueta en 100.00 y su altura en 22.00
Crea un nuevo archivo 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 y 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. Agregue lo siguiente a Main.as:
package // Components import fl.controls.Label; importar fl.controls.TextArea; importar fl.controls.TextInput; // Necesitamos extender el clip de película, así que lo importamos import flash.display.MovieClip; // Necesario para dimensionar automáticamente nuestras etiquetas import flash.text.TextFieldAutoSize; // Eventos import flash.events.TextEvent; import flash.events.Event; // Se necesita para el estilo de textArea import flash.text.TextFormat;
Agregue la clase, extienda MovieClip y configure nuestra función de constructor. Agregue lo siguiente a Main.as:
public class Main extiende MovieClip // Labels public var nameLabel: Label; public var passwordLabel: Label; public var commentsLabel: Label; public var numCharsLabel: Label; public var styledLabel: Label; // Entradas de texto public var nameTI: TextInput; public var passwordTI: TextInput; // Área de texto public var commentsTA: TextArea; public var styledTA: TextArea; // Número de caracteres permitidos en el área de comentarios private var numChars: uint = 250; // Se utiliza para el estilo del área de texto var taFormat: TextFormat; // Cadena que se utilizará en textArea var theString: String; función pública Main () // Se usa para configurar nuestros lables setupLabels (); // Se utiliza para configurar el textInputs setupTextInputs (); // Se utiliza para configurar TextFormat para TextArea setupFormat (); // Usamos la configuración de la cadena que usamos en nuestro TextArea setupString (); // Se utiliza para configurar = el Área de texto setupTextAreas ();
Aquí definimos las funciones que se utilizan en nuestro constructor. Esto es lo que haremos:
En el setupTextInputs () función utilizamos el restringir Propiedad para restringir qué carácter puede ingresar el usuario. Dado que este es un nombre propio, restringimos el uso a las letras y espacios en mayúsculas y minúsculas (sin números).
Mediante el uso displayAsPassword, cuando el usuario ingresa texto, la entrada mostrará asteriscos (muy similar a lo que harías en HTML).
Mediante el uso maxChars establecemos un número predefinido de caracteres que el usuario puede ingresar; Aquí pueden ingresar hasta 16 caracteres..
los Formato de texto Es un objeto que vamos a pasar a la TextArea. Aquí establecemos el color, el tamaño y la cursiva en verdadero.
Cuando configuramos la cadena para TextArea, incrustamos HTML, que estará disponible mediante el uso de TextArea htmlText propiedad.
En el setupTextAreas () En la función hacemos que los comentarios TextArea sean editables para que el usuario pueda escribirlos; También establecemos el número máximo de caracteres y configuramos "ajuste de palabra" en verdadero para que las palabras se ajusten al llegar al final de la zona de texto. Establecemos el texto HTML igual a la cadena que creamos y configuramos su formato de texto. El HTML en la cadena anula la formato de texto pero el resto de la cadena hereda lo que hemos puesto en el objeto TextFormat.
Agregue lo siguiente a Main.as
Accentsconagua
función privada setupLabels (): void // Configure el texto para nuestras etiquetas nameLabel.text = "Ingrese su nombre propio"; passwordLabel.text = "Ingrese su contraseña"; commentsLabel.text = "Ingrese sus comentarios"; // Aquí convertimos numChars a una cadena ya que la propiedad de texto espera una cadena numCharsLabel.text = String (numChars) + "caracteres restantes"; styledLabel.text = "Un área de texto con estilo"; // Utilizamos el tamaño automático para que nuestra etiqueta pueda contener todo el texto nameLabel.autoSize = nameLabel.autoSize = TextFieldAutoSize.LEFT; passwordLabel.autoSize = passwordLabel.autoSize = TextFieldAutoSize.LEFT; commentsLabel.autoSize = commentsLabel.autoSize = TextFieldAutoSize.LEFT; numCharsLabel.autoSize = numCharsLabel.autoSize = TextFieldAutoSize.LEFT; styledLabel.autoSize = styledLabel.autoSize = TextFieldAutoSize.LEFT; función privada setupTextInputs (): void // Aquí restringimos la entrada a solo a-z minúscula, a-z mayúscula y espacios nombreTI.restrict = "a-zA-Z"; // Use displayAsPassword para hacer que la entrada de texto se muestre como un campo de contraseña passwordTI.displayAsPassword = true; // Limite la cantidad de caracteres que el usuario puede ingresar ya que la mayoría de las contraseñas passwordTI.maxChars = 16; función privada setupFormat (): void // Aquí configuramos un objeto TextFormat que se usa para agregar // estilo al textArea taFormat = new TextFormat; taFormat.size = 16; taFormat.color = 0x0000FF; taFormat.italic = true; función privada setupString (): void // Esta es la cadena que contiene HTML que pasamos a textArea theString = "Este texto es negritaPodemos cambiar el color a "; theString + ="Rojo tambien mediante el uso de HTML "; theString + =" El resto de este texto se configura con el Formato de texto "; función privada setupTextAreas (): void // Al establecer el área de texto como editable, el usuario puede escribir commentsTA.editable = true; // Establece el número máximo de caracteres que el campo de texto puede contener aquí. Queremos comentarios // Ser 250 caracteres o menos commentsTA.maxChars = numChars; // Establece el ajuste de la palabra en verdadero, las palabras se ajustarán al llegar al final // de la textArea commentsTA.wordWrap = true; commentsTA.addEventListener (TextEvent.TEXT_INPUT, textEntered); styledTA.htmlText = theString; // Aquí configuramos el formato como textArea styledTA.setStyle ("textFormat", taFormat); los textEntered () la función es utilizada por el comentariosTA eventosListener. Aquí obtenemos el número de caracteres disponibles para escribir y actualizar el
etiqueta para mostrar cuántos quedan.
Luego cerramos la clase y el paquete..
función privada textEntered (e: Event): void // Obtiene el número de caracteres disponibles para escribir var charsLeft: uint = numChars - e.target.length; // Convertir charsLeft en una cadena y actualizar la etiqueta numCharsLabel.text = String (charsLeft) + "caracteres restantes"; // cerrar la clase // cerrar el paquete
El uso de textInputs y TextAreas es una excelente manera de permitir que el usuario ingrese texto o muestre texto con estilo.
Notará en el panel de parámetros de componentes de los componentes que puede verificar y seleccionar ciertas propiedades.
La imagen de arriba es para el componente TextArea.
condensar en blanco: un valor booleano que indica si se eliminan espacios en blanco adicionales del componente que contiene texto HTMLeditable: un valor booleano que indica si el usuario puede editar el campo de textohabilitado: un valor booleano que indica si el componente puede aceptar la entrada del usuariohorizontalScrollPolicy: establece la política de desplazamiento para la barra de desplazamiento horizontal. Este puede ser uno de los siguientes valores: ScrollPolicy.ON: La barra de desplazamiento horizontal está siempre activada.ScrollPolicy.OFF: La barra de desplazamiento está siempre apagada.ScrollPolicy.AUTO: La barra de desplazamiento se enciende cuando es necesario.AUTO htmlText: el texto que mostrará el componente Label, incluido el marcado HTML que expresa los estilos de ese textomaxChars: el número máximo de caracteres que un usuario puede ingresar en el campo de texto.restringir: la cadena de caracteres que el campo de texto acepta de un usuariotexto: una cadena que contiene el texto que está en el componente verticalScrollPolicy: la política de desplazamiento para la barra de desplazamiento vertical. Este puede ser uno de los siguientes valores: ScrollPolicy.ON: La barra de desplazamiento está siempre encendida.ScrollPolicy.OFF: La barra de desplazamiento está siempre apagada.ScrollPolicy.AUTO: La barra de desplazamiento se enciende cuando es necesario.AUTO visible: un valor booleano que indica si la instancia del componente es visibleajuste de línea: un valor booleano que indica si el texto se ajusta al final de la líneadisplayAsPassword: un valor booleano que indica si la instancia del componente TextInput actual se creó para contener una contraseña o para contener textoeditable: un valor booleano que indica si el usuario puede editar el campo de textohabilitado: un valor booleano que indica si el componente puede aceptar la entrada del usuariomaxChars: el número máximo de caracteres que un usuario puede ingresar en el campo de texto.restringir: la cadena de caracteres que el campo de texto acepta de un usuariotexto: una cadena que contiene el texto que está en el componente visible: un valor booleano que indica si la instancia del componente es visiblePara ver las propiedades de la etiqueta, asegúrese de consultar mi Consejo rápido anterior sobre etiquetas y botones.
Los archivos de ayuda son un excelente lugar para aprender más sobre las propiedades de los componentes que puede establecer en el panel de parámetros.
Gracias por leer y cuidado con el próximo componente Consejo rápido!
