Uso do componente ScrollPane

Você pode usar o componenteScrollPane para exibir um conteúdo maior do que a área no qual ele foi carregado. Por exemplo, se você tiver uma imagem grande e se houver somente um pequeno espaço para ela em um aplicativo, será possível carregá-la em um ScrollPane. O ScrollPane pode aceitar clipes de filme, arquivos JPEG, PNG, GIF e SWF.

Componentes como o ScrollPane e o UILoader têm eventos complete que permitem determinar quando o carregamento do conteúdo foi concluído. Se você deseja definir as propriedades no conteúdo de um componente ScrollPane ou UILoader, escute o evento complete e defina a propriedade no manipulador de eventos. Por exemplo, o código a seguir cria um ouvinte para o evento Event. COMPLETE e um manipulador de eventos que define a propriedade alpha do conteúdo do ScrollPane para .5: 

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

Se você especificar um local ao carregar o conteúdo no ScrollPane, deverá especificar o local (coordenadas X e Y) como 0, 0. Por exemplo, o código a seguir carrega o ScrollPane corretamente porque a caixa é desenhada no local 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 obter mais informações, consulte a classe ScrollPane na Referência do ActionScript 3.0 para Flash Professional .

Interação do usuário com o componente ScrollPane

Um ScrollPane pode ser ativado ou desativado. Um ScrollPane desativado não recebe entradas de mouse nem de teclado. Um usuário pode utilizar as seguintes teclas para controlar um ScrollPane quando ele tiver o foco:

Tecla

Descrição

Seta para baixo

O conteúdo é movido uma rolagem de linha vertical para cima.

Seta para cima

O conteúdo é movido uma rolagem de linha vertical para baixo.

End

O conteúdo é movido para o final do ScrollPane.

Seta para esquerda

O conteúdo é movido uma rolagem de linha horizontal para a direita.

Seta para direita

O conteúdo é movido uma rolagem de linha horizontal para a esquerda.

Início

O conteúdo é movido para o início do ScrollPane.

End

O conteúdo é movido para o final do ScrollPane.

PageDown

O conteúdo é movido uma página de rolagem vertical para cima.

PageUp

O conteúdo é movido uma página de rolagem vertical para baixo.

Um usuário pode utilizar o mouse para interagir com o ScrollPane em seu conteúdo e nas barras de rolagem vertical e horizontal. O usuário poderá arrastar o conteúdo utilizando o mouse quando a propriedade scrollDrag estiver definida como true . A exibição de um ponteiro de mão no conteúdo indica que o usuário pode arrastar o conteúdo. Diferente da maioria dos outros controles, as ações ocorrem quando o botão do mouse é pressionado e continua até que ele seja solto. Se o conteúdo tiver pardas de tabulação válidas, defina scrollDrag como false. Do contrário, todos os cliques de mouse no conteúdo ativarão o arrastamento da rolagem.

Parâmetros do componente ScrollPane

Você pode definir os parâmetros a seguir para cada instância de ScrollPane no Inspetor de propriedades ou no Inspetor de componentes: horizontalLineScrollSize , horizontalPageScrollSize , horizontalScrollPolicy, scrollDrag, source, verticalLineScrollSize, verticalPageScrollSize e verticalScrollPolicy . Cada um desses parâmetros tem uma propriedade ActionScript correspondente de mesmo nome. Para obter informações sobre os possíveis valores desses parâmetros, consulte a classe ScrollPane na Referência do ActionScript 3.0 para Flash Professional .

Você pode escrever o ActionScript de modo a controlar essas e outras opções do componente ScrollPane usando suas propriedades, métodos e eventos.

Criar um aplicativo com o componente ScrollPane

O procedimento a seguir explica como adicionar um componente ScrollPane a um aplicativo durante a criação. Neste exemplo, o ScrollPane carrega uma imagem de um caminho especificado pela propriedade source .

  1. Crie um novo documento Flash (ActionScript 3.0).

  2. Arraste um componente ScrollPane do painel Componentes para o Palco e atribua a ele o nome de ocorrência aSp .

  3. Abra o painel Ações, selecione Quadro 1 na Linha do tempo principal e digite o seguinte código do ActionScript: 

    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. Selecione Controlar > Testar filme para executar o aplicativo.

Criar uma ocorrência de ScrollPane por meio do ActionScript

O exemplo cria um ScrollPane, define seu tamanho e carrega uma imagem nele usando a propriedade source . Ele também cria dois ouvintes. O primeiro escuta um evento scroll e exibe a posição da imagem quando o usuário rola a tela verticalmente ou horizontalmente. O segundo escuta um evento complete e exibe uma mensagem no painel Saída que informa que o carregamento da imagem foi concluído.

Este exemplo cria um ScrollPane por meio de um ActionScript e coloca um MovieClip (uma caixa vermelha) nele com 150 pixels de largura por 300 pixels de altura.

  1. Crie um novo documento Flash (ActionScript 3.0).

  2. Arraste o componente ScrollPane do painel Componentes para o painel Biblioteca.

  3. Arraste o componente DataGrid do painel Componentes para o painel Biblioteca.

  4. Abra o painel Ações, selecione Quadro 1 na Linha do tempo principal e digite o seguinte código do ActionScript: 

    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. Selecione Controlar > Testar filme para executar o aplicativo.