Использование компонента ScrollPane

Компонент ScrollPane можно использовать для отображения содержимого, размер которого значительно превышает размер области, в которую оно загружается. Например, если имеется большое изображение, а в приложении для него есть только небольшое место, можно загрузить его в экземпляр ScrollPane. ScrollPane может вмещать фрагменты роликов, а также файлы в формате JPEG, PNG, GIF и SWF.

Компоненты, такие как ScrollPane и UILoader отправляют события complete , что позволяет определять время завершения загрузки. Чтобы задать свойства для содержимого компонента ScrollPane или UILoader, необходимо прослушивать событие complete и задать нужное свойство в обработчике событий. Например, следующий код создает прослушиватель для события Event. COMPLETE и обработчик события, который задает свойству alpha содержимого экземпляра ScrollPane значение 0,5. 

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

Если при загрузке содержимого в экземпляр ScrollPane указывается местоположение, необходимо указать точку с координатами (0, 0). Например следующий код правильно загружает экземпляр ScrollPane, так как окно рисуется в точке с координатами (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

Дополнительные сведения см. в описании класса ScrollPane в справочнике ActionScript® 3.0 для Adobe® Flash® Professional CS5 .

Взаимодействие пользователей с компонентом ScrollPane

Компонент ScrollPane можно включить или отключить. Отключенный ScrollPane не реагирует на информацию, поступающую с клавиатуры или мыши. Когда экземпляр ScrollPane получает фокус, им можно управлять с помощью следующих клавиш.

Клавиша

Описание

«Стрелка вниз»

Содержимое прокручивается вверх на одну строку по вертикали.

«Стрелка вверх»

Содержимое прокручивается вниз на одну строку по вертикали.

End

Содержимое прокручивается в конец экземпляра ScrollPane.

«Стрелка влево»

Содержимое прокручивается вправо на одну линию по горизонтали.

«Стрелка вправо»

Содержимое прокручивается влево на одну линию по горизонтали.

Домашняя страница

Содержимое прокручивается в начало экземпляра ScrollPane.

End

Содержимое прокручивается в конец экземпляра ScrollPane.

Page Down

Содержимое прокручивается вверх на одну страницу по вертикали.

Page Up

Содержимое прокручивается вниз на одну страницу по вертикали.

С помощью мыши пользователь может взаимодействовать как с содержимым экземпляра ScrollPane, так и с его полосами прокрутки по вертикали и горизонтали. Пользователь может перетаскивать содержимое с помощью мыши, если свойству scrollDrag задано значение true . Появление указателя «рука» на содержимом говорит о том, что его можно перетаскивать. В отличие от большинства других элементов управления, действия начинаются в момент нажатия кнопки мыши и продолжаются, пока пользователь ее не отпустит. Если содержимое имеет действительные позиции табуляции, свойству scrollDrag необходимо задать значение false. В противном случае все щелчки мыши по содержимому будут вызывать перетаскивание прокрутки.

Параметры компонента ScrollPane

В Инспекторе свойств или Инспекторе компонентов можно задать следующие параметры для каждого экземпляра ScrollPane: horizontalLineScrollSize , horizontalPageScrollSize , horizontalScrollPolicy, scrollDrag, source, verticalLineScrollSize, verticalPageScrollSize и verticalScrollPolicy . Каждый из этих параметров имеет соответствующее свойство ActionScript с тем же именем. Сведения о возможных значениях этих параметров см. в описании класса ScrollPane в справочнике ActionScript® 3.0 для Adobe® Flash® Professional CS5 .

Можно создать код ActionScript для управления этими и дополнительными параметрами компонента ScrollPane с помощью его свойств, методов и событий.

Создание приложения с компонентом ScrollPane

Ниже описывается процедура добавления компонента ScrollPane в приложение в ходе разработки. В этом примере экземпляр ScrollPane загружает изображение из местоположения, указанного в свойстве source .

  1. Создайте новый документ Flash (ActionScript 3.0).

  2. Перетащите компонент ScrollPane с панели «Компоненты» в рабочую область и присвойте ему имя экземпляра aSp .

  3. Откройте панель «Действия», выберите «Кадр 1» на главной временной шкале и введите следующий код 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. Для запуска приложения выберите команды «Управление» > «Тестировать ролик».

Создание компонента ScrollPane с помощью ActionScript

В этом примере создается экземпляр ScrollPane, задается его размер, и загружается изображение с помощью свойства source . Кроме того, создаются два прослушивателя событий. Первый прослушивает событие scroll и отображает позицию изображения по мере прокручивания по вертикали или горизонтали. Второй прослушивает событие complete и отображает на панели вывода сообщение о том, что загрузка изображения завершена.

В этом примере с помощью ActionScript создается экземпляр ScrollPane, в который помещается объект MovieClip (красное окно) шириной 150 пикселов и высотой 300 пикселов.

  1. Создайте новый документ Flash (ActionScript 3.0).

  2. Перетащите компонент ScrollPane с панели «Компоненты» на панель «Библиотека».

  3. Перетащите компонент DataGrid с панели «Компоненты» на панель «Библиотека».

  4. Откройте панель «Действия», выберите «Кадр 1» на главной временной шкале и введите следующий код 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. Для запуска приложения выберите команды «Управление» > «Тестировать ролик».