Korzystanie ze składnika ScrollPane

Składnik ScrollPane umożliwia wyświetlanie treści zbyt dużej, by zmieściła się w obszarze, do którego jest ładowana. Przykład: jeśli istnieje duży obraz i dostępna jest tylko mała ilość miejsca w aplikacji, można załadować obraz do składnika ScrollPane. Składnik ScrollPane akceptuje klipy filmowe oraz pliki w formatach JPEG, PNG, GIF i SWF.

Składniki, takie jak ScrollPane i UILoader zawierają zdarzenia complete , dzięki którym możliwe jest określenie, kiedy treść została załadowana. Jeśli wymagane jest ustawienie właściwości treści składnika ScrollPane lub UILoader, należy wykryć zdarzenie complete i ustawić właściwość w module obsługi zdarzeń. Przykład: poniższy kod tworzy detektor zdarzeń dla zdarzenia Event.Zdarzenie COMPLETE oraz moduł obsługi zdarzeń, który ustawia dla właściwości alpha treści składnika ScrollPane wartość .5: 

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

Jeśli położenie zostanie określone podczas ładowania treści do składnika ScrollPane, należy określić je (współrzędne X i Y) jako 0, 0. Przykład: poniższy kod ładuje składnik ScrollPane poprawnie, ponieważ pole zostaje narysowane w położeniu 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

Więcej informacji zawiera opis klasy ScrollPane w Skorowidzu języka ActionScript 3.0 dla programu Flash Professional .

Posługiwanie się składnikiem ScrollPane

Składnik ScrollPane może być włączony lub wyłączony. W stanie disabled składnik ScrollPane nie odbiera danych wprowadzanych za pomocą klawiatury lub myszy. Użytkownik może korzystać z następujących klawiszy w celu sterowania aktywnym składnikiem ScrollPane:

Klucz

Opis

Strzałka w dół

Treść przesuwa się w górę o jedną linię przewijania w pionie.

Strzałka w górę

Treść przesuwa się w dół o jedną linię przewijania w pionie.

End

Treść przesuwa się do dołu składnika ScrollPane.

Strzałka w lewo

Treść przesuwa się w prawo o jedną linię przewijania w poziomie.

Strzałka w prawo

Treść przesuwa się w lewo o jedną linię przewijania w poziomie.

Home

Treść przesuwa się do góry składnika ScrollPane.

End

Treść przesuwa się do dołu składnika ScrollPane.

PageDown

Treść przesuwa się w górę o jedną stronę przewijania w pionie.

PageUp

Treść przesuwa się w dół o jedną stronę przewijania w pionie.

Użytkownik może użyć myszy w celu posługiwania się składnikiem ScrollPane w zakresie jego treści oraz w obszarze pasków przewijania w poziomie i w pionie. Użytkownik może przeciągać treść za pomocą myszy, gdy dla właściwości scrollDrag ustawiona jest wartość true . Jeśli na obszarze treści widoczny jest wskaźnik w postaci dłoni, oznacza to, że użytkownik może przeciągać treść. W tym przypadku — inaczej niż w większości elementów sterowania — operacja rozpoczyna się po naciśnięciu przycisku myszy i jest kontynuowana do jego zwolnienia. Jeśli treść zawiera poprawne punkty tabulacji, dla scrollDrag należy ustawić wartość false. W przeciwnym wypadku każde naciśnięcie przycisku myszy w obrębie treści będzie powodowało przeciąganie z przewijaniem.

Parametry składnika ScrollPane

Dla każdej instancji składnika ScrollPane można w Inspektorze właściwości lub w Inspektorze składników ustawić następujące parametry: horizontalLineScrollSize , horizontalPageScrollSize , horizontalScrollPolicy, scrollDrag, source, verticalLineScrollSize, verticalPageScrollSize i verticalScrollPolicy . Dla każdego z tych parametrów istnieje odpowiednia właściwość ActionScript o takiej samej nazwie. Więcej informacji na temat możliwych wartości tych parametrów zawiera opis klasy ScrollPane w Skorowidzu języka ActionScript 3.0 dla programu Flash Professional .

Istnieje możliwość napisania kodu ActionScript w celu kontrolowania tych i innych opcji dla składnika ScrollPane z wykorzystaniem jego właściwości, metod i zdarzeń.

Tworzenie aplikacji ze składnikiem ScrollPane

Poniższa procedura wyjaśnia jak podczas tworzenia dodać składnik ScrollPane do aplikacji. W tym przykładzie składnik ScrollPane ładuje obraz ze ścieżki określonej przez właściwość source .

  1. Utwórz nowy dokument Flash (ActionScript 3.0).

  2. Przeciągnij składnik ScrollPane z panelu Składniki na stół montażowy i nadaj nazwę instancji aSp .

  3. Otwórz panel Operacje, zaznacz klatkę nr 1 na głównej osi czasu i wprowadź następujący kod 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. Wybierz polecenia Sterowanie > Testuj film, aby uruchomić aplikację.

Tworzenie instancji składnika ScrollPane przy użyciu kodu ActionScript

Przykład prezentuje tworzenie instancji ScrollPane, określanie jej rozmiaru oraz ładowanie do niej obrazu za pomocą właściwości source . W przykładzie tworzone są również dwa detektory. Pierwszy z nich wykrywa zdarzenie scroll i wyświetla położenie obrazu, gdy użytkownik przewija w poziomie i w pionie. Drugi wykrywa zdarzenie complete , a po wykryciu wyświetla na panelu Wyjście komunikat z informacją o zakończeniu ładowania obrazu.

W tym przykładzie przedstawiono tworzenie instancji ScrollPane za pomocą kodu ActionScript oraz umieszczanie w instancji obiektu MovieClip (czerwone pole) o szerokości 150 pikseli i wysokości 300 pikseli.

  1. Utwórz nowy dokument Flash (ActionScript 3.0).

  2. Przeciągnij składnik ScrollPane z panelu Składniki do panelu Biblioteka.

  3. Przeciągnij składnik DataGrid z panelu Składniki do panelu Biblioteka.

  4. Otwórz panel Operacje, zaznacz klatkę nr 1 na głównej osi czasu i wprowadź następujący kod 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. Wybierz polecenia Sterowanie > Testuj film, aby uruchomić aplikację.