Uso del componente UIScrollBar

El componente UIScrollBar permite añadir una barra de desplazamiento a un campo de texto. Se puede añadir una barra de desplazamiento a un campo de texto durante la edición o en tiempo de ejecución con ActionScript. Para utilizar el componente UIScrollBar, es necesario crear un campo de texto en el escenario y arrastrar el componente UIScrollBar del panel Componentes a cualquier cuadrante del recuadro de delimitación del campo de texto.

Si la longitud de la barra de desplazamiento es inferior al tamaño combinado de sus flechas de desplazamiento, no se mostrará correctamente. Uno de los botones de flecha quedará oculto detrás del otro. Flash no proporciona funciones de comprobación de errores para estos casos. Es aconsejable ocultar la barra de desplazamiento con ActionScript. Si se cambia el tamaño de la barra de desplazamiento de forma que no haya espacio suficiente para el cuadro de desplazamiento (deslizador), Flash oculta el cuadro de desplazamiento.

El componente UIScrollBar funciona como cualquier otra barra de desplazamiento. Contiene botones de flecha en ambos extremos y una guía de desplazamiento y un cuadro de desplazamiento (deslizador) en medio. Puede asociarse con cualquier borde de un campo de texto y utilizarse tanto vertical como horizontalmente.

Para obtener información sobre TextField, consulte la clase TextField en la Referencia de ActionScript 3.0 para Flash Professional .

Interacción del usuario con el componente UIScrollBar

A diferencia de muchos otros componentes, el componente UIScrollBar puede recibir entradas continuas del ratón como, por ejemplo, cuando el usuario mantiene presionado el botón del ratón en lugar de tener que hacer clic repetidas veces.

El componente UIScrollBar no permite la interacción con el teclado.

Parámetros del componente UIScrollBar

Puede establecer los siguientes parámetros de edición para cada instancia del componente UIScrollBar en el inspector de propiedades o en el inspector de componentes: direction y scrollTargetName . Cada uno de estos parámetros tiene una propiedad de ActionScript del mismo nombre.

Se puede escribir código ActionScript para definir opciones adicionales para instancias de UIScrollBar mediante métodos, propiedades y eventos de clase. Para obtener más información, consulte la clase UIScrollBar en la Referencia de ActionScript 3.0 para Flash Professional .

Creación de una aplicación con el componente UIScrollBar

En el procedimiento siguiente se describe cómo añadir un componente UIScrollBar a una aplicación durante la edición.

  1. Cree un nuevo documento de Flash (ActionScript 3.0).

  2. Cree un campo de texto dinámico con la altura suficiente para admitir una o dos líneas de texto y asígnele el nombre myText en el inspector de propiedades.

  3. En el inspector de propiedades, establezca el Tipo de línea del campo de introducción de texto en Multilínea o en Multilínea sin ajuste si tiene previsto utilizar la barra de desplazamiento horizontalmente.

  4. Abra el panel Acciones, seleccione el fotograma 1 en la línea de tiempo principal e introduzca el código ActionScript siguiente para llenar la propiedad text ; de este modo, el usuario deberá desplazarse por el texto para verlo completamente: 

    myText.text="When the moon is in the seventh house and Jupiter aligns with Mars, then peace will guide the planet and love will rule the stars."
    Nota: asegúrese de que el campo de texto en el escenario es lo suficientemente pequeño como para tener que desplazarse por él para poder ver todo el texto. Si no lo es, la barra de desplazamiento no aparece o puede aparecer simplemente como dos líneas sin control deslizador, que es la parte que se arrastra para desplazarse por el contenido.

  5. Compruebe si está activado el ajuste a objetos (Ver > Ajustar > Ajustar a objetos).

  6. Arrastre una instancia de UIScrollBar del panel Componentes al campo de introducción de texto junto al lado donde desea asociarlo. El componente debe solaparse con el campo de texto al soltar el ratón, para que quede correctamente vinculado al campo. Asígnele el nombre de instancia mySb .

    La propiedad scrollTargetName del componente se llena automáticamente con el nombre de instancia del campo de texto en el inspector de propiedades y el inspector de componentes. Si no aparece en la ficha Parámetros, es posible que no haya solapado suficientemente la instancia de UIScrollBar.

  7. Seleccione Control > Probar película.

Creación de una instancia del componente UIScrollBar con ActionScript

Se puede crear una instancia de UIScrollBar con ActionScript y asociarla con un campo de texto en tiempo de ejecución. En el ejemplo siguiente se crea una instancia de UIScrollBar orientada horizontalmente, que se adjunta a la parte inferior de la instancia del campo de texto denominada myTxt (cargada con texto desde una dirección URL). En el ejemplo también se define el tamaño de la barra de desplazamiento para que coincida con el tamaño del campo de texto:

  1. Cree un nuevo documento de Flash (ActionScript 3.0).

  2. Arrastre el componente ScrollBar al panel Biblioteca.

  3. Abra el panel Acciones, seleccione el fotograma 1 en la línea de tiempo principal e introduzca el código ActionScript siguiente: 

    import flash.net.URLLoader; 
import fl.controls.UIScrollBar; 
import flash.events.Event; 
 
var myTxt:TextField = new TextField(); 
myTxt.border = true; 
myTxt.width = 200; 
myTxt.height = 16; 
myTxt.x = 200; 
myTxt.y = 150; 
 
var mySb:UIScrollBar = new UIScrollBar(); 
mySb.direction = "horizontal"; 
// Size it to match the text field. 
mySb.setSize(myTxt.width, myTxt.height);  
 
// Move it immediately below the text field. 
mySb.move(myTxt.x, myTxt.height + myTxt.y); 
 
// put them on the Stage 
addChild(myTxt); 
addChild(mySb); 
// load text 
var loader:URLLoader = new URLLoader(); 
var request:URLRequest = new URLRequest("http://www.helpexamples.com/flash/lorem.txt"); 
loader.load(request); 
loader.addEventListener(Event.COMPLETE, loadcomplete); 
 
function loadcomplete(event:Event) { 
    // move loaded text to text field 
    myTxt.text = loader.data; 
    // Set myTxt as target for scroll bar. 
    mySb.scrollTarget = myTxt; 
}

  4. Seleccione Control > Probar película.