Uso del componente ScrollPane

Puede utilizar el componente ScrollPane para visualizar contenido demasiado grande para el área en que se esté cargando. Por ejemplo, si se tiene una imagen de gran tamaño pero poco espacio para ella en la aplicación, se podría cargar en un componente ScrollPane. ScrollPane puede aceptar clips de película, así como archivos JPEG, PNG, GIF y SWF.

Los componentes como ScrollPane y UILoader tienen eventos complete que permiten determinar el momento en que termina la carga de contenido. Para definir propiedades en el contenido de un componente ScrollPane o UILoader, es necesario detectar el evento complete y establecer la propiedad en el controlador de eventos. Por ejemplo, el código siguiente crea un detector para el evento Event. COMPLETE y un controlador de eventos que establece la propiedad alpha del contenido de ScrollPane en .5: 

function spComplete(event:Event):void{ 
aSp.content.alpha = .5; 
} 
aSp.addEventListener(Event.COMPLETE, spComplete);

Si se especifica una ubicación al cargar contenido en ScrollPane, se debe especificar la ubicación (coordenadas X e Y) como 0,0. Por ejemplo, el código siguiente carga ScrollPane correctamente porque el cuadro se dibuja en la ubicación 0,0: 

var box:MovieClip = new MovieClip(); 
box.graphics.beginFill(0xFF0000, 1); 
box.graphics.drawRect(0, 0, 150, 300); 
box.graphics.endFill(); 
aSp.source = box;    //load ScrollPane

Para obtener más información, consulte la clase ScrollPane en la Referencia de ActionScript 3.0 para Flash Professional .

Interacción del usuario con el componente ScrollPane

Un componente ScrollPane puede estar activado o desactivado. Si está desactivado, no recibe la entrada del ratón ni del teclado. El usuario puede utilizar las teclas siguientes para controlar un componente ScrollPane cuando esté seleccionado:

Tecla

Descripción

Flecha abajo

Mueve el contenido una línea de desplazamiento vertical hacia arriba.

Flecha arriba

Mueve el contenido una línea de desplazamiento vertical hacia abajo.

Fin

Mueve el contenido hasta la parte inferior del componente ScrollPane.

Flecha izquierda

Desplaza el contenido horizontalmente una línea hacia la derecha.

Flecha derecha

Desplaza el contenido horizontalmente una línea hacia la izquierda.

Inicio

Mueve el contenido hasta la parte superior del componente ScrollPane.

Fin

Mueve el contenido hasta la parte inferior del componente ScrollPane.

Av Pág

Desplaza el contenido verticalmente una página hacia arriba.

Re Pág

Desplaza el contenido verticalmente una página hacia abajo.

El usuario puede utilizar el ratón para interactuar con ScrollPane, tanto en su contenido como en las barras de desplazamiento verticales y horizontales. El usuario puede arrastrar el contenido mediante el ratón si la propiedad scrollDrag está establecida en true . La aparición de un puntero con forma de mano en el contenido indica que el usuario puede arrastrarlo. A diferencia de la mayoría de controles, se producen acciones desde que se presiona el botón del ratón hasta que se suelta. Si el contenido dispone de tabulaciones válidas, debe establecerse scrollDrag en false. De lo contrario, todas las acciones del ratón sobre el contenido invocarán el arrastre de desplazamiento.

Parámetros del componente ScrollPane

Puede establecer los siguientes parámetros para cada instancia de ScrollPane en el inspector de propiedades o en el inspector de componentes: horizontalLineScrollSize , horizontalPageScrollSize , horizontalScrollPolicy, scrollDrag, source, verticalLineScrollSize, verticalPageScrollSize y verticalScrollPolicy . Cada uno de estos parámetros tiene una propiedad de ActionScript del mismo nombre. Para obtener información sobre los valores posibles de estos parámetros, consulte la clase ScrollPane en la Referencia de ActionScript 3.0 para Flash Professional .

Puede escribir código ActionScript para controlar éstas y otras opciones adicionales para los componentes ScrollPane utilizando sus propiedades, métodos y eventos.

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

En el procedimiento siguiente se explica cómo añadir un componente ScrollPane a una aplicación durante la edición. En este ejemplo, ScrollPane carga una imagen de una ruta de acceso especificada por la propiedad source .

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

  2. Arrastre un componente ScrollPane del panel Componentes al escenario y asígnele el nombre de instancia aSp .

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

    import fl.events.ScrollEvent; 
 
aSp.setSize(300, 200); 
 
function scrollListener(event:ScrollEvent):void { 
    trace("horizontalScPosition: " + aSp.horizontalScrollPosition +  
     ", verticalScrollPosition = " + aSp.verticalScrollPosition); 
}; 
aSp.addEventListener(ScrollEvent.SCROLL, scrollListener); 
 
function completeListener(event:Event):void { 
    trace(event.target.source + " has completed loading."); 
}; 
// Add listener. 
aSp.addEventListener(Event.COMPLETE, completeListener); 
 
aSp.source = "http://www.helpexamples.com/flash/images/image1.jpg";

  4. Seleccione Control > Probar película para ejecutar la aplicación.

Creación de una instancia del componente ScrollPane con ActionScript

En el ejemplo se crea un componente ScrollPane, se establece su tamaño y se carga una imagen de dicho componente con la propiedad source. También se crean dos detectores. El primero detecta un evento scroll y muestra la posición de la imagen a medida que el usuario se desplaza vertical o horizontalmente. El segundo detecta un evento complete y muestra un mensaje en el panel Salida que indica que la imagen ha terminado de cargarse.

Este ejemplo crea un componente ScrollPane mediante ActionScript y coloca un componente MovieClip (cuadro rojo) en él, cuyo tamaño es de 150 píxeles (ancho) por 300 píxeles (alto).

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

  2. Arrastre el componente ScrollPane del panel Componentes al panel Biblioteca.

  3. Arrastre el componente DataGrid del panel Componentes al panel Biblioteca.

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

    import fl.containers.ScrollPane; 
import fl.controls.ScrollPolicy; 
import fl.controls.DataGrid; 
import fl.data.DataProvider; 
 
var aSp:ScrollPane = new ScrollPane(); 
var aBox:MovieClip = new MovieClip(); 
drawBox(aBox, 0xFF0000);    //draw a red box 
 
aSp.source = aBox; 
aSp.setSize(150, 200); 
aSp.move(100, 100); 
 
addChild(aSp); 
 
function drawBox(box:MovieClip,color:uint):void { 
            box.graphics.beginFill(color, 1); 
            box.graphics.drawRect(0, 0, 150, 300); 
            box.graphics.endFill();         
}

  5. Seleccione Control > Probar película para ejecutar la aplicación.