7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Flash

Introducción rápida: Componentes Input y Text Area en Flash

Scroll to top
Read Time: 9 mins

Spanish (Español) translation by Steven (you can also view the original English article)

En esta introducción rápida sobre las herramientas de Flash Professional CS5 vamos a ver los componentes Input y Text Area.


Resultado final

Echemos un vistazo rápido a lo que estaremos trabajando en esta introducción rápida:


Breve descripción general

En la demostración, verás cinco etiquetas, cuatro de ellas son solo etiquetas estáticas que describen para qué son los componentes. La etiqueta inferior izquierda muestra cuántos caracteres están disponibles para escribir y cambiará cada vez que el usuario ingrese texto en la caja de comentarios. La entrada de texto para el nombre solo permite números y espacios en mayúscula y minúscula. El cuadro de contraseña muestra el texto como una contraseña con asteriscos y permite ingresar solo 16 caracteres (ya que la mayoría de las contraseñas tienen una longitud establecida). Los comentarios en el textArea permiten al usuario ingresar texto, pero solo permiten 250 caracteres. El estilo del área de texto se diseña utilizando una combinación del objeto TextFormat y HTML.


Paso 1: Configuración del documento

Abre un nuevo documento Flash y establece las siguientes propiedades:

  • Tamaño del documento: 450 * 400
  • Color de fondo: #FFFFFF

Paso 2: Añade componentes al escenario

Abre la ventana de componentes yendo a Menú > Ventana > Componentes o presiona CTRL + F7.

Arrastra cinco etiquetas, dos TextInputs y dos TextAreas al escenario.

En el panel Propiedades, asigna a la primera etiqueta el nombre de instancia "nameLabel". Si no se muestra el panel Propiedades, ve a Menú > Ventana > Componentes o presiona CTRL + F3.

Establece la X de la etiqueta en 35.00 y su Y en 45.00

Establece el ancho de la etiqueta en 100.00 y su altura en 22.00

  • En el panel Propiedades, asigna a la segunda etiqueta el nombre de instancia "passwordLabel", X: 35, Y: 119, W: 100, H: 22.
  • En el panel Propiedades, asigna a la tercera etiqueta el nombre de instancia "commentsLabel", X: 35, Y: 209, W: 100, H: 22.
  • En el panel Propiedades, asigna a la cuarta etiqueta el nombre de instancia "numCharsLabel", X: 35, Y: 354, W: 100, H: 22.
  • En el panel Propiedades, asigna a la quinta etiqueta el nombre de instancia "styledLabel", X: 294, Y: 45, W: 100, H: 22.
  • En el panel Propiedades, asigna al primer TextInput el nombre de instancia "nameTI", X: 35, Y: 77, W: 100, H: 22.
  • En el panel Propiedades, asigna al segundo TextInput el nombre de instancia "passwordTI", X: 35, Y: 155, W: 100, H: 22.
  • En el panel Propiedades, asigna al primer TextArea el nombre de instancia "commentsTA", X: 35, Y: 240, W: 180, H: 100.
  • En el panel Propiedades, asigna al segundo TextArea el nombre de instancia "styledTA", X: 249, Y: 79, W: 172, H: 162.

Paso 3: Importar clases

Crea un nuevo archivo ActionScript y asígnale el nombre Main.as. Declararemos nuestros componentes en el Main.as por lo que necesitamos desactivar "declarar automáticamente instancias del escenario", la ventaja de hacerlo es que obtienes sugerencias de código para la instancia.

Ve a Menú > Archivo > Configuración de publicación y haz clic en Configuración junto a Script [Actionscript 3].

Desmarca "declarar automáticamente instancias del escenario".

En Main.as, abre la declaración del paquete e importa las clases que usaremos. Agrega lo siguiente al Main.as:


Paso 4: Configurar la clase principal o 'Main'

Agrega la clase, extiende MovieClip y configura nuestra función Constructor. Agrega lo siguiente a Main.as:


Paso 5: Funciones del constructor principal

Aquí definimos las funciones que se utilizan en nuestro constructor. Esto es lo que haremos:

En la función setupTextInputs() usamos la propiedad restrict para restringir qué carácter puede ingresar el usuario. Dado que este es un nombre propio, restringimos el uso a letras mayúsculas y minúsculas y espacios (sin números).

Al usar displayAsPassword, cuando el usuario ingresa texto, la entrada mostrará asteriscos (muy similar a lo que harías en HTML).

Mediante el uso de maxChars establecemos un número predefinido de caracteres que el usuario puede introducir; aquí pueden introducir hasta 16 caracteres.

El TextFormat es un objeto que pasaremos al TextArea. Aquí establecemos el color, el tamaño y establecemos la cursiva en verdadero.

Cuando configuramos la cadena para el TextArea incrustamos HTML, que estará disponible en textArea mediante la propiedad htmlText.

En la función setupTextAreas() hacemos que los comentarios TextArea sean editables para que el usuario pueda escribirlos; también establecemos el número máximo de caracteres y establecemos "ajuste de palabra" en verdadero para que las palabras se ajusten al llegar al final del área de texto. Establecemos el htmlText igual a la cadena que creamos y configuramos su formato de texto. El HTML en la cadena anula el textFormat pero el resto de la cadena hereda lo que hemos puesto en el objeto TextFormat.

Agrega lo siguiente al Main.as


Paso 6: Definir la función textEntered

La función textEntered() es utilizada por el commentsTA eventsListener. Aquí obtenemos el número de caracteres disponibles para escribir y actualizar la
etiqueta para mostrar cuántos quedan.

Luego cerramos la clase y el paquete.


Conclusión

El uso de textInputs y TextAreas es una excelente manera de permitir que el usuario escriba texto o muestre texto con estilo.

Observarás en el panel de parámetros de componentes que puedes comprobar y seleccionar ciertas propiedades de los componentes.

La imagen anterior es para el componente TextArea

Propiedades para el componente TextArea

  • condenseWhite: un valor booleano que indica si se elimina el espacio en blanco adicional del componente que contiene texto HTML
  • editable: un valor booleano que indica si el campo de texto puede ser editado por el usuario
  • enabled: un valor booleano que indica si el componente puede aceptar la entrada del usuario
  • horizontalScrollPolicy: establece la directiva de desplazamiento de la barra de desplazamiento horizontal. Este puede ser uno de los siguientes valores:
    • ScrollPolicy.ON: La barra de desplazamiento horizontal siempre está activada.
    • ScrollPolicy.OFF: La barra de desplazamiento siempre está desactivada.
    • ScrollPolicy.AUTO: La barra de desplazamiento se activa cuando es necesario.
    • El valor predeterminado es AUTO
  • htmlText: el texto que mostrará el componente Label, incluido el marcado HTML que expresa los estilos de ese texto
  • maxChars: el número máximo de caracteres que un usuario puede introducir en el campo de texto.
  • restrict: la cadena de caracteres que el campo de texto acepta de un usuario
  • text: una cadena que contiene el texto que se encuentra en el componente
  • verticalScrollPolicy: la directiva de desplazamiento de la barra de desplazamiento vertical. Este puede ser uno de los siguientes valores:
    • ScrollPolicy.ON: La barra de desplazamiento siempre está activada.
    • ScrollPolicy.OFF: La barra de desplazamiento siempre está desactivada.
    • ScrollPolicy.AUTO: La barra de desplazamiento se activa cuando es necesario.
    • El valor predeterminado es AUTO
  • visible: un valor booleano que indica si la instancia del componente estará visible
  • wordWrap: un valor booleano que indica si el texto se ajusta al final de la línea

Propiedades para TextInput

  • displayAsPassword: un valor booleano que indica si la instancia actual del componente TextInput se creó para contener una contraseña o para contener texto
  • editable: un valor booleano que indica si el campo de texto puede ser editado por el usuario
  • enabled: un valor booleano que indica si el componente puede aceptar la entrada del usuario
  • maxChars: el número máximo de caracteres que un usuario puede introducir en el campo de texto.
  • restrict: la cadena de caracteres que el campo de texto acepta de un usuario
  • text: una cadena que contiene el texto que se encuentra en el componente
  • visible: un valor booleano que indica si la instancia del componente está visible

Para ver las propiedades de la etiqueta, asegúrate de consultar mi anterior introducción rápida en etiquetas y botones.

Los archivos de ayuda son un excelente lugar para obtener más información sobre las propiedades de los componentes que puedes establecer en el panel de parámetros.

¡Gracias por leer y espera la próxima introducción rápida a los componentes!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.