El campo de texto dinámico.

Para empezar con nuestro proyecto necesitamos crear campo de texto dinámico (dynamic text). Existen varias maneras de crear texto desplázale o scroll. Es fácil conseguir que los campos de texto dinámico se puedan desplazar, ya sea mediante comandos de menú o el selector de bloque de texto.

También puede añadir un componente ScrollBar a un campo de texto para poder desplazarlo. Pero no lo utilizaremos en este artículo, ya que la idea primordial es hacerlo de forma manual y personalizada.

Para convertir un bloque de texto dinámico en desplázale, sigamos uno de estos procedimientos: Haz doble clic con la tecla Mayús presionada en el selector del bloque de texto dinámico.

  • Selecciona el bloque de texto dinámico con la herramienta Selección y selecciona Texto > Desplazamiento permitido.
  • Selecciona el bloque de texto dinámico con la herramienta Selección. Haz clic con el botón derecho del ratón en el bloque de texto dinámico y selecciona Texto > Desplazamiento permitido.

Puedes establecer los atributos de fuente y párrafo del texto. Los atributos de fuente incluyen la familia de fuentes, el tamaño en puntos, el estilo, el color, el espaciado entre caracteres, el ajuste automático entre caracteres y la posición del carácter. Los atributos de párrafo incluyen la alineación, los márgenes, las sangrías y el espacio interlineal.

Sugerencias:

Cuando utilices texto de tamaño pequeño en un documento de Flash, ten en cuenta las indicaciones siguientes:

  • El texto muy pequeño (por debajo de 8 puntos) no se ve claramente, incluso cuando la opción Texto suavizado está seleccionada.
  • El texto en sans serif, como Helvetica o Arial, es más claro en los tamaños pequeños que el texto serif.

Algunos estilos de tipo, como negrita y cursiva, pueden reducir la legibilidad del texto en los tamaños pequeños.

En ocasiones, el texto en Flash se ve más pequeño que el texto del mismo tamaño de punto que se muestra en otras aplicaciones.

Propiedades de campos de texto dinámico y de entrada:

Para activar las propiedades, recuerda que debes seleccionar el campo de texto.

  • En Nombre de instancia, introduce el nombre de instancia para el campo de texto.
  • Bloquea la altura, anchura y ubicación del texto.
  • Selecciona el tipo y el estilo de fuente.
  • Selecciona Multilínea para ver el texto en varias líneas, Línea única para verlo en una sola línea, o Multilínea sin ajuste para que el texto se distribuya en varias líneas sólo si el último carácter es un carácter de cambio de renglón como el enter.
  • Haz clic en el botón Seleccionable para permitir que los usuarios seleccionen el texto dinámico. Anula la selección de esta opción para impedir que los usuarios seleccionen el texto dinámico.
  • Haz clic en el botón Generar texto como HTML para conservar el formato de texto enriquecido, como fuentes e hipervínculos, con las etiquetas HTML adecuadas.
  • Haz clic en el botón Mostrar borde para que aparezca un borde negro y un fondo blanco para el campo de texto.
  • En Variable, especifica el nombre de la variable del campo de texto.
  • Selecciona las opciones de caracteres correspondientes a los contornos de fuentes incorporadas. En el cuadro de diálogo Opciones de caracteres, haz clic en Ningún carácter para que no se incorporen contornos de fuente o en Especificar rango para incorporarlos. Cuando se selecciona Especificar rango, puedes seleccionar una o más opciones de la lista de desplazamiento. Escribe únicamente los caracteres que desees incorporar al documento, o haz clic en Relleno automático para copiar cada carácter concreto del texto seleccionado en el cuadro de texto. Haz clic en Aceptar.

Creación del código para el texto desplazable o scroll

Ahora el paso a seguir es asignarle al campo de variable un nombre para poder manipularlo con Action Script, en este caso se llamará “ texto ”. Cuando ya lo tengamos creado, debes hacer clic en el botón de la derecha, y presionar donde dice "Scrollable" y por último para terminar con las características del texto, marcar el tipo de línea “ Multiline ”.

Ahora le toca el turno a las flechas:

Primero dibuja una y la conviertes en un Botón presionando la tecla F8 (Insertar | Convertir en Símbolo) y le asignas la siguiente acción, para determinar cuando esta siendo presionado o no. 

on (press) { 
    lPressed = true; 
    } 

on (release) {
lPressed = false;
}

Luego con el Botón seleccionado, presionas la tecla F8 (Insertar | Convertir en Símbolo) y creas un Clip de Película (Movie Clip) y dentro quedará el botón, al cual debes asignarle la siguiente acción: 

onClipEvent (enterFrame) { 
if (lPressed) { 
_root.texto.scroll -= 1; 
} 
}

Ya tienes la flecha que sube el texto. Ahora debes copiar el botón, le das la vuelta (para hacer la flecha que apunta hacia abajo) y le cambiamos el “ -=1 ” por “ +=1 ”. Debe quedar así: 

 on (press) {
onClipEvent (enterFrame) { 

if (lPressed) { 
_root.texto.scroll += 1; }

} 
}

Aquí está la explicación del código:

Las acciones del Clip de película (Movie Clip), dicen que si estamos apretando el Botón, “ lPressed ” es correcto, pero si soltamos, “ lPressed ” es incorrecto.

En las acciones del Botón, (en la flecha de abajo por ejemplo) dice que si estamos apretando (“ lPressed ”) el texto suba un renglón, entonces hasta que “ lPressed ” sea incorrecto, el texto seguirá subiendo hasta que se acabe. En el caso de la flecha para arriba, lo contrario.

Algunos se preguntarán por qué hacemos todo esto si podemos asignarle a un botón el código (Ejemplo Simple click): 

 on (press) {
on (press) { 
texto.scroll = texto.scroll +1; 
} 
}

Es simple: si hacemos esto, el texto solo bajaría una línea por cada clic, y eso no es lo que se pretende (se los digo por experiencia personal :P).

Truco Interesante:

También se puede hacer que el texto se desplace automáticamente solo al pasar el Mouse. La acción debe ser similar a esta: 

on (press) {
on (rollOver){ 
lMouseover = true; 
} 

on (rollOut){ 
lMouseover = false; 
}  
}

El código del onClipEvent (enterFrame) queda igual, lo único que debes cambiar es lPressed por lMouseover y listo.

Bueno, espero que les haya servido para algo el artículo, y mejor si les sirvió para crear un scroll :D.

Descarga el Ejemplo en Flash.

Supervisión por: Javier Fernández